Upgrade to MUI 5 (#4606)

* save work

* fix perf issue on i18n rollup

* fix reset styling

* move body line-height from reset

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/components/CheckboxField/CheckboxField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
 
 const CheckboxField = (props) => {
   const { input: { value, onChange }, label, ...args } = props;

webclient/src/components/CountryDropdown/CountryDropdown.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
-import { Select, MenuItem } from '@material-ui/core';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
+import { Select, MenuItem } from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
 import { useTranslation } from 'react-i18next';
 
 import { useLocaleSort } from 'hooks';
@@ -21,7 +21,7 @@ const CountryDropdown = ({ input: { onChange } }) => {
   const sortedCountries = useLocaleSort(countryCodes, translateCountry);
 
   return (
-    <FormControl variant='outlined' className='CountryDropdown'>
+    <FormControl size='small' variant='outlined' className='CountryDropdown'>
       <InputLabel id='CountryDropdown-select'>Country</InputLabel>
       <Select
         id='CountryDropdown-select'

webclient/src/components/Header/Header.tsx

@@ -1,15 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { NavLink, useNavigate, generatePath } from 'react-router-dom';
-import AppBar from '@material-ui/core/AppBar';
-import IconButton from '@material-ui/core/IconButton';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import Toolbar from '@material-ui/core/Toolbar';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import CloseIcon from '@material-ui/icons/Close';
-import MailOutlineRoundedIcon from '@material-ui/icons/MailOutline';
-import MenuRoundedIcon from '@material-ui/icons/MenuRounded';
+import AppBar from '@mui/material/AppBar';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Toolbar from '@mui/material/Toolbar';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import CloseIcon from '@mui/icons-material/Close';
+import MailOutlineRoundedIcon from '@mui/icons-material/MailOutline';
+import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
 import * as _ from 'lodash';
 
 import { AuthenticationService, RoomsService } from 'api';
@@ -128,12 +128,12 @@ const Header = ({ joinedRooms, serverState, user }: HeaderProps) => {
               </nav>
               <div className="Header-nav__actions">
                 <div className="Header-nav__action">
-                  <IconButton>
+                  <IconButton size="large">
                     <MailOutlineRoundedIcon style={{ color: 'inherit' }} />
                   </IconButton>
                 </div>
                 <div className="Header-nav__action">
-                  <IconButton onClick={handleMenuOpen}>
+                  <IconButton onClick={handleMenuOpen} size="large">
                     <MenuRoundedIcon style={{ color: 'inherit' }} />
                   </IconButton>
                   <Menu
@@ -170,7 +170,7 @@ const Header = ({ joinedRooms, serverState, user }: HeaderProps) => {
         handleClose={closeImportCardWizard}
       ></CardImportDialog>
     </AppBar>
-  )
+  );
 }
 
 interface HeaderProps {

webclient/src/components/InputAction/InputAction.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Field } from 'react-final-form'
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 
 import { InputField } from 'components';
 

webclient/src/components/InputField/InputField.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import ErrorOutlinedIcon from '@material-ui/icons/ErrorOutlined';
+import makeStyles from '@mui/styles/makeStyles';
+import TextField from '@mui/material/TextField';
+import ErrorOutlinedIcon from '@mui/icons-material/ErrorOutlined';
 
 import './InputField.css';
 
@@ -44,6 +44,7 @@ const InputField = ({ input, meta: { touched, error, warning }, ...args }) => {
         className="rounded"
         variant="outlined"
         margin="dense"
+        size="small"
         fullWidth={true}
       />
     </div>

webclient/src/components/KnownHosts/KnownHosts.css

@@ -36,7 +36,6 @@
 }
 
 .KnownHosts-item__status svg {
-  display: none;
   margin-left: -5px;
   margin-right: 5px;
 }
@@ -58,15 +57,14 @@
   margin-left: 4px;
 }
 
-.KnownHosts .MuiSelect-selectMenu .KnownHosts-item__status,
-.KnownHosts .MuiSelect-selectMenu .KnownHosts-item__status svg {
-  display: block;
+.KnownHosts .MuiSelect-select .KnownHosts-item__status {
+  display: flex;
 }
 
 .Mui-selected .KnownHosts-item__label svg {
   display: block;
 }
 
-.MuiSelect-selectMenu .KnownHosts-item__edit {
+.MuiSelect-select .KnownHosts-item__edit {
   display: none;
 }

webclient/src/components/KnownHosts/KnownHosts.tsx

@@ -1,17 +1,17 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Select, MenuItem } from '@material-ui/core';
-import Button from '@material-ui/core/Button';
-import FormControl from '@material-ui/core/FormControl';
-import IconButton from '@material-ui/core/IconButton';
-import WifiTetheringIcon from '@material-ui/icons/WifiTethering';
-import PortableWifiOffIcon from '@material-ui/icons/PortableWifiOff';
-import InputLabel from '@material-ui/core/InputLabel';
-import { makeStyles } from '@material-ui/core/styles';
-import Check from '@material-ui/icons/Check';
-import AddIcon from '@material-ui/icons/Add';
-import EditRoundedIcon from '@material-ui/icons/Edit';
-import ErrorOutlinedIcon from '@material-ui/icons/ErrorOutlined';
+import { Select, MenuItem } from '@mui/material';
+import Button from '@mui/material/Button';
+import FormControl from '@mui/material/FormControl';
+import IconButton from '@mui/material/IconButton';
+import WifiTetheringIcon from '@mui/icons-material/WifiTethering';
+import PortableWifiOffIcon from '@mui/icons-material/PortableWifiOff';
+import InputLabel from '@mui/material/InputLabel';
+import makeStyles from '@mui/styles/makeStyles';
+import Check from '@mui/icons-material/Check';
+import AddIcon from '@mui/icons-material/Add';
+import EditRoundedIcon from '@mui/icons-material/Edit';
+import ErrorOutlinedIcon from '@mui/icons-material/ErrorOutlined';
 
 import { AuthenticationService } from 'api';
 import { KnownHostDialog } from 'dialogs';
@@ -196,7 +196,7 @@ const KnownHosts = (props) => {
 
   return (
     <div className={'KnownHosts ' + classes.root}>
-      <FormControl variant='outlined' className='KnownHosts-form'>
+      <FormControl className='KnownHosts-form' size='small' variant='outlined'>
         { touched && (
           <div className='KnownHosts-validation'>
             {
@@ -234,14 +234,12 @@ const KnownHosts = (props) => {
               <MenuItem value={host} key={index}>
                 <div className='KnownHosts-item'>
                   <div className='KnownHosts-item__wrapper'>
-                    <div className='KnownHosts-item__status'>
-                      <div className={testingConnection}>
-                        {
-                          testingConnection === TestConnection.FAILED
-                            ? <PortableWifiOffIcon fontSize="small" />
-                            : <WifiTetheringIcon fontSize="small" />
-                        }
-                      </div>
+                    <div className={'KnownHosts-item__status ' + testingConnection}>
+                      {
+                        testingConnection === TestConnection.FAILED
+                          ? <PortableWifiOffIcon fontSize="small" />
+                          : <WifiTetheringIcon fontSize="small" />
+                      }
                     </div>
 
                     <div className='KnownHosts-item__label'>

webclient/src/components/LanguageDropdown/LanguageDropdown.css

@@ -10,10 +10,10 @@
   width: 1.5em;
 }
 
-.MuiSelect-root .LanguageDropdown-item__label {
+.MuiSelect-select .LanguageDropdown-item__label {
   display: none;
 }
 
-.MuiListItem-root .LanguageDropdown-item__image {
+.MuiList-root .LanguageDropdown-item__image {
   margin-right: 1em;
 }

webclient/src/components/LanguageDropdown/LanguageDropdown.tsx

@@ -1,9 +1,9 @@
 // eslint-disable-next-line
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Select, MenuItem } from '@material-ui/core';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
+import { Select, MenuItem } from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
 
 import { Images } from 'images/Images';
 import { Language, LanguageCountry, LanguageNative } from 'types';
@@ -21,7 +21,7 @@ const LanguageDropdown = () => {
   }, [language]);
 
   return (
-    <FormControl variant='outlined' className='LanguageDropdown'>
+    <FormControl size='small' variant='outlined' className='LanguageDropdown'>
       <Select
         id='LanguageDropdown-select'
         margin='dense'

webclient/src/components/Message/CardCallout.tsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line
 import React, { useMemo, useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Popover from '@material-ui/core/Popover';
+import makeStyles from '@mui/styles/makeStyles';
+import Popover from '@mui/material/Popover';
 
 import { CardDTO, TokenDTO } from 'services';
 

webclient/src/components/SelectField/SelectField.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
 
 import './SelectField.css';
 

webclient/src/components/ThreePaneLayout/ThreePaneLayout.tsx

@@ -1,8 +1,8 @@
 // eslint-disable-next-line
 import React, { Component, CElement } from "react";
 import { connect } from 'react-redux';
-import Grid from '@material-ui/core/Grid';
-import Hidden from '@material-ui/core/Hidden';
+import Grid from '@mui/material/Grid';
+import Hidden from '@mui/material/Hidden';
 
 import './ThreePaneLayout.css';
 
@@ -27,7 +27,7 @@ class ThreePaneLayout extends Component<ThreePaneLayoutProps> {
               {this.props.bottom}
             </Grid>
           </Grid>
-          <Hidden smDown>
+          <Hidden mdDown>
             <Grid item md={3} lg={2} className="grid-side">
               {this.props.side}
             </Grid>

webclient/src/components/Toast/Toast.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import ReactDOM from 'react-dom'
 
-import Alert, { AlertProps } from '@material-ui/lab/Alert';
-import CheckCircleIcon from '@material-ui/icons/CheckCircle';
-import Slide, { SlideProps } from '@material-ui/core/Slide';
-import Snackbar from '@material-ui/core/Snackbar';
+import Alert, { AlertProps } from '@mui/material/Alert';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import Slide, { SlideProps } from '@mui/material/Slide';
+import Snackbar from '@mui/material/Snackbar';
 
 const iconMapping = {
   success: <CheckCircleIcon />

webclient/src/components/UserDisplay/UserDisplay.tsx

@@ -3,8 +3,8 @@ import React, { Component } from "react";
 import { connect } from 'react-redux';
 import { NavLink, generatePath } from 'react-router-dom';
 
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 
 import { Images } from 'images/Images';
 import { SessionService } from 'api';

webclient/src/containers/Account/Account.tsx

@@ -3,9 +3,9 @@ import React, { Component } from "react";
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 
-import Button from '@material-ui/core/Button';
-import ListItem from '@material-ui/core/ListItem';
-import Paper from '@material-ui/core/Paper';
+import Button from '@mui/material/Button';
+import ListItem from '@mui/material/ListItem';
+import Paper from '@mui/material/Paper';
 
 import { UserDisplay, VirtualList, AuthGuard, LanguageDropdown } from 'components';
 import { AuthenticationService, SessionService } from 'api';

webclient/src/containers/App/AppShell.tsx

@@ -1,7 +1,7 @@
 import { Component, Suspense } from 'react';
 import { Provider } from 'react-redux';
 import { MemoryRouter as Router } from 'react-router-dom';
-import CssBaseline from '@material-ui/core/CssBaseline';
+import CssBaseline from '@mui/material/CssBaseline';
 import { store } from 'store';
 import { Header } from 'components';
 import Routes from './AppShellRoutes';

webclient/src/containers/Initialize/Initialize.tsx

@@ -2,8 +2,8 @@ import { useState } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import { connect } from 'react-redux';
 import { Navigate } from 'react-router-dom';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
 
 import { Images } from 'images';
 import { ServerSelectors } from 'store';

webclient/src/containers/Login/Login.tsx

@@ -2,10 +2,10 @@ import { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { Navigate } from 'react-router-dom';
-import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
 
 import { AuthenticationService } from 'api';
 import { RegistrationDialog, RequestPasswordResetDialog, ResetPasswordDialog, AccountActivationDialog } from 'dialogs';

webclient/src/containers/Logs/LogResults.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import * as _ from 'lodash';
 
-import AppBar from '@material-ui/core/AppBar';
-import Box from '@material-ui/core/Box';
-import Paper from '@material-ui/core/Paper';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Tab from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
-import Typography from '@material-ui/core/Typography';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Typography from '@mui/material/Typography';
 
 import './LogResults.css';
 

webclient/src/containers/Room/Games.tsx

@@ -3,13 +3,13 @@ import React, { Component } from "react";
 import { connect } from 'react-redux';
 import * as _ from 'lodash';
 
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import TableSortLabel from '@material-ui/core/TableSortLabel';
-import Tooltip from '@material-ui/core/Tooltip';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Tooltip from '@mui/material/Tooltip';
 
 // import { RoomsService } from "AppShell/common/services";
 

webclient/src/containers/Room/OpenGames.tsx

@@ -3,13 +3,13 @@ import React, { Component } from "react";
 import { connect } from 'react-redux';
 import * as _ from 'lodash';
 
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import TableSortLabel from '@material-ui/core/TableSortLabel';
-import Tooltip from '@material-ui/core/Tooltip';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Tooltip from '@mui/material/Tooltip';
 
 // import { RoomsService } from "AppShell/common/services";
 

webclient/src/containers/Room/Room.tsx

@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { useNavigate, useParams, generatePath } from 'react-router-dom';
 
-import ListItem from '@material-ui/core/ListItem';
-import Paper from '@material-ui/core/Paper';
+import ListItem from '@mui/material/ListItem';
+import Paper from '@mui/material/Paper';
 
 import { RoomsService } from 'api';
 import { ScrollToBottomOnChanges, ThreePaneLayout, UserDisplay, VirtualList, AuthGuard } from 'components';

webclient/src/containers/Server/Rooms.tsx

@@ -3,12 +3,12 @@ import React from "react";
 import { generatePath, useNavigate } from 'react-router-dom';
 import * as _ from 'lodash';
 
-import Button from '@material-ui/core/Button';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
+import Button from '@mui/material/Button';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
 
 
 import { RoomsService } from 'api';

webclient/src/containers/Server/Server.tsx

@@ -3,8 +3,8 @@ import React, { Component } from "react";
 import { connect } from 'react-redux';
 import { generatePath, useNavigate } from 'react-router-dom';
 
-import ListItem from '@material-ui/core/ListItem';
-import Paper from '@material-ui/core/Paper';
+import ListItem from '@mui/material/ListItem';
+import Paper from '@mui/material/Paper';
 
 import { AuthGuard, ThreePaneLayout, UserDisplay, VirtualList } from 'components';
 import { useReduxEffect } from 'hooks';

webclient/src/containers/Unsupported/Unsupported.tsx

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
 
 import './Unsupported.css';
 

webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import Typography from '@material-ui/core/Typography';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 
 import { AccountActivationForm } from 'forms';
@@ -20,11 +20,11 @@ const AccountActivationDialog = ({ classes, handleClose, isOpen, onSubmit }: any
 
   return (
     <Dialog onClose={handleOnClose} open={isOpen}>
-      <DialogTitle disableTypography className="dialog-title">
+      <DialogTitle className="dialog-title">
         <Typography variant="h6">{ t('AccountActivationDialog.title') }</Typography>
 
         {handleOnClose ? (
-          <IconButton onClick={handleOnClose}>
+          <IconButton onClick={handleOnClose} size="large">
             <CloseIcon />
           </IconButton>
         ) : null}

webclient/src/dialogs/CardImportDialog/CardImportDialog.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import Typography from '@material-ui/core/Typography';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
 
 import { CardImportForm } from 'forms';
 
@@ -17,11 +17,11 @@ const CardImportDialog = ({ classes, handleClose, isOpen }: any) => {
 
   return (
     <Dialog onClose={handleOnClose} open={isOpen}>
-      <DialogTitle disableTypography className="dialog-title">
+      <DialogTitle className="dialog-title">
         <Typography variant="h2">Import Cards</Typography>
 
         {handleOnClose ? (
-          <IconButton onClick={handleOnClose}>
+          <IconButton onClick={handleOnClose} size="large">
             <CloseIcon />
           </IconButton>
         ) : null}

webclient/src/dialogs/KnownHostDialog/KnownHostDialog.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import IconButton from '@material-ui/core/IconButton';
-import { makeStyles } from '@material-ui/core/styles';
-import AddIcon from '@material-ui/icons/Add';
-import CloseIcon from '@material-ui/icons/Close';
-import Typography from '@material-ui/core/Typography';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import makeStyles from '@mui/styles/makeStyles';
+import AddIcon from '@mui/icons-material/Add';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 
 import { KnownHostForm } from 'forms';
@@ -35,12 +35,12 @@ const KnownHostDialog = ({ handleClose, onRemove, onSubmit, isOpen, host }: any)
 
   return (
     <Dialog className={'KnownHostDialog ' + classes.root} onClose={handleOnClose} open={isOpen}>
-      <DialogTitle disableTypography className='dialog-title'>
+      <DialogTitle className='dialog-title'>
         <div className='dialog-title__wrapper'>
           <Typography variant='h2'>{ t('KnownHostDialog.title', { mode }) }</Typography>
 
           {handleClose ? (
-            <IconButton onClick={handleClose}>
+            <IconButton onClick={handleClose} size="large">
               <CloseIcon fontSize='large' />
             </IconButton>
           ) : null}

webclient/src/dialogs/RegistrationDialog/RegistrationDialog.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import Typography from '@material-ui/core/Typography';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 
 import { RegisterForm } from 'forms';
@@ -20,11 +20,11 @@ const RegistrationDialog = ({ classes, handleClose, isOpen, onSubmit }: any) =>
 
   return (
     <Dialog className="RegistrationDialog" onClose={handleOnClose} open={isOpen} maxWidth='xl'>
-      <DialogTitle disableTypography className="dialog-title">
+      <DialogTitle className="dialog-title">
         <Typography variant="h6">{ t('RegistrationDialog.title') }</Typography>
 
         {handleOnClose ? (
-          <IconButton onClick={handleOnClose}>
+          <IconButton onClick={handleOnClose} size="large">
             <CloseIcon />
           </IconButton>
         ) : null}

webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import Typography from '@material-ui/core/Typography';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 
 import { RequestPasswordResetForm } from 'forms';
@@ -20,11 +20,11 @@ const RequestPasswordResetDialog = ({ classes, handleClose, isOpen, onSubmit, sk
 
   return (
     <Dialog onClose={handleOnClose} open={isOpen}>
-      <DialogTitle disableTypography className="dialog-title">
+      <DialogTitle className="dialog-title">
         <Typography variant="h6">{ t('RequestPasswordResetDialog.title') }</Typography>
 
         {handleOnClose ? (
-          <IconButton onClick={handleOnClose}>
+          <IconButton onClick={handleOnClose} size="large">
             <CloseIcon />
           </IconButton>
         ) : null}

webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import Typography from '@material-ui/core/Typography';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 
 import { ResetPasswordForm } from 'forms';
@@ -20,11 +20,11 @@ const ResetPasswordDialog = ({ classes, handleClose, isOpen, onSubmit, userName
 
   return (
     <Dialog onClose={handleOnClose} open={isOpen}>
-      <DialogTitle disableTypography className="dialog-title">
+      <DialogTitle className="dialog-title">
         <Typography variant="h6">{t('ResetPasswordDialog.title')}</Typography>
 
         {handleOnClose ? (
-          <IconButton onClick={handleOnClose}>
+          <IconButton onClick={handleOnClose} size="large">
             <CloseIcon />
           </IconButton>
         ) : null}

webclient/src/forms/AccountActivationForm/AccountActivationForm.tsx

@@ -5,8 +5,8 @@ import { Form, Field } from 'react-final-form';
 import { OnChange } from 'react-final-form-listeners';
 import { useTranslation } from 'react-i18next';
 
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 
 import { InputField, KnownHosts } from 'components';
 import { FormKey } from 'types';

webclient/src/forms/CardImportForm/CardImportForm.tsx

@@ -3,11 +3,11 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { Form, Field, reduxForm } from 'redux-form'
 
-import Button from '@material-ui/core/Button';
-import Stepper from '@material-ui/core/Stepper';
-import Step from '@material-ui/core/Step';
-import StepLabel from '@material-ui/core/StepLabel';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import Button from '@mui/material/Button';
+import Stepper from '@mui/material/Stepper';
+import Step from '@mui/material/Step';
+import StepLabel from '@mui/material/StepLabel';
+import CircularProgress from '@mui/material/CircularProgress';
 
 import { InputField, VirtualList } from 'components';
 import { cardImporterService, CardDTO, SetDTO, TokenDTO } from 'services';

webclient/src/forms/KnownHostForm/KnownHostForm.tsx

@@ -4,8 +4,8 @@ import { connect } from 'react-redux';
 import { Form, Field } from 'react-final-form'
 import { useTranslation } from 'react-i18next';
 
-import Button from '@material-ui/core/Button';
-import AnchorLink from '@material-ui/core/Link';
+import Button from '@mui/material/Button';
+import AnchorLink from '@mui/material/Link';
 
 import { InputField } from 'components';
 

webclient/src/forms/LoginForm/LoginForm.tsx

@@ -3,7 +3,7 @@ import { Form, Field } from 'react-final-form';
 import { OnChange } from 'react-final-form-listeners';
 import { useTranslation } from 'react-i18next';
 
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 
 import { AuthenticationService } from 'api';
 import { CheckboxField, InputField, KnownHosts } from 'components';

webclient/src/forms/RegisterForm/RegisterForm.tsx

@@ -4,8 +4,8 @@ import { OnChange } from 'react-final-form-listeners';
 import setFieldTouched from 'final-form-set-field-touched';
 import { useTranslation } from 'react-i18next';
 
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 
 import { CountryDropdown, InputField, KnownHosts } from 'components';
 import { useReduxEffect } from 'hooks';

webclient/src/forms/RequestPasswordResetForm/RequestPasswordResetForm.tsx

@@ -5,8 +5,8 @@ import { Form, Field } from 'react-final-form';
 import { OnChange } from 'react-final-form-listeners';
 import { useTranslation } from 'react-i18next';
 
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 
 import { InputField, KnownHosts } from 'components';
 import { FormKey } from 'types';

webclient/src/forms/ResetPasswordForm/ResetPasswordForm.tsx

@@ -5,8 +5,8 @@ import { Form, Field } from 'react-final-form'
 import { OnChange } from 'react-final-form-listeners';
 import { useTranslation } from 'react-i18next';
 
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 
 import { InputField, KnownHosts } from 'components';
 import { FormKey } from 'types';

webclient/src/forms/SearchForm/SearchForm.tsx

@@ -3,9 +3,9 @@ import React, { Component } from "react";
 import { connect } from 'react-redux';
 import { Form, Field, reduxForm } from 'redux-form'
 
-import Button from '@material-ui/core/Button';
-import Divider from '@material-ui/core/Divider';
-import Paper from '@material-ui/core/Paper';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Paper from '@mui/material/Paper';
 
 import { InputField, CheckboxField } from 'components';
 import { FormKey } from 'types';

webclient/src/index.css

@@ -17,6 +17,7 @@ body,
 
 body {
   margin: 0;
+  line-height: 1.4;
   font-family:
     -apple-system,
     BlinkMacSystemFont,

webclient/src/index.tsx

@@ -1,8 +1,8 @@
-import { ThemeProvider } from '@material-ui/styles';
+import { Theme, StyledEngineProvider } from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-
 import { AppShell } from 'containers';
 
 import { materialTheme } from './material-theme';
@@ -10,10 +10,17 @@ import './i18n';
 
 import './index.css';
 
-const appWithMaterialTheme = () => (
-  <ThemeProvider theme={materialTheme}>
-    <AppShell />
-  </ThemeProvider>
+declare module '@mui/styles/defaultTheme' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme {}
+}
+
+const AppWithMaterialTheme = () => (
+  <StyledEngineProvider injectFirst>
+    <ThemeProvider theme={materialTheme}>
+      <AppShell />
+    </ThemeProvider>
+  </StyledEngineProvider>
 );
 
-ReactDOM.render(appWithMaterialTheme(), document.getElementById('root'));
+ReactDOM.render(<AppWithMaterialTheme />, document.getElementById('root'));

webclient/src/material-theme.ts

@@ -1,6 +1,11 @@
-import { createTheme } from '@material-ui/core/styles';
+import { PaletteMode } from '@mui/material';
+import { createTheme } from '@mui/material/styles';
+
+const mode: PaletteMode = 'light';
 
 const palette = {
+  mode,
+
   background: {
     default: 'rgb(35, 35, 35)',
     paper: '#FFFFFF',
@@ -62,112 +67,123 @@ const palette = {
 export const materialTheme = createTheme({
   palette,
 
-  overrides: {
-  //   MuiCssBaseline: {
-  //     '@global': {
-  //       '@font-face': [],
-  //     },
-  //   },
-    MuiButton: {
-      root: {
-        fontWeight: 'bold',
-        textTransform: 'none',
-
-        '&.rounded': {
-          // 'border-radius': '50px',
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        '@global': {
+          '@font-face': [],
         },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          fontWeight: 'bold',
+          textTransform: 'none',
 
-        '&.tall': {
-          'height': '40px',
+          '&.rounded': {
+            // 'border-radius': '50px',
+          },
+
+          '&.tall': {
+            'height': '40px',
+          },
         },
       },
     },
 
     MuiCheckbox: {
-      root: {
-        '& .MuiSvgIcon-root': {
-          width: '.75em',
-          height: '.75em',
+      styleOverrides: {
+        root: {
+          '& .MuiSvgIcon-root': {
+            width: '.75em',
+            height: '.75em',
+          },
         },
       },
     },
 
     MuiFormControlLabel: {
-      label: {
-        fontSize: 12,
-        fontWeight: 'bold',
-        color: palette.primary.main,
-
-      },
-    },
-
-    MuiInputLabel: {
-      outlined: {
-        transform: 'translate(1em, 1em) scale(1)',
+      styleOverrides: {
+        label: {
+          fontSize: 12,
+          fontWeight: 'bold',
+          color: palette.primary.main,
+        },
       },
     },
 
     MuiLink: {
-      root: {
-        fontWeight: 'bold',
+      styleOverrides: {
+        root: {
+          fontWeight: 'bold',
+        },
       },
     },
 
     MuiList: {
-      root: {
-        padding: '8px',
+      styleOverrides: {
+        root: {
+          padding: '8px',
 
-        '&.MuiList-padding': {
-          paddingBottom: '4px',
-        },
+          '&.MuiList-padding': {
+            paddingBottom: '4px',
+          },
 
-        '& .MuiButton-root': {
-          width: '100%',
-        },
+          '& .MuiButton-root': {
+            width: '100%',
+          },
 
-        '& > .MuiButtonBase-root': {
-          padding: '8px 16px',
-          marginBottom: '4px',
-          borderRadius: 0,
-          justifyContent: 'space-between',
-        },
+          '& > .MuiButtonBase-root': {
+            padding: '8px 16px',
+            marginBottom: '4px',
+            borderRadius: 0,
+            justifyContent: 'space-between',
+          },
 
-        '& .MuiButtonBase-root.Mui-selected': {
-          background: 'none',
-          fontWeight: 'bold',
-        },
+          '& .MuiButtonBase-root.Mui-selected, & .MuiButtonBase-root.Mui-selected:focus': {
+            background: 'none',
+            fontWeight: 'bold',
+          },
 
-        ['& .MuiButtonBase-root:hover, & .MuiButtonBase-root.Mui-selected:hover']: {
-          background: palette.primary.light
+          ['& .MuiButtonBase-root:hover, & .MuiButtonBase-root.Mui-selected:hover']: {
+            background: palette.primary.light
+          },
         },
       },
     },
 
     MuiListItem: {
-      root: {
-      },
+      styleOverrides: {
+        root: {
+        },
+      }
     },
 
     MuiInputBase: {
-      formControl: {
-        '& .MuiSelect-root svg': {
-          display: 'none',
+      styleOverrides: {
+        formControl: {
+          '& .MuiSelect-root svg': {
+            display: 'none',
+          },
         },
       },
     },
 
     MuiOutlinedInput: {
-      root: {
-        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-          borderWidth: '1px',
-        },
+      styleOverrides: {
+        root: {
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderWidth: '1px',
+          },
 
-        '.rounded &': {
-          // 'border-radius': '50px',
-        },
+          '.rounded &': {
+            // 'border-radius': '50px',
+          },
 
-        '.tall &': {
-          height: '40px',
+          '.tall &': {
+            height: '40px',
+          },
         },
       },
     },

webclient/src/types/server.tsx

@@ -54,6 +54,13 @@ export class Host {
 }
 
 export const DefaultHosts: Host[] = [
+  {
+    name: 'Chickatrice',
+    host: 'mtg.chickatrice.net',
+    port: '443',
+    localPort: '4748',
+    editable: false,
+  },
   {
     name: 'Rooster',
     host: 'server.cockatrice.us/servatrice',