@assistkick/create 1.6.0 → 1.8.0

package/templates/assistkick-product-system/packages/frontend/src/components/InviteUserDialog.tsx

@@ -50,22 +50,22 @@ export function InviteUserDialog({ isOpen, onClose }: InviteUserDialogProps) {
   if (!isOpen) return null;
 
   return (
-    <div className="invite-dialog-overlay" onClick={handleClose}>
-      <div className="invite-dialog" onClick={e => e.stopPropagation()}>
-        <div className="invite-dialog-header">
-          <h2>Invite User</h2>
-          <button className="invite-dialog-close" onClick={handleClose} type="button">&times;</button>
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[1000]" onClick={handleClose}>
+      <div className="bg-surface border border-edge rounded-xl p-6 w-[400px] max-w-[90vw] shadow-[0_8px_32px_rgba(0,0,0,0.3)]" onClick={e => e.stopPropagation()}>
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="m-0 text-lg text-content">Invite User</h2>
+          <button className="bg-none border-none text-[22px] text-content-secondary cursor-pointer px-1 leading-none hover:text-content" onClick={handleClose} type="button">&times;</button>
         </div>
 
         <form onSubmit={handleSubmit} noValidate>
-          {error && <div className="auth-error-banner">{error}</div>}
-          {success && <div className="invite-dialog-success">{success}</div>}
+          {error && <div className="font-mono text-xs text-error bg-[rgba(255,107,107,0.08)] border border-[rgba(255,107,107,0.2)] rounded px-3 py-2 mb-3">{error}</div>}
+          {success && <div className="bg-surface-alt text-[#4caf50] px-3.5 py-2.5 rounded-md mb-3 text-sm">{success}</div>}
 
-          <div className="auth-field">
-            <label className="auth-label" htmlFor="invite-email">Email address</label>
+          <div className="flex flex-col gap-1">
+            <label className="font-mono text-[11px] font-semibold text-content-secondary uppercase tracking-wider" htmlFor="invite-email">Email address</label>
             <input
               id="invite-email"
-              className={`auth-input${error ? ' auth-input-error' : ''}`}
+              className={`w-full h-9 px-2.5 bg-surface-raised border rounded text-content font-mono text-[13px] outline-none transition-[border-color] duration-150 focus:border-accent placeholder:text-content-muted ${error ? 'border-error focus:border-error' : 'border-edge'}`}
               type="email"
               value={email}
               onChange={e => setEmail(e.target.value)}
@@ -75,7 +75,11 @@ export function InviteUserDialog({ isOpen, onClose }: InviteUserDialogProps) {
             />
           </div>
 
-          <button className="auth-submit" type="submit" disabled={submitting}>
+          <button
+            className="w-full h-9 mt-4 bg-transparent border border-accent rounded text-accent font-mono text-[13px] cursor-pointer transition-[background,color] duration-150 hover:enabled:bg-accent hover:enabled:text-white disabled:opacity-60 disabled:cursor-not-allowed"
+            type="submit"
+            disabled={submitting}
+          >
             {submitting ? 'Sending...' : 'Send Invitation'}
           </button>
         </form>