fix: code styles

public/locales/en/profileSetting.json

@@ -40,6 +40,7 @@
     "notDetermined": "Not determined",
     "successfulChangePhone": "Phone number changed successfully",
     "phoneNumberIsInvalid": "Phone number is invalid",
-    "thisFieldIsRequired": "This field is requried"
+    "thisFieldIsRequired": "This field is required",
+    "changePicture": "Change picture"
   }
 }

public/locales/fa/profileSetting.json

@@ -40,6 +40,7 @@
     "notDetermined": "تعیین نشده",
     "successfulChangePhone": "شماره تماس با موفقیت تغییر کرد",
     "phoneNumberIsInvalid": "شماره وارد شده نامعتبر میباشد",
-    "thisFieldIsRequired": "این فیلد الزامی است"
+    "thisFieldIsRequired": "این فیلد الزامی است",
+    "changePicture": "تغییر تصویر"
   }
 }

src/App.tsx

@@ -3,6 +3,7 @@ import './App.css';
 import { LanguageManager } from './components/LanguageManager';
 import { Settings } from './features/profile/routes/SettingPage';
 
+
 function App() {
   return (
     <>

src/components/CardContainer.tsx

@@ -1,19 +1,21 @@
 import React from 'react';
 import { Box, Typography } from '@mui/material';
 
+interface CardContainerProps {
+  title: string;
+  subtitle: string;
+  action?: React.ReactNode;
+  children?: React.ReactNode;
+  highlighted?: boolean;
+}
+
 export function CardContainer({
   title,
   subtitle,
   action,
   children,
   highlighted,
-}: {
+}: CardContainerProps) {
-  title: string;
-  subtitle: string;
-  action?: React.ReactNode;
-  children?: React.ReactNode;
-  highlighted?: boolean;
-}) {
   return (
     <Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
       <Box
@@ -21,7 +23,7 @@ export function CardContainer({
           marginInline: 'auto',
           width: '100%',
           maxWidth: 'min(100%, 818px)',
-          paddingInline: { xs: 2, sm: 3, md: 4 },
+          // paddingInline: { xs: 2, sm: 3, md: 4 },
           display: 'flex',
           flexDirection: 'column',
           gap: 2,

src/features/profile/components/CountryCodeSelector.tsx

@@ -76,7 +76,7 @@ export function CountryCodeSelector({
           country.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
           country.phone.includes(searchTerm),
       ),
-    [searchTerm],
+    [searchTerm, t],
   );
 
   return (

src/features/profile/components/activeDevices/ActiveDevices.tsx

@@ -7,10 +7,10 @@ import {
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { DeviceMessage, Logout } from 'iconsax-react';
-import Logo from '@/components/Logo';
 import { CardContainer } from '@/components/CardContainer';
 import { PageWrapper } from '../PageWrapper';
 import React from 'react';
+import { Icon } from '@rkheftan/harmony-ui';
 
 export function ActiveDevices() {
   const { t } = useTranslation('activeDevices');
@@ -50,24 +50,17 @@ export function ActiveDevices() {
 
   return (
     <PageWrapper>
-      <Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
-        <Logo />
-      </Box>
-
-      <Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
-
       <CardContainer
         title={t('active.activeDevices')}
         subtitle={t('active.activeDevicesCaption')}
         action={
           <Button
+            size="medium"
             variant="outlined"
             sx={{
-              borderRadius: '10px',
+              borderRadius: 1,
               borderColor: 'error.main',
               color: 'error.main',
-              textTransform: 'none',
-              width: { xs: '100%', sm: 'auto' },
             }}
           >
             {t('active.deletDevicesButton')}
@@ -116,7 +109,11 @@ export function ActiveDevices() {
                     order: { xs: 2, sm: 2 },
                   }}
                 >
-                  <DeviceMessage size={24} color="#82B1FF" />
+                  <Icon
+                    Component={DeviceMessage}
+                    size="medium"
+                    color="primary.main"
+                  />
                   <Typography variant="body2" noWrap>
                     {device.deviceModel}
                   </Typography>
@@ -138,22 +135,22 @@ export function ActiveDevices() {
                   sx={{
                     flexBasis: { xs: '100%', sm: 'auto' },
                     mb: { xs: 1, sm: 0 },
-                    textAlign: { xs: 'left', sm: 'center' },
                     minWidth: { sm: '138px' },
                     order: { xs: 4, sm: 4 },
+                    alignItems: 'center',
+                    justifyContent: 'center',
                   }}
                 >
                   {device.current && (
                     <Button
                       variant="outlined"
+                      size="medium"
                       sx={{
-                        borderRadius: '15px',
+                        borderRadius: '100px',
-                        border: '2px solid',
+                        border: '1px solid',
                         borderColor: 'success.main',
-                        height: '30px',
                         whiteSpace: 'nowrap',
                         color: 'success.main',
-                        textTransform: 'none',
                       }}
                     >
                       {t('active.currentDevice')}
@@ -166,26 +163,29 @@ export function ActiveDevices() {
                     flexBasis: { xs: '100%', sm: 'auto' },
                     mb: { xs: 1, sm: 0 },
                     textAlign: { xs: 'left', sm: 'center' },
-                    minWidth: { sm: '150px' },
+                    minWidth: { sm: '138px' },
                     order: { xs: 5, sm: 5 },
                   }}
                 >
                   <Button
                     size="small"
                     variant="outlined"
-                    startIcon={<Logout size={18} color="#E53935" />}
+                    startIcon={
+                      <Icon
+                        Component={Logout}
+                        size="small"
+                        color="error.main"
+                      />
+                    }
                     disabled={device.current}
                     sx={{
                       color: 'error.main',
-                      minWidth: 0,
+                      borderRadius: 1,
-                      borderRadius: '15px',
                       borderColor: 'error.main',
-                      p: '4px 8px',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
                       whiteSpace: 'nowrap',
-                      textTransform: 'none',
                       '& .MuiButton-startIcon': {
                         marginRight: '4px',
                         marginLeft: 0,

src/features/profile/components/layout/Routes.tsx

@@ -8,7 +8,7 @@ import { RecentLogins } from '../security/RecentLogins';
 import { ActiveDevices } from '../activeDevices/ActiveDevices';
 import { Setting } from '../setting/Setting';
 import { Box } from '@mui/material';
-
+// tooye route ye component taarif mikonim be esme profile bad mibarim tooye route
 export const router = createBrowserRouter([
   {
     path: '/',

src/features/profile/components/security/PasswordDialog.tsx

@@ -8,9 +8,11 @@ import {
   Box,
   Button,
   Link,
+  CircularProgress,
 } from '@mui/material';
-import { CloseCircle, Refresh } from 'iconsax-react';
+import { CloseCircle } from 'iconsax-react';
 import { PasswordValidationItem } from './PasswordValidation';
+import { Icon } from '@rkheftan/harmony-ui';
 
 interface PasswordDialogProps {
   open: boolean;
@@ -68,7 +70,7 @@ export function PasswordDialog({
       <DialogTitle sx={{ p: 2 }}>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
           <IconButton onClick={handleClose}>
-            <CloseCircle size={24} color="#82B1FF" />
+            <Icon Component={CloseCircle} size="large" color="primary.main" />
           </IconButton>
           <Box component="span" fontWeight="bold" fontSize={18}>
             {t('securityForm.addPassword')}
@@ -150,28 +152,12 @@ export function PasswordDialog({
       <DialogActions sx={{ px: 3, pb: 2, justifyContent: 'center' }}>
         <Button
           fullWidth
-          sx={{ maxWidth: '364px', height: 48, textTransform: 'none' }}
+          sx={{ height: 48, textTransform: 'none' }}
           variant="contained"
           onClick={handleShowAlert}
           disabled={!password || password !== confirmPassword || loading}
         >
-          {loading ? (
+          {loading ? <CircularProgress size={20} /> : t('securityForm.confirm')}
-            <Box
-              component="span"
-              sx={{
-                display: 'flex',
-                animation: 'spin 1s linear infinite',
-                '@keyframes spin': {
-                  '0%': { transform: 'rotate(0deg)' },
-                  '100%': { transform: 'rotate(360deg)' },
-                },
-              }}
-            >
-              <Refresh size="20" color="#fff" />
-            </Box>
-          ) : (
-            t('securityForm.confirm')
-          )}
         </Button>
       </DialogActions>
     </Dialog>

src/features/profile/components/security/PasswordSecurity.tsx

@@ -9,7 +9,6 @@ import {
 import { useTranslation } from 'react-i18next';
 import { CardContainer } from '@/components/CardContainer';
 import { PageWrapper } from '../PageWrapper';
-import Logo from '@/components/Logo';
 import { PasswordDialog } from './PasswordDialog';
 import { Toast } from '@/components/Toast';
 
@@ -66,10 +65,6 @@ export function PasswordSecurity() {
 
   return (
     <PageWrapper>
-      <Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
-        <Logo />
-      </Box>
-      <Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
       <CardContainer
         title={t('securityForm.password')}
         subtitle={t('securityForm.determinePassword')}
@@ -78,11 +73,8 @@ export function PasswordSecurity() {
             variant="outlined"
             onClick={handleOpen}
             sx={{
-              mt: { xs: 2, sm: 0 },
               backgroundColor: 'primary.main',
               color: 'background.paper',
-              width: { xs: '100%', sm: '142px' },
-              textTransform: 'none',
             }}
           >
             {changePassword
@@ -121,7 +113,6 @@ export function PasswordSecurity() {
             </Typography>
           )}
 
-          {/* New PasswordDialog component usage */}
           <PasswordDialog
             open={open}
             fullScreen={fullScreen}

src/features/profile/components/security/PasswordValidation.tsx

@@ -1,5 +1,6 @@
 import { Box, Typography } from '@mui/material';
 import { TickCircle } from 'iconsax-react';
+import { Icon } from '@rkheftan/harmony-ui';
 
 interface ValidationItemProps {
   isValid: boolean;
@@ -20,10 +21,11 @@ export function PasswordValidationItem({
         flexWrap: 'wrap',
       }}
     >
-      <TickCircle
+      <Icon
-        size="16"
+        Component={TickCircle}
-        color={isValid ? '#14AE5C' : '#2979FF'}
+        color={isValid ? 'success.main' : 'primary.main'}
         variant={isValid ? 'Bold' : 'Outline'}
+        size="small"
       />
       <Typography
         variant="body2"

src/features/profile/components/security/RecentLogins.tsx

@@ -45,7 +45,7 @@ export function RecentLogins() {
             },
           }}
         >
-          <Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
+          <Box sx={{ px: 4 }}>
             {data.map((d) => (
               <React.Fragment key={d.id}>
                 <Box

src/features/profile/components/setting/Setting.tsx

@@ -10,7 +10,6 @@ import {
 import { CardContainer } from '@/components/CardContainer';
 import { useTranslation } from 'react-i18next';
 import { ThemeToggleButton } from '@/components/ThemToggle';
-import Logo from '@/components/Logo';
 import { PageWrapper } from '../PageWrapper';
 
 export function Setting() {
@@ -37,7 +36,7 @@ export function Setting() {
   ];
 
   const handleDraftLanguageChange = (
-    _: any,
+    _: React.SyntheticEvent,
     v: { code: string; label: string } | null,
   ) => v && setDraftLanguage(v.code);
 
@@ -63,16 +62,10 @@ export function Setting() {
         sx={{
           display: 'flex',
           flexDirection: 'column',
-          minHeight: '100vh',
         }}
       >
-        <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,
           }}
@@ -91,7 +84,7 @@ export function Setting() {
                     sx={{
                       color: 'primary.main',
                       textTransform: 'none',
-                      width: { xs: '100%', sm: 'auto' },
+                      // width: { xs: '100%', sm: 'auto' },
                       fontSize: { xs: '0.85rem', sm: '1rem' },
                     }}
                   >
@@ -103,16 +96,11 @@ export function Setting() {
                   size="large"
                   variant="outlined"
                   sx={{
-                    textTransform: 'none',
                     border: '1px solid',
                     borderColor: 'primary.main',
-                    borderRadius: '4px',
+                    borderRadius: 1,
-                    bgcolor: isEditing ? 'primary.main' : 'background.paper',
+                    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
@@ -130,7 +118,6 @@ export function Setting() {
                 flexDirection: 'column',
                 gap: 2,
                 bgcolor: 'background.paper',
-                width: '100%',
               }}
             >
               <Box
@@ -139,7 +126,6 @@ export function Setting() {
                   flexDirection: { xs: 'column', sm: 'row' },
                   gap: 2,
                   mt: 2,
-                  width: '100%',
                 }}
               >
                 <Box sx={{ flex: 1 }}>

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

@@ -1,74 +1,53 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
-import { Box, Button, useTheme, useMediaQuery } from '@mui/material';
+import { Box, Button } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CardContainer } from '@/components/CardContainer';
-import { ProfileImage } from './personlInformation/ProfileImage';
+import { ProfileImage } from './personalInformation/ProfileImage';
-import { InfoRowDisplay } from './personlInformation/InfoRowDisplay';
+import { InfoRowDisplay } from './personalInformation/InfoRowDisplay';
-import { InfoRowEdit } from './personlInformation/InfoRowEdit';
+import { InfoRowEdit } from './personalInformation/InfoRowEdit';
-import Logo from '@/components/Logo';
 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: gender,
-          gender === 'male'
-            ? t('settingForm.man')
-            : gender === 'female'
-              ? t('settingForm.woman')
-              : '',
       }));
     } else {
       setGender(
-        data.gender === t('settingForm.man')
+        Object.values(Gender).includes(data.gender) ? data.gender : Gender.None,
-          ? 'male'
-          : data.gender === t('settingForm.woman')
-            ? 'female'
-            : '',
       );
     }
+    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',
+                borderRadius: 1,
-                border: '1px solid',
+                bgcolor: isEditing ? 'primary.main' : 'background.default',
-                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
@@ -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) => {
+              onImageChange={(file) => {
-                const file = e.target.files?.[0];
+                const reader = new FileReader();
-                if (file) {
+                reader.onload = () =>
-                  const reader = new FileReader();
+                  setUploadedImageUrl(reader.result as string);
-                  reader.onload = () =>
+                reader.readAsDataURL(file);
-                    setUploadedImageUrl(reader.result as string);
-                  reader.readAsDataURL(file);
-                }
               }}
+              onRemoveImage={() => setUploadedImageUrl(null)}
             />
           )}
 

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

@@ -29,7 +29,6 @@ export function SocialMedia() {
   const emailList = [
     { email: 'emailtemp@email.com', provider: 'email', time: '1 ماه پیش' },
     { email: 'emailtemp@gmail.com', provider: 'google', time: '1 ماه پیش' },
-    { email: 'emailtemp@icloud.com', provider: 'apple', time: '1 ماه پیش' },
   ] as const;
 
   return (

src/features/profile/components/userInformation/personalInformation/DisplayField.tsx

@@ -1,18 +1,21 @@
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
-export function DisplayField({
+interface DisplayFieldProps {
-  label,
-  value,
-}: {
   label: string;
   value: string;
-}) {
+}
+
+export function DisplayField({ label, value }: DisplayFieldProps) {
   const { t } = useTranslation('profileSetting');
   const displayValue = value?.trim() || t('settingForm.notDetermined');
 
   return (
-    <Box sx={{ width: { xs: '100%', sm: '48%', md: 'calc(50% - 8px)' } }}>
+    <Box
+      sx={{
+        flex: 1,
+      }}
+    >
       <Typography variant="caption" color="text.secondary">
         {label}
       </Typography>

src/features/profile/components/userInformation/personalInformation/InfoRowDisplay.tsx

@@ -0,0 +1,106 @@
+import { Box, Typography, Avatar } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CountryFlag } from '@/components/CountryFlag';
+import { DisplayField } from './DisplayField';
+import { Gender } from '@/features/profile/types';
+
+interface InfoRowData {
+  firstName: string;
+  lastName: string;
+  country: string;
+  gender: Gender | '';
+  nationalCode: string;
+}
+
+interface InfoRowDisplayProps {
+  data: InfoRowData;
+  uploadedImageUrl: string | null;
+  initials: string;
+}
+
+export function InfoRowDisplay({
+  data,
+  uploadedImageUrl,
+  initials,
+}: InfoRowDisplayProps) {
+  const { t } = useTranslation('profileSetting');
+  const displayValue = (value: string) =>
+    value?.trim() || t('settingForm.notDetermined');
+  const getGenderLabel = (gender: Gender | '') => {
+    switch (gender) {
+      case Gender.Male:
+        return t('settingForm.man');
+      case Gender.Female:
+        return t('settingForm.woman');
+      default:
+        return t('settingForm.notDetermined');
+    }
+  };
+  return (
+    <Box sx={{ mb: 2 }}>
+      <Box sx={{ width: '100%' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row' },
+            gap: 2,
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              flex: 1,
+              gap: 1,
+            }}
+          >
+            <Typography variant="caption" color="text.secondary">
+              {t('settingForm.name')} و {t('settingForm.familyName')}
+            </Typography>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+              <Avatar
+                src={uploadedImageUrl || undefined}
+                sx={{
+                  width: 32,
+                  height: 32,
+                  bgcolor: 'secondary.main',
+                  fontSize: '16px',
+                }}
+              >
+                {initials}
+              </Avatar>
+              <Typography variant="body1" color="text.primary">
+                {`${displayValue(data.firstName)} ${displayValue(data.lastName)}`}
+              </Typography>
+            </Box>
+          </Box>
+
+          <Box sx={{ flex: 1 }}>
+            <Typography variant="caption" color="text.secondary">
+              {t('settingForm.country')}
+            </Typography>
+            <CountryFlag country={data.country} />
+          </Box>
+        </Box>
+      </Box>
+
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column', sm: 'row' },
+          gap: 2,
+          mt: 2,
+        }}
+      >
+        <DisplayField
+          label={t('settingForm.gender')}
+          value={getGenderLabel(data.gender)}
+        />
+        <DisplayField
+          label={t('settingForm.nationalCode')}
+          value={displayValue(data.nationalCode)}
+        />
+      </Box>
+    </Box>
+  );
+}

src/features/profile/components/userInformation/personalInformation/InfoRowEdit.tsx

@@ -8,29 +8,45 @@ import {
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CountryFlag, countryCodeMap } from '@/components/CountryFlag';
+import { Gender } from '@/features/profile/types';
+import { type InfoRowData } from '@/features/profile/types';
 
-export function InfoRowEdit({ data, setData, gender, setGender }: any) {
+interface InfoRowEditProps {
+  data: InfoRowData;
+  setData: React.Dispatch<React.SetStateAction<InfoRowData>>;
+  gender: Gender;
+  setGender: React.Dispatch<React.SetStateAction<Gender>>;
+}
+
+export function InfoRowEdit({
+  data,
+  setData,
+  gender,
+  setGender,
+}: InfoRowEditProps) {
   const { t } = useTranslation('profileSetting');
 
+  const labels = [
+    {
+      name: 'firstName' as keyof InfoRowData,
+      label: t('settingForm.name'),
+      value: data.firstName,
+    },
+    {
+      name: 'lastName' as keyof InfoRowData,
+      label: t('settingForm.familyName'),
+      value: data.lastName,
+    },
+    {
+      name: 'nationalCode' as keyof InfoRowData,
+      label: t('settingForm.nationalCode'),
+      value: data.nationalCode,
+    },
+  ];
+
   return (
-    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      {[
+      {labels.map((field, idx) => (
-        {
-          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, idx) => (
         <Box
           key={idx}
           sx={{ width: { xs: '100%', sm: '48%', md: 'calc(50% - 8px)' } }}
@@ -40,7 +56,7 @@ export function InfoRowEdit({ data, setData, gender, setGender }: any) {
             name={field.name}
             value={field.value}
             onChange={(e) =>
-              setData((prev: any) => ({
+              setData((prev) => ({
                 ...prev,
                 [field.name]: e.target.value,
               }))
@@ -54,24 +70,22 @@ export function InfoRowEdit({ data, setData, gender, setGender }: any) {
         <FormControl fullWidth>
           <Select
             value={gender}
-            onChange={(e) => setGender(e.target.value)}
+            onChange={(e) => setGender(e.target.value as Gender)}
             displayEmpty
             renderValue={(selected) =>
               selected ? (
-                selected === 'male' ? (
+                selected === Gender.Male ? (
                   t('settingForm.man')
                 ) : (
                   t('settingForm.woman')
                 )
               ) : (
-                <span style={{ color: '#aaa' }}>
+                <span>{t('settingForm.genderPlaceholder')}</span>
-                  {t('settingForm.genderPlaceholder')}
-                </span>
               )
             }
           >
-            <MenuItem value="male">{t('settingForm.man')}</MenuItem>
+            <MenuItem value={Gender.Male}>{t('settingForm.man')}</MenuItem>
-            <MenuItem value="female">{t('settingForm.woman')}</MenuItem>
+            <MenuItem value={Gender.Female}>{t('settingForm.woman')}</MenuItem>
           </Select>
         </FormControl>
       </Box>
@@ -81,7 +95,7 @@ export function InfoRowEdit({ data, setData, gender, setGender }: any) {
         options={Object.keys(countryCodeMap)}
         value={data.country}
         onChange={(_, newValue) =>
-          setData((prev: any) => ({ ...prev, country: newValue || '' }))
+          setData((prev) => ({ ...prev, country: newValue || '' }))
         }
         renderOption={(props, option) => (
           <Box component="li" {...props}>

src/features/profile/components/userInformation/personalInformation/ProfileImage.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { Box, Avatar, Typography, Button, IconButton } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Camera, Trash } from 'iconsax-react';
+import { Icon } from '@rkheftan/harmony-ui';
+
+const MAX_FILE_SIZE_MB = 10;
+
+interface ProfileImageProps {
+  initials: string;
+  uploadedImageUrl: string | null;
+  onImageChange: (file: File) => void;
+  onRemoveImage?: () => void;
+}
+
+export function ProfileImage({
+  initials,
+  uploadedImageUrl,
+  onImageChange,
+  onRemoveImage,
+}: ProfileImageProps) {
+  const { t } = useTranslation('profileSetting');
+  const [error, setError] = useState<string | null>(null);
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setError(null);
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const fileSizeMB = file.size / (1024 * 1024);
+    if (fileSizeMB > MAX_FILE_SIZE_MB) {
+      setError(t('settingForm.fileSizeError', { size: MAX_FILE_SIZE_MB }));
+      return;
+    }
+
+    onImageChange(file);
+  };
+
+  return (
+    <Box
+      sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}
+    >
+      <Avatar
+        sx={{
+          bgcolor: 'secondary.main',
+          width: 88,
+          height: 88,
+          fontSize: '20px',
+        }}
+        src={uploadedImageUrl || undefined}
+      >
+        {initials}
+      </Avatar>
+      <Box>
+        <Typography variant="body1">
+          {t('settingForm.profilePicture')}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {t('settingForm.allowedFormat')}
+        </Typography>
+        {error && (
+          <Typography variant="body2" color="error" mt={1}>
+            {error}
+          </Typography>
+        )}
+
+        <Box mt={1} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Button
+            variant={
+              uploadedImageUrl && onRemoveImage ? 'outlined' : 'contained'
+            }
+            component="label"
+            size="small"
+            sx={{
+              borderRadius: 2,
+              textTransform: 'none',
+            }}
+            startIcon={
+              <Icon
+                Component={Camera}
+                size="small"
+                color={
+                  uploadedImageUrl && onRemoveImage ? 'primary.main' : 'white'
+                }
+              />
+            }
+          >
+            {uploadedImageUrl && onRemoveImage
+              ? t('settingForm.changePicture')
+              : t('settingForm.uploadPicture')}
+            <input
+              hidden
+              accept="image/png, image/jpeg, image/gif"
+              type="file"
+              onChange={handleImageChange}
+            />
+          </Button>
+          {uploadedImageUrl && onRemoveImage && (
+            <IconButton
+              size="small"
+              color="error"
+              onClick={onRemoveImage}
+              aria-label={t('settingForm.removePicture')}
+            >
+              <Icon Component={Trash} color="error.main" />
+            </IconButton>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+}

src/features/profile/components/userInformation/personlInformation/InfoRowDisplay.tsx

@@ -1,90 +0,0 @@
-import { Box, Typography, Avatar } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { CountryFlag } from '@/components/CountryFlag';
-import { DisplayField } from './DisplayField';
-
-export function InfoRowDisplay({
-  data,
-  uploadedImageUrl,
-  initials,
-}: {
-  data: any;
-  uploadedImageUrl: string | null;
-  initials: string;
-}) {
-  const { t } = useTranslation('profileSetting');
-  const displayValue = (value: string) =>
-    value?.trim() || t('settingForm.notDetermined');
-
-  return (
-    <Box sx={{ px: 2, mb: 2 }}>
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: { xs: 'column', sm: 'row' },
-          flexWrap: 'wrap',
-          alignItems: { xs: 'flex-start', sm: 'center' },
-          gap: 2,
-          justifyContent: 'space-between',
-          width: '690px',
-        }}
-      >
-        <Box
-          sx={{
-            width: '337px',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 1,
-          }}
-        >
-          <Typography variant="caption" color="text.secondary">
-            {t('settingForm.name')} و {t('settingForm.familyName')}
-          </Typography>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            <Avatar
-              src={uploadedImageUrl || undefined}
-              sx={{
-                width: 32,
-                height: 32,
-                bgcolor: 'secondary.main',
-                fontSize: '16px',
-              }}
-            >
-              {initials}
-            </Avatar>
-            <Typography variant="body1" color="text.primary">
-              {`${displayValue(data.firstName)} ${displayValue(data.lastName)}`}
-            </Typography>
-          </Box>
-        </Box>
-
-        <Box sx={{ display: 'flex', flexDirection: 'column', width: '337px' }}>
-          <Typography variant="caption" color="text.secondary">
-            {t('settingForm.country')}
-          </Typography>
-          <CountryFlag country={data.country} />
-        </Box>
-      </Box>
-
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: { xs: 'column', sm: 'row' },
-          flexWrap: 'wrap',
-          gap: 2,
-          mt: 2,
-          width: '690px',
-        }}
-      >
-        <DisplayField
-          label={t('settingForm.gender')}
-          value={displayValue(data.gender)}
-        />
-        <DisplayField
-          label={t('settingForm.nationalCode')}
-          value={displayValue(data.nationalCode)}
-        />
-      </Box>
-    </Box>
-  );
-}

src/features/profile/components/userInformation/personlInformation/ProfileImage.tsx

@@ -1,62 +0,0 @@
-import { Box, Avatar, Typography, Button } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { Camera } from 'iconsax-react';
-
-export function ProfileImage({
-  initials,
-  uploadedImageUrl,
-  onImageChange,
-}: {
-  initials: string;
-  uploadedImageUrl: string | null;
-  onImageChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}) {
-  const { t } = useTranslation('profileSetting');
-
-  return (
-    <Box
-      sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}
-    >
-      <Avatar
-        sx={{
-          bgcolor: 'secondary.main',
-          width: 88,
-          height: 88,
-          fontSize: '20px',
-        }}
-        src={uploadedImageUrl || undefined}
-      >
-        {initials}
-      </Avatar>
-      <Box>
-        <Typography variant="body1">
-          {t('settingForm.profilePicture')}
-        </Typography>
-        <Typography variant="body2" color="text.secondary">
-          {t('settingForm.allowedFormat')}
-        </Typography>
-        <Box mt={1}>
-          <Button
-            variant="contained"
-            component="label"
-            sx={{
-              borderRadius: 2,
-              textTransform: 'none',
-              height: '30px',
-              fontSize: '13px',
-            }}
-            startIcon={<Camera size={18} color="white" />}
-          >
-            {t('settingForm.uploadPicture')}
-            <input
-              hidden
-              accept="image/png, image/jpeg, image/gif"
-              type="file"
-              onChange={onImageChange}
-            />
-          </Button>
-        </Box>
-      </Box>
-    </Box>
-  );
-}

src/features/profile/components/userInformation/phoneNumber/PhoneActionButtons.tsx

@@ -1,14 +1,16 @@
 import { Box, Button } from '@mui/material';
 
+interface PhoneActionButtonsProps {
+  isEditing: boolean;
+  toggleEdit: () => void;
+  t: (key: string) => string;
+}
+
 export default function PhoneActionButtons({
   isEditing,
   toggleEdit,
   t,
-}: {
+}: PhoneActionButtonsProps) {
-  isEditing: boolean;
-  toggleEdit: () => void;
-  t: (key: string) => string;
-}) {
   return (
     <Box sx={{ display: 'flex', gap: 1 }}>
       {isEditing && (
@@ -19,7 +21,7 @@ export default function PhoneActionButtons({
           sx={{
             color: 'primary.main',
             textTransform: 'none',
-            width: '43px',
+            width: { xs: '100%', sm: 'auto' },
           }}
         >
           {t('settingForm.rejectButton')}
@@ -30,13 +32,9 @@ export default function PhoneActionButtons({
         size="large"
         variant="outlined"
         sx={{
-          textTransform: 'none',
+          borderRadius: 1,
-          border: '1px solid',
+          bgcolor: isEditing ? 'primary.main' : 'background.default',
-          borderColor: 'primary.main',
-          borderRadius: '4px',
-          bgcolor: isEditing ? 'primary.main' : 'background.paper',
           color: isEditing ? 'primary.contrastText' : 'primary.main',
-          width: { xs: '100%', sm: isEditing ? '85px' : '161px' },
           whiteSpace: 'nowrap',
         }}
       >

src/features/profile/components/userInformation/phoneNumber/PhoneDisplay.tsx

@@ -1,31 +1,55 @@
 import { Box, Typography } from '@mui/material';
+import { Icon } from '@rkheftan/harmony-ui';
+import { Mobile } from 'iconsax-react';
 
-export default function PhoneDisplay({
+interface PhoneDisplayProps {
-  phones,
-}: {
   phones: { phone: string; time: string }[];
-}) {
+}
+
+export default function PhoneDisplay({ phones }: PhoneDisplayProps) {
   return (
-    <Box sx={{ px: { xs: 2, sm: 4 } }}>
+    <>
       {phones.map((item, index) => (
         <Box
           key={index}
           sx={{
             display: 'flex',
-            flexDirection: 'column',
+            flexDirection: 'row',
-            justifyContent: 'center',
+            alignItems: 'center',
             py: 2,
-            width: '100%',
+            mx: 3,
+            gap: 1,
           }}
         >
-          <Typography variant="h6" color="text.primary">
+          <Box
-            {item.phone}
+            sx={{
-          </Typography>
+              width: 40,
-          <Typography variant="caption" color="text.secondary">
+              height: 40,
-            {item.time}
+              backgroundColor: 'primary.light',
-          </Typography>
+              justifyContent: 'center',
+              alignItems: 'center',
+              display: 'flex',
+              borderRadius: 0.5,
+            }}
+          >
+            <Icon
+              Component={Mobile}
+              size="medium"
+              variant="Bold"
+              color="primary.main"
+            />
+          </Box>
+
+          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Typography variant="h6" color="text.primary">
+              {item.phone}
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+              {item.time}
+            </Typography>
+          </Box>
         </Box>
       ))}
-    </Box>
+    </>
   );
 }

src/features/profile/components/userInformation/phoneNumber/PhoneEditForm.tsx

@@ -1,8 +1,41 @@
-import { Box, Typography, TextField, IconButton, Button } from '@mui/material';
+import {
-import { Edit, Refresh, TickCircle } from 'iconsax-react';
+  Box,
+  Typography,
+  TextField,
+  Button,
+  IconButton,
+  InputAdornment,
+  CircularProgress,
+} from '@mui/material';
+import { Edit2, TickCircle } from 'iconsax-react';
 import { CountDownTimer } from '@/components/CountDownTimer';
 import { Toast } from '@/components/Toast';
 import { CountryCodeSelector } from '../../CountryCodeSelector';
+import { Icon } from '@rkheftan/harmony-ui';
+
+interface PhoneEditFormProps {
+  phoneNumber: string;
+  setPhoneNumber: (v: string) => void;
+  countryCode: string;
+  setCountryCode: (v: string) => void;
+  verificationCode: string;
+  setVerificationCode: (v: string) => void;
+  isVerified: boolean;
+  isVerifying: boolean;
+  buttonState: 'default' | 'counting';
+  setButtonState: (v: 'default' | 'counting') => void;
+  handleSendCode: () => void;
+  handleVerifyClick: () => void;
+  error?: string;
+  inputError: boolean;
+  handleBlur: () => void;
+  textFieldRef: React.RefObject<HTMLDivElement>;
+  inputRef: React.RefObject<HTMLInputElement>;
+  phones: { phone: string; time: string; withCode: string }[];
+  showToast: boolean;
+  setShowToast: (v: boolean) => void;
+  t: (key: string) => string;
+}
 
 export default function PhoneEditForm({
   phoneNumber,
@@ -26,41 +59,34 @@ export default function PhoneEditForm({
   showToast,
   setShowToast,
   t,
-}: {
+}: PhoneEditFormProps) {
-  phoneNumber: string;
+  const isValidPhoneNumber = (phone: string) => {
-  setPhoneNumber: (v: string) => void;
+    const digitsOnly = phone.replace(/\D/g, '');
-  countryCode: string;
+    return digitsOnly.length >= 8 && digitsOnly.length <= 15;
-  setCountryCode: (v: string) => void;
+  };
-  verificationCode: string;
+
-  setVerificationCode: (v: string) => void;
-  isVerified: boolean;
-  isVerifying: boolean;
-  buttonState: 'default' | 'counting';
-  setButtonState: (v: 'default' | 'counting') => void;
-  handleSendCode: () => void;
-  handleVerifyClick: () => void;
-  error?: string;
-  inputError: boolean;
-  handleBlur: () => void;
-  textFieldRef: React.RefObject<HTMLDivElement>;
-  inputRef: React.RefObject<HTMLInputElement>;
-  phones: { phone: string; time: string; withCode: string }[];
-  showToast: boolean;
-  setShowToast: (v: boolean) => void;
-  t: (key: string) => string;
-}) {
   return (
-    <Box sx={{ px: { xs: 2, sm: 4 }, bgcolor: 'background.paper' }}>
+    <>
-      <Box sx={{ mb: 2 }}>
+      <Box sx={{ width: '100%' }}>
-        <Typography variant="h6">{t('settingForm.editPhoneNumber')}</Typography>
+        <Box sx={{ mb: 2, mx: 3 }}>
-        <Typography variant="body2" color="text.secondary">
+          <Typography variant="h6">
-          {t('settingForm.phoneNumberText')}({phones.map((p) => p.withCode)})
+            {t('settingForm.editPhoneNumber')}
-          {t('settingForm.verb')}
+          </Typography>
-        </Typography>
+          <Typography variant="body2" color="text.secondary">
+            {t('settingForm.phoneNumberText')}({phones.map((p) => p.withCode)})
+            {t('settingForm.verb')}
+          </Typography>
+        </Box>
       </Box>
 
       <Box
-        sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, alignItems: 'center' }}
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 2,
+          alignItems: 'center',
+          mx: 3,
+        }}
       >
         <TextField
           name="phoneNumber"
@@ -73,31 +99,29 @@ export default function PhoneEditForm({
           error={inputError}
           helperText={inputError ? error : ''}
           onChange={(e) => setPhoneNumber(e.target.value)}
-          sx={{ flex: '1 1 240px', minWidth: 0 }}
+          sx={{ flex: '1 1 220px', minWidth: 0 }}
           placeholder="09123456789"
-          inputProps={{ dir: 'rtl', style: { textAlign: 'right' } }}
           InputProps={{
             endAdornment:
               buttonState === 'counting' ? (
-                <IconButton
+                <InputAdornment position="end">
-                  size="small"
+                  <IconButton
-                  onClick={() => {
+                    size="small"
-                    setButtonState('default');
+                    onClick={() => {
-                    setPhoneNumber('');
+                      setButtonState('default');
-                  }}
+                      setPhoneNumber('');
-                  sx={{ mr: 1 }}
+                      setVerificationCode('');
-                >
+                    }}
-                  <Edit size="24" color="#64B5F6" />
+                    edge="end"
-                </IconButton>
+                  >
-              ) : null,
+                    <Icon
-          }}
+                      Component={Edit2}
-          slotProps={{
+                      color="primary.main"
-            htmlInput: {
+                      variant="Bold"
-              dir: 'auto',
+                    />
-              sx: { lineHeight: 1.5, paddingX: 0 },
+                  </IconButton>
-            },
+                </InputAdornment>
-            input: {
+              ) : (
-              endAdornment: (
                 <CountryCodeSelector
                   value={countryCode}
                   onChange={setCountryCode}
@@ -106,27 +130,37 @@ export default function PhoneEditForm({
                   onCloseFocusRef={inputRef}
                 />
               ),
-            },
           }}
         />
 
         {isVerified ? (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Box
-            <TickCircle size="24" style={{ color: '#43A047' }} variant="Bold" />
+            sx={{
-            <Typography sx={{ color: 'success.main' }}>
+              display: 'flex',
-              {t('settingForm.successButton')}
+              alignItems: 'center',
-            </Typography>
+              gap: 1,
+              color: 'success.main',
+            }}
+          >
+            <Icon Component={TickCircle} />
+            <Typography>{t('settingForm.successButton')}</Typography>
           </Box>
         ) : (
           <Button
             variant="text"
-            onClick={handleSendCode}
+            onClick={() => {
-            disabled={buttonState === 'counting' || phoneNumber.length === 0}
+              if (isValidPhoneNumber(phoneNumber)) {
+                handleSendCode();
+              }
+            }}
+            disabled={
+              buttonState === 'counting' ||
+              phoneNumber.length === 0 ||
+              !isValidPhoneNumber(phoneNumber)
+            }
             sx={{
-              textTransform: 'none',
+              minWidth: { xs: '100%', sm: 220 },
-              minWidth: { xs: '100%', sm: 170 },
               color: 'primary.main',
-              height: 56,
             }}
           >
             {buttonState === 'counting' ? (
@@ -149,6 +183,7 @@ export default function PhoneEditForm({
             gap: 2,
             mt: 2,
             alignItems: 'center',
+            mx: 3,
           }}
         >
           <TextField
@@ -161,7 +196,6 @@ export default function PhoneEditForm({
             }
             sx={{ flex: '1 1 240px', minWidth: 0 }}
             placeholder={t('settingForm.verificationCode')}
-            inputProps={{ dir: 'rtl', style: { textAlign: 'right' } }}
           />
 
           <Button
@@ -169,26 +203,12 @@ export default function PhoneEditForm({
             onClick={handleVerifyClick}
             disabled={isVerifying || verificationCode.length === 0}
             sx={{
-              textTransform: 'none',
+              minWidth: { xs: '100%', sm: 220 },
-              minWidth: { xs: '100%', sm: 170 },
               bgcolor: 'primary.main',
-              height: 56,
             }}
           >
             {isVerifying ? (
-              <Box
+              <CircularProgress size={20} />
-                component="span"
-                sx={{
-                  display: 'flex',
-                  animation: 'spin 1s linear infinite',
-                  '@keyframes spin': {
-                    '0%': { transform: 'rotate(0deg)' },
-                    '100%': { transform: 'rotate(360deg)' },
-                  },
-                }}
-              >
-                <Refresh size="20" color="white" />
-              </Box>
             ) : (
               t('settingForm.checkCode')
             )}
@@ -203,6 +223,6 @@ export default function PhoneEditForm({
       >
         {t('settingForm.successfulChangePhone')}
       </Toast>
-    </Box>
+    </>
   );
 }

src/features/profile/components/userInformation/socialMedia/SocialMediaDialog.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ReactElement, type ElementType } from 'react';
 import {
   Box,
   Button,
@@ -11,15 +11,28 @@ import {
 } from '@mui/material';
 import Slide from '@mui/material/Slide';
 import type { TransitionProps } from '@mui/material/transitions';
-import { CloseSquare, Google, Apple } from 'iconsax-react';
+import { CloseCircle } from 'iconsax-react';
+import { Icon } from '@rkheftan/harmony-ui';
 
 const MobileSlide = React.forwardRef(function MobileSlide(
-  props: TransitionProps & { children: React.ReactElement<any, any> },
+  props: TransitionProps & { children: ReactElement<unknown, ElementType> },
   ref: React.Ref<unknown>,
 ) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
+interface SocialMediaDialogProps {
+  open: boolean;
+  onClose: () => void;
+  t: (key: string) => string;
+  emailInput: string;
+  setEmailInput: (val: string) => void;
+  emailError: boolean;
+  setEmailError: (val: boolean) => void;
+  fullScreen: boolean;
+  computedMaxWidth: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
 export default function SocialMediaDialog({
   open,
   onClose,
@@ -30,17 +43,7 @@ export default function SocialMediaDialog({
   setEmailError,
   fullScreen,
   computedMaxWidth,
-}: {
+}: SocialMediaDialogProps) {
-  open: boolean;
-  onClose: () => void;
-  t: (key: string) => string;
-  emailInput: string;
-  setEmailInput: (val: string) => void;
-  emailError: boolean;
-  setEmailError: (val: boolean) => void;
-  fullScreen: boolean;
-  computedMaxWidth: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-}) {
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setEmailInput(value);
@@ -59,30 +62,25 @@ export default function SocialMediaDialog({
       TransitionComponent={fullScreen ? MobileSlide : undefined}
       PaperProps={{
         sx: {
-          m: { xs: 0, sm: 2 },
           borderRadius: { xs: 0, sm: 2 },
-          width: { xs: '100%', sm: 'auto' },
+          width: { xs: '100%', sm: '30%' },
-          height: { xs: '100%', sm: 'auto' },
+          height: { xs: '100%', sm: '43%' },
         },
       }}
     >
       <DialogTitle
         sx={{
           display: 'flex',
-          flexDirection: 'row',
           alignItems: 'center',
           fontWeight: 'bold',
           fontSize: '16px',
           gap: 1,
           p: { xs: 1.5, sm: 2 },
-          position: { xs: 'sticky', sm: 'static' },
+          bgcolor: 'background.default',
-          top: 0,
-          bgcolor: 'background.paper',
-          zIndex: 1,
         }}
       >
         <IconButton onClick={onClose} aria-label="Close">
-          <CloseSquare size={24} color="#82B1FF" />
+          <Icon Component={CloseCircle} size="medium" color="primary.main" />
         </IconButton>
         {t('settingForm.addEmailButton')}
       </DialogTitle>
@@ -90,11 +88,9 @@ export default function SocialMediaDialog({
       <DialogContent
         dividers
         sx={{
-          width: '100%',
           display: 'flex',
           flexDirection: 'column',
           gap: 2,
-          px: { xs: 2, sm: 3 },
           py: { xs: 1.5, sm: 2 },
         }}
       >
@@ -128,59 +124,6 @@ export default function SocialMediaDialog({
         >
           {t('settingForm.verificationCodeButton')}
         </Button>
-
-        <Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
-          <Box sx={{ flex: 1, height: 1, bgcolor: 'divider' }} />
-          <Typography sx={{ mx: 1, fontSize: 12, color: 'text.secondary' }}>
-            {t('settingForm.or')}
-          </Typography>
-          <Box sx={{ flex: 1, height: 1, bgcolor: 'divider' }} />
-        </Box>
-
-        <Box
-          sx={{
-            display: 'flex',
-            gap: 1,
-            flexDirection: { xs: 'column', sm: 'row' },
-          }}
-        >
-          <Button
-            fullWidth
-            sx={{
-              textTransform: 'none',
-              border: 2,
-              borderColor: 'primary.main',
-              color: 'primary.main',
-              borderRadius: 2,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <Google
-              size="20"
-              color="#4285F4"
-              style={{ marginInlineStart: 8 }}
-            />
-            {t('settingForm.google')}
-          </Button>
-          <Button
-            fullWidth
-            sx={{
-              textTransform: 'none',
-              border: 2,
-              borderColor: 'primary.main',
-              color: 'primary.main',
-              borderRadius: 2,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <Apple size="20" color="black" style={{ marginInlineStart: 8 }} />
-            {t('settingForm.apple')}
-          </Button>
-        </Box>
       </DialogContent>
     </Dialog>
   );

src/features/profile/components/userInformation/socialMedia/SocialMediaList.tsx

@@ -1,16 +1,17 @@
 import { Box, Typography, IconButton } from '@mui/material';
-import { Google, Apple, Sms, Trash } from 'iconsax-react';
+import { Google, Sms, Trash } from 'iconsax-react';
+import { Icon } from '@rkheftan/harmony-ui';
 
-export default function SocialMediaList({
+interface SocialMediaListProps {
-  emailList,
-}: {
   t: (key: string) => string;
   emailList: readonly {
     email: string;
     provider: 'email' | 'google' | 'apple';
     time: string;
   }[];
-}) {
+}
+
+export default function SocialMediaList({ emailList }: SocialMediaListProps) {
   return (
     <Box sx={{ width: '100%', borderRadius: '8px', p: { xs: 1, sm: 2 } }}>
       {emailList.map((item, index) => (
@@ -33,15 +34,34 @@ export default function SocialMediaList({
               minWidth: 0,
             }}
           >
-            {item.provider === 'google' && (
+            <Box
-              <Google size="20" variant="Bold" color="#4285F4" />
+              sx={{
-            )}
+                backgroundColor: 'primary.light',
-            {item.provider === 'apple' && (
+                width: 40,
-              <Apple size="20" variant="Bold" color="black" />
+                height: 40,
-            )}
+                alignItems: 'center',
-            {item.provider === 'email' && (
+                justifyContent: 'center',
-              <Sms size="20" variant="Bold" color="#1976d2" />
+                display: 'flex',
-            )}
+                borderRadius: 0.5,
+              }}
+            >
+              {item.provider === 'google' && (
+                <Icon
+                  Component={Google}
+                  size="medium"
+                  color="primary.main"
+                  variant="Bold"
+                />
+              )}
+              {item.provider === 'email' && (
+                <Icon
+                  Component={Sms}
+                  size="medium"
+                  variant="Bold"
+                  color="primary.main"
+                />
+              )}
+            </Box>
 
             <Box sx={{ minWidth: 0 }}>
               <Typography variant="h6" noWrap>
@@ -53,8 +73,8 @@ export default function SocialMediaList({
             </Box>
           </Box>
 
-          <IconButton size="small" aria-label="Delete">
+          <IconButton aria-label="Delete">
-            <Trash size="20" color="gray" variant="Outline" />
+            <Icon Component={Trash} size="medium" variant="Outline" />
           </IconButton>
         </Box>
       ))}

src/features/profile/components/userInformation/socialMedia/SocialMediaMenu.tsx

@@ -8,27 +8,35 @@ import {
   ListItemText,
 } from '@mui/material';
 import { Message, Google, Apple, ArrowDown3 } from 'iconsax-react';
+import { Icon } from '@rkheftan/harmony-ui';
+
+interface SocialMediaMenuProps {
+  t: (key: string) => string;
+  onOpenDialog: () => void;
+}
 
 export default function SocialMediaMenu({
   t,
   onOpenDialog,
-}: {
+}: SocialMediaMenuProps) {
-  t: (key: string) => string;
-  onOpenDialog: () => void;
-}) {
   const [anchor, setAnchor] = useState<null | HTMLElement>(null);
   const openMenu = Boolean(anchor);
+  const [open, setOpen] = useState(false);
 
-  const handleClickMenu = (e: React.MouseEvent<HTMLButtonElement>) =>
+  const handleClickMenu = (e: React.MouseEvent<HTMLButtonElement>) => {
+    setOpen(true);
     setAnchor(e.currentTarget);
-  const handleCloseMenu = () => setAnchor(null);
+  };
+  const handleCloseMenu = () => {
+    setOpen(false);
+    setAnchor(null);
+  };
 
   return (
     <Box
       sx={{
         display: 'flex',
         justifyContent: 'flex-start',
-        flexWrap: 'wrap',
         gap: 1,
       }}
     >
@@ -38,40 +46,28 @@ export default function SocialMediaMenu({
           flexDirection: { xs: 'column', sm: 'row' },
           alignItems: { xs: 'stretch', sm: 'flex-start' },
           gap: 1,
-          width: '100%',
         }}
       >
         <Button
           onClick={handleClickMenu}
           variant="outlined"
           sx={{
-            width: '100%',
-            maxWidth: { sm: 187 },
-            textTransform: 'none',
             border: '1px solid',
-            borderColor: 'primary.main',
+            borderRadius: 1,
-            borderRadius: '8px',
-            color: 'primary.main',
-            fontSize: '14px',
-            px: 2,
-            py: 1,
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
             whiteSpace: 'nowrap',
+            backgroundColor: open ? 'primary.light' : 'primary.default',
           }}
         >
-          <Box
+          <Box component="span">{t('settingForm.addEmailOrSocialButton')}</Box>
-            component="span"
+          <Icon
-            sx={{
+            Component={ArrowDown3}
-              overflow: 'hidden',
+            size="medium"
-              textOverflow: 'ellipsis',
+            color="primary.main"
-              direction: 'rtl',
+            variant={open ? 'Bold' : 'Outline'}
-            }}
+          />
-          >
-            {t('settingForm.addEmailOrSocialButton')}
-          </Box>
-          <ArrowDown3 size="20" color="#2979FF" />
         </Button>
       </Box>
 
@@ -81,7 +77,7 @@ export default function SocialMediaMenu({
         onClose={handleCloseMenu}
         PaperProps={{
           sx: {
-            minWidth: 240,
+            minWidth: 187,
             maxWidth: '90vw',
           },
         }}
@@ -95,19 +91,19 @@ export default function SocialMediaMenu({
           }}
         >
           <ListItemIcon>
-            <Message size={20} color="black" />
+            <Icon Component={Message} size="medium" color="primary.main" />
           </ListItemIcon>
           <ListItemText>{t('settingForm.email')}</ListItemText>
         </MenuItem>
         <MenuItem>
           <ListItemIcon>
-            <Google size={20} color="#4285F4" />
+            <Icon Component={Google} size="medium" color="primary.main" />
           </ListItemIcon>
           <ListItemText>{t('settingForm.google')}</ListItemText>
         </MenuItem>
         <MenuItem>
           <ListItemIcon>
-            <Apple size={20} color="black" />
+            <Icon Component={Apple} size="medium" color="primary.main" />
           </ListItemIcon>
           <ListItemText>{t('settingForm.apple')}</ListItemText>
         </MenuItem>

src/features/profile/types.ts

@@ -0,0 +1,13 @@
+export enum Gender {
+  Male = 'male',
+  Female = 'female',
+  None = '',
+}
+
+export interface InfoRowData {
+  firstName: string;
+  lastName: string;
+  nationalCode: string;
+  country: string;
+  gender: Gender;
+}

src/providers/CustomThemeProvider.tsx

@@ -27,6 +27,15 @@ export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({
       },
       spacing: 8,
       typography: typography,
+      components: {
+        MuiButton: {
+          defaultProps: {
+            sx: {
+              textTransform: 'none',
+            },
+          },
+        },
+      },
     });
   }, [i18n]);