From d257aa2fb592c8def4ff40630914127575b87062 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sun, 27 Aug 2023 17:08:08 -0700 Subject: Streamline theme palette --- modern/src/common/theme/palette.js | 25 +++++++++---------------- modern/src/common/util/formatter.js | 10 +++++----- modern/src/login/ChangeServerPage.jsx | 2 +- modern/src/main/DeviceRow.jsx | 30 +++++++++++++++--------------- modern/src/map/MapRoutePath.js | 2 +- modern/src/map/MapRoutePoints.js | 2 +- modern/src/map/core/mapUtil.js | 2 +- modern/src/map/core/preloadImages.js | 12 +++++++++--- modern/src/map/main/MapAccuracy.js | 4 ++-- modern/src/map/main/MapLiveRoutes.js | 2 +- modern/src/map/main/PoiMap.js | 4 ++-- 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') && ( - + )} @@ -106,7 +106,7 @@ const DeviceRow = ({ data, index, style }) => { {position.attributes.ignition ? ( - + ) : ( )} @@ -118,16 +118,16 @@ const DeviceRow = ({ data, index, style }) => { {position.attributes.batteryLevel > 70 ? ( position.attributes.charge - ? () - : () + ? () + : () ) : position.attributes.batteryLevel > 30 ? ( position.attributes.charge - ? () - : () + ? () + : () ) : ( position.attributes.charge - ? () - : () + ? () + : () )} 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, }, }); -- cgit v1.2.3