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/applications/page.tsx
+16 -18
View File
@@ -46,10 +46,15 @@ export default async function AdminApplications() {
return ( return (
<main> <main>
<h1>Staff Applications</h1> <div className="flex items-center gap-3 mb-6">
<p className="muted" style={{ marginTop: "-0.4rem" }}> <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">
Pending applications from players requesting a staff rank. <ClipboardList size={20} className="text-[var(--color-primary)]" />
</p> </div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Staff Applications</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Pending applications from players requesting a staff rank.</p>
</div>
</div>
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6"> <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard <StatusCard
@@ -61,24 +66,17 @@ export default async function AdminApplications() {
</div> </div>
<section className="mt-6"> <section className="mt-6">
<h2>Applications ({applications.length})</h2> <h2 className="admin-section-title">Applications ({applications.length})</h2>
{applications.length === 0 ? ( {applications.length === 0 ? (
<p className="muted">No pending applications.</p> <div className="admin-empty">No pending applications.</div>
) : ( ) : (
<div className="grid cols-2"> <div className="grid cols-2">
{applications.map((a) => { {applications.map((a) => {
const username = userMap.get(a.userId); const username = userMap.get(a.userId);
return ( return (
<article key={String(a.id)} className="card"> <article key={String(a.id)} className="admin-card p-3">
<div <div className="flex items-baseline justify-between gap-2 mb-1">
style={{ <h3 className="m-0 text-sm font-semibold text-[var(--color-text)]">
display: "flex",
justifyContent: "space-between",
alignItems: "baseline",
gap: "0.5rem",
}}
>
<h3 style={{ margin: "0 0 0.25rem" }}>
{username ? ( {username ? (
<Link href={`/admin/users/${a.userId}`}>{username}</Link> <Link href={`/admin/users/${a.userId}`}>{username}</Link>
) : ( ) : (
@@ -87,10 +85,10 @@ export default async function AdminApplications() {
</h3> </h3>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">Rank {a.rankId}</span> <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">Rank {a.rankId}</span>
</div> </div>
<p className="muted" style={{ marginTop: 0 }}> <p className="text-xs text-gray-500 dark:text-gray-400 m-0 mb-2">
{formatDate(a.createdAt)} {formatDate(a.createdAt)}
</p> </p>
<p style={{ whiteSpace: "pre-wrap", margin: "0 0 0.75rem" }}>{a.content}</p> <p className="text-sm text-[var(--color-text)] whitespace-pre-wrap m-0 mb-3">{a.content}</p>
<form action={dismissApplication}> <form action={dismissApplication}>
<input type="hidden" name="id" value={String(a.id)} /> <input type="hidden" name="id" value={String(a.id)} />
<button type="submit" className="btn btn-danger"> <button type="submit" className="btn btn-danger">
src/app/admin/emulator/page.tsx
+14 -16
View File
@@ -47,24 +47,23 @@ export default async function AdminEmulator() {
</div> </div>
<section className="mt-6"> <section className="mt-6">
<h2>Settings</h2> <h2 className="admin-section-title">Settings</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}> <p className="muted" style={{ marginTop: "-0.4rem" }}>
{settings.length} keys. {settings.length} keys.
</p> </p>
<form <form
action={updateEmulatorSetting} action={updateEmulatorSetting}
className="card" className="admin-card mb-6"
style={{ marginBottom: "1.5rem" }}
> >
<h3 style={{ marginTop: 0 }}>Add / overwrite setting</h3> <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Add / overwrite setting</h3>
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}> <div className="flex gap-2 flex-wrap">
<input name="key" placeholder="key" maxLength={100} required /> <input name="key" placeholder="key" maxLength={100} required />
<input <input
name="value" name="value"
placeholder="value" placeholder="value"
maxLength={512} maxLength={512}
style={{ flex: 1, minWidth: 200 }} className="flex-1 min-w-[200px]"
/> />
<button type="submit" className="btn btn-primary"> <button type="submit" className="btn btn-primary">
Save Save
@@ -112,24 +111,23 @@ export default async function AdminEmulator() {
</section> </section>
<section className="mt-6"> <section className="mt-6">
<h2>Texts</h2> <h2 className="admin-section-title">Texts</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}> <p className="muted" style={{ marginTop: "-0.4rem" }}>
{textsCount} keys{textsTruncated ? ` (showing first ${texts.length})` : ""}. {textsCount} keys{textsTruncated ? ` (showing first ${texts.length})` : ""}.
</p> </p>
<form <form
action={updateEmulatorText} action={updateEmulatorText}
className="card" className="admin-card mb-6"
style={{ marginBottom: "1.5rem" }}
> >
<h3 style={{ marginTop: 0 }}>Add / overwrite text</h3> <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Add / overwrite text</h3>
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}> <div className="flex gap-2 flex-wrap">
<input name="key" placeholder="key" maxLength={100} required /> <input name="key" placeholder="key" maxLength={100} required />
<input <input
name="value" name="value"
placeholder="value" placeholder="value"
maxLength={4096} maxLength={4096}
style={{ flex: 1, minWidth: 200 }} className="flex-1 min-w-[200px]"
/> />
<button type="submit" className="btn btn-primary"> <button type="submit" className="btn btn-primary">
Save Save
@@ -140,7 +138,7 @@ export default async function AdminEmulator() {
<table> <table>
<thead> <thead>
<tr> <tr>
<th style={{ width: 320 }}>Key</th> <th className="w-[320px]">Key</th>
<th>Value</th> <th>Value</th>
</tr> </tr>
</thead> </thead>
@@ -153,14 +151,14 @@ export default async function AdminEmulator() {
<td> <td>
<form <form
action={updateEmulatorText} action={updateEmulatorText}
style={{ display: "flex", gap: "0.5rem" }} className="flex gap-2"
> >
<input type="hidden" name="key" value={t.key} /> <input type="hidden" name="key" value={t.key} />
<input <input
name="value" name="value"
defaultValue={t.value} defaultValue={t.value}
maxLength={4096} maxLength={4096}
style={{ flex: 1 }} className="flex-1"
/> />
<button type="submit" className="btn btn-outline"> <button type="submit" className="btn btn-outline">
Save Save
@@ -172,7 +170,7 @@ export default async function AdminEmulator() {
</tbody> </tbody>
</table> </table>
{texts.length === 0 ? ( {texts.length === 0 ? (
<p className="muted">No emulator texts found.</p> <div className="admin-empty">No emulator texts found.</div>
) : null} ) : null}
{textsTruncated ? ( {textsTruncated ? (
<p className="muted"> <p className="muted">
src/app/admin/page.tsx
+7 -7
View File
@@ -67,8 +67,8 @@ export default async function AdminDashboard() {
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> <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"> <section className="admin-card p-5">
<h2 className="m-0 text-sm font-bold text-[var(--color-text)] mb-4">Users by rank</h2> <h2 className="text-sm font-bold text-[var(--color-text)] mb-4 admin-section-title">Users by rank</h2>
{rankCounts.length === 0 ? ( {rankCounts.length === 0 ? (
<p className="text-xs text-[var(--color-text-muted)]">{dbOk ? "No accounts to break down yet." : "DB unavailable."}</p> <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 ( return (
<div key={r.rank} className="grid items-center gap-3" style={{ gridTemplateColumns: "5rem 1fr 2.5rem" }}> <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> <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-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-[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-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> </div>
<strong className="text-xs text-right text-[var(--color-text-muted)]">{r.count}</strong> <strong className="text-xs text-right text-[var(--color-text-muted)]">{r.count}</strong>
</div> </div>
@@ -89,9 +89,9 @@ export default async function AdminDashboard() {
)} )}
</section> </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"> <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"> <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} /> View all <ArrowRight size={12} />
</Link> </Link>
@@ -110,7 +110,7 @@ export default async function AdminDashboard() {
<div className="text-xs text-[var(--color-text-muted)] truncate">{a.description}</div> <div className="text-xs text-[var(--color-text-muted)] truncate">{a.description}</div>
</div> </div>
<div className="text-right flex-none"> <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 className="text-[0.6rem] text-[var(--color-text-muted)] mt-0.5">{fromDate(a.createdAt)}</div>
</div> </div>
</div> </div>
src/app/admin/rooms/[id]/page.tsx
+2 -2
View File
@@ -58,12 +58,12 @@ export default async function AdminRoomDetail({
</div> </div>
</div> </div>
<div className="card"> <div className="admin-card">
<table> <table>
<tbody> <tbody>
{fields.map(([label, value]) => ( {fields.map(([label, value]) => (
<tr key={label}> <tr key={label}>
<th style={{ width: "35%", whiteSpace: "nowrap" }}>{label}</th> <th className="w-[35%] whitespace-nowrap">{label}</th>
<td>{value}</td> <td>{value}</td>
</tr> </tr>
))} ))}