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',
justifyContent: 'flex-start',
pt: '7%',
bgcolor: '#1F2933',
background: 'linear-gradient(135deg, #073B4C 0%, #172554 100%)',
}}
>
<Box sx={{ width: '100%', maxWidth: 400, mx: 2 }}>
<Card sx={{ borderRadius: '8px', boxShadow: '0 0 10px rgba(0,0,0,0.3)', border: 'none' }}>
<Box sx={{ width: '100%', maxWidth: 420, mx: 2 }}>
<Card sx={{ borderRadius: '10px', boxShadow: '0 12px 32px rgba(15,23,42,0.24)', border: 'none' }}>
<Box
sx={{
height: 100,
@ -80,7 +80,7 @@ export default function LoginPage() {
alignItems: 'center',
justifyContent: 'center',
bgcolor: '#fff',
borderBottom: '1px solid #b8b5b5',
borderBottom: '1px solid #D6E0EA',
px: 3,
}}
>
@ -95,7 +95,7 @@ export default function LoginPage() {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderBottom: '1px solid #b8b5b5',
borderBottom: '1px solid #D6E0EA',
}}
>
<Typography sx={{ fontSize: '14px', fontWeight: 700, color: '#fff' }}>
@ -121,7 +121,7 @@ export default function LoginPage() {
startIcon={<AdminPanelSettingsIcon />}
onClick={() => handleDevLogin('SysAdmin')}
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>SysAdmin</Box>
@ -135,11 +135,11 @@ export default function LoginPage() {
startIcon={<EngineeringIcon />}
onClick={() => handleDevLogin('Admin')}
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>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>
</Button>
<Button
@ -149,7 +149,7 @@ export default function LoginPage() {
startIcon={<PersonIcon />}
onClick={() => handleDevLogin('Dispatcher')}
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>Dispatcher</Box>
@ -173,7 +173,7 @@ export default function LoginPage() {
fullWidth
startIcon={<GoogleIcon />}
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
</Button>