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:
remco committed 2026-07-02 15:23:07 +02:00
1 parent 64f50b2dde
commit bd299be55d
52 files changed
+277 -644

No files matched your search

+4 -4
View File
@@ -51,7 +51,7 @@ export default async function AdminShop() {
shown in the store; credits/duckets/diamonds/badges are what the buyer receives.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Packages" value={packages.length} icon="🛍️" />
<StatusCard label="Recent orders" value={orders.length} icon="🧾" />
<StatusCard
@@ -62,7 +62,7 @@ export default async function AdminShop() {
/>
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Packages ({packages.length})</h2>
{packages.length === 0 ? (
<p className="muted">No shop packages yet.</p>
@@ -102,7 +102,7 @@ export default async function AdminShop() {
)}
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Recent orders ({orders.length})</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
Read-only PayPal transaction log (<code>website_paypal_transactions</code>).
@@ -138,7 +138,7 @@ export default async function AdminShop() {
<td>
{o.status ? (
<span
className={`admin-badge ${state === "ok" ? "ok" : state === "danger" ? "danger" : ""}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-green-600/20 text-[var(--color-text)]" : state === "danger" ? "bg-red-500/22 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
>
{o.status}
</span>