From 40c0415b63d0bbb5aeec2ac125d96a2189ec404d Mon Sep 17 00:00:00 2001
From: Koosha Lahouti <klahouti81@gmail.com>
Date: Wed, 23 Jul 2025 21:38:01 +0330
Subject: [PATCH] feat: responsive design and english translator for this
 section

---
 public/locales/en/profileSetting.json         |  41 +++
 src/App.tsx                                   |  25 +-
 src/components/CardContainer.tsx              |  16 +-
 .../components/PersonalInformation.tsx        | 170 ++++++-----
 .../profile/components/PhoneNumber.tsx        |  87 +++---
 .../profile/components/SocialMedia.tsx        | 122 +++++---
 .../profile/components/UserProfileForm.tsx    | 286 ------------------
 7 files changed, 276 insertions(+), 471 deletions(-)
 create mode 100644 public/locales/en/profileSetting.json
 delete mode 100644 src/features/profile/components/UserProfileForm.tsx

diff --git a/public/locales/en/profileSetting.json b/public/locales/en/profileSetting.json
new file mode 100644
index 0000000..3cd0346
--- /dev/null
+++ b/public/locales/en/profileSetting.json
@@ -0,0 +1,41 @@
+{
+  "settingForm": {
+    "titlePersonalInfo": "My Personal Information",
+    "descriptionPersonalInfo": "This information is only for your identification and remains with Harmony.",
+    "titlePhoneNumber": "My phone number",
+    "descriptionPhoneNumber": "This information is only for your identification and remains with Harmony.",
+    "titleSocial": "My email and social medias",
+    "descriptionSocial": "This information is only for your identification and remains with Harmony.",
+    "rejectButton": "Cancel",
+    "saveButton": "Save",
+    "editButton": "Edit",
+    "editPhoneNumber": "Change phone number",
+    "addEmailOrSocialButton": "Add email / social",
+    "addEmailButton": "Add email",
+    "name": "Name",
+    "familyName": "Family Name",
+    "country": "Country",
+    "gender": "Gender",
+    "nationalCode": "National code",
+    "man": "Male",
+    "woman": "Female",
+    "genderPlaceholder": "Male",
+    "newPhoneNumber": "New phone number",
+    "verificationCodeButton": "Send verification code",
+    "verificationCode": "Verification code",
+    "checkCode": "Check code",
+    "successButton": "Confirmed",
+    "email": "Email",
+    "apple": "Apple",
+    "google": "Google",
+    "newEmail": "New email",
+    "dialogHeader": "By activating your email, you can use this email to log in the next time you log in.",
+    "or": "Or",
+    "emailError": "Please enter a valid email.",
+    "profilePicture": "User account image",
+    "allowedFormat": "Allowed formats: PNG, JPEG, GIF (maximum 10 MB)",
+    "uploadPicture": "Upload image",
+    "phoneNumberText": "Your new contact number will replace your previous contact number.",
+    "verb": "."
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
index 47481fa..853a2c8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,31 +9,8 @@ import {
 import './App.css';
 import { useTranslation } from 'react-i18next';
 import { LanguageManager } from './components/LanguageManager';
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-
-=======
->>>>>>> f1620b6 (fix: issue in user profile)
-=======
-=======
-import { UserProfileForm } from './features/profile/components/UserProfileForm';
-
->>>>>>> 3698cbf (feat: implement user profile form)
->>>>>>> f9815fb (fix: issue in user profile)
-=======
->>>>>>> 2a79376 (fix: merge conflict)
-=======
 import { UserForm } from './features/profile/components/UserForm';
->>>>>>> 60c6dc1 (fix: styles)
-=======
->>>>>>> afc7ff8 (fix: translation and styles)
-=======
-import { UserForm } from './features/profile/components/UserForm';
->>>>>>> b327e7a (fix: styles and add a country textfield in personal field)
+
 function App() {
   const { t } = useTranslation();
 
diff --git a/src/components/CardContainer.tsx b/src/components/CardContainer.tsx
index d62672b..80250f0 100644
--- a/src/components/CardContainer.tsx
+++ b/src/components/CardContainer.tsx
@@ -1,4 +1,5 @@
 import { Box, Typography } from '@mui/material';
+
 export function CardContainer({
   title,
   subtitle,
@@ -15,13 +16,16 @@ export function CardContainer({
   return (
     <Box
       sx={{
-        maxWidth: '786px',
         width: '100%',
-        backgroundColor: 'white',
+        maxWidth: {
+          xs: '100%',
+          sm: '500pxpx',
+          md: '786px',
+        },
         display: 'flex',
         flexDirection: 'column',
         gap: 2,
-        px: 2,
+        px: { xs: 2, sm: 3, md: 4 },
         py: 2,
       }}
     >
@@ -30,7 +34,7 @@ export function CardContainer({
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center',
-          backgroundColor: highlighted ? '#E3F2FD' : '#F5F5F5',
+          backgroundColor: highlighted ? 'primary.light' : 'background.default',
           p: 2,
           borderRadius: 1,
         }}
@@ -38,12 +42,12 @@ export function CardContainer({
         <Box sx={{ display: 'flex', flexDirection: 'column' }}>
           <Typography
             variant="h6"
-            color={highlighted ? '#2979FF' : 'text.primary'}
+            color={highlighted ? 'primary.main' : 'text.primary'}
           >
             {title}
           </Typography>
           <Typography
-            color={highlighted ? '#2979FF' : 'text.secondary'}
+            color={highlighted ? 'primary.main' : 'text.secondary'}
             variant="body2"
           >
             {subtitle}
diff --git a/src/features/profile/components/PersonalInformation.tsx b/src/features/profile/components/PersonalInformation.tsx
index 291d075..a195047 100644
--- a/src/features/profile/components/PersonalInformation.tsx
+++ b/src/features/profile/components/PersonalInformation.tsx
@@ -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>
diff --git a/src/features/profile/components/PhoneNumber.tsx b/src/features/profile/components/PhoneNumber.tsx
index 26b402e..e3bce9e 100644
--- a/src/features/profile/components/PhoneNumber.tsx
+++ b/src/features/profile/components/PhoneNumber.tsx
@@ -56,7 +56,7 @@ export function PhoneNumber() {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        // p: 2,
+        px: 2,
       }}
     >
       <CardContainer
@@ -70,7 +70,11 @@ export function PhoneNumber() {
                 variant="text"
                 onClick={toggleEdit}
                 size="large"
-                sx={{ color: '#2979FF', width: '43px' }}
+                sx={{
+                  color: 'primary.main',
+                  textTransform: 'none',
+                  width: '43px',
+                }}
               >
                 {t('settingForm.rejectButton')}
               </Button>
@@ -80,12 +84,16 @@ export function PhoneNumber() {
               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',
                 width: isEditing ? '85px' : '161px',
+                whiteSpace: 'nowrap',
               }}
             >
               {isEditing
@@ -96,9 +104,9 @@ export function PhoneNumber() {
         }
       >
         {isEditing ? (
-          <Box sx={{ px: 4 }}>
-            <Box sx={{ width: '668px', mb: 2 }}>
-              <Typography variant="h6" color="text.primary">
+          <Box sx={{ px: { xs: 2, sm: 4 } }}>
+            <Box sx={{ mb: 2 }}>
+              <Typography variant="h6">
                 {t('settingForm.editPhoneNumber')}
               </Typography>
               <Typography variant="body2" color="text.secondary">
@@ -110,19 +118,18 @@ export function PhoneNumber() {
             <Box
               sx={{
                 display: 'flex',
-                alignItems: 'center',
-                width: '700px',
+                flexWrap: 'wrap',
                 gap: 2,
               }}
             >
               <TextField
                 name="phoneNumber"
-                placeholder="09123456789"
                 label={t('settingForm.newPhoneNumber')}
                 type="tel"
                 value={phoneNumber}
                 onChange={handlePhoneNumberChange}
-                sx={{ width: '100%', maxWidth: '474px' }}
+                sx={{ flex: 1, minWidth: '250px' }}
+                placeholder="09123456789"
                 inputProps={{
                   dir: 'rtl',
                   style: { textAlign: 'right' },
@@ -132,10 +139,13 @@ export function PhoneNumber() {
                     buttonState === 'counting' ? (
                       <IconButton
                         size="small"
-                        onClick={() => setButtonState('default')}
+                        onClick={() => {
+                          setButtonState('default');
+                          setPhoneNumber('');
+                        }}
                         sx={{ mr: 1 }}
                       >
-                        <Edit size="24" color="#2979FF" />
+                        <Edit size="24" color="#64B5F6" />
                       </IconButton>
                     ) : null,
                 }}
@@ -144,25 +154,30 @@ export function PhoneNumber() {
               {isVerified ? (
                 <Box
                   sx={{
-                    width: '100%',
-                    maxWidth: '194px',
                     display: 'flex',
                     alignItems: 'center',
-                    justifyContent: 'center',
-                    color: 'success.main',
                     gap: 1,
                   }}
                 >
-                  <TickCircle size="20" color="#2e7d32" variant="Bold" />
-                  {t('settingForm.successButton')}
+                  <TickCircle
+                    size="24"
+                    style={{ color: 'black' }}
+                    variant="Bold"
+                  />
+                  <Typography sx={{ color: 'success.main' }}>
+                    {t('settingForm.successButton')}
+                  </Typography>
                 </Box>
               ) : (
                 <Button
                   variant="text"
-                  sx={{ width: '100%', maxWidth: '194px', color: '#2979FF' }}
-                  size="large"
                   onClick={handleSendCode}
                   disabled={buttonState === 'counting'}
+                  sx={{
+                    textTransform: 'none',
+                    minWidth: '170px',
+                    color: 'primary.main',
+                  }}
                 >
                   {buttonState === 'counting' ? (
                     <CountDownTimer
@@ -180,32 +195,32 @@ export function PhoneNumber() {
               <Box
                 sx={{
                   display: 'flex',
-                  alignItems: 'center',
-                  width: '700px',
+                  flexWrap: 'wrap',
                   gap: 2,
                   mt: 2,
                 }}
               >
                 <TextField
                   name="verificationCode"
-                  placeholder={t('settingForm.verificationCode')}
                   label={t('settingForm.verificationCode')}
                   type="tel"
                   value={verificationCode}
                   onChange={handleVerificationCodeChange}
-                  sx={{ width: '100%', maxWidth: '474px' }}
+                  sx={{ flex: 1, minWidth: '250px' }}
+                  placeholder={t('settingForm.verificationCode')}
+                  inputProps={{
+                    dir: 'rtl',
+                    style: { textAlign: 'right' },
+                  }}
                 />
                 <Button
                   variant="contained"
-                  size="large"
                   onClick={handleVerifyCode}
                   disabled={isVerifying || verificationCode.length === 0}
                   sx={{
-                    width: '100%',
-                    maxWidth: '194px',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    backgroundColor: '#2979FF',
+                    textTransform: 'none',
+                    minWidth: '170px',
+                    backgroundColor: 'primary.main',
                   }}
                 >
                   {isVerifying ? (
@@ -226,18 +241,16 @@ export function PhoneNumber() {
             )}
           </Box>
         ) : (
-          <Box sx={{ px: 4 }}>
+          <Box sx={{ px: { xs: 2, sm: 4 } }}>
             {phones.map((item, index) => (
               <Box
                 key={index}
                 sx={{
-                  height: '76px',
                   display: 'flex',
                   flexDirection: 'column',
                   justifyContent: 'center',
-                  // mb: 1,
-                  width: '690px',
-                  // mt: 1,
+                  py: 1,
+                  width: '100%',
                 }}
               >
                 <Typography variant="h6" color="text.primary">
diff --git a/src/features/profile/components/SocialMedia.tsx b/src/features/profile/components/SocialMedia.tsx
index 5631bda..51f6a82 100644
--- a/src/features/profile/components/SocialMedia.tsx
+++ b/src/features/profile/components/SocialMedia.tsx
@@ -54,37 +54,67 @@ export function SocialMedia() {
   return (
     <Box
       sx={{
-        // backgroundColor: '#F5F5F5',
         display: 'flex',
         justifyContent: 'center',
-        // p: 2,
+        alignItems: 'center',
+        px: 2,
       }}
     >
       <CardContainer
         title={t('settingForm.titleSocial')}
         subtitle={t('settingForm.descriptionSocial')}
         action={
-          <Box sx={{ display: 'flex', justifyContent: 'flex-start' }}>
-            <Button
-              onClick={handleClickMenu}
-              variant="outlined"
-              size="large"
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'flex-start',
+              flexWrap: 'wrap',
+              gap: 1,
+            }}
+          >
+            <Box
               sx={{
-                maxWidth: '187px',
-                height: '42px',
-                border: '1px solid',
-                borderColor: '#2979FF',
-                borderRadius: '8px',
-                color: '#2979FF',
-                fontSize: '14px',
                 display: 'flex',
-                justifyContent: 'space-between',
-                px: 2,
+                flexDirection: { xs: 'column', sm: 'row' },
+                alignItems: { xs: 'stretch', sm: 'flex-start' },
+                gap: 1,
+                width: '100%',
               }}
             >
-              {t('settingForm.addEmailOrSocialButton')}
-              {openMenu && <ArrowDown3 size="20" color="#2979FF" />}
-            </Button>
+              <Button
+                onClick={handleClickMenu}
+                variant="outlined"
+                sx={{
+                  width: '100%',
+                  maxWidth: { sm: '187px' },
+                  textTransform: 'none',
+                  border: '1px solid',
+                  borderColor: 'primary.main',
+                  borderRadius: '8px',
+                  color: 'primary.main',
+                  fontSize: '14px',
+                  px: 2,
+                  py: 1,
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                <Box
+                  component="span"
+                  sx={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    direction: 'rtl',
+                  }}
+                >
+                  {t('settingForm.addEmailOrSocialButton')}
+                </Box>
+                <ArrowDown3 size="20" color="#2979FF" />
+              </Button>
+            </Box>
+
             <Menu
               anchorEl={anchor}
               open={openMenu}
@@ -125,9 +155,9 @@ export function SocialMedia() {
         <Box
           sx={{
             width: '100%',
-            backgroundColor: 'white',
+            backgroundColor: 'background.paper',
             borderRadius: '8px',
-            p: 2,
+            p: { xs: 1, sm: 2 },
           }}
         >
           {emailList.map((item, index) => (
@@ -137,40 +167,25 @@ export function SocialMedia() {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'space-between',
-                p: 1,
+                flexWrap: 'wrap',
+                py: 1,
+                gap: 1,
                 borderBottom:
                   index !== emailList.length - 1 ? '1px solid #eee' : 'none',
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 {item.provider === 'google' && (
-                  <Google
-                    size="20"
-                    variant="Bold"
-                    color="#4285F4"
-                    style={{ marginLeft: 8 }}
-                  />
+                  <Google size="20" variant="Bold" color="#4285F4" />
                 )}
                 {item.provider === 'apple' && (
-                  <Apple
-                    size="20"
-                    variant="Bold"
-                    color="black"
-                    style={{ marginLeft: 8 }}
-                  />
+                  <Apple size="20" variant="Bold" color="black" />
                 )}
                 {item.provider === 'email' && (
-                  <Sms
-                    size="20"
-                    variant="Bold"
-                    color="#1976d2"
-                    style={{ marginLeft: 8 }}
-                  />
+                  <Sms size="20" variant="Bold" color="#1976d2" />
                 )}
                 <Box>
-                  <Typography sx={{ fontWeight: 'bold', fontSize: '14px' }}>
-                    {item.email}
-                  </Typography>
+                  <Typography variant="h6">{item.email}</Typography>
                   <Typography variant="caption" color="text.secondary">
                     {item.time}
                   </Typography>
@@ -194,14 +209,14 @@ export function SocialMedia() {
               display: 'flex',
               flexDirection: 'row',
               alignItems: 'center',
-              backgroundColor: '#F5F5F5',
+              // backgroundColor: 'background.paper',
               fontWeight: 'bold',
               fontSize: '16px',
               gap: 1,
             }}
           >
             <IconButton onClick={handleCloseDialog} size="small">
-              <CloseSquare size="24" color="gray" />
+              <CloseSquare size="24" color="#F5F5F5" />
             </IconButton>
             {t('settingForm.addEmailButton')}
           </DialogTitle>
@@ -241,6 +256,7 @@ export function SocialMedia() {
                 variant="contained"
                 fullWidth
                 sx={{
+                  textTransform: 'none',
                   borderRadius: '8px',
                   backgroundColor: '#1976d2',
                 }}
@@ -257,10 +273,17 @@ export function SocialMedia() {
                 <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
               </Box>
 
-              <Box sx={{ display: 'flex', gap: 1 }}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  gap: 1,
+                  flexDirection: { xs: 'column', sm: 'row' },
+                }}
+              >
                 <Button
+                  fullWidth
                   sx={{
-                    width: '50%',
+                    textTransform: 'none',
                     border: 2,
                     borderColor: '#1976d2',
                     color: '#1976d2',
@@ -274,8 +297,9 @@ export function SocialMedia() {
                   {t('settingForm.google')}
                 </Button>
                 <Button
+                  fullWidth
                   sx={{
-                    width: '50%',
+                    textTransform: 'none',
                     border: 2,
                     borderColor: '#1976d2',
                     color: '#1976d2',
diff --git a/src/features/profile/components/UserProfileForm.tsx b/src/features/profile/components/UserProfileForm.tsx
deleted file mode 100644
index 87a9a91..0000000
--- a/src/features/profile/components/UserProfileForm.tsx
+++ /dev/null
@@ -1,286 +0,0 @@
-import {
-  Box,
-  Typography,
-  Button,
-  TextField,
-  Grid,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
-  type SelectChangeEvent,
-} from '@mui/material';
-import { useState, type ChangeEvent } from 'react';
-
-export function UserProfileForm() {
-  const [isEditing, setIsEditing] = useState(false);
-  const [gender, setGender] = useState('');
-  const [data, setData] = useState({
-    firstName: 'محمد حسین',
-    lastName: 'برزه‌گر',
-    gender: 'مرد',
-    nationalCode: '',
-  });
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setData((prev) => ({
-      ...prev,
-      [e.target.name]: e.target.value,
-    }));
-  };
-
-  const toggleEdit = () => {
-    setIsEditing((prev) => !prev);
-  };
-  const handleChangeGender = (e: SelectChangeEvent) => {
-    setGender(e.target.value);
-  };
-  const displayValue = (value: string | null | undefined) => {
-    return value && value.trim() !== '' ? value : 'تعیین نشده';
-  };
-
-  return (
-    <div
-      dir="rtl"
-      style={{
-        backgroundColor: '#F5F5F5',
-        minHeight: '100vh',
-        minWidth: '100vw',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <Box
-        sx={{
-          width: '500px',
-          backgroundColor: 'white',
-          border: '1px solid #ccc',
-          borderRadius: 2,
-          padding: 5,
-          margin: '40px auto',
-          boxShadow: 2,
-          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="h5"
-              sx={{ color: isEditing ? '#1976d2' : 'gray' }}
-            >
-              اطلاعات شخصی من
-            </Typography>
-            <Typography
-              sx={{ color: isEditing ? '#1976d2' : 'gray', fontSize: '13px' }}
-            >
-              این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی
-              می‌ماند
-            </Typography>
-          </Box>
-          <Button
-            onClick={toggleEdit}
-            sx={{
-              border: 0.5,
-              borderColor: '#1976d2',
-              borderRadius: '5px',
-              backgroundColor: isEditing ? '#1976d2' : 'white',
-              color: isEditing ? 'white' : '#1976d2',
-              width: '80px',
-              height: '30px',
-            }}
-          >
-            {isEditing ? 'ذخیره' : 'ویرایش'}
-          </Button>
-        </Box>
-
-        <Grid container spacing={0.5}>
-          <Grid item xs={12} sm={6}>
-            <Box sx={{ mb: 2 }}>
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
->>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
-              <Typography
-                variant="subtitle2"
-                sx={{ color: 'gray', fontSize: '14px', ml: '34vh' }}
-              >
-                نام
-              </Typography>
-<<<<<<< HEAD
-=======
-              <Typography variant="subtitle2">نام</Typography>
->>>>>>> f9815fb (fix: issue in user profile)
-=======
->>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
-              {isEditing ? (
-                <TextField
-                  fullWidth
-                  name="firstName"
-                  label="نام"
-                  value={data.firstName}
-                  onChange={handleChange}
-                  sx={{ width: '230px' }}
-                  inputProps={{
-                    sx: {
-                      height: '12px',
-<<<<<<< HEAD
-<<<<<<< HEAD
-                      fontSize: '16px',
-                      fontWeight: 'bold',
-                      direction: 'rtl',
-=======
->>>>>>> f9815fb (fix: issue in user profile)
-=======
-                      fontSize: '16px',
-                      fontWeight: 'bold',
-                      direction: 'rtl',
->>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
-                    },
-                  }}
-                />
-              ) : (
-                <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
-                  {displayValue(data.firstName)}
-                </Typography>
-              )}
-            </Box>
-
-            <Box>
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
->>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
-              <Typography
-                variant="subtitle2"
-                sx={{ color: 'gray', fontSize: '14px' }}
-              >
-                جنسیت
-              </Typography>
-<<<<<<< HEAD
-=======
-              <Typography variant="subtitle2">جنسیت</Typography>
->>>>>>> f9815fb (fix: issue in user profile)
-=======
->>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
-              {isEditing ? (
-                <FormControl sx={{ width: '230px' }}>
-                  <InputLabel id="sex-label">جنسیت</InputLabel>
-                  <Select
-                    labelId="sex-label"
-                    id="sex"
-                    value={gender}
-                    label="جنسیت"
-                    onChange={handleChangeGender}
-                    sx={{
-                      height: '45px',
-                      '& .MuiSelect-select': {
-                        paddingY: '10px',
-                      },
-                    }}
-                  >
-                    <MenuItem value="female">زن</MenuItem>
-                    <MenuItem value="male">مرد</MenuItem>
-                  </Select>
-                </FormControl>
-              ) : (
-                <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
-                  {displayValue(data.gender)}
-                </Typography>
-              )}
-            </Box>
-          </Grid>
-
-          <Grid item xs={12} sm={6}>
-            <Box sx={{ mb: 2 }}>
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
->>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
-              <Typography
-                variant="subtitle2"
-                sx={{ color: 'gray', fontSize: '14px' }}
-              >
-<<<<<<< HEAD
-=======
-              <Typography variant="subtitle2" sx={{ width: '230px' }}>
->>>>>>> f9815fb (fix: issue in user profile)
-=======
->>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
-                نام خانوادگی
-              </Typography>
-              {isEditing ? (
-                <TextField
-                  fullWidth
-                  name="lastName"
-                  value={data.lastName}
-                  label="نام خانوادگی"
-                  onChange={handleChange}
-                  sx={{ width: '230px' }}
-                  inputProps={{
-                    sx: {
-                      height: '12px',
-                    },
-                  }}
-                />
-              ) : (
-                <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
-                  {displayValue(data.lastName)}
-                </Typography>
-              )}
-            </Box>
-
-            <Box>
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
->>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
-              <Typography
-                variant="subtitle2"
-                sx={{ color: 'gray', fontSize: '14px' }}
-              >
-                کد ملی
-              </Typography>
-<<<<<<< HEAD
-=======
-              <Typography variant="subtitle2">کد ملی</Typography>
->>>>>>> f9815fb (fix: issue in user profile)
-=======
->>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
-              {isEditing ? (
-                <TextField
-                  fullWidth
-                  name="nationalCode"
-                  label="کد ملی"
-                  value={data.nationalCode}
-                  onChange={handleChange}
-                  sx={{ width: '230px' }}
-                  inputProps={{
-                    sx: {
-                      height: '12px',
-                    },
-                  }}
-                />
-              ) : (
-                <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
-                  {displayValue(data.nationalCode)}
-                </Typography>
-              )}
-            </Box>
-          </Grid>
-        </Grid>
-      </Box>
-    </div>
-  );
-}