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

fix: isolate shared admin styling

Browse Source
This commit is contained in:
Simo committed 2026-07-12 18:50:44 +02:00
1 parent 4ce35e91fb
commit 0fe482009c
15 files changed
+157 -150
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/admin/dashboard.tsx
+28 -28
View File
@@ -29,20 +29,20 @@ export function StatusCard({
icon?: ReactNode;
}) {
return (
<div className="bg-[var(--color-surface)] border border-[var(--border-subtle)] rounded-2xl p-5 shadow-card hover:shadow-card-hover transition-shadow duration-200">
<div className="bg-[var(--admin-surface)] border border-[var(--admin-border)] rounded-2xl p-5 shadow-card hover:shadow-card-hover transition-shadow duration-200">
<div className="flex items-center justify-between gap-3 mb-3">
<span className="text-[0.65rem] font-bold uppercase tracking-widest text-[var(--color-text-muted)]">
<span className="text-[0.65rem] font-bold uppercase tracking-widest text-[var(--admin-text-muted)]">
{label}
</span>
{icon ? (
<span className="w-8 h-8 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/15 to-[var(--color-primary)]/5 grid place-items-center text-[var(--color-primary)] flex-none">
<span className="w-8 h-8 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/15 to-[var(--admin-accent)]/5 grid place-items-center text-[var(--admin-accent)] flex-none">
{icon}
</span>
) : null}
</div>
<div className="text-2xl font-extrabold text-[var(--color-text)] leading-tight">{value}</div>
<div className="text-2xl font-extrabold text-[var(--admin-text)] leading-tight">{value}</div>
{hint ? (
<div className="text-[0.7rem] text-[var(--color-text-muted)] mt-1.5 font-medium">{hint}</div>
<div className="text-[0.7rem] text-[var(--admin-text-muted)] mt-1.5 font-medium">{hint}</div>
) : null}
</div>
);
@@ -61,24 +61,24 @@ export function DiagnosticRow({
const text = state === "ok" ? "OK" : state === "warn" ? "WARN" : "ERROR";
const dotColor =
state === "ok"
? "bg-[var(--color-success-subtle)] shadow-[0_0_0_3px_rgba(22,163,74,0.22)]"
? "bg-[var(--admin-success-subtle)] shadow-[0_0_0_3px_rgba(22,163,74,0.22)]"
: state === "warn"
? "bg-[var(--color-primary)] shadow-[0_0_0_3px_rgba(238,180,37,0.22)]"
: "bg-[var(--color-error-subtle)] shadow-[0_0_0_3px_rgba(239,68,68,0.22)]";
? "bg-[var(--admin-accent)] shadow-[0_0_0_3px_rgba(238,180,37,0.22)]"
: "bg-[var(--admin-error-subtle)] shadow-[0_0_0_3px_rgba(239,68,68,0.22)]";
const badgeColor =
state === "ok"
? "bg-[var(--color-success-subtle)]"
? "bg-[var(--admin-success-subtle)]"
: state === "danger"
? "bg-[var(--color-error-subtle)]"
: "bg-[var(--color-primary)]/18";
? "bg-[var(--admin-error-subtle)]"
: "bg-[var(--admin-accent)]/18";
return (
<div className="flex items-center gap-2.5 py-2 px-0.5 border-t border-[var(--border-subtle)] first:border-t-0">
<div className="flex items-center gap-2.5 py-2 px-0.5 border-t border-[var(--admin-border)] first:border-t-0">
<span className={`flex-none w-[9px] h-[9px] rounded-full ${dotColor}`} aria-hidden />
<span className="font-bold text-sm">{label}</span>
<span className="flex-1 text-[0.82rem] text-[var(--color-text-muted)]">{detail}</span>
<span className="flex-1 text-[0.82rem] text-[var(--admin-text-muted)]">{detail}</span>
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${badgeColor} text-[var(--color-text)]`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${badgeColor} text-[var(--admin-text)]`}
>
{text}
</span>
@@ -90,7 +90,7 @@ export function DiagnosticRow({
export function InfoItem({ label, value }: { label: string; value: ReactNode }) {
return (
<div className="flex flex-col gap-0.5 text-sm">
<span className="text-[var(--color-text-muted)]">{label}</span>
<span className="text-[var(--admin-text-muted)]">{label}</span>
<strong>{value}</strong>
</div>
);
@@ -115,54 +115,54 @@ export function OnlineUsersWidget({
};
return (
<div className="bg-[var(--color-surface)] rounded-xl border border-[var(--border-subtle)] p-6">
<div className="bg-[var(--admin-surface)] rounded-xl border border-[var(--admin-border)] p-6">
<div className="flex justify-between items-center mb-4">
<h3 className="m-0 text-lg font-semibold text-[var(--color-text)]">Online Now</h3>
<span className="text-sm text-[var(--color-text-muted)] bg-[var(--color-primary)]/10 px-3 py-1 rounded-full">
<h3 className="m-0 text-lg font-semibold text-[var(--admin-text)]">Online Now</h3>
<span className="text-sm text-[var(--admin-text-muted)] bg-[var(--admin-accent)]/10 px-3 py-1 rounded-full">
{isLoading ? "..." : users.length} users
</span>
</div>
<div className="max-h-80 overflow-y-auto flex flex-col gap-3">
{users.length === 0 ? (
<div className="py-8 text-center bg-[var(--color-text-muted)]/5 rounded-lg">
<span className="text-[var(--color-text-muted)] text-sm">No users online</span>
<div className="py-8 text-center bg-[var(--admin-text-muted)]/5 rounded-lg">
<span className="text-[var(--admin-text-muted)] text-sm">No users online</span>
</div>
) : (
users.map((user) => (
<div
key={user.id}
className="flex items-center gap-3 p-3 bg-[var(--color-text-muted)]/5 rounded-lg transition-all duration-150 hover:bg-[var(--color-text-muted)]/10 hover:translate-x-0.5"
className="flex items-center gap-3 p-3 bg-[var(--admin-text-muted)]/5 rounded-lg transition-all duration-150 hover:bg-[var(--admin-text-muted)]/10 hover:translate-x-0.5"
>
<div className="relative flex-none w-[50px] h-[62px]">
<Image
src={`https://www.habbo.com/habbo-imaging/avatarimage?width=50&height=62&direction=2&headonly=1&crop=face&action=wav&gender=m&look=${encodeURIComponent(user.look)}`}
alt={user.username}
fill
className="rounded object-cover border border-[var(--border-subtle)]"
className="rounded object-cover border border-[var(--admin-border)]"
unoptimized
/>
{user.roomId && user.roomName && (
<div className="absolute -bottom-0.5 -right-0.5">
<span className="block w-[10px] h-[10px] bg-[var(--color-success-subtle)] rounded-full border-2 border-[var(--color-surface)]" />
<span className="block w-[10px] h-[10px] bg-[var(--admin-success-subtle)] rounded-full border-2 border-[var(--admin-surface)]" />
</div>
)}
</div>
<div className="flex-1 min-w-0">
<div className="font-medium text-[var(--color-text)] mb-1 truncate">
<div className="font-medium text-[var(--admin-text)] mb-1 truncate">
<a
href={`/u/${user.username}`}
className="text-inherit no-underline hover:text-[var(--color-primary)] hover:underline"
className="text-inherit no-underline hover:text-[var(--admin-accent)] hover:underline"
>
{user.username}
</a>
</div>
<div className="text-[0.75rem] text-[var(--color-text-muted)]">
<div className="text-[0.75rem] text-[var(--admin-text-muted)]">
{user.roomId && user.roomName ? (
<span className="text-[var(--color-success-text-readable)] font-medium">🏠 {user.roomName}</span>
<span className="text-[var(--admin-success)] font-medium">🏠 {user.roomName}</span>
) : (
<span className="text-[var(--color-error-text-readable)]">⏱️ {formatLastSeen(user.lastActivity)}</span>
<span className="text-[var(--admin-error)]">⏱️ {formatLastSeen(user.lastActivity)}</span>
)}
</div>
</div>