diff options
66 files changed, 475 insertions, 266 deletions
diff --git a/modern/package.json b/modern/package.json index 89b0a6f9..320d3411 100644 --- a/modern/package.json +++ b/modern/package.json @@ -4,10 +4,13 @@ "private": true, "dependencies": { "@craco/craco": "^5.9.0", + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", "@mapbox/mapbox-gl-draw": "^1.3.0", - "@material-ui/core": "^4.12.4", - "@material-ui/icons": "^4.11.3", - "@material-ui/lab": "^4.0.0-alpha.58", + "@mui/icons-material": "^5.8.0", + "@mui/lab": "^5.0.0-alpha.82", + "@mui/material": "^5.8.0", + "@mui/styles": "^5.8.0", "@reduxjs/toolkit": "^1.8.1", "@tmcw/togeojson": "^4.5.0", "@turf/circle": "^6.5.0", diff --git a/modern/src/App.js b/modern/src/App.js index 84459cd5..3ba6b2e1 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -1,7 +1,8 @@ import React from 'react'; import { Outlet } from 'react-router-dom'; import { useSelector } from 'react-redux'; -import { makeStyles, LinearProgress, useMediaQuery } from '@material-ui/core'; +import { LinearProgress, useMediaQuery } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import theme from './common/theme'; import BottomMenu from './common/components/BottomMenu'; diff --git a/modern/src/Navigation.js b/modern/src/Navigation.js index a538029b..062890f3 100644 --- a/modern/src/Navigation.js +++ b/modern/src/Navigation.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { Route, Routes, useNavigate } from 'react-router-dom'; import { useDispatch } from 'react-redux'; -import { LinearProgress } from '@material-ui/core'; +import { LinearProgress } from '@mui/material'; import MainPage from './main/MainPage'; import RouteReportPage from './reports/RouteReportPage'; import ServerPage from './settings/ServerPage'; diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js index f776ebc7..57ffa0d5 100644 --- a/modern/src/SocketController.js +++ b/modern/src/SocketController.js @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; import { useDispatch, useSelector, connect } from 'react-redux'; -import { Snackbar } from '@material-ui/core'; +import { Snackbar } from '@mui/material'; import { useNavigate } from 'react-router-dom'; import { positionsActions, devicesActions, sessionActions } from './store'; diff --git a/modern/src/common/components/BottomMenu.js b/modern/src/common/components/BottomMenu.js index 7db4dff8..b011638e 100644 --- a/modern/src/common/components/BottomMenu.js +++ b/modern/src/common/components/BottomMenu.js @@ -3,13 +3,13 @@ import { useDispatch, useSelector } from 'react-redux'; import { useNavigate, useLocation } from 'react-router-dom'; import { Paper, BottomNavigation, BottomNavigationAction, Menu, MenuItem, Typography, -} from '@material-ui/core'; +} from '@mui/material'; -import DescriptionIcon from '@material-ui/icons/Description'; -import SettingsIcon from '@material-ui/icons/Settings'; -import MapIcon from '@material-ui/icons/Map'; -import PersonIcon from '@material-ui/icons/Person'; -import ExitToAppIcon from '@material-ui/icons/ExitToApp'; +import DescriptionIcon from '@mui/icons-material/Description'; +import SettingsIcon from '@mui/icons-material/Settings'; +import MapIcon from '@mui/icons-material/Map'; +import PersonIcon from '@mui/icons-material/Person'; +import ExitToAppIcon from '@mui/icons-material/ExitToApp'; import { sessionActions } from '../../store'; import { useTranslation } from './LocalizationProvider'; diff --git a/modern/src/common/components/ErrorHandler.js b/modern/src/common/components/ErrorHandler.js index 5a238956..08ba8e12 100644 --- a/modern/src/common/components/ErrorHandler.js +++ b/modern/src/common/components/ErrorHandler.js @@ -1,5 +1,4 @@ -import { Snackbar } from '@material-ui/core'; -import { Alert } from '@material-ui/lab'; +import { Snackbar, Alert } from '@mui/material'; import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { usePrevious } from '../../reactHelper'; diff --git a/modern/src/common/components/LinkField.js b/modern/src/common/components/LinkField.js index 0f6cc7ba..308ee585 100644 --- a/modern/src/common/components/LinkField.js +++ b/modern/src/common/components/LinkField.js @@ -1,6 +1,6 @@ import { FormControl, InputLabel, MenuItem, Select, -} from '@material-ui/core'; +} from '@mui/material'; import React, { useState } from 'react'; import { useEffectAsync } from '../../reactHelper'; diff --git a/modern/src/common/components/NavBar.js b/modern/src/common/components/NavBar.js index ac689e76..09560176 100644 --- a/modern/src/common/components/NavBar.js +++ b/modern/src/common/components/NavBar.js @@ -1,13 +1,18 @@ import React from 'react'; import { AppBar, Toolbar, Typography, IconButton, -} from '@material-ui/core'; -import MenuIcon from '@material-ui/icons/Menu'; +} from '@mui/material'; +import MenuIcon from '@mui/icons-material/Menu'; const Navbar = ({ setOpenDrawer, title }) => ( <AppBar position="sticky" color="inherit"> <Toolbar> - <IconButton color="inherit" edge="start" onClick={() => setOpenDrawer(true)}> + <IconButton + size="large" + color="inherit" + edge="start" + onClick={() => setOpenDrawer(true)} + > <MenuIcon /> </IconButton> <Typography variant="h6" noWrap> diff --git a/modern/src/common/components/PageLayout.js b/modern/src/common/components/PageLayout.js index d92b71c3..5360a554 100644 --- a/modern/src/common/components/PageLayout.js +++ b/modern/src/common/components/PageLayout.js @@ -1,9 +1,19 @@ import React, { useState } from 'react'; import { - AppBar, Breadcrumbs, Divider, Drawer, Hidden, IconButton, makeStyles, Toolbar, Typography, useMediaQuery, useTheme, -} from '@material-ui/core'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; -import MenuIcon from '@material-ui/icons/Menu'; + AppBar, + Breadcrumbs, + Divider, + Drawer, + Hidden, + IconButton, + Toolbar, + Typography, + useMediaQuery, + useTheme, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import MenuIcon from '@mui/icons-material/Menu'; import { useNavigate } from 'react-router-dom'; import { useTranslation } from './LocalizationProvider'; @@ -62,7 +72,7 @@ const PageLayout = ({ menu, breadcrumbs, children }) => { return ( <> - <Hidden smDown> + <Hidden mdDown> <div className={classes.desktopRoot}> <Drawer variant="permanent" @@ -71,7 +81,7 @@ const PageLayout = ({ menu, breadcrumbs, children }) => { > <div className={classes.toolbar}> <Toolbar> - <IconButton color="inherit" edge="start" onClick={() => navigate('/')}> + <IconButton size="large" color="inherit" edge="start" onClick={() => navigate('/')}> <ArrowBackIcon /> </IconButton> <PageTitle breadcrumbs={breadcrumbs} /> @@ -96,7 +106,7 @@ const PageLayout = ({ menu, breadcrumbs, children }) => { </Drawer> <AppBar position="static" color="inherit"> <Toolbar> - <IconButton color="inherit" edge="start" onClick={() => setOpenDrawer(true)}> + <IconButton size="large" color="inherit" edge="start" onClick={() => setOpenDrawer(true)}> <MenuIcon /> </IconButton> <PageTitle breadcrumbs={breadcrumbs} /> diff --git a/modern/src/common/components/PositionValue.js b/modern/src/common/components/PositionValue.js index 1162a150..3dd0eb6f 100644 --- a/modern/src/common/components/PositionValue.js +++ b/modern/src/common/components/PositionValue.js @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { Link } from '@material-ui/core'; +import { Link } from '@mui/material'; import { Link as RouterLink } from 'react-router-dom'; import { formatAlarm, formatBoolean, formatCoordinate, formatCourse, formatDistance, formatNumber, formatPercentage, formatSpeed, formatTime, diff --git a/modern/src/common/components/RemoveDialog.js b/modern/src/common/components/RemoveDialog.js index a11af4c2..1af4e6a8 100644 --- a/modern/src/common/components/RemoveDialog.js +++ b/modern/src/common/components/RemoveDialog.js @@ -1,6 +1,7 @@ import React from 'react'; -import Button from '@material-ui/core/Button'; -import { Snackbar, makeStyles } from '@material-ui/core'; +import Button from '@mui/material/Button'; +import { Snackbar } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useTranslation } from './LocalizationProvider'; import { useCatch } from '../../reactHelper'; import { snackBarDurationLongMs } from '../util/duration'; diff --git a/modern/src/common/components/SelectField.js b/modern/src/common/components/SelectField.js index 5a9a176b..18b3afbb 100644 --- a/modern/src/common/components/SelectField.js +++ b/modern/src/common/components/SelectField.js @@ -1,6 +1,6 @@ import { FormControl, InputLabel, MenuItem, Select, -} from '@material-ui/core'; +} from '@mui/material'; import React, { useState } from 'react'; import { useEffectAsync } from '../../reactHelper'; diff --git a/modern/src/common/components/SideNav.js b/modern/src/common/components/SideNav.js index ad7c212a..648059d1 100644 --- a/modern/src/common/components/SideNav.js +++ b/modern/src/common/components/SideNav.js @@ -1,7 +1,7 @@ import React, { Fragment } from 'react'; import { List, ListItem, ListItemText, ListItemIcon, Divider, ListSubheader, -} from '@material-ui/core'; +} from '@mui/material'; import { Link, useLocation } from 'react-router-dom'; const SideNav = ({ routes }) => { diff --git a/modern/src/common/theme/index.js b/modern/src/common/theme/index.js index 02865c23..8e85150e 100644 --- a/modern/src/common/theme/index.js +++ b/modern/src/common/theme/index.js @@ -1,12 +1,12 @@ -import { createTheme } from '@material-ui/core/styles'; +import { createTheme, adaptV4Theme } from '@mui/material/styles'; import palette from './palette'; import overrides from './overrides'; import dimensions from './dimensions'; -const theme = createTheme({ +const theme = createTheme(adaptV4Theme({ palette, overrides, dimensions, -}); +})); export default theme; diff --git a/modern/src/index.js b/modern/src/index.js index 07ac7e3f..547e39ef 100644 --- a/modern/src/index.js +++ b/modern/src/index.js @@ -3,7 +3,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import { Provider } from 'react-redux'; -import { CssBaseline, ThemeProvider } from '@material-ui/core'; +import { CssBaseline, ThemeProvider, StyledEngineProvider } from '@mui/material'; import * as serviceWorker from './serviceWorker'; import store from './store'; import { LocalizationProvider } from './common/components/LocalizationProvider'; @@ -19,15 +19,17 @@ ReactDOM.render( ( <Provider store={store}> <LocalizationProvider> - <ThemeProvider theme={theme}> - <CssBaseline /> - <BrowserRouter basename={base}> - <SocketController /> - <CachingController /> - <Navigation /> - </BrowserRouter> - <ErrorHandler /> - </ThemeProvider> + <StyledEngineProvider injectFirst> + <ThemeProvider theme={theme}> + <CssBaseline /> + <BrowserRouter basename={base}> + <SocketController /> + <CachingController /> + <Navigation /> + </BrowserRouter> + <ErrorHandler /> + </ThemeProvider> + </StyledEngineProvider> </LocalizationProvider> </Provider> ), document.getElementById('root'), diff --git a/modern/src/login/LoginLayout.js b/modern/src/login/LoginLayout.js index 4a2bf43a..cfdd837c 100644 --- a/modern/src/login/LoginLayout.js +++ b/modern/src/login/LoginLayout.js @@ -1,6 +1,7 @@ import React from 'react'; -import { useMediaQuery, makeStyles, Paper } from '@material-ui/core'; -import { useTheme } from '@material-ui/core/styles'; +import { useMediaQuery, Paper } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { useTheme } from '@mui/material/styles'; const useStyles = makeStyles((theme) => ({ root: { @@ -15,10 +16,10 @@ const useStyles = makeStyles((theme) => ({ background: theme.palette.primary.main, paddingBottom: theme.spacing(5), width: theme.dimensions.sidebarWidth, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('lg')]: { width: theme.dimensions.sidebarWidthTablet, }, - [theme.breakpoints.down('xs')]: { + [theme.breakpoints.down('sm')]: { width: '0px', }, }, @@ -54,12 +55,11 @@ const LoginLayout = ({ children }) => { <> <main className={classes.root}> <div className={classes.sidebar}> - {!useMediaQuery(theme.breakpoints.down('md')) - && ( + {!useMediaQuery(theme.breakpoints.down('lg')) && ( <svg height="64" width="240"> <use xlinkHref="/logo.svg#img" /> </svg> - )} + )} </div> <Paper className={classes.paper}> <form className={classes.form}> diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js index 2a911b84..4478c866 100644 --- a/modern/src/login/LoginPage.js +++ b/modern/src/login/LoginPage.js @@ -1,10 +1,22 @@ import React, { useState } from 'react'; import { - Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link, Snackbar, IconButton, Tooltip, -} from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/Close'; -import CachedIcon from '@material-ui/icons/Cached'; -import { useTheme } from '@material-ui/core/styles'; + Grid, + useMediaQuery, + InputLabel, + Select, + MenuItem, + FormControl, + Button, + TextField, + Link, + Snackbar, + IconButton, + Tooltip, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import CloseIcon from '@mui/icons-material/Close'; +import CachedIcon from '@mui/icons-material/Cached'; +import { useTheme } from '@mui/material/styles'; import { useDispatch, useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { sessionActions } from '../store'; @@ -77,12 +89,15 @@ const LoginPage = () => { return ( <LoginLayout> <Tooltip title="Switch to Legacy App" className={classes.legacy}> - <IconButton onClick={() => window.localStorage.setItem('legacyApp', true) || window.location.replace('/')}> + <IconButton + size="large" + onClick={() => window.localStorage.setItem('legacyApp', true) || window.location.replace('/')} + > <CachedIcon /> </IconButton> </Tooltip> <Grid container direction="column" spacing={2}> - {useMediaQuery(theme.breakpoints.down('md')) + {useMediaQuery(theme.breakpoints.down('lg')) && ( <Grid item className={classes.logoContainer}> <svg height="64" width="240"> diff --git a/modern/src/login/RegisterPage.js b/modern/src/login/RegisterPage.js index 5fa061bb..ce09b63e 100644 --- a/modern/src/login/RegisterPage.js +++ b/modern/src/login/RegisterPage.js @@ -1,9 +1,10 @@ import React, { useState } from 'react'; import { - Grid, Button, TextField, Typography, Link, makeStyles, Snackbar, -} from '@material-ui/core'; + Grid, Button, TextField, Typography, Link, Snackbar, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useNavigate } from 'react-router-dom'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import LoginLayout from './LoginLayout'; import { useTranslation } from '../common/components/LocalizationProvider'; import { snackBarDurationShortMs } from '../common/util/duration'; diff --git a/modern/src/login/ResetPasswordPage.js b/modern/src/login/ResetPasswordPage.js index acdf13ab..f9f4a88e 100644 --- a/modern/src/login/ResetPasswordPage.js +++ b/modern/src/login/ResetPasswordPage.js @@ -1,9 +1,10 @@ import React, { useState } from 'react'; import { - Grid, Button, TextField, Typography, Link, makeStyles, Snackbar, -} from '@material-ui/core'; + Grid, Button, TextField, Typography, Link, Snackbar, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useNavigate } from 'react-router-dom'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import LoginLayout from './LoginLayout'; import { useTranslation } from '../common/components/LocalizationProvider'; import useQuery from '../common/util/useQuery'; diff --git a/modern/src/main/DevicesList.js b/modern/src/main/DevicesList.js index b80eaf8b..06b75715 100644 --- a/modern/src/main/DevicesList.js +++ b/modern/src/main/DevicesList.js @@ -1,24 +1,24 @@ import React, { useEffect, useRef, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { makeStyles } from '@material-ui/core/styles'; -import { IconButton, Tooltip } from '@material-ui/core'; -import Avatar from '@material-ui/core/Avatar'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemAvatar from '@material-ui/core/ListItemAvatar'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; +import makeStyles from '@mui/styles/makeStyles'; +import { IconButton, Tooltip } from '@mui/material'; +import Avatar from '@mui/material/Avatar'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemAvatar from '@mui/material/ListItemAvatar'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; import { FixedSizeList } from 'react-window'; import AutoSizer from 'react-virtualized-auto-sizer'; -import BatteryFullIcon from '@material-ui/icons/BatteryFull'; -import BatteryChargingFullIcon from '@material-ui/icons/BatteryChargingFull'; -import Battery60Icon from '@material-ui/icons/Battery60'; -import BatteryCharging60Icon from '@material-ui/icons/BatteryCharging60'; -import Battery20Icon from '@material-ui/icons/Battery20'; -import BatteryCharging20Icon from '@material-ui/icons/BatteryCharging20'; -import FlashOnIcon from '@material-ui/icons/FlashOn'; -import FlashOffIcon from '@material-ui/icons/FlashOff'; -import ErrorIcon from '@material-ui/icons/Error'; +import BatteryFullIcon from '@mui/icons-material/BatteryFull'; +import BatteryChargingFullIcon from '@mui/icons-material/BatteryChargingFull'; +import Battery60Icon from '@mui/icons-material/Battery60'; +import BatteryCharging60Icon from '@mui/icons-material/BatteryCharging60'; +import Battery20Icon from '@mui/icons-material/Battery20'; +import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20'; +import FlashOnIcon from '@mui/icons-material/FlashOn'; +import FlashOffIcon from '@mui/icons-material/FlashOff'; +import ErrorIcon from '@mui/icons-material/Error'; import { devicesActions } from '../store'; import { useEffectAsync } from '../reactHelper'; diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js index 346919e2..0b3be6d2 100644 --- a/modern/src/main/MainPage.js +++ b/modern/src/main/MainPage.js @@ -1,15 +1,17 @@ import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { - makeStyles, Paper, Toolbar, TextField, IconButton, Button, -} from '@material-ui/core'; + Paper, Toolbar, TextField, IconButton, Button, +} from '@mui/material'; -import { useTheme } from '@material-ui/core/styles'; -import useMediaQuery from '@material-ui/core/useMediaQuery'; -import AddIcon from '@material-ui/icons/Add'; -import CloseIcon from '@material-ui/icons/Close'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; -import ListIcon from '@material-ui/icons/ViewList'; +import makeStyles from '@mui/styles/makeStyles'; + +import { useTheme } from '@mui/material/styles'; +import useMediaQuery from '@mui/material/useMediaQuery'; +import AddIcon from '@mui/icons-material/Add'; +import CloseIcon from '@mui/icons-material/Close'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import ListIcon from '@mui/icons-material/ViewList'; import { useDispatch, useSelector } from 'react-redux'; import DevicesList from './DevicesList'; @@ -46,7 +48,7 @@ const useStyles = makeStyles((theme) => ({ bottom: theme.dimensions.bottomBarHeight, transition: 'transform .5s ease', backgroundColor: 'white', - [theme.breakpoints.down('sm')]: { + [theme.breakpoints.down('md')]: { width: '100%', margin: 0, }, @@ -54,7 +56,7 @@ const useStyles = makeStyles((theme) => ({ sidebarCollapsed: { transform: `translateX(-${theme.dimensions.drawerWidthDesktop})`, marginLeft: 0, - [theme.breakpoints.down('sm')]: { + [theme.breakpoints.down('md')]: { transform: 'translateX(-100vw)', }, }, @@ -75,7 +77,7 @@ const useStyles = makeStyles((theme) => ({ left: `calc(50% + ${theme.dimensions.drawerWidthDesktop} / 2)`, bottom: theme.spacing(3), }, - [theme.breakpoints.down('sm')]: { + [theme.breakpoints.down('md')]: { left: '50%', bottom: theme.spacing(3) + theme.dimensions.bottomBarHeight, }, @@ -87,7 +89,7 @@ const useStyles = makeStyles((theme) => ({ top: theme.spacing(3), borderRadius: '0px', minWidth: 0, - [theme.breakpoints.down('sm')]: { + [theme.breakpoints.down('md')]: { left: 0, }, }, @@ -122,7 +124,7 @@ const MainPage = () => { const deviceReadonly = useDeviceReadonly(); const desktop = useMediaQuery(theme.breakpoints.up('md')); - const phone = useMediaQuery(theme.breakpoints.down('xs')); + const phone = useMediaQuery(theme.breakpoints.down('sm')); const [mapLiveRoutes] = usePersistedState('mapLiveRoutes', false); @@ -165,7 +167,7 @@ const MainPage = () => { <Paper square elevation={3}> <Toolbar className={classes.toolbar} disableGutters> {!desktop && ( - <IconButton onClick={handleClose}> + <IconButton size="large" onClick={handleClose}> <ArrowBackIcon /> </IconButton> )} @@ -178,11 +180,15 @@ const MainPage = () => { placeholder={t('sharedSearchDevices')} variant="filled" /> - <IconButton onClick={() => navigate('/settings/device')} disabled={deviceReadonly}> + <IconButton + size="large" + onClick={() => navigate('/settings/device')} + disabled={deviceReadonly} + > <AddIcon /> </IconButton> {desktop && ( - <IconButton onClick={handleClose}> + <IconButton size="large" onClick={handleClose}> <CloseIcon /> </IconButton> )} diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js index 92db8047..37e4a1d1 100644 --- a/modern/src/main/StatusCard.js +++ b/modern/src/main/StatusCard.js @@ -2,14 +2,26 @@ import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { - makeStyles, Card, CardContent, Typography, CardActions, CardHeader, IconButton, Avatar, Table, TableBody, TableRow, TableCell, TableContainer, -} from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/Close'; -import PostAddIcon from '@material-ui/icons/PostAdd'; -import ReplayIcon from '@material-ui/icons/Replay'; -import PublishIcon from '@material-ui/icons/Publish'; -import EditIcon from '@material-ui/icons/Edit'; -import DeleteIcon from '@material-ui/icons/Delete'; + Card, + CardContent, + Typography, + CardActions, + CardHeader, + IconButton, + Avatar, + Table, + TableBody, + TableRow, + TableCell, + TableContainer, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import CloseIcon from '@mui/icons-material/Close'; +import PostAddIcon from '@mui/icons-material/PostAdd'; +import ReplayIcon from '@mui/icons-material/Replay'; +import PublishIcon from '@mui/icons-material/Publish'; +import EditIcon from '@mui/icons-material/Edit'; +import DeleteIcon from '@mui/icons-material/Delete'; import { useTranslation } from '../common/components/LocalizationProvider'; import { formatStatus } from '../common/util/formatter'; @@ -103,7 +115,7 @@ const StatusCard = ({ deviceId, onClose }) => { </Avatar> )} action={( - <IconButton onClick={onClose}> + <IconButton size="large" onClick={onClose}> <CloseIcon /> </IconButton> )} @@ -134,19 +146,41 @@ const StatusCard = ({ deviceId, onClose }) => { </CardContent> )} <CardActions classes={{ root: classes.actions }} disableSpacing> - <IconButton onClick={() => navigate(`/position/${position.id}`)} disabled={!position} color="secondary"> + <IconButton + color="secondary" + size="large" + onClick={() => navigate(`/position/${position.id}`)} + disabled={!position} + > <PostAddIcon /> </IconButton> - <IconButton onClick={() => navigate('/replay')} disabled={!position}> + <IconButton + size="large" + onClick={() => navigate('/replay')} + disabled={!position} + > <ReplayIcon /> </IconButton> - <IconButton onClick={() => navigate(`/settings/command-send/${deviceId}`)} disabled={readonly}> + <IconButton + size="large" + onClick={() => navigate(`/settings/command-send/${deviceId}`)} + disabled={readonly} + > <PublishIcon /> </IconButton> - <IconButton onClick={() => navigate(`/settings/device/${deviceId}`)} disabled={deviceReadonly}> + <IconButton + size="large" + onClick={() => navigate(`/settings/device/${deviceId}`)} + disabled={deviceReadonly} + > <EditIcon /> </IconButton> - <IconButton onClick={() => setRemoving(true)} disabled={deviceReadonly} className={classes.negative}> + <IconButton + size="large" + onClick={() => setRemoving(true)} + disabled={deviceReadonly} + className={classes.negative} + > <DeleteIcon /> </IconButton> </CardActions> 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)} diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js index bb71fa95..e6c971df 100644 --- a/modern/src/reports/ChartReportPage.js +++ b/modern/src/reports/ChartReportPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - FormControl, InputLabel, Select, MenuItem, makeStyles, -} from '@material-ui/core'; + FormControl, InputLabel, Select, MenuItem, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts'; diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 8a3a070f..2c6aaea5 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { FormControl, InputLabel, Select, MenuItem, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, -} from '@material-ui/core'; +} from '@mui/material'; import { useSelector } from 'react-redux'; import { formatDate } from '../common/util/formatter'; import ReportFilter, { useFilterStyles } from './components/ReportFilter'; diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index b67833f9..3f89888f 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, -} from '@material-ui/core'; +} from '@mui/material'; import ReportFilter from './components/ReportFilter'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; diff --git a/modern/src/reports/StatisticsPage.js b/modern/src/reports/StatisticsPage.js index 9ed830eb..b9b14902 100644 --- a/modern/src/reports/StatisticsPage.js +++ b/modern/src/reports/StatisticsPage.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, -} from '@material-ui/core'; +} from '@mui/material'; import { formatDate } from '../common/util/formatter'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js index 5e1c2a66..4cf29035 100644 --- a/modern/src/reports/StopReportPage.js +++ b/modern/src/reports/StopReportPage.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, -} from '@material-ui/core'; +} from '@mui/material'; import { formatDistance, formatHours, formatDate, formatVolume, } from '../common/util/formatter'; diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js index 9de7e13c..1e905155 100644 --- a/modern/src/reports/SummaryReportPage.js +++ b/modern/src/reports/SummaryReportPage.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { FormControl, InputLabel, Select, MenuItem, TableContainer, Table, TableHead, TableRow, TableBody, TableCell, -} from '@material-ui/core'; +} from '@mui/material'; import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume, } from '../common/util/formatter'; diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js index e6e13d56..4846afa6 100644 --- a/modern/src/reports/TripReportPage.js +++ b/modern/src/reports/TripReportPage.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, -} from '@material-ui/core'; +} from '@mui/material'; import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume, } from '../common/util/formatter'; diff --git a/modern/src/reports/components/ColumnSelect.js b/modern/src/reports/components/ColumnSelect.js index d7306c58..04645cd5 100644 --- a/modern/src/reports/components/ColumnSelect.js +++ b/modern/src/reports/components/ColumnSelect.js @@ -1,7 +1,7 @@ import React from 'react'; import { FormControl, InputLabel, MenuItem, Select, -} from '@material-ui/core'; +} from '@mui/material'; import { useTranslation } from '../../common/components/LocalizationProvider'; import { useFilterStyles } from './ReportFilter'; diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js index 350bbe6d..9938a4ad 100644 --- a/modern/src/reports/components/ReportFilter.js +++ b/modern/src/reports/components/ReportFilter.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography, makeStyles, -} from '@material-ui/core'; + FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useSelector } from 'react-redux'; import moment from 'moment'; import { useTranslation } from '../../common/components/LocalizationProvider'; diff --git a/modern/src/reports/components/ReportsMenu.js b/modern/src/reports/components/ReportsMenu.js index 8e973562..afe9de79 100644 --- a/modern/src/reports/components/ReportsMenu.js +++ b/modern/src/reports/components/ReportsMenu.js @@ -1,14 +1,14 @@ import React from 'react'; import { Divider, List, ListItem, ListItemIcon, ListItemText, -} from '@material-ui/core'; -import TimelineIcon from '@material-ui/icons/Timeline'; -import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled'; -import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'; -import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive'; -import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'; -import TrendingUpIcon from '@material-ui/icons/TrendingUp'; -import BarChartIcon from '@material-ui/icons/BarChart'; +} from '@mui/material'; +import TimelineIcon from '@mui/icons-material/Timeline'; +import PauseCircleFilledIcon from '@mui/icons-material/PauseCircleFilled'; +import PlayCircleFilledIcon from '@mui/icons-material/PlayCircleFilled'; +import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive'; +import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'; +import TrendingUpIcon from '@mui/icons-material/TrendingUp'; +import BarChartIcon from '@mui/icons-material/BarChart'; import { Link, useLocation } from 'react-router-dom'; import { useTranslation } from '../../common/components/LocalizationProvider'; import { useAdministrator } from '../../common/util/permissions'; diff --git a/modern/src/settings/AccumulatorsPage.js b/modern/src/settings/AccumulatorsPage.js index 8ca9d277..31fb12aa 100644 --- a/modern/src/settings/AccumulatorsPage.js +++ b/modern/src/settings/AccumulatorsPage.js @@ -2,9 +2,17 @@ import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { useNavigate, useParams } from 'react-router-dom'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, TextField, FormControl, Button, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + Container, + TextField, + FormControl, + Button, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; import SettingsMenu from './components/SettingsMenu'; diff --git a/modern/src/settings/CalendarPage.js b/modern/src/settings/CalendarPage.js index 154b3f11..f7bcb02a 100644 --- a/modern/src/settings/CalendarPage.js +++ b/modern/src/settings/CalendarPage.js @@ -1,9 +1,10 @@ import React, { useState } from 'react'; -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, AccordionSummary, AccordionDetails, Typography, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { DropzoneArea } from 'material-ui-dropzone'; import EditItemView from './components/EditItemView'; import EditAttributesView from './components/EditAttributesView'; diff --git a/modern/src/settings/CalendarsPage.js b/modern/src/settings/CalendarsPage.js index a5072277..a3ff51d5 100644 --- a/modern/src/settings/CalendarsPage.js +++ b/modern/src/settings/CalendarsPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; diff --git a/modern/src/settings/CommandPage.js b/modern/src/settings/CommandPage.js index 4785021b..6c816338 100644 --- a/modern/src/settings/CommandPage.js +++ b/modern/src/settings/CommandPage.js @@ -1,8 +1,9 @@ import React, { useState } from 'react'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, TextField, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, AccordionSummary, AccordionDetails, Typography, TextField, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import { useTranslation } from '../common/components/LocalizationProvider'; import BaseCommandView from './components/BaseCommandView'; diff --git a/modern/src/settings/CommandSendPage.js b/modern/src/settings/CommandSendPage.js index 98415a5e..aa51489b 100644 --- a/modern/src/settings/CommandSendPage.js +++ b/modern/src/settings/CommandSendPage.js @@ -1,9 +1,16 @@ import React, { useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, Button, FormControl, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + Container, + Button, + FormControl, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useTranslation } from '../common/components/LocalizationProvider'; import BaseCommandView from './components/BaseCommandView'; import SelectField from '../common/components/SelectField'; diff --git a/modern/src/settings/CommandsPage.js b/modern/src/settings/CommandsPage.js index 64a29bf6..dd1559d9 100644 --- a/modern/src/settings/CommandsPage.js +++ b/modern/src/settings/CommandsPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import { useTranslation } from '../common/components/LocalizationProvider'; import { formatBoolean } from '../common/util/formatter'; diff --git a/modern/src/settings/ComputedAttributePage.js b/modern/src/settings/ComputedAttributePage.js index 984339b8..c433b9e7 100644 --- a/modern/src/settings/ComputedAttributePage.js +++ b/modern/src/settings/ComputedAttributePage.js @@ -1,8 +1,17 @@ import React, { useState } from 'react'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, MenuItem, Select, TextField, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + FormControl, + InputLabel, + MenuItem, + Select, + TextField, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import { useTranslation } from '../common/components/LocalizationProvider'; import usePositionAttributes from '../common/attributes/usePositionAttributes'; diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js index 0b029308..b754f9fe 100644 --- a/modern/src/settings/ComputedAttributesPage.js +++ b/modern/src/settings/ComputedAttributesPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import { useTranslation } from '../common/components/LocalizationProvider'; import { useAdministrator } from '../common/util/permissions'; diff --git a/modern/src/settings/DevicePage.js b/modern/src/settings/DevicePage.js index 56a589dc..e5d0f995 100644 --- a/modern/src/settings/DevicePage.js +++ b/modern/src/settings/DevicePage.js @@ -1,10 +1,16 @@ import React, { useState } from 'react'; -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + FormControlLabel, + Checkbox, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import EditAttributesView from './components/EditAttributesView'; import SelectField from '../common/components/SelectField'; diff --git a/modern/src/settings/DriverPage.js b/modern/src/settings/DriverPage.js index 93d09c8e..f03682e3 100644 --- a/modern/src/settings/DriverPage.js +++ b/modern/src/settings/DriverPage.js @@ -1,9 +1,10 @@ import React, { useState } from 'react'; -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, AccordionSummary, AccordionDetails, Typography, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import EditAttributesView from './components/EditAttributesView'; import { useTranslation } from '../common/components/LocalizationProvider'; diff --git a/modern/src/settings/DriversPage.js b/modern/src/settings/DriversPage.js index b5c30a17..c4de30e9 100644 --- a/modern/src/settings/DriversPage.js +++ b/modern/src/settings/DriversPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; diff --git a/modern/src/settings/GeofencePage.js b/modern/src/settings/GeofencePage.js index e23d49fb..3b8ac2ed 100644 --- a/modern/src/settings/GeofencePage.js +++ b/modern/src/settings/GeofencePage.js @@ -1,10 +1,11 @@ import React, { useState } from 'react'; -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, AccordionSummary, AccordionDetails, Typography, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import EditAttributesView from './components/EditAttributesView'; import { useTranslation } from '../common/components/LocalizationProvider'; diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js index 9dcd65c9..d4991c59 100644 --- a/modern/src/settings/GroupPage.js +++ b/modern/src/settings/GroupPage.js @@ -1,10 +1,11 @@ import React, { useState } from 'react'; -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, AccordionSummary, AccordionDetails, Typography, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import EditAttributesView from './components/EditAttributesView'; import SelectField from '../common/components/SelectField'; diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js index ae17bd78..ebaa3b5e 100644 --- a/modern/src/settings/GroupsPage.js +++ b/modern/src/settings/GroupsPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js index 9e53aca1..292e197e 100644 --- a/modern/src/settings/MaintenancePage.js +++ b/modern/src/settings/MaintenancePage.js @@ -1,9 +1,18 @@ import React, { useState } from 'react'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, TextField, FormControl, InputLabel, MenuItem, Select, -} from '@material-ui/core'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + TextField, + FormControl, + InputLabel, + MenuItem, + Select, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import InputAdornment from '@mui/material/InputAdornment'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { prefixString } from '../common/util/stringUtils'; import EditItemView from './components/EditItemView'; import EditAttributesView from './components/EditAttributesView'; diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js index 43a37b60..d4a06fd2 100644 --- a/modern/src/settings/MaintenancesPage.js +++ b/modern/src/settings/MaintenancesPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import usePositionAttributes from '../common/attributes/usePositionAttributes'; import { formatDistance, formatSpeed } from '../common/util/formatter'; diff --git a/modern/src/settings/NotificationPage.js b/modern/src/settings/NotificationPage.js index 0533b58e..0c713a75 100644 --- a/modern/src/settings/NotificationPage.js +++ b/modern/src/settings/NotificationPage.js @@ -1,9 +1,15 @@ import React, { useState } from 'react'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + FormControlLabel, + Checkbox, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useTranslation, useTranslationKeys } from '../common/components/LocalizationProvider'; import EditItemView from './components/EditItemView'; import { prefixString, unprefixString } from '../common/util/stringUtils'; diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js index ec0df1cb..ae463dd3 100644 --- a/modern/src/settings/NotificationsPage.js +++ b/modern/src/settings/NotificationsPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import { prefixString } from '../common/util/stringUtils'; import { formatBoolean } from '../common/util/formatter'; diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js index 94d55adf..b79f4b6c 100644 --- a/modern/src/settings/PreferencesPage.js +++ b/modern/src/settings/PreferencesPage.js @@ -1,8 +1,19 @@ import React from 'react'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, FormControl, InputLabel, Select, MenuItem, Checkbox, FormControlLabel, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + Container, + FormControl, + InputLabel, + Select, + MenuItem, + Checkbox, + FormControlLabel, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useLocalization, useTranslation } from '../common/components/LocalizationProvider'; import usePersistedState from '../common/util/usePersistedState'; import PageLayout from '../common/components/PageLayout'; diff --git a/modern/src/settings/ServerPage.js b/modern/src/settings/ServerPage.js index 53feb8ba..d7ce8b2e 100644 --- a/modern/src/settings/ServerPage.js +++ b/modern/src/settings/ServerPage.js @@ -1,10 +1,22 @@ import React, { useState } from 'react'; -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Button, FormControl, Container, Checkbox, FormControlLabel, InputLabel, Select, MenuItem, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + Button, + FormControl, + Container, + Checkbox, + FormControlLabel, + InputLabel, + Select, + MenuItem, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useNavigate } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { sessionActions } from '../store'; diff --git a/modern/src/settings/UserPage.js b/modern/src/settings/UserPage.js index a0f6f753..d2832452 100644 --- a/modern/src/settings/UserPage.js +++ b/modern/src/settings/UserPage.js @@ -1,11 +1,24 @@ import React, { useState } from 'react'; -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, Select, MenuItem, FormControlLabel, Checkbox, InputAdornment, IconButton, FilledInput, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import CachedIcon from '@material-ui/icons/Cached'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + FormControl, + InputLabel, + Select, + MenuItem, + FormControlLabel, + Checkbox, + InputAdornment, + IconButton, + FilledInput, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import CachedIcon from '@mui/icons-material/Cached'; import { useDispatch, useSelector } from 'react-redux'; import moment from 'moment'; import EditItemView from './components/EditItemView'; @@ -213,10 +226,12 @@ const UserPage = () => { onChange={(e) => setItem({ ...item, token: e.target.value })} endAdornment={( <InputAdornment position="end"> - <IconButton onClick={() => { - const token = [...Array(30)].map(() => Math.random().toString(36)[2]).join(''); - setItem({ ...item, token }); - }} + <IconButton + size="large" + onClick={() => { + const token = [...Array(30)].map(() => Math.random().toString(36)[2]).join(''); + setItem({ ...item, token }); + }} > <CachedIcon /> </IconButton> diff --git a/modern/src/settings/UsersPage.js b/modern/src/settings/UsersPage.js index 059b6bcc..8f3aca46 100644 --- a/modern/src/settings/UsersPage.js +++ b/modern/src/settings/UsersPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import { formatBoolean } from '../common/util/formatter'; import { useTranslation } from '../common/components/LocalizationProvider'; diff --git a/modern/src/settings/components/AddAttributeDialog.js b/modern/src/settings/components/AddAttributeDialog.js index e7965360..b7ce43f3 100644 --- a/modern/src/settings/components/AddAttributeDialog.js +++ b/modern/src/settings/components/AddAttributeDialog.js @@ -1,9 +1,10 @@ import React, { useState } from 'react'; import { Button, Dialog, DialogActions, DialogContent, FormControl, InputLabel, MenuItem, Select, TextField, -} from '@material-ui/core'; + Autocomplete, +} from '@mui/material'; -import { Autocomplete, createFilterOptions } from '@material-ui/lab'; +import { createFilterOptions } from '@mui/material/useAutocomplete'; import { useTranslation } from '../../common/components/LocalizationProvider'; const AddAttributeDialog = ({ open, onResult, definitions }) => { diff --git a/modern/src/settings/components/BaseCommandView.js b/modern/src/settings/components/BaseCommandView.js index 836e8789..9a8fa9b5 100644 --- a/modern/src/settings/components/BaseCommandView.js +++ b/modern/src/settings/components/BaseCommandView.js @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import { TextField, FormControlLabel, Checkbox, -} from '@material-ui/core'; +} from '@mui/material'; import { useTranslation } from '../../common/components/LocalizationProvider'; import SelectField from '../../common/components/SelectField'; import { prefixString } from '../../common/util/stringUtils'; diff --git a/modern/src/settings/components/CollectionActions.js b/modern/src/settings/components/CollectionActions.js index 3fef1203..c5e14949 100644 --- a/modern/src/settings/components/CollectionActions.js +++ b/modern/src/settings/components/CollectionActions.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import { IconButton, Menu, MenuItem } from '@material-ui/core'; -import MoreVertIcon from '@material-ui/icons/MoreVert'; +import { IconButton, Menu, MenuItem } from '@mui/material'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; import { useNavigate } from 'react-router-dom'; import RemoveDialog from '../../common/components/RemoveDialog'; import { useTranslation } from '../../common/components/LocalizationProvider'; diff --git a/modern/src/settings/components/CollectionFab.js b/modern/src/settings/components/CollectionFab.js index 36435cd9..2fb5b5c9 100644 --- a/modern/src/settings/components/CollectionFab.js +++ b/modern/src/settings/components/CollectionFab.js @@ -1,6 +1,7 @@ import React from 'react'; -import { Fab, makeStyles } from '@material-ui/core'; -import AddIcon from '@material-ui/icons/Add'; +import { Fab } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import AddIcon from '@mui/icons-material/Add'; import { useNavigate } from 'react-router-dom'; import { useReadonly } from '../../common/util/permissions'; import dimensions from '../../common/theme/dimensions'; @@ -10,7 +11,7 @@ const useStyles = makeStyles((theme) => ({ position: 'fixed', bottom: theme.spacing(2), right: theme.spacing(2), - [theme.breakpoints.down('sm')]: { + [theme.breakpoints.down('md')]: { bottom: dimensions.bottomBarHeight + theme.spacing(2), }, }, diff --git a/modern/src/settings/components/EditAttributesView.js b/modern/src/settings/components/EditAttributesView.js index e28909e9..da730538 100644 --- a/modern/src/settings/components/EditAttributesView.js +++ b/modern/src/settings/components/EditAttributesView.js @@ -1,10 +1,19 @@ import React, { useState } from 'react'; import { - Button, Checkbox, FilledInput, FormControl, FormControlLabel, Grid, IconButton, InputAdornment, InputLabel, makeStyles, -} from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/Close'; -import AddIcon from '@material-ui/icons/Add'; + Button, + Checkbox, + FilledInput, + FormControl, + FormControlLabel, + Grid, + IconButton, + InputAdornment, + InputLabel, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import CloseIcon from '@mui/icons-material/Close'; +import AddIcon from '@mui/icons-material/Add'; import AddAttributeDialog from './AddAttributeDialog'; import { useTranslation } from '../../common/components/LocalizationProvider'; import { useAttributePreference } from '../../common/util/preferences'; @@ -157,7 +166,7 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { )} label={getAttributeName(key, subtype)} /> - <IconButton className={classes.removeButton} onClick={() => deleteAttribute(key)}> + <IconButton size="large" className={classes.removeButton} onClick={() => deleteAttribute(key)}> <CloseIcon /> </IconButton> </Grid> @@ -172,7 +181,7 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { onChange={(e) => updateAttribute(key, e.target.value, type, subtype)} endAdornment={( <InputAdornment position="end"> - <IconButton onClick={() => deleteAttribute(key)}> + <IconButton size="large" onClick={() => deleteAttribute(key)}> <CloseIcon /> </IconButton> </InputAdornment> diff --git a/modern/src/settings/components/EditItemView.js b/modern/src/settings/components/EditItemView.js index d0a3dde5..83624b8f 100644 --- a/modern/src/settings/components/EditItemView.js +++ b/modern/src/settings/components/EditItemView.js @@ -1,9 +1,9 @@ import React from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -import { makeStyles } from '@material-ui/core/styles'; -import Container from '@material-ui/core/Container'; -import Button from '@material-ui/core/Button'; -import FormControl from '@material-ui/core/FormControl'; +import makeStyles from '@mui/styles/makeStyles'; +import Container from '@mui/material/Container'; +import Button from '@mui/material/Button'; +import FormControl from '@mui/material/FormControl'; import { useCatch, useEffectAsync } from '../../reactHelper'; import { useTranslation } from '../../common/components/LocalizationProvider'; diff --git a/modern/src/settings/components/SettingsMenu.js b/modern/src/settings/components/SettingsMenu.js index 036f4101..cb2dba2f 100644 --- a/modern/src/settings/components/SettingsMenu.js +++ b/modern/src/settings/components/SettingsMenu.js @@ -1,17 +1,17 @@ import React from 'react'; import { Divider, List, ListItem, ListItemIcon, ListItemText, -} from '@material-ui/core'; -import SettingsIcon from '@material-ui/icons/Settings'; -import CreateIcon from '@material-ui/icons/Create'; -import NotificationsIcon from '@material-ui/icons/Notifications'; -import FolderIcon from '@material-ui/icons/Folder'; -import PersonIcon from '@material-ui/icons/Person'; -import StorageIcon from '@material-ui/icons/Storage'; -import BuildIcon from '@material-ui/icons/Build'; -import PeopleIcon from '@material-ui/icons/People'; -import TodayIcon from '@material-ui/icons/Today'; -import PublishIcon from '@material-ui/icons/Publish'; +} from '@mui/material'; +import SettingsIcon from '@mui/icons-material/Settings'; +import CreateIcon from '@mui/icons-material/Create'; +import NotificationsIcon from '@mui/icons-material/Notifications'; +import FolderIcon from '@mui/icons-material/Folder'; +import PersonIcon from '@mui/icons-material/Person'; +import StorageIcon from '@mui/icons-material/Storage'; +import BuildIcon from '@mui/icons-material/Build'; +import PeopleIcon from '@mui/icons-material/People'; +import TodayIcon from '@mui/icons-material/Today'; +import PublishIcon from '@mui/icons-material/Publish'; import { Link, useLocation } from 'react-router-dom'; import { useSelector } from 'react-redux'; import { useTranslation } from '../../common/components/LocalizationProvider'; |