Initial migration to MUI 5

10 files changed, 42 insertions, 27 deletions

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;