fix: styles

This commit is contained in:
Koosha Lahouti
2025-08-06 14:34:29 -07:00
parent dbbcd0b720
commit f23a8a9fca
3 changed files with 188 additions and 172 deletions

View File

@@ -46,75 +46,78 @@ export function RecentLogins() {
>
<Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
{data.map((d) => (
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
alignItems: { xs: 'flex-start', sm: 'center' },
minHeight: 50,
}}
key={d.id}
>
<Typography
variant="body2"
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
minWidth: { sm: '172.5px' },
order: { xs: 1, sm: 1 },
}}
>
{d.time}
</Typography>
<Typography
variant="body2"
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
minWidth: { sm: '172.5px' },
order: { xs: 1, sm: 1 },
}}
>
{d.device}
</Typography>
<Typography
variant="body2"
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
minWidth: { sm: '172.5px' },
order: { xs: 1, sm: 1 },
}}
>
{d.ip}
</Typography>
<>
<Box
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
textAlign: { xs: 'left', sm: 'center' },
minWidth: { sm: '172.5px' },
order: { xs: 4, sm: 4 },
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
alignItems: { xs: 'flex-start', sm: 'center' },
minHeight: 50,
}}
key={d.id}
>
{d.current && (
<Button
variant="outlined"
sx={{
borderRadius: '15px',
border: '2px solid',
borderColor: 'success.main',
height: '30px',
whiteSpace: 'nowrap',
color: 'success.main',
textTransform: 'none',
}}
>
{t('securityForm.currentDevice')}
</Button>
)}
<Typography
variant="body2"
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
minWidth: { sm: '172.5px' },
order: { xs: 1, sm: 1 },
}}
>
{d.time}
</Typography>
<Typography
variant="body2"
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
minWidth: { sm: '172.5px' },
order: { xs: 1, sm: 1 },
}}
>
{d.device}
</Typography>
<Typography
variant="body2"
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
minWidth: { sm: '172.5px' },
order: { xs: 1, sm: 1 },
}}
>
{d.ip}
</Typography>
<Box
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
textAlign: { xs: 'left', sm: 'center' },
minWidth: { sm: '172.5px' },
order: { xs: 4, sm: 4 },
}}
>
{d.current && (
<Button
variant="outlined"
sx={{
borderRadius: '15px',
border: '2px solid',
borderColor: 'success.main',
height: '30px',
whiteSpace: 'nowrap',
color: 'success.main',
textTransform: 'none',
}}
>
{t('securityForm.currentDevice')}
</Button>
)}
</Box>
</Box>
</Box>
<Box sx={{ color: 'divider', borderBottom: '1px solid' }} />
</>
))}
</Box>
</Box>