Oliver/modcomms
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Apply design feedback: dropdowns, analytics, sidebar, logo

Browse source 
- 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>
This commit is contained in:
Vadym Samoilenko 2026-03-03 15:49:31 +00:00
parent c6f7b0d5f1
commit d5eba4c6da
3 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/components/Analytics.tsx
View file

@ -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>

6
frontend/components/Settings.tsx
View file

@ -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>

4
frontend/components/Sidebar.tsx
View file

@ -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}