@actuate-media/cms-admin 0.49.0 → 0.49.3

package/src/views/Redirects.tsx

@@ -102,7 +102,7 @@ export function Redirects({ onNavigate }: RedirectsProps) {
       <button
         type="button"
         onClick={() => setSortConfig(toggleSort(sortConfig, sortKey))}
-        className="flex items-center gap-1 text-xs font-medium text-gray-700 transition-colors hover:text-gray-900"
+        className="text-foreground hover:text-foreground flex items-center gap-1 text-xs font-medium transition-colors"
       >
         {label}
         {active ? (
@@ -112,7 +112,7 @@ export function Redirects({ onNavigate }: RedirectsProps) {
             <ArrowDown className="h-3 w-3" />
           )
         ) : (
-          <ArrowUpDown className="h-3 w-3 text-gray-400" />
+          <ArrowUpDown className="text-muted-foreground h-3 w-3" />
         )}
       </button>
     )
@@ -121,7 +121,7 @@ export function Redirects({ onNavigate }: RedirectsProps) {
   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>
     )
   }
@@ -129,12 +129,12 @@ export function Redirects({ onNavigate }: RedirectsProps) {
   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>
@@ -143,35 +143,37 @@ export function Redirects({ onNavigate }: RedirectsProps) {
 
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <h1 className="mb-1 text-xl font-semibold text-gray-900 sm:text-2xl">Redirects</h1>
-          <p className="text-sm text-gray-600">{filteredAndSorted.length} total redirects</p>
+          <h1 className="text-foreground mb-1 text-xl font-semibold sm:text-2xl">Redirects</h1>
+          <p className="text-muted-foreground text-sm">
+            {filteredAndSorted.length} total redirects
+          </p>
         </div>
         <button
           type="button"
           onClick={() => setShowAddDialog(true)}
-          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"
+          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"
         >
           <Plus className="h-4 w-4" />
           Add Redirect
         </button>
       </div>
 
-      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
+      <div className="border-border bg-card mb-4 rounded-lg border">
         <div className="flex flex-col gap-3 p-3 sm:flex-row">
           <div className="relative flex-1">
-            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
             <input
               type="text"
               placeholder="Search by source or destination URL..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+              className="border-input focus:ring-ring w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
             />
           </div>
           <select
             value={filterType}
             onChange={(e) => setFilterType(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-input focus:ring-ring rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
           >
             <option value="all">All Types</option>
             <option value="301">301 (Permanent)</option>
@@ -182,17 +184,17 @@ export function Redirects({ onNavigate }: RedirectsProps) {
 
       {filteredAndSorted.length === 0 && !loading ? (
         <div className="flex flex-col items-center justify-center py-16 text-center">
-          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
-            <ArrowRightLeft className="h-6 w-6 text-gray-400" />
+          <div className="bg-muted mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+            <ArrowRightLeft className="text-muted-foreground h-6 w-6" />
           </div>
-          <h3 className="mb-1 text-sm font-medium text-gray-900">No redirects yet</h3>
-          <p className="text-sm text-gray-500">Add your first redirect to get started.</p>
+          <h3 className="text-foreground mb-1 text-sm font-medium">No redirects yet</h3>
+          <p className="text-muted-foreground text-sm">Add your first redirect to get started.</p>
         </div>
       ) : (
-        <div className="rounded-lg border border-gray-200 bg-white">
+        <div className="border-border bg-card rounded-lg border">
           <div className="overflow-x-auto">
             <table className="w-full">
-              <thead className="border-b border-gray-200 bg-gray-50">
+              <thead className="border-border bg-muted border-b">
                 <tr>
                   <th className="px-4 py-2 text-left">
                     <SortHeader label="Source URL" sortKey="from" />
@@ -209,19 +211,21 @@ export function Redirects({ onNavigate }: RedirectsProps) {
                   <th className="px-4 py-2 text-left">
                     <SortHeader label="Status" sortKey="active" />
                   </th>
-                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Actions</th>
+                  <th className="text-foreground px-4 py-2 text-left text-xs font-medium">
+                    Actions
+                  </th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-gray-200">
+              <tbody className="divide-border divide-y">
                 {filteredAndSorted.map((redirect) => (
-                  <tr key={redirect.id} className="transition-colors hover:bg-gray-50">
+                  <tr key={redirect.id} className="hover:bg-muted transition-colors">
                     <td className="px-4 py-3">
-                      <code className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-900">
+                      <code className="bg-muted text-foreground rounded px-2 py-1 text-xs">
                         {redirect.from}
                       </code>
                     </td>
                     <td className="px-4 py-3">
-                      <code className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-900">
+                      <code className="bg-muted text-foreground rounded px-2 py-1 text-xs">
                         {redirect.to}
                       </code>
                     </td>
@@ -229,22 +233,22 @@ export function Redirects({ onNavigate }: RedirectsProps) {
                       <span
                         className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
                           redirect.type === '301'
-                            ? 'bg-blue-100 text-blue-800'
-                            : 'bg-purple-100 text-purple-800'
+                            ? 'bg-primary/15 text-primary'
+                            : 'bg-accent text-accent-foreground'
                         }`}
                       >
                         {redirect.type}
                       </span>
                     </td>
-                    <td className="px-4 py-3 text-sm text-gray-600">
+                    <td className="text-muted-foreground px-4 py-3 text-sm">
                       {redirect.hits.toLocaleString()}
                     </td>
                     <td className="px-4 py-3">
                       <span
                         className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
                           redirect.active
-                            ? 'bg-green-100 text-green-800'
-                            : 'bg-gray-100 text-gray-800'
+                            ? 'bg-success/15 text-success'
+                            : 'bg-muted text-foreground'
                         }`}
                       >
                         {redirect.active ? 'Active' : 'Inactive'}
@@ -255,18 +259,18 @@ export function Redirects({ onNavigate }: RedirectsProps) {
                         <button
                           type="button"
                           onClick={() => onNavigate?.(`/redirects/${redirect.id}/edit`)}
-                          className="rounded p-1.5 transition-colors hover:bg-gray-100"
+                          className="hover:bg-muted rounded p-1.5 transition-colors"
                           aria-label="Edit redirect"
                         >
-                          <Pencil className="h-4 w-4 text-gray-600" />
+                          <Pencil className="text-muted-foreground h-4 w-4" />
                         </button>
                         <button
                           type="button"
                           onClick={() => handleDelete(redirect.id)}
-                          className="rounded p-1.5 transition-colors hover:bg-gray-100"
+                          className="hover:bg-muted rounded p-1.5 transition-colors"
                           aria-label="Delete redirect"
                         >
-                          <Trash2 className="h-4 w-4 text-red-600" />
+                          <Trash2 className="text-destructive h-4 w-4" />
                         </button>
                       </div>
                     </td>
@@ -281,24 +285,24 @@ export function Redirects({ onNavigate }: RedirectsProps) {
       <Dialog.Root open={showAddDialog} onOpenChange={setShowAddDialog}>
         <Dialog.Portal container={adminPortalContainer()}>
           <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
-          <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-lg">
-            <Dialog.Title className="mb-4 text-lg font-semibold text-gray-900">
+          <Dialog.Content className="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 p-6 shadow-lg">
+            <Dialog.Title className="text-foreground mb-4 text-lg font-semibold">
               Add Redirect
             </Dialog.Title>
             <form onSubmit={handleSubmit} className="space-y-4">
               <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Source URL</label>
+                <label className="text-foreground mb-1 block text-sm font-medium">Source URL</label>
                 <input
                   type="text"
                   value={newRedirect.source}
                   onChange={(e) => setNewRedirect({ ...newRedirect, source: e.target.value })}
                   placeholder="/old-page"
-                  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-input focus:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                   required
                 />
               </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">
                   Destination URL
                 </label>
                 <input
@@ -306,12 +310,12 @@ export function Redirects({ onNavigate }: RedirectsProps) {
                   value={newRedirect.destination}
                   onChange={(e) => setNewRedirect({ ...newRedirect, destination: e.target.value })}
                   placeholder="/new-page"
-                  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-input focus:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                   required
                 />
               </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 Type
                 </label>
                 <select
@@ -319,7 +323,7 @@ export function Redirects({ onNavigate }: RedirectsProps) {
                   onChange={(e) =>
                     setNewRedirect({ ...newRedirect, type: e.target.value as '301' | '302' })
                   }
-                  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-input focus:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                 >
                   <option value="301">301 (Permanent)</option>
                   <option value="302">302 (Temporary)</option>
@@ -329,14 +333,14 @@ export function Redirects({ onNavigate }: RedirectsProps) {
                 <Dialog.Close asChild>
                   <button
                     type="button"
-                    className="rounded-lg border border-gray-300 px-4 py-2 text-sm transition-colors hover:bg-gray-50"
+                    className="border-input hover:bg-muted rounded-lg border px-4 py-2 text-sm transition-colors"
                   >
                     Cancel
                   </button>
                 </Dialog.Close>
                 <button
                   type="submit"
-                  className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
+                  className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg px-4 py-2 text-sm transition-colors"
                 >
                   Add Redirect
                 </button>

package/src/views/ScriptTagEditor.tsx

@@ -111,7 +111,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
   if (loading && !isNew) {
     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>
     )
   }
@@ -119,9 +119,9 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
   return (
     <div className="max-w-3xl 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>
         </div>
       )}
 
@@ -129,20 +129,20 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
         <button
           type="button"
           onClick={() => onNavigate?.('/script-tags')}
-          className="mb-3 flex items-center gap-1.5 text-sm text-gray-500 transition-colors hover:text-gray-700"
+          className="text-muted-foreground hover:text-foreground mb-3 flex items-center gap-1.5 text-sm transition-colors"
         >
           <ArrowLeft className="h-4 w-4" />
           Back to Script Tags
         </button>
-        <h1 className="text-2xl font-semibold text-gray-900">
+        <h1 className="text-foreground text-2xl font-semibold">
           {isNew ? 'New Script Tag' : 'Edit Script Tag'}
         </h1>
       </div>
 
-      <div className="mb-6 rounded-lg border border-amber-200 bg-amber-50 p-3">
+      <div className="border-warning/30 bg-warning/10 mb-6 rounded-lg border p-3">
         <div className="flex items-start gap-2">
-          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600" />
-          <p className="text-sm text-amber-800">
+          <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" />
+          <p className="text-warning text-sm">
             This code will run on public pages matching the scope below. Only add trusted code from
             verified sources (e.g. Google Analytics, Meta Pixel).
           </p>
@@ -150,49 +150,49 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
       </div>
 
       <div className="space-y-6">
-        <div className="space-y-4 rounded-lg border border-gray-200 bg-white p-4">
+        <div className="border-border bg-card space-y-4 rounded-lg border p-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-gray-700">Name</label>
+            <label className="text-foreground mb-1 block text-sm font-medium">Name</label>
             <input
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="e.g. Google Tag Manager, Facebook Pixel"
-              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-input focus:ring-ring 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">Code</label>
+            <label className="text-foreground mb-1 block text-sm font-medium">Code</label>
             <textarea
               value={code}
               onChange={(e) => setCode(e.target.value)}
               placeholder="Paste your HTML/JavaScript snippet here..."
               rows={10}
-              className="w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+              className="border-input focus:ring-ring w-full rounded-lg border px-3 py-2 font-mono text-sm focus:ring-2 focus:outline-none"
               spellCheck={false}
             />
-            <p className="mt-1 text-xs text-gray-500">
+            <p className="text-muted-foreground mt-1 text-xs">
               Paste the full code snippet including {'<script>'} tags.
             </p>
           </div>
         </div>
 
-        <div className="space-y-4 rounded-lg border border-gray-200 bg-white p-4">
-          <h3 className="text-sm font-semibold text-gray-900">Placement & Scope</h3>
+        <div className="border-border bg-card space-y-4 rounded-lg border p-4">
+          <h3 className="text-foreground text-sm font-semibold">Placement & Scope</h3>
 
           <div>
-            <label className="mb-1 block text-sm font-medium text-gray-700">Placement</label>
+            <label className="text-foreground mb-1 block text-sm font-medium">Placement</label>
             <select
               value={placement}
               onChange={(e) => setPlacement(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-input focus:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
             >
               <option value="head">Head — inside {'<head>'}</option>
               <option value="body_open">Body Open — right after {'<body>'}</option>
               <option value="body_close">Body Close — before {'</body>'}</option>
             </select>
-            <p className="mt-1 text-xs text-gray-500">
+            <p className="text-muted-foreground mt-1 text-xs">
               {placement === 'head' && 'Best for analytics scripts, meta tags, and custom CSS.'}
               {placement === 'body_open' && 'Best for GTM noscript tags and early-loading scripts.'}
               {placement === 'body_close' &&
@@ -201,11 +201,11 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
           </div>
 
           <div>
-            <label className="mb-1 block text-sm font-medium text-gray-700">Scope</label>
+            <label className="text-foreground mb-1 block text-sm font-medium">Scope</label>
             <select
               value={scope}
               onChange={(e) => setScope(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-input focus:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
             >
               <option value="site">Entire Website</option>
               <option value="parents">Specific Parent Pages (includes child pages)</option>
@@ -215,7 +215,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
 
           {scope !== 'site' && (
             <div>
-              <label className="mb-1 block text-sm font-medium text-gray-700">
+              <label className="text-foreground mb-1 block text-sm font-medium">
                 {scope === 'parents' ? 'Parent Paths' : 'URL Paths'}
               </label>
               <div className="flex gap-2">
@@ -230,18 +230,18 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
                     }
                   }}
                   placeholder="/services"
-                  className="flex-1 rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                  className="border-input focus:ring-ring flex-1 rounded-lg border px-3 py-2 font-mono text-sm focus:ring-2 focus:outline-none"
                 />
                 <button
                   type="button"
                   onClick={addPath}
-                  className="rounded-lg border border-gray-300 px-3 py-2 text-sm transition-colors hover:bg-gray-50"
+                  className="border-input hover:bg-muted rounded-lg border px-3 py-2 text-sm transition-colors"
                 >
                   <Plus className="h-4 w-4" />
                 </button>
               </div>
               {scope === 'parents' && (
-                <p className="mt-1 text-xs text-gray-500">
+                <p className="text-muted-foreground mt-1 text-xs">
                   This tag will also apply to all child pages under each path.
                 </p>
               )}
@@ -250,13 +250,13 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
                   {targetPaths.map((p) => (
                     <span
                       key={p}
-                      className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 font-mono text-xs text-gray-700"
+                      className="bg-muted text-foreground inline-flex items-center gap-1 rounded-full px-3 py-1 font-mono text-xs"
                     >
                       {p}
                       <button
                         type="button"
                         onClick={() => removePath(p)}
-                        className="ml-0.5 text-gray-400 hover:text-gray-600"
+                        className="text-muted-foreground hover:text-muted-foreground ml-0.5"
                       >
                         <X className="h-3 w-3" />
                       </button>
@@ -269,29 +269,29 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
 
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="mb-1 block text-sm font-medium text-gray-700">Priority</label>
+              <label className="text-foreground mb-1 block text-sm font-medium">Priority</label>
               <input
                 type="number"
                 value={priority}
                 onChange={(e) => setPriority(parseInt(e.target.value, 10) || 0)}
                 min={0}
-                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-input focus:ring-ring w-full 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">
                 Lower numbers load first (e.g. 1 = first, 100 = default)
               </p>
             </div>
             <div>
-              <label className="mb-1 block text-sm font-medium text-gray-700">Enabled</label>
+              <label className="text-foreground mb-1 block text-sm font-medium">Enabled</label>
               <div className="pt-2">
                 <button
                   type="button"
                   onClick={() => setEnabled(!enabled)}
-                  className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${enabled ? 'bg-blue-600' : 'bg-gray-300'}`}
+                  className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${enabled ? 'bg-primary' : 'bg-switch-background'}`}
                   aria-pressed={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 ${
                       enabled ? 'translate-x-[22px]' : 'translate-x-0.5'
                     }`}
                   />
@@ -307,19 +307,19 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
               <>
                 {showDeleteConfirm ? (
                   <div className="flex items-center gap-2">
-                    <span className="text-sm text-red-600">Delete this tag?</span>
+                    <span className="text-destructive text-sm">Delete this tag?</span>
                     <button
                       type="button"
                       onClick={handleDelete}
                       disabled={deleting}
-                      className="rounded-lg bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700 disabled:opacity-50"
+                      className="bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-lg px-3 py-1.5 text-sm disabled:opacity-50"
                     >
                       {deleting ? 'Deleting...' : 'Confirm'}
                     </button>
                     <button
                       type="button"
                       onClick={() => setShowDeleteConfirm(false)}
-                      className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-50"
+                      className="border-input hover:bg-muted rounded-lg border px-3 py-1.5 text-sm"
                     >
                       Cancel
                     </button>
@@ -328,7 +328,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
                   <button
                     type="button"
                     onClick={() => setShowDeleteConfirm(true)}
-                    className="flex items-center gap-1.5 text-sm text-red-600 transition-colors hover:text-red-700"
+                    className="text-destructive hover:text-destructive flex items-center gap-1.5 text-sm transition-colors"
                   >
                     <Trash2 className="h-4 w-4" />
                     Delete
@@ -341,7 +341,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
             <button
               type="button"
               onClick={() => onNavigate?.('/script-tags')}
-              className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-50"
+              className="border-input text-foreground hover:bg-muted rounded-lg border px-4 py-2 text-sm transition-colors"
             >
               Cancel
             </button>
@@ -349,7 +349,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
               type="button"
               onClick={handleSave}
               disabled={saving}
-              className="rounded-lg bg-blue-600 px-6 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 rounded-lg px-6 py-2 text-sm transition-colors disabled:opacity-50"
             >
               {saving ? 'Saving...' : isNew ? 'Create Tag' : 'Save Changes'}
             </button>