aboutsummaryrefslogtreecommitdiff
path: root/modern/src/other
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/other')
-rw-r--r--modern/src/other/EventPage.js9
-rw-r--r--modern/src/other/GeofencesList.js10
-rw-r--r--modern/src/other/GeofencesPage.js19
-rw-r--r--modern/src/other/PositionPage.js19
-rw-r--r--modern/src/other/ReplayPage.js39
5 files changed, 59 insertions, 37 deletions
diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js
index 9f5f7c84..d2f12ed1 100644
--- a/modern/src/other/EventPage.js
+++ b/modern/src/other/EventPage.js
@@ -1,9 +1,10 @@
import React, { useState } from 'react';
import {
- makeStyles, Typography, AppBar, Toolbar, IconButton,
-} from '@material-ui/core';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+ Typography, AppBar, Toolbar, IconButton,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { useNavigate, useParams } from 'react-router-dom';
import { useEffectAsync } from '../reactHelper';
import { useTranslation } from '../common/components/LocalizationProvider';
@@ -60,7 +61,7 @@ const EventPage = () => {
<div className={classes.root}>
<AppBar color="inherit" position="static">
<Toolbar>
- <IconButton color="inherit" edge="start" onClick={() => navigate('/')}>
+ <IconButton size="large" color="inherit" edge="start" onClick={() => navigate('/')}>
<ArrowBackIcon />
</IconButton>
<Typography variant="h6">{t('positionEvent')}</Typography>
diff --git a/modern/src/other/GeofencesList.js b/modern/src/other/GeofencesList.js
index 4abb528c..7521de80 100644
--- a/modern/src/other/GeofencesList.js
+++ b/modern/src/other/GeofencesList.js
@@ -1,10 +1,10 @@
import React, { Fragment } from 'react';
import { useDispatch, useSelector } from 'react-redux';
-import { makeStyles } from '@material-ui/core/styles';
-import Divider from '@material-ui/core/Divider';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
+import makeStyles from '@mui/styles/makeStyles';
+import Divider from '@mui/material/Divider';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
import { devicesActions, geofencesActions } from '../store';
import CollectionActions from '../settings/components/CollectionActions';
diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js
index 80e23cba..6f60ce42 100644
--- a/modern/src/other/GeofencesPage.js
+++ b/modern/src/other/GeofencesPage.js
@@ -1,10 +1,11 @@
import React from 'react';
import {
- Divider, makeStyles, Typography, IconButton, useMediaQuery,
-} from '@material-ui/core';
-import { useTheme } from '@material-ui/core/styles';
-import Drawer from '@material-ui/core/Drawer';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+ Divider, Typography, IconButton, useMediaQuery,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { useTheme } from '@mui/material/styles';
+import Drawer from '@mui/material/Drawer';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { useNavigate } from 'react-router-dom';
import Map from '../map/core/Map';
import MapCurrentLocation from '../map/MapCurrentLocation';
@@ -24,7 +25,7 @@ const useStyles = makeStyles((theme) => ({
overflow: 'hidden',
display: 'flex',
flexDirection: 'row',
- [theme.breakpoints.down('xs')]: {
+ [theme.breakpoints.down('sm')]: {
flexDirection: 'column-reverse',
},
},
@@ -33,7 +34,7 @@ const useStyles = makeStyles((theme) => ({
[theme.breakpoints.up('sm')]: {
width: dimensions.drawerWidthTablet,
},
- [theme.breakpoints.down('xs')]: {
+ [theme.breakpoints.down('sm')]: {
height: dimensions.drawerHeightPhone,
},
},
@@ -54,7 +55,7 @@ const GeofencesPage = () => {
const navigate = useNavigate();
const t = useTranslation();
- const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
+ const isPhone = useMediaQuery(theme.breakpoints.down('sm'));
return (
<div className={classes.root}>
@@ -65,7 +66,7 @@ const GeofencesPage = () => {
classes={{ paper: classes.drawerPaper }}
>
<div className={classes.drawerHeader}>
- <IconButton onClick={() => navigate(-1)}>
+ <IconButton size="large" onClick={() => navigate(-1)}>
<ArrowBackIcon />
</IconButton>
<Typography variant="h6" color="inherit" noWrap>
diff --git a/modern/src/other/PositionPage.js b/modern/src/other/PositionPage.js
index 8188f669..2c755a5a 100644
--- a/modern/src/other/PositionPage.js
+++ b/modern/src/other/PositionPage.js
@@ -2,9 +2,20 @@ import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import {
- makeStyles, Typography, Container, Paper, AppBar, Toolbar, IconButton, Table, TableHead, TableRow, TableCell, TableBody,
-} from '@material-ui/core';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+ Typography,
+ Container,
+ Paper,
+ AppBar,
+ Toolbar,
+ IconButton,
+ Table,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableBody,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { useNavigate, useParams } from 'react-router-dom';
import { useEffectAsync } from '../reactHelper';
import { prefixString } from '../common/util/stringUtils';
@@ -63,7 +74,7 @@ const PositionPage = () => {
<div className={classes.root}>
<AppBar position="sticky" color="inherit">
<Toolbar>
- <IconButton color="inherit" edge="start" onClick={() => navigate(-1)}>
+ <IconButton size="large" color="inherit" edge="start" onClick={() => navigate(-1)}>
<ArrowBackIcon />
</IconButton>
<Typography variant="h6">
diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js
index c95240be..4b3c4c09 100644
--- a/modern/src/other/ReplayPage.js
+++ b/modern/src/other/ReplayPage.js
@@ -2,14 +2,15 @@ import React, {
useState, useEffect, useRef, useCallback,
} from 'react';
import {
- Grid, IconButton, makeStyles, Paper, Slider, Toolbar, Tooltip, Typography,
-} from '@material-ui/core';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import SettingsIcon from '@material-ui/icons/Settings';
-import PlayArrowIcon from '@material-ui/icons/PlayArrow';
-import PauseIcon from '@material-ui/icons/Pause';
-import FastForwardIcon from '@material-ui/icons/FastForward';
-import FastRewindIcon from '@material-ui/icons/FastRewind';
+ Grid, IconButton, Paper, Slider, Toolbar, Tooltip, Typography,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import SettingsIcon from '@mui/icons-material/Settings';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import PauseIcon from '@mui/icons-material/Pause';
+import FastForwardIcon from '@mui/icons-material/FastForward';
+import FastRewindIcon from '@mui/icons-material/FastRewind';
import { useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import Map from '../map/core/Map';
@@ -33,7 +34,7 @@ const useStyles = makeStyles((theme) => ({
top: 0,
margin: theme.spacing(1.5),
width: theme.dimensions.drawerWidthDesktop,
- [theme.breakpoints.down('sm')]: {
+ [theme.breakpoints.down('md')]: {
width: '100%',
margin: 0,
},
@@ -60,7 +61,7 @@ const useStyles = makeStyles((theme) => ({
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(2),
- [theme.breakpoints.down('sm')]: {
+ [theme.breakpoints.down('md')]: {
margin: theme.spacing(1),
},
[theme.breakpoints.up('md')]: {
@@ -146,13 +147,13 @@ const ReplayPage = () => {
<div className={classes.sidebar}>
<Paper elevation={3} square>
<Toolbar>
- <IconButton onClick={() => navigate('/')}>
+ <IconButton size="large" onClick={() => navigate('/')}>
<ArrowBackIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>{t('reportReplay')}</Typography>
{!expanded && (
<Grid item>
- <IconButton onClick={() => setExpanded(true)}>
+ <IconButton size="large" onClick={() => setExpanded(true)}>
<SettingsIcon />
</IconButton>
</Grid>
@@ -176,13 +177,21 @@ const ReplayPage = () => {
/>
<div className={classes.controls}>
{`${index + 1}/${positions.length}`}
- <IconButton onClick={() => setIndex((index) => index - 1)} disabled={playing}>
+ <IconButton
+ size="large"
+ onClick={() => setIndex((index) => index - 1)}
+ disabled={playing}
+ >
<FastRewindIcon />
</IconButton>
- <IconButton onClick={() => setPlaying(!playing)}>
+ <IconButton onClick={() => setPlaying(!playing)} size="large">
{playing ? <PauseIcon /> : <PlayArrowIcon /> }
</IconButton>
- <IconButton onClick={() => setIndex((index) => index + 1)} disabled={playing}>
+ <IconButton
+ size="large"
+ onClick={() => setIndex((index) => index + 1)}
+ disabled={playing}
+ >
<FastForwardIcon />
</IconButton>
{formatTime(positions[index].fixTime)}
generated by cgit v1.2.3 (git 2.39.1) at 2024-09-21 17:13:37 +0000