From c7228c95a267a678695c61a2b74580562c2fe738 Mon Sep 17 00:00:00 2001
From: michael <michael@modernfreedom.com>
Date: Tue, 27 Jan 2026 14:27:51 -0600
Subject: [PATCH] Apply UI audit fixes for Barclays design guidelines
 compliance

- Update font config to prioritize Barclays Effra with Inter fallback
- Add "powered by OLIVER" text to sidebar branding
- Fix sidebar user profile button border radius to consistent 10px
- Update Hero "View Documentation" button to Active Blue outline style
- Remove legacy color definitions from Tailwind config

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/components/Hero.tsx    |  2 +-
 frontend/components/Sidebar.tsx |  5 ++++-
 frontend/index.html             | 12 +++---------
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/frontend/components/Hero.tsx b/frontend/components/Hero.tsx
index b06e25e..a8ea2db 100755
--- a/frontend/components/Hero.tsx
+++ b/frontend/components/Hero.tsx
@@ -49,7 +49,7 @@ export const Hero: React.FC<HeroProps> = ({ onGetStarted }) => {
                         <ArrowRightIcon className="ml-2 h-5 w-5 transform group-hover:translate-x-1 transition-transform" />
                     </button>
                     <button
-                        className="inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-white/5 border-2 border-white/20 rounded-full hover:bg-white/10 transition-all duration-300 backdrop-blur-sm"
+                        className="inline-flex items-center justify-center px-8 py-4 text-base font-bold text-active-blue bg-transparent border-2 border-active-blue rounded-full hover:bg-active-blue hover:text-white transition-all duration-300"
                     >
                         View Documentation
                     </button>
diff --git a/frontend/components/Sidebar.tsx b/frontend/components/Sidebar.tsx
index a5a9578..7a3b6d4 100755
--- a/frontend/components/Sidebar.tsx
+++ b/frontend/components/Sidebar.tsx
@@ -38,6 +38,9 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userNa
                     <span className="text-xs text-electric-violet uppercase tracking-widest font-semibold">
                         Compliance AI
                     </span>
+                    <span className="text-xs text-grey-700 tracking-wider mt-0.5">
+                        powered by <span className="font-bold">OLIVER</span>
+                    </span>
                 </div>
             </div>
 
@@ -76,7 +79,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userNa
             <div className="p-4 border-t border-white/10 bg-primary-blue/80">
                  <button
                     onClick={() => onNavigate('Profile')}
-                    className={`group w-full flex items-center gap-3 p-3 rounded-xl text-left transition-all duration-200 ${
+                    className={`group w-full flex items-center gap-3 p-3 rounded-[10px] text-left transition-all duration-200 ${
                         activeItem === 'Profile'
                         ? 'bg-white/10'
                         : 'hover:bg-white/10'
diff --git a/frontend/index.html b/frontend/index.html
index bac96ea..663ed12 100755
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Barclays Mod Comms</title>
-    <!-- Google Fonts - Inter (Barclays Effra alternative) -->
+    <!-- Google Fonts - Inter as fallback for Barclays Effra (proprietary font not available as web font) -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@@ -15,16 +15,10 @@
         theme: {
           extend: {
             fontFamily: {
-              'sans': ['Inter', 'Arial', 'sans-serif'],
+              // Barclays Effra is the brand font but is proprietary; Inter is the web fallback
+              'sans': ['Barclays Effra', 'Inter', 'Arial', 'sans-serif'],
             },
             colors: {
-              // Legacy colors (kept for backwards compatibility during migration)
-              'brand-dark-blue': '#1A2142',
-              'brand-light-blue': '#00AEEF',
-              'brand-accent': '#006DE3',
-              'brand-gray': '#F6F6F6',
-              'sidebar-bg': '#1A2142',
-
               // Primary Brand Colors
               'primary-blue': '#1A2142',
               'active-blue': '#006DE3',