7 files changed, 28 insertions, 76 deletions

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 10ac4fc7..a2495f9d 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -17,7 +17,7 @@ import { ReactComponent as IgnitionIcon } from '../public/images/ignition.svg';
 import { devicesActions } from './store';
 import EditCollectionView from './EditCollectionView';
 import { useEffectAsync } from './reactHelper';
-import { formatPosition } from './common/formatter';
+import { formatPosition, getBatteryStatus, getStatusColor } from './common/formatter';
 import { getDevices, getPosition } from './common/selectors';
 import { useTranslation } from './LocalizationProvider';
 
@@ -45,42 +45,20 @@ const useStyles = makeStyles((theme) => ({
     fontWeight: 'normal',
     lineHeight: '0.875rem',
   },
-  green: {
-    color: theme.palette.common.green,
+  positive: {
+    color: theme.palette.colors.positive,
   },
-  red: {
-    color: theme.palette.common.red,
+  negative: {
+    color: theme.palette.colors.negative,
   },
-  gray: {
-    color: theme.palette.common.gray,
+  neutral: {
+    color: theme.palette.colors.neutral,
   },
   indicators: {
     lineHeight: 1,
   },
 }));
 
-const getStatusColor = (status) => {
-  switch (status) {
-    case 'online':
-      return 'green';
-    case 'offline':
-      return 'red';
-    case 'unknown':
-    default:
-      return 'gray';
-  }
-};
-
-const getBatteryStatus = (batteryLevel) => {
-  if (batteryLevel >= 70) {
-    return 'green';
-  }
-  if (batteryLevel > 30) {
-    return 'gray';
-  }
-  return 'red';
-};
-
 const DeviceRow = ({ data, index, style }) => {
   const classes = useStyles();
   const dispatch = useDispatch();
diff --git a/modern/src/StartPage.js b/modern/src/StartPage.js
index 1e204c22..fcfaccca 100644
--- a/modern/src/StartPage.js
+++ b/modern/src/StartPage.js
@@ -12,7 +12,7 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: 'center',
     alignItems: 'center',
     color: theme.palette.secondary.contrastText,
-    background: theme.palette.common.purple,
+    background: theme.palette.primary.main,
     paddingBottom: theme.spacing(5),
     width: theme.dimensions.sidebarWidth,
     [theme.breakpoints.down('md')]: {
diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js
index 0ff4e741..32df04c2 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -104,21 +104,21 @@ export const formatCoordinate = (key, value, unit) => {
 export const getStatusColor = (status) => {
   switch (status) {
     case 'online':
-      return 'green';
+      return 'positive';
     case 'offline':
-      return 'red';
+      return 'negative';
     case 'unknown':
     default:
-      return 'gray';
+      return 'neutral';
   }
 };
 
 export const getBatteryStatus = (batteryLevel) => {
   if (batteryLevel >= 70) {
-    return 'green';
+    return 'positive';
   }
   if (batteryLevel > 30) {
-    return 'gray';
+    return 'neutral';
   }
-  return 'red';
+  return 'negative';
 };
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>
diff --git a/modern/src/theme/palette.js b/modern/src/theme/palette.js
index 622e49b0..46f82ae9 100644
--- a/modern/src/theme/palette.js
+++ b/modern/src/theme/palette.js
@@ -1,32 +1,14 @@
-const traccarWhite = '#FFF';
-const traccarPurple = '#333366';
-const traccarGreen = '#4CAF50';
-const traccarRed = '#CC2222';
-const traccarGray = '#888888';
-
 export default {
-  common: {
-    purple: traccarPurple,
-    green: traccarGreen,
-    red: traccarRed,
-    gray: traccarGray,
-  },
   primary: {
-    main: traccarPurple,
+    main: '#333366',
   },
   secondary: {
-    main: traccarGreen,
-    contrastText: traccarWhite,
+    main: '#4CAF50',
+    contrastText: '#FFFFFF',
   },
   colors: {
-    red: {
-      color: traccarRed,
-    },
-    green: {
-      color: traccarGreen,
-    },
-    gray: {
-      color: traccarGray,
-    },
+    positive: '#4CAF50',
+    negative: '#CC2222',
+    neutral: '#888888',
   },
 };