From 5c106b7e28dc9fec446a5a42cada8000dfbf4949 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Thu, 14 May 2026 12:22:29 +0200
Subject: [PATCH] fixed theme issues in asset library

---
 .../src/components/react/AssetsButton.tsx     | 14 +++---
 .../components/react/admin/AssetManager.tsx   | 49 +++++++++++++------
 2 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/react/AssetsButton.tsx b/frontend/src/components/react/AssetsButton.tsx
index 0dec824..2b507ec 100644
--- a/frontend/src/components/react/AssetsButton.tsx
+++ b/frontend/src/components/react/AssetsButton.tsx
@@ -58,12 +58,13 @@ export default function AssetsButton({
           aria-label="Asset library"
           onClick={() => setOpen(false)}
         >
-          <div className="absolute inset-0 bg-crust/80 backdrop-blur-md" aria-hidden="true" />
+          <div className="absolute inset-0 bg-[var(--crust)]/80 backdrop-blur-md" aria-hidden="true" />
           <div
-            className="relative w-full max-w-5xl max-h-[90vh] bg-mantle border border-surface1 rounded-2xl shadow-2xl overflow-hidden flex flex-col animate-in fade-in slide-in-from-bottom-4 duration-200"
+            className="relative w-full max-w-5xl max-h-[90vh] bg-[var(--base)] border border-[var(--surface2)] shadow-2xl overflow-hidden flex flex-col animate-in fade-in slide-in-from-bottom-4 duration-200"
+            style={{ borderRadius: 2 }}
             onClick={e => e.stopPropagation()}
           >
-            <div className="flex items-center justify-between px-5 py-4 border-b border-surface1">
+            <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--surface2)]/60">
               <div className="flex items-center gap-3">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -75,20 +76,21 @@ export default function AssetsButton({
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className="text-mauve"
+                  className="text-[var(--mauve)]"
                   aria-hidden="true"
                 >
                   <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
                   <circle cx="9" cy="9" r="2" />
                   <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
                 </svg>
-                <h2 className="text-lg font-semibold text-lavender">Asset Library</h2>
+                <h2 className="font-display italic text-xl text-[var(--text)]">Asset Library</h2>
               </div>
               <button
                 type="button"
                 onClick={() => setOpen(false)}
                 aria-label="Close"
-                className="p-1.5 rounded-md text-subtext0 hover:text-text hover:bg-surface0 transition-colors"
+                className="p-1.5 text-[var(--subtext0)] hover:text-[var(--text)] hover:bg-[var(--surface0)] transition-colors"
+                style={{ borderRadius: 2 }}
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/components/react/admin/AssetManager.tsx b/frontend/src/components/react/admin/AssetManager.tsx
index 0816526..0ffec2f 100644
--- a/frontend/src/components/react/admin/AssetManager.tsx
+++ b/frontend/src/components/react/admin/AssetManager.tsx
@@ -57,58 +57,75 @@ export default function AssetManager({ mode = 'manage', onSelect }: Props) {
   return (
     <div className="space-y-8">
       {alert && (
-        <div className={`p-4 rounded-lg mb-6 text-sm ${
-          alert.type === 'success' ? 'bg-green/20 text-green border border-green/30' : 'bg-red/20 text-red border border-red/30'
-        }`}>
+        <div
+          className={`p-4 mb-6 text-sm font-display italic border ${
+            alert.type === 'success'
+              ? 'bg-[color-mix(in_srgb,var(--green)_18%,transparent)] text-[var(--green)] border-[var(--green)]/40'
+              : 'bg-[color-mix(in_srgb,var(--red)_18%,transparent)] text-[var(--red)] border-[var(--red)]/40'
+          }`}
+          style={{ borderRadius: 2 }}
+        >
           {alert.msg}
         </div>
       )}
 
       {/* Upload Zone */}
       <div
-        className="glass p-6 border-dashed border-2 border-surface1 hover:border-mauve transition-colors group relative cursor-pointer"
+        className="glass p-6 border-dashed border-2 border-[var(--surface2)] hover:border-[var(--mauve)] transition-colors group relative cursor-pointer"
         onClick={() => fileRef.current?.click()}
         onDragOver={e => { e.preventDefault(); e.stopPropagation(); }}
         onDrop={e => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.files.length) handleUpload(e.dataTransfer.files); }}
       >
         <input ref={fileRef} type="file" multiple className="hidden" onChange={e => { if (e.target.files?.length) handleUpload(e.target.files); }} />
         <div className="text-center py-4">
-          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" className="mx-auto mb-4 text-subtext0 group-hover:text-mauve transition-colors"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
-          <p className="text-lg font-bold text-lavender">Click or drag to upload assets</p>
-          <p className="text-xs text-subtext0 mt-1">Any file type up to 50MB</p>
+          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" className="mx-auto mb-4 text-[var(--subtext0)] group-hover:text-[var(--mauve)] transition-colors"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
+          <p className="font-display italic text-xl text-[var(--text)] group-hover:text-[var(--mauve)] transition-colors">Click or drag to upload assets</p>
+          <p className="font-sans text-xs uppercase tracking-[0.2em] text-[var(--subtext0)] mt-2">Any file type · up to 50 MB</p>
         </div>
       </div>
 
       {/* Grid */}
       {assets.length === 0 ? (
-        <div className="text-center py-20 text-subtext0">No assets uploaded yet.</div>
+        <div className="text-center py-20 font-display italic text-[var(--subtext0)]">No assets uploaded yet.</div>
       ) : (
         <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
           {assets.map(asset => (
-            <div key={asset.name} className="group relative aspect-square bg-crust rounded-xl overflow-hidden border border-white/5 hover:border-mauve/40 transition-colors shadow-lg flex flex-col">
-              <div className="flex-1 overflow-hidden bg-surface0/20 relative cursor-pointer">
+            <div
+              key={asset.name}
+              className="group relative aspect-square overflow-hidden bg-[var(--surface0)] border border-[var(--surface2)]/60 hover:border-[var(--mauve)]/60 transition-colors shadow-md flex flex-col"
+              style={{ borderRadius: 2 }}
+            >
+              <div className="flex-1 overflow-hidden bg-[var(--mantle)] relative cursor-pointer">
                 {isImage(asset.name) ? (
-                  <img src={asset.url} className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity" alt={asset.name} />
+                  <img src={asset.url} className="w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity" alt={asset.name} />
                 ) : (
-                  <div className="flex flex-col items-center justify-center h-full text-subtext0">
+                  <div className="flex flex-col items-center justify-center h-full text-[var(--subtext0)]">
                     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mb-2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
                     <span className="text-[8px] font-mono px-2 truncate w-full text-center">{asset.name.split('.').pop()?.toUpperCase()}</span>
                   </div>
                 )}
                 {/* Hover overlay */}
-                <div className="absolute inset-0 bg-crust/70 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
+                <div className="absolute inset-0 bg-[var(--crust)]/75 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
                   {mode === 'select' && onSelect && (
-                    <button onClick={() => onSelect(asset)} className="bg-mauve hover:bg-pink text-crust px-4 py-2 rounded-lg text-sm font-bold transition-colors shadow-lg inline-flex items-center gap-1.5">
+                    <button
+                      onClick={() => onSelect(asset)}
+                      className="bg-[var(--mauve)] hover:bg-[var(--red)] text-[var(--rosewater)] px-4 py-2 text-sm font-display italic font-medium transition-colors shadow-lg inline-flex items-center gap-1.5"
+                      style={{ borderRadius: 1 }}
+                    >
                       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                       Insert
                     </button>
                   )}
-                  <button onClick={() => handleDelete(asset.name)} className="bg-red/80 hover:bg-red text-white p-2.5 rounded-lg transition-colors shadow-lg">
+                  <button
+                    onClick={() => handleDelete(asset.name)}
+                    className="bg-[var(--red)]/80 hover:bg-[var(--red)] text-[var(--rosewater)] p-2.5 transition-colors shadow-lg"
+                    style={{ borderRadius: 1 }}
+                  >
                     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
                   </button>
                 </div>
               </div>
-              <div className="p-2 bg-crust text-[10px] truncate border-t border-white/5 text-subtext1">{asset.name}</div>
+              <div className="p-2 bg-[var(--surface0)] text-[10px] truncate border-t border-[var(--surface2)]/50 text-[var(--subtext1)] font-mono">{asset.name}</div>
             </div>
           ))}
         </div>