adam/proposal-system
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/proposal-system.git synced 2026-10-02 01:23: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 }} /> <Toolbar sx={{ minHeight: 64 }} />
<Box sx={{ overflow: 'auto', flexGrow: 1, pt: 1 }}> <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 && ( {isAdmin && (
<> <>
<Typography <Typography
@ -81,7 +108,7 @@ export default function Sidebar() {
fontWeight: 600, fontWeight: 600,
letterSpacing: '1.2px', letterSpacing: '1.2px',
textTransform: 'uppercase', textTransform: 'uppercase',
color: '#9aa0a6', color: '#8A949E',
px: 2.5, px: 2.5,
mb: 0.5, mb: 0.5,
}} }}
@ -143,9 +170,9 @@ export default function Sidebar() {
</List> </List>
</Box> </Box>
{user && ( {user && (
<Box sx={{ p: 2, mt: 'auto', borderTop: '1px solid #d9dde0' }}> <Box sx={{ p: 2, mt: 'auto', borderTop: '1px solid #DDE3E8' }}>
<Box sx={{ fontSize: '13px', fontWeight: 500 }}>{user.displayName}</Box> <Box sx={{ fontSize: '13px', fontWeight: 500, color: '#1F2933' }}>{user.displayName}</Box>
<Box sx={{ fontSize: '11px', color: '#9aa0a6' }}>{user.role}</Box> <Box sx={{ fontSize: '11px', color: '#8A949E' }}>{user.role}</Box>
</Box> </Box>
)} )}
</Drawer> </Drawer>

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

@ -31,24 +31,24 @@ export default function Topbar() {
{user && ( {user && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> <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} {initials}
</Avatar> </Avatar>
<Box sx={{ display: 'flex', flexDirection: 'column', lineHeight: 1.2 }}> <Box sx={{ display: 'flex', flexDirection: 'column', lineHeight: 1.2 }}>
<Typography sx={{ fontSize: '13px', fontWeight: 600, color: '#fff' }}> <Typography sx={{ fontSize: '13px', fontWeight: 600, color: '#fff' }}>
{user.displayName} {user.displayName}
</Typography> </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} {user.role}
</Typography> </Typography>
</Box> </Box>
</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 <IconButton
onClick={logout} onClick={logout}
size="small" size="small"
aria-label="Log out" 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" /> <LogoutIcon fontSize="small" />
</IconButton> </IconButton>