Removed gray circles from device list, decreased map zoom by 1, default map is now Google Maps Streets

5 files changed, 10 insertions, 19 deletions

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index c5f2413..3c1b44f 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '@material-ui/core/Avatar';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
@@ -30,8 +29,8 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(1.5, 0),
   },
   icon: {
-    width: '30px',
-    height: '30px',
+    width: '40px',
+    height: '40px',
   },
   listItem: {
     backgroundColor: 'white',
@@ -100,9 +99,7 @@ const DeviceRow = ({ data, index, style }) => {
           }, 1000);
         }}>
         <ListItemAvatar>
-          <Avatar>
-            <img className={classes.icon} src={`images/icon/${(item.category || 'default').toLowerCase()}.png`} alt="" />
-          </Avatar>
+          <img className={classes.icon} src={`images/icon/${(item.category || 'default').toLowerCase()}.png`} alt="" />
         </ListItemAvatar>
         <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getStatusColor(item.status)] }} />
         <ListItemSecondaryAction className={classes.indicators}>
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index d71a40b..63e3a73 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -102,7 +102,7 @@ const Map = ({ children }) => {
       { id: 'gmapsStreets', title: t('mapGmapsStreets'), uri: styleGmapsStreets() },
       { id: 'gmapsSatellite', title: t('mapGmapsSatellite'), uri: styleGmapsSatellite() },
       { id: 'gmapsHybrid', title: t('mapGmapsHybrid'), uri: styleGmapsHybrid() },
-    ], 'locationIqStreets');
+    ], 'gmapsStreets');
   }, [mapTilerKey]);
 
   useEffect(() => {
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index 6bd7bcb..f69b541 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -112,13 +112,13 @@ const PositionsMap = ({ positions }) => {
         'text-allow-overlap': true,
         'text-anchor': 'bottom',
         'text-offset': [0, -2],
-        'text-font': ['Roboto Regular'],
+        'text-font': ['Roboto Bold'],
         'text-size': 12,
       },
       paint: {
         'text-color': {type: 'identity', property: 'color'},
         'text-halo-color': 'white',
-        'text-halo-width': 1,
+        'text-halo-width': 2,
       },
     });
     map.addLayer({
diff --git a/modern/src/map/SelectedDeviceMap.js b/modern/src/map/SelectedDeviceMap.js
index 5ce6744..d05394b 100644
--- a/modern/src/map/SelectedDeviceMap.js
+++ b/modern/src/map/SelectedDeviceMap.js
@@ -16,7 +16,7 @@ const SelectedDeviceMap = () => {
 
   useEffect(() => {
     if (mapCenter) {
-      map.easeTo({ center: mapCenter.position, zoom:19 });
+      map.easeTo({ center: mapCenter.position, zoom:18 });
     }
   }, [mapCenter]);
   
diff --git a/modern/src/map/mapUtil.js b/modern/src/map/mapUtil.js
index 43038ef..e93c146 100644
--- a/modern/src/map/mapUtil.js
+++ b/modern/src/map/mapUtil.js
@@ -36,19 +36,13 @@ export const prepareIcon = (background, icon, color) => {
   canvas.style.height = `${background.height}px`;
 
   const context = canvas.getContext('2d');
-  if (!icon) {
-    context.drawImage(background, 0, 0, canvas.width, canvas.height);
-  }
+  context.drawImage(background, 0, 0, canvas.width, canvas.height);
 
   if (icon) {
-    const iconRatio = 1;
+    const iconRatio = 0.7;
     const imageWidth = canvas.width * iconRatio;
     const imageHeight = canvas.height * iconRatio;
-    /*if (navigator.userAgent.indexOf('Firefox') > 0) {*/
-      context.drawImage(icon, (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight);
-    /*} else {
-      context.drawImage(canvasTintImage(icon, color), (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight);
-    }*/
+    context.drawImage(icon, (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight);
   }
 
   return context.getImageData(0, 0, canvas.width, canvas.height);