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

fix: styles

Browse Source
This commit is contained in:
Koosha Lahouti
2025-07-19 17:27:39 +03:30
parent bdf6af0b36
commit ff7b5ce4ac
6 changed files with 658 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,13 +3,13 @@ import {
Typography,
Button,
TextField,
Grid,
FormControl,
Select,
MenuItem,
type SelectChangeEvent,
} from '@mui/material';
import { useState, type ChangeEvent } from 'react';
import { CardContainer } from '@/components/CardContainer';
export function PersonalInformation() {
const [isEditing, setIsEditing] = useState(false);
@@ -51,58 +51,30 @@ export function PersonalInformation() {
};
return (
<div
style={{
<Box
sx={{
display: 'flex',
backgroundColor: '#F5F5F5',
justifyContent: 'center',
alignItems: 'center',
p: 2,
overflow: 'hidden',
}}
>
<Box
sx={{
width: '600px',
backgroundColor: 'white',
display: 'flex',
flexDirection: 'column',
gap: 2,
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: isEditing ? '#ADD8E6' : '#F5F5F5',
p: 2,
borderRadius: 1,
}}
>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Typography
variant="h6"
sx={{ color: isEditing ? '#1976d2' : 'black' }}
>
اطلاعات شخصی من
</Typography>
<Typography
variant="subtitle2"
sx={{ color: isEditing ? '#1976d2' : 'gray', fontSize: '13px' }}
>
این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی
می‌ماند
</Typography>
</Box>
<CardContainer
title="اطلاعات شخصی من"
subtitle="این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی می‌ماند"
highlighted={isEditing}
action={
<Box sx={{ display: 'flex', gap: 1 }}>
{isEditing && (
<Button
variant="text"
onClick={() => setIsEditing(false)}
size="large"
sx={{
backgroundColor: '#ADD8E6',
color: '#1976d2',
width: '80px',
height: '30px',
color: '#2979FF',
width: '43px',
}}
>
لغو
@@ -110,120 +82,150 @@ export function PersonalInformation() {
)}
<Button
onClick={toggleEdit}
size="large"
sx={{
border: 0.5,
borderColor: '#1976d2',
borderRadius: '5px',
backgroundColor: isEditing ? '#1976d2' : 'white',
color: isEditing ? 'white' : '#1976d2',
width: '80px',
height: '30px',
border: '1px solid',
borderColor: '#2979FF',
borderRadius: '4px',
backgroundColor: isEditing ? '#2979FF' : 'white',
color: isEditing ? 'white' : '#2979FF',
px: '22px',
py: '8px',
// minWidth: '93px',
width: isEditing ? '85px' : '93px',
}}
>
{isEditing ? 'ذخیره' : 'ویرایش'}
</Button>
</Box>
</Box>
<Grid container spacing={4}>
<Grid item xs={6}>
}
>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
gap: 4,
p: 2,
}}
>
<Box sx={{ width: 'calc(50% - 16px)' }}>
{isEditing ? (
<TextField
fullWidth
name="firstName"
value={data.firstName}
onChange={handleChange}
inputProps={{ sx: { height: '12px' } }}
label="نام"
/>
) : (
<Box sx={{ width: '250px' }}>
<Typography variant="caption" sx={{ color: 'gray' }}>
<Box
sx={{
height: '48px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
px: 4,
}}
>
<Typography variant="caption" color="text.secondary">
نام
</Typography>
<Typography variant="subtitle2">
<Typography variant="body1" color="text.primary">
{displayValue(data.firstName)}
</Typography>
</Box>
)}
</Grid>
</Box>
<Grid item xs={6}>
<Box sx={{ width: 'calc(50% - 16px)' }}>
{isEditing ? (
<TextField
fullWidth
name="lastName"
value={data.lastName}
onChange={handleChange}
inputProps={{ sx: { height: '12px' } }}
label="نام خانوادگی"
/>
) : (
<Box sx={{ width: '200px' }}>
<Typography variant="caption" sx={{ color: 'gray' }}>
<Box
sx={{
height: '48px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
}}
>
<Typography variant="caption" color="text.secondary">
نام خانوادگی
</Typography>
<Typography variant="subtitle2">
<Typography variant="body1" color="text.primary">
{displayValue(data.lastName)}
</Typography>
</Box>
)}
</Grid>
</Box>
<Grid item xs={6}>
<Box sx={{ width: 'calc(50% - 16px)' }}>
{isEditing ? (
<FormControl fullWidth>
<Select
value={gender}
onChange={handleChangeGender}
sx={{
height: '45px',
width: '210px',
'& .MuiSelect-select': {
paddingY: '10px',
},
}}
label="جنسیت"
displayEmpty
>
<MenuItem value="female">زن</MenuItem>
<MenuItem value="male">مرد</MenuItem>
</Select>
</FormControl>
) : (
<Box sx={{ width: '250px' }}>
<Typography variant="caption" sx={{ color: 'gray' }}>
<Box
sx={{
height: '48px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
px: 4,
}}
>
<Typography variant="caption" color="text.secondary">
جنسیت
</Typography>
<Typography variant="subtitle1">
<Typography variant="body1" color="text.primary">
{displayValue(data.gender)}
</Typography>
</Box>
)}
</Grid>
</Box>
<Grid item xs={6}>
<Box sx={{ width: 'calc(50% - 16px)' }}>
{isEditing ? (
<TextField
fullWidth
name="nationalCode"
value={data.nationalCode}
onChange={handleChange}
inputProps={{ sx: { height: '12px' } }}
label="کدملی"
label="کد ملی"
/>
) : (
<Box>
<Typography variant="caption" sx={{ color: 'gray' }}>
<Box
sx={{
height: '48px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
}}
>
<Typography variant="caption" color="text.secondary">
کد ملی
</Typography>
<Typography variant="subtitle2">
<Typography variant="body1" color="text.primary">
{displayValue(data.nationalCode)}
</Typography>
</Box>
)}
</Grid>
</Grid>
</Box>
</div>
</Box>
</Box>
</CardContainer>
</Box>
);
}