@actuate-media/cms-admin 0.35.0 → 0.36.1

package/src/views/Settings.tsx

@@ -27,6 +27,7 @@ import { SeoSettingsTab } from './settings/SeoSettingsTab.js'
 import { AISettingsTab } from './settings/AISettingsTab.js'
 import { AppearanceTab } from './settings/AppearanceTab.js'
 import { SecurityTab } from './settings/SecurityTab.js'
+import { SettingsCard } from './settings/components.js'
 import { Users as UsersView } from './Users.js'
 import { ApiKeys as ApiKeysView } from './ApiKeys.js'
 
@@ -165,12 +166,15 @@ export function Settings({
   return (
     <div className="p-3 pr-6 sm:p-4 sm:pr-8">
       {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>
+        <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="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
+            className="border-destructive/40 rounded-md border px-3 py-1 transition-colors hover:opacity-80"
           >
             Retry
           </button>
@@ -178,12 +182,12 @@ export function Settings({
       )}
 
       <div className="mb-4">
-        <h1 className="mb-1 text-2xl font-semibold text-gray-900">Settings</h1>
-        <p className="text-sm text-gray-600">Manage your CMS configuration</p>
+        <h1 className="text-foreground mb-1 text-2xl font-medium">Settings</h1>
+        <p className="text-muted-foreground text-sm">Manage your CMS configuration</p>
       </div>
 
       <Tabs.Root value={activeTab} onValueChange={changeTab}>
-        <Tabs.List className="mb-4 flex gap-1 overflow-x-auto border-b border-gray-200">
+        <Tabs.List className="border-border mb-4 flex gap-1 overflow-x-auto border-b">
           <Tabs.Trigger value="general" className={tabTriggerClass}>
             General
           </Tabs.Trigger>
@@ -240,12 +244,10 @@ export function Settings({
 
         {hasLayoutRegions && (
           <Tabs.Content value="layout" className="space-y-4">
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <h3 className="mb-1 text-sm font-semibold text-gray-900">Default Layout Variants</h3>
-              <p className="mb-4 text-xs text-gray-500">
-                Select the default header, footer, and other layout variants used site-wide. Pages
-                can override these individually or inherit from parent pages.
-              </p>
+            <SettingsCard
+              title="Default Layout Variants"
+              description="Select the default header, footer, and other layout variants used site-wide. Pages can override these individually or inherit from parent pages."
+            >
               <div className="space-y-4">
                 {layoutRegions.map((region) => (
                   <RelationshipField
@@ -268,14 +270,11 @@ export function Settings({
                   />
                 ))}
               </div>
-            </div>
-            <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
-              <h3 className="mb-2 text-sm font-semibold text-gray-700">
-                How Layout Inheritance Works
-              </h3>
-              <ul className="space-y-1.5 text-xs text-gray-600">
+            </SettingsCard>
+            <SettingsCard title="How Layout Inheritance Works">
+              <ul className="text-muted-foreground space-y-1.5 text-sm">
                 <li className="flex items-start gap-2">
-                  <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
+                  <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
                     1
                   </span>
                   <span>
@@ -284,20 +283,20 @@ export function Settings({
                   </span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
+                  <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
                     2
                   </span>
                   <span>
                     Child pages automatically inherit their parent&apos;s layout. For example,{' '}
-                    <code className="rounded bg-gray-200 px-1 font-mono">
+                    <code className="bg-muted rounded px-1 font-mono">
                       /hampton-roads/thank-you
                     </code>{' '}
                     inherits from{' '}
-                    <code className="rounded bg-gray-200 px-1 font-mono">/hampton-roads</code>.
+                    <code className="bg-muted rounded px-1 font-mono">/hampton-roads</code>.
                   </span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
+                  <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
                     3
                   </span>
                   <span>
@@ -306,7 +305,7 @@ export function Settings({
                   </span>
                 </li>
               </ul>
-            </div>
+            </SettingsCard>
           </Tabs.Content>
         )}
 
@@ -458,52 +457,59 @@ function UpdatesPanel() {
     checkForUpdates()
   }, [])
 
-  const severityColors: Record<
-    string,
-    { bg: string; text: string; border: string; label: string }
-  > = {
-    patch: { bg: 'bg-blue-50', text: 'text-blue-700', border: 'border-blue-200', label: 'Patch' },
-    minor: {
-      bg: 'bg-yellow-50',
-      text: 'text-yellow-700',
-      border: 'border-yellow-200',
-      label: 'Minor',
+  // Semantic severity tokens so update banners match the rest of the admin in
+  // both light and dark mode (no raw palette colors). Concrete keys (not a
+  // string-index Record) keep the lookup non-nullable.
+  const severityColors = {
+    patch: { banner: 'border-brand/30 bg-brand/10', text: 'text-brand', label: 'Patch' },
+    minor: { banner: 'border-warning/30 bg-warning/10', text: 'text-warning', label: 'Minor' },
+    major: {
+      banner: 'border-destructive/30 bg-destructive/10',
+      text: 'text-destructive',
+      label: 'Major',
     },
-    major: { bg: 'bg-red-50', text: 'text-red-700', border: 'border-red-200', label: 'Major' },
   }
+  const sev = severityColors[updateInfo?.severity ?? 'patch']
+  const ghInputClass =
+    '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'
 
   return (
     <>
       {/* Current Version Card */}
-      <div className="rounded-lg border border-gray-200 bg-white p-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="text-sm font-semibold text-gray-900">Actuate CMS</h3>
-            <p className="mt-1 text-sm text-gray-600">
-              Current version:{' '}
-              <span className="font-mono font-medium">{updateInfo?.current ?? '...'}</span>
-            </p>
-          </div>
+      <SettingsCard
+        title="Actuate CMS"
+        description="Keep your CMS up to date with the latest features and security patches."
+        actions={
           <button
             type="button"
             onClick={checkForUpdates}
             disabled={checking}
-            className="flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:opacity-50"
+            className="border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50"
           >
-            <RefreshCw className={`h-4 w-4 ${checking ? 'animate-spin' : ''}`} />
-            {checking ? 'Checking...' : 'Check for Updates'}
+            <RefreshCw size={16} className={checking ? 'animate-spin' : ''} aria-hidden="true" />
+            {checking ? 'Checking…' : 'Check for Updates'}
           </button>
-        </div>
-      </div>
+        }
+      >
+        <p className="text-muted-foreground text-sm">
+          Current version:{' '}
+          <span className="text-foreground font-mono font-medium">
+            {updateInfo?.current ?? '…'}
+          </span>
+        </p>
+      </SettingsCard>
 
       {/* Error State */}
       {checkError && (
-        <div className="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">{checkError}</span>
+        <div
+          role="alert"
+          className="border-destructive/30 bg-destructive/10 text-destructive 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">{checkError}</span>
           <button
             onClick={checkForUpdates}
-            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
+            className="border-destructive/40 rounded-md border px-3 py-1 transition-colors hover:opacity-80"
           >
             Retry
           </button>
@@ -512,11 +518,11 @@ function UpdatesPanel() {
 
       {/* Up to Date */}
       {hasChecked && updateInfo && !updateInfo.updateAvailable && !checkError && (
-        <div className="flex items-center gap-3 rounded-lg border border-green-200 bg-green-50 p-4">
-          <CheckCircle2 className="h-6 w-6 shrink-0 text-green-600" />
+        <div className="border-success/30 bg-success/10 text-success flex items-center gap-3 rounded-lg border p-4">
+          <CheckCircle2 size={24} className="shrink-0" aria-hidden="true" />
           <div>
-            <h3 className="text-sm font-semibold text-green-900">You&apos;re up to date!</h3>
-            <p className="mt-0.5 text-sm text-green-700">
+            <h3 className="text-foreground font-medium">You&apos;re up to date!</h3>
+            <p className="text-muted-foreground mt-0.5 text-sm">
               Actuate CMS <span className="font-mono">{updateInfo.current}</span> is the latest
               version.
             </p>
@@ -527,29 +533,25 @@ function UpdatesPanel() {
       {/* Update Available */}
       {updateInfo?.updateAvailable && (
         <>
-          <div
-            className={`rounded-lg border p-4 ${severityColors[updateInfo.severity ?? 'patch']?.border ?? 'border-blue-200'} ${severityColors[updateInfo.severity ?? 'patch']?.bg ?? 'bg-blue-50'}`}
-          >
+          <div className={`rounded-lg border p-4 ${sev.banner}`}>
             <div className="flex items-start gap-3">
               <ArrowUpCircle
-                className={`mt-0.5 h-6 w-6 shrink-0 ${severityColors[updateInfo.severity ?? 'patch']?.text ?? 'text-blue-700'}`}
+                size={24}
+                className={`mt-0.5 shrink-0 ${sev.text}`}
+                aria-hidden="true"
               />
               <div className="flex-1">
                 <div className="flex items-center gap-2">
-                  <h3
-                    className={`text-sm font-semibold ${severityColors[updateInfo.severity ?? 'patch']?.text ?? 'text-blue-700'}`}
-                  >
-                    Update Available
-                  </h3>
+                  <h3 className={`font-medium ${sev.text}`}>Update Available</h3>
                   <span
-                    className={`inline-flex items-center rounded px-2 py-0.5 text-xs font-medium ${severityColors[updateInfo.severity ?? 'patch']?.bg ?? 'bg-blue-50'} ${severityColors[updateInfo.severity ?? 'patch']?.text ?? 'text-blue-700'} border ${severityColors[updateInfo.severity ?? 'patch']?.border ?? 'border-blue-200'}`}
+                    className={`inline-flex items-center rounded border px-2 py-0.5 text-xs font-medium ${sev.banner} ${sev.text}`}
                   >
-                    {severityColors[updateInfo.severity ?? 'patch']?.label ?? 'Update'}
+                    {sev.label}
                   </span>
                 </div>
-                <p className="mt-1 text-sm" style={{ color: 'inherit' }}>
+                <p className="text-muted-foreground mt-1 text-sm">
                   <span className="font-mono">{updateInfo.current}</span> &rarr;{' '}
-                  <span className="font-mono font-semibold">{updateInfo.latest}</span>
+                  <span className="text-foreground font-mono font-medium">{updateInfo.latest}</span>
                   {updateInfo.releaseDate && (
                     <span className="ml-2 text-xs opacity-70">
                       Released {updateInfo.releaseDate}
@@ -564,27 +566,29 @@ function UpdatesPanel() {
                 type="button"
                 onClick={applyUpdate}
                 disabled={applying}
-                className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+                className="bg-brand text-brand-foreground inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
               >
                 {applying ? (
                   <>
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                    Creating PR...
+                    <Loader2 size={16} className="animate-spin" aria-hidden="true" />
+                    Creating PR…
                   </>
                 ) : (
                   <>
-                    <GitPullRequest className="h-4 w-4" />
+                    <GitPullRequest size={16} aria-hidden="true" />
                     Create Update PR
                   </>
                 )}
               </button>
-              <span className="text-xs text-gray-500">Opens a pull request on your repository</span>
+              <span className="text-muted-foreground text-xs">
+                Opens a pull request on your repository
+              </span>
             </div>
 
             {updateInfo.updateCommand && (
-              <div className="mt-3 rounded border border-gray-200 bg-white p-3">
-                <p className="mb-1 text-xs text-gray-500">Or update manually:</p>
-                <code className="block rounded bg-gray-50 px-2 py-1.5 font-mono text-xs text-gray-800 select-all">
+              <div className="border-border bg-card mt-3 rounded-md border p-3">
+                <p className="text-muted-foreground mb-1 text-xs">Or update manually:</p>
+                <code className="bg-muted text-foreground block rounded px-2 py-1.5 font-mono text-xs select-all">
                   {updateInfo.updateCommand}
                 </code>
               </div>
@@ -593,35 +597,36 @@ function UpdatesPanel() {
 
           {/* Changelog */}
           {updateInfo.changelog && updateInfo.changelog.length > 0 && (
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <h3 className="mb-3 text-sm font-semibold text-gray-900">Changelog</h3>
+            <SettingsCard title="Changelog">
               <div className="max-h-64 space-y-2 overflow-y-auto">
                 {updateInfo.changelog.map((entry) => (
                   <div key={entry.version} className="flex items-baseline gap-3 text-sm">
-                    <span className="w-14 shrink-0 font-mono text-xs text-gray-500">
+                    <span className="text-muted-foreground w-14 shrink-0 font-mono text-xs">
                       {entry.version}
                     </span>
-                    <span className="w-20 shrink-0 text-xs text-gray-400">{entry.date}</span>
-                    <span className="text-gray-700">{entry.summary}</span>
+                    <span className="text-muted-foreground w-20 shrink-0 text-xs">
+                      {entry.date}
+                    </span>
+                    <span className="text-foreground">{entry.summary}</span>
                   </div>
                 ))}
               </div>
-            </div>
+            </SettingsCard>
           )}
         </>
       )}
 
       {/* PR Created */}
       {prResult && (
-        <div className="rounded-lg border border-green-200 bg-green-50 p-4">
+        <div className="border-success/30 bg-success/10 rounded-lg border p-4">
           <div className="flex items-start gap-3">
-            <GitPullRequest className="mt-0.5 h-5 w-5 shrink-0 text-green-600" />
+            <GitPullRequest size={20} className="text-success mt-0.5 shrink-0" aria-hidden="true" />
             <div>
-              <h3 className="text-sm font-semibold text-green-900">Pull Request Created</h3>
-              <p className="mt-1 text-sm text-green-700">
+              <h3 className="text-foreground font-medium">Pull Request Created</h3>
+              <p className="text-muted-foreground mt-1 text-sm">
                 PR #{prResult.prNumber} has been created on your repository. Review and merge it to
                 apply the update, then run{' '}
-                <code className="rounded bg-green-100 px-1 font-mono text-xs">
+                <code className="bg-muted rounded px-1 font-mono text-xs">
                   npx prisma migrate deploy
                 </code>
                 .
@@ -630,9 +635,9 @@ function UpdatesPanel() {
                 href={prResult.prUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="mt-2 inline-flex items-center gap-1.5 text-sm font-medium text-green-700 hover:text-green-800"
+                className="text-brand mt-2 inline-flex items-center gap-1.5 text-sm font-medium hover:underline"
               >
-                <ExternalLink className="h-4 w-4" />
+                <ExternalLink size={16} aria-hidden="true" />
                 View Pull Request
               </a>
             </div>
@@ -641,65 +646,72 @@ function UpdatesPanel() {
       )}
 
       {/* GitHub Configuration */}
-      <div className="rounded-lg border border-gray-200 bg-white p-4">
-        <h3 className="mb-1 text-sm font-semibold text-gray-900">GitHub Integration</h3>
-        <p className="mb-4 text-xs text-gray-500">
-          Connect your repository to enable one-click update PRs. Credentials are encrypted at rest
-          (AES-256-GCM).
-        </p>
-
+      <SettingsCard
+        title="GitHub Integration"
+        description="Connect your repository to enable one-click update PRs. Credentials are encrypted at rest (AES-256-GCM)."
+      >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-gray-700">Repository</label>
+            <label
+              htmlFor="updates-gh-repo"
+              className="text-foreground mb-1 block text-sm font-medium"
+            >
+              Repository
+            </label>
             <input
+              id="updates-gh-repo"
               type="text"
               value={ghRepo}
               onChange={(e) => setGhRepo(e.target.value)}
               placeholder="owner/repo"
-              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={ghInputClass}
             />
-            <p className="mt-1 text-xs text-gray-500">
+            <p className="text-muted-foreground mt-1 text-sm">
               e.g.{' '}
-              <code className="rounded bg-gray-100 px-1 font-mono">
-                actuate-media/my-client-site
-              </code>
+              <code className="bg-muted rounded px-1 font-mono">actuate-media/my-client-site</code>
             </p>
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-gray-700">
+            <label
+              htmlFor="updates-gh-token"
+              className="text-foreground mb-1 block text-sm font-medium"
+            >
               GitHub Token
               {updateInfo?.hasGithubToken && !ghToken && (
-                <span className="ml-2 text-xs font-normal text-green-600">Saved</span>
+                <span className="text-success ml-2 text-xs font-normal">Saved</span>
               )}
             </label>
-            <div className="flex gap-2">
-              <div className="relative flex-1">
-                <input
-                  type={showGhToken ? 'text' : 'password'}
-                  value={ghToken}
-                  onChange={(e) => setGhToken(e.target.value)}
-                  placeholder={
-                    updateInfo?.hasGithubToken ? '••••••••••••••••' : 'ghp_... or github_pat_...'
-                  }
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 pr-10 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowGhToken(!showGhToken)}
-                  className="absolute top-1/2 right-2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600"
-                >
-                  {showGhToken ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                </button>
-              </div>
+            <div className="relative">
+              <input
+                id="updates-gh-token"
+                type={showGhToken ? 'text' : 'password'}
+                value={ghToken}
+                onChange={(e) => setGhToken(e.target.value)}
+                placeholder={
+                  updateInfo?.hasGithubToken ? '••••••••••••••••' : 'ghp_... or github_pat_...'
+                }
+                className={`${ghInputClass} pr-10`}
+              />
+              <button
+                type="button"
+                onClick={() => setShowGhToken(!showGhToken)}
+                aria-label={showGhToken ? 'Hide token' : 'Show token'}
+                className="text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2 p-1"
+              >
+                {showGhToken ? (
+                  <EyeOff size={16} aria-hidden="true" />
+                ) : (
+                  <Eye size={16} aria-hidden="true" />
+                )}
+              </button>
             </div>
-            <p className="mt-1 text-xs text-gray-500">
-              Needs <code className="rounded bg-gray-100 px-1 font-mono">repo</code> scope. Create
-              at{' '}
+            <p className="text-muted-foreground mt-1 text-sm">
+              Needs <code className="bg-muted rounded px-1 font-mono">repo</code> scope. Create at{' '}
               <a
                 href="https://github.com/settings/tokens"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-blue-600 hover:underline"
+                className="text-brand hover:underline"
               >
                 github.com/settings/tokens
               </a>
@@ -710,26 +722,25 @@ function UpdatesPanel() {
             type="button"
             onClick={saveGitHubConfig}
             disabled={savingConfig || (!ghToken && !ghRepo)}
-            className="flex items-center gap-2 rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-800 disabled:opacity-50"
+            className="bg-brand text-brand-foreground inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
           >
             {savingConfig ? (
               <>
-                <Loader2 className="h-4 w-4 animate-spin" />
-                Encrypting &amp; Saving...
+                <Loader2 size={16} className="animate-spin" aria-hidden="true" />
+                Encrypting &amp; Saving…
               </>
             ) : (
               'Save Configuration'
             )}
           </button>
         </div>
-      </div>
+      </SettingsCard>
 
       {/* Help Text */}
-      <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
-        <h3 className="mb-2 text-sm font-semibold text-gray-700">How Updates Work</h3>
-        <ul className="space-y-1.5 text-xs text-gray-600">
+      <SettingsCard title="How Updates Work">
+        <ul className="text-muted-foreground space-y-1.5 text-sm">
           <li className="flex items-start gap-2">
-            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
+            <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
               1
             </span>
             <span>
@@ -737,7 +748,7 @@ function UpdatesPanel() {
             </span>
           </li>
           <li className="flex items-start gap-2">
-            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
+            <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
               2
             </span>
             <span>
@@ -746,7 +757,7 @@ function UpdatesPanel() {
             </span>
           </li>
           <li className="flex items-start gap-2">
-            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
+            <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
               3
             </span>
             <span>
@@ -755,16 +766,16 @@ function UpdatesPanel() {
             </span>
           </li>
           <li className="flex items-start gap-2">
-            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
+            <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
               4
             </span>
             <span>
               Review and merge the PR, then deploy. Database migrations run automatically via{' '}
-              <code className="rounded bg-gray-200 px-1 font-mono">prisma migrate deploy</code>.
+              <code className="bg-muted rounded px-1 font-mono">prisma migrate deploy</code>.
             </span>
           </li>
         </ul>
-      </div>
+      </SettingsCard>
     </>
   )
 }

package/src/views/Users.tsx

@@ -923,7 +923,7 @@ export function Users({ embedded = false }: UsersProps = {}) {
         {/* Header */}
         <div className="border-border flex flex-col gap-3 border-b p-4 lg:flex-row lg:items-center lg:justify-between">
           <div>
-            <h2 className="text-card-foreground text-base font-medium">Team members</h2>
+            <h2 className="text-card-foreground text-lg font-medium">Team members</h2>
             <p className="text-muted-foreground text-sm">
               {peopleCount} {peopleCount === 1 ? 'person has' : 'people have'} access to this
               workspace