remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: convert admin pages to Tailwind and improve media uploads; fix TypeScript error in commandocentrum

Browse Source
This commit is contained in:
openhands committed 2026-07-02 17:26:16 +02:00
1 parent 72ef74fc87
commit 518c072491
22 files changed
+488 -430
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/admin/theme/page.tsx
+43 -33
View File
@@ -90,35 +90,41 @@ export default async function AdminTheme({
return (
<main>
<h1>Theme</h1>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
Restyle the whole site. Values are written to <code>website_settings</code> and applied
live (no rebuild).
</p>
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
<span className="text-lg">🎨</span>
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Theme</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">
Restyle the whole site. Values are written to <code>website_settings</code> and applied
live (no rebuild).
</p>
</div>
</div>
{sp.saved ? (
<p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
<div className="mb-4 p-3 rounded-lg bg-green-600/10 text-green-600 dark:text-green-400 text-xs">
Theme saved
</p>
</div>
) : null}
{sp.preset ? (
<p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
<div className="mb-4 p-3 rounded-lg bg-green-600/10 text-green-600 dark:text-green-400 text-xs">
Applied preset “{sp.preset}”
</p>
</div>
) : null}
<section className="mt-6">
<h2>Presets</h2>
<div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}>
<h2 className="admin-section-title">Presets</h2>
<div className="flex flex-wrap gap-2">
{Object.entries(PRESETS).map(([name, palette]) => (
<form key={name} action={applyPreset}>
<input type="hidden" name="preset" value={name} />
<button
type="submit"
className="btn btn-outline"
style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem" }}
className="btn btn-outline inline-flex items-center gap-2"
>
<span style={{ display: "inline-flex" }}>
<span className="flex items-center gap-1">
{["color_primary", "color_accent", "color_surface", "color_text"].map((k) => (
<span
key={k}
@@ -142,21 +148,25 @@ export default async function AdminTheme({
<form action={saveTheme}>
<section className="mt-6">
<h2>Colours</h2>
<div className="card">{colorGrid(COLOR_FIELDS, current)}</div>
<h2 className="admin-section-title">Colours</h2>
<div className="admin-card">
{colorGrid(COLOR_FIELDS, current)}
</div>
</section>
<section className="mt-6">
<h2>Buttons & links</h2>
<div className="card">{colorGrid(BUTTON_FIELDS, current)}</div>
<h2 className="admin-section-title">Buttons & links</h2>
<div className="admin-card">
{colorGrid(BUTTON_FIELDS, current)}
</div>
</section>
<section className="mt-6">
<h2>Typography & layout</h2>
<div className="card">
<div style={{ display: "flex", flexWrap: "wrap", gap: "1.25rem", alignItems: "center" }}>
<label style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
<span style={{ fontSize: "0.88rem" }}>Font</span>
<h2 className="admin-section-title">Typography & layout</h2>
<div className="admin-card">
<div className="flex flex-wrap gap-5 items-center">
<label className="flex items-center gap-2">
<span className="text-sm">Font</span>
<select name="font_family" defaultValue={fontKey}>
{Object.entries(FONTS).map(([key, f]) => (
<option key={key} value={key}>
@@ -166,27 +176,27 @@ export default async function AdminTheme({
</select>
</label>
{HEADINGS.map((h) => (
<label key={h.key} style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}>
<span style={{ fontSize: "0.88rem" }}>{h.label} (px)</span>
<label key={h.key} className="flex items-center gap-2">
<span className="text-sm">{h.label} (px)</span>
<input
name={h.key}
type="number"
min={10}
max={80}
defaultValue={/^\d{1,3}$/.test(headings[h.key]) ? headings[h.key] : h.def}
style={{ width: 80 }}
className="w-20"
/>
</label>
))}
<label style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}>
<span style={{ fontSize: "0.88rem" }}>Border radius (px)</span>
<label className="flex items-center gap-2">
<span className="text-sm">Border radius (px)</span>
<input
name="border_radius"
type="number"
min={0}
max={40}
defaultValue={/^\d{1,3}$/.test(radius) ? radius : "12"}
style={{ width: 80 }}
className="w-20"
/>
</label>
</div>
@@ -194,8 +204,8 @@ export default async function AdminTheme({
</section>
<section className="mt-6">
<h2>Custom CSS</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
<h2 className="admin-section-title">Custom CSS</h2>
<p className="text-xs text-[var(--color-text-muted)] mb-2">
Injected raw into every page (after the theme variables). Use it for tweaks the controls
above don’t cover.
</p>
@@ -205,9 +215,9 @@ export default async function AdminTheme({
rows={8}
spellCheck={false}
placeholder={"/* e.g. */\n.nav-item { letter-spacing: 0.5px; }"}
style={{ width: "100%", fontFamily: "monospace", fontSize: "0.85rem" }}
className="w-full font-mono text-sm"
/>
<div style={{ marginTop: "1rem", textAlign: "right" }}>
<div className="mt-4 text-right">
<button type="submit" className="btn btn-primary">
Save theme
</button>