From d5eba4c6da120c3f98150c0ad2e9f82c1c2ef135 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Tue, 3 Mar 2026 15:49:31 +0000
Subject: [PATCH] Apply design feedback: dropdowns, analytics, sidebar, logo

- Settings: selected dropdown state now shows azure bg with white text
- Analytics stats: icon circle bg changed from white to grey (#EFEFEF)
- Analytics AI summary: uniform border (remove asymmetric left border);
  lightbulb icon sized to match other icons (h-9 w-9)
- Sidebar: active nav item highlight changed from azure to white,
  visually connecting to the white main content area
- Sidebar: logo increased from h-20 to h-28

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/components/Analytics.tsx | 6 +++---
 frontend/components/Settings.tsx  | 6 +++---
 frontend/components/Sidebar.tsx   | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/components/Analytics.tsx b/frontend/components/Analytics.tsx
index 64fe201..f82503b 100755
--- a/frontend/components/Analytics.tsx
+++ b/frontend/components/Analytics.tsx
@@ -93,7 +93,7 @@ export const Analytics: React.FC<{ agencyId?: string; isAdmin?: boolean }> = ({
                         const Icon = stat.icon;
                         return (
                             <div key={stat.name} className="bg-oliver-grey rounded-[10px] p-6 flex items-start border-2 border-grey-300 transition-all hover:shadow-lg">
-                                <div className="p-3 rounded-full bg-white text-oliver-black mr-4 flex-shrink-0">
+                                <div className="p-3 rounded-full bg-oliver-grey text-oliver-black mr-4 flex-shrink-0">
                                     <Icon className="h-9 w-9" />
                                 </div>
                                 <div>
@@ -166,9 +166,9 @@ export const Analytics: React.FC<{ agencyId?: string; isAdmin?: boolean }> = ({
             {/* AI Performance Summary */}
             <section className="mt-10">
                 <h2 className="text-2xl font-semibold text-oliver-black mb-4">AI performance summary</h2>
-                <div className="bg-white border-2 border-oliver-sky border-l-4 text-oliver-black p-6 rounded-[10px] shadow-md flex items-start gap-4" style={{ borderLeftColor: '#5DF5EA' }}>
+                <div className="bg-white border-2 border-oliver-sky text-oliver-black p-6 rounded-[10px] shadow-md flex items-start gap-4">
                     <div className="flex-shrink-0">
-                        <LightbulbIcon className="h-7 w-7 text-oliver-orange" />
+                        <LightbulbIcon className="h-9 w-9 text-oliver-orange" />
                     </div>
                     <div>
                         <p className="font-semibold text-oliver-black">Key Insight (Last 7 Days):</p>
diff --git a/frontend/components/Settings.tsx b/frontend/components/Settings.tsx
index 7f9814b..a1fb96a 100755
--- a/frontend/components/Settings.tsx
+++ b/frontend/components/Settings.tsx
@@ -398,7 +398,7 @@ export const Settings: React.FC<SettingsProps> = ({
                                     <select
                                         value={selectedChannel}
                                         onChange={(e) => setSelectedChannel(e.target.value)}
-                                        className={`w-full p-2 border-2 rounded-[10px] focus:ring-2 focus:ring-oliver-azure appearance-none text-oliver-black ${selectedChannel ? 'bg-oliver-grey border-oliver-azure' : 'border-oliver-azure'}`}
+                                        className={`w-full p-2 border-2 rounded-[10px] focus:ring-2 focus:ring-oliver-azure appearance-none ${selectedChannel ? 'bg-oliver-azure text-white border-oliver-azure' : 'border-oliver-azure text-oliver-black'}`}
                                     >
                                         <option value="" disabled>Select Channel</option>
                                         {Object.keys(options.channels).map(c => <option key={c} value={c}>{c}</option>)}
@@ -430,7 +430,7 @@ export const Settings: React.FC<SettingsProps> = ({
                                                 setSelectedChannel(e.target.value);
                                                 setSelectedSubChannel('');
                                             }}
-                                            className={`w-full p-2 border-2 rounded-[10px] focus:ring-2 focus:ring-oliver-azure appearance-none text-oliver-black ${selectedChannel ? 'bg-oliver-grey border-oliver-azure' : 'border-oliver-azure'}`}
+                                            className={`w-full p-2 border-2 rounded-[10px] focus:ring-2 focus:ring-oliver-azure appearance-none ${selectedChannel ? 'bg-oliver-azure text-white border-oliver-azure' : 'border-oliver-azure text-oliver-black'}`}
                                         >
                                             <option value="" disabled>Select Channel</option>
                                             {Object.keys(options.channels).map(c => <option key={c} value={c}>{c}</option>)}
@@ -445,7 +445,7 @@ export const Settings: React.FC<SettingsProps> = ({
                                         <select
                                             value={selectedSubChannel}
                                             onChange={(e) => setSelectedSubChannel(e.target.value)}
-                                            className={`w-full p-2 border-2 rounded-[10px] focus:ring-2 focus:ring-oliver-azure appearance-none text-oliver-black disabled:bg-oliver-grey disabled:border-grey-300 ${selectedSubChannel ? 'bg-oliver-grey border-oliver-azure' : 'border-oliver-azure'}`}
+                                            className={`w-full p-2 border-2 rounded-[10px] focus:ring-2 focus:ring-oliver-azure appearance-none disabled:bg-oliver-grey disabled:border-grey-300 disabled:text-oliver-black ${selectedSubChannel ? 'bg-oliver-azure text-white border-oliver-azure' : 'border-oliver-azure text-oliver-black'}`}
                                             disabled={!selectedChannel}
                                         >
                                             <option value="" disabled>Select Sub-Channel</option>
diff --git a/frontend/components/Sidebar.tsx b/frontend/components/Sidebar.tsx
index 758e2fd..20b1d92 100755
--- a/frontend/components/Sidebar.tsx
+++ b/frontend/components/Sidebar.tsx
@@ -38,7 +38,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userNa
         <aside className="w-72 flex-shrink-0 bg-oliver-black text-slate-200 flex flex-col font-sans">
             {/* Brand Header */}
             <div className="py-6 px-8 border-b border-white/10 flex flex-col items-center text-center">
-                <img src="/BAR-ModComms-logo-v4.png" alt="Mod Comms AI" className="h-20 w-auto" />
+                <img src="/BAR-ModComms-logo-v4.png" alt="Mod Comms AI" className="h-28 w-auto" />
             </div>
 
             {/* Navigation */}
@@ -53,7 +53,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userNa
                             onClick={() => onNavigate(item.name)}
                             className={`group w-full flex items-center pl-8 pr-4 py-3.5 text-left text-sm font-medium transition-all duration-300 ease-in-out ${
                                 isActive
-                                ? 'bg-oliver-azure text-white shadow-lg rounded-r-[10px] rounded-l-none'
+                                ? 'bg-white text-oliver-black shadow-lg rounded-r-[10px] rounded-l-none'
                                 : 'text-slate-300 hover:bg-white/10 hover:text-white rounded-[10px]'
                             }`}
                             aria-current={isActive ? 'page' : undefined}