agentic email invite html

frontend/src/components/AddEmployeeForm.jsx

@@ -1,4 +1,4 @@
-import { Plus } from "lucide-react";
+import { Info, Lock, Mail, Plus, User, UsersRound } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { createOrgMember, createOrgSection, listOrgSections } from "../api";
 
@@ -6,21 +6,30 @@ const EMAIL_LOCAL_PATTERN = /^[A-Za-z0-9](?:[A-Za-z0-9._-]{0,62}[A-Za-z0-9])?$/;
 
 function RequiredLabel({ children }) {
   return (
-    <span className="org-setup-label-text">
+    <>
       {children}
-      <span className="org-setup-required" aria-hidden="true">*</span>
-    </span>
+      <span className="add-user-required" aria-hidden="true">*</span>
+    </>
   );
 }
 
 function SetupField({ label, error, children, hint }) {
   return (
-    <label className={`org-setup-field${error ? " has-error" : ""}`}>
-      {label}
+    <div className={`add-user-field${error ? " has-error" : ""}`}>
+      {label && <span className="add-user-label">{label}</span>}
       {children}
-      {hint && <small className="org-setup-field-hint">{hint}</small>}
-      {error && <span className="org-setup-field-error" role="alert">{error}</span>}
-    </label>
+      {hint && <small className="add-user-hint">{hint}</small>}
+      {error && <span className="add-user-error" role="alert">{error}</span>}
+    </div>
+  );
+}
+
+function InputWrap({ icon: Icon, children }) {
+  return (
+    <div className="add-user-input-wrap">
+      <Icon size={18} className="add-user-field-icon" aria-hidden="true" />
+      {children}
+    </div>
   );
 }
 
@@ -195,32 +204,36 @@ export default function AddEmployeeForm({
   }
 
   const formClass = variant === "inline"
-    ? "org-setup-form employee-add-form"
+    ? "org-setup-form employee-add-form employee-add-form-inline"
     : "people-drawer-form employee-add-form";
 
   return (
     <form className={formClass} onSubmit={handleSubmit} noValidate>
-      <div className={variant === "inline" ? "org-setup-form-shell" : undefined}>
-        <div className="people-drawer-row">
+      <div className={variant === "inline" ? "org-setup-form-shell" : "add-user-form-body"}>
+        <div className="add-user-row">
           <SetupField
             label={<RequiredLabel>First name</RequiredLabel>}
             error={fieldErrors.first_name}
           >
-            <input
-              value={form.first_name}
-              onChange={(event) => updateField("first_name", event.target.value)}
-              placeholder="Rahul"
-            />
+            <InputWrap icon={User}>
+              <input
+                value={form.first_name}
+                onChange={(event) => updateField("first_name", event.target.value)}
+                placeholder="Rahul"
+              />
+            </InputWrap>
           </SetupField>
           <SetupField
             label={<RequiredLabel>Last name</RequiredLabel>}
             error={fieldErrors.last_name}
           >
-            <input
-              value={form.last_name}
-              onChange={(event) => updateField("last_name", event.target.value)}
-              placeholder="Sharma"
-            />
+            <InputWrap icon={User}>
+              <input
+                value={form.last_name}
+                onChange={(event) => updateField("last_name", event.target.value)}
+                placeholder="Sharma"
+              />
+            </InputWrap>
           </SetupField>
         </div>
 
@@ -229,48 +242,41 @@ export default function AddEmployeeForm({
           error={fieldErrors.email_local}
           hint="This will be their login email address on your company domain."
         >
-          <div className="org-setup-email-field">
-            <input
-              value={form.email_local}
-              onChange={(event) => updateField("email_local", event.target.value)}
-              placeholder="rahul"
-            />
+          <div className="add-user-email-field">
+            <InputWrap icon={Mail}>
+              <input
+                value={form.email_local}
+                onChange={(event) => updateField("email_local", event.target.value)}
+                placeholder="rahul"
+              />
+            </InputWrap>
             <span>@{companyDomain}</span>
           </div>
         </SetupField>
 
-        <SetupField
-          label={<RequiredLabel>Invitation email</RequiredLabel>}
-          error={fieldErrors.invitation_email}
-          hint={`Personal email where aGentic Email sends the setup invite from @${platformDomain}.`}
-        >
-          <input
-            type="email"
-            value={form.invitation_email}
-            onChange={(event) => updateField("invitation_email", event.target.value)}
-            placeholder="rahul@gmail.com"
-            disabled={!form.send_invitation}
-          />
-        </SetupField>
-
         <SetupField
           label="Role"
-          hint="Users can access email. User Admins can manage people."
+          hint="User can access email. User Admin can manage people."
         >
-          <select
-            value={form.org_role}
-            onChange={(event) => updateField("org_role", event.target.value)}
-          >
-            <option value="user">User</option>
-            <option value="admin">User Admin</option>
-          </select>
+          <InputWrap icon={Info}>
+            <select
+              value={form.org_role}
+              onChange={(event) => updateField("org_role", event.target.value)}
+            >
+              <option value="user">User</option>
+              <option value="admin">User Admin</option>
+            </select>
+          </InputWrap>
         </SetupField>
 
-        <fieldset className="people-groups-field">
-          <legend>Section</legend>
-          <p className="org-setup-field-hint people-section-hint">
-            Department or team. Group emails are managed separately under Groups.
-          </p>
+        <fieldset className="add-user-section-field">
+          <legend className="add-user-label">
+            <UsersRound size={18} className="add-user-field-icon add-user-legend-icon" aria-hidden="true" />
+            Section
+          </legend>
+          <small className="add-user-hint add-user-hint-tight">
+            Add to a department or team (optional). Group emails are managed under Groups.
+          </small>
           <div className="people-groups-options">
             {sectionsLoading ? (
               <span className="people-section-loading">Loading sections…</span>
@@ -311,56 +317,80 @@ export default function AddEmployeeForm({
               </button>
             </div>
           )}
-          {sectionError && <span className="org-setup-field-error" role="alert">{sectionError}</span>}
+          {sectionError && <span className="add-user-error" role="alert">{sectionError}</span>}
         </fieldset>
 
+        <div className="add-user-section-divider" aria-hidden="true" />
+
+        <h3 className="add-user-section-title">Account setup</h3>
+
+        <SetupField
+          label={form.send_invitation ? <RequiredLabel>Invitation email</RequiredLabel> : "Invitation email"}
+          error={fieldErrors.invitation_email}
+          hint={`Personal email where aGentic Email sends the setup invite from @${platformDomain}.`}
+        >
+          <InputWrap icon={Mail}>
+            <input
+              type="email"
+              value={form.invitation_email}
+              onChange={(event) => updateField("invitation_email", event.target.value)}
+              placeholder="rahul@gmail.com"
+              disabled={!form.send_invitation}
+            />
+          </InputWrap>
+        </SetupField>
+
         <SetupField
           label={<RequiredLabel>Initial password</RequiredLabel>}
           error={fieldErrors.password}
           hint="Must include uppercase, lowercase, and a number."
         >
-          <input
-            type="password"
-            value={form.password}
-            onChange={(event) => updateField("password", event.target.value)}
-            placeholder="Set an initial password"
-          />
+          <InputWrap icon={Lock}>
+            <input
+              type="password"
+              value={form.password}
+              onChange={(event) => updateField("password", event.target.value)}
+              placeholder="Set an initial password"
+            />
+          </InputWrap>
         </SetupField>
 
-        <label className="people-toggle-row">
-          <span>
-            <strong>Send invitation email</strong>
-            <small>Invite is sent from @{platformDomain} to the personal email above.</small>
-          </span>
-          <input
-            type="checkbox"
-            checked={form.send_invitation}
-            onChange={(event) => updateField("send_invitation", event.target.checked)}
-          />
-        </label>
+        <div className="add-user-checkboxes">
+          <label className="add-user-checkbox">
+            <input
+              type="checkbox"
+              checked={form.send_invitation}
+              onChange={(event) => updateField("send_invitation", event.target.checked)}
+            />
+            <span>
+              <strong>Send invitation email</strong>
+              <small>They will receive an activation link to set their password.</small>
+            </span>
+          </label>
 
-        <label className="people-toggle-row">
-          <span>
-            <strong>Require password change on first login</strong>
-            <small>Employee must choose a new password before using aGentic Email.</small>
-          </span>
-          <input
-            type="checkbox"
-            checked={form.force_password_change}
-            onChange={(event) => updateField("force_password_change", event.target.checked)}
-          />
-        </label>
+          <label className="add-user-checkbox">
+            <input
+              type="checkbox"
+              checked={form.force_password_change}
+              onChange={(event) => updateField("force_password_change", event.target.checked)}
+            />
+            <span>
+              <strong>Require password change on first login</strong>
+              <small>User must create a new password when they sign in for the first time.</small>
+            </span>
+          </label>
+        </div>
 
         {status.error && <p className="form-error" role="alert">{status.error}</p>}
 
-        <footer className={variant === "inline" ? "org-setup-actions" : "people-drawer-actions"}>
+        <footer className={variant === "inline" ? "org-setup-actions" : "add-user-actions"}>
           {onCancel && (
-            <button type="button" className="button button-outline" onClick={onCancel}>
+            <button type="button" className="add-user-button add-user-button-cancel" onClick={onCancel}>
               Cancel
             </button>
           )}
           <button
-            className="button button-purple org-setup-submit"
+            className="add-user-button add-user-button-submit"
             type="submit"
             disabled={!formValid || status.loading}
           >

frontend/src/components/CompanyPeople.jsx

@@ -4,6 +4,7 @@ import {
   MoreHorizontal,
   Plus,
   Search,
+  UserPlus,
   Upload,
   X,
   XCircle,
@@ -65,7 +66,12 @@ function AddUserPanel({ companyDomain, onClose, onCreated }) {
         onClick={(event) => event.stopPropagation()}
       >
         <header className="people-drawer-head">
-          <h2 id="add-user-title">Add user</h2>
+          <div className="people-drawer-title">
+            <span className="people-drawer-title-icon" aria-hidden="true">
+              <UserPlus size={18} />
+            </span>
+            <h2 id="add-user-title">Add user</h2>
+          </div>
           <button type="button" className="people-drawer-close" aria-label="Close" onClick={onClose}>
             <X size={18} />
           </button>