From 72ef74fc87e4fd8cda00241bd6e250049bd45536 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Thu, 2 Jul 2026 16:27:06 +0200
Subject: [PATCH] refactor: enhance admin panel styling with better card
 patterns

- 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 <openhands@all-hands.dev>
---
 src/app/admin/applications/page.tsx | 34 ++++++++++++++---------------
 src/app/admin/emulator/page.tsx     | 30 ++++++++++++-------------
 src/app/admin/page.tsx              | 14 ++++++------
 src/app/admin/rooms/[id]/page.tsx   |  4 ++--
 4 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/src/app/admin/applications/page.tsx b/src/app/admin/applications/page.tsx
index f8f0a250..7409fa72 100644
--- a/src/app/admin/applications/page.tsx
+++ b/src/app/admin/applications/page.tsx
@@ -46,10 +46,15 @@ export default async function AdminApplications() {
 
   return (
     <main>
-      <h1>Staff Applications</h1>
-      <p className="muted" style={{ marginTop: "-0.4rem" }}>
-        Pending applications from players requesting a staff rank.
-      </p>
+      <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">
+          <ClipboardList size={20} className="text-[var(--color-primary)]" />
+        </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">
         <StatusCard
@@ -61,24 +66,17 @@ export default async function AdminApplications() {
       </div>
 
       <section className="mt-6">
-        <h2>Applications ({applications.length})</h2>
+        <h2 className="admin-section-title">Applications ({applications.length})</h2>
         {applications.length === 0 ? (
-          <p className="muted">No pending applications.</p>
+          <div className="admin-empty">No pending applications.</div>
         ) : (
           <div className="grid cols-2">
             {applications.map((a) => {
               const username = userMap.get(a.userId);
               return (
-                <article key={String(a.id)} className="card">
-                  <div
-                    style={{
-                      display: "flex",
-                      justifyContent: "space-between",
-                      alignItems: "baseline",
-                      gap: "0.5rem",
-                    }}
-                  >
-                    <h3 style={{ margin: "0 0 0.25rem" }}>
+                <article key={String(a.id)} className="admin-card p-3">
+                  <div className="flex items-baseline justify-between gap-2 mb-1">
+                    <h3 className="m-0 text-sm font-semibold text-[var(--color-text)]">
                       {username ? (
                         <Link href={`/admin/users/${a.userId}`}>{username}</Link>
                       ) : (
@@ -87,10 +85,10 @@ export default async function AdminApplications() {
                     </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>
                   </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)}
                   </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}>
                     <input type="hidden" name="id" value={String(a.id)} />
                     <button type="submit" className="btn btn-danger">
diff --git a/src/app/admin/emulator/page.tsx b/src/app/admin/emulator/page.tsx
index 2abede9d..ca7b79fe 100644
--- a/src/app/admin/emulator/page.tsx
+++ b/src/app/admin/emulator/page.tsx
@@ -47,24 +47,23 @@ export default async function AdminEmulator() {
       </div>
 
       <section className="mt-6">
-        <h2>Settings</h2>
+        <h2 className="admin-section-title">Settings</h2>
         <p className="muted" style={{ marginTop: "-0.4rem" }}>
           {settings.length} keys.
         </p>
 
       <form
         action={updateEmulatorSetting}
-        className="card"
-        style={{ marginBottom: "1.5rem" }}
+        className="admin-card mb-6"
       >
-        <h3 style={{ marginTop: 0 }}>Add / overwrite setting</h3>
-        <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+        <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Add / overwrite setting</h3>
+        <div className="flex gap-2 flex-wrap">
           <input name="key" placeholder="key" maxLength={100} required />
           <input
             name="value"
             placeholder="value"
             maxLength={512}
-            style={{ flex: 1, minWidth: 200 }}
+            className="flex-1 min-w-[200px]"
           />
           <button type="submit" className="btn btn-primary">
             Save
@@ -112,24 +111,23 @@ export default async function AdminEmulator() {
       </section>
 
       <section className="mt-6">
-        <h2>Texts</h2>
+        <h2 className="admin-section-title">Texts</h2>
         <p className="muted" style={{ marginTop: "-0.4rem" }}>
           {textsCount} keys{textsTruncated ? ` (showing first ${texts.length})` : ""}.
         </p>
 
       <form
         action={updateEmulatorText}
-        className="card"
-        style={{ marginBottom: "1.5rem" }}
+        className="admin-card mb-6"
       >
-        <h3 style={{ marginTop: 0 }}>Add / overwrite text</h3>
-        <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+        <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Add / overwrite text</h3>
+        <div className="flex gap-2 flex-wrap">
           <input name="key" placeholder="key" maxLength={100} required />
           <input
             name="value"
             placeholder="value"
             maxLength={4096}
-            style={{ flex: 1, minWidth: 200 }}
+            className="flex-1 min-w-[200px]"
           />
           <button type="submit" className="btn btn-primary">
             Save
@@ -140,7 +138,7 @@ export default async function AdminEmulator() {
       <table>
         <thead>
           <tr>
-            <th style={{ width: 320 }}>Key</th>
+            <th className="w-[320px]">Key</th>
             <th>Value</th>
           </tr>
         </thead>
@@ -153,14 +151,14 @@ export default async function AdminEmulator() {
               <td>
                 <form
                   action={updateEmulatorText}
-                  style={{ display: "flex", gap: "0.5rem" }}
+                  className="flex gap-2"
                 >
                   <input type="hidden" name="key" value={t.key} />
                   <input
                     name="value"
                     defaultValue={t.value}
                     maxLength={4096}
-                    style={{ flex: 1 }}
+                    className="flex-1"
                   />
                   <button type="submit" className="btn btn-outline">
                     Save
@@ -172,7 +170,7 @@ export default async function AdminEmulator() {
         </tbody>
       </table>
       {texts.length === 0 ? (
-        <p className="muted">No emulator texts found.</p>
+        <div className="admin-empty">No emulator texts found.</div>
       ) : null}
       {textsTruncated ? (
         <p className="muted">
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 003fb3b8..7ed0e81f 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -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>
diff --git a/src/app/admin/rooms/[id]/page.tsx b/src/app/admin/rooms/[id]/page.tsx
index 74231483..1ef372c5 100644
--- a/src/app/admin/rooms/[id]/page.tsx
+++ b/src/app/admin/rooms/[id]/page.tsx
@@ -58,12 +58,12 @@ export default async function AdminRoomDetail({
         </div>
       </div>
 
-      <div className="card">
+      <div className="admin-card">
         <table>
           <tbody>
             {fields.map(([label, value]) => (
               <tr key={label}>
-                <th style={{ width: "35%", whiteSpace: "nowrap" }}>{label}</th>
+                <th className="w-[35%] whitespace-nowrap">{label}</th>
                 <td>{value}</td>
               </tr>
             ))}