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

redesigned buttons

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-15 14:40:08 +02:00
parent 59108835dd
commit 288bf890dc
13 changed files with 99 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/react/admin/Editor.tsx
+9 -27
View File
@@ -415,11 +415,11 @@ export default function Editor({ editSlug }: Props) {
{/* Actions bar */}
<div className="flex flex-wrap gap-4 mb-6">
{originalSlug && (
<button onClick={handleDelete} className="btn-ghost py-3 px-6 text-[var(--red)] border-[var(--red)]/40 hover:bg-[var(--red)]/10 hover:border-[var(--red)] hover:text-[var(--red)]">
<button onClick={handleDelete} className="btn btn--danger">
Remove
</button>
)}
<button onClick={handleSave} className="btn-stamp py-3 px-8 whitespace-nowrap">
<button onClick={handleSave} className="btn btn--primary">
Save work
</button>
{originalSlug && (
@@ -427,7 +427,7 @@ export default function Editor({ editSlug }: Props) {
href={`/posts/${encodeURIComponent(originalSlug)}`}
target="_blank"
rel="noreferrer"
className="btn-ghost py-3 px-6 inline-flex items-center justify-center gap-2 whitespace-nowrap"
className="btn btn--ghost"
>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
View work
@@ -521,12 +521,7 @@ export default function Editor({ editSlug }: Props) {
<button
type="button"
onClick={() => setVimEnabled(v => !v)}
className={`text-xs px-3 py-1.5 border transition-colors font-mono ${
vimEnabled
? 'bg-[var(--mauve)]/20 text-[var(--mauve)] border-[var(--mauve)]/30'
: 'bg-[var(--surface0)] text-[var(--subtext0)] border-[var(--surface2)] hover:text-[var(--text)]'
}`}
style={{ borderRadius: 2 }}
className={`btn btn--sm${vimEnabled ? ' is-active' : ''}`}
title={vimEnabled ? 'Vim mode ON' : 'Vim mode OFF'}
>
{vimEnabled ? 'VIM' : 'vim'}
@@ -534,19 +529,14 @@ export default function Editor({ editSlug }: Props) {
<button
type="button"
onClick={() => setShowPreview(p => !p)}
className={`text-xs px-3 py-1.5 border transition-colors ${
showPreview
? 'bg-[var(--blue)]/20 text-[var(--blue)] border-[var(--blue)]/30'
: 'bg-[var(--surface0)] text-[var(--subtext0)] border-[var(--surface2)] hover:text-[var(--text)]'
}`}
style={{ borderRadius: 2 }}
className={`btn btn--sm${showPreview ? ' is-active' : ''}`}
>
{showPreview ? 'Hide Preview' : 'Show Preview'}
</button>
<button
type="button"
onClick={() => setShowModal(true)}
className="btn-stamp text-sm py-1.5 px-4"
className="btn btn--primary btn--sm"
title="Insert an image — also: drag an image into the editor, or paste from clipboard"
>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
@@ -563,11 +553,7 @@ export default function Editor({ editSlug }: Props) {
role="tab"
aria-selected={mobileView === 'edit'}
onClick={() => setMobileView('edit')}
className={`flex-1 text-xs px-3 py-2 rounded border transition-colors ${
mobileView === 'edit'
? 'bg-blue/20 text-blue border-blue/30'
: 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
}`}
className={`btn btn--sm flex-1${mobileView === 'edit' ? ' is-active' : ''}`}
>
Edit
</button>
@@ -576,11 +562,7 @@ export default function Editor({ editSlug }: Props) {
role="tab"
aria-selected={mobileView === 'preview'}
onClick={() => setMobileView('preview')}
className={`flex-1 text-xs px-3 py-2 rounded border transition-colors ${
mobileView === 'preview'
? 'bg-blue/20 text-blue border-blue/30'
: 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
}`}
className={`btn btn--sm flex-1${mobileView === 'preview' ? ' is-active' : ''}`}
>
Preview
</button>
@@ -679,7 +661,7 @@ export default function Editor({ editSlug }: Props) {
<h2 className="font-display italic text-2xl md:text-3xl text-[var(--text)] leading-tight">Add image</h2>
<p className="text-xs text-[var(--subtext0)] font-display italic mt-1">Click an image to insert it. Drag new files in to upload.</p>
</div>
<button onClick={closeAssetModal} className="p-2 text-[var(--subtext0)] hover:text-[var(--red)] transition-colors">
<button onClick={closeAssetModal} className="btn btn--ghost btn--icon btn--sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</header>