Streamline theme palette

11 files changed, 47 insertions, 48 deletions

diff --git a/modern/src/common/theme/palette.js b/modern/src/common/theme/palette.js
index 99288aee..7bd63dac 100644
--- a/modern/src/common/theme/palette.js
+++ b/modern/src/common/theme/palette.js
@@ -1,7 +1,5 @@
 import { useMediaQuery } from '@mui/material';
-import {
-  amber, grey, green, indigo, red,
-} from '@mui/material/colors';
+import { grey, green, indigo } from '@mui/material/colors';
 
 const validatedColor = (color) => (/^#([0-9A-Fa-f]{3}){1,2}$/.test(color) ? color : null);
 
@@ -10,27 +8,22 @@ export default (server) => {
   const serverDarkMode = server?.attributes?.darkMode;
   const darkMode = serverDarkMode !== undefined ? serverDarkMode : preferDarkMode;
 
-  const colors = {
-    primary: validatedColor(server?.attributes?.colorPrimary) || (darkMode ? indigo[200] : indigo[900]),
-    secondary: validatedColor(server?.attributes?.colorSecondary) || (darkMode ? green[200] : green[800]),
-    positive: green[500],
-    medium: amber[700],
-    negative: red[500],
-    neutral: grey[500],
-    geometry: '#3bb2d0',
-  };
-
   return {
     mode: darkMode ? 'dark' : 'light',
     background: {
       default: darkMode ? grey[900] : grey[50],
     },
     primary: {
-      main: colors.primary,
+      main: validatedColor(server?.attributes?.colorPrimary) || (darkMode ? indigo[200] : indigo[900]),
     },
     secondary: {
-      main: colors.secondary,
+      main: validatedColor(server?.attributes?.colorSecondary) || (darkMode ? green[200] : green[800]),
+    },
+    neutral: {
+      main: grey[500],
+    },
+    geometry: {
+      main: '#3bb2d0',
     },
-    colors,
   };
 };
diff --git a/modern/src/common/util/formatter.js b/modern/src/common/util/formatter.js
index 0f7d2cc8..b00896c2 100644
--- a/modern/src/common/util/formatter.js
+++ b/modern/src/common/util/formatter.js
@@ -100,9 +100,9 @@ export const formatCoordinate = (key, value, unit) => {
 export const getStatusColor = (status) => {
   switch (status) {
     case 'online':
-      return 'positive';
+      return 'success';
     case 'offline':
-      return 'negative';
+      return 'error';
     case 'unknown':
     default:
       return 'neutral';
@@ -111,12 +111,12 @@ export const getStatusColor = (status) => {
 
 export const getBatteryStatus = (batteryLevel) => {
   if (batteryLevel >= 70) {
-    return 'positive';
+    return 'success';
   }
   if (batteryLevel > 30) {
-    return 'medium';
+    return 'warning';
   }
-  return 'negative';
+  return 'error';
 };
 
 export const formatNotificationTitle = (t, notification, includeId) => {
diff --git a/modern/src/login/ChangeServerPage.jsx b/modern/src/login/ChangeServerPage.jsx
index a92536d0..1ffc1257 100644
--- a/modern/src/login/ChangeServerPage.jsx
+++ b/modern/src/login/ChangeServerPage.jsx
@@ -24,7 +24,7 @@ const useStyles = makeStyles((theme) => ({
   icon: {
     textAlign: 'center',
     fontSize: '128px',
-    color: theme.palette.colors.neutral,
+    color: theme.palette.neutral.main,
   },
   container: {
     textAlign: 'center',
diff --git a/modern/src/main/DeviceRow.jsx b/modern/src/main/DeviceRow.jsx
index 44da58f9..82ffb1b5 100644
--- a/modern/src/main/DeviceRow.jsx
+++ b/modern/src/main/DeviceRow.jsx
@@ -33,17 +33,17 @@ const useStyles = makeStyles((theme) => ({
     fontWeight: 'normal',
     lineHeight: '0.875rem',
   },
-  positive: {
-    color: theme.palette.colors.positive,
+  success: {
+    color: theme.palette.success.main,
   },
-  medium: {
-    color: theme.palette.colors.medium,
+  warning: {
+    color: theme.palette.warning.main,
   },
-  negative: {
-    color: theme.palette.colors.negative,
+  error: {
+    color: theme.palette.error.main,
   },
   neutral: {
-    color: theme.palette.colors.neutral,
+    color: theme.palette.neutral.main,
   },
 }));
 
@@ -98,7 +98,7 @@ const DeviceRow = ({ data, index, style }) => {
             {position.attributes.hasOwnProperty('alarm') && (
               <Tooltip title={`${t('eventAlarm')}: ${formatAlarm(position.attributes.alarm, t)}`}>
                 <IconButton size="small">
-                  <ErrorIcon fontSize="small" className={classes.negative} />
+                  <ErrorIcon fontSize="small" className={classes.error} />
                 </IconButton>
               </Tooltip>
             )}
@@ -106,7 +106,7 @@ const DeviceRow = ({ data, index, style }) => {
               <Tooltip title={`${t('positionIgnition')}: ${formatBoolean(position.attributes.ignition, t)}`}>
                 <IconButton size="small">
                   {position.attributes.ignition ? (
-                    <EngineIcon width={20} height={20} className={classes.positive} />
+                    <EngineIcon width={20} height={20} className={classes.success} />
                   ) : (
                     <EngineIcon width={20} height={20} className={classes.neutral} />
                   )}
@@ -118,16 +118,16 @@ const DeviceRow = ({ data, index, style }) => {
                 <IconButton size="small">
                   {position.attributes.batteryLevel > 70 ? (
                     position.attributes.charge
-                      ? (<BatteryChargingFullIcon fontSize="small" className={classes.positive} />)
-                      : (<BatteryFullIcon fontSize="small" className={classes.positive} />)
+                      ? (<BatteryChargingFullIcon fontSize="small" className={classes.success} />)
+                      : (<BatteryFullIcon fontSize="small" className={classes.success} />)
                   ) : position.attributes.batteryLevel > 30 ? (
                     position.attributes.charge
-                      ? (<BatteryCharging60Icon fontSize="small" className={classes.medium} />)
-                      : (<Battery60Icon fontSize="small" className={classes.medium} />)
+                      ? (<BatteryCharging60Icon fontSize="small" className={classes.warning} />)
+                      : (<Battery60Icon fontSize="small" className={classes.warning} />)
                   ) : (
                     position.attributes.charge
-                      ? (<BatteryCharging20Icon fontSize="small" className={classes.negative} />)
-                      : (<Battery20Icon fontSize="small" className={classes.negative} />)
+                      ? (<BatteryCharging20Icon fontSize="small" className={classes.error} />)
+                      : (<Battery20Icon fontSize="small" className={classes.error} />)
                   )}
                 </IconButton>
               </Tooltip>
diff --git a/modern/src/map/MapRoutePath.js b/modern/src/map/MapRoutePath.js
index c7d03400..18069a71 100644
--- a/modern/src/map/MapRoutePath.js
+++ b/modern/src/map/MapRoutePath.js
@@ -20,7 +20,7 @@ const MapRoutePath = ({ name, positions, coordinates }) => {
         }
       }
     }
-    return theme.palette.colors.geometry;
+    return theme.palette.geometry.main;
   });
 
   useEffect(() => {
diff --git a/modern/src/map/MapRoutePoints.js b/modern/src/map/MapRoutePoints.js
index bed81f3a..e93b91eb 100644
--- a/modern/src/map/MapRoutePoints.js
+++ b/modern/src/map/MapRoutePoints.js
@@ -32,7 +32,7 @@ const MapPositions = ({ positions, onClick }) => {
       source: id,
       paint: {
         'circle-radius': 5,
-        'circle-color': theme.palette.colors.geometry,
+        'circle-color': theme.palette.geometry.main,
       },
     });
 
diff --git a/modern/src/map/core/mapUtil.js b/modern/src/map/core/mapUtil.js
index feb458d6..8dcded2c 100644
--- a/modern/src/map/core/mapUtil.js
+++ b/modern/src/map/core/mapUtil.js
@@ -79,7 +79,7 @@ export const geofenceToFeature = (theme, item) => {
     geometry,
     properties: {
       name: item.name,
-      color: item.attributes.color || theme.palette.colors.geometry,
+      color: item.attributes.color || theme.palette.geometry.main,
     },
   };
 };
diff --git a/modern/src/map/core/preloadImages.js b/modern/src/map/core/preloadImages.js
index 0634251b..e2aba74e 100644
--- a/modern/src/map/core/preloadImages.js
+++ b/modern/src/map/core/preloadImages.js
@@ -1,5 +1,6 @@
-import palette from '../../common/theme/palette';
 import { loadImage, prepareIcon } from './mapUtil';
+import { grey, indigo } from '@mui/material/colors';
+import createPalette from '@mui/material/styles/createPalette';
 
 import directionSvg from '../../resources/images/direction.svg';
 import backgroundSvg from '../../resources/images/background.svg';
@@ -53,15 +54,20 @@ export const mapIconKey = (category) => (mapIcons.hasOwnProperty(category) ? cat
 
 export const mapImages = {};
 
+const mapPalette = createPalette({
+  primary: { main: indigo[900] },
+  neutral: { main: grey[500] },
+});
+
 export default async () => {
   const background = await loadImage(backgroundSvg);
   mapImages.background = await prepareIcon(background);
   mapImages.direction = await prepareIcon(await loadImage(directionSvg));
   await Promise.all(Object.keys(mapIcons).map(async (category) => {
     const results = [];
-    ['primary', 'positive', 'negative', 'neutral'].forEach((color) => {
+    ['primary', 'success', 'error', 'neutral'].forEach((color) => {
       results.push(loadImage(mapIcons[category]).then((icon) => {
-        mapImages[`${category}-${color}`] = prepareIcon(background, icon, palette().colors[color]);
+        mapImages[`${category}-${color}`] = prepareIcon(background, icon, mapPalette[color].main);
       }));
     });
     await Promise.all(results);
diff --git a/modern/src/map/main/MapAccuracy.js b/modern/src/map/main/MapAccuracy.js
index cdc706cc..4f025b08 100644
--- a/modern/src/map/main/MapAccuracy.js
+++ b/modern/src/map/main/MapAccuracy.js
@@ -25,8 +25,8 @@ const MapAccuracy = ({ positions }) => {
         ['==', '$type', 'Polygon'],
       ],
       paint: {
-        'fill-color': theme.palette.colors.geometry,
-        'fill-outline-color': theme.palette.colors.geometry,
+        'fill-color': theme.palette.geometry.main,
+        'fill-outline-color': theme.palette.geometry.main,
         'fill-opacity': 0.25,
       },
     });
diff --git a/modern/src/map/main/MapLiveRoutes.js b/modern/src/map/main/MapLiveRoutes.js
index 049ff9c9..44cdc6ca 100644
--- a/modern/src/map/main/MapLiveRoutes.js
+++ b/modern/src/map/main/MapLiveRoutes.js
@@ -70,7 +70,7 @@ const MapLiveRoutes = () => {
             coordinates: history[deviceId],
           },
           properties: {
-            color: devices[deviceId].attributes['web.reportColor'] || theme.palette.colors.geometry,
+            color: devices[deviceId].attributes['web.reportColor'] || theme.palette.geometry.main,
           },
         })),
       });
diff --git a/modern/src/map/main/PoiMap.js b/modern/src/map/main/PoiMap.js
index 0d94ca15..07341183 100644
--- a/modern/src/map/main/PoiMap.js
+++ b/modern/src/map/main/PoiMap.js
@@ -35,7 +35,7 @@ const PoiMap = () => {
         type: 'circle',
         paint: {
           'circle-radius': 5,
-          'circle-color': theme.palette.colors.geometry,
+          'circle-color': theme.palette.geometry.main,
         },
       });
       map.addLayer({
@@ -43,7 +43,7 @@ const PoiMap = () => {
         id: 'poi-line',
         type: 'line',
         paint: {
-          'line-color': theme.palette.colors.geometry,
+          'line-color': theme.palette.geometry.main,
           'line-width': 2,
         },
       });