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

refactor: enhance admin panel styling with better card patterns

Browse Source 
- Dashboard: use admin-card for sections, refine progress bars and action badges
- Applications: enhanced card styling with p-3 and better text hierarchy
- Emulator: convert remaining 'card' classes to 'admin-card'
- All changes eliminate inline styles and use consistent Tailwind patterns

Co-authored-by: openhands <[email protected]>
This commit is contained in:
openhands committed 2026-07-02 16:27:06 +02:00
1 parent 928544100b
commit 72ef74fc87
4 files changed
+39 -43
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/admin/page.tsx
+7 -7
View File
@@ -67,8 +67,8 @@ export default async function AdminDashboard() {
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<section className="bg-[var(--color-surface)] border border-[var(--border)] rounded-2xl p-5 shadow-card">
<h2 className="m-0 text-sm font-bold text-[var(--color-text)] mb-4">Users by rank</h2>
<section className="admin-card p-5">
<h2 className="text-sm font-bold text-[var(--color-text)] mb-4 admin-section-title">Users by rank</h2>
{rankCounts.length === 0 ? (
<p className="text-xs text-[var(--color-text-muted)]">{dbOk ? "No accounts to break down yet." : "DB unavailable."}</p>
) : (
@@ -78,8 +78,8 @@ export default async function AdminDashboard() {
return (
<div key={r.rank} className="grid items-center gap-3" style={{ gridTemplateColumns: "5rem 1fr 2.5rem" }}>
<span className="text-xs font-medium text-[var(--color-text-muted)]">Rank {r.rank}</span>
<div className="h-3 rounded-[var(--radius-sm)] overflow-hidden bg-[var(--color-primary)]/10" role="img" aria-label={`Rank ${r.rank}: ${r.count} accounts`}>
<div className="h-full rounded-[var(--radius-sm)] bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-hover)] transition-all duration-500" style={{ width: `${Math.max(pct, r.count > 0 ? 4 : 0)}%` }} />
<div className="h-3 rounded-md overflow-hidden bg-[var(--color-primary)]/10" role="img" aria-label={`Rank ${r.rank}: ${r.count} accounts`}>
<div className="h-full rounded-md bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-hover)] 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>
</div>
@@ -89,9 +89,9 @@ export default async function AdminDashboard() {
)}
</section>
<section className="bg-[var(--color-surface)] border border-[var(--border)] rounded-2xl p-5 shadow-card">
<section className="admin-card p-5">
<div className="flex items-center justify-between mb-4">
<h2 className="m-0 text-sm font-bold text-[var(--color-text)]">Recent staff activity</h2>
<h2 className="text-sm font-bold text-[var(--color-text)] admin-section-title">Recent staff activity</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">
View all <ArrowRight size={12} />
</Link>
@@ -110,7 +110,7 @@ export default async function AdminDashboard() {
<div className="text-xs text-[var(--color-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)]">{a.action}</span>
<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]">{a.action}</span>
<div className="text-[0.6rem] text-[var(--color-text-muted)] mt-0.5">{fromDate(a.createdAt)}</div>
</div>
</div>