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

fix: responsiveness of setting page and correct the width and height size of those pages

Browse Source
This commit is contained in:
Koosha Lahouti
2025-08-06 12:15:06 -07:00
parent 2904aed502
commit 911a20ad9f
3 changed files with 195 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
src/features/profile/components/setting/Setting.tsx
View File

@@ -59,115 +59,149 @@ export function Setting() {
return (
<PageWrapper>
<Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
<Logo />
</Box>
<Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
<Box
sx={{
width: '100%',
px: { xs: 0, sm: 3 },
mx: 0,
display: 'flex',
flexDirection: 'column',
minHeight: '100vh',
}}
>
<CardContainer
title={t('settings.title')}
subtitle={t('settings.description')}
highlighted={isEditing}
action={
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
{isEditing && (
<Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
<Logo />
</Box>
<Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
<Box
sx={{
width: '100%',
px: { xs: 0, sm: 3 },
mx: 0,
}}
>
<CardContainer
title={t('settings.title')}
subtitle={t('settings.description')}
highlighted={isEditing}
action={
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
{isEditing && (
<Button
variant="text"
onClick={handleCancel}
size="large"
sx={{
color: 'primary.main',
textTransform: 'none',
width: { xs: '100%', sm: 'auto' },
fontSize: { xs: '0.85rem', sm: '1rem' },
}}
>
{t('settings.rejectButton')}
</Button>
)}
<Button
variant="text"
onClick={handleCancel}
onClick={handleEditToggle}
size="large"
variant="outlined"
sx={{
color: 'primary.main',
textTransform: 'none',
width: { xs: '100%', sm: 'auto' },
fontSize: { xs: '0.85rem', sm: '1rem' },
border: '1px solid',
borderColor: 'primary.main',
borderRadius: '4px',
bgcolor: isEditing ? 'primary.main' : 'background.paper',
color: isEditing ? 'primary.contrastText' : 'primary.main',
px: { xs: 2, sm: '22px' },
py: { xs: '6px', sm: '8px' },
width: { xs: '100%', sm: isEditing ? '85px' : '93px' },
fontSize: { xs: '0.9rem', sm: '1rem' },
}}
>
{t('settings.rejectButton')}
{isEditing
? t('settings.saveButton')
: t('settings.editButton')}
</Button>
)}
<Button
onClick={handleEditToggle}
size="large"
variant="outlined"
sx={{
textTransform: 'none',
border: '1px solid',
borderColor: 'primary.main',
borderRadius: '4px',
bgcolor: isEditing ? 'primary.main' : 'background.paper',
color: isEditing ? 'primary.contrastText' : 'primary.main',
px: { xs: 2, sm: '22px' },
py: { xs: '6px', sm: '8px' },
width: { xs: '100%', sm: isEditing ? '85px' : '93px' },
fontSize: { xs: '0.9rem', sm: '1rem' },
}}
>
{isEditing
? t('settings.saveButton')
: t('settings.editButton')}
</Button>
</Box>
}
>
<Box
sx={{
px: { xs: 2, sm: 3, md: 4 },
py: 2,
display: 'flex',
flexDirection: 'column',
gap: 2,
bgcolor: 'background.paper',
width: '100%',
}}
</Box>
}
>
<Box
sx={{
px: { xs: 2, sm: 3, md: 4 },
py: 2,
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
flexDirection: 'column',
gap: 2,
mt: 2,
bgcolor: 'background.paper',
width: '100%',
}}
>
<Box sx={{ flex: 1 }}>
{isEditing ? (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography variant="body1">
{t('settings.theme')}
</Typography>
<ThemeToggleButton />
</Box>
) : (
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.theme')}
</Typography>
<Typography variant="body1">
{mode === 'light'
? t('settings.light')
: t('settings.dark')}
</Typography>
</Box>
)}
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
gap: 2,
mt: 2,
width: '100%',
}}
>
<Box sx={{ flex: 1 }}>
{isEditing ? (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography variant="body1">
{t('settings.theme')}
</Typography>
<ThemeToggleButton />
</Box>
) : (
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.theme')}
</Typography>
<Typography variant="body1">
{mode === 'light'
? t('settings.light')
: t('settings.dark')}
</Typography>
</Box>
)}
</Box>
<Box sx={{ flex: 1 }}>
{isEditing ? (
<Autocomplete
options={languageOptions}
getOptionLabel={(o) => o.label}
value={
languageOptions.find((o) => o.code === draftLanguage) ||
null
}
onChange={handleDraftLanguageChange}
renderInput={(p) => (
<TextField {...p} label={t('settings.language')} />
)}
size="medium"
fullWidth
/>
) : (
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.language')}
</Typography>
<Typography variant="body1">
{
languageOptions.find((o) => o.code === savedLanguage)
?.label
}
</Typography>
</Box>
)}
</Box>
</Box>
<Box sx={{ flex: 1 }}>
<Box sx={{ mt: 2, width: { xs: '100%', md: '50%' } }}>
{isEditing ? (
<Autocomplete
options={languageOptions}
getOptionLabel={(o) => o.label}
value={
languageOptions.find((o) => o.code === draftLanguage) ||
null
}
onChange={handleDraftLanguageChange}
options={calendarOptions}
value={selectedCalendar}
onChange={(_, v) => v && setSelectedCalendar(v)}
renderInput={(p) => (
<TextField {...p} label={t('settings.language')} />
<TextField {...p} label={t('settings.calendar')} />
)}
size="medium"
fullWidth
@@ -175,41 +209,15 @@ export function Setting() {
) : (
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.language')}
</Typography>
<Typography variant="body1">
{
languageOptions.find((o) => o.code === savedLanguage)
?.label
}
{t('settings.calendar')}
</Typography>
<Typography variant="body1">{selectedCalendar}</Typography>
</Box>
)}
</Box>
</Box>
<Box sx={{ mt: 2, width: '100%' }}>
{isEditing ? (
<Autocomplete
options={calendarOptions}
value={selectedCalendar}
onChange={(_, v) => v && setSelectedCalendar(v)}
renderInput={(p) => (
<TextField {...p} label={t('settings.calendar')} />
)}
size="medium"
fullWidth
/>
) : (
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.calendar')}
</Typography>
<Typography variant="body1">{selectedCalendar}</Typography>
</Box>
)}
</Box>
</Box>
</CardContainer>
</CardContainer>
</Box>
</Box>
</PageWrapper>
);

14
src/features/profile/components/userInformation/UserForm.tsx
View File

@@ -1,14 +0,0 @@
import { Box } from '@mui/material';
import { PersonalInformation } from './PersonalInformation';
import { PhoneNumber } from './PhoneNumber';
import { SocialMedia } from './SocialMedia';
export function UserForm() {
return (
<Box sx={{ width: '100%', overflowX: 'clip' }}>
<PersonalInformation />
<PhoneNumber />
<SocialMedia />
</Box>
);
}