Adjusted media queries, and device color = gray when ignition is undefined

5 files changed, 8 insertions, 6 deletions

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index aee5a3c..0559f15 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -101,7 +101,7 @@ const MainPage = () => {
   const isComputer = useMediaQuery(theme.breakpoints.down('lg'));
   const isTablet = useMediaQuery(theme.breakpoints.down('md'));
   const isPhone = useMediaQuery(theme.breakpoints.down('sm'));
-  const isWide = useMediaQuery(theme.breakpoints.up('sm'));
+  const isWide = useMediaQuery(theme.breakpoints.up('md')/* || theme.breakpoints.up('sm') || theme.breakpoints.up('xs')*/);
 
   const [deviceName, setDeviceName] = useState('');
   const collapsed = useSelector((state) => state.ui.collapsed);
@@ -142,7 +142,7 @@ const MainPage = () => {
       <Paper square elevation={3} className={`${classes.sidebar} ${(!isWide && collapsed) && classes.sidebarCollapsed}`}>
         <Paper className={classes.paper} square elevation={3}>
           <Toolbar className={classes.toolbar} disableGutters>
-            {isPhone && (
+            {!isWide && (
             <IconButton onClick={handleClose}>
               <ArrowBackIcon />
             </IconButton>
diff --git a/modern/src/components/BottomMenu.js b/modern/src/components/BottomMenu.js
index db8cb3b..7ce83e5 100644
--- a/modern/src/components/BottomMenu.js
+++ b/modern/src/components/BottomMenu.js
@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
     position: 'fixed',
     zIndex: 1301,
-    [theme.breakpoints.up('lg')]: {
+    [theme.breakpoints.up('md')]: {
       left: theme.spacing(1.5),
       bottom: theme.spacing(1.5),
       width: theme.dimensions.drawerWidthDesktop,
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index 63e3a73..d02fae1 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -44,7 +44,7 @@ const initMap = async () => {
   if (ready) return;
   if (!map.hasImage('background')) {
     const background = await loadImage('images/background.svg');
-    map.addImage('background', await prepareIcon(background), {
+    map.addImage('background', prepareIcon(background), {
       pixelRatio: window.devicePixelRatio,
     });
     await Promise.all(deviceCategories.map(async (category) => {
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index f69b541..ba23289 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -22,6 +22,8 @@ const PositionsMap = ({ positions }) => {
     if (position) {
       if (position.attributes.ignition) {
         return 'green';
+      } else if (position.attributes.ignition == undefined) {
+        return 'gray';
       } else {
         return 'red';
       }
diff --git a/modern/src/theme/index.js b/modern/src/theme/index.js
index dc0a35b..02865c2 100644
--- a/modern/src/theme/index.js
+++ b/modern/src/theme/index.js
@@ -1,9 +1,9 @@
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import palette from './palette';
 import overrides from './overrides';
 import dimensions from './dimensions';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   palette,
   overrides,
   dimensions,