Theme and styles RTL support

1 files changed, 23 insertions, 4 deletions

diff --git a/src/AppThemeProvider.jsx b/src/AppThemeProvider.jsx
index 109d25c4..8f64b931 100644
--- a/src/AppThemeProvider.jsx
+++ b/src/AppThemeProvider.jsx
@@ -1,21 +1,40 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { ThemeProvider, useMediaQuery } from '@mui/material';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import { prefixer } from 'stylis';
+import rtlPlugin from 'stylis-plugin-rtl';
 import theme from './common/theme';
+import { useLocalization } from './common/components/LocalizationProvider';
+
+const cache = {
+  ltr: createCache({
+    key: 'muiltr',
+    stylisPlugins: [prefixer],
+  }),
+  rtl: createCache({
+    key: 'muirtl',
+    stylisPlugins: [prefixer, rtlPlugin],
+  }),
+};
 
 const AppThemeProvider = ({ children }) => {
   const server = useSelector((state) => state.session.server);
+  const { direction } = useLocalization();
 
   const serverDarkMode = server?.attributes?.darkMode;
   const preferDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const darkMode = serverDarkMode !== undefined ? serverDarkMode : preferDarkMode;
 
-  const themeInstance = theme(server, darkMode);
+  const themeInstance = theme(server, darkMode, direction);
 
   return (
-    <ThemeProvider theme={themeInstance}>
-      {children}
-    </ThemeProvider>
+    <CacheProvider value={cache[direction]}>
+      <ThemeProvider theme={themeInstance}>
+        {children}
+      </ThemeProvider>
+    </CacheProvider>
   );
 };