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>