From b43bb64fffa1c84a8f93dfd33c66e0b255de9832 Mon Sep 17 00:00:00 2001
From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com>
Date: Fri, 22 May 2026 18:07:28 -0400
Subject: [PATCH] Consolidate hardcoded colors in Topbar and Sidebar to match
 refined palette

---
 web/src/components/Sidebar.tsx | 35 ++++++++++++++++++++++++++++++----
 web/src/components/Topbar.tsx  |  8 ++++----
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index e0a45e5..639b6f9 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -73,6 +73,33 @@ export default function Sidebar() {
     >
       <Toolbar sx={{ minHeight: 64 }} />
       <Box sx={{ overflow: 'auto', flexGrow: 1, pt: 1 }}>
+        <Typography
+          sx={{
+            fontSize: '11px',
+            fontWeight: 600,
+            letterSpacing: '1.2px',
+            textTransform: 'uppercase',
+            color: '#8A949E',
+            px: 2.5,
+            mb: 0.5,
+          }}
+        >
+          Proposals
+        </Typography>
+        <List disablePadding>
+          {navItems.map((item) => (
+            <ListItemButton
+              key={item.path}
+              selected={isNavActive(location.pathname, item.path)}
+              onClick={() => navigate(item.path)}
+              sx={{ py: 1 }}
+            >
+              <ListItemIcon>{item.icon}</ListItemIcon>
+              <ListItemText primary={item.label} primaryTypographyProps={{ fontSize: '13px' }} />
+            </ListItemButton>
+          ))}
+        </List>
+
         {isAdmin && (
           <>
             <Typography
@@ -81,7 +108,7 @@ export default function Sidebar() {
                 fontWeight: 600,
                 letterSpacing: '1.2px',
                 textTransform: 'uppercase',
-                color: '#9aa0a6',
+                color: '#8A949E',
                 px: 2.5,
                 mb: 0.5,
               }}
@@ -143,9 +170,9 @@ export default function Sidebar() {
         </List>
       </Box>
       {user && (
-        <Box sx={{ p: 2, mt: 'auto', borderTop: '1px solid #d9dde0' }}>
-          <Box sx={{ fontSize: '13px', fontWeight: 500 }}>{user.displayName}</Box>
-          <Box sx={{ fontSize: '11px', color: '#9aa0a6' }}>{user.role}</Box>
+        <Box sx={{ p: 2, mt: 'auto', borderTop: '1px solid #DDE3E8' }}>
+          <Box sx={{ fontSize: '13px', fontWeight: 500, color: '#1F2933' }}>{user.displayName}</Box>
+          <Box sx={{ fontSize: '11px', color: '#8A949E' }}>{user.role}</Box>
         </Box>
       )}
     </Drawer>
diff --git a/web/src/components/Topbar.tsx b/web/src/components/Topbar.tsx
index d0c4e47..b9b6bd6 100644
--- a/web/src/components/Topbar.tsx
+++ b/web/src/components/Topbar.tsx
@@ -31,24 +31,24 @@ export default function Topbar() {
         {user && (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-              <Avatar sx={{ width: 32, height: 32, bgcolor: '#1fa8de', fontSize: 12, fontWeight: 600 }}>
+              <Avatar sx={{ width: 32, height: 32, bgcolor: '#1B789B', fontSize: 12, fontWeight: 600 }}>
                 {initials}
               </Avatar>
               <Box sx={{ display: 'flex', flexDirection: 'column', lineHeight: 1.2 }}>
                 <Typography sx={{ fontSize: '13px', fontWeight: 600, color: '#fff' }}>
                   {user.displayName}
                 </Typography>
-                <Typography sx={{ fontSize: '11px', color: 'rgba(255,255,255,0.5)' }}>
+                <Typography sx={{ fontSize: '11px', color: 'rgba(255,255,255,0.55)' }}>
                   {user.role}
                 </Typography>
               </Box>
             </Box>
-            <Box sx={{ width: '1px', height: 24, bgcolor: 'rgba(255,255,255,0.15)', mx: 0.5 }} />
+            <Box sx={{ width: '1px', height: 24, bgcolor: 'rgba(255,255,255,0.12)', mx: 0.5 }} />
             <IconButton
               onClick={logout}
               size="small"
               aria-label="Log out"
-              sx={{ color: 'rgba(255,255,255,0.5)', '&:hover': { color: '#ff6b6b', bgcolor: 'rgba(255,100,100,0.1)' } }}
+              sx={{ color: 'rgba(255,255,255,0.55)', '&:hover': { color: '#ff6b6b', bgcolor: 'rgba(255,100,100,0.1)' } }}
             >
               <LogoutIcon fontSize="small" />
             </IconButton>