aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-06-03 08:25:48 -0700
committerAnton Tananaev <anton@traccar.org>2022-06-03 08:25:48 -0700
commit7d521e8411dbeb9ca6bbeb98453145b44c7e5913 (patch)
tree369bb41e7a03d1f4c7a43ab6dafa69526af9101c
parentc3b728b2a29d014ec1a4de454f33b47d0e88fa47 (diff)
downloadtrackermap-web-7d521e8411dbeb9ca6bbeb98453145b44c7e5913.tar.gz
trackermap-web-7d521e8411dbeb9ca6bbeb98453145b44c7e5913.tar.bz2
trackermap-web-7d521e8411dbeb9ca6bbeb98453145b44c7e5913.zip
Add geometry color to theme
-rw-r--r--modern/src/common/theme/palette.js1
-rw-r--r--modern/src/main/MainPage.js2
-rw-r--r--modern/src/map/MapRoutePath.js5
-rw-r--r--modern/src/map/main/MapAccuracy.js11
-rw-r--r--modern/src/map/main/MapGeofence.js9
-rw-r--r--modern/src/map/main/MapLiveRoutes.js5
-rw-r--r--modern/src/map/main/PoiMap.js5
7 files changed, 28 insertions, 10 deletions
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({