Merge branch 'develop' into feat/user-profile

src/providers/AppProvider.tsx

@@ -3,6 +3,7 @@ import { I18nextProvider } from 'react-i18next';
 import i18n from '@/config/i18n';
 import { CustomThemeProvider } from './CustomThemeProvider';
 import { RtlProvider } from './RtlProvider';
+import { ToastProvider } from '@rkheftan/harmony-ui';
 
 export const AppProviders: React.FC<{ children: React.ReactNode }> = ({
   children,
@@ -10,7 +11,9 @@ export const AppProviders: React.FC<{ children: React.ReactNode }> = ({
   return (
     <I18nextProvider i18n={i18n}>
       <RtlProvider>
-        <CustomThemeProvider>{children}</CustomThemeProvider>
+        <CustomThemeProvider>
+          <ToastProvider>{children}</ToastProvider>
+        </CustomThemeProvider>
       </RtlProvider>
     </I18nextProvider>
   );

src/providers/CustomThemeProvider.tsx

@@ -13,6 +13,18 @@ export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({
     const direction = i18n.dir(i18n.language);
 
     return createTheme({
+      components: {
+        MuiSelect: {
+          styleOverrides: {
+            root: {
+              textAlign: 'left',
+            },
+            select: {
+              textAlign: 'left',
+            },
+          },
+        },
+      },
       direction: direction,
       colorSchemes: {
         light: {
@@ -25,6 +37,21 @@ export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({
       cssVariables: {
         colorSchemeSelector: 'class',
       },
+      components: {
+        MuiTextField: {
+          defaultProps: {
+            variant: 'outlined',
+            fullWidth: true,
+          },
+        },
+        MuiButton: {
+          defaultProps: {
+            size: 'large',
+            fullWidth: true,
+            variant: 'contained',
+          },
+        },
+      },
       spacing: 8,
       typography: typography,
       components: {
@@ -40,7 +67,7 @@ export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({
   }, [i18n]);
 
   return (
-    <ThemeProvider theme={theme} defaultMode="system">
+    <ThemeProvider theme={theme} defaultMode="light">
       {children}
     </ThemeProvider>
   );

src/providers/RtlProvider.tsx

@@ -1,25 +1,23 @@
-import React, { useState, useEffect } from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import rtlPlugin from 'stylis-plugin-rtl';
+import { prefixer } from 'stylis';
 
 // This provider configures Emotion's cache to support RTL.
 export const RtlProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const { i18n } = useTranslation();
-  const [cache, setCache] = useState(createCache({ key: 'css' }));
 
-  useEffect(() => {
-    const newDir = i18n.dir(i18n.language);
-
-    const newCache = createCache({
-      key: 'css',
-      stylisPlugins: newDir === 'rtl' ? [rtlPlugin] : [],
+  const cacheRtl = useMemo(() => {
+    const isRtl = i18n.dir(i18n.language) === 'rtl';
+    return createCache({
+      key: isRtl ? 'muirtl' : 'muiltr',
+      stylisPlugins: isRtl ? [prefixer, rtlPlugin] : [],
     });
-    setCache(newCache);
-  }, [i18n, i18n.language]);
+  }, [i18n]);
 
-  return <CacheProvider value={cache}>{children}</CacheProvider>;
+  return <CacheProvider value={cacheRtl}>{children}</CacheProvider>;
 };