nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed dark input fields and port collision

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-14 08:41:46 +02:00
parent fb92b3ff66
commit 0050de7ea6
3 changed files with 51 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker-compose.yml
+1 -1
View File
@@ -39,7 +39,7 @@ services:
context: ./frontend context: ./frontend
dockerfile: Dockerfile dockerfile: Dockerfile
ports: ports:
- "4321:4321" - "4322:4321"
environment: environment:
- PUBLIC_API_URL=http://backend:3000 - PUBLIC_API_URL=http://backend:3000
depends_on: depends_on:
frontend/src/components/react/admin/Editor.tsx
+15 -15
View File
@@ -317,74 +317,74 @@ export default function Editor({ editSlug }: Props) {
{/* Title + Date */} {/* Title + Date */}
<div className="grid grid-cols-1 md:grid-cols-[1fr_180px] gap-4"> <div className="grid grid-cols-1 md:grid-cols-[1fr_180px] gap-4">
<div> <div>
<label className="block text-sm font-medium text-subtext1 mb-2">Title</label> <label className="field-label">Title</label>
<input <input
type="text" type="text"
value={title} value={title}
onChange={e => setTitle(e.target.value)} onChange={e => setTitle(e.target.value)}
required required
placeholder="Untitled (charcoal on paper)" placeholder="Untitled (charcoal on paper)"
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors" className="field-input"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-subtext1 mb-2">Date</label> <label className="field-label">Date</label>
<input <input
type="date" type="date"
value={date} value={date}
onChange={e => setDate(e.target.value)} onChange={e => setDate(e.target.value)}
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors font-mono" className="field-input font-mono"
/> />
</div> </div>
</div> </div>
{/* Slug */} {/* Slug */}
<div> <div>
<label className="block text-sm font-medium text-subtext1 mb-2"> <label className="field-label">
Slug <span className="text-overlay0 font-normal">(URL identifier — auto-derived from title)</span> Slug <span className="normal-case tracking-normal text-[var(--overlay0)] italic font-display">— auto-derived from title</span>
</label> </label>
<input <input
type="text" type="text"
value={slug} value={slug}
onChange={e => { setSlug(e.target.value); setSlugTouched(true); }} onChange={e => { setSlug(e.target.value); setSlugTouched(true); }}
required required
placeholder="my-awesome-post" placeholder="untitled-charcoal-on-paper"
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors font-mono" className="field-input font-mono"
/> />
</div> </div>
{/* Tags + Draft */} {/* Tags + Draft */}
<div className="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4 md:items-end"> <div className="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4 md:items-end">
<div> <div>
<label className="block text-sm font-medium text-subtext1 mb-2">Tags (comma-separated)</label> <label className="field-label">Tags (comma-separated)</label>
<input <input
type="text" type="text"
value={tagsInput} value={tagsInput}
onChange={e => setTagsInput(e.target.value)} onChange={e => setTagsInput(e.target.value)}
placeholder="oil, paper, 2026, study" placeholder="oil, paper, 2026, study"
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors" className="field-input"
/> />
</div> </div>
<label className="flex items-center gap-2 px-4 py-3 bg-crust border border-surface1 rounded-lg cursor-pointer hover:border-peach/40 transition-colors select-none"> <label className="flex items-center gap-2 px-4 py-3 bg-[var(--surface0)]/60 border border-[var(--surface2)] cursor-pointer hover:border-[var(--peach)] transition-colors select-none" style={{ borderRadius: 1 }}>
<input <input
type="checkbox" type="checkbox"
checked={draft} checked={draft}
onChange={e => setDraft(e.target.checked)} onChange={e => setDraft(e.target.checked)}
className="accent-peach" className="accent-[var(--peach)]"
/> />
<span className="text-sm font-medium text-subtext1">Draft</span> <span className="text-sm font-display italic text-[var(--subtext1)]">Sketch (draft)</span>
</label> </label>
</div> </div>
{/* Summary */} {/* Summary */}
<div> <div>
<label className="block text-sm font-medium text-subtext1 mb-2">Custom Summary (Optional)</label> <label className="field-label">Caption (optional)</label>
<textarea <textarea
value={summary} value={summary}
onChange={e => setSummary(e.target.value)} onChange={e => setSummary(e.target.value)}
rows={2} rows={2}
placeholder="A short caption for the catalogue index..." placeholder="A short caption for the catalogue index..."
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors resize-none" className="field-input resize-none"
/> />
</div> </div>
frontend/src/components/react/admin/Settings.tsx
+34 -34
View File
@@ -25,74 +25,74 @@ export default function Settings() {
e.preventDefault(); e.preventDefault();
try { try {
await updateConfig(config); await updateConfig(config);
showAlert('Settings saved successfully! Refresh to see changes.', 'success'); showAlert('Settings saved. Refresh to see changes.', 'success');
} catch (e) { } catch (e) {
showAlert(e instanceof ApiError ? `Error: ${e.message}` : 'Failed to save settings.', 'error'); showAlert(e instanceof ApiError ? `Error: ${e.message}` : 'Failed to save settings.', 'error');
} }
} }
return ( return (
<form onSubmit={handleSubmit} className="space-y-8"> <form onSubmit={handleSubmit} className="space-y-10">
{alert && ( {alert && (
<div className={`p-4 rounded-lg mb-6 text-sm font-semibold text-center backdrop-blur-sm ${ <div
className={`p-4 text-sm font-display italic text-center border ${
alert.type === 'success' alert.type === 'success'
? 'bg-green/15 text-green border border-green/30' ? 'bg-[var(--green)]/15 text-[var(--green)] border-[var(--green)]/30'
: 'bg-red/15 text-red border border-red/30' : 'bg-[var(--red)]/15 text-[var(--red)] border-[var(--red)]/30'
}`}> }`}
style={{ borderRadius: 1 }}
>
{alert.msg} {alert.msg}
</div> </div>
)} )}
<section className="space-y-6"> <section className="space-y-6">
<h2 className="text-xl font-bold text-lavender border-l-4 border-lavender pl-4">General Identity</h2> <h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--mauve)] pl-4">Identity</h2>
<div className="grid md:grid-cols-2 gap-6"> <div className="grid md:grid-cols-2 gap-6">
<Field label="Blog Title (Nav)" value={config.title || ''} onChange={v => update('title', v)} /> <Field label="Gallery name (nav)" value={config.title || ''} onChange={v => update('title', v)} />
<Field label="Nav Subtitle" value={config.subtitle || ''} onChange={v => update('subtitle', v)} /> <Field label="Nav subtitle" value={config.subtitle || ''} onChange={v => update('subtitle', v)} />
<Field label="Welcome Title (Frontpage)" value={config.welcome_title || ''} onChange={v => update('welcome_title', v)} /> <Field label="Welcome title (index)" value={config.welcome_title || ''} onChange={v => update('welcome_title', v)} />
<Field label="Welcome Subtitle" value={config.welcome_subtitle || ''} onChange={v => update('welcome_subtitle', v)} /> <Field label="Welcome subtitle" value={config.welcome_subtitle || ''} onChange={v => update('welcome_subtitle', v)} />
</div>
<div>
<Field label="Favicon URL" value={config.favicon || ''} onChange={v => update('favicon', v)} hint="URL to the icon shown in browser tabs." />
</div> </div>
<Field label="Favicon URL" value={config.favicon || ''} onChange={v => update('favicon', v)} hint="Icon shown in browser tabs." />
</section> </section>
<section className="space-y-6"> <section className="space-y-6">
<h2 className="text-xl font-bold text-blue border-l-4 border-blue pl-4">Appearance</h2> <h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--blue)] pl-4">Appearance</h2>
<div> <div>
<label className="block text-sm font-medium text-subtext1 mb-2">Color Theme (Catppuccin)</label> <label className="field-label">Theme</label>
<select <select
value={config.theme || 'mocha'} value={config.theme || 'salon'}
onChange={e => update('theme', e.target.value)} onChange={e => update('theme', e.target.value)}
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors" className="field-input font-display italic"
> >
<option value="mocha">Mocha (Dark, High Contrast)</option> <option value="salon">Salon (parchment, default)</option>
<option value="macchiato">Macchiato (Dark, Medium Contrast)</option> <option value="salon-noir">Salon Noir (black gallery wall)</option>
<option value="frappe">Frappe (Dark, Low Contrast)</option> <option value="latte">Latte (light)</option>
<option value="latte">Latte (Light Mode)</option> <option value="mocha">Mocha (dark)</option>
<option value="scaled-and-icy">Scaled and Icy (Vibrant Light)</option>
</select> </select>
<p className="text-[10px] text-subtext0 mt-1">Select a predefined Catppuccin color palette.</p> <p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">Salon and Salon Noir are tuned for the gallery aesthetic.</p>
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-subtext1 mb-2">Custom CSS</label> <label className="field-label">Custom CSS</label>
<textarea <textarea
value={config.custom_css || ''} value={config.custom_css || ''}
onChange={e => update('custom_css', e.target.value)} onChange={e => update('custom_css', e.target.value)}
rows={4} rows={4}
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors font-mono text-xs" className="field-input font-mono text-xs"
placeholder="body { ... }" placeholder="body { ... }"
/> />
<p className="text-[10px] text-subtext0 mt-1">Inject custom CSS styles globally.</p> <p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">Injected globally — use sparingly.</p>
</div> </div>
</section> </section>
<section className="space-y-6"> <section className="space-y-6">
<h2 className="text-xl font-bold text-teal border-l-4 border-teal pl-4">Footer</h2> <h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--teal)] pl-4">Footer</h2>
<Field label="Footer Text" value={config.footer || ''} onChange={v => update('footer', v)} /> <Field label="Footer text" value={config.footer || ''} onChange={v => update('footer', v)} />
</section> </section>
<button type="submit" className="w-full md:w-auto bg-mauve text-crust font-bold py-4 px-12 rounded-lg hover:bg-pink transition-all transform hover:scale-[1.02] active:scale-[0.98]"> <button type="submit" className="btn-stamp">
Save Site Configuration Save site settings
</button> </button>
</form> </form>
); );
@@ -101,15 +101,15 @@ export default function Settings() {
function Field({ label, value, onChange, hint }: { label: string; value: string; onChange: (v: string) => void; hint?: string }) { function Field({ label, value, onChange, hint }: { label: string; value: string; onChange: (v: string) => void; hint?: string }) {
return ( return (
<div> <div>
<label className="block text-sm font-medium text-subtext1 mb-2">{label}</label> <label className="field-label">{label}</label>
<input <input
type="text" type="text"
value={value} value={value}
onChange={e => onChange(e.target.value)} onChange={e => onChange(e.target.value)}
required required
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors" className="field-input"
/> />
{hint && <p className="text-[10px] text-subtext0 mt-1">{hint}</p>} {hint && <p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">{hint}</p>}
</div> </div>
); );
} }