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

src/components/Countries.tsx

@@ -1,40 +0,0 @@
-// components/Countries.ts
-
-export interface Country {
-  name: string;
-  fa: string;
-  flag: string;
-}
-
-export const countries: Country[] = [
-  { name: 'Afghanistan', fa: 'افغانستان', flag: 'af' },
-  { name: 'Albania', fa: 'آلبانی', flag: 'al' },
-  { name: 'Algeria', fa: 'الجزایر', flag: 'dz' },
-  { name: 'Argentina', fa: 'آرژانتین', flag: 'ar' },
-  { name: 'Armenia', fa: 'ارمنستان', flag: 'am' },
-  { name: 'Australia', fa: 'استرالیا', flag: 'au' },
-  { name: 'Austria', fa: 'اتریش', flag: 'at' },
-  { name: 'Bahrain', fa: 'بحرین', flag: 'bh' },
-  { name: 'Canada', fa: 'کانادا', flag: 'ca' },
-  { name: 'China', fa: 'چین', flag: 'cn' },
-  { name: 'France', fa: 'فرانسه', flag: 'fr' },
-  { name: 'Germany', fa: 'آلمان', flag: 'de' },
-  { name: 'India', fa: 'هند', flag: 'in' },
-  { name: 'Iran', fa: 'ایران', flag: 'ir' },
-  { name: 'Iraq', fa: 'عراق', flag: 'iq' },
-  { name: 'Italy', fa: 'ایتالیا', flag: 'it' },
-  { name: 'Japan', fa: 'ژاپن', flag: 'jp' },
-  { name: 'Netherlands', fa: 'هلند', flag: 'nl' },
-  { name: 'Pakistan', fa: 'پاکستان', flag: 'pk' },
-  { name: 'Qatar', fa: 'قطر', flag: 'qa' },
-  { name: 'Russia', fa: 'روسیه', flag: 'ru' },
-  { name: 'Saudi Arabia', fa: 'عربستان سعودی', flag: 'sa' },
-  { name: 'Spain', fa: 'اسپانیا', flag: 'es' },
-  { name: 'Sweden', fa: 'سوئد', flag: 'se' },
-  { name: 'Switzerland', fa: 'سوئیس', flag: 'ch' },
-  { name: 'Turkey', fa: 'ترکیه', flag: 'tr' },
-  { name: 'United Arab Emirates', fa: 'امارات متحده عربی', flag: 'ae' },
-  { name: 'United Kingdom', fa: 'بریتانیا', flag: 'gb' },
-  { name: 'United States', fa: 'ایالات متحده آمریکا', flag: 'us' },
-  { name: 'Yemen', fa: 'یمن', flag: 'ye' },
-];

src/components/CountryFlag.tsx

@@ -1,46 +1,34 @@
 import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { countries } from '@/features/profile/data/countries';
 
-export const countryCodeMap: { [key: string]: string } = {
-  ایران: 'ir',
-  قطر: 'qa',
-  آلمان: 'de',
-  آمریکا: 'us',
-  فرانسه: 'fr',
-  ایتالیا: 'it',
-  اسپانیا: 'es',
-  انگلیس: 'gb',
-  کانادا: 'ca',
-  استرالیا: 'au',
-  چین: 'cn',
-  ژاپن: 'jp',
-  هند: 'in',
-  روسیه: 'ru',
-  برزیل: 'br',
-  آرژانتین: 'ar',
-  ترکیه: 'tr',
-  سوئیس: 'ch',
-  سوئد: 'se',
-  نروژ: 'no',
-  عربستان: 'sa',
-  امارات: 'ae',
-  عراق: 'iq',
-  پاکستان: 'pk',
-};
+interface CountryFlagProps {
+  code: string;
+}
 
-export function CountryFlag({ country }: { country: string }) {
-  const countryCode = countryCodeMap[country] || 'un';
-  const flagUrl = `https://flagcdn.com/w40/${countryCode}.png`;
+export function CountryFlag({ code }: CountryFlagProps) {
+  const { t } = useTranslation();
+
+  const countryObj = code ? countries.find((c) => c.code === code) : null;
+
+  if (!countryObj) {
+    return null;
+  }
+
+  const displayName = t(countryObj.label);
+  const flagUrl = `https://flagcdn.com/w40/${countryObj.code.toLowerCase()}.png`;
 
   return (
     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
       <img
+        loading="lazy"
         src={flagUrl}
-        alt={country}
+        alt={displayName}
         width="24"
         height="16"
         style={{ borderRadius: '2px', border: '1px solid #ccc' }}
       />
-      <Typography variant="body2">{country}</Typography>
+      <Typography variant="body2">{displayName}</Typography>
     </Box>
   );
 }

src/components/ThemToggle.tsx

@@ -2,12 +2,17 @@ import { ToggleButtonGroup, ToggleButton, Box } from '@mui/material';
 import { useColorScheme } from '@mui/material/styles';
 import { Sun1, Moon } from 'iconsax-react';
 import { useTranslation } from 'react-i18next';
+import { Icon } from '@rkheftan/harmony-ui';
+import { type MouseEvent } from 'react';
 
 export const ThemeToggleButton = () => {
   const { mode, setMode } = useColorScheme();
   const { t } = useTranslation('setting');
 
-  const handleChange = (_: any, newMode: 'light' | 'dark' | null) => {
+  const handleChange = (
+    _event: MouseEvent<HTMLElement>,
+    newMode: 'light' | 'dark' | null,
+  ) => {
     if (newMode !== null) {
       setMode(newMode);
       localStorage.setItem('theme', newMode);
@@ -41,7 +46,7 @@ export const ThemeToggleButton = () => {
             },
           }}
         >
-          <Sun1 size={18} color="#2979FF" variant="Bold" />
+          <Icon Component={Sun1} color="primary.main" variant="Bold" />
           {t('settings.light')}
         </ToggleButton>
 
@@ -59,7 +64,7 @@ export const ThemeToggleButton = () => {
             },
           }}
         >
-          <Moon size={18} color="#82B1FF" />
+          <Icon Component={Moon} size="medium" color="primary.light" />
           {t('settings.dark')}
         </ToggleButton>
       </ToggleButtonGroup>