Initial migration to MUI 5

3 files changed, 87 insertions, 47 deletions

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>