@actuate-media/cms-admin 0.56.0 → 0.56.2

package/src/views/ForgotPassword.tsx

@@ -8,6 +8,9 @@ export interface ForgotPasswordProps {
   onNavigate: (path: string) => void
 }
 
+const fieldClass =
+  'w-full rounded-lg border border-border bg-input-background px-3 py-2.5 text-sm text-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none'
+
 export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
   const [email, setEmail] = useState('')
   const [submitting, setSubmitting] = useState(false)
@@ -42,37 +45,37 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4">
+    <div className="bg-muted flex min-h-screen items-center justify-center px-4">
       <div className="w-full max-w-md">
         <div className="mb-8 text-center">
-          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-blue-600">
-            <Shield className="h-7 w-7 text-white" />
+          <div className="bg-primary mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl">
+            <Shield className="text-primary-foreground h-7 w-7" />
           </div>
-          <h1 className="text-2xl font-medium text-gray-900">Reset Password</h1>
-          <p className="mt-2 text-gray-600">
+          <h1 className="text-foreground text-2xl font-medium">Reset Password</h1>
+          <p className="text-muted-foreground mt-2">
             {sent
               ? 'Check your inbox for a reset link'
               : "Enter your email and we'll send you a reset link"}
           </p>
         </div>
 
-        <div className="space-y-5 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+        <div className="border-border bg-card space-y-5 rounded-xl border p-6 shadow-sm">
           {sent ? (
             <div className="space-y-4 text-center">
-              <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-                <CheckCircle2 className="h-6 w-6 text-green-600" />
+              <div className="bg-success/10 mx-auto flex h-12 w-12 items-center justify-center rounded-full">
+                <CheckCircle2 className="text-success h-6 w-6" />
               </div>
-              <p className="text-sm text-gray-600">
+              <p className="text-muted-foreground text-sm">
                 If an account exists for <strong>{email}</strong>, you will receive a password reset
                 email shortly.
               </p>
-              <p className="text-xs text-gray-500">
+              <p className="text-muted-foreground text-xs">
                 The link expires in 1 hour. Check your spam folder if you don't see it.
               </p>
               <button
                 type="button"
                 onClick={() => onNavigate('/login')}
-                className="w-full rounded-lg bg-blue-600 py-2.5 font-medium text-white transition-colors hover:bg-blue-700"
+                className="bg-primary text-primary-foreground hover:bg-primary/90 w-full rounded-lg py-2.5 font-medium transition-colors"
               >
                 Back to Sign In
               </button>
@@ -80,16 +83,16 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
           ) : (
             <form onSubmit={handleSubmit} className="space-y-5">
               {error && (
-                <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-                  <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-red-600" />
-                  <p className="text-sm text-red-800">{error}</p>
+                <div className="border-destructive/30 bg-destructive/10 flex items-start gap-3 rounded-lg border p-3">
+                  <AlertTriangle className="text-destructive mt-0.5 h-5 w-5 shrink-0" />
+                  <p className="text-destructive text-sm">{error}</p>
                 </div>
               )}
 
               <div>
                 <label
                   htmlFor="forgot-email"
-                  className="mb-1.5 block text-sm font-medium text-gray-700"
+                  className="text-foreground mb-1.5 block text-sm font-medium"
                 >
                   Email Address
                 </label>
@@ -99,7 +102,7 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   placeholder="admin@example.com"
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                  className={fieldClass}
                   required
                   autoFocus
                   autoComplete="email"
@@ -109,7 +112,7 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
               <button
                 type="submit"
                 disabled={!canSubmit}
-                className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 py-2.5 font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+                className="bg-primary text-primary-foreground hover:bg-primary/90 flex w-full items-center justify-center gap-2 rounded-lg py-2.5 font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
               >
                 {submitting ? (
                   <>
@@ -127,7 +130,7 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
             <button
               type="button"
               onClick={() => onNavigate('/login')}
-              className="flex w-full items-center justify-center gap-2 text-sm text-gray-600 transition-colors hover:text-gray-800"
+              className="text-muted-foreground hover:text-foreground flex w-full items-center justify-center gap-2 text-sm transition-colors"
             >
               <ArrowLeft className="h-4 w-4" />
               Back to Sign In

package/src/views/FormEditor.tsx

@@ -175,7 +175,7 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
   if (loading) {
     return (
       <div className="flex h-64 items-center justify-center p-4">
-        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
+        <Loader2 className="text-primary h-6 w-6 animate-spin" />
       </div>
     )
   }
@@ -186,17 +186,19 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
       <div className="mb-6 flex items-center gap-3">
         <button
           onClick={() => onNavigate?.('/forms')}
-          className="rounded-lg p-2 transition-colors hover:bg-gray-100"
+          className="hover:bg-muted rounded-lg p-2 transition-colors"
         >
-          <ArrowLeft className="h-5 w-5 text-gray-600" />
+          <ArrowLeft className="text-muted-foreground h-5 w-5" />
         </button>
         <div className="flex-1">
-          <h1 className="text-xl font-medium text-gray-900">{isNew ? 'New Form' : 'Edit Form'}</h1>
+          <h1 className="text-foreground text-xl font-medium">
+            {isNew ? 'New Form' : 'Edit Form'}
+          </h1>
         </div>
         <button
           onClick={handleSave}
           disabled={saving || !name.trim()}
-          className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+          className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm transition-colors disabled:opacity-50"
         >
           {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
           {saving ? 'Saving...' : 'Save'}
@@ -204,34 +206,34 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
       </div>
 
       {/* Basic info */}
-      <div className="mb-4 rounded-lg border border-gray-200 bg-white p-4">
+      <div className="border-border bg-card mb-4 rounded-lg border p-4">
         <div className="grid gap-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-gray-700">Form Name</label>
+            <label className="text-foreground mb-1 block text-sm font-medium">Form Name</label>
             <input
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="e.g. Contact Form"
-              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+              className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
             />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-gray-700">Description</label>
+            <label className="text-foreground mb-1 block text-sm font-medium">Description</label>
             <input
               type="text"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               placeholder="Brief description of this form"
-              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+              className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
             />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-gray-700">Status</label>
+            <label className="text-foreground mb-1 block text-sm font-medium">Status</label>
             <select
               value={status}
               onChange={(e) => setStatus(e.target.value)}
-              className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+              className="border-border focus-visible:ring-ring/50 rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
             >
               <option value="active">Active</option>
               <option value="inactive">Inactive</option>
@@ -241,10 +243,10 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
       </div>
 
       {/* Fields section */}
-      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
+      <div className="border-border bg-card mb-4 rounded-lg border">
         <button
           onClick={() => toggleSection('fields')}
-          className="flex w-full items-center justify-between p-4 transition-colors hover:bg-gray-50"
+          className="hover:bg-muted flex w-full items-center justify-between p-4 transition-colors"
         >
           <div className="flex items-center gap-2">
             {expandedSection === 'fields' ? (
@@ -252,18 +254,18 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
             ) : (
               <ChevronRight className="h-4 w-4" />
             )}
-            <span className="font-medium text-gray-900">Form Fields</span>
-            <span className="text-sm text-gray-500">({fields.length})</span>
+            <span className="text-foreground font-medium">Form Fields</span>
+            <span className="text-muted-foreground text-sm">({fields.length})</span>
           </div>
         </button>
         {expandedSection === 'fields' && (
-          <div className="border-t border-gray-200 p-4">
+          <div className="border-border border-t p-4">
             <div className="mb-4 flex flex-wrap gap-2">
               {FIELD_TYPES.map((ft) => (
                 <button
                   key={ft.value}
                   onClick={() => addField(ft.value)}
-                  className="flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-xs transition-colors hover:bg-gray-50"
+                  className="border-border hover:bg-muted flex items-center gap-1 rounded-lg border px-3 py-1.5 text-xs transition-colors"
                 >
                   <Plus className="h-3 w-3" /> {ft.label}
                 </button>
@@ -271,7 +273,7 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
             </div>
 
             {fields.length === 0 ? (
-              <p className="py-6 text-center text-sm text-gray-500">
+              <p className="text-muted-foreground py-6 text-center text-sm">
                 Click a field type above to add it to your form.
               </p>
             ) : (
@@ -286,19 +288,19 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                       const from = Number(e.dataTransfer.getData('text/plain'))
                       moveField(from, index)
                     }}
-                    className="flex items-center gap-3 rounded-lg border border-gray-200 bg-gray-50 p-3 transition-colors hover:bg-white"
+                    className="border-border bg-muted hover:bg-card flex items-center gap-3 rounded-lg border p-3 transition-colors"
                   >
-                    <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-gray-400" />
+                    <GripVertical className="text-muted-foreground h-4 w-4 shrink-0 cursor-grab" />
                     <input
                       type="text"
                       value={field.label}
                       onChange={(e) => updateField(field.id, { label: e.target.value })}
-                      className="flex-1 rounded border border-gray-300 px-2 py-1 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                      className="border-border focus-visible:ring-ring/50 flex-1 rounded border px-2 py-1 text-sm focus:ring-1 focus:outline-none"
                     />
-                    <span className="shrink-0 rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-500">
+                    <span className="bg-muted text-muted-foreground shrink-0 rounded px-2 py-0.5 text-xs">
                       {field.type}
                     </span>
-                    <label className="flex shrink-0 items-center gap-1 text-xs text-gray-600">
+                    <label className="text-muted-foreground flex shrink-0 items-center gap-1 text-xs">
                       <input
                         type="checkbox"
                         checked={field.required}
@@ -309,7 +311,7 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                     </label>
                     <button
                       onClick={() => removeField(field.id)}
-                      className="shrink-0 rounded p-1 text-red-500 transition-colors hover:bg-red-50"
+                      className="text-destructive hover:bg-destructive/10 shrink-0 rounded p-1 transition-colors"
                     >
                       <Trash2 className="h-4 w-4" />
                     </button>
@@ -322,10 +324,10 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
       </div>
 
       {/* Confirmation section */}
-      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
+      <div className="border-border bg-card mb-4 rounded-lg border">
         <button
           onClick={() => toggleSection('confirmation')}
-          className="flex w-full items-center justify-between p-4 transition-colors hover:bg-gray-50"
+          className="hover:bg-muted flex w-full items-center justify-between p-4 transition-colors"
         >
           <div className="flex items-center gap-2">
             {expandedSection === 'confirmation' ? (
@@ -333,22 +335,22 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
             ) : (
               <ChevronRight className="h-4 w-4" />
             )}
-            <MessageSquare className="h-4 w-4 text-green-600" />
-            <span className="font-medium text-gray-900">Confirmation</span>
-            <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-500">
+            <MessageSquare className="text-success h-4 w-4" />
+            <span className="text-foreground font-medium">Confirmation</span>
+            <span className="bg-muted text-muted-foreground rounded px-2 py-0.5 text-xs">
               {confirmation.type === 'message' ? 'Show Message' : 'Redirect'}
             </span>
           </div>
         </button>
         {expandedSection === 'confirmation' && (
-          <div className="border-t border-gray-200 p-4">
+          <div className="border-border border-t p-4">
             <div className="mb-4">
-              <label className="mb-2 block text-sm font-medium text-gray-700">
+              <label className="text-foreground mb-2 block text-sm font-medium">
                 After submission
               </label>
               <div className="flex gap-3">
                 <label
-                  className="flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors hover:bg-gray-50"
+                  className="hover:bg-muted flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors"
                   style={{
                     borderColor: confirmation.type === 'message' ? '#2563eb' : '#d1d5db',
                     backgroundColor: confirmation.type === 'message' ? '#eff6ff' : 'transparent',
@@ -360,13 +362,13 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                     value="message"
                     checked={confirmation.type === 'message'}
                     onChange={() => setConfirmation((c) => ({ ...c, type: 'message' }))}
-                    className="text-blue-600"
+                    className="text-primary"
                   />
                   <MessageSquare className="h-4 w-4" />
                   <span className="text-sm">Show Message</span>
                 </label>
                 <label
-                  className="flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors hover:bg-gray-50"
+                  className="hover:bg-muted flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors"
                   style={{
                     borderColor: confirmation.type === 'redirect' ? '#2563eb' : '#d1d5db',
                     backgroundColor: confirmation.type === 'redirect' ? '#eff6ff' : 'transparent',
@@ -378,7 +380,7 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                     value="redirect"
                     checked={confirmation.type === 'redirect'}
                     onChange={() => setConfirmation((c) => ({ ...c, type: 'redirect' }))}
-                    className="text-blue-600"
+                    className="text-primary"
                   />
                   <ExternalLink className="h-4 w-4" />
                   <span className="text-sm">Redirect to Page</span>
@@ -388,21 +390,21 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
 
             {confirmation.type === 'message' ? (
               <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">
+                <label className="text-foreground mb-1 block text-sm font-medium">
                   Success Message
                 </label>
                 <textarea
                   value={confirmation.message}
                   onChange={(e) => setConfirmation((c) => ({ ...c, message: e.target.value }))}
                   rows={3}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                  className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                   placeholder="Thank you! Your submission has been received."
                 />
               </div>
             ) : (
               <div className="grid gap-3">
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                  <label className="text-foreground mb-1 block text-sm font-medium">
                     Redirect URL
                   </label>
                   <input
@@ -412,11 +414,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                       setConfirmation((c) => ({ ...c, redirectUrl: e.target.value }))
                     }
                     placeholder="https://example.com/thank-you"
-                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                    className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                   />
                 </div>
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                  <label className="text-foreground mb-1 block text-sm font-medium">
                     Redirect Delay (ms)
                   </label>
                   <input
@@ -427,9 +429,9 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                     }
                     min={0}
                     step={500}
-                    className="w-32 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                    className="border-border focus-visible:ring-ring/50 w-32 rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                   />
-                  <p className="mt-1 text-xs text-gray-500">0 = instant redirect</p>
+                  <p className="text-muted-foreground mt-1 text-xs">0 = instant redirect</p>
                 </div>
               </div>
             )}
@@ -438,10 +440,10 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
       </div>
 
       {/* Analytics section */}
-      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
+      <div className="border-border bg-card mb-4 rounded-lg border">
         <button
           onClick={() => toggleSection('analytics')}
-          className="flex w-full items-center justify-between p-4 transition-colors hover:bg-gray-50"
+          className="hover:bg-muted flex w-full items-center justify-between p-4 transition-colors"
         >
           <div className="flex items-center gap-2">
             {expandedSection === 'analytics' ? (
@@ -449,17 +451,17 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
             ) : (
               <ChevronRight className="h-4 w-4" />
             )}
-            <BarChart3 className="h-4 w-4 text-purple-600" />
-            <span className="font-medium text-gray-900">GA4 Analytics</span>
+            <BarChart3 className="text-brand h-4 w-4" />
+            <span className="text-foreground font-medium">GA4 Analytics</span>
             <span
-              className={`rounded px-2 py-0.5 text-xs ${analytics.enabled ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}
+              className={`rounded px-2 py-0.5 text-xs ${analytics.enabled ? 'bg-success/10 text-success' : 'bg-muted text-muted-foreground'}`}
             >
               {analytics.enabled ? 'Enabled' : 'Disabled'}
             </span>
           </div>
         </button>
         {expandedSection === 'analytics' && (
-          <div className="border-t border-gray-200 p-4">
+          <div className="border-border border-t p-4">
             <div className="mb-4 flex items-center gap-3">
               <label className="relative inline-flex cursor-pointer items-center">
                 <input
@@ -468,9 +470,9 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                   onChange={(e) => setAnalytics((a) => ({ ...a, enabled: e.target.checked }))}
                   className="peer sr-only"
                 />
-                <div className="peer h-5 w-9 rounded-full bg-gray-200 peer-checked:bg-blue-600 peer-focus:ring-2 peer-focus:ring-blue-300 peer-focus:outline-none after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white" />
+                <div className="bg-muted peer peer-checked:bg-primary peer-focus:ring-ring/50 after:border-border after:bg-card h-5 w-9 rounded-full peer-focus:ring-2 peer-focus:outline-none after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:border after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white" />
               </label>
-              <span className="text-sm font-medium text-gray-700">
+              <span className="text-foreground text-sm font-medium">
                 Push events to Google Analytics 4
               </span>
             </div>
@@ -478,25 +480,25 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
             {analytics.enabled && (
               <div className="grid gap-4 pl-12">
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                  <label className="text-foreground mb-1 block text-sm font-medium">
                     GA4 Measurement ID
-                    <span className="font-normal text-gray-400"> (optional)</span>
+                    <span className="text-muted-foreground font-normal"> (optional)</span>
                   </label>
                   <input
                     type="text"
                     value={analytics.measurementId}
                     onChange={(e) => setAnalytics((a) => ({ ...a, measurementId: e.target.value }))}
                     placeholder="G-XXXXXXXXXX"
-                    className="w-64 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                    className="border-border focus-visible:ring-ring/50 w-64 rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                   />
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="text-muted-foreground mt-1 text-xs">
                     Leave blank to use your site's default GA4 tag
                   </p>
                 </div>
 
                 <div className="grid grid-cols-2 gap-4">
                   <div>
-                    <label className="mb-1 block text-sm font-medium text-gray-700">
+                    <label className="text-foreground mb-1 block text-sm font-medium">
                       Submit Event Name
                     </label>
                     <input
@@ -505,11 +507,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                       onChange={(e) =>
                         setAnalytics((a) => ({ ...a, submitEventName: e.target.value }))
                       }
-                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                      className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                     />
                   </div>
                   <div>
-                    <label className="mb-1 block text-sm font-medium text-gray-700">
+                    <label className="text-foreground mb-1 block text-sm font-medium">
                       Start Event Name
                     </label>
                     <input
@@ -518,12 +520,12 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                       onChange={(e) =>
                         setAnalytics((a) => ({ ...a, startEventName: e.target.value }))
                       }
-                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                      className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                     />
                   </div>
                 </div>
 
-                <div className="border-t border-gray-200 pt-4">
+                <div className="border-border border-t pt-4">
                   <div className="mb-3 flex items-center gap-3">
                     <input
                       type="checkbox"
@@ -534,7 +536,10 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                       }
                       className="rounded"
                     />
-                    <label htmlFor="trackConversion" className="text-sm font-medium text-gray-700">
+                    <label
+                      htmlFor="trackConversion"
+                      className="text-foreground text-sm font-medium"
+                    >
                       Track as conversion event
                     </label>
                   </div>
@@ -542,7 +547,7 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                   {analytics.trackAsConversion && (
                     <div className="ml-6 grid grid-cols-2 gap-4">
                       <div>
-                        <label className="mb-1 block text-sm font-medium text-gray-700">
+                        <label className="text-foreground mb-1 block text-sm font-medium">
                           Conversion Value
                         </label>
                         <input
@@ -553,11 +558,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                           }
                           min={0}
                           step={0.01}
-                          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                          className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                         />
                       </div>
                       <div>
-                        <label className="mb-1 block text-sm font-medium text-gray-700">
+                        <label className="text-foreground mb-1 block text-sm font-medium">
                           Currency
                         </label>
                         <select
@@ -565,7 +570,7 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                           onChange={(e) =>
                             setAnalytics((a) => ({ ...a, conversionCurrency: e.target.value }))
                           }
-                          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                          className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                         >
                           <option value="USD">USD</option>
                           <option value="EUR">EUR</option>
@@ -578,12 +583,12 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                   )}
                 </div>
 
-                <div className="rounded-lg border border-blue-200 bg-blue-50 p-3">
-                  <p className="text-xs text-blue-800">
+                <div className="border-info/30 bg-info/10 rounded-lg border p-3">
+                  <p className="text-foreground text-xs">
                     <strong>Note:</strong> Your site must have the GA4 snippet or GTM container
                     installed. Actuate pushes events via{' '}
-                    <code className="rounded bg-blue-100 px-1">gtag()</code> /
-                    <code className="rounded bg-blue-100 px-1">dataLayer</code> — it does not load
+                    <code className="bg-info/10 rounded px-1">gtag()</code> /
+                    <code className="bg-info/10 rounded px-1">dataLayer</code> — it does not load
                     the GA4 script.
                   </p>
                 </div>