gitea-mirror/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-01-19 00:06:01 -08:00
Code Issues Packages Projects Releases Wiki Activity

Upgrade to MUI 5 (#4606)

Browse Source 
* 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>
This commit is contained in:
Jeremy Letto
2022-10-29 20:17:03 -05:00
committed by GitHub
parent 72743e834e
commit f619ef23fd
46 changed files with 570 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
webclient/src/components/CheckboxField/CheckboxField.tsx
View File

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

8
webclient/src/components/CountryDropdown/CountryDropdown.tsx
View File

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

24
webclient/src/components/Header/Header.tsx
View File

@@ -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 {

2
webclient/src/components/InputAction/InputAction.tsx
View File

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

7
webclient/src/components/InputField/InputField.tsx
View File

@@ -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>

8
webclient/src/components/KnownHosts/KnownHosts.css
View File

@@ -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;
}

40
webclient/src/components/KnownHosts/KnownHosts.tsx
View File

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

4
webclient/src/components/LanguageDropdown/LanguageDropdown.css
View File

@@ -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;
}

8
webclient/src/components/LanguageDropdown/LanguageDropdown.tsx
View File

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

4
webclient/src/components/Message/CardCallout.tsx
View File

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

8
webclient/src/components/SelectField/SelectField.tsx
View File

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

6
webclient/src/components/ThreePaneLayout/ThreePaneLayout.tsx
View File

@@ -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>

8
webclient/src/components/Toast/Toast.tsx
View File

@@ -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 />

4
webclient/src/components/UserDisplay/UserDisplay.tsx
View File

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