mirror of
https://github.com/Sea-Haven-Industries/proposal-system.git
synced 2026-09-30 06:33:13 +00:00
Adam Moussa
f502f8afc2
Re-theme the MUI app from teal (#0B5A73) to the Sea Haven Ops neutral-navy structure (#111827) with action-blue (#2563EB) as the sole brand accent, driven through the theme tokens so all screens update consistently. Cards become border-driven (no shadow); table headers gray-50; status/priority chips aligned to design-system token values. Layout fixes: - Topbar: square bottom corners (was inheriting MuiPaper radius) - Sidebar: remove duplicate user tag (already shown in topbar) - Main: drop redundant ml that double-counted the persistent drawer width - New Proposal form: center the constrained container (mx: auto)
84 lines
3 KiB
TypeScript
84 lines
3 KiB
TypeScript
import { useDispatch } from 'react-redux';
|
|
import { AppBar, Toolbar, IconButton, Typography, Box, Avatar } from '@mui/material';
|
|
import MenuIcon from '@mui/icons-material/Menu';
|
|
import LogoutIcon from '@mui/icons-material/Logout';
|
|
import { toggleSidebar } from '../app/slices/uiSlice';
|
|
import { useAuth } from '../hooks/useAuth';
|
|
|
|
export default function Topbar() {
|
|
const dispatch = useDispatch();
|
|
const { user, logout } = useAuth();
|
|
|
|
const initials = user?.displayName
|
|
? user.displayName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
|
|
: '';
|
|
|
|
const isDevMode = !import.meta.env.VITE_COGNITO_DOMAIN;
|
|
|
|
return (
|
|
<AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1, height: 64 }}>
|
|
<Toolbar sx={{ height: 64, minHeight: 64 }}>
|
|
<IconButton
|
|
color="inherit"
|
|
edge="start"
|
|
onClick={() => dispatch(toggleSidebar())}
|
|
sx={{ mr: 2 }}
|
|
aria-label="Toggle sidebar menu"
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
<Typography variant="h6" noWrap sx={{ flexGrow: 1, fontWeight: 600 }}>
|
|
Proposal System
|
|
{isDevMode && (
|
|
<Box
|
|
component="span"
|
|
sx={{
|
|
background: '#FEF3C7',
|
|
color: '#92400E',
|
|
border: '1px solid #FDE68A',
|
|
height: 22,
|
|
borderRadius: '999px',
|
|
fontSize: '11px',
|
|
fontWeight: 700,
|
|
pl: '8px',
|
|
pr: '8px',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
ml: '12px',
|
|
verticalAlign: 'middle',
|
|
}}
|
|
>
|
|
DEV
|
|
</Box>
|
|
)}
|
|
</Typography>
|
|
{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: '#2563EB', 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.55)' }}>
|
|
{user.role}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
<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.55)', '&:hover': { color: '#ff6b6b', bgcolor: 'rgba(255,100,100,0.1)' } }}
|
|
>
|
|
<LogoutIcon fontSize="small" />
|
|
</IconButton>
|
|
</Box>
|
|
)}
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
}
|