feat: language can be changed between persian and english and everything got responsive

package-lock.json

@@ -17,8 +17,10 @@
         "i18next-http-backend": "^3.0.2",
         "iconsax-react": "^0.0.8",
         "react": "^19.1.0",
+        "react-country-flag": "^3.1.0",
         "react-dom": "^19.1.0",
         "react-i18next": "^15.6.0",
+        "react-virtuoso": "^4.13.0",
         "stylis": "^4.3.6",
         "stylis-plugin-rtl": "^2.1.1"
       },
@@ -1067,9 +1069,9 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.3.3",
+      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.4.tgz",
-      "integrity": "sha512-1+WqvgNMhmlAambTvT3KPtCl/Ibr68VldY2XY40SL1CE0ZXiakFR/cbTspaF5HsnpDMvcYYoJHfl4980NBjGag==",
+      "integrity": "sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -3722,6 +3724,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-country-flag": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.1.0.tgz",
+      "integrity": "sha512-JWQFw1efdv9sTC+TGQvTKXQg1NKbDU2mBiAiRWcKM9F1sK+/zjhP2yGmm8YDddWyZdXVkR8Md47rPMJmo4YO5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
@@ -3792,6 +3806,16 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-virtuoso": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.13.0.tgz",
+      "integrity": "sha512-XHv2Fglpx80yFPdjZkV9d1baACKghg/ucpDFEXwaix7z0AfVQj+mF6lM+YQR6UC/TwzXG2rJKydRMb3+7iV3PA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16 || >=17 || >= 18 || >= 19",
+        "react-dom": ">=16 || >=17 || >= 18 || >=19"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",

package.json

@@ -20,8 +20,10 @@
     "i18next-http-backend": "^3.0.2",
     "iconsax-react": "^0.0.8",
     "react": "^19.1.0",
+    "react-country-flag": "^3.1.0",
     "react-dom": "^19.1.0",
     "react-i18next": "^15.6.0",
+    "react-virtuoso": "^4.13.0",
     "stylis": "^4.3.6",
     "stylis-plugin-rtl": "^2.1.1"
   },

public/locales/en/setting.json

@@ -9,6 +9,10 @@
     "light": "Light",
     "dark": "Dark",
     "language": "زبان/language",
-    "calendar": "Calendar and date format"
+    "calendar": "Calendar and date format",
+    "solar": "Solar",
+    "lunar": "Lunar",
+    "christian": "Christian",
+    "iran": "Iran"
   }
 }

public/locales/fa/setting.json

@@ -9,6 +9,10 @@
     "light": "روشن",
     "dark": "تاریک",
     "language": "زبان/language",
-    "calendar": "فرمت تقویم و تاریخ"
+    "calendar": "فرمت تقویم و تاریخ",
+    "solar": "شمسی",
+    "lunar": "قمری",
+    "christian": "میلادی",
+    "iran": "ایران"
   }
 }

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

@@ -45,6 +45,7 @@ export function ActiveDevices() {
         maxWidth: '834px',
         mx: 'auto',
         px: { xs: 2, sm: 3 },
+        py: 4,
       }}
     >
       <Box
@@ -57,15 +58,8 @@ export function ActiveDevices() {
       >
         <Logo />
       </Box>
-      <Box
+      <Box sx={{ width: '100%', height: '1px', backgroundColor: 'divider' }} />
-        sx={{
+      <Box sx={{ px: { xs: 2, sm: 3 } }}>
-          //   mt: 2,
-          width: '100%',
-          height: '1px',
-          backgroundColor: 'divider',
-        }}
-      />
-      <Box sx={{ px: 2 }}>
         <Box
           sx={{
             display: 'flex',
@@ -73,10 +67,10 @@ export function ActiveDevices() {
             alignItems: 'center',
             flexWrap: 'wrap',
             gap: 2,
-            maxWidth: '754px',
+            mb: 2,
           }}
         >
-          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <Box>
             <Typography variant="h6">{t('active.activeDevices')}</Typography>
             <Typography variant="body2" color="text.secondary">
               {t('active.activeDevicesCaption')}
@@ -88,25 +82,28 @@ export function ActiveDevices() {
               borderColor: 'error.main',
               color: 'error.main',
               border: '1px solid',
+              textTransform: 'none',
             }}
           >
             {t('active.deletDevicesButton')}
           </Button>
         </Box>
 
-        <Box sx={{ mt: '32px', px: 4 }}>
         {devices.map((device) => (
           <Box
             key={device.id}
             sx={{
               display: 'flex',
+              flexWrap: 'wrap',
               alignItems: 'center',
-                // gap: 1,
+              gap: 1,
               py: 1,
-                width: '690px',
             }}
           >
-              <Typography variant="body2" sx={{ width: '138px' }}>
+            <Typography
+              variant="body2"
+              sx={{ width: { xs: '100%', sm: '138px' } }}
+            >
               {device.timeAndDate}
             </Typography>
 
@@ -114,8 +111,7 @@ export function ActiveDevices() {
               sx={{
                 display: 'flex',
                 alignItems: 'center',
-                  width: '138px',
+                width: { xs: '100%', sm: '138px' },
-                  height: '52px',
                 gap: 1,
               }}
             >
@@ -125,12 +121,20 @@ export function ActiveDevices() {
               </Typography>
             </Box>
 
-              <Typography variant="body2" sx={{ width: '138px' }}>
+            <Typography
+              variant="body2"
+              sx={{ width: { xs: '100%', sm: '138px' } }}
+            >
               {device.ip}
             </Typography>
 
-              <Box sx={{ width: '138px', alignItems: 'center' }}>
+            <Box
-                {device.current ? (
+              sx={{
+                width: { xs: '100%', sm: '138px' },
+                textAlign: { xs: 'left', sm: 'center' },
+              }}
+            >
+              {device.current && (
                 <Button
                   variant="outlined"
                   sx={{
@@ -141,27 +145,42 @@ export function ActiveDevices() {
                     whiteSpace: 'nowrap',
                     color: 'success.main',
                     width: '75%',
+                    textTransform: 'none',
                   }}
                 >
                   {t('active.currentDevice')}
                 </Button>
-                ) : null}
+              )}
             </Box>
 
-              <Box sx={{ width: '138px', alignItems: 'center' }}>
+            <Box
+              sx={{
+                width: { xs: '100%', sm: '138px' },
+                textAlign: { xs: 'left', sm: 'center' },
+              }}
+            >
               <Button
+                size="small"
                 variant="outlined"
                 startIcon={<Logout size={18} color="#E53935" />}
-                  sx={{
-                    width: '80%',
-                    borderRadius: '15px',
-                    border: '1px solid',
-                    borderColor: 'error.main',
-                    height: '30px',
-                    whiteSpace: 'nowrap',
-                    color: 'error.main',
-                  }}
                 disabled={device.current}
+                sx={{
+                  color: 'error.main',
+                  width: '80%',
+                  minWidth: 0,
+                  borderRadius: '15px',
+                  borderColor: 'error.main',
+                  p: '4px 8px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  whiteSpace: 'nowrap',
+                  textTransform: 'none',
+                  '& .MuiButton-startIcon': {
+                    marginRight: '4px',
+                    marginLeft: 0,
+                  },
+                }}
               >
                 {t('active.deleteDevice')}
               </Button>
@@ -170,6 +189,5 @@ export function ActiveDevices() {
         ))}
       </Box>
     </Box>
-    </Box>
   );
 }

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

@@ -8,7 +8,9 @@ import {
   TextField,
   DialogActions,
   IconButton,
+  useMediaQuery,
 } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { useState, useEffect } from 'react';
 import { CloseCircle, Refresh } from 'iconsax-react';
@@ -18,6 +20,8 @@ import Logo from '@/components/Logo';
 import { CardContainer } from '@/components/CardContainer';
 
 export function UserSecurity() {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const { t } = useTranslation('security');
   const [open, setOpen] = useState(false);
   const [password, setPassword] = useState('');
@@ -63,14 +67,14 @@ export function UserSecurity() {
   }, [password, validPassword]);
 
   return (
-    <Box sx={{ overflowX: 'hidden' }}>
+    <Box sx={{ overflowX: 'hidden', px: { xs: 2, sm: 3 }, pb: 4 }}>
       <Box
         sx={{
           backgroundColor: 'background.paper',
           width: '100%',
           maxWidth: '796px',
           mx: 'auto',
-          px: { xs: 2, sm: 3 },
+          px: { xs: 1, sm: 2 },
         }}
       >
         <Box
@@ -79,27 +83,14 @@ export function UserSecurity() {
             justifyContent: 'flex-start',
             alignItems: 'center',
             py: 2,
-            // width: '796px',
           }}
         >
           <Logo />
         </Box>
         <Box
-          sx={{
+          sx={{ width: '100%', height: '1px', backgroundColor: 'divider' }}
-            //   mt: 2,
-            width: '100%',
-            height: '1px',
-            backgroundColor: 'divider',
-          }}
         />
-        <Box
+        <Box sx={{ px: { xs: 2, sm: 3 } }}>
-          sx={{
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: 'background.paper',
-            px: 2,
-          }}
-        >
           <CardContainer
             title={t('securityForm.password')}
             subtitle={t('securityForm.determinePassword')}
@@ -111,7 +102,7 @@ export function UserSecurity() {
                   mt: { xs: 2, sm: 0 },
                   backgroundColor: 'primary.main',
                   color: 'background.paper',
-                  width: '142px',
+                  width: { xs: '100%', sm: '142px' },
                   textTransform: 'none',
                 }}
               >
@@ -119,30 +110,22 @@ export function UserSecurity() {
               </Button>
             }
           >
-            <Box sx={{ height: '111px' }}>
+            <Box sx={{ height: 'auto', py: { xs: 3, sm: 4 } }}>
               {changePassword ? (
-                <Box sx={{ flexDirection: 'column', px: 4, py: 4 }}>
+                <Box sx={{ flexDirection: 'column', px: 2, py: 2 }}>
                   <Typography variant="h6">رمز عبور فعال است</Typography>
                   <Typography variant="caption" color="text.secondary">
                     آخرین تغییر چند ثانیه پیش
                   </Typography>
                 </Box>
               ) : (
-                <Box
-                  sx={{
-                    width: '100%',
-                    maxWidth: '754px',
-                    mx: 'auto',
-                  }}
-                >
                 <Typography
                   variant="body1"
                   color="text.secondary"
-                    sx={{ textAlign: 'center', py: '43.5px' }}
+                  sx={{ textAlign: 'center', py: { xs: 4, sm: '43.5px' } }}
                 >
                   {t('securityForm.notDeterminedPassword')}
                 </Typography>
-                </Box>
               )}
             </Box>
 
@@ -150,21 +133,13 @@ export function UserSecurity() {
               open={open}
               onClose={handleClose}
               fullWidth
+              fullScreen={fullScreen}
               maxWidth="xs"
               scroll="body"
-              PaperProps={{
+              PaperProps={{ sx: { mx: 1 } }}
-                sx: { mx: 1 },
-              }}
             >
               <DialogTitle sx={{ p: 2 }}>
-                <Box
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  sx={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 1,
-                  }}
-                >
                   <IconButton onClick={handleClose}>
                     <CloseCircle size={24} color="#82B1FF" />
                   </IconButton>
@@ -181,14 +156,6 @@ export function UserSecurity() {
                   gap: 2,
                   px: { xs: 2, sm: 3 },
                 }}
-              >
-                <Box
-                  sx={{
-                    width: '100%',
-                    maxWidth: '364px',
-                    mx: 'auto',
-                    mt: '32px',
-                  }}
               >
                 <TextField
                   label={t('securityForm.newPassword')}
@@ -196,34 +163,12 @@ export function UserSecurity() {
                   fullWidth
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                    sx={{
+                  sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
-                      '& .MuiOutlinedInput-root': {
-                        borderRadius: 2,
-                      },
-                    }}
                 />
-                </Box>
 
                 {password && showValidation && (
-                  <Box
+                  <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                    sx={{
+                    <Box sx={{ maxWidth: '364px', width: '100%' }}>
-                      width: '100%',
-                      maxWidth: '364px',
-                      mx: 'auto',
-                      display: 'flex',
-                      justifyContent: 'flex-end',
-                      mb: '32px',
-                    }}
-                  >
-                    <Box
-                      sx={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'flex-start',
-                        textAlign: 'left',
-                        width: '100%',
-                      }}
-                    >
                       <PasswordValidationItem
                         isValid={hasNumber}
                         label={t('securityForm.hasNumber')}
@@ -244,13 +189,6 @@ export function UserSecurity() {
                   </Box>
                 )}
 
-                <Box
-                  sx={{
-                    width: '100%',
-                    maxWidth: '364px',
-                    mx: 'auto',
-                  }}
-                >
                 <TextField
                   label={t('securityForm.confirmPassword')}
                   type="password"
@@ -263,25 +201,14 @@ export function UserSecurity() {
                       ? t('securityForm.notCompatibility')
                       : ' '
                   }
-                    sx={{
+                  sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
-                      '& .MuiOutlinedInput-root': {
-                        borderRadius: 2,
-                      },
-                    }}
                 />
-                </Box>
               </DialogContent>
 
-              <DialogActions
+              <DialogActions sx={{ px: 3, pb: 2, justifyContent: 'center' }}>
-                sx={{
-                  px: 3,
-                  pb: 2,
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}
-              >
                 <Button
-                  sx={{ width: '364px', height: 48 }}
+                  fullWidth
+                  sx={{ maxWidth: '364px', height: 48, textTransform: 'none' }}
                   variant="contained"
                   onClick={handleShowAlert}
                   disabled={

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

@@ -1,62 +1,95 @@
+import React, { useState } from 'react';
 import {
   Box,
   Typography,
   Button,
   useColorScheme,
-  TextField,
   Autocomplete,
+  TextField,
 } from '@mui/material';
 import { CardContainer } from '@/components/CardContainer';
 import { useTranslation } from 'react-i18next';
-import { useState } from 'react';
 import { ThemeToggleButton } from '@/components/ThemToggle';
-import { Languages, CountryFlag } from './data/Languages';
 import Logo from '@/components/Logo';
 
 export function Setting() {
-  const { t } = useTranslation('setting');
+  const { t, i18n } = useTranslation(['setting']);
-  const [isEditing, setIsEditing] = useState(false);
   const { mode } = useColorScheme();
-  const [selectedLang, setSelectedLang] = useState('fa');
-  const selectedLanguage = Languages.find((lang) => lang.code === selectedLang);
-  const calendar = ['میلادی', 'شمسی'];
-  const [selectedCalendar, setSelectedCalendar] = useState('شمسی');
 
-  const toggleEdit = () => {
+  const [savedLanguage, setSavedLanguage] = useState<string>(
-    setIsEditing((prev) => !prev);
+    i18n.language || 'en',
+  );
+  const [draftLanguage, setDraftLanguage] = useState<string>(savedLanguage);
+  const [isEditing, setIsEditing] = useState(false);
+
+  const languageOptions = [
+    { code: 'en', label: 'English' },
+    { code: 'fa', label: 'فارسی' },
+  ];
+
+  const handleDraftLanguageChange = (
+    _: any,
+    newValue: { code: string; label: string } | null,
+  ) => {
+    if (newValue) {
+      setDraftLanguage(newValue.code);
+    }
+  };
+
+  const calendarOptions = [
+    t('settings.christian'),
+    t('settings.solar'),
+    t('settings.lunar'),
+  ];
+  const [selectedCalendar, setSelectedCalendar] = useState<string>(
+    t('settings.solar'),
+  );
+
+  const handleCancel = () => {
+    setDraftLanguage(savedLanguage);
+    setIsEditing(false);
+  };
+
+  const handleSave = () => {
+    if (draftLanguage !== savedLanguage) {
+      i18n.changeLanguage(draftLanguage);
+      setSavedLanguage(draftLanguage);
+    }
+    setIsEditing(false);
+  };
+
+  const handleEditToggle = () => {
+    if (isEditing) {
+      handleSave();
+    } else {
+      setDraftLanguage(savedLanguage);
+      setIsEditing(true);
+    }
   };
 
   return (
     <Box
       sx={{
-        display: 'flex',
+        px: { xs: 2, sm: 3 },
-        flexDirection: 'column',
+        py: 4,
-        alignItems: 'center', // 👈 horizontal centering
+        backgroundColor: 'background.default',
-        justifyContent: 'flex-start',
-        minHeight: '100vh', // optional: full height of screen
-        px: 2, // padding on smaller screens
       }}
     >
-      <Box sx={{ maxWidth: '754px', backgroundColor: 'background.paper' }}>
       <Box
         sx={{
-            display: 'flex',
+          width: '754px',
-            justifyContent: 'flex-start',
+          mx: 'auto',
-            alignItems: 'center',
+          backgroundColor: 'background.paper',
-            py: 2,
+          px: { xs: 1, sm: 2 },
-            // width: '796px',
         }}
       >
+        <Box sx={{ display: 'flex', alignItems: 'center', py: 2 }}>
           <Logo />
         </Box>
         <Box
-          sx={{
+          sx={{ width: '100%', height: '1px', backgroundColor: 'divider' }}
-            //   mt: 2,
-            width: '100%',
-            height: '1px',
-            backgroundColor: 'divider',
-          }}
         />
+
         <CardContainer
           title={t('settings.title')}
           subtitle={t('settings.description')}
@@ -66,34 +99,18 @@ export function Setting() {
               {isEditing && (
                 <Button
                   variant="text"
-                  onClick={() => setIsEditing(false)}
+                  onClick={handleCancel}
                   size="large"
-                  sx={{
+                  sx={{ textTransform: 'none' }}
-                    color: 'primary.main',
-                    textTransform: 'none',
-                    width: { xs: '100%', sm: 'auto' },
-                    fontSize: { xs: '0.85rem', sm: '1rem' },
-                  }}
                 >
                   {t('settings.rejectButton')}
                 </Button>
               )}
               <Button
-                onClick={toggleEdit}
+                onClick={handleEditToggle}
                 size="large"
                 variant="outlined"
-                sx={{
+                sx={{ textTransform: 'none' }}
-                  textTransform: 'none',
-                  border: '1px solid',
-                  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
                   ? t('settings.saveButton')
@@ -102,97 +119,86 @@ export function Setting() {
             </Box>
           }
         />
-        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+
         <Box
           sx={{
             display: 'flex',
-              gap: 2,
             flexWrap: 'wrap',
-              justifyContent: 'space-between',
+            gap: 2,
-              bgcolor: 'background.paper',
+            mt: 2,
-              px: { xs: 2, sm: 3, md: 4 },
+            width: '754px',
-              py: 2,
           }}
         >
-            <Box sx={{ width: '337px' }}>
+          <Box sx={{ flex: '1 1 337px' }}>
             {isEditing ? (
-                <Box display="flex" alignItems="center" gap={1}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <Typography variant="body1">{t('settings.theme')}</Typography>
                 <ThemeToggleButton />
               </Box>
             ) : (
-                <>
+              <Box sx={{ px: 6 }}>
                 <Typography variant="caption" color="text.secondary">
                   {t('settings.theme')}
                 </Typography>
                 <Typography variant="body1">
-                    {mode === 'light'
+                  {mode === 'light' ? t('settings.light') : t('settings.dark')}
-                      ? t('settings.light')
-                      : t('settings.dark')}
                 </Typography>
-                </>
+              </Box>
             )}
           </Box>
 
-            <Box sx={{ width: '337px' }}>
+          <Box sx={{ flex: '1 1 337px' }}>
             {isEditing ? (
               <Autocomplete
-                  options={Languages}
+                options={languageOptions}
-                  getOptionLabel={(option) => option.fa}
+                getOptionLabel={(option) => option.label}
-                  value={selectedLanguage || null}
+                value={
-                  onChange={(_, newValue) => {
+                  languageOptions.find((opt) => opt.code === draftLanguage) ||
-                    if (newValue) setSelectedLang(newValue.code);
+                  null
-                  }}
+                }
-                  renderOption={(props, option) => (
+                onChange={handleDraftLanguageChange}
-                    <Box
-                      component="li"
-                      {...props}
-                      sx={{ display: 'flex', gap: 1 }}
-                    >
-                      <CountryFlag country={option.code} />
-                    </Box>
-                  )}
                 renderInput={(params) => (
                   <TextField {...params} label={t('settings.language')} />
                 )}
+                size="small"
+                sx={{ width: 337, height: '56px' }}
               />
             ) : (
-                <>
+              <Box sx={{ px: 6 }}>
-                  <Typography variant="caption">
+                <Typography variant="caption" color="text.secondary">
                   {t('settings.language')}
                 </Typography>
-                  <CountryFlag country={selectedLang} />
+                <Typography variant="body1">
-                </>
+                  {
+                    languageOptions.find((opt) => opt.code === savedLanguage)
+                      ?.label
+                  }
+                </Typography>
+              </Box>
             )}
           </Box>
         </Box>
 
-          <Box
+        <Box sx={{ mt: 2 }}>
-            sx={{
+          <Box sx={{ width: { xs: '100%', sm: '337px' } }}>
-              bgcolor: 'background.paper',
-              px: { xs: 2, sm: 3, md: 4 },
-              py: 2,
-            }}
-          >
             {isEditing ? (
               <Autocomplete
-                options={calendar}
+                options={calendarOptions}
                 value={selectedCalendar}
-                onChange={(_, newValue) => {
+                onChange={(_, newVal) => newVal && setSelectedCalendar(newVal)}
-                  if (newValue) setSelectedCalendar(newValue);
-                }}
                 renderInput={(params) => (
                   <TextField {...params} label={t('settings.calendar')} />
                 )}
-                sx={{ width: '337px' }}
+                size="small"
+                sx={{ width: 337, height: 56 }}
               />
             ) : (
-              <>
+              <Box sx={{ px: 6 }}>
                 <Typography variant="caption">
                   {t('settings.calendar')}
                 </Typography>
                 <Typography variant="body1">{selectedCalendar}</Typography>
-              </>
+              </Box>
             )}
           </Box>
         </Box>

src/features/profile/components/setting/data/Languages.tsx

@@ -1,44 +0,0 @@
-import { Box, Typography } from '@mui/material';
-
-export const Languages = [
-  { code: 'en', en: 'English', fa: 'انگلیسی' },
-  { code: 'fa', en: 'Persian (Farsi)', fa: 'فارسی' },
-  { code: 'ar', en: 'Arabic', fa: 'عربی' },
-  { code: 'fr', en: 'French', fa: 'فرانسوی' },
-  { code: 'de', en: 'German', fa: 'آلمانی' },
-  { code: 'es', en: 'Spanish', fa: 'اسپانیایی' },
-  { code: 'it', en: 'Italian', fa: 'ایتالیایی' },
-  { code: 'ru', en: 'Russian', fa: 'روسی' },
-  { code: 'zh', en: 'Chinese', fa: 'چینی' },
-  { code: 'ja', en: 'Japanese', fa: 'ژاپنی' },
-  { code: 'ko', en: 'Korean', fa: 'کره‌ای' },
-  { code: 'hi', en: 'Hindi', fa: 'هندی' },
-  { code: 'tr', en: 'Turkish', fa: 'ترکی استانبولی' },
-  { code: 'pt', en: 'Portuguese', fa: 'پرتغالی' },
-  { code: 'ur', en: 'Urdu', fa: 'اردو' },
-  { code: 'nl', en: 'Dutch', fa: 'هلندی' },
-  { code: 'sv', en: 'Swedish', fa: 'سوئدی' },
-  { code: 'pl', en: 'Polish', fa: 'لهستانی' },
-  { code: 'th', en: 'Thai', fa: 'تایلندی' },
-  { code: 'id', en: 'Indonesian', fa: 'اندونزیایی' },
-];
-
-export function CountryFlag({ country }: { country: string }) {
-  const lang = Languages.find((lang) => lang.code === country);
-  const countryCode = lang?.code || 'un';
-
-  const flagUrl = `https://flagcdn.com/w40/${countryCode}.png`;
-
-  return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-      <img
-        src={flagUrl}
-        alt={country}
-        width="24"
-        height="16"
-        style={{ borderRadius: '2px', border: '1px solid #ccc' }}
-      />
-      <Typography variant="body2">{lang ? lang.fa : 'نامشخص'}</Typography>
-    </Box>
-  );
-}