fix: code styles

src/features/profile/components/userInformation/PersonalInformation.tsx

@@ -1,74 +1,53 @@
-import { useState } from 'react';
-import { Box, Button, useTheme, useMediaQuery } from '@mui/material';
+import { useState, useEffect } from 'react';
+import { Box, Button } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CardContainer } from '@/components/CardContainer';
-import { ProfileImage } from './personlInformation/ProfileImage';
-import { InfoRowDisplay } from './personlInformation/InfoRowDisplay';
-import { InfoRowEdit } from './personlInformation/InfoRowEdit';
-import Logo from '@/components/Logo';
+import { ProfileImage } from './personalInformation/ProfileImage';
+import { InfoRowDisplay } from './personalInformation/InfoRowDisplay';
+import { InfoRowEdit } from './personalInformation/InfoRowEdit';
 import { PageWrapper } from '../PageWrapper';
+import { Gender, type InfoRowData } from '../../types';
 
 export function PersonalInformation() {
   const { t } = useTranslation('profileSetting');
   const [isEditing, setIsEditing] = useState(false);
-  const [gender, setGender] = useState('');
   const [uploadedImageUrl, setUploadedImageUrl] = useState<string | null>(null);
-  const theme = useTheme();
-  const isMdUp = useMediaQuery(theme.breakpoints.up('lg'));
 
-  const initialData = {
+  const initialData: InfoRowData = {
     firstName: 'محمد حسین',
     lastName: 'برزه‌گر',
     country: 'قطر',
-    gender: 'مرد',
     nationalCode: '',
+    gender: Gender.None,
   };
-  const [data, setData] = useState(initialData);
+
+  const [data, setData] = useState<InfoRowData>(initialData);
+  const [gender, setGender] = useState<Gender>(Gender.None);
+
+  useEffect(() => {
+    if (Object.values(Gender).includes(data.gender)) {
+      setGender(data.gender);
+    }
+  }, [data.gender]);
 
   const initials = `${data.firstName?.trim()[0] || ''}‌${data.lastName?.trim()[0] || ''}`;
 
   const toggleEdit = () => {
-    setIsEditing((prev) => !prev);
     if (isEditing) {
       setData((prev) => ({
         ...prev,
-        gender:
-          gender === 'male'
-            ? t('settingForm.man')
-            : gender === 'female'
-              ? t('settingForm.woman')
-              : '',
+        gender: gender,
       }));
     } else {
       setGender(
-        data.gender === t('settingForm.man')
-          ? 'male'
-          : data.gender === t('settingForm.woman')
-            ? 'female'
-            : '',
+        Object.values(Gender).includes(data.gender) ? data.gender : Gender.None,
       );
     }
+    setIsEditing(!isEditing);
   };
 
   return (
     <PageWrapper>
-      {isMdUp && (
-        <>
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              py: 2,
-              height: 84,
-            }}
-          >
-            <Logo />
-          </Box>
-          <Box
-            sx={{ width: '100%', height: 1, bgcolor: 'background.default' }}
-          />
-        </>
-      )}
       <CardContainer
         title={t('settingForm.titlePersonalInfo')}
         subtitle={t('settingForm.descriptionPersonalInfo')}
@@ -84,7 +63,7 @@ export function PersonalInformation() {
                   color: 'primary.main',
                   textTransform: 'none',
                   width: { xs: '100%', sm: 'auto' },
-                  fontSize: { xs: '0.85rem', sm: '1rem' },
+                  // fontSize: { xs: '0.8 5rem', sm: '1rem' },
                 }}
               >
                 {t('settingForm.rejectButton')}
@@ -95,16 +74,9 @@ export function PersonalInformation() {
               size="large"
               variant="outlined"
               sx={{
-                textTransform: 'none',
-                border: '1px solid',
-                borderColor: 'primary.main',
-                borderRadius: '4px',
-                bgcolor: isEditing ? 'primary.main' : 'background.paper',
+                borderRadius: 1,
+                bgcolor: isEditing ? 'primary.main' : 'background.default',
                 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
@@ -116,7 +88,7 @@ export function PersonalInformation() {
       >
         <Box
           sx={{
-            px: { xs: 2, sm: 3, md: 4 },
+            mx: { xs: 2, sm: 3, md: 4 },
             py: 2,
             display: 'flex',
             flexDirection: 'column',
@@ -128,15 +100,13 @@ export function PersonalInformation() {
             <ProfileImage
               initials={initials}
               uploadedImageUrl={uploadedImageUrl}
-              onImageChange={(e) => {
-                const file = e.target.files?.[0];
-                if (file) {
-                  const reader = new FileReader();
-                  reader.onload = () =>
-                    setUploadedImageUrl(reader.result as string);
-                  reader.readAsDataURL(file);
-                }
+              onImageChange={(file) => {
+                const reader = new FileReader();
+                reader.onload = () =>
+                  setUploadedImageUrl(reader.result as string);
+                reader.readAsDataURL(file);
               }}
+              onRemoveImage={() => setUploadedImageUrl(null)}
             />
           )}