3 files changed, 8 insertions, 16 deletions
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index bbfe4764..deb2ec9b 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -48,9 +48,9 @@ const initMap = async () => {
     });
     await Promise.all(deviceCategories.map(async (category) => {
       const results = [];
-      ['green', 'red', 'gray'].forEach((color) => {
+      ['positive', 'negative', 'neutral'].forEach((color) => {
         results.push(loadImage(`images/icon/${category}.svg`).then((icon) => {
-          map.addImage(`${category}-${color}`, prepareIcon(background, icon, palette.common[color]), {
+          map.addImage(`${category}-${color}`, prepareIcon(background, icon, palette.colors[color]), {
             pixelRatio: window.devicePixelRatio,
           });
         }));
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index 8d100534..791c7abe 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -9,6 +9,7 @@ import { map } from './Map';
 import store from '../store';
 import StatusView from './StatusView';
 import theme from '../theme';
+import { getStatusColor } from '../common/formatter';
 
 const PositionsMap = ({ positions }) => {
   const id = 'positions';
@@ -17,24 +18,13 @@ const PositionsMap = ({ positions }) => {
   const history = useHistory();
   const devices = useSelector((state) => state.devices.items);
 
-  const deviceColor = (device) => {
-    switch (device.status) {
-      case 'online':
-        return 'green';
-      case 'offline':
-        return 'red';
-      default:
-        return 'gray';
-    }
-  };
-
   const createFeature = (devices, position) => {
     const device = devices[position.deviceId];
     return {
       deviceId: position.deviceId,
       name: device.name,
       category: device.category || 'default',
-      color: deviceColor(device),
+      color: getStatusColor(device.status),
     };
   };
 
diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js
index 5526e148..cec71f98 100644
--- a/modern/src/map/StatusView.js
+++ b/modern/src/map/StatusView.js
@@ -25,7 +25,9 @@ const useStyles = makeStyles((theme) => ({
   paper: {
     width: '300px',
   },
-  ...theme.palette.colors,
+  negative: {
+    color: theme.palette.colors.negative,
+  },
   listItemContainer: {
     maxWidth: '240px',
   },
@@ -124,7 +126,7 @@ const StatusView = ({
               </IconButton>
             </Grid>
             <Grid item>
-              <IconButton onClick={handleRemove} className={classes.red}>
+              <IconButton onClick={handleRemove} className={classes.negative}>
                 <DeleteIcon />
               </IconButton>
             </Grid>