From f12f4edc69c87a087d766b1daeccf190df82facc Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Tue, 25 Aug 2026 18:52:08 +0200
Subject: [PATCH] feat(admin): fix admin shell theme tokens, declutter
 dashboard, add active-page nav highlight
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Admin shell used hardcoded zinc-* classes instead of semantic design tokens and
a redundant "PawFeed Admin" kicker label. Dashboard was a wall of 12 identically
weighted stat cards with no hierarchy. Sidebar/mobile nav gave no indication of
the current page.

- layout.tsx/AdminMobileNav.tsx/GranularityToggle.tsx/TimeSeriesChart.tsx: replace
  zinc-* with bg-background/text-foreground/border-border etc., force dark via
  the `dark` class so the admin surface stays permanently dark regardless of
  site-wide theme toggle
- New AdminSidebarNav.tsx: highlights the current page (desktop sidebar)
- AdminMobileNav.tsx: same active-state logic for the mobile drawer, topbar
  shows the current page label instead of a static title
- page.tsx: replace the 12-card stat grid with 2 AttentionStat tiles (reports,
  pending verifications — color means "act on this") plus a flat Overview list,
  and convert the 5 chart containers to the shared Card component
---
 src/app/p/[secret]/layout.tsx              |  29 +--
 src/app/p/[secret]/page.tsx                | 265 ++++++++++++---------
 src/components/admin/AdminMobileNav.tsx    |  33 ++-
 src/components/admin/AdminSidebarNav.tsx   |  42 ++++
 src/components/admin/GranularityToggle.tsx |   6 +-
 src/components/admin/TimeSeriesChart.tsx   |   2 +-
 6 files changed, 224 insertions(+), 153 deletions(-)
 create mode 100644 src/components/admin/AdminSidebarNav.tsx

diff --git a/src/app/p/[secret]/layout.tsx b/src/app/p/[secret]/layout.tsx
index e91e3cb..586009f 100644
--- a/src/app/p/[secret]/layout.tsx
+++ b/src/app/p/[secret]/layout.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { createTRPCCaller } from "@/trpc/server";
 import { timingSafeStringEqual } from "@/lib/timing-safe-compare";
 import { AdminMobileNav } from "@/components/admin/AdminMobileNav";
+import { AdminSidebarNav } from "@/components/admin/AdminSidebarNav";
 import {
   LayoutDashboard,
   Users,
@@ -79,30 +80,22 @@ export default async function AdminLayout({ children, params }: AdminLayoutProps
   }));
 
   return (
-    <div className="flex min-h-screen flex-col bg-zinc-950 text-zinc-100 md:flex-row">
+    // Admin stays permanently dark regardless of the visitor site's theme
+    // toggle — a moderator's ops tool, not a marketing surface — but now
+    // pinned to PawFeed's own dark palette (the `dark` class resolves the
+    // real design tokens) instead of a generic, disconnected zinc scaffold.
+    <div className="dark flex min-h-screen flex-col bg-background text-foreground md:flex-row">
       {/* Mobile topbar + drawer — hidden md: and up */}
-      <AdminMobileNav nav={navForMobile} />
+      <AdminMobileNav nav={navForMobile} base={base} />
 
       {/* Sidebar — hidden below md:, permanent from md: up */}
-      <aside className="hidden md:flex w-56 shrink-0 border-r border-zinc-800 flex-col py-6 px-4 gap-1 h-screen sticky top-0 overflow-y-auto">
-        <p className="text-xs font-semibold text-zinc-500 uppercase tracking-widest px-2 mb-3">
-          PawFeed Admin
-        </p>
-        {nav.map(({ href, label, Icon }) => (
-          <Link
-            key={href}
-            href={href}
-            className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100 transition-colors"
-          >
-            <Icon className="h-4 w-4 shrink-0" />
-            {label}
-          </Link>
-        ))}
+      <aside className="hidden md:flex w-56 shrink-0 border-r border-border flex-col py-6 px-4 gap-1 h-screen sticky top-0 overflow-y-auto">
+        <AdminSidebarNav base={base} nav={navForMobile} />
 
-        <div className="mt-auto pt-3 border-t border-zinc-800">
+        <div className="mt-auto pt-3 border-t border-border">
           <Link
             href="/feed"
-            className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100 transition-colors"
+            className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
           >
             <ArrowLeft className="h-4 w-4 shrink-0" />
             Zurück
diff --git a/src/app/p/[secret]/page.tsx b/src/app/p/[secret]/page.tsx
index e78ae04..0471a87 100644
--- a/src/app/p/[secret]/page.tsx
+++ b/src/app/p/[secret]/page.tsx
@@ -3,24 +3,11 @@
 import { useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useTRPC } from "@/trpc/client";
-import {
-  Users,
-  PawPrint,
-  FileText,
-  ShieldOff,
-  Megaphone,
-  Flag,
-  Activity,
-  CalendarDays,
-  Ghost,
-  Ban,
-  Clock,
-  BadgeCheck,
-  TriangleAlert,
-} from "lucide-react";
+import { Flag, Clock, TriangleAlert } from "lucide-react";
 import { TimeSeriesChart } from "@/components/admin/TimeSeriesChart";
 import { GranularityToggle, type Granularity } from "@/components/admin/GranularityToggle";
 import { Button } from "@/components/ui/button";
+import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent } from "@/components/ui/card";
 
 export default function AdminDashboard() {
   const trpc = useTRPC();
@@ -63,25 +50,25 @@ export default function AdminDashboard() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-2xl font-bold text-zinc-100">Dashboard</h1>
-        <p className="text-sm text-zinc-500 mt-1">Platform overview</p>
+        <h1 className="text-2xl font-bold text-foreground">Dashboard</h1>
+        <p className="text-sm text-muted-foreground mt-1">Platform overview</p>
       </div>
 
       {canToggleMaintenance && (
         <div
           className={`flex items-center justify-between gap-4 rounded-xl border px-5 py-4 ${
             maintenance?.enabled
-              ? "border-red-900 bg-red-950/40"
-              : "border-zinc-800 bg-zinc-900"
+              ? "border-destructive/40 bg-destructive/10"
+              : "border-border bg-card"
           }`}
         >
           <div className="flex items-center gap-3">
             <TriangleAlert
-              className={`h-5 w-5 shrink-0 ${maintenance?.enabled ? "text-red-400" : "text-zinc-500"}`}
+              className={`h-5 w-5 shrink-0 ${maintenance?.enabled ? "text-destructive" : "text-muted-foreground"}`}
             />
             <div>
-              <p className="text-sm font-semibold text-zinc-100">Maintenance mode</p>
-              <p className="text-xs text-zinc-500 mt-0.5">
+              <p className="text-sm font-semibold text-foreground">Maintenance mode</p>
+              <p className="text-xs text-muted-foreground mt-0.5">
                 {maintenance?.enabled
                   ? "Live — all visitors see the maintenance page except the admin panel."
                   : "Off — the site is publicly reachable."}
@@ -100,127 +87,167 @@ export default function AdminDashboard() {
       )}
 
       {isLoading ? (
-        <div className="text-zinc-500 text-sm">Loading…</div>
+        <div className="text-muted-foreground text-sm">Loading…</div>
       ) : (
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-          <StatCard icon={Users} label="Owners" value={stats?.owners ?? 0} />
-          <StatCard icon={PawPrint} label="Pets" value={stats?.pets ?? 0} />
-          <StatCard icon={FileText} label="Posts" value={stats?.posts ?? 0} />
-          <StatCard icon={ShieldOff} label="Banned users" value={stats?.bans ?? 0} color="text-red-400" />
-          <StatCard icon={Megaphone} label="Active ads" value={stats?.activeAds ?? 0} color="text-orange-400" />
-          <StatCard icon={Flag} label="Open reports" value={stats?.reports ?? 0} color="text-yellow-400" />
-          <StatCard icon={Activity} label="DAU (today)" value={stats?.dau ?? 0} color="text-emerald-400" />
-          <StatCard icon={CalendarDays} label="MAU (30d)" value={stats?.mau ?? 0} color="text-emerald-400" />
-          <StatCard icon={Ghost} label="Shadowbanned" value={stats?.shadowbans ?? 0} color="text-violet-400" />
-          <StatCard icon={Ban} label="Blacklist entries" value={stats?.blacklistEntries ?? 0} color="text-zinc-300" />
-          <StatCard icon={Clock} label="Verifications open" value={stats?.verificationPending ?? 0} color="text-amber-400" />
-          <StatCard icon={BadgeCheck} label="Verifications closed" value={stats?.verificationClosed ?? 0} color="text-blue-400" />
-        </div>
+        <>
+          {/* Needs attention — the only stats that earn individual weight and
+              real color; color means "act on this", not "posts are orange". */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <AttentionStat icon={Flag} label="Open reports" value={stats?.reports ?? 0} />
+            <AttentionStat icon={Clock} label="Verifications pending" value={stats?.verificationPending ?? 0} />
+          </div>
+
+          {/* Everything else — a flat overview, not a wall of identical cards */}
+          <div className="rounded-xl border border-border bg-card p-5">
+            <h2 className="text-sm font-semibold text-foreground mb-4">Overview</h2>
+            <dl className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-6 gap-y-4">
+              <OverviewStat label="Owners" value={stats?.owners ?? 0} />
+              <OverviewStat label="Pets" value={stats?.pets ?? 0} />
+              <OverviewStat label="Posts" value={stats?.posts ?? 0} />
+              <OverviewStat label="DAU (today)" value={stats?.dau ?? 0} />
+              <OverviewStat label="MAU (30d)" value={stats?.mau ?? 0} />
+              <OverviewStat label="Active ads" value={stats?.activeAds ?? 0} />
+              <OverviewStat label="Banned users" value={stats?.bans ?? 0} />
+              <OverviewStat label="Shadowbanned" value={stats?.shadowbans ?? 0} />
+              <OverviewStat label="Blacklist entries" value={stats?.blacklistEntries ?? 0} />
+              <OverviewStat label="Verifications closed" value={stats?.verificationClosed ?? 0} />
+            </dl>
+          </div>
+        </>
       )}
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        <div className="rounded-xl border border-zinc-800 bg-zinc-900 p-5">
-          <div className="flex items-center justify-between mb-4">
-            <div>
-              <h2 className="text-sm font-semibold text-zinc-100">Posts over time</h2>
-              <p className="text-xs text-zinc-500 mt-0.5">New posts per {postsGranularity}</p>
-            </div>
-            <GranularityToggle value={postsGranularity} onChange={setPostsGranularity} />
-          </div>
-          <TimeSeriesChart
-            data={postsOverTime ?? []}
-            granularity={postsGranularity}
-            variant="bar"
-            valueLabel="posts"
-          />
-        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle>Posts over time</CardTitle>
+            <CardDescription>New posts per {postsGranularity}</CardDescription>
+            <CardAction>
+              <GranularityToggle value={postsGranularity} onChange={setPostsGranularity} />
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <TimeSeriesChart
+              data={postsOverTime ?? []}
+              granularity={postsGranularity}
+              variant="bar"
+              valueLabel="posts"
+            />
+          </CardContent>
+        </Card>
 
-        <div className="rounded-xl border border-zinc-800 bg-zinc-900 p-5">
-          <div className="flex items-center justify-between mb-4">
-            <div>
-              <h2 className="text-sm font-semibold text-zinc-100">Owner growth</h2>
-              <p className="text-xs text-zinc-500 mt-0.5">Total registered owners</p>
-            </div>
-            <GranularityToggle value={ownerGranularity} onChange={setOwnerGranularity} />
-          </div>
-          <TimeSeriesChart
-            data={ownerGrowth ?? []}
-            granularity={ownerGranularity}
-            variant="line"
-            valueLabel="owners"
-          />
-        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle>Owner growth</CardTitle>
+            <CardDescription>Total registered owners</CardDescription>
+            <CardAction>
+              <GranularityToggle value={ownerGranularity} onChange={setOwnerGranularity} />
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <TimeSeriesChart
+              data={ownerGrowth ?? []}
+              granularity={ownerGranularity}
+              variant="line"
+              valueLabel="owners"
+            />
+          </CardContent>
+        </Card>
 
-        <div className="rounded-xl border border-zinc-800 bg-zinc-900 p-5">
-          <div className="flex items-center justify-between mb-4">
-            <div>
-              <h2 className="text-sm font-semibold text-zinc-100">Visits over time</h2>
-              <p className="text-xs text-zinc-500 mt-0.5">Unique active owners per {visitsGranularity}</p>
-            </div>
-            <GranularityToggle value={visitsGranularity} onChange={setVisitsGranularity} />
-          </div>
-          <TimeSeriesChart
-            data={visitsOverTime ?? []}
-            granularity={visitsGranularity}
-            variant="bar"
-            valueLabel="visits"
-          />
-        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle>Visits over time</CardTitle>
+            <CardDescription>Unique active owners per {visitsGranularity}</CardDescription>
+            <CardAction>
+              <GranularityToggle value={visitsGranularity} onChange={setVisitsGranularity} />
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <TimeSeriesChart
+              data={visitsOverTime ?? []}
+              granularity={visitsGranularity}
+              variant="bar"
+              valueLabel="visits"
+            />
+          </CardContent>
+        </Card>
 
-        <div className="rounded-xl border border-zinc-800 bg-zinc-900 p-5">
-          <div className="flex items-center justify-between mb-4">
-            <div>
-              <h2 className="text-sm font-semibold text-zinc-100">Comments over time</h2>
-              <p className="text-xs text-zinc-500 mt-0.5">New comments per {commentsGranularity}</p>
-            </div>
-            <GranularityToggle value={commentsGranularity} onChange={setCommentsGranularity} />
-          </div>
-          <TimeSeriesChart
-            data={commentsOverTime ?? []}
-            granularity={commentsGranularity}
-            variant="bar"
-            valueLabel="comments"
-          />
-        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle>Comments over time</CardTitle>
+            <CardDescription>New comments per {commentsGranularity}</CardDescription>
+            <CardAction>
+              <GranularityToggle value={commentsGranularity} onChange={setCommentsGranularity} />
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <TimeSeriesChart
+              data={commentsOverTime ?? []}
+              granularity={commentsGranularity}
+              variant="bar"
+              valueLabel="comments"
+            />
+          </CardContent>
+        </Card>
 
-        <div className="rounded-xl border border-zinc-800 bg-zinc-900 p-5">
-          <div className="flex items-center justify-between mb-4">
-            <div>
-              <h2 className="text-sm font-semibold text-zinc-100">Likes over time</h2>
-              <p className="text-xs text-zinc-500 mt-0.5">New reactions per {reactionsGranularity}</p>
-            </div>
-            <GranularityToggle value={reactionsGranularity} onChange={setReactionsGranularity} />
-          </div>
-          <TimeSeriesChart
-            data={reactionsOverTime ?? []}
-            granularity={reactionsGranularity}
-            variant="bar"
-            valueLabel="likes"
-          />
-        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle>Likes over time</CardTitle>
+            <CardDescription>New reactions per {reactionsGranularity}</CardDescription>
+            <CardAction>
+              <GranularityToggle value={reactionsGranularity} onChange={setReactionsGranularity} />
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <TimeSeriesChart
+              data={reactionsOverTime ?? []}
+              granularity={reactionsGranularity}
+              variant="bar"
+              valueLabel="likes"
+            />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );
 }
 
-function StatCard({
+/**
+ * The only stat tiles with individual weight and color — color means
+ * "this needs action" (orange when > 0), not a decorative per-item hue.
+ */
+function AttentionStat({
   icon: Icon,
   label,
   value,
-  color = "text-zinc-100",
 }: {
   icon: React.ElementType;
   label: string;
   value: number;
-  color?: string;
 }) {
+  const needsAttention = value > 0;
   return (
-    <div className="rounded-xl border border-zinc-800 bg-zinc-900 px-5 py-4 flex items-center gap-4">
-      <Icon className={`h-5 w-5 shrink-0 ${color}`} />
+    <div
+      className={`rounded-xl border px-5 py-4 flex items-center gap-4 ${
+        needsAttention ? "border-orange-500/30 bg-orange-500/5" : "border-border bg-card"
+      }`}
+    >
+      <Icon className={`h-5 w-5 shrink-0 ${needsAttention ? "text-orange-400" : "text-muted-foreground"}`} />
       <div>
-        <p className={`text-2xl font-bold ${color}`}>{value.toLocaleString()}</p>
-        <p className="text-xs text-zinc-500 mt-0.5">{label}</p>
+        <p className={`text-2xl font-bold ${needsAttention ? "text-orange-400" : "text-foreground"}`}>
+          {value.toLocaleString()}
+        </p>
+        <p className="text-xs text-muted-foreground mt-0.5">{label}</p>
       </div>
     </div>
   );
 }
+
+/** Everything else — a plain label/value pair, no per-item card chrome. */
+function OverviewStat({ label, value }: { label: string; value: number }) {
+  return (
+    <div>
+      <dt className="text-xs text-muted-foreground">{label}</dt>
+      <dd className="text-lg font-semibold text-foreground mt-0.5">{value.toLocaleString()}</dd>
+    </div>
+  );
+}
diff --git a/src/components/admin/AdminMobileNav.tsx b/src/components/admin/AdminMobileNav.tsx
index af84685..70fcefc 100644
--- a/src/components/admin/AdminMobileNav.tsx
+++ b/src/components/admin/AdminMobileNav.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { Menu, ArrowLeft } from "lucide-react";
 import {
   Sheet,
@@ -14,21 +15,26 @@ import {
 import { Button } from "@/components/ui/button";
 
 interface AdminMobileNavProps {
+  base: string;
   nav: { href: string; label: string; icon: React.ReactNode }[];
 }
 
 /**
  * Mobile topbar + slide-in nav drawer for the admin panel — the desktop
  * <aside> sidebar in layout.tsx is hidden below md: and replaced by this.
+ * Topbar shows the current page's own name (there's no permanent sidebar
+ * to read that from on mobile) instead of a static "PawFeed Admin" label.
  */
-export function AdminMobileNav({ nav }: AdminMobileNavProps) {
+export function AdminMobileNav({ base, nav }: AdminMobileNavProps) {
   const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+
+  const isActive = (href: string) => (href === base ? pathname === base : pathname.startsWith(href));
+  const currentLabel = nav.find((item) => isActive(item.href))?.label ?? "Admin";
 
   return (
-    <div className="md:hidden sticky top-0 z-40 flex items-center justify-between gap-2 border-b border-zinc-800 bg-zinc-950 px-4 py-3">
-      <p className="text-xs font-semibold text-zinc-500 uppercase tracking-widest">
-        PawFeed Admin
-      </p>
+    <div className="md:hidden sticky top-0 z-40 flex items-center justify-between gap-2 border-b border-border bg-background px-4 py-3">
+      <p className="text-sm font-semibold text-foreground">{currentLabel}</p>
       <Sheet open={open} onOpenChange={setOpen}>
         <SheetTrigger render={<Button variant="ghost" size="icon-sm" />}>
           <Menu className="h-5 w-5" />
@@ -36,12 +42,10 @@ export function AdminMobileNav({ nav }: AdminMobileNavProps) {
         </SheetTrigger>
         <SheetContent
           side="left"
-          className="flex flex-col gap-1 border-zinc-800 bg-zinc-950 py-6 px-4 text-zinc-100"
+          className="flex flex-col gap-1 border-border bg-background py-6 px-4 text-foreground"
         >
           <SheetHeader className="p-0 mb-3">
-            <SheetTitle className="text-xs font-semibold text-zinc-500 uppercase tracking-widest">
-              PawFeed Admin
-            </SheetTitle>
+            <SheetTitle className="sr-only">Admin-Navigation</SheetTitle>
           </SheetHeader>
           {nav.map(({ href, label, icon }) => (
             <SheetClose
@@ -49,7 +53,12 @@ export function AdminMobileNav({ nav }: AdminMobileNavProps) {
               render={
                 <Link
                   href={href}
-                  className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100 transition-colors"
+                  aria-current={isActive(href) ? "page" : undefined}
+                  className={`flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-colors ${
+                    isActive(href)
+                      ? "bg-orange-500/10 text-orange-400"
+                      : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                  }`}
                 />
               }
             >
@@ -57,12 +66,12 @@ export function AdminMobileNav({ nav }: AdminMobileNavProps) {
               {label}
             </SheetClose>
           ))}
-          <div className="mt-auto pt-3 border-t border-zinc-800">
+          <div className="mt-auto pt-3 border-t border-border">
             <SheetClose
               render={
                 <Link
                   href="/feed"
-                  className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100 transition-colors"
+                  className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
                 />
               }
             >
diff --git a/src/components/admin/AdminSidebarNav.tsx b/src/components/admin/AdminSidebarNav.tsx
new file mode 100644
index 0000000..ff15abe
--- /dev/null
+++ b/src/components/admin/AdminSidebarNav.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+interface AdminSidebarNavProps {
+  base: string;
+  nav: { href: string; label: string; icon: React.ReactNode }[];
+}
+
+/**
+ * Desktop admin sidebar nav — highlights the current page so a moderator
+ * always knows where they are. Dashboard (href === base) only lights up on
+ * an exact match; every other item lights up for itself and its sub-routes
+ * (e.g. a future /users/[id] detail page still highlights "Users").
+ */
+export function AdminSidebarNav({ base, nav }: AdminSidebarNavProps) {
+  const pathname = usePathname();
+
+  return (
+    <>
+      {nav.map(({ href, label, icon }) => {
+        const isActive = href === base ? pathname === base : pathname.startsWith(href);
+        return (
+          <Link
+            key={href}
+            href={href}
+            aria-current={isActive ? "page" : undefined}
+            className={`flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-colors ${
+              isActive
+                ? "bg-orange-500/10 text-orange-400"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground"
+            }`}
+          >
+            {icon}
+            {label}
+          </Link>
+        );
+      })}
+    </>
+  );
+}
diff --git a/src/components/admin/GranularityToggle.tsx b/src/components/admin/GranularityToggle.tsx
index 43ada08..fa25054 100644
--- a/src/components/admin/GranularityToggle.tsx
+++ b/src/components/admin/GranularityToggle.tsx
@@ -16,7 +16,7 @@ export function GranularityToggle({
   onChange: (g: Granularity) => void;
 }) {
   return (
-    <div className="flex items-center gap-1 bg-zinc-950 border border-zinc-800 p-0.5 rounded-lg">
+    <div className="flex items-center gap-1 bg-background border border-border p-0.5 rounded-lg">
       {OPTIONS.map((opt) => (
         <button
           key={opt.value}
@@ -24,8 +24,8 @@ export function GranularityToggle({
           onClick={() => onChange(opt.value)}
           className={`px-2.5 py-1 rounded-md text-xs font-medium transition-colors ${
             value === opt.value
-              ? "bg-zinc-800 text-zinc-100"
-              : "text-zinc-500 hover:text-zinc-300"
+              ? "bg-muted text-foreground"
+              : "text-muted-foreground hover:text-foreground"
           }`}
         >
           {opt.label}
diff --git a/src/components/admin/TimeSeriesChart.tsx b/src/components/admin/TimeSeriesChart.tsx
index 1a43981..c6a86f7 100644
--- a/src/components/admin/TimeSeriesChart.tsx
+++ b/src/components/admin/TimeSeriesChart.tsx
@@ -48,7 +48,7 @@ export function TimeSeriesChart({
   const [hoverIdx, setHoverIdx] = useState<number | null>(null);
 
   if (data.length === 0) {
-    return <div className="h-[220px] flex items-center justify-center text-sm text-zinc-600">No data yet</div>;
+    return <div className="h-[220px] flex items-center justify-center text-sm text-muted-foreground">No data yet</div>;
   }
 
   const maxV = Math.max(...data.map((d) => d.value), 1);