From 389db73bf56eacb6affdcd8497e65aa799605d47 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 18 Jan 2026 21:09:43 +0100
Subject: [PATCH] fix(analytics-ui): unify branding colors and remove hardcoded
 values

---
 components/ui/DatePicker.tsx | 4 ++--
 styles/globals.css           | 5 +++++
 tailwind.config.ts           | 5 ++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/ui/DatePicker.tsx b/components/ui/DatePicker.tsx
index d691b21..ee551a7 100644
--- a/components/ui/DatePicker.tsx
+++ b/components/ui/DatePicker.tsx
@@ -140,7 +140,7 @@ export default function DatePicker({ isOpen, onClose, onApply, initialRange }: D
                   ${selected 
                     ? 'bg-brand-orange text-white shadow-md shadow-brand-orange/20' 
                     : inRange
-                    ? 'bg-orange-50 dark:bg-orange-900/20 text-brand-orange'
+                    ? 'bg-brand-orange/10 dark:bg-brand-orange/20 text-brand-orange'
                     : 'hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-900 dark:text-white'
                   }
                   ${today && !selected && !inRange ? 'ring-1 ring-brand-orange text-brand-orange' : ''}
@@ -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-xl 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-brand-orange-hover transition-colors"
             >
               Apply
             </button>
diff --git a/styles/globals.css b/styles/globals.css
index e4dfc10..ffe1358 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -4,6 +4,11 @@
 
 @layer base {
   :root {
+    /* * Semantic colors */
+    --color-success: #10B981;
+    --color-warning: #F59E0B;
+    --color-error: #EF4444;
+
     /* * Brand colors - Orange used as accent only */
     --color-brand-orange: #FD5E0F;
     
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 59a52eb..7130733 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,7 +13,10 @@ const config: Config = {
       colors: {
         // * Brand color: Orange (#FD5E0F) - used as accent only
         brand: {
-          orange: '#FD5E0F',
+          orange: {
+            DEFAULT: '#FD5E0F',
+            hover: '#E54E00',
+          },
         },
       },
       fontFamily: {