Initial migration to MUI 5

4 files changed, 37 insertions, 20 deletions

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';