added multiple language support with related layout directions

11 files changed, 205 insertions, 96 deletions

diff --git a/modern/src/App.js b/modern/src/App.js
index ac7cdb26..228fe554 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -38,12 +38,13 @@ import ResetPasswordForm from './components/registration/ResetPasswordForm';
 import theme from './theme';
 import GeofencesPage from './GeofencesPage';
 import GeofencePage from './GeofencePage';
+import { LocalizationProvider } from './common/localization';
 
 const App = () => {
   const initialized = useSelector((state) => !!state.session.server && !!state.session.user);
 
   return (
-    <ThemeProvider theme={theme}>
+    <LocalizationProvider>
       <CssBaseline />
       <SocketController />
       <CachingController />
@@ -84,7 +85,8 @@ const App = () => {
           )}
         </Route>
       </Switch>
-    </ThemeProvider>
+    </LocalizationProvider>
+
   );
 };
 
diff --git a/modern/src/GeofencesPage.js b/modern/src/GeofencesPage.js
index 71219c16..4d23d106 100644
--- a/modern/src/GeofencesPage.js
+++ b/modern/src/GeofencesPage.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  Divider, isWidthUp, makeStyles, withWidth, Typography, IconButton,
+  Divider, isWidthUp, makeStyles, withWidth, Typography, IconButton, useTheme,
 } from '@material-ui/core';
 import Drawer from '@material-ui/core/Drawer';
 import ContainerDimensions from 'react-container-dimensions';
@@ -9,6 +9,8 @@ import Map from './map/Map';
 import CurrentLocationMap from './map/CurrentLocationMap';
 import GeofenceEditMap from './map/GeofenceEditMap';
 import GeofencesList from './GeofencesList';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+
 
 import t from './common/localization';
 
@@ -49,6 +51,7 @@ const useStyles = makeStyles((theme) => ({
 
 const GeofencesPage = ({ width }) => {
   const classes = useStyles();
+  const theme = useTheme();
 
   return (
     <div className={classes.root}>
@@ -60,7 +63,7 @@ const GeofencesPage = ({ width }) => {
         >
           <div className={classes.drawerHeader}>
             <IconButton component="a" href="/">
-              <ArrowBackIcon />
+              {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />}
             </IconButton>
             <Typography variant="h6" color="inherit" noWrap>
               {t('sharedGeofences')}
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index e0707404..97f42ea3 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -9,6 +9,7 @@ import useMediaQuery from '@material-ui/core/useMediaQuery';
 import AddIcon from '@material-ui/icons/Add';
 import CloseIcon from '@material-ui/icons/Close';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 import ListIcon from '@material-ui/icons/ViewList';
 
 import DevicesList from './DevicesList';
@@ -131,9 +132,9 @@ const MainPage = () => {
         <Paper className={classes.paper} square elevation={3}>
           <Toolbar className={classes.toolbar} disableGutters>
             {isTablet && (
-            <IconButton onClick={handleClose}>
-              <ArrowBackIcon />
-            </IconButton>
+              <IconButton onClick={handleClose}>
+                {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />}
+              </IconButton>
             )}
             <TextField
               fullWidth
@@ -149,9 +150,9 @@ const MainPage = () => {
               <AddIcon />
             </IconButton>
             {!isTablet && (
-            <IconButton onClick={handleClose}>
-              <CloseIcon />
-            </IconButton>
+              <IconButton onClick={handleClose}>
+                <CloseIcon />
+              </IconButton>
             )}
           </Toolbar>
         </Paper>
diff --git a/modern/src/common/localization.js b/modern/src/common/localization.js
index 9e2123a9..3b2f04b3 100644
--- a/modern/src/common/localization.js
+++ b/modern/src/common/localization.js
@@ -1,3 +1,8 @@
+import React, { useState, createContext, useContext, useEffect } from "react";
+import { create } from 'jss';
+import rtl from 'jss-rtl';
+import { StylesProvider, jssPreset, useTheme, ThemeProvider } from '@material-ui/core/styles';
+
 import af from '../../../web/l10n/af.json';
 import ar from '../../../web/l10n/ar.json';
 import az from '../../../web/l10n/az.json';
@@ -52,71 +57,77 @@ import uz from '../../../web/l10n/uz.json';
 import vi from '../../../web/l10n/vi.json';
 import zh from '../../../web/l10n/zh.json';
 import zh_TW from '../../../web/l10n/zh_TW.json';
+import theme from "../theme";
 
 const supportedLanguages = {
-  af: { data: af, name: 'Afrikaans' },
-  ar: { data: ar, name: 'العربية' },
-  az: { data: az, name: 'Azərbaycanca' },
-  bg: { data: bg, name: 'Български' },
-  bn: { data: bn, name: 'বাংলা' },
-  cs: { data: cs, name: 'Čeština' },
-  de: { data: de, name: 'Deutsch' },
-  da: { data: da, name: 'Dansk' },
-  el: { data: el, name: 'Ελληνικά' },
-  en: { data: en, name: 'English' },
-  es: { data: es, name: 'Español' },
-  fa: { data: fa, name: 'فارسی' },
-  fi: { data: fi, name: 'Suomi' },
-  fr: { data: fr, name: 'Français' },
-  he: { data: he, name: 'עברית' },
-  hi: { data: hi, name: 'हिन्दी' },
-  hr: { data: hr, name: 'Hrvatski' },
-  hu: { data: hu, name: 'Magyar' },
-  id: { data: id, name: 'Bahasa Indonesia' },
-  it: { data: it, name: 'Italiano' },
-  ja: { data: ja, name: '日本語' },
-  ka: { data: ka, name: 'ქართული' },
-  kk: { data: kk, name: 'Қазақша' },
-  ko: { data: ko, name: '한국어' },
-  km: { data: km, name: 'ភាសាខ្មែរ' },
-  lo: { data: lo, name: 'ລາວ' },
-  lt: { data: lt, name: 'Lietuvių' },
-  lv: { data: lv, name: 'Latviešu' },
-  ml: { data: ml, name: 'മലയാളം' },
-  mn: { data: mn, name: 'Монгол хэл' },
-  ms: { data: ms, name: 'بهاس ملايو' },
-  nb: { data: nb, name: 'Norsk bokmål' },
-  ne: { data: ne, name: 'नेपाली' },
-  nl: { data: nl, name: 'Nederlands' },
-  nn: { data: nn, name: 'Norsk nynorsk' },
-  pl: { data: pl, name: 'Polski' },
-  pt: { data: pt, name: 'Português' },
-  pt_BR: { data: pt_BR, name: 'Português (Brasil)' },
-  ro: { data: ro, name: 'Română' },
-  ru: { data: ru, name: 'Русский' },
-  si: { data: si, name: 'සිංහල' },
-  sk: { data: sk, name: 'Slovenčina' },
-  sl: { data: sl, name: 'Slovenščina' },
-  sq: { data: sq, name: 'Shqipëria' },
-  sr: { data: sr, name: 'Srpski' },
-  sv: { data: sv, name: 'Svenska' },
-  ta: { data: ta, name: 'தமிழ்' },
-  th: { data: th, name: 'ไทย' },
-  tr: { data: tr, name: 'Türkçe' },
-  uk: { data: uk, name: 'Українська' },
-  uz: { data: uz, name: 'Oʻzbekcha' },
-  vi: { data: vi, name: 'Tiếng Việt' },
-  zh: { data: zh, name: '中文' },
-  zh_TW: { data: zh_TW, name: '中文 (Taiwan)' },
+  'af': { data: af, name: 'Afrikaans' },
+  'ar': { data: ar, name: 'العربية' },
+  'az': { data: az, name: 'Azərbaycanca' },
+  'bg': { data: bg, name: 'Български' },
+  'bn': { data: bn, name: 'বাংলা' },
+  'cs': { data: cs, name: 'Čeština' },
+  'de': { data: de, name: 'Deutsch' },
+  'da': { data: da, name: 'Dansk' },
+  'el': { data: el, name: 'Ελληνικά' },
+  'en': { data: en, name: 'English' },
+  'es': { data: es, name: 'Español' },
+  'fa': { data: fa, name: 'فارسی' },
+  'fi': { data: fi, name: 'Suomi' },
+  'fr': { data: fr, name: 'Français' },
+  'he': { data: he, name: 'עברית' },
+  'hi': { data: hi, name: 'हिन्दी' },
+  'hr': { data: hr, name: 'Hrvatski' },
+  'hu': { data: hu, name: 'Magyar' },
+  'id': { data: id, name: 'Bahasa Indonesia' },
+  'it': { data: it, name: 'Italiano' },
+  'ja': { data: ja, name: '日本語' },
+  'ka': { data: ka, name: 'ქართული' },
+  'kk': { data: kk, name: 'Қазақша' },
+  'ko': { data: ko, name: '한국어' },
+  'km': { data: km, name: 'ភាសាខ្មែរ' },
+  'lo': { data: lo, name: 'ລາວ' },
+  'lt': { data: lt, name: 'Lietuvių' },
+  'lv': { data: lv, name: 'Latviešu' },
+  'ml': { data: ml, name: 'മലയാളം' },
+  'mn': { data: mn, name: 'Монгол хэл' },
+  'ms': { data: ms, name: 'بهاس ملايو' },
+  'nb': { data: nb, name: 'Norsk bokmål' },
+  'ne': { data: ne, name: 'नेपाली' },
+  'nl': { data: nl, name: 'Nederlands' },
+  'nn': { data: nn, name: 'Norsk nynorsk' },
+  'pl': { data: pl, name: 'Polski' },
+  'pt': { data: pt, name: 'Português' },
+  'pt_BR': { data: pt_BR, name: 'Português (Brasil)' },
+  'ro': { data: ro, name: 'Română' },
+  'ru': { data: ru, name: 'Русский' },
+  'si': { data: si, name: 'සිංහල' },
+  'sk': { data: sk, name: 'Slovenčina' },
+  'sl': { data: sl, name: 'Slovenščina' },
+  'sq': { data: sq, name: 'Shqipëria' },
+  'sr': { data: sr, name: 'Srpski' },
+  'sv': { data: sv, name: 'Svenska' },
+  'ta': { data: ta, name: 'தமிழ்' },
+  'th': { data: th, name: 'ไทย' },
+  'tr': { data: tr, name: 'Türkçe' },
+  'uk': { data: uk, name: 'Українська' },
+  'uz': { data: uz, name: 'Oʻzbekcha' },
+  'vi': { data: vi, name: 'Tiếng Việt' },
+  'zh': { data: zh, name: '中文' },
+  'zh_TW': { data: zh_TW, name: '中文 (Taiwan)' }
 };
 
-const languages = window.navigator.languages !== undefined ? window.navigator.languages.slice() : [];
-let language = window.navigator.userLanguage || window.navigator.language;
+export const languageList = Object.entries(supportedLanguages).map((values) => ({ code: values[0], name: values[1].name }));
+
+const languages = localStorage.getItem('language') ? [localStorage.getItem('language')] : (window.navigator.languages !== undefined ? window.navigator.languages.slice() : []);
+
+let language = localStorage.getItem('language') || window.navigator.userLanguage || window.navigator.language;
+
 languages.push(language);
 languages.push(language.substring(0, 2));
 languages.push('en');
 for (let i = 0; i < languages.length; i++) {
   language = languages[i].replace('-', '_');
+
   if (language in supportedLanguages) {
     break;
   }
@@ -128,8 +139,60 @@ for (let i = 0; i < languages.length; i++) {
   }
 }
 
-const selectedLanguage = supportedLanguages[language];
+let selectedLanguage = supportedLanguages[language];
+
+export const findStringKeys = (predicate) => {
+  return Object.keys(selectedLanguage.data).filter(predicate);
+}
+
+export default key => {
+  return selectedLanguage.data[key];
+};
+
+const rtlLangueges = ['ar', 'he', 'fa'];
+const isRtl = (language) => rtlLangueges.indexOf(language) > -1;
+
+export const setSelectedLanguage = (language) => {
+  selectedLanguage = supportedLanguages[language];
+  localStorage.setItem('language', language);
+  localStorage.setItem('direction', isRtl(language) ? 'rtl' : 'ltr');
+}
+
+export const defaultLanguage = language;
+const defaultDirection = localStorage.getItem('direction') || 'ltr';
+
+export const LocalizationContext = createContext({
+  direction: defaultDirection,
+  language
+});
+
+const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
 
-export const findStringKeys = (predicate) => Object.keys(selectedLanguage.data).filter(predicate);
+export function LocalizationProvider(props) {
+  const [language, setLanguage] = useState(defaultLanguage);
+
+  const [direction, setDirection] = useState(defaultDirection);
+
+  const handleLanguageChange = (nextLanguage) => {
+    setSelectedLanguage(nextLanguage);
+    setLanguage(nextLanguage);
+    setDirection(isRtl(nextLanguage) ? 'rtl' : 'ltr');
+  };
+
+  useEffect(() => {
+    theme.direction = direction;
+    window.document.body.dir = direction
+  }, [direction])
+
+  return <LocalizationContext.Provider value={{ language, setLanguage: handleLanguageChange, languageList, direction }}>
+    <StylesProvider jss={jss}>
+      <ThemeProvider theme={theme}>
+        {props.children}
+      </ThemeProvider>
+    </StylesProvider>
+  </LocalizationContext.Provider>
+}
 
-export default (key) => selectedLanguage.data[key];
+export const useLocalization = () => {
+  return useContext(LocalizationContext);
+}
\ No newline at end of file
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
index e6da05e3..c5c1d6f2 100644
--- a/modern/src/components/registration/LoginForm.js
+++ b/modern/src/components/registration/LoginForm.js
@@ -6,7 +6,7 @@ import { useTheme } from '@material-ui/core/styles';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { sessionActions } from '../../store';
-import t from '../../common/localization';
+import t, { useLocalization } from '../../common/localization';
 import StartPage from '../../StartPage';
 
 const useStyles = makeStyles((theme) => ({
@@ -24,6 +24,7 @@ const LoginForm = () => {
   const dispatch = useDispatch();
   const history = useHistory();
   const theme = useTheme();
+  const { language, languageList, setLanguage } = useLocalization();
 
   const [failed, setFailed] = useState(false);
   const [email, setEmail] = useState('');
@@ -61,16 +62,20 @@ const LoginForm = () => {
     }
   };
 
+  const handleLanguageChange = e => {
+    setLanguage(e.target.value);
+  }
+
   return (
     <StartPage>
       <Grid container direction="column" spacing={2}>
         {useMediaQuery(theme.breakpoints.down('md'))
           && (
-          <Grid item className={classes.logoContainer}>
-            <svg height="64" width="240">
-              <use xlinkHref="/logo.svg#img" />
-            </svg>
-          </Grid>
+            <Grid item className={classes.logoContainer}>
+              <svg height="64" width="240">
+                <use xlinkHref="/logo.svg#img" />
+              </svg>
+            </Grid>
           )}
         <Grid item>
           <TextField
@@ -124,22 +129,23 @@ const LoginForm = () => {
           <Grid item xs>
             <FormControl variant="filled" fullWidth>
               <InputLabel>{t('loginLanguage')}</InputLabel>
-              <Select>
-                <MenuItem value="en">English</MenuItem>
+              <Select value={language} onChange={handleLanguageChange}>
+                {languageList.map(lang => <MenuItem key={lang.code} value={lang.code}>{lang.name}</MenuItem>)}
               </Select>
             </FormControl>
           </Grid>
         </Grid>
         {emailEnabled && (
-        <Grid item container justify="flex-end">
-          <Grid item>
-            <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link>
+          <Grid item container justify="flex-end">
+            <Grid item>
+              <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link>
+            </Grid>
           </Grid>
-        </Grid>
         )}
       </Grid>
     </StartPage>
   );
+
 };
 
 export default LoginForm;
diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js
index 06f53551..3a249c60 100644
--- a/modern/src/components/registration/RegisterForm.js
+++ b/modern/src/components/registration/RegisterForm.js
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import {
-  Grid, Button, TextField, Typography, Link, makeStyles, Snackbar,
+  Grid, Button, TextField, Typography, Link, makeStyles, Snackbar, useTheme,
 } from '@material-ui/core';
 import { useHistory } from 'react-router-dom';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import StartPage from '../../StartPage';
 import t from '../../common/localization';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 
 const useStyles = makeStyles((theme) => ({
   register: {
@@ -30,6 +31,7 @@ const RegisterForm = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const theme = useTheme();
 
   const submitDisabled = () => !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password;
 
@@ -59,7 +61,7 @@ const RegisterForm = () => {
           <Grid item>
             <Typography className={classes.link} color="primary">
               <Link onClick={() => history.push('/login')}>
-                <ArrowBackIcon />
+              {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />}
               </Link>
             </Typography>
           </Grid>
diff --git a/modern/src/map/CurrentLocationMap.js b/modern/src/map/CurrentLocationMap.js
index 69724ce1..c875662d 100644
--- a/modern/src/map/CurrentLocationMap.js
+++ b/modern/src/map/CurrentLocationMap.js
@@ -1,9 +1,14 @@
 import maplibregl from 'maplibre-gl';
 import { useEffect } from 'react';
+import { useLocalization } from '../common/localization';
 import { map } from './Map';
 
 const CurrentLocationMap = () => {
+  const {direction} = useLocalization();
+
   useEffect(() => {
+    const controlsPosition = direction ==='rtl' ? 'top-left' : 'top-right';
+
     const control = new maplibregl.GeolocateControl({
       positionOptions: {
         enableHighAccuracy: true,
@@ -11,9 +16,9 @@ const CurrentLocationMap = () => {
       },
       trackUserLocation: true,
     });
-    map.addControl(control);
+    map.addControl(control,controlsPosition);
     return () => map.removeControl(control);
-  }, []);
+  }, [direction]);
 
   return null;
 };
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index 7dd1c2a8..16470ad6 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -8,7 +8,7 @@ import { SwitcherControl } from './switcher/switcher';
 import deviceCategories from '../common/deviceCategories';
 import { prepareIcon, loadImage } from './mapUtil';
 import { styleCarto, styleMapbox, styleOsm } from './mapStyles';
-import t from '../common/localization';
+import t, { useLocalization } from '../common/localization';
 import { useAttributePreference } from '../common/preferences';
 import palette from '../theme/palette';
 
@@ -60,11 +60,7 @@ const initMap = async () => {
 
 map.on('load', initMap);
 
-map.addControl(new maplibregl.NavigationControl({
-  showCompass: false,
-}));
-
-map.addControl(new SwitcherControl(
+const switchingControl = new SwitcherControl(
   [
     { title: t('mapOsm'), uri: styleOsm() },
     { title: t('mapCarto'), uri: styleCarto() },
@@ -84,15 +80,37 @@ map.addControl(new SwitcherControl(
     };
     waiting();
   },
-));
+);
+
+const navigationControl = new maplibregl.NavigationControl({
+  showCompass: false,
+})
+
+const addPrimaryControls = position => {
+  map.addControl(navigationControl, position);
+  map.addControl(switchingControl, position);
+}
+
+const removePrimaryControls =()=> {
+  map.removeControl(navigationControl);
+  map.removeControl(switchingControl);
+}
+
+
 
 const Map = ({ children }) => {
   const containerEl = useRef(null);
-
+  const {direction} = useLocalization();
   const [mapReady, setMapReady] = useState(false);
 
   const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
 
+  useEffect(()=>{
+    const controlsPosition = direction ==='rtl' ? 'top-left' : 'top-right';
+    addPrimaryControls(controlsPosition);
+    return removePrimaryControls;
+  },[direction])
+
   useEffect(() => {
     maplibregl.accessToken = mapboxAccessToken;
   }, [mapboxAccessToken]);
diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js
index c231cd80..48e77451 100644
--- a/modern/src/reports/ReportLayout.js
+++ b/modern/src/reports/ReportLayout.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import {
-  Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden,
+  Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden, useTheme,
 } from '@material-ui/core';
 import TimelineIcon from '@material-ui/icons/Timeline';
 import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
@@ -10,6 +10,7 @@ import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
 import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
 import TrendingUpIcon from '@material-ui/icons/TrendingUp';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 
 import SideNav from '../components/SideNav';
 import NavBar from '../components/NavBar';
@@ -66,6 +67,7 @@ const ReportLayout = ({ children, filter }) => {
   const location = useLocation();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [reportTitle, setReportTitle] = useState();
+  const theme = useTheme();
 
   useEffect(() => {
     routes.forEach((route) => {
@@ -103,7 +105,7 @@ const ReportLayout = ({ children, filter }) => {
             <IconButton
               onClick={() => history.push('/')}
             >
-              <ArrowBackIcon />
+              {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />}
             </IconButton>
             <Typography variant="h6" color="inherit" noWrap>
               {t('reportTitle')}
diff --git a/modern/src/settings/OptionsLayout/index.js b/modern/src/settings/OptionsLayout/index.js
index 4a42e583..34721680 100644
--- a/modern/src/settings/OptionsLayout/index.js
+++ b/modern/src/settings/OptionsLayout/index.js
@@ -7,9 +7,11 @@ import {
   makeStyles,
   IconButton,
   Hidden,
+  useTheme,
 } from '@material-ui/core';
 
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 
 import SideNav from '../../components/SideNav';
 import NavBar from '../../components/NavBar';
@@ -56,6 +58,7 @@ const OptionsLayout = ({ children }) => {
   const [openDrawer, setOpenDrawer] = useState(false);
   const [optionTitle, setOptionTitle] = useState();
   const routes = useRoutes();
+  const theme = useTheme();
 
   useEffect(() => {
     const activeRoute = routes.find(
@@ -87,7 +90,7 @@ const OptionsLayout = ({ children }) => {
         >
           <div className={classes.drawerHeader}>
             <IconButton component="a" href="/">
-              <ArrowBackIcon />
+              {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />}
             </IconButton>
             <Typography variant="h6" color="inherit" noWrap>
               {t('settingsTitle')}
diff --git a/modern/src/theme/index.js b/modern/src/theme/index.js
index dc0a35bf..bce3960b 100644
--- a/modern/src/theme/index.js
+++ b/modern/src/theme/index.js
@@ -7,6 +7,10 @@ const theme = createMuiTheme({
   palette,
   overrides,
   dimensions,
+  typography : {
+    fontFamily : 'IranSans'
+  }
+  // direction  : 'rtl'
 });
 
 export default theme;