refactor: redesign UI with VoidZero-inspired dark theme

Unify design system across all pages and components with consistent
styling, CSS variables for theming, and simplified layout by removing
the AppBar.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: Boshen

apps/dashboard/src/MinificationBenchmarks.tsx

@@ -4,18 +4,16 @@ import { MinificationStats } from "./components/minification/MinificationStats";
 
 function MinificationBenchmarks() {
   return (
-    <>
-      <main className="max-w-6xl mx-auto px-8 py-8 flex flex-col gap-8">
-        {/* Combined Charts for Each Library - Time and Compression Side by Side */}
-        <div className="flex flex-col gap-8">
-          {libraries.map((library) => (
-            <LibraryBenchmarkCard key={library} library={library} />
-          ))}
-        </div>
+    <main className="px-6 py-6 flex flex-col gap-6">
+      {/* Combined Charts for Each Library */}
+      <div className="flex flex-col gap-6">
+        {libraries.map((library) => (
+          <LibraryBenchmarkCard key={library} library={library} />
+        ))}
+      </div>
 
-        <MinificationStats />
-      </main>
-    </>
+      <MinificationStats />
+    </main>
   );
 }
 

apps/dashboard/src/NpmPackages.tsx

@@ -1,6 +1,5 @@
 import { PackageDownloadsList } from "./components/npm/PackageDownloadsList";
 
-// List of npm packages to display download counts for
 const packages = [
   "vite",
   "vitest",
@@ -16,15 +15,13 @@ const packages = [
 
 function NpmPackages() {
   return (
-    <>
-      <main className="max-w-7xl mx-auto px-8 py-8">
-        <h2 className="mb-6 text-slate-800 dark:text-slate-100 text-3xl font-bold tracking-tight">
-          NPM Package Statistics
-        </h2>
+    <main className="px-6 py-6">
+      <h2 className="mb-6 text-lg font-semibold">
+        NPM Package Statistics
+      </h2>
 
-        <PackageDownloadsList packages={packages} />
-      </main>
-    </>
+      <PackageDownloadsList packages={packages} />
+    </main>
   );
 }
 

apps/dashboard/src/RolldownStats.tsx

@@ -13,9 +13,9 @@ function RolldownStats({ selectedMetric, setSelectedMetric }: RolldownStatsProps
     <>
       <MetricNavigation selectedMetric={selectedMetric} setSelectedMetric={setSelectedMetric} />
 
-      <main className="max-w-6xl mx-auto px-8 py-8 flex flex-col gap-8">
-        <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-8 py-8 rounded-xl shadow-sm">
-          <h2 className="mb-6 text-slate-800 dark:text-slate-100 text-3xl font-bold tracking-tight">
+      <main className="px-6 py-6 flex flex-col gap-6">
+        <div>
+          <h2 className="mb-4 text-lg font-semibold">
             {selectedMetric === "bundleSize" ? "Bundle Size" : "Build Time"}
           </h2>
           {selectedMetric === "bundleSize" ? <BundleSizeChart /> : <BuildTimeChart />}

apps/dashboard/src/components/Layout.tsx

@@ -1,31 +1,21 @@
 import { Outlet } from "react-router-dom";
-import { AppBar } from "./layout/AppBar";
 import { Sidebar } from "./layout/Sidebar";
 import { useSidebar } from "../context/SidebarContext";
 
 function Layout() {
   const { collapsed } = useSidebar();
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/30 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 relative overflow-hidden">
-      {/* Background decorative elements */}
-      <div className="absolute top-0 right-0 w-96 h-96 bg-blue-500/5 dark:bg-blue-500/10 rounded-full blur-3xl"></div>
-      <div className="absolute bottom-0 left-0 w-96 h-96 bg-purple-500/5 dark:bg-purple-500/10 rounded-full blur-3xl"></div>
-
+    <div className="min-h-screen bg-[var(--color-bg)]">
       <Sidebar />
 
       {/* Main Content Area */}
       <div
-        className={`${collapsed ? "lg:pl-20" : "lg:pl-64"} transition-all duration-300 relative z-10`}
+        className={`${collapsed ? "lg:pl-20" : "lg:pl-64"} transition-all duration-200`}
       >
-        <div className="flex flex-col h-screen">
-          <AppBar />
-
-          {/* Page Content */}
-          <main className="flex-1 overflow-auto">
-            <Outlet />
-          </main>
-        </div>
+        <main className="h-screen overflow-auto">
+          <Outlet />
+        </main>
       </div>
     </div>
   );

apps/dashboard/src/components/layout/AppBar.tsx

@@ -71,82 +71,84 @@ export function Sidebar() {
       {/* Mobile Menu Button */}
       <button
         onClick={() => setMobileOpen(!mobileOpen)}
-        className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-lg bg-white dark:bg-slate-800 shadow-md border border-slate-200 dark:border-slate-700"
+        className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-lg bg-[var(--card-bg)] border border-[var(--color-border)] shadow-sm"
       >
-        {mobileOpen ? <X size={24} /> : <Menu size={24} />}
+        {mobileOpen ? <X size={20} /> : <Menu size={20} />}
       </button>
 
       {/* Mobile Overlay */}
       {mobileOpen && (
         <div
-          className="lg:hidden fixed inset-0 bg-black/50 z-40"
+          className="lg:hidden fixed inset-0 bg-black/40 backdrop-blur-sm z-40"
           onClick={() => setMobileOpen(false)}
         />
       )}
 
       {/* Sidebar */}
       <aside
         className={`
-          fixed top-0 left-0 h-full bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border-r border-slate-200/50 dark:border-slate-700/50 shadow-xl
-          transition-all duration-300 z-40
+          fixed top-0 left-0 h-full bg-[var(--card-bg)] border-r border-[var(--color-border)]
+          transition-all duration-200 z-40
           ${collapsed ? "w-20" : "w-64"}
           ${mobileOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"}
         `}
       >
         {/* Logo Header */}
-        <div className="h-16 flex items-center justify-between px-4 border-b border-slate-200/50 dark:border-slate-700/50 bg-gradient-to-r from-slate-50/50 to-transparent dark:from-slate-800/50">
+        <div className="h-16 flex items-center justify-between px-4 border-b border-[var(--color-border)]">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-gradient-to-br from-blue-500 via-purple-500 to-purple-600 rounded-lg flex items-center justify-center shadow-lg animate-gradient">
-              <BarChart3 size={24} className="text-white" />
+            <div className="w-9 h-9 bg-[var(--color-accent)] rounded-lg flex items-center justify-center">
+              <BarChart3 size={20} className="text-white" />
             </div>
             {!collapsed && (
               <div>
-                <h1 className="font-bold bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">
+                <h1 className="font-semibold text-sm tracking-tight">
                   Vibe
                 </h1>
-                <p className="text-xs text-slate-500 dark:text-slate-400">Dashboard</p>
+                <p className="text-[10px] text-[var(--color-text-muted)]">
+                  Dashboard
+                </p>
               </div>
             )}
           </div>
           <button
             onClick={() => setCollapsed(!collapsed)}
-            className="hidden lg:flex p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-all hover:scale-110"
+            className="hidden lg:flex p-1.5 rounded-md hover:bg-[var(--color-surface)] transition-colors"
           >
             <ChevronLeft
-              size={18}
-              className={`text-slate-600 dark:text-slate-300 transition-transform ${collapsed ? "rotate-180" : ""}`}
+              size={16}
+              className={`text-[var(--color-text-muted)] transition-transform duration-200 ${collapsed ? "rotate-180" : ""}`}
             />
           </button>
         </div>
 
         {/* Navigation */}
         <nav className="flex-1 px-3 py-4">
-          <ul className="space-y-1">
+          <ul className="space-y-0.5">
             {navItems.map((item) => (
               <li key={item.path}>
                 <Link
                   to={item.path}
                   onClick={() => setMobileOpen(false)}
                   className={`
-                    flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 relative overflow-hidden group
+                    flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-150 relative
                     ${
                       isActive(item.path)
-                        ? "bg-gradient-to-r from-blue-500/10 to-purple-500/10 dark:from-blue-500/20 dark:to-purple-500/20 text-blue-600 dark:text-blue-400 font-medium shadow-sm"
-                        : "text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 hover:scale-105"
+                        ? "bg-[var(--color-accent-soft)] text-[var(--color-accent)] font-medium"
+                        : "text-[var(--color-text-muted)] hover:bg-[var(--color-surface)] hover:text-[var(--color-text)]"
                     }
                     ${collapsed ? "justify-center" : ""}
                   `}
                   title={collapsed ? item.label : undefined}
                 >
                   {isActive(item.path) && (
-                    <span className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-500 to-purple-600 rounded-r-full"></span>
+                    <span className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-[var(--color-accent)] rounded-r-full"></span>
                   )}
                   <span className="flex-shrink-0">{item.icon}</span>
                   {!collapsed && (
                     <>
-                      <span className="flex-1">{item.label}</span>
+                      <span className="flex-1 text-sm">{item.label}</span>
                       {item.badge && (
-                        <span className="px-2 py-0.5 text-xs bg-slate-200 dark:bg-slate-700 rounded-full">
+                        <span className="px-2 py-0.5 text-[10px] font-mono bg-[var(--color-surface)] border border-[var(--color-border)] rounded">
                           {item.badge}
                         </span>
                       )}
@@ -158,7 +160,14 @@ export function Sidebar() {
           </ul>
         </nav>
 
-        {/* Bottom area - can be used for other actions in future */}
+        {/* Version indicator */}
+        {!collapsed && (
+          <div className="px-4 py-3 border-t border-[var(--color-border)]">
+            <span className="text-[10px] text-[var(--color-text-muted)]">
+              v0.1.0
+            </span>
+          </div>
+        )}
       </aside>
     </>
   );

apps/dashboard/src/components/layout/Sidebar.tsx

@@ -11,22 +11,24 @@ export function LibraryBenchmarkCard({ library }: LibraryBenchmarkCardProps) {
   const compressionData = getLibraryData(library, "compression");
 
   return (
-    <div className="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl px-6 py-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-0.5">
-      <h3 className="mb-4 text-xl font-bold text-slate-800 dark:text-slate-100 capitalize text-center pb-2 border-b-2 border-slate-200 dark:border-slate-700">
-        {library}
-      </h3>
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-4">
+    <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] overflow-hidden">
+      <div className="px-5 py-3 border-b border-[var(--color-border)]">
+        <h3 className="text-sm font-semibold capitalize">
+          {library}
+        </h3>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-px bg-[var(--color-border)]">
         {/* Left column - Minification Time */}
-        <div className="bg-slate-50 dark:bg-slate-900 border border-gray-200 dark:border-slate-700 rounded-lg p-4">
-          <h4 className="mb-4 text-base font-medium text-gray-700 dark:text-gray-300 text-center pb-2 border-b border-gray-200 dark:border-gray-700">
+        <div className="p-5 bg-[var(--color-bg-elevated)]">
+          <h4 className="mb-4 text-xs font-medium text-[var(--color-text-muted)] uppercase tracking-wider">
             Minification Time
           </h4>
           <MinificationTimeChart data={timeData} />
         </div>
 
         {/* Right column - Compression Ratio */}
-        <div className="bg-slate-50 dark:bg-slate-900 border border-gray-200 dark:border-slate-700 rounded-lg p-4">
-          <h4 className="mb-4 text-base font-medium text-gray-700 dark:text-gray-300 text-center pb-2 border-b border-gray-200 dark:border-gray-700">
+        <div className="p-5 bg-[var(--color-bg-elevated)]">
+          <h4 className="mb-4 text-xs font-medium text-[var(--color-text-muted)] uppercase tracking-wider">
             Compression Ratio
           </h4>
           <CompressionRatioChart data={compressionData} />