@actuate-media/cms-admin 0.49.0 → 0.49.3

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-semibold">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-semibold">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'
                         }`}
                       />