@actuate-media/cms-admin 0.49.1 → 0.49.4

package/src/views/ScriptTags.tsx

@@ -30,9 +30,9 @@ const PLACEMENT_LABELS: Record<string, string> = {
 }
 
 const PLACEMENT_COLORS: Record<string, string> = {
-  head: 'bg-purple-100 text-purple-700',
-  body_open: 'bg-blue-100 text-blue-700',
-  body_close: 'bg-green-100 text-green-700',
+  head: 'bg-accent text-accent-foreground',
+  body_open: 'bg-primary/15 text-primary',
+  body_close: 'bg-success/15 text-success',
 }
 
 function scopeLabel(tag: ScriptTag): string {
@@ -73,7 +73,7 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
   if (loading) {
     return (
       <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
-        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
+        <Loader2 className="text-primary h-6 w-6 animate-spin" />
       </div>
     )
   }
@@ -81,12 +81,12 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
   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 className="border-destructive/30 bg-destructive/10 mb-4 flex items-center gap-3 rounded-lg border p-3">
+          <AlertTriangle className="text-destructive h-5 w-5 shrink-0" />
+          <span className="text-destructive flex-1 text-sm">{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 text-destructive hover:bg-destructive/15 rounded-lg border px-3 py-1 text-sm transition-colors"
           >
             Retry
           </button>
@@ -95,15 +95,15 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
 
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <h1 className="mb-1 text-2xl font-semibold text-gray-900">Script Tags</h1>
-          <p className="text-sm text-gray-600">
+          <h1 className="text-foreground mb-1 text-2xl font-medium">Script Tags</h1>
+          <p className="text-muted-foreground text-sm">
             Manage tracking codes, analytics, and custom scripts injected into your site
           </p>
         </div>
         <button
           type="button"
           onClick={() => onNavigate?.('/script-tags/new')}
-          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"
+          className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
         >
           <Plus className="h-4 w-4" />
           New Tag
@@ -111,67 +111,71 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
       </div>
 
       {tags.length === 0 && !error ? (
-        <div className="rounded-lg border border-gray-200 bg-white p-12 text-center">
-          <Code2 className="mx-auto mb-3 h-10 w-10 text-gray-300" />
-          <h3 className="text-sm font-semibold text-gray-900">No script tags yet</h3>
-          <p className="mt-1 text-sm text-gray-500">
+        <div className="border-border bg-card rounded-lg border p-12 text-center">
+          <Code2 className="text-muted-foreground mx-auto mb-3 h-10 w-10" />
+          <h3 className="text-foreground text-sm font-medium">No script tags yet</h3>
+          <p className="text-muted-foreground mt-1 text-sm">
             Add tracking codes like Google Analytics, Tag Manager, or Facebook Pixel.
           </p>
           <button
             type="button"
             onClick={() => onNavigate?.('/script-tags/new')}
-            className="mt-4 inline-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"
+            className="bg-primary text-primary-foreground hover:bg-primary/90 mt-4 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
           >
             <Plus className="h-4 w-4" />
             Add Your First Tag
           </button>
         </div>
       ) : (
-        <div className="overflow-hidden rounded-lg border border-gray-200 bg-white">
+        <div className="border-border bg-card overflow-hidden rounded-lg border">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-gray-200 bg-gray-50">
-                <th className="px-4 py-3 text-left font-medium text-gray-600">Name</th>
-                <th className="px-4 py-3 text-left font-medium text-gray-600">Placement</th>
-                <th className="px-4 py-3 text-left font-medium text-gray-600">Scope</th>
-                <th className="px-4 py-3 text-center font-medium text-gray-600">Priority</th>
-                <th className="px-4 py-3 text-center font-medium text-gray-600">Enabled</th>
+              <tr className="border-border bg-muted border-b">
+                <th className="text-muted-foreground px-4 py-3 text-left font-medium">Name</th>
+                <th className="text-muted-foreground px-4 py-3 text-left font-medium">Placement</th>
+                <th className="text-muted-foreground px-4 py-3 text-left font-medium">Scope</th>
+                <th className="text-muted-foreground px-4 py-3 text-center font-medium">
+                  Priority
+                </th>
+                <th className="text-muted-foreground px-4 py-3 text-center font-medium">Enabled</th>
               </tr>
             </thead>
             <tbody>
               {tags.map((tag) => (
                 <tr
                   key={tag.id}
-                  className="border-b border-gray-100 transition-colors last:border-0 hover:bg-gray-50"
+                  className="border-border hover:bg-muted border-b transition-colors last:border-0"
                 >
                   <td className="px-4 py-3">
                     <button
                       type="button"
                       onClick={() => onNavigate?.(`/script-tags/${tag.id}`)}
-                      className="font-medium text-blue-600 hover:text-blue-800 hover:underline"
+                      className="text-primary hover:text-primary/80 font-medium hover:underline"
                     >
                       {tag.name}
                     </button>
                   </td>
                   <td className="px-4 py-3">
                     <span
-                      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-gray-100 text-gray-700'}`}
+                      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-muted text-foreground'}`}
                     >
                       {PLACEMENT_LABELS[tag.placement] ?? tag.placement}
                     </span>
                   </td>
-                  <td className="px-4 py-3 text-gray-600">{scopeLabel(tag)}</td>
-                  <td className="px-4 py-3 text-center font-mono text-gray-600">{tag.priority}</td>
+                  <td className="text-muted-foreground px-4 py-3">{scopeLabel(tag)}</td>
+                  <td className="text-muted-foreground px-4 py-3 text-center font-mono">
+                    {tag.priority}
+                  </td>
                   <td className="px-4 py-3 text-center">
                     <button
                       type="button"
                       onClick={() => toggleEnabled(tag)}
                       disabled={togglingId === tag.id}
-                      className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${tag.enabled ? 'bg-blue-600' : 'bg-gray-300'}`}
+                      className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${tag.enabled ? 'bg-primary' : 'bg-switch-background'}`}
                       aria-pressed={tag.enabled}
                     >
                       <span
-                        className={`absolute top-0.5 block h-5 w-5 rounded-full bg-white transition-transform ${
+                        className={`bg-card absolute top-0.5 block h-5 w-5 rounded-full transition-transform ${
                           tag.enabled ? 'translate-x-[22px]' : 'translate-x-0.5'
                         }`}
                       />

package/src/views/SetupWizard.tsx

@@ -74,7 +74,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
             <CheckCircle2 className="h-8 w-8 text-green-600" />
           </div>
-          <h1 className="mb-2 text-2xl font-bold text-gray-900">Setup Complete</h1>
+          <h1 className="mb-2 text-2xl font-medium text-gray-900">Setup Complete</h1>
           <p className="mb-6 text-gray-600">
             Your admin account has been created. You can now sign in to manage your content.
           </p>
@@ -96,7 +96,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           <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>
-          <h1 className="text-2xl font-bold text-gray-900">Welcome to {siteName}</h1>
+          <h1 className="text-2xl font-medium text-gray-900">Welcome to {siteName}</h1>
           <p className="mt-2 text-gray-600">Create your admin account to get started</p>
         </div>
 

package/src/views/page-editor/SectionInspector.tsx

@@ -139,7 +139,7 @@ export function SectionInspector({
 
         {/* Content fields (schema-driven) */}
         <fieldset disabled={!canEdit} className="space-y-3">
-          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
+          <legend className="text-muted-foreground mb-2 text-[10px] font-medium tracking-wider uppercase">
             Content
           </legend>
           {def?.fields.map((field) => (
@@ -154,7 +154,7 @@ export function SectionInspector({
 
         {/* Section meta + visibility */}
         <fieldset disabled={!canEdit} className="space-y-3">
-          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
+          <legend className="text-muted-foreground mb-2 text-[10px] font-medium tracking-wider uppercase">
             Section settings
           </legend>
           <div>
@@ -203,7 +203,7 @@ export function SectionInspector({
 
         {/* Appearance */}
         <fieldset disabled={!canEdit} className="space-y-3">
-          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
+          <legend className="text-muted-foreground mb-2 text-[10px] font-medium tracking-wider uppercase">
             Appearance
           </legend>
           <div>
@@ -263,7 +263,7 @@ export function SectionInspector({
 
         {/* Advanced */}
         <fieldset disabled={!canEdit} className="space-y-3">
-          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
+          <legend className="text-muted-foreground mb-2 text-[10px] font-medium tracking-wider uppercase">
             Advanced
           </legend>
           <div>

package/src/views/post-editor/PostHeader.tsx

@@ -49,9 +49,7 @@ export function PostHeader({ config, context }: PostHeaderProps) {
         <div className="absolute inset-0 bg-linear-to-t from-black/70 to-black/10" aria-hidden />
         <div className="absolute inset-x-0 bottom-0 px-6 pb-8">
           <div className={`mx-auto flex max-w-3xl flex-col ${align}`}>
-            <h1 className="text-3xl font-semibold tracking-tight text-white sm:text-4xl">
-              {title}
-            </h1>
+            <h1 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">{title}</h1>
             {config.showExcerpt && context.excerpt && (
               <p className="mt-3 max-w-2xl text-lg text-white/90">{context.excerpt}</p>
             )}
@@ -67,7 +65,7 @@ export function PostHeader({ config, context }: PostHeaderProps) {
       <div
         className={`flex max-w-3xl flex-col ${align} ${config.layout === 'centered' ? 'mx-auto' : ''}`}
       >
-        <h1 className="text-3xl font-semibold tracking-tight text-zinc-900 sm:text-4xl">{title}</h1>
+        <h1 className="text-3xl font-medium tracking-tight text-zinc-900 sm:text-4xl">{title}</h1>
         {config.showExcerpt && context.excerpt && (
           <p className="mt-3 max-w-2xl text-lg text-zinc-600">{context.excerpt}</p>
         )}

package/src/views/post-editor/PostHeaderPanel.tsx

@@ -48,7 +48,7 @@ export function PostHeaderPanel({ header, canEdit, onClose, onChange }: PostHead
 
       <div className="flex-1 space-y-6 overflow-y-auto p-4">
         <fieldset disabled={!canEdit} className="space-y-3">
-          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
+          <legend className="text-muted-foreground mb-2 text-[10px] font-medium tracking-wider uppercase">
             Layout
           </legend>
           <div>
@@ -69,7 +69,7 @@ export function PostHeaderPanel({ header, canEdit, onClose, onChange }: PostHead
         </fieldset>
 
         <fieldset disabled={!canEdit} className="space-y-2">
-          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
+          <legend className="text-muted-foreground mb-2 text-[10px] font-medium tracking-wider uppercase">
             Show in header
           </legend>
           {TOGGLES.map((t) => {