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

fix: use semantic colors across admin pages
Local Build and Deploy / deploy (push) Successful in 49s
Details

Browse Source
This commit is contained in:
Simo committed 2026-07-12 18:50:45 +02:00
1 parent 0fe482009c
commit 84e4123f09
83 files changed
+466 -455
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/admin/favicon/favicon-form.tsx
+8 -8
View File
@@ -64,10 +64,10 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
return (
<div className="grid gap-6 lg:grid-cols-2">
<div className="admin-card">
<h3 className="text-sm font-extrabold text-[var(--color-text)] mb-4">{t("uploadLabel")}</h3>
<h3 className="text-sm font-extrabold text-[var(--admin-text)] mb-4">{t("uploadLabel")}</h3>
{preview && (
<div className="mb-6">
<label className="block text-xs font-bold text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
<label className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
{t("current")}
</label>
<div className="flex items-center gap-4">
@@ -76,10 +76,10 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
alt="Favicon preview"
width={64}
height={64}
className="rounded-lg border-2 border-[var(--border-subtle)] object-contain bg-white"
className="rounded-lg border-2 border-[var(--admin-border)] object-contain bg-white"
unoptimized
/>
<div className="text-xs text-[var(--color-text-muted)] break-all">{preview}</div>
<div className="text-xs text-[var(--admin-text-muted)] break-all">{preview}</div>
</div>
</div>
)}
@@ -91,9 +91,9 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
name="file"
accept=".png,.jpg,.jpeg,.gif,.webp,.ico,.svg"
required
className="block w-full text-sm text-[var(--color-text-readable)] file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[var(--color-primary)] file:text-[var(--color-primary-foreground-readable)] cursor-pointer"
className="block w-full text-sm text-[var(--color-text-readable)] file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[var(--admin-accent)] file:text-[var(--color-primary-foreground-readable)] cursor-pointer"
/>
<p className="mt-1 text-xs text-[var(--color-text-muted)]">{t("uploadHint")}</p>
<p className="mt-1 text-xs text-[var(--admin-text-muted)]">{t("uploadHint")}</p>
</div>
<div className="flex gap-2">
@@ -112,8 +112,8 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
<div
className={`mt-4 p-3 rounded-lg text-sm ${
message.type === "success"
? "bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]"
: "bg-[var(--color-error-subtle)] text-[var(--color-error-text-readable)] dark:text-[var(--color-error-text-readable)]"
? "bg-[var(--admin-success-subtle)] text-[var(--admin-success)] dark:text-[var(--admin-success)]"
: "bg-[var(--admin-error-subtle)] text-[var(--admin-error)] dark:text-[var(--admin-error)]"
}`}
>
{message.text}
src/app/admin/favicon/favicon-generator.tsx
+11 -11
View File
@@ -87,21 +87,21 @@ export function FaviconGenerator({ onSave }: Props) {
return (
<div className="admin-card">
<h3 className="text-sm font-extrabold text-[var(--color-text)] mb-4">{t("title")}</h3>
<h3 className="text-sm font-extrabold text-[var(--admin-text)] mb-4">{t("title")}</h3>
<div className="flex justify-center mb-6">
<canvas
ref={canvasRef}
width={SIZE}
height={SIZE}
className="border-2 border-[var(--border-subtle)] rounded-xl shadow-lg"
className="border-2 border-[var(--admin-border)] rounded-xl shadow-lg"
style={{ width: 128, height: 128, imageRendering: "pixelated" }}
/>
</div>
<div className="space-y-4">
<div>
<label className="block text-xs font-bold text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
<label className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
{t("text")}
</label>
<input
@@ -115,7 +115,7 @@ export function FaviconGenerator({ onSave }: Props) {
</div>
<div>
<label className="block text-xs font-bold text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
<label className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
{t("bgColor")}
</label>
<div className="flex items-center gap-2 mb-2">
@@ -123,9 +123,9 @@ export function FaviconGenerator({ onSave }: Props) {
type="color"
value={bgColor}
onChange={(e) => setBgColor(e.target.value)}
className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--border-subtle)]"
className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--admin-border)]"
/>
<span className="text-xs text-[var(--color-text-muted)] font-mono">{bgColor}</span>
<span className="text-xs text-[var(--admin-text-muted)] font-mono">{bgColor}</span>
</div>
<div className="flex flex-wrap gap-1.5">
{swatches.map((c) => (
@@ -134,7 +134,7 @@ export function FaviconGenerator({ onSave }: Props) {
type="button"
onClick={() => setBgColor(c)}
className={`w-7 h-7 rounded-lg border-2 transition-all ${
bgColor === c ? "border-[var(--color-primary)] scale-110" : "border-transparent"
bgColor === c ? "border-[var(--admin-accent)] scale-110" : "border-transparent"
}`}
style={{ backgroundColor: c }}
/>
@@ -143,7 +143,7 @@ export function FaviconGenerator({ onSave }: Props) {
</div>
<div>
<label className="block text-xs font-bold text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
<label className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
{t("textColor")}
</label>
<div className="flex items-center gap-2">
@@ -151,9 +151,9 @@ export function FaviconGenerator({ onSave }: Props) {
type="color"
value={textColor}
onChange={(e) => setTextColor(e.target.value)}
className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--border-subtle)]"
className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--admin-border)]"
/>
<span className="text-xs text-[var(--color-text-muted)] font-mono">{textColor}</span>
<span className="text-xs text-[var(--admin-text-muted)] font-mono">{textColor}</span>
</div>
</div>
@@ -165,7 +165,7 @@ export function FaviconGenerator({ onSave }: Props) {
onChange={(e) => setRounded(e.target.checked)}
className="rounded"
/>
<label htmlFor="rounded" className="text-sm text-[var(--color-text)] cursor-pointer">
<label htmlFor="rounded" className="text-sm text-[var(--admin-text)] cursor-pointer">
{t("rounded")}
</label>
</div>
src/app/admin/favicon/page.tsx
+4 -4
View File
@@ -19,12 +19,12 @@ export default async function AdminFaviconPage() {
return (
<main>
<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">
<Image size={20} className="text-[var(--color-primary)]" />
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
<Image size={20} className="text-[var(--admin-accent)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("title")}</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("subtitle")}</p>
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("title")}</h1>
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("subtitle")}</p>
</div>
</div>