adam/proposal-system
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/proposal-system.git synced 2026-09-30 06:33:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Consolidate hardcoded colors in Topbar and Sidebar to match refined palette

Browse source
This commit is contained in:
Adam Moussa 2026-05-22 18:07:28 -04:00
parent 837aaa3db3
commit b43bb64fff
2 changed files with 35 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
web/src/components/Sidebar.tsx
View file

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

8
web/src/components/Topbar.tsx
View file

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