chore: change styles and add Api for user profile

src/components/ThemToggle.tsx

@@ -1,12 +1,23 @@
 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();
+enum ThemeMode {
+  Light = 'light',
+  Dark = 'dark',
+}
+
+interface ThemeToggleButtonProps {
+  value: 'light' | 'dark';
+  onChange: (newMode: 'light' | 'dark') => void;
+}
+
+export const ThemeToggleButton = ({
+  value,
+  onChange,
+}: ThemeToggleButtonProps) => {
   const { t } = useTranslation('setting');
 
   const handleChange = (
@@ -14,26 +25,26 @@ export const ThemeToggleButton = () => {
     newMode: 'light' | 'dark' | null,
   ) => {
     if (newMode !== null) {
-      setMode(newMode);
-      localStorage.setItem('theme', newMode);
+      onChange(newMode);
     }
   };
 
   return (
-    <Box dir="rtl">
+    <Box>
       <ToggleButtonGroup
-        value={mode}
+        value={value}
         exclusive
         onChange={handleChange}
         sx={{
-          borderRadius: '12px',
+          borderRadius: 1.5,
           border: '1px solid',
           borderColor: 'divider',
           overflow: 'hidden',
         }}
       >
         <ToggleButton
-          value="light"
+          value={ThemeMode.Light}
+          aria-label="light theme"
           sx={{
             textTransform: 'none',
             display: 'flex',
@@ -51,7 +62,8 @@ export const ThemeToggleButton = () => {
         </ToggleButton>
 
         <ToggleButton
-          value="dark"
+          value={ThemeMode.Dark}
+          aria-label="dark theme"
           sx={{
             textTransform: 'none',
             display: 'flex',