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

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>