Update icons and bottom menu

2 files changed, 30 insertions, 20 deletions

diff --git a/modern/src/components/BottomMenu.js b/modern/src/components/BottomMenu.js
index a1e96256..eaa0671a 100644
--- a/modern/src/components/BottomMenu.js
+++ b/modern/src/components/BottomMenu.js
@@ -1,14 +1,14 @@
-import React from 'react';
-import { useDispatch } from 'react-redux';
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import {
-  makeStyles, Paper, BottomNavigation, BottomNavigationAction,
+  makeStyles, Paper, BottomNavigation, BottomNavigationAction, Menu, MenuItem, Typography,
 } from '@material-ui/core';
 
 import DescriptionIcon from '@material-ui/icons/Description';
-import ShuffleIcon from '@material-ui/icons/Shuffle';
+import SettingsIcon from '@material-ui/icons/Settings';
 import MapIcon from '@material-ui/icons/Map';
-import LogoutIcon from '@material-ui/icons/ExitToApp';
+import PersonIcon from '@material-ui/icons/Person';
 
 import { sessionActions } from '../store';
 import { useTranslation } from '../LocalizationProvider';
@@ -19,7 +19,6 @@ const useStyles = makeStyles((theme) => ({
     left: '0px',
     width: '100%',
     position: 'fixed',
-    zIndex: 1301,
     [theme.breakpoints.up('lg')]: {
       left: theme.spacing(1.5),
       bottom: theme.spacing(1.5),
@@ -31,11 +30,14 @@ const useStyles = makeStyles((theme) => ({
 const BottomMenu = () => {
   const classes = useStyles();
   const history = useHistory();
+  const dispatch = useDispatch();
   const t = useTranslation();
 
-  const dispatch = useDispatch();
+  const userId = useSelector((state) => state.session.user?.id);
+
+  const [anchorEl, setAnchorEl] = useState(null);
 
-  const handleSelection = async (_, value) => {
+  const handleSelection = async (event, value) => {
     switch (value) {
       case 1:
         history.push('/reports/route');
@@ -44,27 +46,35 @@ const BottomMenu = () => {
         history.push('/settings/notifications');
         break;
       case 3:
-        await fetch('/api/session', { method: 'DELETE' });
-        history.push('/login');
-        dispatch(sessionActions.updateUser(null));
+        setAnchorEl(event.currentTarget);
         break;
       default:
         break;
     }
   };
 
+  const handleLogout = async () => {
+    await fetch('/api/session', { method: 'DELETE' });
+    history.push('/login');
+    dispatch(sessionActions.updateUser(null));
+  };
+
   return (
     <Paper square elevation={3} className={classes.container}>
-      <BottomNavigation
-        value={0}
-        onChange={handleSelection}
-        showLabels
-      >
+      <BottomNavigation value={0} onChange={handleSelection} showLabels>
         <BottomNavigationAction label={t('mapTitle')} icon={<MapIcon />} />
         <BottomNavigationAction label={t('reportTitle')} icon={<DescriptionIcon />} />
-        <BottomNavigationAction label={t('settingsTitle')} icon={<ShuffleIcon />} />
-        <BottomNavigationAction label={t('loginLogout')} icon={<LogoutIcon />} />
+        <BottomNavigationAction label={t('settingsTitle')} icon={<SettingsIcon />} />
+        <BottomNavigationAction label={t('settingsUser')} icon={<PersonIcon />} />
       </BottomNavigation>
+      <Menu anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)} >
+        <MenuItem onClick={() => history.push(`/user/${userId}`)}>
+        <Typography color="textPrimary">{t('settingsUser')}</Typography>
+        </MenuItem>
+        <MenuItem onClick={handleLogout}>
+          <Typography color="error">{t('loginLogout')}</Typography>
+        </MenuItem>
+      </Menu>
     </Paper>
   );
 };
diff --git a/modern/src/map/StatusCard.js b/modern/src/map/StatusCard.js
index 94d38182..8b71913a 100644
--- a/modern/src/map/StatusCard.js
+++ b/modern/src/map/StatusCard.js
@@ -6,7 +6,7 @@ import {
 } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
 import ReplayIcon from '@material-ui/icons/Replay';
-import ExitToAppIcon from '@material-ui/icons/ExitToApp';
+import PublishIcon from '@material-ui/icons/Publish';
 import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
 
@@ -113,7 +113,7 @@ const StatusCard = ({ deviceId, onClose }) => {
               <ReplayIcon />
             </IconButton>
             <IconButton>
-              <ExitToAppIcon />
+              <PublishIcon />
             </IconButton>
             <IconButton onClick={() => history.push(`/device/${deviceId}`)}>
               <EditIcon />