adding rtl theme (#740)

* adding rtl theme

* fix indentation

Co-authored-by: almogbhl <almogbh.l@gmail.com>

package.json

@@ -17,6 +17,7 @@
     "html-to-image": "^1.6.2",
     "i18next": "^20.3.2",
     "i18next-http-backend": "^1.2.6",
+    "jss-rtl": "^0.3.0",
     "leaflet": "^1.7.1",
     "leaflet.heat": "^0.2.0",
     "mobx": "^6.3.2",

src/App.tsx

@@ -30,15 +30,15 @@ const App: FC = () => {
   const theme = useTheme();
 
   const appDir = i18n.dir();
+
   useEffect(() => {
     // https://material-ui.com/guides/right-to-left/
     document.body.dir = appDir;
-    theme.direction = appDir;
-  }, [i18n, theme, theme.direction, appDir]);
+  }, [i18n, theme, appDir]);
 
   return (
     <StoreContext.Provider value={store}>
-      <ThemeProvider theme={store.settingsStore.theme}>
+      <ThemeProvider theme={appDir === 'rtl' ? store.settingsStore.rtlTheme : store.settingsStore.theme}>
         <Router>
           <Box>
             <Box height={headerHeight} display="flex">

src/index.tsx

@@ -1,14 +1,21 @@
 import React, { Suspense } from 'react';
+import { create } from 'jss';
+import rtl from 'jss-rtl';
+import { StylesProvider, jssPreset } from '@material-ui/core/styles';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import './services/i18n.service';
 import * as serviceWorker from './serviceWorker';
 import OverlayLoader from './components/molecules/OverlayLoader';
 
+const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
+
 ReactDOM.render(
   <Suspense fallback={<OverlayLoader show />}>
-    <App />
+    <StylesProvider jss={jss}>
+      <App />
+    </StylesProvider>
   </Suspense>,
   document.getElementById('root'),
 );

src/store/settings.store.ts

@@ -6,9 +6,14 @@ import RootStore from './root.store';
 export default class SettingsStore {
   private _theme: Theme = createMuiTheme(defaultThemeOptions);
 
+  private _themeRtl: Theme = createMuiTheme({ ...defaultThemeOptions, direction: 'rtl' });
+
   constructor(private rootStore: RootStore) {
     makeAutoObservable(this);
   }
+  get rtlTheme(): Theme {
+    return this._themeRtl;
+  }
 
   get theme(): Theme {
     return this._theme;

src/style/theme.ts

@@ -2,6 +2,7 @@ import { ThemeOptions } from '@material-ui/core';
 import { fontFamilyString, darkGrey } from './';
 
 const defaultThemeOptions: ThemeOptions = {
+  direction: 'ltr',
   palette: {},
   overrides: {
     MuiCardContent: {