idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(MediaViewerEditor): update background styles for improved aesthetics

Browse Source 
style(HexEditor): remove background color for a cleaner look
style(ConfigEditor): remove background color for consistency
This commit is contained in:
Jaime Idolpx 2026-06-11 03:22:58 -04:00
parent f1f4c6dc16
commit c9041ba513
3 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/ConfigEditor.tsx
View File

@ -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}

2
src/app/components/HexEditor.tsx
View File

@ -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">

12
src/app/components/MediaViewerEditor.tsx
View File

@ -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)} />