5 files changed, 20 insertions, 13 deletions
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index e06fd58..9b2a5bf 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -30,9 +30,8 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(1.5, 0),
   },
   icon: {
-    width: '25px',
-    height: '25px',
-    filter: 'brightness(0) invert(1)',
+    width: '30px',
+    height: '30px',
   },
   listItem: {
     backgroundColor: 'white',
@@ -93,10 +92,15 @@ const DeviceRow = ({ data, index, style }) => {
 
   return (
     <div style={style}>
-      <ListItem button key={item.id} className={classes.listItem} onClick={() => dispatch(devicesActions.select(item))}>
+      <ListItem button key={item.id} className={classes.listItem} onClick={() => {
+          dispatch(devicesActions.select(item));
+          setTimeout (() => {
+            dispatch(devicesActions.unselect());
+          }, 1000);
+        }}>
         <ListItemAvatar>
           <Avatar>
-            <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} alt="" />
+            <img className={classes.icon} src={`images/icon/${item.category || 'default'}.png`} alt="" />
           </Avatar>
         </ListItemAvatar>
         <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getStatusColor(item.status)] }} />
@@ -153,7 +157,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
             height={height}
             itemCount={items.length}
             itemData={{ items, onMenuClick }}
-            itemSize={72}
+            itemSize={92}
             overscanCount={10}
             innerRef={listInnerEl}
           >
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index dcf5a92..a5f69e0 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -49,7 +49,7 @@ const initMap = async () => {
     await Promise.all(deviceCategories.map(async (category) => {
       const results = [];
       ['green', 'red', 'gray'].forEach((color) => {
-        results.push(loadImage(`images/icon/${category}.svg`).then((icon) => {
+        results.push(loadImage(`images/icon/${category}.png`).then((icon) => {
           map.addImage(`${category}-${color}`, prepareIcon(background, icon, palette.common[color]), {
             pixelRatio: window.devicePixelRatio,
           });
diff --git a/modern/src/map/SelectedDeviceMap.js b/modern/src/map/SelectedDeviceMap.js
index 6384717..d05394b 100644
--- a/modern/src/map/SelectedDeviceMap.js
+++ b/modern/src/map/SelectedDeviceMap.js
@@ -16,10 +16,10 @@ const SelectedDeviceMap = () => {
 
   useEffect(() => {
     if (mapCenter) {
-      map.easeTo({ center: mapCenter.position });
+      map.easeTo({ center: mapCenter.position, zoom:18 });
     }
   }, [mapCenter]);
-
+  
   return null;
 };
 
diff --git a/modern/src/map/mapUtil.js b/modern/src/map/mapUtil.js
index 2aa86c6..ca7b3af 100644
--- a/modern/src/map/mapUtil.js
+++ b/modern/src/map/mapUtil.js
@@ -39,14 +39,14 @@ export const prepareIcon = (background, icon, color) => {
   context.drawImage(background, 0, 0, canvas.width, canvas.height);
 
   if (icon) {
-    const iconRatio = 0.5;
+    const iconRatio = 0.8;
     const imageWidth = canvas.width * iconRatio;
     const imageHeight = canvas.height * iconRatio;
-    if (navigator.userAgent.indexOf('Firefox') > 0) {
+    /*if (navigator.userAgent.indexOf('Firefox') > 0) {*/
       context.drawImage(icon, (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight);
-    } else {
+    /*} else {
       context.drawImage(canvasTintImage(icon, color), (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight);
-    }
+    }*/
   }
 
   return context.getImageData(0, 0, canvas.width, canvas.height);
diff --git a/modern/src/store/devices.js b/modern/src/store/devices.js
index cca23cb..b76bc2f 100644
--- a/modern/src/store/devices.js
+++ b/modern/src/store/devices.js
@@ -17,6 +17,9 @@ const { reducer, actions } = createSlice({
     select(state, action) {
       state.selectedId = action.payload.id;
     },
+    unselect(state, action) {
+      state.selectedId = null;
+    },
     remove(state, action) {
       delete state.items[action.payload];
     },