login: audit styling — gradient, card, button colors, descriptions

This commit is contained in:
Adam Moussa 2026-05-22 18:54:08 -04:00
parent a6091344da
commit cfee6690c0

View file

@ -68,11 +68,11 @@ export default function LoginPage() {
alignItems: 'center', alignItems: 'center',
justifyContent: 'flex-start', justifyContent: 'flex-start',
pt: '7%', pt: '7%',
bgcolor: '#1F2933', background: 'linear-gradient(135deg, #073B4C 0%, #172554 100%)',
}} }}
> >
<Box sx={{ width: '100%', maxWidth: 400, mx: 2 }}> <Box sx={{ width: '100%', maxWidth: 420, mx: 2 }}>
<Card sx={{ borderRadius: '8px', boxShadow: '0 0 10px rgba(0,0,0,0.3)', border: 'none' }}> <Card sx={{ borderRadius: '10px', boxShadow: '0 12px 32px rgba(15,23,42,0.24)', border: 'none' }}>
<Box <Box
sx={{ sx={{
height: 100, height: 100,
@ -80,7 +80,7 @@ export default function LoginPage() {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: '#fff', bgcolor: '#fff',
borderBottom: '1px solid #b8b5b5', borderBottom: '1px solid #D6E0EA',
px: 3, px: 3,
}} }}
> >
@ -95,7 +95,7 @@ export default function LoginPage() {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderBottom: '1px solid #b8b5b5', borderBottom: '1px solid #D6E0EA',
}} }}
> >
<Typography sx={{ fontSize: '14px', fontWeight: 700, color: '#fff' }}> <Typography sx={{ fontSize: '14px', fontWeight: 700, color: '#fff' }}>
@ -121,7 +121,7 @@ export default function LoginPage() {
startIcon={<AdminPanelSettingsIcon />} startIcon={<AdminPanelSettingsIcon />}
onClick={() => handleDevLogin('SysAdmin')} onClick={() => handleDevLogin('SysAdmin')}
disabled={loading} disabled={loading}
sx={{ py: 1.5, bgcolor: '#0B4F6C', '&:hover': { bgcolor: '#07384D' } }} sx={{ py: 1.5, height: 64, borderRadius: '8px', bgcolor: '#0B5A73', '&:hover': { bgcolor: '#084A5F' } }}
> >
<Box sx={{ textAlign: 'left', flex: 1 }}> <Box sx={{ textAlign: 'left', flex: 1 }}>
<Box>SysAdmin</Box> <Box>SysAdmin</Box>
@ -135,11 +135,11 @@ export default function LoginPage() {
startIcon={<EngineeringIcon />} startIcon={<EngineeringIcon />}
onClick={() => handleDevLogin('Admin')} onClick={() => handleDevLogin('Admin')}
disabled={loading} disabled={loading}
sx={{ py: 1.5, bgcolor: '#003A5D', '&:hover': { bgcolor: '#00527d' } }} sx={{ py: 1.5, height: 64, borderRadius: '8px', bgcolor: '#0B5A73', '&:hover': { bgcolor: '#084A5F' } }}
> >
<Box sx={{ textAlign: 'left', flex: 1 }}> <Box sx={{ textAlign: 'left', flex: 1 }}>
<Box>Admin</Box> <Box>Admin</Box>
<Box sx={{ fontSize: '11px', fontWeight: 400, opacity: 0.8 }}>Review and approve proposals</Box> <Box sx={{ fontSize: '11px', fontWeight: 400, opacity: 0.8 }}>Review, price, and approve proposals</Box>
</Box> </Box>
</Button> </Button>
<Button <Button
@ -149,7 +149,7 @@ export default function LoginPage() {
startIcon={<PersonIcon />} startIcon={<PersonIcon />}
onClick={() => handleDevLogin('Dispatcher')} onClick={() => handleDevLogin('Dispatcher')}
disabled={loading} disabled={loading}
sx={{ py: 1.5, bgcolor: '#003A5D', '&:hover': { bgcolor: '#00527d' } }} sx={{ py: 1.5, height: 64, borderRadius: '8px', bgcolor: '#0B5A73', '&:hover': { bgcolor: '#084A5F' } }}
> >
<Box sx={{ textAlign: 'left', flex: 1 }}> <Box sx={{ textAlign: 'left', flex: 1 }}>
<Box>Dispatcher</Box> <Box>Dispatcher</Box>
@ -173,7 +173,7 @@ export default function LoginPage() {
fullWidth fullWidth
startIcon={<GoogleIcon />} startIcon={<GoogleIcon />}
href={buildLoginUrl()} href={buildLoginUrl()}
sx={{ py: 1.5, bgcolor: '#0B4F6C', '&:hover': { bgcolor: '#07384D' } }} sx={{ py: 1.5, height: 64, borderRadius: '8px', bgcolor: '#0B5A73', '&:hover': { bgcolor: '#084A5F' } }}
> >
Sign in with Google Sign in with Google
</Button> </Button>