From 270091ab083d0b3429455517a7022066655838e6 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Sat, 5 Feb 2022 16:42:43 -0800 Subject: [PATCH] Migrate to materials 5.0 --- packages/webapp/package.json | 11 ++- packages/webapp/src/app.tsx | 95 ++++++++++--------- .../client/client-health-sentinel/index.tsx | 14 +-- .../components/forgot-password-page/index.tsx | 2 +- .../forgot-password-success-page/index.tsx | 4 +- .../components/form/global-error/styled.ts | 4 +- .../src/components/form/input/index.tsx | 2 +- .../components/form/submit-button/index.tsx | 2 +- .../layout/form-container/index.tsx | 4 +- .../src/components/layout/header/index.tsx | 2 +- .../src/components/login-page/index.tsx | 6 +- .../account-info-dialog/index.tsx | 10 +- .../change-password-dialog/index.tsx | 2 +- .../maps-page/account-menu/index.tsx | 23 +++-- .../maps-page/action-chooser/index.tsx | 28 +++--- .../maps-page/action-chooser/styled.ts | 4 +- .../action-dispatcher/base-dialog/index.tsx | 6 +- .../action-dispatcher/base-dialog/style.ts | 10 +- .../action-dispatcher/create-dialog/index.tsx | 2 +- .../action-dispatcher/delete-dialog/index.tsx | 4 +- .../delete-multiselect-dialog/index.tsx | 4 +- .../duplicate-dialog/index.tsx | 2 +- .../action-dispatcher/export-dialog/index.tsx | 14 +-- .../action-dispatcher/export-dialog/style.ts | 4 +- .../history-dialog/index.tsx | 18 ++-- .../action-dispatcher/import-dialog/index.tsx | 4 +- .../action-dispatcher/info-dialog/index.tsx | 10 +- .../action-dispatcher/info-dialog/style.ts | 4 +- .../publish-dialog/index.tsx | 24 ++--- .../action-dispatcher/publish-dialog/style.ts | 4 +- .../action-dispatcher/rename-dialog/index.tsx | 2 +- .../action-dispatcher/share-dialog/index.tsx | 34 +++---- .../action-dispatcher/share-dialog/style.ts | 4 +- .../components/maps-page/help-menu/index.tsx | 25 +++-- .../webapp/src/components/maps-page/index.tsx | 44 ++++----- .../maps-page/language-menu/index.tsx | 23 +++-- .../maps-list/add-label-button/index.tsx | 8 +- .../components/maps-page/maps-list/index.tsx | 40 ++++---- .../maps-list/label-selector/index.tsx | 12 +-- .../maps-list/label-selector/styled.ts | 2 +- .../maps-page/maps-list/labels-cell/index.tsx | 4 +- .../components/maps-page/maps-list/styled.ts | 14 +-- .../components/maps-page/role-icon/index.tsx | 8 +- .../webapp/src/components/maps-page/style.ts | 7 +- .../components/registration-page/index.tsx | 4 +- .../registration-success-page/index.tsx | 4 +- packages/webapp/src/theme/index.ts | 6 +- 47 files changed, 287 insertions(+), 277 deletions(-) diff --git a/packages/webapp/package.json b/packages/webapp/package.json index c84af825..d5097412 100644 --- a/packages/webapp/package.json +++ b/packages/webapp/package.json @@ -56,15 +56,18 @@ "webpack-merge": "^5.7.3" }, "dependencies": { - "@material-ui/core": "^4.11.1", - "@material-ui/icons": "^4.11.2", - "@material-ui/lab": "^4.0.0-alpha.57", + "@emotion/react": "^11.7.1", + "@emotion/styled": "^11.6.0", + "@mui/icons-material": "^5.3.0", + "@mui/lab": "^5.0.0-alpha.67", + "@mui/material": "^5.3.0", + "@mui/styles": "^5.3.0", "@reduxjs/toolkit": "^1.5.0", "@wisemapping/editor": "^0.4.0", "@wisemapping/mindplot": "^5.0.2", "axios": "^0.21.0", "dayjs": "^1.10.4", - "react": "^17.0.0", + "react": "^17.0.2", "react-dom": "^17.0.0", "react-ga": "^3.3.0", "react-google-recaptcha": "^2.1.0", diff --git a/packages/webapp/src/app.tsx b/packages/webapp/src/app.tsx index d0c1d1a1..10e5cbb1 100644 --- a/packages/webapp/src/app.tsx +++ b/packages/webapp/src/app.tsx @@ -12,11 +12,18 @@ import { QueryClient, QueryClientProvider } from 'react-query'; import { theme } from './theme'; import AppI18n, { Locales } from './classes/app-i18n'; import MapsPage from './components/maps-page'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import { ThemeProvider } from '@material-ui/core/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material/styles'; import GoogleAnalytics from 'react-ga'; import EditorPage from './components/editor-page'; + +declare module '@mui/styles/defaultTheme' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface + interface DefaultTheme extends Theme {} +} + + // Google Analytics Initialization. GoogleAnalytics.initialize('UA-0000000-0'); @@ -46,47 +53,49 @@ const App = (): ReactElement => { defaultLocale={Locales.EN.code} messages={locale.message as Record} > - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/webapp/src/classes/client/client-health-sentinel/index.tsx b/packages/webapp/src/classes/client/client-health-sentinel/index.tsx index cbe48f8c..f442306f 100644 --- a/packages/webapp/src/classes/client/client-health-sentinel/index.tsx +++ b/packages/webapp/src/classes/client/client-health-sentinel/index.tsx @@ -2,13 +2,13 @@ import { useSelector } from 'react-redux'; import React from 'react'; import { activeInstanceStatus, ClientStatus } from '../../../redux/clientSlice'; import { FormattedMessage } from 'react-intl'; -import Dialog from '@material-ui/core/Dialog'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import DialogContent from '@material-ui/core/DialogContent'; -import Alert from '@material-ui/lab/Alert'; -import DialogActions from '@material-ui/core/DialogActions'; -import Button from '@material-ui/core/Button'; -import AlertTitle from '@material-ui/lab/AlertTitle'; +import Dialog from '@mui/material/Dialog'; +import DialogTitle from '@mui/material/DialogTitle'; +import DialogContent from '@mui/material/DialogContent'; +import Alert from '@mui/material/Alert'; +import DialogActions from '@mui/material/DialogActions'; +import Button from '@mui/material/Button'; +import AlertTitle from '@mui/material/AlertTitle'; const ClientHealthSentinel = (): React.ReactElement => { const status: ClientStatus = useSelector(activeInstanceStatus); diff --git a/packages/webapp/src/components/forgot-password-page/index.tsx b/packages/webapp/src/components/forgot-password-page/index.tsx index cda4c826..a2f85cbf 100644 --- a/packages/webapp/src/components/forgot-password-page/index.tsx +++ b/packages/webapp/src/components/forgot-password-page/index.tsx @@ -13,7 +13,7 @@ import Input from '../form/input'; import GlobalError from '../form/global-error'; import SubmitButton from '../form/submit-button'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; const ForgotPassword = () => { const [email, setEmail] = useState(''); diff --git a/packages/webapp/src/components/forgot-password-success-page/index.tsx b/packages/webapp/src/components/forgot-password-success-page/index.tsx index f75b1dc6..c73bb196 100644 --- a/packages/webapp/src/components/forgot-password-success-page/index.tsx +++ b/packages/webapp/src/components/forgot-password-success-page/index.tsx @@ -4,8 +4,8 @@ import FormContainer from '../layout/form-container'; import Header from '../layout/header'; import Footer from '../layout/footer'; import { Link as RouterLink } from 'react-router-dom'; -import Typography from '@material-ui/core/Typography'; -import Button from '@material-ui/core/Button'; +import Typography from '@mui/material/Typography'; +import Button from '@mui/material/Button'; const ForgotPasswordSuccessPage = (): React.ReactElement => { const intl = useIntl(); diff --git a/packages/webapp/src/components/form/global-error/styled.ts b/packages/webapp/src/components/form/global-error/styled.ts index 5d0c9f28..753cee0b 100644 --- a/packages/webapp/src/components/form/global-error/styled.ts +++ b/packages/webapp/src/components/form/global-error/styled.ts @@ -1,5 +1,5 @@ -import withStyles from '@material-ui/core/styles/withStyles'; -import Alert from '@material-ui/lab/Alert'; +import withStyles from '@mui/styles/withStyles'; +import Alert from '@mui/material/Alert'; export const StyledAlert = withStyles({ root: { diff --git a/packages/webapp/src/components/form/input/index.tsx b/packages/webapp/src/components/form/input/index.tsx index 8725f70f..b48d9e38 100644 --- a/packages/webapp/src/components/form/input/index.tsx +++ b/packages/webapp/src/components/form/input/index.tsx @@ -1,4 +1,4 @@ -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import React, { ChangeEvent } from 'react'; import { ErrorInfo } from '../../../classes/client'; diff --git a/packages/webapp/src/components/form/submit-button/index.tsx b/packages/webapp/src/components/form/submit-button/index.tsx index 8d77975b..1a83cc2a 100644 --- a/packages/webapp/src/components/form/submit-button/index.tsx +++ b/packages/webapp/src/components/form/submit-button/index.tsx @@ -1,4 +1,4 @@ -import Button from '@material-ui/core/Button'; +import Button from '@mui/material/Button'; import React, { useState } from 'react'; import { useIntl } from 'react-intl'; diff --git a/packages/webapp/src/components/layout/form-container/index.tsx b/packages/webapp/src/components/layout/form-container/index.tsx index 8ebbdf62..8883921c 100644 --- a/packages/webapp/src/components/layout/form-container/index.tsx +++ b/packages/webapp/src/components/layout/form-container/index.tsx @@ -1,5 +1,5 @@ -import Container from '@material-ui/core/Container'; -import withStyles from '@material-ui/core/styles/withStyles'; +import Container from '@mui/material/Container'; +import withStyles from '@mui/styles/withStyles'; const FormContainer = withStyles({ root: { diff --git a/packages/webapp/src/components/layout/header/index.tsx b/packages/webapp/src/components/layout/header/index.tsx index 37572fbf..8ad2f23a 100644 --- a/packages/webapp/src/components/layout/header/index.tsx +++ b/packages/webapp/src/components/layout/header/index.tsx @@ -3,7 +3,7 @@ import { StyledNav, StyledDiv, Logo } from './styled'; import React from 'react'; import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; -import Button from '@material-ui/core/Button'; +import Button from '@mui/material/Button'; import logo from './logo-small.svg'; diff --git a/packages/webapp/src/components/login-page/index.tsx b/packages/webapp/src/components/login-page/index.tsx index d20a1a92..07dd54fc 100644 --- a/packages/webapp/src/components/login-page/index.tsx +++ b/packages/webapp/src/components/login-page/index.tsx @@ -7,9 +7,9 @@ import SubmitButton from '../form/submit-button'; import Input from '../form/input'; import GlobalError from '../form/global-error'; import FormContainer from '../layout/form-container'; -import Typography from '@material-ui/core/Typography'; -import FormControl from '@material-ui/core/FormControl'; -import Link from '@material-ui/core/Link'; +import Typography from '@mui/material/Typography'; +import FormControl from '@mui/material/FormControl'; +import Link from '@mui/material/Link'; type ConfigStatusProps = { enabled?: boolean; diff --git a/packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx b/packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx index 025addb9..7e49ff1a 100644 --- a/packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx @@ -7,11 +7,11 @@ import BaseDialog from '../../action-dispatcher/base-dialog'; import { useSelector } from 'react-redux'; import { activeInstance, fetchAccount } from '../../../../redux/clientSlice'; -import Alert from '@material-ui/lab/Alert'; -import FormControl from '@material-ui/core/FormControl'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import FormGroup from '@material-ui/core/FormGroup'; -import Switch from '@material-ui/core/Switch'; +import Alert from '@mui/material/Alert'; +import FormControl from '@mui/material/FormControl'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import FormGroup from '@mui/material/FormGroup'; +import Switch from '@mui/material/Switch'; type AccountInfoDialogProps = { onClose: () => void; diff --git a/packages/webapp/src/components/maps-page/account-menu/change-password-dialog/index.tsx b/packages/webapp/src/components/maps-page/account-menu/change-password-dialog/index.tsx index 02117517..c2a6f649 100644 --- a/packages/webapp/src/components/maps-page/account-menu/change-password-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/account-menu/change-password-dialog/index.tsx @@ -1,4 +1,4 @@ -import FormControl from '@material-ui/core/FormControl'; +import FormControl from '@mui/material/FormControl'; import React from 'react'; import { useIntl } from 'react-intl'; import { useMutation } from 'react-query'; diff --git a/packages/webapp/src/components/maps-page/account-menu/index.tsx b/packages/webapp/src/components/maps-page/account-menu/index.tsx index 5b815476..21650d9b 100644 --- a/packages/webapp/src/components/maps-page/account-menu/index.tsx +++ b/packages/webapp/src/components/maps-page/account-menu/index.tsx @@ -1,18 +1,18 @@ -import IconButton from '@material-ui/core/IconButton'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import Tooltip from '@material-ui/core/Tooltip'; -import SettingsApplicationsOutlined from '@material-ui/icons/SettingsApplicationsOutlined'; -import AccountCircle from '@material-ui/icons/AccountCircle'; +import IconButton from '@mui/material/IconButton'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import Tooltip from '@mui/material/Tooltip'; +import SettingsApplicationsOutlined from '@mui/icons-material/SettingsApplicationsOutlined'; +import AccountCircle from '@mui/icons-material/AccountCircle'; import React from 'react'; import { FormattedMessage } from 'react-intl'; import { fetchAccount } from '../../../redux/clientSlice'; import AccountInfoDialog from './account-info-dialog'; import ChangePasswordDialog from './change-password-dialog'; -import LockOpenOutlined from '@material-ui/icons/LockOpenOutlined'; -import Link from '@material-ui/core/Link'; -import ExitToAppOutlined from '@material-ui/icons/ExitToAppOutlined'; +import LockOpenOutlined from '@mui/icons-material/LockOpenOutlined'; +import Link from '@mui/material/Link'; +import ExitToAppOutlined from '@mui/icons-material/ExitToAppOutlined'; type ActionType = 'change-password' | 'account-info' | undefined; const AccountMenu = (): React.ReactElement => { @@ -35,7 +35,7 @@ const AccountMenu = (): React.ReactElement => { arrow={true} title={`${account?.firstname} ${account?.lastname} <${account?.email}>`} > - + @@ -44,7 +44,6 @@ const AccountMenu = (): React.ReactElement => { anchorEl={anchorEl} keepMounted open={open} - getContentAnchorEl={null} onClose={handleClose} anchorOrigin={{ vertical: 'bottom', diff --git a/packages/webapp/src/components/maps-page/action-chooser/index.tsx b/packages/webapp/src/components/maps-page/action-chooser/index.tsx index abd08695..9dd20536 100644 --- a/packages/webapp/src/components/maps-page/action-chooser/index.tsx +++ b/packages/webapp/src/components/maps-page/action-chooser/index.tsx @@ -1,21 +1,21 @@ import React from 'react'; -import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined'; -import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined'; -import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined'; -import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined'; -import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; -import EditOutlinedIcon from '@material-ui/icons/EditOutlined'; -import PublicOutlinedIcon from '@material-ui/icons/PublicOutlined'; -import PrintOutlinedIcon from '@material-ui/icons/PrintOutlined'; -import ShareOutlinedIcon from '@material-ui/icons/ShareOutlined'; -import LabelOutlined from '@material-ui/icons/LabelOutlined'; +import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined'; +import FileCopyOutlinedIcon from '@mui/icons-material/FileCopyOutlined'; +import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'; +import CloudDownloadOutlinedIcon from '@mui/icons-material/CloudDownloadOutlined'; +import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; +import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; +import PublicOutlinedIcon from '@mui/icons-material/PublicOutlined'; +import PrintOutlinedIcon from '@mui/icons-material/PrintOutlined'; +import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined'; +import LabelOutlined from '@mui/icons-material/LabelOutlined'; import { FormattedMessage } from 'react-intl'; import { fetchMapById } from '../../../redux/clientSlice'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import Divider from '@material-ui/core/Divider'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import Divider from '@mui/material/Divider'; export type ActionType = | 'open' | 'share' diff --git a/packages/webapp/src/components/maps-page/action-chooser/styled.ts b/packages/webapp/src/components/maps-page/action-chooser/styled.ts index 5c32a475..f47d5aab 100644 --- a/packages/webapp/src/components/maps-page/action-chooser/styled.ts +++ b/packages/webapp/src/components/maps-page/action-chooser/styled.ts @@ -1,5 +1,5 @@ -import MenuItem from '@material-ui/core/MenuItem'; -import withStyles from '@material-ui/core/styles/withStyles'; +import MenuItem from '@mui/material/MenuItem'; +import withStyles from '@mui/styles/withStyles'; export const StyledMenuItem = withStyles({ root: { diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/index.tsx index 155d5a71..742a3a5e 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/index.tsx @@ -3,9 +3,9 @@ import { FormattedMessage } from 'react-intl'; import { ErrorInfo } from '../../../../classes/client'; import { StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from './style'; import GlobalError from '../../../form/global-error'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import Button from '@material-ui/core/Button'; -import { PaperProps } from '@material-ui/core/Paper'; +import DialogContentText from '@mui/material/DialogContentText'; +import Button from '@mui/material/Button'; +import { PaperProps } from '@mui/material/Paper'; export type DialogProps = { onClose: () => void; diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/style.ts b/packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/style.ts index 5ca24c89..23434047 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/style.ts +++ b/packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/style.ts @@ -1,8 +1,8 @@ -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import withStyles from '@material-ui/core/styles/withStyles'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogTitle from '@mui/material/DialogTitle'; +import withStyles from '@mui/styles/withStyles'; export const StyledDialogContent = withStyles({ root: { diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx index e4f05a4b..fd12616b 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { useIntl } from 'react-intl'; import { useMutation } from 'react-query'; import { useSelector } from 'react-redux'; -import FormControl from '@material-ui/core/FormControl'; +import FormControl from '@mui/material/FormControl'; import Client, { BasicMapInfo, ErrorInfo } from '../../../../classes/client'; import { activeInstance } from '../../../../redux/clientSlice'; diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/delete-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/delete-dialog/index.tsx index e68ff78d..fffa9647 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/delete-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/delete-dialog/index.tsx @@ -6,8 +6,8 @@ import Client, { ErrorInfo } from '../../../../classes/client'; import { activeInstance, fetchMapById } from '../../../../redux/clientSlice'; import { SimpleDialogProps, handleOnMutationSuccess } from '..'; import BaseDialog from '../base-dialog'; -import Alert from '@material-ui/lab/Alert'; -import AlertTitle from '@material-ui/lab/AlertTitle'; +import Alert from '@mui/material/Alert'; +import AlertTitle from '@mui/material/AlertTitle'; const DeleteDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => { const intl = useIntl(); diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/delete-multiselect-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/delete-multiselect-dialog/index.tsx index a0c7e0b2..6e1cb9cd 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/delete-multiselect-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/delete-multiselect-dialog/index.tsx @@ -6,8 +6,8 @@ import Client from '../../../../classes/client'; import { activeInstance } from '../../../../redux/clientSlice'; import { handleOnMutationSuccess } from '..'; import BaseDialog from '../base-dialog'; -import Alert from '@material-ui/lab/Alert'; -import AlertTitle from '@material-ui/lab/AlertTitle'; +import Alert from '@mui/material/Alert'; +import AlertTitle from '@mui/material/AlertTitle'; export type DeleteMultiselectDialogProps = { mapsId: number[]; diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx index 4c44b677..49f7ec3b 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import { useIntl } from 'react-intl'; import { useMutation } from 'react-query'; -import FormControl from '@material-ui/core/FormControl'; +import FormControl from '@mui/material/FormControl'; import { useSelector } from 'react-redux'; import Client, { BasicMapInfo, ErrorInfo } from '../../../../classes/client'; diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx index ee0b4674..488f8690 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx @@ -2,14 +2,14 @@ import React, { useEffect } from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; import BaseDialog from '../base-dialog'; import { useStyles } from './style'; -import Alert from '@material-ui/lab/Alert'; +import Alert from '@mui/material/Alert'; import { fetchMapById } from '../../../../redux/clientSlice'; -import FormControl from '@material-ui/core/FormControl'; -import RadioGroup from '@material-ui/core/RadioGroup'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Radio from '@material-ui/core/Radio'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import RadioGroup from '@mui/material/RadioGroup'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Radio from '@mui/material/Radio'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; import { Designer, TextExporterFactory, ImageExporterFactory, Exporter, Mindmap } from '@wisemapping/mindplot'; import Client from '../../../../classes/client'; import { activeInstance } from '../../../../redux/clientSlice'; diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/style.ts b/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/style.ts index d39efb95..78da984d 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/style.ts +++ b/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/style.ts @@ -1,5 +1,5 @@ -import createStyles from '@material-ui/core/styles/createStyles'; -import makeStyles from '@material-ui/core/styles/makeStyles'; +import createStyles from '@mui/styles/createStyles'; +import makeStyles from '@mui/styles/makeStyles'; export const useStyles = makeStyles(() => createStyles({ diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx index 11c9ebd3..7d30ed36 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx @@ -8,15 +8,15 @@ import { SimpleDialogProps } from '..'; import BaseDialog from '../base-dialog'; import dayjs from 'dayjs'; -import TableContainer from '@material-ui/core/TableContainer'; -import Table from '@material-ui/core/Table'; -import TableRow from '@material-ui/core/TableRow'; -import TableCell from '@material-ui/core/TableCell'; -import TableHead from '@material-ui/core/TableHead'; -import TableBody from '@material-ui/core/TableBody'; -import Tooltip from '@material-ui/core/Tooltip'; -import Link from '@material-ui/core/Link'; -import Paper from '@material-ui/core/Paper'; +import TableContainer from '@mui/material/TableContainer'; +import Table from '@mui/material/Table'; +import TableRow from '@mui/material/TableRow'; +import TableCell from '@mui/material/TableCell'; +import TableHead from '@mui/material/TableHead'; +import TableBody from '@mui/material/TableBody'; +import Tooltip from '@mui/material/Tooltip'; +import Link from '@mui/material/Link'; +import Paper from '@mui/material/Paper'; const HistoryDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => { const intl = useIntl(); diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx index 69b18abb..8e381495 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx @@ -1,5 +1,5 @@ -import Button from '@material-ui/core/Button'; -import FormControl from '@material-ui/core/FormControl'; +import Button from '@mui/material/Button'; +import FormControl from '@mui/material/FormControl'; import React from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx index b2803294..d7a33d20 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx @@ -7,11 +7,11 @@ import { SimpleDialogProps } from '..'; import { useStyles } from './style'; import dayjs from 'dayjs'; import { fetchMapById } from '../../../../redux/clientSlice'; -import Paper from '@material-ui/core/Paper'; -import Card from '@material-ui/core/Card'; -import ListItem from '@material-ui/core/ListItem'; -import Typography from '@material-ui/core/Typography'; -import List from '@material-ui/core/List'; +import Paper from '@mui/material/Paper'; +import Card from '@mui/material/Card'; +import ListItem from '@mui/material/ListItem'; +import Typography from '@mui/material/Typography'; +import List from '@mui/material/List'; const InfoDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => { const { map } = fetchMapById(mapId); diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/style.ts b/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/style.ts index 7496e1e2..f14bd15a 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/style.ts +++ b/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/style.ts @@ -1,5 +1,5 @@ -import createStyles from '@material-ui/core/styles/createStyles'; -import makeStyles from '@material-ui/core/styles/makeStyles'; +import createStyles from '@mui/styles/createStyles'; +import makeStyles from '@mui/styles/makeStyles'; export const useStyles = makeStyles(() => createStyles({ diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx index 91a7abb2..d532cdb2 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx @@ -8,16 +8,16 @@ import BaseDialog from '../base-dialog'; import { handleOnMutationSuccess, SimpleDialogProps } from '..'; import { useStyles } from './style'; -import FormControl from '@material-ui/core/FormControl'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Checkbox from '@material-ui/core/Checkbox'; -import TabContext from '@material-ui/lab/TabContext'; -import AppBar from '@material-ui/core/AppBar'; -import TabList from '@material-ui/lab/TabList'; -import Tab from '@material-ui/core/Tab'; -import TabPanel from '@material-ui/lab/TabPanel'; -import Typography from '@material-ui/core/Typography'; -import TextareaAutosize from '@material-ui/core/TextareaAutosize'; +import FormControl from '@mui/material/FormControl'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; +import TabContext from '@mui/lab/TabContext'; +import AppBar from '@mui/material/AppBar'; +import TabList from '@mui/lab/TabList'; +import Tab from '@mui/material/Tab'; +import TabPanel from '@mui/lab/TabPanel'; +import Typography from '@mui/material/Typography'; +import TextareaAutosize from '@mui/material/TextareaAutosize'; const PublishDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => { const { map } = fetchMapById(mapId); @@ -129,7 +129,7 @@ const PublishDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElemen className={classes.textarea} readOnly={true} spellCheck={false} - rowsMax={6} + maxRows={6} defaultValue={``} /> @@ -144,7 +144,7 @@ const PublishDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElemen className={classes.textarea} readOnly={true} spellCheck={false} - rowsMax={1} + maxRows={1} defaultValue={`https://app.wisemapping.com/c/maps/${mapId}/public`} /> diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/style.ts b/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/style.ts index d0066e2d..133e21ab 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/style.ts +++ b/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/style.ts @@ -1,5 +1,5 @@ -import createStyles from '@material-ui/core/styles/createStyles'; -import makeStyles from '@material-ui/core/styles/makeStyles'; +import createStyles from '@mui/styles/createStyles'; +import makeStyles from '@mui/styles/makeStyles'; export const useStyles = makeStyles(() => createStyles({ diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx index ec630878..e077d60c 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx @@ -7,7 +7,7 @@ import { activeInstance, fetchMapById } from '../../../../redux/clientSlice'; import { SimpleDialogProps, handleOnMutationSuccess } from '..'; import Input from '../../../form/input'; import BaseDialog from '../base-dialog'; -import FormControl from '@material-ui/core/FormControl'; +import FormControl from '@mui/material/FormControl'; export type RenameModel = { id: number; diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/index.tsx index a8cf521a..0e428575 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/index.tsx @@ -6,24 +6,24 @@ import Client, { ErrorInfo, Permission } from '../../../../classes/client'; import { activeInstance } from '../../../../redux/clientSlice'; import { SimpleDialogProps } from '..'; import BaseDialog from '../base-dialog'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import IconButton from '@material-ui/core/IconButton'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import IconButton from '@mui/material/IconButton'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import DeleteIcon from '@material-ui/icons/Delete'; -import Paper from '@material-ui/core/Paper'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; -import Button from '@material-ui/core/Button'; -import TextField from '@material-ui/core/TextField'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Checkbox from '@material-ui/core/Checkbox'; -import Typography from '@material-ui/core/Typography'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import DeleteIcon from '@mui/icons-material/Delete'; +import Paper from '@mui/material/Paper'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; +import Typography from '@mui/material/Typography'; import { useStyles } from './style'; import RoleIcon from '../../role-icon'; -import Tooltip from '@material-ui/core/Tooltip'; +import Tooltip from '@mui/material/Tooltip'; type ShareModel = { emails: string; @@ -189,7 +189,7 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement handleOnDeleteClick(e, permission.email) } - > + size="large"> diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/style.ts b/packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/style.ts index e665103b..e75bc473 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/style.ts +++ b/packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/style.ts @@ -1,5 +1,5 @@ -import createStyles from '@material-ui/core/styles/createStyles'; -import makeStyles from '@material-ui/core/styles/makeStyles'; +import createStyles from '@mui/styles/createStyles'; +import makeStyles from '@mui/styles/makeStyles'; export const useStyles = makeStyles(() => createStyles({ diff --git a/packages/webapp/src/components/maps-page/help-menu/index.tsx b/packages/webapp/src/components/maps-page/help-menu/index.tsx index b9504e0b..0d443217 100644 --- a/packages/webapp/src/components/maps-page/help-menu/index.tsx +++ b/packages/webapp/src/components/maps-page/help-menu/index.tsx @@ -1,17 +1,17 @@ import React from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; -import Help from '@material-ui/icons/Help'; -import PolicyOutlined from '@material-ui/icons/PolicyOutlined'; -import FeedbackOutlined from '@material-ui/icons/FeedbackOutlined'; -import EmojiPeopleOutlined from '@material-ui/icons/EmailOutlined'; -import EmailOutlined from '@material-ui/icons/EmailOutlined'; -import IconButton from '@material-ui/core/IconButton'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import Link from '@material-ui/core/Link'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import Tooltip from '@material-ui/core/Tooltip'; +import Help from '@mui/icons-material/Help'; +import PolicyOutlined from '@mui/icons-material/PolicyOutlined'; +import FeedbackOutlined from '@mui/icons-material/FeedbackOutlined'; +import EmojiPeopleOutlined from '@mui/icons-material/EmailOutlined'; +import EmailOutlined from '@mui/icons-material/EmailOutlined'; +import IconButton from '@mui/material/IconButton'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import Link from '@mui/material/Link'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import Tooltip from '@mui/material/Tooltip'; const HelpMenu = (): React.ReactElement => { const [anchorEl, setAnchorEl] = React.useState(null); @@ -32,7 +32,7 @@ const HelpMenu = (): React.ReactElement => { arrow={true} title={intl.formatMessage({ id: 'help.support', defaultMessage: 'Support' })} > - + @@ -41,7 +41,6 @@ const HelpMenu = (): React.ReactElement => { anchorEl={anchorEl} keepMounted open={open} - getContentAnchorEl={null} onClose={handleClose} anchorOrigin={{ vertical: 'bottom', diff --git a/packages/webapp/src/components/maps-page/index.tsx b/packages/webapp/src/components/maps-page/index.tsx index 8f6e579a..8fc8fa73 100644 --- a/packages/webapp/src/components/maps-page/index.tsx +++ b/packages/webapp/src/components/maps-page/index.tsx @@ -1,10 +1,10 @@ import React, { ErrorInfo, ReactElement, useEffect } from 'react'; import clsx from 'clsx'; -import Drawer from '@material-ui/core/Drawer'; -import AppBar from '@material-ui/core/AppBar'; -import Toolbar from '@material-ui/core/Toolbar'; -import List from '@material-ui/core/List'; -import IconButton from '@material-ui/core/IconButton'; +import Drawer from '@mui/material/Drawer'; +import AppBar from '@mui/material/AppBar'; +import Toolbar from '@mui/material/Toolbar'; +import List from '@mui/material/List'; +import IconButton from '@mui/material/IconButton'; import { useStyles } from './style'; import { MapsList } from './maps-list'; import { createIntl, createIntlCache, FormattedMessage, IntlProvider, IntlShape, useIntl } from 'react-intl'; @@ -20,23 +20,23 @@ import HelpMenu from './help-menu'; import LanguageMenu from './language-menu'; import AppI18n, { Locales } from '../../classes/app-i18n'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItem from '@mui/material/ListItem'; -import AddCircleTwoTone from '@material-ui/icons/AddCircleTwoTone'; -import CloudUploadTwoTone from '@material-ui/icons/CloudUploadTwoTone'; -import DeleteOutlineTwoTone from '@material-ui/icons/DeleteOutlineTwoTone'; -import LabelTwoTone from '@material-ui/icons/LabelTwoTone'; -import PersonOutlineTwoTone from '@material-ui/icons/PersonOutlineTwoTone'; -import PublicTwoTone from '@material-ui/icons/PublicTwoTone'; -import ScatterPlotTwoTone from '@material-ui/icons/ScatterPlotTwoTone'; -import ShareTwoTone from '@material-ui/icons/ShareTwoTone'; -import StarTwoTone from '@material-ui/icons/StarTwoTone'; -import Tooltip from '@material-ui/core/Tooltip'; -import Button from '@material-ui/core/Button'; -import Link from '@material-ui/core/Link'; -import ListItemText from '@material-ui/core/ListItemText'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; +import AddCircleTwoTone from '@mui/icons-material/AddCircleTwoTone'; +import CloudUploadTwoTone from '@mui/icons-material/CloudUploadTwoTone'; +import DeleteOutlineTwoTone from '@mui/icons-material/DeleteOutlineTwoTone'; +import LabelTwoTone from '@mui/icons-material/LabelTwoTone'; +import PersonOutlineTwoTone from '@mui/icons-material/PersonOutlineTwoTone'; +import PublicTwoTone from '@mui/icons-material/PublicTwoTone'; +import ScatterPlotTwoTone from '@mui/icons-material/ScatterPlotTwoTone'; +import ShareTwoTone from '@mui/icons-material/ShareTwoTone'; +import StarTwoTone from '@mui/icons-material/StarTwoTone'; +import Tooltip from '@mui/material/Tooltip'; +import Button from '@mui/material/Button'; +import Link from '@mui/material/Link'; +import ListItemText from '@mui/material/ListItemText'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; import logoIcon from './logo-small.svg'; import poweredByIcon from './pwrdby-white.svg'; @@ -311,7 +311,7 @@ const StyleListItem = (props: ListItemProps) => { edge="end" aria-label="delete" onClick={(e) => handleOnDelete(e, filter)} - > + size="large"> diff --git a/packages/webapp/src/components/maps-page/language-menu/index.tsx b/packages/webapp/src/components/maps-page/language-menu/index.tsx index 6be90116..0a47c94b 100644 --- a/packages/webapp/src/components/maps-page/language-menu/index.tsx +++ b/packages/webapp/src/components/maps-page/language-menu/index.tsx @@ -1,4 +1,4 @@ -import TranslateTwoTone from '@material-ui/icons/TranslateTwoTone'; +import TranslateTwoTone from '@mui/icons-material/TranslateTwoTone'; import React from 'react'; import { useMutation, useQueryClient } from 'react-query'; import Client from '../../../classes/client'; @@ -6,16 +6,16 @@ import { useSelector } from 'react-redux'; import { activeInstance, fetchAccount } from '../../../redux/clientSlice'; import { FormattedMessage, useIntl } from 'react-intl'; import { LocaleCode, Locales } from '../../../classes/app-i18n'; -import Tooltip from '@material-ui/core/Tooltip'; -import Button from '@material-ui/core/Button'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import Dialog from '@material-ui/core/Dialog'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import DialogActions from '@material-ui/core/DialogActions'; -import Divider from '@material-ui/core/Divider'; +import Tooltip from '@mui/material/Tooltip'; +import Button from '@mui/material/Button'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import Dialog from '@mui/material/Dialog'; +import DialogTitle from '@mui/material/DialogTitle'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogActions from '@mui/material/DialogActions'; +import Divider from '@mui/material/Divider'; const LanguageMenu = (): React.ReactElement => { const queryClient = useQueryClient(); @@ -76,7 +76,6 @@ const LanguageMenu = (): React.ReactElement => { anchorEl={anchorEl} keepMounted open={open} - getContentAnchorEl={null} onClose={handleClose} anchorOrigin={{ vertical: 'bottom', diff --git a/packages/webapp/src/components/maps-page/maps-list/add-label-button/index.tsx b/packages/webapp/src/components/maps-page/maps-list/add-label-button/index.tsx index 16e75b2b..f6ae19ac 100644 --- a/packages/webapp/src/components/maps-page/maps-list/add-label-button/index.tsx +++ b/packages/webapp/src/components/maps-page/maps-list/add-label-button/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import Popover from '@material-ui/core/Popover'; -import Button from '@material-ui/core/Button'; -import Tooltip from '@material-ui/core/Tooltip'; -import LabelTwoTone from '@material-ui/icons/LabelTwoTone'; +import Popover from '@mui/material/Popover'; +import Button from '@mui/material/Button'; +import Tooltip from '@mui/material/Tooltip'; +import LabelTwoTone from '@mui/icons-material/LabelTwoTone'; import { FormattedMessage, useIntl } from 'react-intl'; import { Label } from '../../../../classes/client'; import { LabelSelector } from '../label-selector'; diff --git a/packages/webapp/src/components/maps-page/maps-list/index.tsx b/packages/webapp/src/components/maps-page/maps-list/index.tsx index eca91d14..6e20f00c 100644 --- a/packages/webapp/src/components/maps-page/maps-list/index.tsx +++ b/packages/webapp/src/components/maps-page/maps-list/index.tsx @@ -11,27 +11,27 @@ import dayjs from 'dayjs'; import { Filter, LabelFilter } from '..'; import { FormattedMessage, useIntl } from 'react-intl'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableContainer from '@material-ui/core/TableContainer'; -import TableHead from '@material-ui/core/TableHead'; -import TablePagination from '@material-ui/core/TablePagination'; -import TableRow from '@material-ui/core/TableRow'; -import TableSortLabel from '@material-ui/core/TableSortLabel'; -import Toolbar from '@material-ui/core/Toolbar'; -import Paper from '@material-ui/core/Paper'; -import Checkbox from '@material-ui/core/Checkbox'; -import IconButton from '@material-ui/core/IconButton'; -import Tooltip from '@material-ui/core/Tooltip'; -import Button from '@material-ui/core/Button'; -import InputBase from '@material-ui/core/InputBase'; -import Link from '@material-ui/core/Link'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +import TablePagination from '@mui/material/TablePagination'; +import TableRow from '@mui/material/TableRow'; +import TableSortLabel from '@mui/material/TableSortLabel'; +import Toolbar from '@mui/material/Toolbar'; +import Paper from '@mui/material/Paper'; +import Checkbox from '@mui/material/Checkbox'; +import IconButton from '@mui/material/IconButton'; +import Tooltip from '@mui/material/Tooltip'; +import Button from '@mui/material/Button'; +import InputBase from '@mui/material/InputBase'; +import Link from '@mui/material/Link'; -import DeleteOutlined from '@material-ui/icons/DeleteOutlined'; -import MoreHorizIcon from '@material-ui/icons/MoreHoriz'; -import StarRateRoundedIcon from '@material-ui/icons/StarRateRounded'; -import SearchIcon from '@material-ui/icons/Search'; +import DeleteOutlined from '@mui/icons-material/DeleteOutlined'; +import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; +import StarRateRoundedIcon from '@mui/icons-material/StarRateRounded'; +import SearchIcon from '@mui/icons-material/Search'; import { AddLabelButton } from './add-label-button'; import relativeTime from 'dayjs/plugin/relativeTime'; diff --git a/packages/webapp/src/components/maps-page/maps-list/label-selector/index.tsx b/packages/webapp/src/components/maps-page/maps-list/label-selector/index.tsx index 42a2780c..1f4947cc 100644 --- a/packages/webapp/src/components/maps-page/maps-list/label-selector/index.tsx +++ b/packages/webapp/src/components/maps-page/maps-list/label-selector/index.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import FormGroup from '@material-ui/core/FormGroup'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Divider from '@material-ui/core/Divider'; -import AddIcon from '@material-ui/icons/Add'; -import Checkbox from '@material-ui/core/Checkbox'; -import Container from '@material-ui/core/Container'; +import FormGroup from '@mui/material/FormGroup'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Divider from '@mui/material/Divider'; +import AddIcon from '@mui/icons-material/Add'; +import Checkbox from '@mui/material/Checkbox'; +import Container from '@mui/material/Container'; import { Label as LabelComponent } from '../label'; import Client, { Label, ErrorInfo } from '../../../../classes/client'; import { useQuery } from 'react-query'; diff --git a/packages/webapp/src/components/maps-page/maps-list/label-selector/styled.ts b/packages/webapp/src/components/maps-page/maps-list/label-selector/styled.ts index 519cf0f3..9c2a4d2a 100644 --- a/packages/webapp/src/components/maps-page/maps-list/label-selector/styled.ts +++ b/packages/webapp/src/components/maps-page/maps-list/label-selector/styled.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; +import Button from '@mui/material/Button'; export const StyledButton = styled(Button)` margin: 4px; diff --git a/packages/webapp/src/components/maps-page/maps-list/labels-cell/index.tsx b/packages/webapp/src/components/maps-page/maps-list/labels-cell/index.tsx index 221d6e7a..471a816b 100644 --- a/packages/webapp/src/components/maps-page/maps-list/labels-cell/index.tsx +++ b/packages/webapp/src/components/maps-page/maps-list/labels-cell/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import Chip from '@material-ui/core/Chip'; +import Chip from '@mui/material/Chip'; import { Label } from '../../../../classes/client'; -import LabelTwoTone from '@material-ui/icons/LabelTwoTone'; +import LabelTwoTone from '@mui/icons-material/LabelTwoTone'; type Props = { labels: Label[], }; diff --git a/packages/webapp/src/components/maps-page/maps-list/styled.ts b/packages/webapp/src/components/maps-page/maps-list/styled.ts index f4ffe01a..565cb42d 100644 --- a/packages/webapp/src/components/maps-page/maps-list/styled.ts +++ b/packages/webapp/src/components/maps-page/maps-list/styled.ts @@ -1,7 +1,7 @@ -import { fade } from '@material-ui/core/styles'; -import { Theme } from '@material-ui/core/styles/createTheme'; -import createStyles from '@material-ui/core/styles/createStyles'; -import makeStyles from '@material-ui/core/styles/makeStyles'; +import { alpha, Theme } from '@mui/material/styles'; + +import createStyles from '@mui/styles/createStyles'; +import makeStyles from '@mui/styles/makeStyles'; export const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -59,9 +59,9 @@ export const useStyles = makeStyles((theme: Theme) => }, search: { borderRadius: 9, - backgroundColor: fade(theme.palette.common.white, 0.15), + backgroundColor: alpha(theme.palette.common.white, 0.15), '&:hover': { - backgroundColor: fade(theme.palette.common.white, 0.25), + backgroundColor: alpha(theme.palette.common.white, 0.25), }, margin: '10px 0px', width: '100%', @@ -90,7 +90,7 @@ export const useStyles = makeStyles((theme: Theme) => // vertical padding + font size from searchIcon border: '1px solid #ffa800', borderRadius: 4, - paddingLeft: `calc(1em + ${theme.spacing(4)}px)`, + paddingLeft: `calc(1em + ${theme.spacing(4)})`, transition: theme.transitions.create('width'), width: '100%', [theme.breakpoints.up('sm')]: { diff --git a/packages/webapp/src/components/maps-page/role-icon/index.tsx b/packages/webapp/src/components/maps-page/role-icon/index.tsx index 9f6db1c0..436bed4e 100644 --- a/packages/webapp/src/components/maps-page/role-icon/index.tsx +++ b/packages/webapp/src/components/maps-page/role-icon/index.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import Tooltip from '@material-ui/core/Tooltip'; -import PersonSharpIcon from '@material-ui/icons/PersonSharp'; -import EditSharpIcon from '@material-ui/icons/EditSharp'; -import VisibilitySharpIcon from '@material-ui/icons/VisibilitySharp'; +import Tooltip from '@mui/material/Tooltip'; +import PersonSharpIcon from '@mui/icons-material/PersonSharp'; +import EditSharpIcon from '@mui/icons-material/EditSharp'; +import VisibilitySharpIcon from '@mui/icons-material/VisibilitySharp'; import { FormattedMessage } from 'react-intl'; import { Role } from '../../../classes/client'; diff --git a/packages/webapp/src/components/maps-page/style.ts b/packages/webapp/src/components/maps-page/style.ts index ab6f4746..2be76255 100644 --- a/packages/webapp/src/components/maps-page/style.ts +++ b/packages/webapp/src/components/maps-page/style.ts @@ -1,6 +1,7 @@ -import { Theme } from '@material-ui/core/styles/createTheme'; -import createStyles from '@material-ui/core/styles/createStyles'; -import makeStyles from '@material-ui/core/styles/makeStyles'; +import { Theme } from '@mui/material/styles'; + +import createStyles from '@mui/styles/createStyles'; +import makeStyles from '@mui/styles/makeStyles'; const drawerWidth = 300; diff --git a/packages/webapp/src/components/registration-page/index.tsx b/packages/webapp/src/components/registration-page/index.tsx index e6a9450c..39e2f559 100644 --- a/packages/webapp/src/components/registration-page/index.tsx +++ b/packages/webapp/src/components/registration-page/index.tsx @@ -14,8 +14,8 @@ import { activeInstance } from '../../redux/clientSlice'; import Input from '../form/input'; import GlobalError from '../form/global-error'; import SubmitButton from '../form/submit-button'; -import Typography from '@material-ui/core/Typography'; -import FormControl from '@material-ui/core/FormControl'; +import Typography from '@mui/material/Typography'; +import FormControl from '@mui/material/FormControl'; import AppConfig from '../../classes/app-config'; export type Model = { diff --git a/packages/webapp/src/components/registration-success-page/index.tsx b/packages/webapp/src/components/registration-success-page/index.tsx index d9b40095..14b171af 100644 --- a/packages/webapp/src/components/registration-success-page/index.tsx +++ b/packages/webapp/src/components/registration-success-page/index.tsx @@ -4,8 +4,8 @@ import FormContainer from '../layout/form-container'; import Header from '../layout/header'; import Footer from '../layout/footer'; import { Link as RouterLink } from 'react-router-dom'; -import Typography from '@material-ui/core/Typography'; -import Button from '@material-ui/core/Button'; +import Typography from '@mui/material/Typography'; +import Button from '@mui/material/Button'; const RegistrationSuccessPage = (): React.ReactElement => { const intl = useIntl(); diff --git a/packages/webapp/src/theme/index.ts b/packages/webapp/src/theme/index.ts index 346ecf13..09ec202b 100644 --- a/packages/webapp/src/theme/index.ts +++ b/packages/webapp/src/theme/index.ts @@ -1,6 +1,6 @@ -import createMuiTheme from '@material-ui/core/styles/createTheme'; +import { adaptV4Theme, createTheme } from '@mui/material/styles'; -const theme = createMuiTheme({ +const theme = createTheme(adaptV4Theme({ overrides: { MuiCssBaseline: { '@global': { @@ -74,6 +74,6 @@ const theme = createMuiTheme({ contrastText: '#FFFFFF', }, }, -}); +})); export { theme };