refactor: convert admin panel to Tailwind CSS
- Convert admin layout, sidebar, and navigation to Tailwind classes - Convert dashboard components (StatusCard, DiagnosticRow, etc.) to Tailwind - Convert all ~48 admin page files from admin CSS classes to Tailwind - Remove unused admin CSS from globals.css (973 → 712 lines) - Convert developers page badges to Tailwind - Remove <style jsx> block from OnlineUsersWidget
This commit is contained in:
1 parent
64f50b2dde
commit
bd299be55d
52 files changed
+277
-644
No files matched your search
@@ -39,7 +39,7 @@ export default async function AdminUserDetail({
|
||||
{user.motto ? user.motto : "No motto set."}
|
||||
</p>
|
||||
|
||||
<div className="admin-stats">
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label="User ID" value={user.id} icon="🆔" />
|
||||
<StatusCard label="Rank" value={user.rank} icon="🎖️" />
|
||||
<StatusCard label="Credits" value={user.credits} icon="💰" />
|
||||
@@ -51,14 +51,14 @@ export default async function AdminUserDetail({
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section className="admin-section">
|
||||
<section className="mt-6">
|
||||
<h2>Overview</h2>
|
||||
<div className="admin-info-grid">
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-2.5">
|
||||
<InfoItem label="Username" value={user.username} />
|
||||
<InfoItem
|
||||
label="Status"
|
||||
value={
|
||||
<span className={`admin-badge ${isOnline ? "ok" : ""}`}>
|
||||
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${isOnline ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
|
||||
{isOnline ? "online" : "offline"}
|
||||
</span>
|
||||
}
|
||||
@@ -69,7 +69,7 @@ export default async function AdminUserDetail({
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="admin-section">
|
||||
<section className="mt-6">
|
||||
<h2>Actions</h2>
|
||||
<div className="grid cols-2">
|
||||
<form action={giveCurrency} className="card">
|
||||
|
||||
@@ -37,7 +37,7 @@ export default async function AdminUsers({
|
||||
{q ? `Search results for “${q}”.` : "Most recent accounts first."}
|
||||
</p>
|
||||
|
||||
<div className="admin-stats">
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label="Total users" value={total} icon="👥" />
|
||||
<StatusCard label="On this page" value={users.length} icon="📄" />
|
||||
<StatusCard
|
||||
@@ -63,7 +63,7 @@ export default async function AdminUsers({
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<section className="admin-section">
|
||||
<section className="mt-6">
|
||||
<h2>Accounts ({total})</h2>
|
||||
{users.length === 0 ? (
|
||||
<p className="muted">No users match this search.</p>
|
||||
@@ -90,7 +90,7 @@ export default async function AdminUsers({
|
||||
<td>{u.rank}</td>
|
||||
<td>{u.credits}</td>
|
||||
<td>
|
||||
<span className={`admin-badge ${u.online === "1" ? "ok" : ""}`}>
|
||||
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${u.online === "1" ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
|
||||
{u.online === "1" ? "online" : "offline"}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
Reference in new issue
Block a user