From c9041ba5134ad3bacc720da817a612905e072ec4 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Thu, 11 Jun 2026 03:22:58 -0400
Subject: [PATCH] style(MediaViewerEditor): update background styles for
 improved aesthetics style(HexEditor): remove background color for a cleaner
 look style(ConfigEditor): remove background color for consistency

---
 src/app/components/ConfigEditor.tsx      |  2 +-
 src/app/components/HexEditor.tsx         |  2 +-
 src/app/components/MediaViewerEditor.tsx | 14 ++++++++++----
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/components/ConfigEditor.tsx b/src/app/components/ConfigEditor.tsx
index b5d169a..b097aa9 100644
--- a/src/app/components/ConfigEditor.tsx
+++ b/src/app/components/ConfigEditor.tsx
@@ -44,7 +44,7 @@ export default function ConfigEditor({ text, onSave }: ConfigEditorProps) {
   };
 
   return (
-    <div className="flex flex-col h-full bg-neutral-950">
+    <div className="flex flex-col h-full">
       <div className="flex items-center gap-2 px-3 py-1.5 bg-neutral-900 border-b border-neutral-700 flex-shrink-0 text-xs">
         <button
           onClick={addRow}
diff --git a/src/app/components/HexEditor.tsx b/src/app/components/HexEditor.tsx
index c963355..7860abf 100644
--- a/src/app/components/HexEditor.tsx
+++ b/src/app/components/HexEditor.tsx
@@ -205,7 +205,7 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
   if (curStart >= 0) { for (let i = 0; i < needleLen; i++) curMatchSet.add(curStart + i); }
 
   return (
-    <div className="flex flex-col h-full bg-neutral-950">
+    <div className="flex flex-col h-full">
 
       {/* ── Toolbar ── */}
       <div className="flex items-center gap-2 px-3 py-1.5 bg-neutral-900 border-b border-neutral-700 flex-shrink-0 text-xs">
diff --git a/src/app/components/MediaViewerEditor.tsx b/src/app/components/MediaViewerEditor.tsx
index 5fb293f..64cef49 100644
--- a/src/app/components/MediaViewerEditor.tsx
+++ b/src/app/components/MediaViewerEditor.tsx
@@ -108,7 +108,8 @@ function MarkdownViewer({ text }: { text: string }) {
 }
 
 const CM_THEME = EditorView.theme({
-  '&': { height: '100%', background: '#0a0a0a' },
+  '&': { height: '100%', background: 'transparent' },
+  '.cm-gutters': { background: 'transparent', borderRight: '1px solid rgba(255,255,255,0.08)' },
   '.cm-scroller': { overflow: 'auto', fontFamily: 'ui-monospace,monospace', fontSize: '12px', lineHeight: '1.5' },
   '.cm-content': { padding: '12px 0' },
   '.cm-focused': { outline: 'none' },
@@ -213,7 +214,12 @@ export default function MediaViewerEditor({
         </button>
       </div>
 
-      <div className="flex-1 overflow-hidden bg-neutral-950">
+      <div className="flex-1 overflow-hidden bg-[#0a0a0a] relative z-0">
+        <div
+          className="absolute inset-0 pointer-events-none opacity-15"
+          style={{ zIndex: -1, backgroundImage: 'url(assets/icon.svg)', backgroundRepeat: 'repeat', backgroundSize: '64px 64px' }}
+          aria-hidden="true"
+        />
         {loading && (
           <div className="h-full flex items-center justify-center gap-2 text-neutral-400">
             <Loader2 className="w-5 h-5 animate-spin" /> Loading…
@@ -225,7 +231,7 @@ export default function MediaViewerEditor({
           </div>
         )}
         {!loading && mode === 'hex' && hexData && (
-          <HexEditor key={entry.path} data={hexData} onSave={d => void onSave(d)} />
+          <HexEditor key={entry.path} data={hexData} onSave={d => onSave(d)} />
         )}
         {!loading && mode === 'markdown' && text !== null && (
           <MarkdownEditor key={entry.path} text={text} onSave={s => onSave(s)} />
@@ -245,7 +251,7 @@ export default function MediaViewerEditor({
             onSave={s => onSave(s)}
           />
         )}
-      </div>
     </div>
+  </div>
   );
 }