From 70fd67f635fbcd75ceab50934419999cdb71e78e Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Thu, 1 Jul 2021 14:01:44 +0000
Subject: Options layout

---
 modern/src/settings/OptionsLayout/index.js | 100 +++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 modern/src/settings/OptionsLayout/index.js

(limited to 'modern/src/settings/OptionsLayout/index.js')

diff --git a/modern/src/settings/OptionsLayout/index.js b/modern/src/settings/OptionsLayout/index.js
new file mode 100644
index 0000000..a3a89f8
--- /dev/null
+++ b/modern/src/settings/OptionsLayout/index.js
@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import {
+  Typography,
+  Divider,
+  Drawer,
+  makeStyles,
+  IconButton,
+  Hidden
+} from '@material-ui/core';
+
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+
+import SideNav from '../../components/SideNav';
+import NavBar from '../../components/NavBar';
+import t from '../../common/localization';
+import useRoutes from './useRoutes';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    height: '100%'
+  },
+  drawerContainer: {
+    width: theme.dimensions.drawerWidthDesktop
+  },
+  drawer: {
+    width: theme.dimensions.drawerWidthDesktop,
+    [theme.breakpoints.down('md')]: {
+      width: theme.dimensions.drawerWidthTablet
+    }
+  },
+  content: {
+    flex: 1,
+    padding: theme.spacing(5, 3, 3, 3)
+  },
+  drawerHeader: {
+    ...theme.mixins.toolbar,
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(0, 1)
+  },
+  toolbar: {
+    [theme.breakpoints.down('md')]: {
+      ...theme.mixins.toolbar
+    }
+  }
+}));
+
+const OptionsLayout = ({ children }) => {
+  const classes = useStyles();
+  const history = useHistory();
+  const location = useLocation();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [OptionsTitle, setOptionsTitle] = useState();
+  const routes = useRoutes();
+
+  useEffect(() => {
+    routes.find(route => route.href === location.pathname);
+    setOptionsTitle(route.name);
+  }, [location]);
+
+  return (
+    <div className={classes.root}>
+      <Hidden lgUp>
+        <NavBar setOpenDrawer={setOpenDrawer} OptionsTitle={OptionsTitle} />
+        <Drawer
+          variant="temporary"
+          open={openDrawer}
+          onClose={() => setOpenDrawer(!openDrawer)}
+          classes={{ paper: classes.drawer }}
+        >
+          <SideNav routes={routes} />
+        </Drawer>
+      </Hidden>
+
+      <Hidden mdDown>
+        <Drawer
+          variant="permanent"
+          classes={{ root: classes.drawerContainer, paper: classes.drawer }}
+        >
+          <div className={classes.drawerHeader}>
+            <IconButton onClick={() => history.push('/')}>
+              <ArrowBackIcon />
+            </IconButton>
+            <Typography variant="h6" color="inherit" noWrap>
+              {t('settingsTitle')}
+            </Typography>
+          </div>
+          <Divider />
+          <SideNav routes={routes} />
+        </Drawer>
+      </Hidden>
+
+      <div className={classes.content}>{children}</div>
+    </div>
+  );
+};
+
+export default OptionsLayout;
-- 
cgit v1.2.3


From a2722a1263e809b4f83100dbecc992cdeacf13ea Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Thu, 1 Jul 2021 14:21:56 +0000
Subject: Show option title for mobile navbar

---
 modern/src/settings/OptionsLayout/index.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'modern/src/settings/OptionsLayout/index.js')

diff --git a/modern/src/settings/OptionsLayout/index.js b/modern/src/settings/OptionsLayout/index.js
index a3a89f8..c56ebc3 100644
--- a/modern/src/settings/OptionsLayout/index.js
+++ b/modern/src/settings/OptionsLayout/index.js
@@ -52,18 +52,20 @@ const OptionsLayout = ({ children }) => {
   const history = useHistory();
   const location = useLocation();
   const [openDrawer, setOpenDrawer] = useState(false);
-  const [OptionsTitle, setOptionsTitle] = useState();
+  const [optionTitle, setOptionTitle] = useState();
   const routes = useRoutes();
 
   useEffect(() => {
-    routes.find(route => route.href === location.pathname);
-    setOptionsTitle(route.name);
+    const activeRoute = routes.find(route => route.href === location.pathname);
+    setOptionTitle(activeRoute.name);
   }, [location]);
 
+  const title = `Options / ${optionTitle}`;
+
   return (
     <div className={classes.root}>
       <Hidden lgUp>
-        <NavBar setOpenDrawer={setOpenDrawer} OptionsTitle={OptionsTitle} />
+        <NavBar setOpenDrawer={setOpenDrawer} title={title} />
         <Drawer
           variant="temporary"
           open={openDrawer}
-- 
cgit v1.2.3


From bf26504a27dbfc87c0280cb4909d85f4d5ecae7a Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Thu, 1 Jul 2021 14:23:55 +0000
Subject: Removed unused vars

---
 modern/src/admin/UsersPage.js                 | 1 -
 modern/src/settings/ComputedAttributesPage.js | 1 -
 modern/src/settings/DriversPage.js            | 1 -
 modern/src/settings/GroupsPage.js             | 1 -
 modern/src/settings/MaintenancesPage.js       | 1 -
 modern/src/settings/NotificationsPage.js      | 1 -
 modern/src/settings/OptionsLayout/index.js    | 2 +-
 7 files changed, 1 insertion(+), 7 deletions(-)

(limited to 'modern/src/settings/OptionsLayout/index.js')

diff --git a/modern/src/admin/UsersPage.js b/modern/src/admin/UsersPage.js
index aed675c..ceaab6a 100644
--- a/modern/src/admin/UsersPage.js
+++ b/modern/src/admin/UsersPage.js
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import MainToolbar from '../MainToolbar';
 import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import t from '../common/localization';
diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js
index 49c35d6..d747598 100644
--- a/modern/src/settings/ComputedAttributesPage.js
+++ b/modern/src/settings/ComputedAttributesPage.js
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import MainToolbar from '../MainToolbar';
 import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useSelector } from 'react-redux';
diff --git a/modern/src/settings/DriversPage.js b/modern/src/settings/DriversPage.js
index 13cb1c6..d5427b2 100644
--- a/modern/src/settings/DriversPage.js
+++ b/modern/src/settings/DriversPage.js
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import MainToolbar from '../MainToolbar';
 import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import t from '../common/localization';
diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js
index 2de6241..2fc65c1 100644
--- a/modern/src/settings/GroupsPage.js
+++ b/modern/src/settings/GroupsPage.js
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import MainToolbar from '../MainToolbar';
 import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import t from '../common/localization';
diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index 3fd0b39..d713eaa 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import MainToolbar from '../MainToolbar';
 import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import t from '../common/localization';
diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js
index 3756e96..5707f89 100644
--- a/modern/src/settings/NotificationsPage.js
+++ b/modern/src/settings/NotificationsPage.js
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import MainToolbar from '../MainToolbar';
 import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import t from '../common/localization';
diff --git a/modern/src/settings/OptionsLayout/index.js b/modern/src/settings/OptionsLayout/index.js
index c56ebc3..f6f1e4b 100644
--- a/modern/src/settings/OptionsLayout/index.js
+++ b/modern/src/settings/OptionsLayout/index.js
@@ -58,7 +58,7 @@ const OptionsLayout = ({ children }) => {
   useEffect(() => {
     const activeRoute = routes.find(route => route.href === location.pathname);
     setOptionTitle(activeRoute.name);
-  }, [location]);
+  }, [location, routes]);
 
   const title = `Options / ${optionTitle}`;
 
-- 
cgit v1.2.3


From 52f565bcb5e14b77757676013d1328ead92e13fa Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Fri, 2 Jul 2021 15:18:00 +0000
Subject: Account Route

---
 modern/src/settings/OptionsLayout/index.js     |  7 +++----
 modern/src/settings/OptionsLayout/useRoutes.js | 17 ++++++++++++++++-
 2 files changed, 19 insertions(+), 5 deletions(-)

(limited to 'modern/src/settings/OptionsLayout/index.js')

diff --git a/modern/src/settings/OptionsLayout/index.js b/modern/src/settings/OptionsLayout/index.js
index f6f1e4b..4bcb380 100644
--- a/modern/src/settings/OptionsLayout/index.js
+++ b/modern/src/settings/OptionsLayout/index.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import {
   Typography,
   Divider,
@@ -49,14 +49,13 @@ const useStyles = makeStyles(theme => ({
 
 const OptionsLayout = ({ children }) => {
   const classes = useStyles();
-  const history = useHistory();
   const location = useLocation();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [optionTitle, setOptionTitle] = useState();
   const routes = useRoutes();
 
   useEffect(() => {
-    const activeRoute = routes.find(route => route.href === location.pathname);
+    const activeRoute = routes.find(route => location.pathname.match(route.match));
     setOptionTitle(activeRoute.name);
   }, [location, routes]);
 
@@ -82,7 +81,7 @@ const OptionsLayout = ({ children }) => {
           classes={{ root: classes.drawerContainer, paper: classes.drawer }}
         >
           <div className={classes.drawerHeader}>
-            <IconButton onClick={() => history.push('/')}>
+            <IconButton component="a" href="/">
               <ArrowBackIcon />
             </IconButton>
             <Typography variant="h6" color="inherit" noWrap>
diff --git a/modern/src/settings/OptionsLayout/useRoutes.js b/modern/src/settings/OptionsLayout/useRoutes.js
index e53e8fd..6796a56 100644
--- a/modern/src/settings/OptionsLayout/useRoutes.js
+++ b/modern/src/settings/OptionsLayout/useRoutes.js
@@ -8,9 +8,14 @@ import StorageIcon from '@material-ui/icons/Storage';
 import BuildIcon from '@material-ui/icons/Build';
 import PeopleIcon from '@material-ui/icons/People';
 import BarChartIcon from '@material-ui/icons/BarChart';
-import { getIsAdmin } from '../../selectors';
+import { getIsAdmin, getUserId } from '../../selectors';
 import t from '../../common/localization';
 
+const accountRoute = {
+  name: t('settingsUser'),
+  icon: <PersonIcon />
+};
+
 const adminRoutes = [
   { subheader: t('userAdmin') },
   {
@@ -31,32 +36,39 @@ const adminRoutes = [
 ];
 
 const mainRoutes = [
+  accountRoute,
   {
+    match: 'geofence',
     name: t('sharedGeofences'),
     href: '/geofences',
     icon: <CreateIcon />
   },
   {
+    match: 'notification',
     name: t('sharedNotifications'),
     href: '/settings/notifications',
     icon: <NotificationsIcon />
   },
   {
+    match: 'group',
     name: t('settingsGroups'),
     href: '/settings/groups',
     icon: <FolderIcon />
   },
   {
+    match: 'driver',
     name: t('sharedDrivers'),
     href: '/settings/drivers',
     icon: <PersonIcon />
   },
   {
+    match: 'attribute',
     name: t('sharedComputedAttributes'),
     href: '/settings/attributes',
     icon: <StorageIcon />
   },
   {
+    match: 'maintenance',
     name: t('sharedMaintenance'),
     href: '/settings/maintenances',
     icon: <BuildIcon />
@@ -65,6 +77,9 @@ const mainRoutes = [
 
 export default () => {
   const isAdmin = useSelector(getIsAdmin);
+  const userId = useSelector(getUserId);
+  accountRoute.match = accountRoute.href = `/user/${userId}`;
+
   return useMemo(() => [...mainRoutes, ...(isAdmin ? adminRoutes : [])], [
     isAdmin
   ]);
-- 
cgit v1.2.3


From 529e51405db4a086a8eae8e63602f46c3e67fab4 Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Fri, 2 Jul 2021 15:53:52 +0000
Subject: Minor fixes

---
 modern/src/MainToolbar.js                  | 89 +-----------------------------
 modern/src/settings/OptionsLayout/index.js |  5 +-
 2 files changed, 7 insertions(+), 87 deletions(-)

(limited to 'modern/src/settings/OptionsLayout/index.js')

diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index c11ca96..311f024 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -17,18 +17,11 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import MapIcon from '@material-ui/icons/Map';
-import BarChartIcon from '@material-ui/icons/BarChart';
-import PeopleIcon from '@material-ui/icons/People';
-import StorageIcon from '@material-ui/icons/Storage';
 import PersonIcon from '@material-ui/icons/Person';
-import NotificationsIcon from '@material-ui/icons/Notifications';
 import DescriptionIcon from '@material-ui/icons/Description';
-import FolderIcon from '@material-ui/icons/Folder';
-import CreateIcon from '@material-ui/icons/Create';
 import ReplayIcon from '@material-ui/icons/Replay';
-import BuildIcon from '@material-ui/icons/Build';
 import t from './common/localization';
-import * as selectors from './selectors'
+import * as selectors from './selectors';
 
 const useStyles = makeStyles(theme => ({
   flex: {
@@ -115,93 +108,17 @@ const MainToolbar = () => {
               </ListItemIcon>
               <ListItemText primary={t('reportTitle')} />
             </ListItem>
-          </List>
-          <Divider />
-          <List subheader={<ListSubheader>{t('settingsTitle')}</ListSubheader>}>
             <ListItem
               button
               disabled={!userId}
-              onClick={() => history.push(`/user/${userId}`)}
+              onClick={() => history.push(`/settings/notifications`)}
             >
               <ListItemIcon>
                 <PersonIcon />
               </ListItemIcon>
-              <ListItemText primary={t('settingsUser')} />
-            </ListItem>
-            <ListItem button onClick={() => history.push('/geofences')}>
-              <ListItemIcon>
-                <CreateIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('sharedGeofences')} />
-            </ListItem>
-            <ListItem
-              button
-              onClick={() => history.push('/settings/notifications')}
-            >
-              <ListItemIcon>
-                <NotificationsIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('sharedNotifications')} />
-            </ListItem>
-            <ListItem button onClick={() => history.push('/settings/groups')}>
-              <ListItemIcon>
-                <FolderIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('settingsGroups')} />
-            </ListItem>
-            <ListItem button onClick={() => history.push('/settings/drivers')}>
-              <ListItemIcon>
-                <PersonIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('sharedDrivers')} />
-            </ListItem>
-            <ListItem
-              button
-              onClick={() => history.push('/settings/attributes')}
-            >
-              <ListItemIcon>
-                <StorageIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('sharedComputedAttributes')} />
-            </ListItem>
-            <ListItem
-              button
-              onClick={() => history.push('/settings/maintenances')}
-            >
-              <ListItemIcon>
-                <BuildIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('sharedMaintenance')} />
+              <ListItemText primary={t('settingsTitle')} />
             </ListItem>
           </List>
-          {adminEnabled && (
-            <>
-              <Divider />
-              <List subheader={<ListSubheader>{t('userAdmin')}</ListSubheader>}>
-                <ListItem button onClick={() => history.push('/admin/server')}>
-                  <ListItemIcon>
-                    <StorageIcon />
-                  </ListItemIcon>
-                  <ListItemText primary={t('settingsServer')} />
-                </ListItem>
-                <ListItem button onClick={() => history.push('/admin/users')}>
-                  <ListItemIcon>
-                    <PeopleIcon />
-                  </ListItemIcon>
-                  <ListItemText primary={t('settingsUsers')} />
-                </ListItem>
-                <ListItem
-                  button
-                  onClick={() => history.push('/admin/statistics')}
-                >
-                  <ListItemIcon>
-                    <BarChartIcon />
-                  </ListItemIcon>
-                  <ListItemText primary={t('statisticsTitle')} />
-                </ListItem>
-              </List>
-            </>
-          )}
         </div>
       </Drawer>
     </>
diff --git a/modern/src/settings/OptionsLayout/index.js b/modern/src/settings/OptionsLayout/index.js
index 4bcb380..37b6355 100644
--- a/modern/src/settings/OptionsLayout/index.js
+++ b/modern/src/settings/OptionsLayout/index.js
@@ -32,7 +32,10 @@ const useStyles = makeStyles(theme => ({
   },
   content: {
     flex: 1,
-    padding: theme.spacing(5, 3, 3, 3)
+    padding: theme.spacing(5, 3, 3, 3),
+    [theme.breakpoints.down('md')]:{
+      paddingTop: theme.spacing(10)
+    }
   },
   drawerHeader: {
     ...theme.mixins.toolbar,
-- 
cgit v1.2.3


From 2a0705f1c26befa75703238462930847b18895e1 Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Fri, 2 Jul 2021 17:07:17 +0000
Subject: show admin title in mobile appbar

---
 modern/src/settings/OptionsLayout/index.js     | 8 +++++---
 modern/src/settings/OptionsLayout/useRoutes.js | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

(limited to 'modern/src/settings/OptionsLayout/index.js')

diff --git a/modern/src/settings/OptionsLayout/index.js b/modern/src/settings/OptionsLayout/index.js
index 37b6355..61a94cf 100644
--- a/modern/src/settings/OptionsLayout/index.js
+++ b/modern/src/settings/OptionsLayout/index.js
@@ -33,7 +33,7 @@ const useStyles = makeStyles(theme => ({
   content: {
     flex: 1,
     padding: theme.spacing(5, 3, 3, 3),
-    [theme.breakpoints.down('md')]:{
+    [theme.breakpoints.down('md')]: {
       paddingTop: theme.spacing(10)
     }
   },
@@ -58,8 +58,10 @@ const OptionsLayout = ({ children }) => {
   const routes = useRoutes();
 
   useEffect(() => {
-    const activeRoute = routes.find(route => location.pathname.match(route.match));
-    setOptionTitle(activeRoute.name);
+    const activeRoute = routes.find(
+      route => route.href && location.pathname.match(route.match || route.href)
+    );
+    setOptionTitle(activeRoute?.name);
   }, [location, routes]);
 
   const title = `Options / ${optionTitle}`;
diff --git a/modern/src/settings/OptionsLayout/useRoutes.js b/modern/src/settings/OptionsLayout/useRoutes.js
index 6796a56..901719f 100644
--- a/modern/src/settings/OptionsLayout/useRoutes.js
+++ b/modern/src/settings/OptionsLayout/useRoutes.js
@@ -78,7 +78,7 @@ const mainRoutes = [
 export default () => {
   const isAdmin = useSelector(getIsAdmin);
   const userId = useSelector(getUserId);
-  accountRoute.match = accountRoute.href = `/user/${userId}`;
+  accountRoute.href = `/user/${userId}`;
 
   return useMemo(() => [...mainRoutes, ...(isAdmin ? adminRoutes : [])], [
     isAdmin
-- 
cgit v1.2.3


From aba0f502a1a5e9a9467a06e1417ebb72c1e2ced2 Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Mon, 12 Jul 2021 03:05:49 +0000
Subject: Updated eslint

---
 modern/.eslintrc.js                        |  3 +++
 modern/package.json                        |  2 +-
 modern/src/components/SideNav.js           |  2 +-
 modern/src/selectors.js                    |  4 ++--
 modern/src/settings/OptionsLayout/index.js | 26 +++++++++++++-------------
 5 files changed, 20 insertions(+), 17 deletions(-)

(limited to 'modern/src/settings/OptionsLayout/index.js')

diff --git a/modern/.eslintrc.js b/modern/.eslintrc.js
index d6380a8..a4cf305 100644
--- a/modern/.eslintrc.js
+++ b/modern/.eslintrc.js
@@ -1,5 +1,8 @@
 module.exports = {
   extends: 'airbnb',
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
   plugins: [
     'react',
   ],
diff --git a/modern/package.json b/modern/package.json
index 365d986..2ae229c 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -49,7 +49,7 @@
     ]
   },
   "devDependencies": {
-    "eslint": "^6.8.0",
+    "eslint": "^7.30.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-react": "^7.24.0",
diff --git a/modern/src/components/SideNav.js b/modern/src/components/SideNav.js
index aa07808..bcf8ecd 100644
--- a/modern/src/components/SideNav.js
+++ b/modern/src/components/SideNav.js
@@ -9,7 +9,7 @@ const SideNav = ({ routes }) => {
 
   return (
     <List disablePadding style={{ paddingTop: '16px' }}>
-      {routes.map((route, index) => (route.subheader ? (
+      {routes.map((route) => (route.subheader ? (
         <>
           <Divider />
           <ListSubheader>{route.subheader}</ListSubheader>
diff --git a/modern/src/selectors.js b/modern/src/selectors.js
index f0b08f5..44a0c54 100644
--- a/modern/src/selectors.js
+++ b/modern/src/selectors.js
@@ -1,3 +1,3 @@
-export const getIsAdmin = state => state.session.user?.administrator;
+export const getIsAdmin = (state) => state.session.user?.administrator;
 
-export const getUserId = state => state.session.user?.id;
+export const getUserId = (state) => state.session.user?.id;
diff --git a/modern/src/settings/OptionsLayout/index.js b/modern/src/settings/OptionsLayout/index.js
index 61a94cf..1184465 100644
--- a/modern/src/settings/OptionsLayout/index.js
+++ b/modern/src/settings/OptionsLayout/index.js
@@ -6,7 +6,7 @@ import {
   Drawer,
   makeStyles,
   IconButton,
-  Hidden
+  Hidden,
 } from '@material-ui/core';
 
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
@@ -16,38 +16,38 @@ import NavBar from '../../components/NavBar';
 import t from '../../common/localization';
 import useRoutes from './useRoutes';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     display: 'flex',
-    height: '100%'
+    height: '100%',
   },
   drawerContainer: {
-    width: theme.dimensions.drawerWidthDesktop
+    width: theme.dimensions.drawerWidthDesktop,
   },
   drawer: {
     width: theme.dimensions.drawerWidthDesktop,
     [theme.breakpoints.down('md')]: {
-      width: theme.dimensions.drawerWidthTablet
-    }
+      width: theme.dimensions.drawerWidthTablet,
+    },
   },
   content: {
     flex: 1,
     padding: theme.spacing(5, 3, 3, 3),
     [theme.breakpoints.down('md')]: {
-      paddingTop: theme.spacing(10)
-    }
+      paddingTop: theme.spacing(10),
+    },
   },
   drawerHeader: {
     ...theme.mixins.toolbar,
     display: 'flex',
     alignItems: 'center',
-    padding: theme.spacing(0, 1)
+    padding: theme.spacing(0, 1),
   },
   toolbar: {
     [theme.breakpoints.down('md')]: {
-      ...theme.mixins.toolbar
-    }
-  }
+      ...theme.mixins.toolbar,
+    },
+  },
 }));
 
 const OptionsLayout = ({ children }) => {
@@ -59,7 +59,7 @@ const OptionsLayout = ({ children }) => {
 
   useEffect(() => {
     const activeRoute = routes.find(
-      route => route.href && location.pathname.match(route.match || route.href)
+      (route) => route.href && location.pathname.match(route.match || route.href),
     );
     setOptionTitle(activeRoute?.name);
   }, [location, routes]);
-- 
cgit v1.2.3


From ea4ec2d769866db3490514b429cd95d314d19141 Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Mon, 12 Jul 2021 22:40:11 +0000
Subject: Used localised setting string

---
 modern/src/settings/OptionsLayout/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'modern/src/settings/OptionsLayout/index.js')

diff --git a/modern/src/settings/OptionsLayout/index.js b/modern/src/settings/OptionsLayout/index.js
index 1184465..4a42e58 100644
--- a/modern/src/settings/OptionsLayout/index.js
+++ b/modern/src/settings/OptionsLayout/index.js
@@ -64,7 +64,7 @@ const OptionsLayout = ({ children }) => {
     setOptionTitle(activeRoute?.name);
   }, [location, routes]);
 
-  const title = `Options / ${optionTitle}`;
+  const title = `${t('settingsTitle')} / ${optionTitle}`;
 
   return (
     <div className={classes.root}>
-- 
cgit v1.2.3