@actuate-media/cms-admin 0.49.1 → 0.49.4

package/src/views/MediaBrowser.tsx

@@ -361,7 +361,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
       <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 ? (
@@ -371,7 +371,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
             <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>
     )
@@ -380,7 +380,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
   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>
     )
   }
@@ -388,12 +388,12 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
   return (
     <div className="flex h-full flex-col 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>
@@ -405,14 +405,14 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
           <button
             type="button"
             onClick={() => setSidebarOpen((prev) => !prev)}
-            className="rounded-lg p-1.5 transition-colors hover:bg-gray-100"
+            className="hover:bg-muted rounded-lg p-1.5 transition-colors"
             title={sidebarOpen ? 'Hide folders' : 'Show folders'}
           >
-            <FolderInput className="h-5 w-5 text-gray-600" />
+            <FolderInput className="text-muted-foreground h-5 w-5" />
           </button>
           <div>
-            <h1 className="mb-1 text-xl font-semibold text-gray-900 sm:text-2xl">Media Library</h1>
-            <p className="text-sm text-gray-600">{filteredAndSorted.length} files</p>
+            <h1 className="text-foreground mb-1 text-xl font-medium sm:text-2xl">Media Library</h1>
+            <p className="text-muted-foreground text-sm">{filteredAndSorted.length} files</p>
           </div>
         </div>
         <div>
@@ -427,7 +427,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
           <button
             onClick={() => fileInputRef.current?.click()}
             disabled={uploading}
-            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 disabled:opacity-50"
+            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 disabled:opacity-50"
           >
             {uploading ? (
               <Loader2 className="h-4 w-4 animate-spin" />
@@ -441,7 +441,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
 
       <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
         {sidebarOpen && (
-          <div className="flex w-56 shrink-0 flex-col overflow-hidden rounded-lg border border-gray-200 bg-white">
+          <div className="border-border bg-card flex w-56 shrink-0 flex-col overflow-hidden rounded-lg border">
             <FolderTree
               scope="media"
               selected={folderSel}
@@ -457,23 +457,23 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
         )}
 
         <div className="flex min-w-0 flex-1 flex-col">
-          <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 items-center justify-between p-3">
               <div className="flex flex-1 items-center gap-3">
                 <div className="relative max-w-md 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 media..."
                     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="image">Images</option>
@@ -481,16 +481,16 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                   <option value="document">Documents</option>
                 </select>
               </div>
-              <div className="flex items-center gap-1 rounded-lg bg-gray-100 p-1">
+              <div className="bg-muted flex items-center gap-1 rounded-lg p-1">
                 <button
                   onClick={() => setViewMode('grid')}
-                  className={`rounded p-1.5 transition-colors ${viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'}`}
+                  className={`rounded p-1.5 transition-colors ${viewMode === 'grid' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
                 >
                   <Grid3x3 className="h-4 w-4" />
                 </button>
                 <button
                   onClick={() => setViewMode('list')}
-                  className={`rounded p-1.5 transition-colors ${viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'}`}
+                  className={`rounded p-1.5 transition-colors ${viewMode === 'list' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
                 >
                   <List className="h-4 w-4" />
                 </button>
@@ -499,9 +499,9 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
           </div>
 
           {selectedMedia.length > 0 && (
-            <div className="mb-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
+            <div className="border-primary/30 bg-primary/10 mb-4 rounded-lg border p-3">
               <div className="flex items-center justify-between">
-                <span className="text-sm text-blue-900">
+                <span className="text-primary text-sm">
                   {selectedMedia.length} file{selectedMedia.length !== 1 ? 's' : ''} selected
                 </span>
                 <div className="flex items-center gap-2">
@@ -510,13 +510,13 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                       for (const id of selectedMedia) await deleteMedia(id)
                       setSelectedMedia([])
                     }}
-                    className="rounded-lg bg-red-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-red-700"
+                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-lg px-3 py-1.5 text-sm transition-colors"
                   >
                     Delete Selected
                   </button>
                   <button
                     onClick={() => setSelectedMedia([])}
-                    className="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm transition-colors hover:bg-gray-50"
+                    className="border-input bg-card hover:bg-muted rounded-lg border px-3 py-1.5 text-sm transition-colors"
                   >
                     Cancel
                   </button>
@@ -527,22 +527,24 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
 
           {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">
-                <ImageIcon 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">
+                <ImageIcon className="text-muted-foreground h-6 w-6" />
               </div>
-              <h3 className="mb-1 text-sm font-medium text-gray-900">
+              <h3 className="text-foreground mb-1 text-sm font-medium">
                 {folderSel.type === 'smart' && folderSel.smart === 'uncategorized'
                   ? 'No uncategorized media'
                   : folderSel.type === 'folder'
                     ? 'No media in this folder'
                     : 'No media yet'}
               </h3>
-              <p className="text-sm text-gray-500">Upload your first file to get started.</p>
+              <p className="text-muted-foreground text-sm">
+                Upload your first file to get started.
+              </p>
             </div>
           ) : (
             <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
               <div
-                className={`overflow-hidden rounded-lg border border-gray-200 bg-white transition-all duration-200 ${panelOpen ? 'min-w-0 flex-1' : 'w-full'}`}
+                className={`border-border bg-card overflow-hidden rounded-lg border transition-all duration-200 ${panelOpen ? 'min-w-0 flex-1' : 'w-full'}`}
               >
                 {viewMode === 'grid' ? (
                   <div
@@ -567,25 +569,25 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                           key={item.id}
                           className={`group relative flex cursor-pointer flex-col overflow-hidden rounded-lg border-2 transition-all ${
                             isActive
-                              ? 'border-blue-500 ring-2 ring-blue-200'
+                              ? 'border-primary ring-primary/30 ring-2'
                               : selectedMedia.includes(item.id)
-                                ? 'border-blue-400 ring-1 ring-blue-100'
-                                : 'border-gray-200 hover:border-gray-300'
+                                ? 'border-primary/60 ring-primary/20 ring-1'
+                                : 'border-border hover:border-input'
                           }`}
                           onClick={() => openDetail(item)}
                           draggable
                           onDragStart={(e) => handleDragStart(e, item.id)}
                         >
                           <div className="relative aspect-square w-full overflow-hidden">
-                            <div className="flex h-full w-full items-center justify-center bg-gray-100">
+                            <div className="bg-muted flex h-full w-full items-center justify-center">
                               <MediaPreview item={item} />
                             </div>
                             {hasIssues && (
                               <div
-                                className="absolute top-1.5 left-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-yellow-500"
+                                className="bg-warning absolute top-1.5 left-1.5 flex h-5 w-5 items-center justify-center rounded-full"
                                 title="Needs attention"
                               >
-                                <AlertTriangle className="h-3 w-3 text-white" />
+                                <AlertTriangle className="text-warning-foreground h-3 w-3" />
                               </div>
                             )}
                             <div
@@ -595,13 +597,13 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                               <div
                                 className={`flex h-5 w-5 items-center justify-center rounded border-2 transition-colors ${
                                   selectedMedia.includes(item.id)
-                                    ? 'border-blue-600 bg-blue-600'
-                                    : 'border-gray-400 bg-white/80'
+                                    ? 'border-primary bg-primary'
+                                    : 'border-input bg-card/80'
                                 }`}
                               >
                                 {selectedMedia.includes(item.id) && (
                                   <svg
-                                    className="h-3 w-3 text-white"
+                                    className="text-primary-foreground h-3 w-3"
                                     fill="none"
                                     viewBox="0 0 12 12"
                                   >
@@ -617,18 +619,18 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                               </div>
                             </div>
                           </div>
-                          <div className="flex items-center gap-2 border-t border-gray-200 bg-white px-2 py-1.5">
+                          <div className="border-border bg-card flex items-center gap-2 border-t px-2 py-1.5">
                             <span
                               className={`mt-0.5 h-2 w-2 shrink-0 self-start rounded-full ${
-                                hasIssues ? 'bg-yellow-500' : 'bg-green-500'
+                                hasIssues ? 'bg-warning' : 'bg-success'
                               }`}
                               title={hasIssues ? 'Needs attention' : 'SEO complete'}
                             />
                             <div className="min-w-0 flex-1">
-                              <p className="truncate text-xs font-medium text-gray-900">
+                              <p className="text-foreground truncate text-xs font-medium">
                                 {item.name}
                               </p>
-                              <p className="truncate text-xs text-gray-500">
+                              <p className="text-muted-foreground truncate text-xs">
                                 {[typeLabel, item.size].filter(Boolean).join(' · ')}
                               </p>
                             </div>
@@ -640,7 +642,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                 ) : (
                   <div className="h-full overflow-y-auto">
                     <table className="w-full">
-                      <thead className="sticky top-0 border-b border-gray-200 bg-gray-50">
+                      <thead className="border-border bg-muted sticky top-0 border-b">
                         <tr>
                           <th className="w-8 px-3 py-2 text-left">
                             <input
@@ -650,7 +652,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                                 filteredAndSorted.length > 0
                               }
                               onChange={handleSelectAll}
-                              className="rounded border-gray-300"
+                              className="border-input rounded"
                             />
                           </th>
                           <th className="w-6 px-1 py-2"></th>
@@ -666,19 +668,19 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                           <th className="px-3 py-2 text-left">
                             <SortHeader label="Uploaded" sortKey="date" />
                           </th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">
+                          <th className="text-foreground px-3 py-2 text-left text-xs font-medium">
                             Status
                           </th>
                         </tr>
                       </thead>
-                      <tbody className="divide-y divide-gray-200">
+                      <tbody className="divide-border divide-y">
                         {filteredAndSorted.map((item) => {
                           const isActive = activeItem?.id === item.id
                           const hasIssues = !item.altTag || !item.title || item.usedOn?.length === 0
                           return (
                             <tr
                               key={item.id}
-                              className={`cursor-pointer transition-colors ${isActive ? 'bg-blue-50' : 'hover:bg-gray-50'}`}
+                              className={`cursor-pointer transition-colors ${isActive ? 'bg-primary/10' : 'hover:bg-muted'}`}
                               onClick={() => openDetail(item)}
                               draggable
                               onDragStart={(e) => handleDragStart(e, item.id)}
@@ -693,34 +695,38 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                                       item.id,
                                     )
                                   }
-                                  className="rounded border-gray-300"
+                                  className="border-input rounded"
                                 />
                               </td>
                               <td className="cursor-grab px-1 py-2">
-                                <GripVertical className="h-4 w-4 text-gray-300" />
+                                <GripVertical className="text-muted-foreground h-4 w-4" />
                               </td>
                               <td className="px-3 py-2">
                                 <div className="flex items-center gap-3">
-                                  <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded bg-gray-100">
+                                  <div className="bg-muted flex h-10 w-10 items-center justify-center overflow-hidden rounded">
                                     <MediaPreview item={item} />
                                   </div>
-                                  <span className="text-sm font-medium text-gray-900">
+                                  <span className="text-foreground text-sm font-medium">
                                     {item.name}
                                   </span>
                                 </div>
                               </td>
-                              <td className="px-3 py-2 text-sm text-gray-600">
+                              <td className="text-muted-foreground px-3 py-2 text-sm">
                                 {item.format ?? item.type}
                               </td>
-                              <td className="px-3 py-2 text-sm text-gray-600">{item.size}</td>
-                              <td className="px-3 py-2 text-sm text-gray-600">{item.date}</td>
+                              <td className="text-muted-foreground px-3 py-2 text-sm">
+                                {item.size}
+                              </td>
+                              <td className="text-muted-foreground px-3 py-2 text-sm">
+                                {item.date}
+                              </td>
                               <td className="px-3 py-2">
                                 {hasIssues ? (
-                                  <span className="inline-flex items-center gap-1 rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800">
+                                  <span className="bg-warning/15 text-warning inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium">
                                     <AlertTriangle className="h-3 w-3" /> Needs attention
                                   </span>
                                 ) : (
-                                  <span className="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
+                                  <span className="bg-success/15 text-success inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium">
                                     Complete
                                   </span>
                                 )}
@@ -735,42 +741,42 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
               </div>
 
               {panelOpen && activeItem && (
-                <div className="flex w-80 shrink-0 flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white lg:w-96">
-                  <div className="sticky top-0 z-10 flex items-center justify-between border-b border-gray-200 bg-white p-4">
-                    <h3 className="truncate text-sm font-semibold text-gray-900">
+                <div className="border-border bg-card flex w-80 shrink-0 flex-col overflow-y-auto rounded-lg border lg:w-96">
+                  <div className="border-border bg-card sticky top-0 z-10 flex items-center justify-between border-b p-4">
+                    <h3 className="text-foreground truncate text-sm font-medium">
                       {activeItem.name}
                     </h3>
                     <button
                       onClick={closeDetail}
-                      className="rounded p-1 transition-colors hover:bg-gray-100"
+                      className="hover:bg-muted rounded p-1 transition-colors"
                       aria-label="Close panel"
                     >
-                      <X className="h-4 w-4 text-gray-500" />
+                      <X className="text-muted-foreground h-4 w-4" />
                     </button>
                   </div>
 
                   <div className="flex-1 overflow-y-auto">
-                    <div className="border-b border-gray-200 p-4">
-                      <div className="flex aspect-video items-center justify-center overflow-hidden rounded-lg bg-gray-100">
+                    <div className="border-border border-b p-4">
+                      <div className="bg-muted flex aspect-video items-center justify-center overflow-hidden rounded-lg">
                         {isImageMedia(activeItem) ? (
                           <MediaPreview item={activeItem} />
                         ) : (
-                          <ImageIcon className="h-12 w-12 text-gray-300" />
+                          <ImageIcon className="text-muted-foreground h-12 w-12" />
                         )}
                       </div>
                     </div>
 
                     {issues.length > 0 && (
-                      <div className="mx-4 mt-4 rounded-lg border border-yellow-200 bg-yellow-50 p-3">
+                      <div className="border-warning/30 bg-warning/10 mx-4 mt-4 rounded-lg border p-3">
                         <div className="flex items-start gap-2">
-                          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-yellow-600" />
+                          <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" />
                           <div>
-                            <p className="mb-1 text-xs font-semibold text-yellow-900">
+                            <p className="text-warning mb-1 text-xs font-medium">
                               {issues.length} issue{issues.length !== 1 ? 's' : ''} found
                             </p>
                             <ul className="space-y-0.5">
                               {issues.map((issue, i) => (
-                                <li key={i} className="text-xs text-yellow-800">
+                                <li key={i} className="text-warning text-xs">
                                   • {issue}
                                 </li>
                               ))}
@@ -784,7 +790,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                             if (!activeItem.title) await handleAiGenerate('title')
                             if (activeItem.sizeBytes > 2000000) await handleAiGenerate('optimize')
                           }}
-                          className="mt-2 flex w-full items-center justify-center gap-1.5 rounded-lg bg-yellow-600 px-3 py-1.5 text-xs text-white transition-colors hover:bg-yellow-700"
+                          className="bg-warning text-warning-foreground hover:bg-warning/90 mt-2 flex w-full items-center justify-center gap-1.5 rounded-lg px-3 py-1.5 text-xs transition-colors"
                         >
                           <Sparkles className="h-3.5 w-3.5" />
                           AI Fix All Issues
@@ -792,68 +798,68 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                       </div>
                     )}
 
-                    <div className="space-y-3 border-b border-gray-200 p-4">
-                      <h4 className="text-xs font-semibold tracking-wide text-gray-500 uppercase">
+                    <div className="border-border space-y-3 border-b p-4">
+                      <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                         File Information
                       </h4>
                       <div className="grid grid-cols-2 gap-3">
                         <div>
-                          <div className="mb-0.5 text-xs text-gray-500">Format</div>
-                          <div className="text-sm text-gray-900">
+                          <div className="text-muted-foreground mb-0.5 text-xs">Format</div>
+                          <div className="text-foreground text-sm">
                             {activeItem.format ?? 'Unknown'}
                           </div>
                         </div>
                         <div>
-                          <div className="mb-0.5 text-xs text-gray-500">File Size</div>
-                          <div className="flex items-center gap-1 text-sm text-gray-900">
+                          <div className="text-muted-foreground mb-0.5 text-xs">File Size</div>
+                          <div className="text-foreground flex items-center gap-1 text-sm">
                             {activeItem.size}
                             {activeItem.sizeBytes > 2000000 && (
-                              <span className="text-xs text-yellow-600">(large)</span>
+                              <span className="text-warning text-xs">(large)</span>
                             )}
                           </div>
                         </div>
                         <div>
-                          <div className="mb-0.5 text-xs text-gray-500">Dimensions</div>
-                          <div className="text-sm text-gray-900">
+                          <div className="text-muted-foreground mb-0.5 text-xs">Dimensions</div>
+                          <div className="text-foreground text-sm">
                             {activeItem.dimensions ?? '—'}
                           </div>
                         </div>
                         <div>
-                          <div className="mb-0.5 text-xs text-gray-500">Uploaded</div>
-                          <div className="text-sm text-gray-900">{activeItem.date}</div>
+                          <div className="text-muted-foreground mb-0.5 text-xs">Uploaded</div>
+                          <div className="text-foreground text-sm">{activeItem.date}</div>
                         </div>
                       </div>
 
                       <div>
-                        <div className="mb-1 text-xs text-gray-500">URL</div>
+                        <div className="text-muted-foreground mb-1 text-xs">URL</div>
                         <div className="flex items-center gap-1">
-                          <code className="flex-1 truncate rounded border border-gray-200 bg-gray-50 px-2 py-1.5 text-xs text-gray-700">
+                          <code className="border-border bg-muted text-foreground flex-1 truncate rounded border px-2 py-1.5 text-xs">
                             {activeItem.url}
                           </code>
                           <button
                             onClick={handleCopyUrl}
-                            className="shrink-0 rounded p-1.5 transition-colors hover:bg-gray-100"
+                            className="hover:bg-muted shrink-0 rounded p-1.5 transition-colors"
                             title="Copy URL"
                           >
-                            <Copy className="h-3.5 w-3.5 text-gray-500" />
+                            <Copy className="text-muted-foreground h-3.5 w-3.5" />
                           </button>
                         </div>
                       </div>
                     </div>
 
-                    <div className="space-y-4 border-b border-gray-200 p-4">
-                      <h4 className="text-xs font-semibold tracking-wide text-gray-500 uppercase">
+                    <div className="border-border space-y-4 border-b p-4">
+                      <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                         SEO & Accessibility
                       </h4>
 
                       <div>
                         <div className="mb-1 flex items-center justify-between">
-                          <label className="text-sm font-medium text-gray-700">Alt Tag</label>
+                          <label className="text-foreground text-sm font-medium">Alt Tag</label>
                           <button
                             type="button"
                             onClick={() => handleAiGenerate('alt')}
                             disabled={aiGenerating === 'alt'}
-                            className="flex items-center gap-1 text-xs text-indigo-600 transition-colors hover:text-indigo-700 disabled:opacity-50"
+                            className="text-primary hover:text-primary/80 flex items-center gap-1 text-xs transition-colors disabled:opacity-50"
                           >
                             <Bot className="h-3.5 w-3.5" />
                             {aiGenerating === 'alt' ? 'Generating...' : 'AI Generate'}
@@ -864,10 +870,10 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                           onChange={(e) => setEditAlt(e.target.value)}
                           placeholder="Describe this image for accessibility..."
                           rows={2}
-                          className="w-full resize-none 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 resize-none rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                         />
                         {!editAlt && (
-                          <p className="mt-1 text-xs text-red-500">
+                          <p className="text-destructive mt-1 text-xs">
                             Required for accessibility and SEO
                           </p>
                         )}
@@ -875,12 +881,12 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
 
                       <div>
                         <div className="mb-1 flex items-center justify-between">
-                          <label className="text-sm font-medium text-gray-700">Title</label>
+                          <label className="text-foreground text-sm font-medium">Title</label>
                           <button
                             type="button"
                             onClick={() => handleAiGenerate('title')}
                             disabled={aiGenerating === 'title'}
-                            className="flex items-center gap-1 text-xs text-indigo-600 transition-colors hover:text-indigo-700 disabled:opacity-50"
+                            className="text-primary hover:text-primary/80 flex items-center gap-1 text-xs transition-colors disabled:opacity-50"
                           >
                             <Bot className="h-3.5 w-3.5" />
                             {aiGenerating === 'title' ? 'Generating...' : 'AI Generate'}
@@ -891,25 +897,25 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                           value={editTitle}
                           onChange={(e) => setEditTitle(e.target.value)}
                           placeholder="Image title..."
-                          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">
+                        <label className="text-foreground mb-1 block text-sm font-medium">
                           File Name
                         </label>
                         <input
                           type="text"
                           value={editFilename}
                           onChange={(e) => setEditFilename(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"
                         />
                       </div>
                     </div>
 
-                    <div className="border-b border-gray-200 p-4">
-                      <h4 className="mb-3 text-xs font-semibold tracking-wide text-gray-500 uppercase">
+                    <div className="border-border border-b p-4">
+                      <h4 className="text-muted-foreground mb-3 text-xs font-medium tracking-wide uppercase">
                         Used On {activeItem.usedOn && `(${activeItem.usedOn.length})`}
                       </h4>
                       {activeItem.usedOn && activeItem.usedOn.length > 0 ? (
@@ -919,23 +925,23 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                               key={i}
                               type="button"
                               onClick={() => onNavigate?.(usage.path)}
-                              className="flex w-full items-center gap-2 rounded-lg border border-gray-200 p-2 text-left transition-colors hover:bg-gray-50"
+                              className="border-border hover:bg-muted flex w-full items-center gap-2 rounded-lg border p-2 text-left transition-colors"
                             >
-                              <Link2 className="h-4 w-4 shrink-0 text-gray-400" />
-                              <span className="flex-1 truncate text-sm text-gray-900">
+                              <Link2 className="text-muted-foreground h-4 w-4 shrink-0" />
+                              <span className="text-foreground flex-1 truncate text-sm">
                                 {usage.page}
                               </span>
-                              <ExternalLink className="h-3.5 w-3.5 shrink-0 text-gray-400" />
+                              <ExternalLink className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
                             </button>
                           ))}
                         </div>
                       ) : (
-                        <div className="rounded-lg border border-orange-200 bg-orange-50 p-3">
+                        <div className="border-warning/30 bg-warning/10 rounded-lg border p-3">
                           <div className="flex items-start gap-2">
-                            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-orange-600" />
+                            <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" />
                             <div>
-                              <p className="text-xs font-medium text-orange-900">Orphaned media</p>
-                              <p className="mt-0.5 text-xs text-orange-700">
+                              <p className="text-warning text-xs font-medium">Orphaned media</p>
+                              <p className="text-warning mt-0.5 text-xs">
                                 This file isn&apos;t used on any page. Consider deleting it to save
                                 storage.
                               </p>
@@ -946,37 +952,37 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                     </div>
 
                     <div className="space-y-3 p-4">
-                      <h4 className="text-xs font-semibold tracking-wide text-gray-500 uppercase">
+                      <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                         AI Optimization
                       </h4>
                       <button
                         type="button"
                         onClick={() => handleAiGenerate('optimize')}
                         disabled={aiGenerating === 'optimize'}
-                        className="flex w-full items-center gap-2 rounded-lg border border-indigo-200 bg-indigo-50 p-3 text-left transition-colors hover:bg-indigo-100 disabled:opacity-50"
+                        className="border-primary/30 bg-primary/10 hover:bg-primary/15 flex w-full items-center gap-2 rounded-lg border p-3 text-left transition-colors disabled:opacity-50"
                       >
                         <Sparkles
-                          className={`h-5 w-5 shrink-0 text-indigo-600 ${aiGenerating === 'optimize' ? 'animate-spin' : ''}`}
+                          className={`text-primary h-5 w-5 shrink-0 ${aiGenerating === 'optimize' ? 'animate-spin' : ''}`}
                         />
                         <div className="flex-1">
-                          <div className="text-sm font-medium text-indigo-900">
+                          <div className="text-primary text-sm font-medium">
                             {aiGenerating === 'optimize' ? 'Optimizing...' : 'Optimize Image'}
                           </div>
-                          <div className="mt-0.5 text-xs text-indigo-700">
+                          <div className="text-primary mt-0.5 text-xs">
                             Compress and convert to modern format (WebP/AVIF)
                           </div>
                         </div>
                       </button>
                       <button
                         type="button"
-                        className="flex w-full items-center gap-2 rounded-lg border border-gray-200 p-3 text-left transition-colors hover:bg-gray-50"
+                        className="border-border hover:bg-muted flex w-full items-center gap-2 rounded-lg border p-3 text-left transition-colors"
                       >
-                        <Bot className="h-5 w-5 shrink-0 text-gray-500" />
+                        <Bot className="text-muted-foreground h-5 w-5 shrink-0" />
                         <div className="flex-1">
-                          <div className="text-sm font-medium text-gray-900">
+                          <div className="text-foreground text-sm font-medium">
                             AI Content Analysis
                           </div>
-                          <div className="mt-0.5 text-xs text-gray-600">
+                          <div className="text-muted-foreground mt-0.5 text-xs">
                             Detect objects, faces, text, and suggest categories
                           </div>
                         </div>
@@ -984,30 +990,30 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                     </div>
                   </div>
 
-                  <div className="sticky bottom-0 flex items-center gap-2 border-t border-gray-200 bg-white p-4">
+                  <div className="border-border bg-card sticky bottom-0 flex items-center gap-2 border-t p-4">
                     <button
                       type="button"
                       onClick={handleSaveDetails}
                       disabled={saving}
-                      className="flex flex-1 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 disabled:opacity-50"
+                      className="bg-primary text-primary-foreground hover:bg-primary/90 flex flex-1 items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm transition-colors disabled:opacity-50"
                     >
                       {saving && <Loader2 className="h-4 w-4 animate-spin" />}
                       {saving ? 'Saving...' : 'Save Changes'}
                     </button>
                     <button
                       type="button"
-                      className="rounded-lg p-2 transition-colors hover:bg-gray-100"
+                      className="hover:bg-muted rounded-lg p-2 transition-colors"
                       title="Download"
                     >
-                      <Download className="h-4 w-4 text-gray-600" />
+                      <Download className="text-muted-foreground h-4 w-4" />
                     </button>
                     <button
                       type="button"
                       onClick={() => deleteMedia(activeItem.id)}
-                      className="rounded-lg p-2 transition-colors hover:bg-gray-100"
+                      className="hover:bg-muted rounded-lg p-2 transition-colors"
                       title="Delete"
                     >
-                      <Trash2 className="h-4 w-4 text-red-600" />
+                      <Trash2 className="text-destructive h-4 w-4" />
                     </button>
                   </div>
                 </div>