amir/Account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: responsiveness of sideNav component

Browse Source
This commit is contained in:
Koosha Lahouti
2025-08-05 17:15:35 -07:00
parent 512b1ad1cf
commit b09d7c96aa
9 changed files with 511 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/features/profile/components/security/PasswordSecurity.tsx
View File

@@ -19,6 +19,7 @@ import { PasswordValidationItem } from './PasswordValidation';
import { Toast } from '@/components/Toast';
import Logo from '@/components/Logo';
import { CardContainer } from '@/components/CardContainer';
import { PageWrapper } from '../PageWrapper';
export function PasswordSecurity() {
const theme = useTheme();
@@ -70,14 +71,7 @@ export function PasswordSecurity() {
}, [password, validPassword]);
return (
<Box
sx={{
mx: 'auto',
backgroundColor: 'background.paper',
display: 'flex',
flexDirection: 'column',
}}
>
<PageWrapper>
<Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
<Logo />
</Box>
@@ -148,7 +142,6 @@ export function PasswordSecurity() {
</Typography>
)}
</Box>
<Dialog
open={open}
onClose={handleClose}
@@ -198,7 +191,6 @@ export function PasswordSecurity() {
onChange={(e) => setPassword(e.target.value)}
sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
/>
{password && showValidation && (
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Box sx={{ maxWidth: '364px', width: '100%' }}>
@@ -221,7 +213,6 @@ export function PasswordSecurity() {
</Box>
</Box>
)}
<TextField
label={t('securityForm.confirmPassword')}
type="password"
@@ -257,7 +248,6 @@ export function PasswordSecurity() {
mt: 2,
}}
/>
{password && showValidation && (
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Box sx={{ maxWidth: '364px', width: '100%' }}>
@@ -280,7 +270,6 @@ export function PasswordSecurity() {
</Box>
</Box>
)}
<TextField
label={t('securityForm.confirmPassword')}
type="password"
@@ -325,7 +314,6 @@ export function PasswordSecurity() {
</Button>
</DialogActions>
</Dialog>
<Toast
color="success"
open={showPasswordAlert}
@@ -335,6 +323,6 @@ export function PasswordSecurity() {
</Toast>
</Box>
</CardContainer>
</Box>
</PageWrapper>
);
}

58
src/features/profile/components/security/RecentLogins.tsx
View File

@@ -1,6 +1,7 @@
import { Box, Typography, Button } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { CardContainer } from '@/components/CardContainer';
import { PageWrapper } from '../PageWrapper';
export function RecentLogins() {
const { t } = useTranslation('security');
@@ -22,27 +23,25 @@ export function RecentLogins() {
];
return (
<Box
sx={{
mx: 'auto',
backgroundColor: 'background.paper',
display: 'flex',
flexDirection: 'column',
}}
>
<PageWrapper>
<CardContainer
title={t('securityForm.recentLogins')}
subtitle={t('securityForm.description')}
>
<Box
sx={{
px: { xs: 2, sm: 3, md: 4 },
// px: { xs: 2, sm: 3, md: 4 },
py: 2,
display: 'flex',
flexDirection: 'column',
gap: 2,
bgcolor: 'background.paper',
flex: 1,
borderBottom: '1px solid',
borderColor: 'divider',
'&:last-child': {
borderBottom: 'none',
},
}}
>
<Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
@@ -50,31 +49,54 @@ export function RecentLogins() {
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
height: '50px',
flexDirection: { xs: 'column', sm: 'row' },
alignItems: { xs: 'flex-start', sm: 'center' },
minHeight: 50,
}}
key={d.id}
>
<Typography
variant="body2"
sx={{ width: { xs: '100%', sm: '172.5px' } }}
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={{ width: { xs: '100%', sm: '172.5px' } }}
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={{ width: { xs: '100%', sm: '172.5px' } }}
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={{ width: { xs: '100%', sm: '172.5px' } }}>
<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"
@@ -85,9 +107,7 @@ export function RecentLogins() {
height: '30px',
whiteSpace: 'nowrap',
color: 'success.main',
width: '93px',
textTransform: 'none',
fontSize: '0.75rem',
}}
>
{t('securityForm.currentDevice')}
@@ -99,6 +119,6 @@ export function RecentLogins() {
</Box>
</Box>
</CardContainer>
</Box>
</PageWrapper>
);
}