aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/common/theme/palette.js25
-rw-r--r--modern/src/common/util/formatter.js10
-rw-r--r--modern/src/login/ChangeServerPage.jsx2
-rw-r--r--modern/src/main/DeviceRow.jsx30
-rw-r--r--modern/src/map/MapRoutePath.js2
-rw-r--r--modern/src/map/MapRoutePoints.js2
-rw-r--r--modern/src/map/core/mapUtil.js2
-rw-r--r--modern/src/map/core/preloadImages.js12
-rw-r--r--modern/src/map/main/MapAccuracy.js4
-rw-r--r--modern/src/map/main/MapLiveRoutes.js2
-rw-r--r--modern/src/map/main/PoiMap.js4
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,
},
});
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 19:15:10 +0000