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

feat: responsive design and english translator for this section

Browse Source
This commit is contained in:
Koosha Lahouti
2025-07-23 21:38:01 +03:30
parent 89fd237c72
commit 40c0415b63
7 changed files with 276 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/features/profile/components/PersonalInformation.tsx
View File

@@ -89,7 +89,11 @@ export function PersonalInformation() {
variant="text"
onClick={() => setIsEditing(false)}
size="large"
sx={{ color: '#2979FF', width: '43px' }}
sx={{
color: 'primary.main',
width: '43px',
textTransform: 'none',
}}
>
{t('settingForm.rejectButton')}
</Button>
@@ -97,12 +101,16 @@ export function PersonalInformation() {
<Button
onClick={toggleEdit}
size="large"
variant="outlined"
sx={{
textTransform: 'none',
border: '1px solid',
borderColor: '#2979FF',
borderColor: 'primary.main',
borderRadius: '4px',
backgroundColor: isEditing ? '#2979FF' : 'white',
color: isEditing ? 'white' : '#2979FF',
backgroundColor: isEditing
? 'primary.main'
: 'background.paper',
color: isEditing ? 'primary.contrastText' : 'primary.main',
px: '22px',
py: '8px',
width: isEditing ? '85px' : '93px',
@@ -117,7 +125,7 @@ export function PersonalInformation() {
>
<Box
sx={{
px: 4,
px: { xs: 2, sm: 3, md: 4 },
py: 2,
display: 'flex',
flexDirection: 'column',
@@ -125,10 +133,17 @@ export function PersonalInformation() {
}}
>
{isEditing && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 2,
flexWrap: 'wrap',
}}
>
<Avatar
sx={{
bgcolor: '#00C3B7',
bgcolor: 'secondary.main',
width: 88,
height: 88,
fontSize: '20px',
@@ -170,50 +185,63 @@ export function PersonalInformation() {
)}
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
<Box sx={{ width: 'calc(50% - 8px)' }}>
{isEditing ? (
<TextField
fullWidth
name="firstName"
value={data.firstName}
onChange={handleChange}
label={t('settingForm.name')}
/>
) : (
<Box sx={{ px: 4 }}>
<Typography variant="caption" color="text.secondary">
{`${t('settingForm.name')} و ${t('settingForm.familyName')}`}
</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Avatar>{initials}</Avatar>
{[
{
name: 'firstName',
label: t('settingForm.name'),
value: data.firstName,
},
{
name: 'lastName',
label: t('settingForm.familyName'),
value: data.lastName,
},
{
name: 'nationalCode',
label: t('settingForm.nationalCode'),
value: data.nationalCode,
},
].map((field, index) => (
<Box
key={index}
sx={{
width: {
xs: '100%',
sm: '48%',
md: 'calc(50% - 8px)',
},
}}
>
{isEditing ? (
<TextField
fullWidth
name={field.name}
value={field.value}
onChange={handleChange}
label={field.label}
/>
) : (
<Box sx={{ px: 2 }}>
<Typography variant="caption" color="text.secondary">
{field.label}
</Typography>
<Typography variant="body1" color="text.primary">
{displayValue(data.firstName + ' ' + data.lastName)}
{displayValue(field.value)}
</Typography>
</Box>
</Box>
)}
</Box>
)}
</Box>
))}
<Box sx={{ width: 'calc(50% - 8px)' }}>
{isEditing ? (
<TextField
fullWidth
name="lastName"
value={data.lastName}
onChange={handleChange}
label={t('settingForm.familyName')}
/>
) : (
<Box sx={{ px: 4 }}>
<Typography variant="caption" color="text.secondary">
{t('settingForm.country')}
</Typography>
<CountryFlag country={data.country} />
</Box>
)}
</Box>
<Box sx={{ width: 'calc(50% - 8px)' }}>
<Box
sx={{
width: {
xs: '100%',
sm: '48%',
md: 'calc(50% - 8px)',
},
}}
>
{isEditing ? (
<FormControl fullWidth>
<Select
@@ -238,7 +266,7 @@ export function PersonalInformation() {
</Select>
</FormControl>
) : (
<Box sx={{ px: 4 }}>
<Box sx={{ px: 2 }}>
<Typography variant="caption" color="text.secondary">
{t('settingForm.gender')}
</Typography>
@@ -249,29 +277,15 @@ export function PersonalInformation() {
)}
</Box>
<Box sx={{ width: 'calc(50% - 8px)' }}>
{isEditing ? (
<TextField
fullWidth
name="nationalCode"
value={data.nationalCode}
onChange={handleChange}
label={t('settingForm.nationalCode')}
/>
) : (
<Box sx={{ px: 4 }}>
<Typography variant="caption" color="text.secondary">
{t('settingForm.nationalCode')}
</Typography>
<Typography variant="body1" color="text.primary">
{displayValue(data.nationalCode)}
</Typography>
</Box>
)}
</Box>
{isEditing && (
<Autocomplete
sx={{ width: 'calc(50% - 8px)' }}
sx={{
width: {
xs: '100%',
sm: '48%',
md: 'calc(50% - 8px)',
},
}}
options={Object.keys(countryCodeMap)}
value={data.country}
onChange={(_, newValue) =>
@@ -290,6 +304,24 @@ export function PersonalInformation() {
)}
/>
)}
{!isEditing && (
<Box
sx={{
px: 2,
width: {
xs: '100%',
sm: '48%',
md: 'calc(50% - 8px)',
},
}}
>
<Typography variant="caption" color="text.secondary">
{t('settingForm.country')}
</Typography>
<CountryFlag country={data.country} />
</Box>
)}
</Box>
</Box>
</CardContainer>