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
frontend/src/components/react/admin/Editor.tsx
+15 -15
View File
@@ -317,74 +317,74 @@ export default function Editor({ editSlug }: Props) {
{/* Title + Date */}
<div className="grid grid-cols-1 md:grid-cols-[1fr_180px] gap-4">
<div>
<label className="block text-sm font-medium text-subtext1 mb-2">Title</label>
<label className="field-label">Title</label>
<input
type="text"
value={title}
onChange={e => setTitle(e.target.value)}
required
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>
<label className="block text-sm font-medium text-subtext1 mb-2">Date</label>
<label className="field-label">Date</label>
<input
type="date"
value={date}
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>
{/* Slug */}
<div>
<label className="block text-sm font-medium text-subtext1 mb-2">
Slug <span className="text-overlay0 font-normal">(URL identifier — auto-derived from title)</span>
<label className="field-label">
Slug <span className="normal-case tracking-normal text-[var(--overlay0)] italic font-display">— auto-derived from title</span>
</label>
<input
type="text"
value={slug}
onChange={e => { setSlug(e.target.value); setSlugTouched(true); }}
required
placeholder="my-awesome-post"
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"
placeholder="untitled-charcoal-on-paper"
className="field-input font-mono"
/>
</div>
{/* Tags + Draft */}
<div className="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4 md:items-end">
<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
type="text"
value={tagsInput}
onChange={e => setTagsInput(e.target.value)}
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>
<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
type="checkbox"
checked={draft}
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>
</div>
{/* Summary */}
<div>
<label className="block text-sm font-medium text-subtext1 mb-2">Custom Summary (Optional)</label>
<label className="field-label">Caption (optional)</label>
<textarea
value={summary}
onChange={e => setSummary(e.target.value)}
rows={2}
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>
frontend/src/components/react/admin/Settings.tsx
+35 -35
View File
@@ -25,74 +25,74 @@ export default function Settings() {
e.preventDefault();
try {
await updateConfig(config);
showAlert('Settings saved successfully! Refresh to see changes.', 'success');
showAlert('Settings saved. Refresh to see changes.', 'success');
} catch (e) {
showAlert(e instanceof ApiError ? `Error: ${e.message}` : 'Failed to save settings.', 'error');
}
}
return (
<form onSubmit={handleSubmit} className="space-y-8">
<form onSubmit={handleSubmit} className="space-y-10">
{alert && (
<div className={`p-4 rounded-lg mb-6 text-sm font-semibold text-center backdrop-blur-sm ${
alert.type === 'success'
? 'bg-green/15 text-green border border-green/30'
: 'bg-red/15 text-red border border-red/30'
}`}>
<div
className={`p-4 text-sm font-display italic text-center border ${
alert.type === 'success'
? 'bg-[var(--green)]/15 text-[var(--green)] border-[var(--green)]/30'
: 'bg-[var(--red)]/15 text-[var(--red)] border-[var(--red)]/30'
}`}
style={{ borderRadius: 1 }}
>
{alert.msg}
</div>
)}
<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">
<Field label="Blog Title (Nav)" value={config.title || ''} onChange={v => update('title', 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 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." />
<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="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)} />
</div>
<Field label="Favicon URL" value={config.favicon || ''} onChange={v => update('favicon', v)} hint="Icon shown in browser tabs." />
</section>
<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>
<label className="block text-sm font-medium text-subtext1 mb-2">Color Theme (Catppuccin)</label>
<label className="field-label">Theme</label>
<select
value={config.theme || 'mocha'}
value={config.theme || 'salon'}
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="macchiato">Macchiato (Dark, Medium Contrast)</option>
<option value="frappe">Frappe (Dark, Low Contrast)</option>
<option value="latte">Latte (Light Mode)</option>
<option value="scaled-and-icy">Scaled and Icy (Vibrant Light)</option>
<option value="salon">Salon (parchment, default)</option>
<option value="salon-noir">Salon Noir (black gallery wall)</option>
<option value="latte">Latte (light)</option>
<option value="mocha">Mocha (dark)</option>
</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>
<label className="block text-sm font-medium text-subtext1 mb-2">Custom CSS</label>
<label className="field-label">Custom CSS</label>
<textarea
value={config.custom_css || ''}
onChange={e => update('custom_css', e.target.value)}
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 { ... }"
/>
<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>
</section>
<section className="space-y-6">
<h2 className="text-xl font-bold text-teal border-l-4 border-teal pl-4">Footer</h2>
<Field label="Footer Text" value={config.footer || ''} onChange={v => update('footer', v)} />
<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)} />
</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]">
Save Site Configuration
<button type="submit" className="btn-stamp">
Save site settings
</button>
</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 }) {
return (
<div>
<label className="block text-sm font-medium text-subtext1 mb-2">{label}</label>
<label className="field-label">{label}</label>
<input
type="text"
value={value}
onChange={e => onChange(e.target.value)}
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>
);
}