@actuate-media/cms-admin 0.36.0 → 0.37.0

package/src/views/ApiKeys.tsx

@@ -16,6 +16,10 @@ import { type FormEvent, useState } from 'react'
 import { toast } from 'sonner'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
+import { SettingsCard } from './settings/components.js'
+
+const DIALOG_INPUT_CLASS =
+  'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none'
 
 export interface ApiKeysProps {
   onNavigate?: (path: string) => void
@@ -78,7 +82,6 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
 
   const keys = data ?? []
   const rootPadding = embedded ? '' : 'p-4 sm:p-6'
-  const Heading = embedded ? 'h2' : 'h1'
 
   const handleRevoke = async (id: string, name: string) => {
     if (!confirm(`Revoke API key "${name}"? This cannot be undone.`)) return
@@ -99,138 +102,156 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
   if (loading) {
     return (
       <div className={`flex h-64 items-center justify-center ${embedded ? '' : 'p-4 sm:p-6'}`}>
-        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
+        <Loader2 className="text-brand h-6 w-6 animate-spin" />
       </div>
     )
   }
 
   return (
     <div className={rootPadding}>
-      <div className="mb-6 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
-        <div>
-          <Heading className="flex items-center gap-2 text-xl font-semibold text-gray-900 sm:text-2xl">
-            <KeyRound className="h-5 w-5 text-gray-500" />
-            API Keys
-          </Heading>
-          <p className="mt-1 text-sm text-gray-500">
+      <SettingsCard
+        headingLevel="h2"
+        title="API Keys"
+        description={
+          <>
             Long-lived credentials for programmatic access. Use the{' '}
-            <code className="rounded bg-gray-100 px-1 py-0.5 text-xs">Authorization: Bearer</code>{' '}
+            <code className="bg-muted rounded px-1 py-0.5 text-xs">Authorization: Bearer</code>{' '}
             header instead of session cookies. API key requests skip CSRF.
-          </p>
-        </div>
-        <button
-          type="button"
-          onClick={() => setShowCreate(true)}
-          className="inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
-        >
-          <Plus className="h-4 w-4" />
-          New API Key
-        </button>
-      </div>
-
-      {error && (
-        <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
-          <span className="flex-1 text-sm text-red-800">{error}</span>
-          <button
-            onClick={refetch}
-            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
-          >
-            Retry
-          </button>
-        </div>
-      )}
-
-      {keys.length === 0 ? (
-        <div className="rounded-lg border border-gray-200 bg-white p-10 text-center">
-          <KeyRound className="mx-auto mb-3 h-8 w-8 text-gray-300" />
-          <p className="mb-1 text-sm text-gray-500">No API keys yet</p>
-          <p className="mb-4 text-xs text-gray-400">
-            Create one to let AI agents, CI jobs, or external integrations call the CMS API.
-          </p>
+          </>
+        }
+        actions={
           <button
             type="button"
             onClick={() => setShowCreate(true)}
-            className="inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
+            className="bg-brand text-brand-foreground inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90"
           >
-            <Plus className="h-4 w-4" />
-            Create your first API key
+            <Plus size={16} aria-hidden="true" />
+            New API Key
           </button>
-        </div>
-      ) : (
-        <div className="overflow-hidden rounded-lg border border-gray-200 bg-white">
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead className="border-b border-gray-200 bg-gray-50">
-                <tr>
-                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Name</th>
-                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Token</th>
-                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Scopes</th>
-                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
-                    Last used
-                  </th>
-                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Expires</th>
-                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Status</th>
-                  <th className="px-4 py-2"></th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-gray-200">
-                {keys.map((k) => {
-                  const revoked = !!k.revokedAt
-                  const expired = k.expiresAt && new Date(k.expiresAt).getTime() < Date.now()
-                  return (
-                    <tr key={k.id} className={revoked || expired ? 'opacity-60' : undefined}>
-                      <td className="px-4 py-3 text-sm">
-                        <div className="font-medium text-gray-900">{k.name}</div>
-                        {k.user && (
-                          <div className="text-xs text-gray-500">
-                            created by {k.user.name ?? k.user.email}
-                          </div>
-                        )}
-                      </td>
-                      <td className="px-4 py-3 font-mono text-sm text-gray-700">{k.keyPrefix}…</td>
-                      <td className="max-w-xs px-4 py-3 text-sm text-gray-700">
-                        {formatScopes(k.scopes)}
-                      </td>
-                      <td className="px-4 py-3 text-sm text-gray-600">
-                        {formatDate(k.lastUsedAt)}
-                      </td>
-                      <td className="px-4 py-3 text-sm text-gray-600">{formatDate(k.expiresAt)}</td>
-                      <td className="px-4 py-3">
-                        {revoked ? (
-                          <span className="inline-flex rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">
-                            Revoked
-                          </span>
-                        ) : expired ? (
-                          <span className="inline-flex rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">
-                            Expired
-                          </span>
-                        ) : (
-                          <span className="inline-flex rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">
-                            Active
-                          </span>
-                        )}
-                      </td>
-                      <td className="px-4 py-3 text-right">
-                        {!revoked && (
-                          <button
-                            type="button"
-                            onClick={() => handleRevoke(k.id, k.name)}
-                            className="rounded p-1.5 transition-colors hover:bg-red-50"
-                            title="Revoke"
-                          >
-                            <Trash2 className="h-4 w-4 text-red-600" />
-                          </button>
-                        )}
-                      </td>
-                    </tr>
-                  )
-                })}
-              </tbody>
-            </table>
+        }
+      >
+        {error && (
+          <div
+            role="alert"
+            className="border-destructive/30 bg-destructive/10 text-destructive mb-4 flex items-center gap-3 rounded-lg border p-3 text-sm"
+          >
+            <AlertTriangle size={20} className="shrink-0" aria-hidden="true" />
+            <span className="flex-1">{error}</span>
+            <button
+              onClick={refetch}
+              className="border-destructive/40 rounded-md border px-3 py-1 transition-colors hover:opacity-80"
+            >
+              Retry
+            </button>
           </div>
-        </div>
-      )}
+        )}
+
+        {keys.length === 0 ? (
+          <div className="py-10 text-center">
+            <KeyRound className="text-muted-foreground mx-auto mb-3 h-8 w-8" aria-hidden="true" />
+            <p className="text-foreground mb-1 text-sm font-medium">No API keys yet</p>
+            <p className="text-muted-foreground mb-4 text-sm">
+              Create one to let AI agents, CI jobs, or external integrations call the CMS API.
+            </p>
+            <button
+              type="button"
+              onClick={() => setShowCreate(true)}
+              className="bg-brand text-brand-foreground inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90"
+            >
+              <Plus size={16} aria-hidden="true" />
+              Create your first API key
+            </button>
+          </div>
+        ) : (
+          <div className="border-border overflow-hidden rounded-lg border">
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead className="border-border bg-muted/50 border-b">
+                  <tr>
+                    <th className="text-muted-foreground px-4 py-2 text-left text-xs font-medium">
+                      Name
+                    </th>
+                    <th className="text-muted-foreground px-4 py-2 text-left text-xs font-medium">
+                      Token
+                    </th>
+                    <th className="text-muted-foreground px-4 py-2 text-left text-xs font-medium">
+                      Scopes
+                    </th>
+                    <th className="text-muted-foreground px-4 py-2 text-left text-xs font-medium">
+                      Last used
+                    </th>
+                    <th className="text-muted-foreground px-4 py-2 text-left text-xs font-medium">
+                      Expires
+                    </th>
+                    <th className="text-muted-foreground px-4 py-2 text-left text-xs font-medium">
+                      Status
+                    </th>
+                    <th className="px-4 py-2"></th>
+                  </tr>
+                </thead>
+                <tbody className="divide-border divide-y">
+                  {keys.map((k) => {
+                    const revoked = !!k.revokedAt
+                    const expired = k.expiresAt && new Date(k.expiresAt).getTime() < Date.now()
+                    return (
+                      <tr key={k.id} className={revoked || expired ? 'opacity-60' : undefined}>
+                        <td className="px-4 py-3 text-sm">
+                          <div className="text-foreground font-medium">{k.name}</div>
+                          {k.user && (
+                            <div className="text-muted-foreground text-xs">
+                              created by {k.user.name ?? k.user.email}
+                            </div>
+                          )}
+                        </td>
+                        <td className="text-muted-foreground px-4 py-3 font-mono text-sm">
+                          {k.keyPrefix}…
+                        </td>
+                        <td className="text-foreground max-w-xs px-4 py-3 text-sm">
+                          {formatScopes(k.scopes)}
+                        </td>
+                        <td className="text-muted-foreground px-4 py-3 text-sm">
+                          {formatDate(k.lastUsedAt)}
+                        </td>
+                        <td className="text-muted-foreground px-4 py-3 text-sm">
+                          {formatDate(k.expiresAt)}
+                        </td>
+                        <td className="px-4 py-3">
+                          {revoked ? (
+                            <span className="bg-destructive/10 text-destructive inline-flex rounded-full px-2 py-0.5 text-xs font-medium">
+                              Revoked
+                            </span>
+                          ) : expired ? (
+                            <span className="bg-warning/10 text-warning inline-flex rounded-full px-2 py-0.5 text-xs font-medium">
+                              Expired
+                            </span>
+                          ) : (
+                            <span className="bg-success/10 text-success inline-flex rounded-full px-2 py-0.5 text-xs font-medium">
+                              Active
+                            </span>
+                          )}
+                        </td>
+                        <td className="px-4 py-3 text-right">
+                          {!revoked && (
+                            <button
+                              type="button"
+                              onClick={() => handleRevoke(k.id, k.name)}
+                              className="hover:bg-destructive/10 rounded p-1.5 transition-colors"
+                              aria-label={`Revoke ${k.name}`}
+                              title="Revoke"
+                            >
+                              <Trash2 className="text-destructive h-4 w-4" aria-hidden="true" />
+                            </button>
+                          )}
+                        </td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+      </SettingsCard>
 
       <CreateApiKeyDialog
         open={showCreate}
@@ -326,41 +347,48 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
     <Dialog.Root open={open} onOpenChange={(o) => !o && onClose()}>
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 z-40 bg-black/40" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl">
-          <Dialog.Title className="mb-4 flex items-center gap-2 text-lg font-semibold text-gray-900">
-            <Shield className="h-5 w-5 text-blue-600" />
+        <Dialog.Content className="border-border bg-card fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border p-6 shadow-xl">
+          <Dialog.Title className="text-card-foreground mb-4 flex items-center gap-2 text-lg font-medium">
+            <Shield className="text-brand h-5 w-5" aria-hidden="true" />
             New API Key
           </Dialog.Title>
           <form onSubmit={handleSubmit} className="space-y-4">
             <div>
-              <label className="mb-1 block text-sm font-medium text-gray-700">Name</label>
+              <label
+                htmlFor="apikey-name"
+                className="text-foreground mb-1 block text-sm font-medium"
+              >
+                Name
+              </label>
               <input
+                id="apikey-name"
                 type="text"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 placeholder="e.g. AI agent — production"
-                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={DIALOG_INPUT_CLASS}
                 required
                 maxLength={100}
               />
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-gray-700">Preset</label>
+              <span className="text-foreground mb-2 block text-sm font-medium">Preset</span>
               <div className="grid grid-cols-2 gap-2">
                 {(['content', 'readonly', 'admin', 'custom'] as const).map((p) => (
                   <button
                     key={p}
                     type="button"
                     onClick={() => setPreset(p)}
-                    className={`rounded-lg border px-3 py-2 text-left text-sm transition-colors ${
+                    aria-pressed={preset === p}
+                    className={`rounded-md border px-3 py-2 text-left text-sm transition-colors ${
                       preset === p
-                        ? 'border-blue-500 bg-blue-50 text-blue-900'
-                        : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50'
+                        ? 'border-brand bg-brand/5 text-foreground'
+                        : 'border-border text-foreground hover:bg-accent'
                     }`}
                   >
                     <div className="font-medium capitalize">{p}</div>
-                    <div className="text-xs text-gray-500">
+                    <div className="text-muted-foreground text-xs">
                       {p === 'content' && 'Read/create/update content'}
                       {p === 'readonly' && 'Read-only access'}
                       {p === 'admin' && 'Full admin access'}
@@ -372,22 +400,22 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
             </div>
 
             {(preset === 'content' || preset === 'custom') && (
-              <div className="space-y-2 rounded-lg border border-gray-200 bg-gray-50 p-3">
-                <label className="flex items-center gap-2 text-sm text-gray-700">
+              <div className="border-border bg-muted/50 space-y-2 rounded-md border p-3">
+                <label className="text-foreground flex items-center gap-2 text-sm">
                   <input
                     type="checkbox"
                     checked={media}
                     onChange={(e) => setMedia(e.target.checked)}
-                    className="rounded border-gray-300"
+                    className="accent-brand h-4 w-4"
                   />
                   Allow media uploads
                 </label>
-                <label className="flex items-center gap-2 text-sm text-gray-700">
+                <label className="text-foreground flex items-center gap-2 text-sm">
                   <input
                     type="checkbox"
                     checked={pageBuilder}
                     onChange={(e) => setPageBuilder(e.target.checked)}
-                    className="rounded border-gray-300"
+                    className="accent-brand h-4 w-4"
                   />
                   Allow AI page generation
                 </label>
@@ -395,31 +423,39 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
             )}
 
             <div>
-              <label className="mb-1 block text-sm font-medium text-gray-700">
+              <label
+                htmlFor="apikey-expiry"
+                className="text-foreground mb-1 block text-sm font-medium"
+              >
                 Expires in (days)
               </label>
               <input
+                id="apikey-expiry"
                 type="number"
                 min={1}
                 placeholder="Never (leave blank)"
                 value={expiresInDays}
                 onChange={(e) => setExpiresInDays(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={DIALOG_INPUT_CLASS}
               />
             </div>
 
             <div>
-              <label className="mb-1 block text-sm font-medium text-gray-700">
+              <label
+                htmlFor="apikey-password"
+                className="text-foreground mb-1 block text-sm font-medium"
+              >
                 Confirm password
               </label>
               <input
+                id="apikey-password"
                 type="password"
                 value={password}
                 onChange={(e) => setPassword(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={DIALOG_INPUT_CLASS}
                 required
               />
-              <p className="mt-1 text-xs text-gray-500">
+              <p className="text-muted-foreground mt-1 text-sm">
                 Creating an API key is a sensitive action and requires re-authentication.
               </p>
             </div>
@@ -428,14 +464,14 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
               <button
                 type="button"
                 onClick={onClose}
-                className="rounded-lg border border-gray-300 px-4 py-2 text-sm transition-colors hover:bg-gray-50"
+                className="border-border text-foreground hover:bg-accent rounded-md border px-4 py-2 text-sm transition-colors"
               >
                 Cancel
               </button>
               <button
                 type="submit"
                 disabled={submitting}
-                className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+                className="bg-brand text-brand-foreground rounded-md px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
               >
                 {submitting ? 'Creating…' : 'Create key'}
               </button>
@@ -459,32 +495,32 @@ function RevealKeyDialog({
     <Dialog.Root open onOpenChange={(o) => !o && onClose()}>
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 z-40 bg-black/40" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl">
-          <Dialog.Title className="mb-2 flex items-center gap-2 text-lg font-semibold text-gray-900">
-            <Shield className="h-5 w-5 text-green-600" />
+        <Dialog.Content className="border-border bg-card fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border p-6 shadow-xl">
+          <Dialog.Title className="text-card-foreground mb-2 flex items-center gap-2 text-lg font-medium">
+            <Shield className="text-success h-5 w-5" aria-hidden="true" />
             API key created
           </Dialog.Title>
-          <Dialog.Description className="mb-4 text-sm text-gray-600">
+          <Dialog.Description className="text-muted-foreground mb-4 text-sm">
             Copy this key now — it will not be shown again. Treat it like a password.
           </Dialog.Description>
 
-          <div className="mb-4 flex items-start gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3">
-            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600" />
-            <p className="text-xs text-amber-900">
+          <div className="border-warning/30 bg-warning/10 mb-4 flex items-start gap-2 rounded-lg border p-3">
+            <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+            <p className="text-foreground text-xs">
               We only store a hash of this key. If you lose it, you&apos;ll need to revoke and
               create a new one.
             </p>
           </div>
 
           <div className="mb-4 flex items-center gap-2">
-            <code className="flex-1 rounded bg-gray-100 px-3 py-2 font-mono text-sm break-all">
+            <code className="bg-muted text-foreground flex-1 rounded px-3 py-2 font-mono text-sm break-all">
               {shown ? created.key : '•'.repeat(Math.min(48, created.key.length))}
             </code>
             <button
               type="button"
               onClick={() => setShown((s) => !s)}
-              className="rounded border border-gray-300 p-2 hover:bg-gray-50"
-              title={shown ? 'Hide' : 'Show'}
+              className="border-border text-foreground hover:bg-accent rounded-md border p-2 transition-colors"
+              aria-label={shown ? 'Hide key' : 'Show key'}
             >
               {shown ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
             </button>
@@ -494,8 +530,8 @@ function RevealKeyDialog({
                 navigator.clipboard.writeText(created.key)
                 toast.success('Copied to clipboard')
               }}
-              className="rounded border border-gray-300 p-2 hover:bg-gray-50"
-              title="Copy"
+              className="border-border text-foreground hover:bg-accent rounded-md border p-2 transition-colors"
+              aria-label="Copy key"
             >
               <Copy className="h-4 w-4" />
             </button>
@@ -505,7 +541,7 @@ function RevealKeyDialog({
             <button
               type="button"
               onClick={onClose}
-              className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
+              className="bg-brand text-brand-foreground rounded-md px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90"
             >
               I&apos;ve saved it
             </button>

package/src/views/Profile.tsx

@@ -21,8 +21,10 @@ export function Profile({ session }: ProfileProps = {}) {
   return (
     <div className="p-3 pr-6 sm:p-4 sm:pr-8">
       <div className="mb-4">
-        <h1 className="mb-1 text-2xl font-semibold text-gray-900">Your profile</h1>
-        <p className="text-sm text-gray-600">Manage your account details and sign-in security.</p>
+        <h1 className="text-foreground mb-1 text-2xl font-medium">Your profile</h1>
+        <p className="text-muted-foreground text-sm">
+          Manage your account details and sign-in security.
+        </p>
       </div>
 
       <div className="grid max-w-3xl gap-4">