chore: change the styles and add countries to the user profile

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

@@ -11,6 +11,8 @@ import { CardContainer } from '@/components/CardContainer';
 import { useTranslation } from 'react-i18next';
 import { ThemeToggleButton } from '@/components/ThemToggle';
 import { PageWrapper } from '../PageWrapper';
+import { Icon } from '@rkheftan/harmony-ui';
+import { Sun1, Moon, Calendar1 } from 'iconsax-react';
 
 export function Setting() {
   const { t, i18n } = useTranslation(['setting']);
@@ -21,18 +23,18 @@ export function Setting() {
   );
   const [draftLanguage, setDraftLanguage] = useState<string>(savedLanguage);
   const [isEditing, setIsEditing] = useState(false);
-  const [selectedCalendar, setSelectedCalendar] = useState<string>(
-    t('settings.solar'),
-  );
+  const [selectedCalendar, setSelectedCalendar] = useState<
+    'christian' | 'solar' | 'lunar'
+  >('solar');
 
   const languageOptions = [
     { code: 'en', label: 'English' },
     { code: 'fa', label: 'فارسی' },
   ];
-  const calendarOptions = [
-    t('settings.christian'),
-    t('settings.solar'),
-    t('settings.lunar'),
+  const calendarOptions: ('christian' | 'solar' | 'lunar')[] = [
+    'christian',
+    'solar',
+    'lunar',
   ];
 
   const handleDraftLanguageChange = (
@@ -56,6 +58,10 @@ export function Setting() {
   const handleEditToggle = () =>
     isEditing ? handleSave() : setIsEditing(true);
 
+  // useEffect(() => {
+  //   setSelectedCalendar(t('settings.solar'));
+  // }, [i18n.language, t]);
+
   return (
     <PageWrapper>
       <Box
@@ -141,11 +147,26 @@ export function Setting() {
                       <Typography variant="caption" color="text.secondary">
                         {t('settings.theme')}
                       </Typography>
-                      <Typography variant="body1">
-                        {mode === 'light'
-                          ? t('settings.light')
-                          : t('settings.dark')}
-                      </Typography>
+
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 1,
+                        }}
+                      >
+                        <Icon
+                          Component={mode === 'light' ? Sun1 : Moon}
+                          size="medium"
+                          variant="Bold"
+                          color={mode === 'light' ? 'black' : 'primary.main'}
+                        />
+                        <Typography variant="body1">
+                          {mode === 'light'
+                            ? t('settings.light')
+                            : t('settings.dark')}
+                        </Typography>
+                      </Box>
                     </Box>
                   )}
                 </Box>
@@ -184,10 +205,11 @@ export function Setting() {
                 {isEditing ? (
                   <Autocomplete
                     options={calendarOptions}
+                    getOptionLabel={(key) => t(`settings.${key}`)}
                     value={selectedCalendar}
                     onChange={(_, v) => v && setSelectedCalendar(v)}
-                    renderInput={(p) => (
-                      <TextField {...p} label={t('settings.calendar')} />
+                    renderInput={(params) => (
+                      <TextField {...params} label={t('settings.calendar')} />
                     )}
                     size="medium"
                     fullWidth
@@ -197,7 +219,17 @@ export function Setting() {
                     <Typography variant="caption" color="text.secondary">
                       {t('settings.calendar')}
                     </Typography>
-                    <Typography variant="body1">{selectedCalendar}</Typography>
+                    <Box sx={{ display: 'flex', gap: 1 }}>
+                      <Icon
+                        Component={Calendar1}
+                        size="medium"
+                        color={mode === 'light' ? 'black' : 'primary.main'}
+                        variant="Bold"
+                      />
+                      <Typography variant="body1">
+                        {t(`settings.${selectedCalendar}`)}
+                      </Typography>
+                    </Box>
                   </Box>
                 )}
               </Box>