From 3ac9c66869c18ab1ccbdbe0cc90b142cd18d23a0 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Wed, 30 Jun 2021 15:32:49 +0530
Subject: Work in progress

work in progress

Desktop version completed

Mobile version in progress

Rebase PR

Improvement in map device screen

Minor improvement
---
 modern/src/DevicesList.js |  77 ++++++++++++++--
 modern/src/MainPage.js    | 223 ++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 258 insertions(+), 42 deletions(-)

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 85b936ce..c774cdfe 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -3,21 +3,23 @@ import { useDispatch, useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import Avatar from '@material-ui/core/Avatar';
 import Divider from '@material-ui/core/Divider';
-import IconButton from '@material-ui/core/IconButton';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import Grid from '@material-ui/core/Grid';
 import ListItemText from '@material-ui/core/ListItemText';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
+import BatteryFullIcon from '@material-ui/icons/BatteryFull';
+import VpnKeyIcon from '@material-ui/icons/VpnKey';
 
 import { devicesActions } from './store';
 import EditCollectionView from './EditCollectionView';
 import { useEffectAsync } from './reactHelper';
+import { formatPosition } from './common/formatter';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
   list: {
     maxHeight: '100%',
   },
@@ -26,8 +28,71 @@ const useStyles = makeStyles(() => ({
     height: '25px',
     filter: 'brightness(0) invert(1)',
   },
+  batteryText: {
+    fontSize: '0.75rem',
+    fontWeight: 'normal',
+    lineHeight: '0.875rem'
+  },
+  green: {
+    color: theme.palette.common.green,
+  },
+  red: {
+    color: theme.palette.common.red,
+  },
+  gray: {
+    color: theme.palette.common.gray
+  }
 }));
 
+const OnlineStatus =({ status }) => {
+  
+  const classes = useStyles();
+
+  switch (status) {
+    case 'online':
+      return <span className={classes.green}>{status}</span>
+    case 'offline':
+      return <span className={classes.red}>{status}</span>
+    case 'unknown':
+    default:
+      return <span className={classes.gray}>{status}</span>
+  }
+}
+
+const DeviceStatus = ({ deviceId }) => {
+  const classes = useStyles();
+  let batteryClass = '';
+  
+  const position = useSelector(state => state.positions.items[deviceId]);
+  if (!position) {
+    return null;
+  }
+  const batteryLevel = position.attributes.hasOwnProperty('batteryLevel') ? position.attributes.batteryLevel : 'undefined';
+
+  if (batteryLevel >= 70) {
+    batteryClass = classes.green;
+  } else if (batteryLevel > 30) {
+    batteryClass = classes.gray;
+  } else {
+    batteryClass = classes.red;
+  }
+  return (
+    <Grid container direction="row" alignItems="center" alignContent="center" spacing={1}>
+      {position.attributes.hasOwnProperty('ignition') && <Grid item>
+        <VpnKeyIcon className={`${position.attributes.ignition ? classes.green : classes.gray}`}/>
+      </Grid>}
+      {batteryLevel !== 'undefined' && <Grid item container xs alignItems="center" alignContent="center">
+        <Grid item> 
+          <span className={classes.batteryText}>{formatPosition(batteryLevel, 'batteryLevel')}</span>
+        </Grid>      
+        <Grid item> 
+          <BatteryFullIcon className={batteryClass} />
+        </Grid>
+      </Grid>}
+    </Grid>
+  );
+}
+
 const DeviceRow = ({ data, index, style }) => {
   const classes = useStyles();
   const dispatch = useDispatch();
@@ -44,11 +109,9 @@ const DeviceRow = ({ data, index, style }) => {
               <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} alt="" />
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary={item.name} secondary={item.uniqueId} />
+          <ListItemText primary={item.name} secondary={<OnlineStatus status={item.status} />} />
           <ListItemSecondaryAction>
-            <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
-              <MoreVertIcon />
-            </IconButton>
+            <DeviceStatus deviceId={item.id} />
           </ListItemSecondaryAction>
         </ListItem>
         {index < items.length - 1 ? <Divider /> : null}
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 88608df7..9740227e 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -1,7 +1,19 @@
-import React from 'react';
-import { isWidthUp, makeStyles, withWidth } from '@material-ui/core';
-import Drawer from '@material-ui/core/Drawer';
-import ContainerDimensions from 'react-container-dimensions';
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import classnames from 'classnames';
+import { makeStyles, withWidth, Paper, Toolbar, Grid, TextField, IconButton, Button } from '@material-ui/core';
+
+import { useTheme } from '@material-ui/core/styles';
+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 ListIcon from '@material-ui/icons/List';
+import ReplayIcon from '@material-ui/icons/Replay';
+import DescriptionIcon from '@material-ui/icons/Description';
+import ShuffleIcon from '@material-ui/icons/Shuffle';
+import PersonIcon from '@material-ui/icons/Person';
+
 import DevicesList from './DevicesList';
 import MainToolbar from './MainToolbar';
 import Map from './map/Map';
@@ -10,22 +22,14 @@ import AccuracyMap from './map/AccuracyMap';
 import GeofenceMap from './map/GeofenceMap';
 import CurrentPositionsMap from './map/CurrentPositionsMap';
 import CurrentLocationMap from './map/CurrentLocationMap';
+import t from './common/localization';
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    height: '100%',
+    height: '100vh',
     display: 'flex',
     flexDirection: 'column',
   },
-  content: {
-    flexGrow: 1,
-    overflow: 'hidden',
-    display: 'flex',
-    flexDirection: 'row',
-    [theme.breakpoints.down('xs')]: {
-      flexDirection: 'column-reverse',
-    },
-  },
   drawerPaper: {
     position: 'relative',
     [theme.breakpoints.up('sm')]: {
@@ -36,36 +40,185 @@ const useStyles = makeStyles((theme) => ({
     },
     overflow: 'hidden',
   },
-  mapContainer: {
-    flexGrow: 1,
+  listContainer: {
+    position: 'absolute',
+    left: theme.spacing(1.5),
+    top: theme.spacing(10.5),
+    width: theme.dimensions.drawerWidthDesktop,
+    zIndex: 1301,
+    height: '100%',
+    maxHeight: `calc(100vh - ${theme.spacing(20)}px)`,
+    [theme.breakpoints.down("md")]: {
+      top: theme.spacing(7),
+      left: '0px',
+      width: '100%',
+      maxHeight: `calc(100vh - ${theme.spacing(14)}px)`,
+    }
+  },
+  paper: {
+    borderRadius: '0px', 
+  },
+  toolbar: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+  },
+  deviceList: {
+    height: '100%',
+  },
+  collapsed: {
+    transform: `translateX(-${360 + 16}px)`,
+    transition: 'transform .5s ease',
+    [theme.breakpoints.down("md")]: {
+      transform: `translateX(-100vw)`,
+    }
+  },
+  uncollapsed: {
+    transform: `translateX(${theme.spacing(1.5)})`,
+    transition: 'transform .5s ease',
+    [theme.breakpoints.down("md")]: {
+      transform: `translateX(0)`,
+    }
+  },
+  deviceButton: {
+    position: 'absolute',
+    left: theme.spacing(1),
+    top: theme.spacing(10.5),
+    borderRadius: '0px',
+    [theme.breakpoints.down("md")]: {
+      top: theme.spacing(7),
+    }
+  },
+  bottomMenuContainer: {
+    position: 'absolute',
+    left: theme.spacing(1.5),
+    bottom: theme.spacing(1.5),
+    width: theme.dimensions.drawerWidthDesktop,
+    zIndex: 1301,
+    [theme.breakpoints.down("md")]: {
+      bottom: theme.spacing(0),
+      left: '0px',
+      width: '100%'
+    }
+  },
+  menuButton: {
+    display: 'flex',
+    flexDirection: 'column',
   },
+  iconText: {
+    fontSize: '0.75rem',
+    fontWeight: 'normal',
+    color: '#222222',
+  }
 }));
 
 const MainPage = ({ width }) => {
   const classes = useStyles();
+  const history = useHistory();
+  const theme = useTheme();
+
+  const [deviceName, setDeviceName] = useState();
+  const [collapsed, setCollapsed] = useState(false);
+
+  const matchesMD = useMediaQuery(theme.breakpoints.down('md'));
+
+  const handleClose = () => {
+    setCollapsed(!collapsed);
+  }
 
   return (
     <div className={classes.root}>
       <MainToolbar />
-      <div className={classes.content}>
-        <Drawer
-          anchor={isWidthUp('sm', width) ? 'left' : 'bottom'}
-          variant="permanent"
-          classes={{ paper: classes.drawerPaper }}
-        >
-          <DevicesList />
-        </Drawer>
-        <div className={classes.mapContainer}>
-          <ContainerDimensions>
-            <Map>
-              <CurrentLocationMap />
-              <GeofenceMap />
-              <AccuracyMap />
-              <CurrentPositionsMap />
-              <SelectedDeviceMap />
-            </Map>
-          </ContainerDimensions>
-        </div>
+      <Map>
+        <CurrentLocationMap />
+        <GeofenceMap />
+        <AccuracyMap />
+        <CurrentPositionsMap />
+        <SelectedDeviceMap />
+      </Map>
+      {collapsed && 
+        <Button 
+          variant="contained" 
+          color={matchesMD ? "secondary": "default"}
+          className={classes.deviceButton}
+          onClick={handleClose}
+          startIcon={<ListIcon />}>
+          {t('deviceTitle')}
+        </Button>
+      }
+      <div className={`${classes.listContainer} ${collapsed ? classes.collapsed : classes.uncollapsed}`}>
+        <Grid container direction="column" spacing={matchesMD ? 0: 2} style={{height: '100%'}}>
+          <Grid item>
+            <Paper className={classes.paper}>
+              <Toolbar className={classes.toolbar} disableGutters>
+                <Grid container direction="row" alignItems="center" spacing={2}>
+                  {matchesMD && <Grid item> 
+                    <IconButton onClick={handleClose}>
+                      <ArrowBackIcon />
+                    </IconButton>            
+                  </Grid>}
+                  <Grid item xs>
+                    <TextField
+                      fullWidth
+                      name='deviceName'
+                      value={deviceName || ''}
+                      autoComplete='deviceName'
+                      autoFocus
+                      onChange={event => setDeviceName(event.target.value)}
+                      placeholder="Search Devices"
+                      variant='filled' />
+                  </Grid>
+                  <Grid item>
+                    <IconButton onClick={() => history.push('/device')}>
+                      <AddIcon />
+                    </IconButton>
+                  </Grid>
+                  {!matchesMD && <Grid item>
+                    <IconButton onClick={handleClose}>
+                      <CloseIcon />
+                    </IconButton>
+                  </Grid>}
+                </Grid>
+              </Toolbar>
+            </Paper>
+          </Grid>
+          <Grid item xs>
+            <Paper className={`${classes.deviceList} ${classes.paper}`}>
+              <DevicesList />
+            </Paper>
+          </Grid>
+        </Grid>
+      </div>
+      <div className={classes.bottomMenuContainer}>
+        <Paper className={classes.paper}>
+          <Toolbar className={classes.toolbar} disableGutters>
+            <Grid container justify="space-around">
+              <Grid item>
+                <IconButton classes={{ label: classes.menuButton }}>
+                  <ReplayIcon />
+                  <span className={classes.iconText}>{t('reportReplay')}</span>
+                </IconButton>                
+              </Grid>
+              <Grid item>
+                <IconButton classes={{ label: classes.menuButton }}>
+                  <DescriptionIcon />
+                  <span className={classes.iconText}>{t('reportTitle')}</span>
+                </IconButton>                
+              </Grid>
+              <Grid item>
+                <IconButton classes={{ label: classes.menuButton }}>
+                  <ShuffleIcon />
+                  <span className={classes.iconText}>Options</span>
+                </IconButton>                
+              </Grid>
+              <Grid item>
+                <IconButton classes={{ label: classes.menuButton }}>
+                  <PersonIcon />
+                  <span className={classes.iconText}>{t('settingsUser')}</span>
+                </IconButton>                
+              </Grid>
+            </Grid>
+          </Toolbar>
+        </Paper>
       </div>
     </div>
   );
-- 
cgit v1.2.3


From 8b6623d0e5a7e528ce60bfabc2355a6499837530 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Tue, 13 Jul 2021 17:06:01 +0530
Subject: Minor Design and Code improvements

---
 modern/src/DevicesList.js |  82 +++++++++++++++++--------------------
 modern/src/MainPage.js    | 100 +++++++++++++++++++++++++++-------------------
 2 files changed, 96 insertions(+), 86 deletions(-)

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index c774cdfe..d80c0608 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -19,7 +19,7 @@ import EditCollectionView from './EditCollectionView';
 import { useEffectAsync } from './reactHelper';
 import { formatPosition } from './common/formatter';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   list: {
     maxHeight: '100%',
   },
@@ -31,7 +31,7 @@ const useStyles = makeStyles(theme => ({
   batteryText: {
     fontSize: '0.75rem',
     fontWeight: 'normal',
-    lineHeight: '0.875rem'
+    lineHeight: '0.875rem',
   },
   green: {
     color: theme.palette.common.green,
@@ -40,58 +40,31 @@ const useStyles = makeStyles(theme => ({
     color: theme.palette.common.red,
   },
   gray: {
-    color: theme.palette.common.gray
-  }
+    color: theme.palette.common.gray,
+  },
 }));
 
-const OnlineStatus =({ status }) => {
-  
-  const classes = useStyles();
-
+const getOnlineStatus = (status) => {
   switch (status) {
     case 'online':
-      return <span className={classes.green}>{status}</span>
+      return 'green';
     case 'offline':
-      return <span className={classes.red}>{status}</span>
+      return 'red';
     case 'unknown':
     default:
-      return <span className={classes.gray}>{status}</span>
-  }
-}
-
-const DeviceStatus = ({ deviceId }) => {
-  const classes = useStyles();
-  let batteryClass = '';
-  
-  const position = useSelector(state => state.positions.items[deviceId]);
-  if (!position) {
-    return null;
+      return 'gray';
   }
-  const batteryLevel = position.attributes.hasOwnProperty('batteryLevel') ? position.attributes.batteryLevel : 'undefined';
+};
 
+const getBatteryStatus = (batteryLevel) => {
   if (batteryLevel >= 70) {
-    batteryClass = classes.green;
-  } else if (batteryLevel > 30) {
-    batteryClass = classes.gray;
-  } else {
-    batteryClass = classes.red;
+    return 'green';
   }
-  return (
-    <Grid container direction="row" alignItems="center" alignContent="center" spacing={1}>
-      {position.attributes.hasOwnProperty('ignition') && <Grid item>
-        <VpnKeyIcon className={`${position.attributes.ignition ? classes.green : classes.gray}`}/>
-      </Grid>}
-      {batteryLevel !== 'undefined' && <Grid item container xs alignItems="center" alignContent="center">
-        <Grid item> 
-          <span className={classes.batteryText}>{formatPosition(batteryLevel, 'batteryLevel')}</span>
-        </Grid>      
-        <Grid item> 
-          <BatteryFullIcon className={batteryClass} />
-        </Grid>
-      </Grid>}
-    </Grid>
-  );
-}
+  if (batteryLevel > 30) {
+    return 'gray';
+  }
+  return 'red';
+};
 
 const DeviceRow = ({ data, index, style }) => {
   const classes = useStyles();
@@ -99,6 +72,7 @@ const DeviceRow = ({ data, index, style }) => {
 
   const { items, onMenuClick } = data;
   const item = items[index];
+  const position = useSelector((state) => state.positions.items[item.id]);
 
   return (
     <div style={style}>
@@ -109,9 +83,27 @@ const DeviceRow = ({ data, index, style }) => {
               <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} alt="" />
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary={item.name} secondary={<OnlineStatus status={item.status} />} />
+          <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getOnlineStatus(item.status)] }} />
           <ListItemSecondaryAction>
-            <DeviceStatus deviceId={item.id} />
+            {position && (
+              <Grid container direction="row" alignItems="center" alignContent="center" spacing={1}>
+                {position.attributes.hasOwnProperty('ignition') && (
+                  <Grid item>
+                    <VpnKeyIcon className={`${position.attributes.ignition ? classes.green : classes.gray}`} />
+                  </Grid>
+                )}
+                {position.attributes.hasOwnProperty('batteryLevel') && (
+                  <Grid item container xs alignItems="center" alignContent="center">
+                    <Grid item>
+                      <span className={classes.batteryText}>{formatPosition(position.attributes.batteryLevel, 'batteryLevel')}</span>
+                    </Grid>
+                    <Grid item>
+                      <BatteryFullIcon className={classes[getBatteryStatus(position.attributes.batteryLevel)]} />
+                    </Grid>
+                  </Grid>
+                )}
+              </Grid>
+            )}
           </ListItemSecondaryAction>
         </ListItem>
         {index < items.length - 1 ? <Divider /> : null}
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 9740227e..e41cc338 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import classnames from 'classnames';
-import { makeStyles, withWidth, Paper, Toolbar, Grid, TextField, IconButton, Button } from '@material-ui/core';
+import {
+  makeStyles, Paper, Toolbar, Grid, TextField, IconButton, Button,
+} from '@material-ui/core';
 
 import { useTheme } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
@@ -48,15 +49,15 @@ const useStyles = makeStyles((theme) => ({
     zIndex: 1301,
     height: '100%',
     maxHeight: `calc(100vh - ${theme.spacing(20)}px)`,
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down('md')]: {
       top: theme.spacing(7),
       left: '0px',
       width: '100%',
       maxHeight: `calc(100vh - ${theme.spacing(14)}px)`,
-    }
+    },
   },
   paper: {
-    borderRadius: '0px', 
+    borderRadius: '0px',
   },
   toolbar: {
     paddingLeft: theme.spacing(2),
@@ -68,25 +69,33 @@ const useStyles = makeStyles((theme) => ({
   collapsed: {
     transform: `translateX(-${360 + 16}px)`,
     transition: 'transform .5s ease',
-    [theme.breakpoints.down("md")]: {
-      transform: `translateX(-100vw)`,
-    }
+    [theme.breakpoints.down('md')]: {
+      transform: 'translateX(-100vw)',
+    },
   },
   uncollapsed: {
     transform: `translateX(${theme.spacing(1.5)})`,
     transition: 'transform .5s ease',
-    [theme.breakpoints.down("md")]: {
-      transform: `translateX(0)`,
-    }
+    [theme.breakpoints.down('md')]: {
+      transform: 'translateX(0)',
+    },
   },
   deviceButton: {
     position: 'absolute',
     left: theme.spacing(1),
     top: theme.spacing(10.5),
     borderRadius: '0px',
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down('md')]: {
+      left: theme.spacing(0),
       top: theme.spacing(7),
-    }
+    },
+  },
+  deviceButtonBackground: {
+    backgroundColor: 'white',
+    color: '#777777',
+    '&:hover': {
+      backgroundColor: 'white',
+    },
   },
   bottomMenuContainer: {
     position: 'absolute',
@@ -94,11 +103,11 @@ const useStyles = makeStyles((theme) => ({
     bottom: theme.spacing(1.5),
     width: theme.dimensions.drawerWidthDesktop,
     zIndex: 1301,
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down('md')]: {
       bottom: theme.spacing(0),
       left: '0px',
-      width: '100%'
-    }
+      width: '100%',
+    },
   },
   menuButton: {
     display: 'flex',
@@ -108,10 +117,10 @@ const useStyles = makeStyles((theme) => ({
     fontSize: '0.75rem',
     fontWeight: 'normal',
     color: '#222222',
-  }
+  },
 }));
 
-const MainPage = ({ width }) => {
+const MainPage = () => {
   const classes = useStyles();
   const history = useHistory();
   const theme = useTheme();
@@ -123,7 +132,7 @@ const MainPage = ({ width }) => {
 
   const handleClose = () => {
     setCollapsed(!collapsed);
-  }
+  };
 
   return (
     <div className={classes.root}>
@@ -135,48 +144,57 @@ const MainPage = ({ width }) => {
         <CurrentPositionsMap />
         <SelectedDeviceMap />
       </Map>
-      {collapsed && 
-        <Button 
-          variant="contained" 
-          color={matchesMD ? "secondary": "default"}
+      {collapsed
+        && (
+        <Button
+          variant="contained"
+          color={matchesMD ? 'secondary' : 'primary'}
+          classes={{ containedPrimary: classes.deviceButtonBackground }}
           className={classes.deviceButton}
           onClick={handleClose}
-          startIcon={<ListIcon />}>
-          {t('deviceTitle')}
+          startIcon={<ListIcon />}
+          disableElevation
+        >
+          {!matchesMD ? t('deviceTitle') : ''}
         </Button>
-      }
+        )}
       <div className={`${classes.listContainer} ${collapsed ? classes.collapsed : classes.uncollapsed}`}>
-        <Grid container direction="column" spacing={matchesMD ? 0: 2} style={{height: '100%'}}>
+        <Grid container direction="column" spacing={matchesMD ? 0 : 2} style={{ height: '100%' }}>
           <Grid item>
             <Paper className={classes.paper}>
               <Toolbar className={classes.toolbar} disableGutters>
                 <Grid container direction="row" alignItems="center" spacing={2}>
-                  {matchesMD && <Grid item> 
+                  {matchesMD && (
+                  <Grid item>
                     <IconButton onClick={handleClose}>
                       <ArrowBackIcon />
-                    </IconButton>            
-                  </Grid>}
+                    </IconButton>
+                  </Grid>
+                  )}
                   <Grid item xs>
                     <TextField
                       fullWidth
-                      name='deviceName'
+                      name="deviceName"
                       value={deviceName || ''}
-                      autoComplete='deviceName'
+                      autoComplete="deviceName"
                       autoFocus
-                      onChange={event => setDeviceName(event.target.value)}
+                      onChange={(event) => setDeviceName(event.target.value)}
                       placeholder="Search Devices"
-                      variant='filled' />
+                      variant="filled"
+                    />
                   </Grid>
                   <Grid item>
                     <IconButton onClick={() => history.push('/device')}>
                       <AddIcon />
                     </IconButton>
                   </Grid>
-                  {!matchesMD && <Grid item>
+                  {!matchesMD && (
+                  <Grid item>
                     <IconButton onClick={handleClose}>
                       <CloseIcon />
                     </IconButton>
-                  </Grid>}
+                  </Grid>
+                  )}
                 </Grid>
               </Toolbar>
             </Paper>
@@ -196,25 +214,25 @@ const MainPage = ({ width }) => {
                 <IconButton classes={{ label: classes.menuButton }}>
                   <ReplayIcon />
                   <span className={classes.iconText}>{t('reportReplay')}</span>
-                </IconButton>                
+                </IconButton>
               </Grid>
               <Grid item>
                 <IconButton classes={{ label: classes.menuButton }}>
                   <DescriptionIcon />
                   <span className={classes.iconText}>{t('reportTitle')}</span>
-                </IconButton>                
+                </IconButton>
               </Grid>
               <Grid item>
                 <IconButton classes={{ label: classes.menuButton }}>
                   <ShuffleIcon />
                   <span className={classes.iconText}>Options</span>
-                </IconButton>                
+                </IconButton>
               </Grid>
               <Grid item>
                 <IconButton classes={{ label: classes.menuButton }}>
                   <PersonIcon />
                   <span className={classes.iconText}>{t('settingsUser')}</span>
-                </IconButton>                
+                </IconButton>
               </Grid>
             </Grid>
           </Toolbar>
@@ -224,4 +242,4 @@ const MainPage = ({ width }) => {
   );
 };
 
-export default withWidth()(MainPage);
+export default MainPage;
-- 
cgit v1.2.3


From cddbb69b40883155ded4679f6a8f7b25b09882ca Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Tue, 13 Jul 2021 17:12:06 +0530
Subject: Removing onMenuClick

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

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index d80c0608..6f0b7639 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -70,7 +70,7 @@ const DeviceRow = ({ data, index, style }) => {
   const classes = useStyles();
   const dispatch = useDispatch();
 
-  const { items, onMenuClick } = data;
+  const { items } = data;
   const item = items[index];
   const position = useSelector((state) => state.positions.items[item.id]);
 
-- 
cgit v1.2.3


From 4a6ed2462ed5ed2960fc8245ac3c5bae967e685b Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Mon, 19 Jul 2021 13:22:11 +0530
Subject: Minor code improvement

---
 modern/src/DevicesList.js | 14 ++++++++++----
 modern/src/MainPage.js    | 31 +++++++++++++++++--------------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 6f0b7639..b06f7f76 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -28,6 +28,12 @@ const useStyles = makeStyles((theme) => ({
     height: '25px',
     filter: 'brightness(0) invert(1)',
   },
+  listItem: {
+    backgroundColor: 'white',
+    '&:hover': {
+      backgroundColor: 'white',
+    },
+  },
   batteryText: {
     fontSize: '0.75rem',
     fontWeight: 'normal',
@@ -44,7 +50,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const getOnlineStatus = (status) => {
+const getStatusColor = (status) => {
   switch (status) {
     case 'online':
       return 'green';
@@ -77,13 +83,13 @@ const DeviceRow = ({ data, index, style }) => {
   return (
     <div style={style}>
       <Fragment key={index}>
-        <ListItem button key={item.id} onClick={() => dispatch(devicesActions.select(item))}>
+        <ListItem button key={item.id} className={classes.listItem} onClick={() => dispatch(devicesActions.select(item))}>
           <ListItemAvatar>
             <Avatar>
               <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} alt="" />
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getOnlineStatus(item.status)] }} />
+          <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getStatusColor(item.status)] }} />
           <ListItemSecondaryAction>
             {position && (
               <Grid container direction="row" alignItems="center" alignContent="center" spacing={1}>
@@ -145,7 +151,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
 };
 
 const DevicesList = () => (
-  <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" />
+  <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" disableAdd />
 );
 
 export default DevicesList;
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index e41cc338..d5447e55 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -65,6 +65,10 @@ const useStyles = makeStyles((theme) => ({
   },
   deviceList: {
     height: '100%',
+    backgroundColor: 'transparent',
+    [theme.breakpoints.down('md')]: {
+      backgroundColor: 'white',
+    },
   },
   collapsed: {
     transform: `translateX(-${360 + 16}px)`,
@@ -112,8 +116,6 @@ const useStyles = makeStyles((theme) => ({
   menuButton: {
     display: 'flex',
     flexDirection: 'column',
-  },
-  iconText: {
     fontSize: '0.75rem',
     fontWeight: 'normal',
     color: '#222222',
@@ -128,7 +130,8 @@ const MainPage = () => {
   const [deviceName, setDeviceName] = useState();
   const [collapsed, setCollapsed] = useState(false);
 
-  const matchesMD = useMediaQuery(theme.breakpoints.down('md'));
+  const isTablet = useMediaQuery(theme.breakpoints.down('md'));
+  const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
 
   const handleClose = () => {
     setCollapsed(!collapsed);
@@ -148,23 +151,23 @@ const MainPage = () => {
         && (
         <Button
           variant="contained"
-          color={matchesMD ? 'secondary' : 'primary'}
+          color={isPhone ? 'secondary' : 'primary'}
           classes={{ containedPrimary: classes.deviceButtonBackground }}
           className={classes.deviceButton}
           onClick={handleClose}
           startIcon={<ListIcon />}
           disableElevation
         >
-          {!matchesMD ? t('deviceTitle') : ''}
+          {!isPhone ? t('deviceTitle') : ''}
         </Button>
         )}
       <div className={`${classes.listContainer} ${collapsed ? classes.collapsed : classes.uncollapsed}`}>
-        <Grid container direction="column" spacing={matchesMD ? 0 : 2} style={{ height: '100%' }}>
+        <Grid container direction="column" spacing={isTablet ? 0 : 2} style={{ height: '100%' }}>
           <Grid item>
             <Paper className={classes.paper}>
               <Toolbar className={classes.toolbar} disableGutters>
                 <Grid container direction="row" alignItems="center" spacing={2}>
-                  {matchesMD && (
+                  {isTablet && (
                   <Grid item>
                     <IconButton onClick={handleClose}>
                       <ArrowBackIcon />
@@ -188,7 +191,7 @@ const MainPage = () => {
                       <AddIcon />
                     </IconButton>
                   </Grid>
-                  {!matchesMD && (
+                  {!isTablet && (
                   <Grid item>
                     <IconButton onClick={handleClose}>
                       <CloseIcon />
@@ -200,9 +203,9 @@ const MainPage = () => {
             </Paper>
           </Grid>
           <Grid item xs>
-            <Paper className={`${classes.deviceList} ${classes.paper}`}>
+            <div className={classes.deviceList}>
               <DevicesList />
-            </Paper>
+            </div>
           </Grid>
         </Grid>
       </div>
@@ -213,25 +216,25 @@ const MainPage = () => {
               <Grid item>
                 <IconButton classes={{ label: classes.menuButton }}>
                   <ReplayIcon />
-                  <span className={classes.iconText}>{t('reportReplay')}</span>
+                  {t('reportReplay')}
                 </IconButton>
               </Grid>
               <Grid item>
                 <IconButton classes={{ label: classes.menuButton }}>
                   <DescriptionIcon />
-                  <span className={classes.iconText}>{t('reportTitle')}</span>
+                  {t('reportTitle')}
                 </IconButton>
               </Grid>
               <Grid item>
                 <IconButton classes={{ label: classes.menuButton }}>
                   <ShuffleIcon />
-                  <span className={classes.iconText}>Options</span>
+                  Options
                 </IconButton>
               </Grid>
               <Grid item>
                 <IconButton classes={{ label: classes.menuButton }}>
                   <PersonIcon />
-                  <span className={classes.iconText}>{t('settingsUser')}</span>
+                  {t('settingsUser')}
                 </IconButton>
               </Grid>
             </Grid>
-- 
cgit v1.2.3


From c7e5e57c3ae706ad6e503beb0c535eca8ba8df40 Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Tue, 20 Jul 2021 18:19:13 +0000
Subject: Main page updates

---
 modern/src/MainPage.js | 235 +++++++++++++++----------------------------------
 1 file changed, 73 insertions(+), 162 deletions(-)

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index d5447e55..c411ec5a 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import {
-  makeStyles, Paper, Toolbar, Grid, TextField, IconButton, Button,
+  makeStyles, Paper, Toolbar, TextField, IconButton, Button,
 } from '@material-ui/core';
 
 import { useTheme } from '@material-ui/core/styles';
@@ -10,116 +10,77 @@ import AddIcon from '@material-ui/icons/Add';
 import CloseIcon from '@material-ui/icons/Close';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import ListIcon from '@material-ui/icons/List';
-import ReplayIcon from '@material-ui/icons/Replay';
-import DescriptionIcon from '@material-ui/icons/Description';
-import ShuffleIcon from '@material-ui/icons/Shuffle';
-import PersonIcon from '@material-ui/icons/Person';
 
 import DevicesList from './DevicesList';
-import MainToolbar from './MainToolbar';
 import Map from './map/Map';
 import SelectedDeviceMap from './map/SelectedDeviceMap';
 import AccuracyMap from './map/AccuracyMap';
 import GeofenceMap from './map/GeofenceMap';
 import CurrentPositionsMap from './map/CurrentPositionsMap';
 import CurrentLocationMap from './map/CurrentLocationMap';
+import BottomNav from "./components/BottomNav"
 import t from './common/localization';
 
 const useStyles = makeStyles((theme) => ({
   root: {
     height: '100vh',
-    display: 'flex',
-    flexDirection: 'column',
   },
-  drawerPaper: {
-    position: 'relative',
-    [theme.breakpoints.up('sm')]: {
-      width: 350,
-    },
-    [theme.breakpoints.down('xs')]: {
-      height: 250,
-    },
-    overflow: 'hidden',
-  },
-  listContainer: {
+  sidebar: {
+    display: 'flex',
+    flexDirection: "column",
     position: 'absolute',
-    left: theme.spacing(1.5),
-    top: theme.spacing(10.5),
+    left: 0,
+    top: 0,
+    margin: theme.spacing(1.5),
     width: theme.dimensions.drawerWidthDesktop,
+    bottom: theme.spacing(9.5),
     zIndex: 1301,
-    height: '100%',
-    maxHeight: `calc(100vh - ${theme.spacing(20)}px)`,
+    transition: 'transform .5s ease',
     [theme.breakpoints.down('md')]: {
-      top: theme.spacing(7),
-      left: '0px',
       width: '100%',
-      maxHeight: `calc(100vh - ${theme.spacing(14)}px)`,
+      margin: 0,
+      backgroundColor: 'white',
+    },
+  },
+  sidebarCollapsed: {
+    transform: `translateX(-${theme.dimensions.drawerWidthDesktop})`,
+    marginLeft: 0,
+    [theme.breakpoints.down('md')]: {
+      transform: 'translateX(-100vw)',
     },
   },
   paper: {
     borderRadius: '0px',
   },
   toolbar: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
+    display: 'flex',
+    padding: theme.spacing(0, 1),
+    '& > *': {
+      margin: theme.spacing(0, 1),
+    }
   },
   deviceList: {
-    height: '100%',
-    backgroundColor: 'transparent',
-    [theme.breakpoints.down('md')]: {
-      backgroundColor: 'white',
-    },
-  },
-  collapsed: {
-    transform: `translateX(-${360 + 16}px)`,
-    transition: 'transform .5s ease',
-    [theme.breakpoints.down('md')]: {
-      transform: 'translateX(-100vw)',
-    },
-  },
-  uncollapsed: {
-    transform: `translateX(${theme.spacing(1.5)})`,
-    transition: 'transform .5s ease',
-    [theme.breakpoints.down('md')]: {
-      transform: 'translateX(0)',
-    },
+    flex: 1,
+    overflow: 'auto',
+    paddingTop: theme.spacing(1.5),
   },
-  deviceButton: {
+  sidebarToggle: {
     position: 'absolute',
-    left: theme.spacing(1),
-    top: theme.spacing(10.5),
+    left: theme.spacing(1.5),
+    top: theme.spacing(3),
     borderRadius: '0px',
     [theme.breakpoints.down('md')]: {
       left: theme.spacing(0),
       top: theme.spacing(7),
     },
   },
-  deviceButtonBackground: {
+  sidebarToggleBg: {
     backgroundColor: 'white',
     color: '#777777',
     '&:hover': {
       backgroundColor: 'white',
     },
   },
-  bottomMenuContainer: {
-    position: 'absolute',
-    left: theme.spacing(1.5),
-    bottom: theme.spacing(1.5),
-    width: theme.dimensions.drawerWidthDesktop,
-    zIndex: 1301,
-    [theme.breakpoints.down('md')]: {
-      bottom: theme.spacing(0),
-      left: '0px',
-      width: '100%',
-    },
-  },
-  menuButton: {
-    display: 'flex',
-    flexDirection: 'column',
-    fontSize: '0.75rem',
-    fontWeight: 'normal',
-    color: '#222222',
-  },
 }));
 
 const MainPage = () => {
@@ -127,7 +88,7 @@ const MainPage = () => {
   const history = useHistory();
   const theme = useTheme();
 
-  const [deviceName, setDeviceName] = useState();
+  const [deviceName, setDeviceName] = useState('');
   const [collapsed, setCollapsed] = useState(false);
 
   const isTablet = useMediaQuery(theme.breakpoints.down('md'));
@@ -139,7 +100,6 @@ const MainPage = () => {
 
   return (
     <div className={classes.root}>
-      <MainToolbar />
       <Map>
         <CurrentLocationMap />
         <GeofenceMap />
@@ -147,100 +107,51 @@ const MainPage = () => {
         <CurrentPositionsMap />
         <SelectedDeviceMap />
       </Map>
-      {collapsed
-        && (
-        <Button
-          variant="contained"
-          color={isPhone ? 'secondary' : 'primary'}
-          classes={{ containedPrimary: classes.deviceButtonBackground }}
-          className={classes.deviceButton}
-          onClick={handleClose}
-          startIcon={<ListIcon />}
-          disableElevation
-        >
-          {!isPhone ? t('deviceTitle') : ''}
-        </Button>
-        )}
-      <div className={`${classes.listContainer} ${collapsed ? classes.collapsed : classes.uncollapsed}`}>
-        <Grid container direction="column" spacing={isTablet ? 0 : 2} style={{ height: '100%' }}>
-          <Grid item>
-            <Paper className={classes.paper}>
-              <Toolbar className={classes.toolbar} disableGutters>
-                <Grid container direction="row" alignItems="center" spacing={2}>
-                  {isTablet && (
-                  <Grid item>
-                    <IconButton onClick={handleClose}>
-                      <ArrowBackIcon />
-                    </IconButton>
-                  </Grid>
-                  )}
-                  <Grid item xs>
-                    <TextField
-                      fullWidth
-                      name="deviceName"
-                      value={deviceName || ''}
-                      autoComplete="deviceName"
-                      autoFocus
-                      onChange={(event) => setDeviceName(event.target.value)}
-                      placeholder="Search Devices"
-                      variant="filled"
-                    />
-                  </Grid>
-                  <Grid item>
-                    <IconButton onClick={() => history.push('/device')}>
-                      <AddIcon />
-                    </IconButton>
-                  </Grid>
-                  {!isTablet && (
-                  <Grid item>
-                    <IconButton onClick={handleClose}>
-                      <CloseIcon />
-                    </IconButton>
-                  </Grid>
-                  )}
-                </Grid>
-              </Toolbar>
-            </Paper>
-          </Grid>
-          <Grid item xs>
-            <div className={classes.deviceList}>
-              <DevicesList />
-            </div>
-          </Grid>
-        </Grid>
-      </div>
-      <div className={classes.bottomMenuContainer}>
-        <Paper className={classes.paper}>
+      <Button
+        variant="contained"
+        color={isPhone ? 'secondary' : 'primary'}
+        classes={{ containedPrimary: classes.sidebarToggleBg }}
+        className={classes.sidebarToggle}
+        onClick={handleClose}
+        startIcon={<ListIcon />}
+        disableElevation
+      >
+        {!isPhone ? t('deviceTitle') : ''}
+      </Button>
+      <div className={`${classes.sidebar} ${collapsed && classes.sidebarCollapsed}`}>
+        <Paper className={classes.paper} elevation={isTablet ? 3 : 1}>
           <Toolbar className={classes.toolbar} disableGutters>
-            <Grid container justify="space-around">
-              <Grid item>
-                <IconButton classes={{ label: classes.menuButton }}>
-                  <ReplayIcon />
-                  {t('reportReplay')}
-                </IconButton>
-              </Grid>
-              <Grid item>
-                <IconButton classes={{ label: classes.menuButton }}>
-                  <DescriptionIcon />
-                  {t('reportTitle')}
-                </IconButton>
-              </Grid>
-              <Grid item>
-                <IconButton classes={{ label: classes.menuButton }}>
-                  <ShuffleIcon />
-                  Options
-                </IconButton>
-              </Grid>
-              <Grid item>
-                <IconButton classes={{ label: classes.menuButton }}>
-                  <PersonIcon />
-                  {t('settingsUser')}
-                </IconButton>
-              </Grid>
-            </Grid>
+            {isTablet && (
+            <IconButton onClick={handleClose}>
+              <ArrowBackIcon />
+            </IconButton>
+            )}
+            <TextField
+              fullWidth
+              name="deviceName"
+              value={deviceName}
+              autoComplete="deviceName"
+              autoFocus
+              onChange={(event) => setDeviceName(event.target.value)}
+              placeholder="Search Devices"
+              variant="filled"
+            />
+            <IconButton onClick={() => history.push('/device')}>
+              <AddIcon />
+            </IconButton>
+            {!isTablet && (
+            <IconButton onClick={handleClose}>
+              <CloseIcon />
+            </IconButton>
+            )}
           </Toolbar>
         </Paper>
+        <div className={classes.deviceList}>
+          <DevicesList />
+        </div>
       </div>
+      
+      <BottomNav showOnDesktop />
     </div>
   );
 };
-- 
cgit v1.2.3


From e058059d9297afaf9bed45e863c41979196dad1b Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Tue, 20 Jul 2021 21:33:41 +0000
Subject: Bottom Nav

---
 modern/src/components/BottomNav.js | 109 +++++++++++++++++++++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 modern/src/components/BottomNav.js

diff --git a/modern/src/components/BottomNav.js b/modern/src/components/BottomNav.js
new file mode 100644
index 00000000..6aad1dd9
--- /dev/null
+++ b/modern/src/components/BottomNav.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { Link, useHistory } from 'react-router-dom';
+import {
+  makeStyles, Paper, Toolbar, IconButton, useMediaQuery, useTheme,
+} from '@material-ui/core';
+
+import ReplayIcon from '@material-ui/icons/Replay';
+import DescriptionIcon from '@material-ui/icons/Description';
+import ShuffleIcon from '@material-ui/icons/Shuffle';
+import MapIcon from '@material-ui/icons/Map';
+import LogoutIcon from '@material-ui/icons/ExitToApp';
+
+import { sessionActions } from '../store';
+import t from '../common/localization';
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    bottom: theme.spacing(0),
+    left: '0px',
+    width: '100%',
+    position: 'fixed',
+    zIndex: 1301,
+    [theme.breakpoints.up('lg')]: {
+      left: theme.spacing(1.5),
+      bottom: theme.spacing(1.5),
+      width: theme.dimensions.drawerWidthDesktop,
+    },
+  },
+  paper: {
+    borderRadius: '0px',
+  },
+  toolbar: {
+    padding: theme.spacing(0, 2),
+    display: 'flex',
+    justifyContent: 'space-around',
+    maxWidth: theme.dimensions.bottomNavMaxWidth,
+    margin: 'auto',
+  },
+  navItem: {
+    display: 'flex',
+    flexDirection: 'column',
+    fontSize: '0.75rem',
+    fontWeight: 'normal',
+  },
+}));
+
+const BottomNav = ({ showOnDesktop }) => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const history = useHistory();
+
+  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
+  const dispatch = useDispatch();
+
+  const NavLink = ({ children, location }) => (
+    <IconButton component={Link} classes={{ label: classes.navItem }} to={location}>
+      {children}
+    </IconButton>
+  );
+
+  const handleLogout = async () => {
+    const response = await fetch('/api/session', { method: 'DELETE' });
+    if (response.ok) {
+      dispatch(sessionActions.updateUser(null));
+      history.push('/login');
+    }
+  };
+
+  if (isDesktop && !showOnDesktop) return null;
+
+  return (
+    <div className={classes.container}>
+      <Paper className={classes.paper} elevation={isDesktop ? 1 : 3}>
+        <Toolbar className={classes.toolbar} disableGutters>
+
+          {isDesktop ? (
+            <NavLink location="/replay">
+              <ReplayIcon />
+              {t('reportReplay')}
+            </NavLink>
+          ) : (
+            <NavLink location="/">
+              <MapIcon />
+              {t('mapTitle')}
+            </NavLink>
+          )}
+
+          <NavLink location="/reports/route">
+            <DescriptionIcon />
+            {t('reportTitle')}
+          </NavLink>
+
+          <NavLink location="/settings/notifications">
+            <ShuffleIcon />
+            {t('settingsTitle')}
+          </NavLink>
+
+          <IconButton classes={{ label: classes.navItem }} onClick={handleLogout}>
+            <LogoutIcon />
+            {t('loginLogout')}
+          </IconButton>
+        </Toolbar>
+      </Paper>
+    </div>
+  );
+};
+
+export default BottomNav;
-- 
cgit v1.2.3


From 9dcecc62460c27b037fe7e56416afe6172404ef0 Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Tue, 20 Jul 2021 21:33:52 +0000
Subject: Updated Main page

---
 modern/src/MainPage.js         | 17 ++++++++---------
 modern/src/theme/dimensions.js |  1 +
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index c411ec5a..a53cec1a 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -9,7 +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 ListIcon from '@material-ui/icons/List';
+import ListIcon from '@material-ui/icons/ViewList';
 
 import DevicesList from './DevicesList';
 import Map from './map/Map';
@@ -18,7 +18,7 @@ import AccuracyMap from './map/AccuracyMap';
 import GeofenceMap from './map/GeofenceMap';
 import CurrentPositionsMap from './map/CurrentPositionsMap';
 import CurrentLocationMap from './map/CurrentLocationMap';
-import BottomNav from "./components/BottomNav"
+import BottomNav from './components/BottomNav';
 import t from './common/localization';
 
 const useStyles = makeStyles((theme) => ({
@@ -27,13 +27,13 @@ const useStyles = makeStyles((theme) => ({
   },
   sidebar: {
     display: 'flex',
-    flexDirection: "column",
+    flexDirection: 'column',
     position: 'absolute',
     left: 0,
     top: 0,
     margin: theme.spacing(1.5),
     width: theme.dimensions.drawerWidthDesktop,
-    bottom: theme.spacing(9.5),
+    bottom: theme.spacing(8),
     zIndex: 1301,
     transition: 'transform .5s ease',
     [theme.breakpoints.down('md')]: {
@@ -57,12 +57,12 @@ const useStyles = makeStyles((theme) => ({
     padding: theme.spacing(0, 1),
     '& > *': {
       margin: theme.spacing(0, 1),
-    }
+    },
   },
   deviceList: {
     flex: 1,
     overflow: 'auto',
-    paddingTop: theme.spacing(1.5),
+    padding: theme.spacing(1.5, 0),
   },
   sidebarToggle: {
     position: 'absolute',
@@ -71,7 +71,6 @@ const useStyles = makeStyles((theme) => ({
     borderRadius: '0px',
     [theme.breakpoints.down('md')]: {
       left: theme.spacing(0),
-      top: theme.spacing(7),
     },
   },
   sidebarToggleBg: {
@@ -113,9 +112,9 @@ const MainPage = () => {
         classes={{ containedPrimary: classes.sidebarToggleBg }}
         className={classes.sidebarToggle}
         onClick={handleClose}
-        startIcon={<ListIcon />}
         disableElevation
       >
+        <ListIcon />
         {!isPhone ? t('deviceTitle') : ''}
       </Button>
       <div className={`${classes.sidebar} ${collapsed && classes.sidebarCollapsed}`}>
@@ -150,7 +149,7 @@ const MainPage = () => {
           <DevicesList />
         </div>
       </div>
-      
+
       <BottomNav showOnDesktop />
     </div>
   );
diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js
index fcdbaee5..b6edc5e9 100644
--- a/modern/src/theme/dimensions.js
+++ b/modern/src/theme/dimensions.js
@@ -9,4 +9,5 @@ export default {
   columnWidthNumber: 130,
   columnWidthString: 160,
   columnWidthBoolean: 130,
+  bottomNavMaxWidth: '400px',
 };
-- 
cgit v1.2.3


From cc293e067842f9d88b56f143d5921790c91c4e37 Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Tue, 20 Jul 2021 21:54:15 +0000
Subject: callapse sidebar on tablets

---
 modern/src/MainPage.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index a53cec1a..6f6b05c0 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import {
   makeStyles, Paper, Toolbar, TextField, IconButton, Button,
@@ -87,16 +87,21 @@ const MainPage = () => {
   const history = useHistory();
   const theme = useTheme();
 
-  const [deviceName, setDeviceName] = useState('');
-  const [collapsed, setCollapsed] = useState(false);
-
   const isTablet = useMediaQuery(theme.breakpoints.down('md'));
   const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
 
+  const [deviceName, setDeviceName] = useState('');
+  const [collapsed, setCollapsed] = useState(false);
+
   const handleClose = () => {
     setCollapsed(!collapsed);
   };
 
+  // Collapse sidebar for tablets and phones
+  useEffect(() => {
+    setCollapsed(isTablet);
+  }, [isTablet]);
+
   return (
     <div className={classes.root}>
       <Map>
-- 
cgit v1.2.3


From f22c36eb475aa515c3991caff98605d67f1f18e0 Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Tue, 20 Jul 2021 22:30:36 +0000
Subject: Use ignition icon

---
 modern/public/images/icon/ignition.svg |  3 +++
 modern/src/DevicesList.js              | 15 ++++++++++-----
 modern/src/MainPage.js                 |  1 +
 3 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 modern/public/images/icon/ignition.svg

diff --git a/modern/public/images/icon/ignition.svg b/modern/public/images/icon/ignition.svg
new file mode 100644
index 00000000..d731c92e
--- /dev/null
+++ b/modern/public/images/icon/ignition.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 8H19.5C19.81 8 20.11 8.15 20.3 8.4L22.6 11.47C22.86 11.82 23 12.24 23 12.67V16C23 16.55 22.55 17 22 17H21C21 18.66 19.66 20 18 20C16.34 20 15 18.66 15 17H9C9 18.66 7.66 20 6 20C4.34 20 3 18.66 3 17C1.9 17 1 16.1 1 15V6C1 4.9 1.9 4 3 4H15C16.1 4 17 4.9 17 6V8ZM5 17C5 17.55 5.45 18 6 18C6.55 18 7 17.55 7 17C7 16.45 6.55 16 6 16C5.45 16 5 16.45 5 17ZM21.46 12L19.5 9.5H17V12H21.46ZM17 17C17 17.55 17.45 18 18 18C18.55 18 19 17.55 19 17C19 16.45 18.55 16 18 16C17.45 16 17 16.45 17 17ZM7.7704 16.1299L8.3613 16.2341C8.3613 16.2341 9.91885 14.1732 13.0446 10.0602L13.1033 9.96899C13.1774 9.86019 13.1742 9.63624 12.8847 9.58519L10.8165 9.22052L12.2178 4.72894L11.6269 4.62475C10.789 5.73304 10.0364 6.72746 9.36924 7.60897C8.4039 8.88444 7.61745 9.92355 7.01063 10.7292C6.99419 10.7534 7.10701 10.5973 6.95538 10.8007C6.80375 11.0041 6.7608 11.2132 7.10352 11.2736L9.17166 11.6383L7.7704 16.1299Z" fill="#F3A813"/>
+</svg>
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index b06f7f76..3ffd421e 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -9,10 +9,11 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import Grid from '@material-ui/core/Grid';
 import ListItemText from '@material-ui/core/ListItemText';
+import SvgIcon from '@material-ui/core/SvgIcon';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import BatteryFullIcon from '@material-ui/icons/BatteryFull';
-import VpnKeyIcon from '@material-ui/icons/VpnKey';
+import { ReactComponent as IgnitionIcon } from '../public/images/icon/ignition.svg';
 
 import { devicesActions } from './store';
 import EditCollectionView from './EditCollectionView';
@@ -48,6 +49,9 @@ const useStyles = makeStyles((theme) => ({
   gray: {
     color: theme.palette.common.gray,
   },
+  indicators: {
+    lineHeight: 1,
+  },
 }));
 
 const getStatusColor = (status) => {
@@ -79,6 +83,7 @@ const DeviceRow = ({ data, index, style }) => {
   const { items } = data;
   const item = items[index];
   const position = useSelector((state) => state.positions.items[item.id]);
+  const showIgnition = true;// position?.attributes.hasOwnProperty('ignition') && position.attributes.ignition
 
   return (
     <div style={style}>
@@ -90,12 +95,12 @@ const DeviceRow = ({ data, index, style }) => {
             </Avatar>
           </ListItemAvatar>
           <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getStatusColor(item.status)] }} />
-          <ListItemSecondaryAction>
+          <ListItemSecondaryAction className={classes.indicators}>
             {position && (
-              <Grid container direction="row" alignItems="center" alignContent="center" spacing={1}>
-                {position.attributes.hasOwnProperty('ignition') && (
+              <Grid container direction="row" alignItems="center" alignContent="center" spacing={2}>
+                {showIgnition && (
                   <Grid item>
-                    <VpnKeyIcon className={`${position.attributes.ignition ? classes.green : classes.gray}`} />
+                    <SvgIcon component={IgnitionIcon} />
                   </Grid>
                 )}
                 {position.attributes.hasOwnProperty('batteryLevel') && (
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 6f6b05c0..417cdb03 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -69,6 +69,7 @@ const useStyles = makeStyles((theme) => ({
     left: theme.spacing(1.5),
     top: theme.spacing(3),
     borderRadius: '0px',
+    minWidth: 0,
     [theme.breakpoints.down('md')]: {
       left: theme.spacing(0),
     },
-- 
cgit v1.2.3


From b0c4891c4b2687e7a08f05e779c84847a0f4f46c Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Tue, 20 Jul 2021 22:44:27 +0000
Subject: showignition logic

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

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 3ffd421e..aa856306 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -83,7 +83,7 @@ const DeviceRow = ({ data, index, style }) => {
   const { items } = data;
   const item = items[index];
   const position = useSelector((state) => state.positions.items[item.id]);
-  const showIgnition = true;// position?.attributes.hasOwnProperty('ignition') && position.attributes.ignition
+  const showIgnition = position?.attributes.hasOwnProperty('ignition') && position.attributes.ignition
 
   return (
     <div style={style}>
-- 
cgit v1.2.3


From 49a4517ec8b1f8ee7c9f38e0d7cd172033d9b170 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <41992346+mail2bishnoi@users.noreply.github.com>
Date: Thu, 22 Jul 2021 11:25:39 +0530
Subject: Fixed linting issue

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

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index aa856306..294a9fff 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -83,7 +83,7 @@ const DeviceRow = ({ data, index, style }) => {
   const { items } = data;
   const item = items[index];
   const position = useSelector((state) => state.positions.items[item.id]);
-  const showIgnition = position?.attributes.hasOwnProperty('ignition') && position.attributes.ignition
+  const showIgnition = position?.attributes.hasOwnProperty('ignition') && position.attributes.ignition;
 
   return (
     <div style={style}>
-- 
cgit v1.2.3