From 7d521e8411dbeb9ca6bbeb98453145b44c7e5913 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Fri, 3 Jun 2022 08:25:48 -0700 Subject: Add geometry color to theme --- modern/src/common/theme/palette.js | 1 + modern/src/main/MainPage.js | 2 +- modern/src/map/MapRoutePath.js | 5 ++++- modern/src/map/main/MapAccuracy.js | 11 ++++++++--- modern/src/map/main/MapGeofence.js | 9 ++++++--- modern/src/map/main/MapLiveRoutes.js | 5 ++++- modern/src/map/main/PoiMap.js | 5 ++++- 7 files changed, 28 insertions(+), 10 deletions(-) (limited to 'modern/src') diff --git a/modern/src/common/theme/palette.js b/modern/src/common/theme/palette.js index 6a49ba59..1ef57713 100644 --- a/modern/src/common/theme/palette.js +++ b/modern/src/common/theme/palette.js @@ -19,5 +19,6 @@ export default { medium: amber[700], negative: red[500], neutral: grey[500], + geometry: '#3bb2d0', }, }; diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js index 41e51609..5a35dcef 100644 --- a/modern/src/main/MainPage.js +++ b/modern/src/main/MainPage.js @@ -104,7 +104,7 @@ const useStyles = makeStyles((theme) => ({ }, sidebarToggleBg: { backgroundColor: 'white', - color: '#777777', + color: 'rgba(0, 0, 0, 0.6)', '&:hover': { backgroundColor: 'white', }, diff --git a/modern/src/map/MapRoutePath.js b/modern/src/map/MapRoutePath.js index 9703bf24..c2ef1d8e 100644 --- a/modern/src/map/MapRoutePath.js +++ b/modern/src/map/MapRoutePath.js @@ -1,3 +1,4 @@ +import { useTheme } from '@mui/styles'; import maplibregl from 'maplibre-gl'; import { useEffect } from 'react'; import { useSelector } from 'react-redux'; @@ -6,6 +7,8 @@ import { map } from './core/MapView'; const MapRoutePath = ({ positions }) => { const id = 'replay'; + const theme = useTheme(); + const reportColor = useSelector((state) => { const position = positions.find(() => true); if (position) { @@ -17,7 +20,7 @@ const MapRoutePath = ({ positions }) => { } } } - return '#3bb2d0'; + return theme.palette.colors.geometry; }); useEffect(() => { diff --git a/modern/src/map/main/MapAccuracy.js b/modern/src/map/main/MapAccuracy.js index 089389bd..3c48c788 100644 --- a/modern/src/map/main/MapAccuracy.js +++ b/modern/src/map/main/MapAccuracy.js @@ -2,14 +2,19 @@ import { useEffect } from 'react'; import { useSelector } from 'react-redux'; import circle from '@turf/circle'; +import { useTheme } from '@mui/styles'; import { map } from '../core/MapView'; const MapAccuracy = () => { const id = 'accuracy'; + const theme = useTheme(); + const positions = useSelector((state) => ({ type: 'FeatureCollection', - features: Object.values(state.positions.items).filter((position) => position.accuracy > 0).map((position) => circle([position.longitude, position.latitude], position.accuracy * 0.001)), + features: Object.values(state.positions.items) + .filter((position) => position.accuracy > 0) + .map((position) => circle([position.longitude, position.latitude], position.accuracy * 0.001)), })); useEffect(() => { @@ -29,8 +34,8 @@ const MapAccuracy = () => { ['==', '$type', 'Polygon'], ], paint: { - 'fill-color': '#3bb2d0', - 'fill-outline-color': '#3bb2d0', + 'fill-color': theme.palette.colors.geometry, + 'fill-outline-color': theme.palette.colors.geometry, 'fill-opacity': 0.25, }, }); diff --git a/modern/src/map/main/MapGeofence.js b/modern/src/map/main/MapGeofence.js index 71d5cb6e..b62cd378 100644 --- a/modern/src/map/main/MapGeofence.js +++ b/modern/src/map/main/MapGeofence.js @@ -1,12 +1,15 @@ import { useEffect } from 'react'; import { useSelector } from 'react-redux'; +import { useTheme } from '@mui/styles'; import { map } from '../core/MapView'; import { geofenceToFeature } from '../core/mapUtil'; const MapGeofence = () => { const id = 'geofences'; + const theme = useTheme(); + const geofences = useSelector((state) => state.geofences.items); useEffect(() => { @@ -26,8 +29,8 @@ const MapGeofence = () => { ['==', '$type', 'Polygon'], ], paint: { - 'fill-color': '#3bb2d0', - 'fill-outline-color': '#3bb2d0', + 'fill-color': theme.palette.colors.geometry, + 'fill-outline-color': theme.palette.colors.geometry, 'fill-opacity': 0.1, }, }); @@ -36,7 +39,7 @@ const MapGeofence = () => { id: 'geofences-line', type: 'line', paint: { - 'line-color': '#3bb2d0', + 'line-color': theme.palette.colors.geometry, 'line-width': 2, }, }); diff --git a/modern/src/map/main/MapLiveRoutes.js b/modern/src/map/main/MapLiveRoutes.js index 09319cff..a675afa0 100644 --- a/modern/src/map/main/MapLiveRoutes.js +++ b/modern/src/map/main/MapLiveRoutes.js @@ -1,12 +1,15 @@ import { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; +import { useTheme } from '@mui/styles'; import { map } from '../core/MapView'; import { usePrevious } from '../../reactHelper'; const MapLiveRoutes = () => { const id = 'liveRoute'; + const theme = useTheme(); + const selectedDeviceId = useSelector((state) => state.devices.selectedId); const currentDeviceId = usePrevious(selectedDeviceId); @@ -34,7 +37,7 @@ const MapLiveRoutes = () => { 'line-cap': 'round', }, paint: { - 'line-color': '#3bb2d0', + 'line-color': theme.palette.colors.geometry, 'line-width': 2, }, }); diff --git a/modern/src/map/main/PoiMap.js b/modern/src/map/main/PoiMap.js index 3ca344c5..a5185c75 100644 --- a/modern/src/map/main/PoiMap.js +++ b/modern/src/map/main/PoiMap.js @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react'; import { kml } from '@tmcw/togeojson'; +import { useTheme } from '@mui/styles'; import { map } from '../core/MapView'; import { useEffectAsync } from '../../reactHelper'; import { usePreference } from '../../common/util/preferences'; @@ -8,6 +9,8 @@ import { usePreference } from '../../common/util/preferences'; const PoiMap = () => { const id = 'poi'; + const theme = useTheme(); + const poiLayer = usePreference('poiLayer'); const [data, setData] = useState(null); @@ -32,7 +35,7 @@ const PoiMap = () => { type: 'circle', paint: { 'circle-radius': 5, - 'circle-color': '#3bb2d0', + 'circle-color': theme.palette.colors.geometry, }, }); map.addLayer({ -- cgit v1.2.3