From e7a123cea2c9e5f1229a10ccae5f01f2acf309d1 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 18 Jan 2026 19:37:36 +0100
Subject: [PATCH] fix(analytics-ui): standardize branding, colors, and border
 radii

---
 app/page.tsx                      |  6 +++---
 components/dashboard/Chart.tsx    | 32 ++++++++++++++++++++-----------
 components/dashboard/WorldMap.tsx |  4 ++--
 components/ui/DatePicker.tsx      |  2 +-
 styles/globals.css                | 10 ++++++++++
 5 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index eddb245..ae56543 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -57,7 +57,7 @@ export default function HomePage() {
 
           {/* Features Grid */}
           <div className="grid md:grid-cols-3 gap-8 pt-16 text-left">
-            <div className="p-6 rounded-2xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
+            <div className="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
               <div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mb-4 text-brand-orange">
                 <LockClosedIcon className="w-6 h-6" />
               </div>
@@ -66,7 +66,7 @@ export default function HomePage() {
                 We don't track personal data. No IP addresses, no fingerprints, no cookies.
               </p>
             </div>
-            <div className="p-6 rounded-2xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
+            <div className="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
               <div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mb-4 text-brand-orange">
                 <BarChartIcon className="w-6 h-6" />
               </div>
@@ -75,7 +75,7 @@ export default function HomePage() {
                 Get the metrics that matter without the clutter. Page views, visitors, and sources.
               </p>
             </div>
-            <div className="p-6 rounded-2xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
+            <div className="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
               <div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mb-4 text-brand-orange">
                 <LightningBoltIcon className="w-6 h-6" />
               </div>
diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 82e42c6..f1106a1 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -5,6 +5,16 @@ import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContai
 import { formatNumber, formatDuration } from '@/lib/utils/format'
 import { ArrowTopRightIcon, ArrowBottomRightIcon, DownloadIcon } from '@radix-ui/react-icons'
 
+const COLORS = {
+  brand: '#FD5E0F',
+  success: '#10B981', // Emerald-500
+  danger: '#EF4444',  // Red-500
+  border: '#E5E5E5',  // Neutral-200
+  text: '#171717',    // Neutral-900
+  textMuted: '#737373', // Neutral-500
+  axis: '#A3A3A3',    // Neutral-400
+}
+
 interface DailyStat {
   date: string
   pageviews: number
@@ -74,7 +84,7 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
       label: 'Unique Visitors',
       value: formatNumber(stats.visitors),
       trend: calculateTrend(stats.visitors, prevStats?.visitors),
-      color: '#FD5E0F', // Brand Orange
+      color: COLORS.brand,
       invertTrend: false,
     },
     {
@@ -82,7 +92,7 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
       label: 'Total Pageviews',
       value: formatNumber(stats.pageviews),
       trend: calculateTrend(stats.pageviews, prevStats?.pageviews),
-      color: '#FD5E0F', // Orange
+      color: COLORS.brand,
       invertTrend: false,
     },
     {
@@ -90,7 +100,7 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
       label: 'Bounce Rate',
       value: `${Math.round(stats.bounce_rate)}%`,
       trend: calculateTrend(stats.bounce_rate, prevStats?.bounce_rate),
-      color: '#EF4444', // Red
+      color: COLORS.danger,
       invertTrend: true, // Lower bounce rate is better
     },
     {
@@ -98,7 +108,7 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
       label: 'Visit Duration',
       value: formatDuration(stats.avg_duration),
       trend: calculateTrend(stats.avg_duration, prevStats?.avg_duration),
-      color: '#10B981', // Emerald
+      color: COLORS.success,
       invertTrend: false,
     },
   ] as const
@@ -175,17 +185,17 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
                   <stop offset="95%" stopColor={activeMetric.color} stopOpacity={0}/>
                 </linearGradient>
               </defs>
-              <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E5E5E5" />
+              <CartesianGrid strokeDasharray="3 3" vertical={false} stroke={COLORS.border} />
               <XAxis 
                 dataKey="date" 
-                stroke="#A3A3A3" 
+                stroke={COLORS.axis} 
                 fontSize={12} 
                 tickLine={false} 
                 axisLine={false}
                 minTickGap={30}
               />
               <YAxis 
-                stroke="#A3A3A3" 
+                stroke={COLORS.axis} 
                 fontSize={12} 
                 tickLine={false} 
                 axisLine={false}
@@ -194,13 +204,13 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
               <Tooltip
                 contentStyle={{
                   backgroundColor: 'rgba(255, 255, 255, 0.95)',
-                  border: '1px solid #E5E5E5',
+                  border: `1px solid ${COLORS.border}`,
                   borderRadius: '8px',
                   boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
                   padding: '12px'
                 }}
-                itemStyle={{ color: '#171717', fontWeight: 600, fontSize: '14px' }}
-                labelStyle={{ color: '#737373', marginBottom: '8px', fontSize: '12px' }}
+                itemStyle={{ color: COLORS.text, fontWeight: 600, fontSize: '14px' }}
+                labelStyle={{ color: COLORS.textMuted, marginBottom: '8px', fontSize: '12px' }}
                 cursor={{ stroke: activeMetric.color, strokeDasharray: '4 4' }}
               />
               
@@ -209,7 +219,7 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
                 <Area
                   type="monotone"
                   dataKey={metric === 'visitors' ? 'prevVisitors' : 'prevPageviews'}
-                  stroke="#A3A3A3"
+                  stroke={COLORS.axis}
                   strokeWidth={2}
                   strokeDasharray="4 4"
                   fill="none"
diff --git a/components/dashboard/WorldMap.tsx b/components/dashboard/WorldMap.tsx
index a854c59..c076eea 100644
--- a/components/dashboard/WorldMap.tsx
+++ b/components/dashboard/WorldMap.tsx
@@ -35,8 +35,8 @@ const WorldMap = ({ data }: WorldMapProps) => {
 
   // Plausible-like colors based on provided SVG snippet
   const isDark = resolvedTheme === 'dark'
-  const defaultFill = isDark ? "#2d2d2d" : "#F2F2F2" // Approx gray-750 / gray-150
-  const defaultStroke = isDark ? "#171717" : "#FFFFFF" // gray-900 / white
+  const defaultFill = isDark ? "#262626" : "#f5f5f5" // neutral-800 / neutral-100
+  const defaultStroke = isDark ? "#171717" : "#ffffff" // neutral-900 / white
   const brandOrange = "#FD5E0F"
   
   return (
diff --git a/components/ui/DatePicker.tsx b/components/ui/DatePicker.tsx
index 3253e57..d691b21 100644
--- a/components/ui/DatePicker.tsx
+++ b/components/ui/DatePicker.tsx
@@ -171,7 +171,7 @@ export default function DatePicker({ isOpen, onClose, onApply, initialRange }: D
             </button>
             <button
               onClick={() => onApply({ start: formatDate(startDate), end: formatDate(endDate) })}
-              className="px-4 py-2 text-sm font-medium bg-brand-orange text-white rounded-lg shadow-sm hover:bg-orange-600 transition-colors"
+              className="px-4 py-2 text-sm font-medium bg-brand-orange text-white rounded-xl shadow-sm hover:bg-orange-600 transition-colors"
             >
               Apply
             </button>
diff --git a/styles/globals.css b/styles/globals.css
index 2162389..e4dfc10 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -36,6 +36,16 @@
   body {
     @apply bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-50 transition-colors duration-300 ease-in-out;
     font-family: var(--font-plus-jakarta-sans), system-ui, sans-serif;
+    background-image: 
+      radial-gradient(at 0% 0%, hsla(20, 98%, 52%, 0.03) 0px, transparent 50%),
+      radial-gradient(at 100% 100%, hsla(20, 98%, 52%, 0.03) 0px, transparent 50%);
+    background-attachment: fixed;
+  }
+  
+  .dark body {
+    background-image: 
+      radial-gradient(at 0% 0%, hsla(20, 98%, 52%, 0.05) 0px, transparent 50%),
+      radial-gradient(at 100% 100%, hsla(20, 98%, 52%, 0.05) 0px, transparent 50%);
   }
 }