Streamline theme palette

7 files changed, 17 insertions, 11 deletions

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,
         },
       });