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/page.tsx
+20 -20
View File
@@ -51,12 +51,12 @@ export default async function AdminDashboard() {
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">
<Activity 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">
<Activity 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>
@@ -90,11 +90,11 @@ export default async function AdminDashboard() {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<section className="admin-card p-5">
<h2 className="text-sm font-bold text-[var(--color-text)] mb-4 admin-section-title">
<h2 className="text-sm font-bold text-[var(--admin-text)] mb-4 admin-section-title">
{t("usersByRank")}
</h2>
{rankCounts.length === 0 ? (
<p className="text-xs text-[var(--color-text-muted)]">
<p className="text-xs text-[var(--admin-text-muted)]">
{dbOk ? t("noAccountsToBreakDown") : t("databaseDown")}
</p>
) : (
@@ -107,20 +107,20 @@ export default async function AdminDashboard() {
className="grid items-center gap-3"
style={{ gridTemplateColumns: "5rem 1fr 2.5rem" }}
>
<span className="text-xs font-medium text-[var(--color-text-muted)]">
<span className="text-xs font-medium text-[var(--admin-text-muted)]">
{t("rankLabel", { rank: r.rank })}
</span>
<div
className="h-3 rounded-md overflow-hidden bg-[var(--color-primary)]/10"
className="h-3 rounded-md overflow-hidden bg-[var(--admin-accent)]/10"
role="img"
aria-label={t("rankWithCount", { rank: r.rank, count: r.count })}
>
<div
className="h-full rounded-md bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-hover)] transition-all duration-500"
className="h-full rounded-md bg-gradient-to-r from-[var(--admin-accent)] to-[var(--admin-accent)] transition-all duration-500"
style={{ width: `${Math.max(pct, r.count > 0 ? 4 : 0)}%` }}
/>
</div>
<strong className="text-xs text-right text-[var(--color-text-muted)]">{r.count}</strong>
<strong className="text-xs text-right text-[var(--admin-text-muted)]">{r.count}</strong>
</div>
);
})}
@@ -130,39 +130,39 @@ export default async function AdminDashboard() {
<section className="admin-card p-5">
<div className="flex items-center justify-between mb-4">
<h2 className="text-sm font-bold text-[var(--color-text)] admin-section-title">
<h2 className="text-sm font-bold text-[var(--admin-text)] admin-section-title">
{t("recentStaffActivity")}
</h2>
<Link
href="/admin/commandocentrum"
className="text-xs font-medium text-[var(--color-primary)] hover:text-[var(--color-primary-hover)] flex items-center gap-1 no-underline"
className="text-xs font-medium text-[var(--admin-accent)] hover:text-[var(--admin-accent)] flex items-center gap-1 no-underline"
>
{t("viewAll")} <ArrowRight size={12} />
</Link>
</div>
{activity.length === 0 ? (
<p className="text-xs text-[var(--color-text-muted)]">{t("noStaffActivityLogged")}</p>
<p className="text-xs text-[var(--admin-text-muted)]">{t("noStaffActivityLogged")}</p>
) : (
<div className="space-y-0">
{activity.map((a, i) => (
<div
key={String(a.id)}
className={`flex items-center gap-3 py-2.5 ${i > 0 ? "border-t border-[var(--border-subtle)]" : ""}`}
className={`flex items-center gap-3 py-2.5 ${i > 0 ? "border-t border-[var(--admin-border)]" : ""}`}
>
<div className="w-7 h-7 rounded-full bg-[var(--color-primary)]/10 grid place-items-center flex-none">
<Activity size={12} className="text-[var(--color-primary)]" />
<div className="w-7 h-7 rounded-full bg-[var(--admin-accent)]/10 grid place-items-center flex-none">
<Activity size={12} className="text-[var(--admin-accent)]" />
</div>
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-[var(--color-text)] truncate">
<div className="text-sm font-medium text-[var(--admin-text)] truncate">
{nameById.get(Number(a.userId)) ?? `#${a.userId}`}
</div>
<div className="text-xs text-[var(--color-text-muted)] truncate">{a.description}</div>
<div className="text-xs text-[var(--admin-text-muted)] truncate">{a.description}</div>
</div>
<div className="text-right flex-none">
<span className="inline-block text-[0.6rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)] admin-card inline-flex items-center justify-center min-w-[60px]">
<span className="inline-block text-[0.6rem] font-bold px-2 py-0.5 rounded-full bg-[var(--admin-accent)]/18 text-[var(--admin-text)] admin-card inline-flex items-center justify-center min-w-[60px]">
{a.action}
</span>
<div className="text-[0.6rem] text-[var(--color-text-muted)] mt-0.5">
<div className="text-[0.6rem] text-[var(--admin-text-muted)] mt-0.5">
{fromDate(a.createdAt)}
</div>
</div>