vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-22 06:37:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to materials 5.0

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-02-05 16:42:43 -08:00
parent 2ef6beb643
commit 270091ab08
47 changed files with 287 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/webapp/package.json
View File

@ -56,15 +56,18 @@
"webpack-merge": "^5.7.3" "webpack-merge": "^5.7.3"
}, },
"dependencies": { "dependencies": {
"@material-ui/core": "^4.11.1", "@emotion/react": "^11.7.1",
"@material-ui/icons": "^4.11.2", "@emotion/styled": "^11.6.0",
"@material-ui/lab": "^4.0.0-alpha.57", "@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", "@reduxjs/toolkit": "^1.5.0",
"@wisemapping/editor": "^0.4.0", "@wisemapping/editor": "^0.4.0",
"@wisemapping/mindplot": "^5.0.2", "@wisemapping/mindplot": "^5.0.2",
"axios": "^0.21.0", "axios": "^0.21.0",
"dayjs": "^1.10.4", "dayjs": "^1.10.4",
"react": "^17.0.0", "react": "^17.0.2",
"react-dom": "^17.0.0", "react-dom": "^17.0.0",
"react-ga": "^3.3.0", "react-ga": "^3.3.0",
"react-google-recaptcha": "^2.1.0", "react-google-recaptcha": "^2.1.0",

95
packages/webapp/src/app.tsx
View File

@ -12,11 +12,18 @@ import { QueryClient, QueryClientProvider } from 'react-query';
import { theme } from './theme'; import { theme } from './theme';
import AppI18n, { Locales } from './classes/app-i18n'; import AppI18n, { Locales } from './classes/app-i18n';
import MapsPage from './components/maps-page'; import MapsPage from './components/maps-page';
import CssBaseline from '@material-ui/core/CssBaseline'; import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles'; import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material/styles';
import GoogleAnalytics from 'react-ga'; import GoogleAnalytics from 'react-ga';
import EditorPage from './components/editor-page'; 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. // Google Analytics Initialization.
GoogleAnalytics.initialize('UA-0000000-0'); GoogleAnalytics.initialize('UA-0000000-0');
@ -46,47 +53,49 @@ const App = (): ReactElement => {
defaultLocale={Locales.EN.code} defaultLocale={Locales.EN.code}
messages={locale.message as Record<string, string>} messages={locale.message as Record<string, string>}
> >
<ThemeProvider theme={theme}> <StyledEngineProvider injectFirst>
<CssBaseline /> <ThemeProvider theme={theme}>
<Router> <CssBaseline />
<Switch> <Router>
<Route exact path="/"> <Switch>
<Redirect to="/c/login" /> <Route exact path="/">
</Route> <Redirect to="/c/login" />
<Route path="/c/login" </Route>
component={LoginPage} <Route path="/c/login"
/> component={LoginPage}
<Route />
path="/c/registration" <Route
component={RegistationPage} path="/c/registration"
/> component={RegistationPage}
<Route />
path="/c/registration-success" <Route
component={RegistrationSuccessPage} path="/c/registration-success"
/> component={RegistrationSuccessPage}
<Route />
path="/c/forgot-password" <Route
component={ForgotPasswordPage} path="/c/forgot-password"
/> component={ForgotPasswordPage}
<Route />
path="/c/forgot-password-success" <Route
component={ForgotPasswordSuccessPage} path="/c/forgot-password-success"
/> component={ForgotPasswordSuccessPage}
<Route />
exact path="/c/maps/" <Route
component={MapsPage} exact path="/c/maps/"
/> component={MapsPage}
<Route exact path="/c/maps/:id/edit"> />
<EditorPage memoryPersistence={memoryPersistence} <Route exact path="/c/maps/:id/edit">
readOnlyMode={readOnlyMode} mapId={mapId} /> <EditorPage memoryPersistence={memoryPersistence}
</Route> readOnlyMode={readOnlyMode} mapId={mapId} />
<Route exact path="/c/maps/:id/try"> </Route>
<EditorPage memoryPersistence={memoryPersistence} <Route exact path="/c/maps/:id/try">
readOnlyMode={readOnlyMode} mapId={mapId} /> <EditorPage memoryPersistence={memoryPersistence}
</Route> readOnlyMode={readOnlyMode} mapId={mapId} />
</Switch> </Route>
</Router> </Switch>
</ThemeProvider> </Router>
</ThemeProvider>
</StyledEngineProvider>
</IntlProvider> </IntlProvider>
</QueryClientProvider> </QueryClientProvider>
</Provider> </Provider>

14
packages/webapp/src/classes/client/client-health-sentinel/index.tsx
View File

@ -2,13 +2,13 @@ import { useSelector } from 'react-redux';
import React from 'react'; import React from 'react';
import { activeInstanceStatus, ClientStatus } from '../../../redux/clientSlice'; import { activeInstanceStatus, ClientStatus } from '../../../redux/clientSlice';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import Dialog from '@material-ui/core/Dialog'; import Dialog from '@mui/material/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle'; import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent'; import DialogContent from '@mui/material/DialogContent';
import Alert from '@material-ui/lab/Alert'; import Alert from '@mui/material/Alert';
import DialogActions from '@material-ui/core/DialogActions'; import DialogActions from '@mui/material/DialogActions';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import AlertTitle from '@material-ui/lab/AlertTitle'; import AlertTitle from '@mui/material/AlertTitle';
const ClientHealthSentinel = (): React.ReactElement => { const ClientHealthSentinel = (): React.ReactElement => {
const status: ClientStatus = useSelector(activeInstanceStatus); const status: ClientStatus = useSelector(activeInstanceStatus);

2
packages/webapp/src/components/forgot-password-page/index.tsx
View File

@ -13,7 +13,7 @@ import Input from '../form/input';
import GlobalError from '../form/global-error'; import GlobalError from '../form/global-error';
import SubmitButton from '../form/submit-button'; import SubmitButton from '../form/submit-button';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
const ForgotPassword = () => { const ForgotPassword = () => {
const [email, setEmail] = useState<string>(''); const [email, setEmail] = useState<string>('');

4
packages/webapp/src/components/forgot-password-success-page/index.tsx
View File

@ -4,8 +4,8 @@ import FormContainer from '../layout/form-container';
import Header from '../layout/header'; import Header from '../layout/header';
import Footer from '../layout/footer'; import Footer from '../layout/footer';
import { Link as RouterLink } from 'react-router-dom'; import { Link as RouterLink } from 'react-router-dom';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
const ForgotPasswordSuccessPage = (): React.ReactElement => { const ForgotPasswordSuccessPage = (): React.ReactElement => {
const intl = useIntl(); const intl = useIntl();

4
packages/webapp/src/components/form/global-error/styled.ts
View File

@ -1,5 +1,5 @@
import withStyles from '@material-ui/core/styles/withStyles'; import withStyles from '@mui/styles/withStyles';
import Alert from '@material-ui/lab/Alert'; import Alert from '@mui/material/Alert';
export const StyledAlert = withStyles({ export const StyledAlert = withStyles({
root: { root: {

2
packages/webapp/src/components/form/input/index.tsx
View File

@ -1,4 +1,4 @@
import TextField from '@material-ui/core/TextField'; import TextField from '@mui/material/TextField';
import React, { ChangeEvent } from 'react'; import React, { ChangeEvent } from 'react';
import { ErrorInfo } from '../../../classes/client'; import { ErrorInfo } from '../../../classes/client';

2
packages/webapp/src/components/form/submit-button/index.tsx
View File

@ -1,4 +1,4 @@
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';

4
packages/webapp/src/components/layout/form-container/index.tsx
View File

@ -1,5 +1,5 @@
import Container from '@material-ui/core/Container'; import Container from '@mui/material/Container';
import withStyles from '@material-ui/core/styles/withStyles'; import withStyles from '@mui/styles/withStyles';
const FormContainer = withStyles({ const FormContainer = withStyles({
root: { root: {

2
packages/webapp/src/components/layout/header/index.tsx
View File

@ -3,7 +3,7 @@ import { StyledNav, StyledDiv, Logo } from './styled';
import React from 'react'; import React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom'; 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'; import logo from './logo-small.svg';

6
packages/webapp/src/components/login-page/index.tsx
View File

@ -7,9 +7,9 @@ import SubmitButton from '../form/submit-button';
import Input from '../form/input'; import Input from '../form/input';
import GlobalError from '../form/global-error'; import GlobalError from '../form/global-error';
import FormContainer from '../layout/form-container'; import FormContainer from '../layout/form-container';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import FormControl from '@material-ui/core/FormControl'; import FormControl from '@mui/material/FormControl';
import Link from '@material-ui/core/Link'; import Link from '@mui/material/Link';
type ConfigStatusProps = { type ConfigStatusProps = {
enabled?: boolean; enabled?: boolean;

10
packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx
View File

@ -7,11 +7,11 @@ import BaseDialog from '../../action-dispatcher/base-dialog';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { activeInstance, fetchAccount } from '../../../../redux/clientSlice'; import { activeInstance, fetchAccount } from '../../../../redux/clientSlice';
import Alert from '@material-ui/lab/Alert'; import Alert from '@mui/material/Alert';
import FormControl from '@material-ui/core/FormControl'; import FormControl from '@mui/material/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControlLabel from '@mui/material/FormControlLabel';
import FormGroup from '@material-ui/core/FormGroup'; import FormGroup from '@mui/material/FormGroup';
import Switch from '@material-ui/core/Switch'; import Switch from '@mui/material/Switch';
type AccountInfoDialogProps = { type AccountInfoDialogProps = {
onClose: () => void; onClose: () => void;

2
packages/webapp/src/components/maps-page/account-menu/change-password-dialog/index.tsx
View File

@ -1,4 +1,4 @@
import FormControl from '@material-ui/core/FormControl'; import FormControl from '@mui/material/FormControl';
import React from 'react'; import React from 'react';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { useMutation } from 'react-query'; import { useMutation } from 'react-query';

23
packages/webapp/src/components/maps-page/account-menu/index.tsx
View File

@ -1,18 +1,18 @@
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@mui/material/ListItemIcon';
import Menu from '@material-ui/core/Menu'; import Menu from '@mui/material/Menu';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import SettingsApplicationsOutlined from '@material-ui/icons/SettingsApplicationsOutlined'; import SettingsApplicationsOutlined from '@mui/icons-material/SettingsApplicationsOutlined';
import AccountCircle from '@material-ui/icons/AccountCircle'; import AccountCircle from '@mui/icons-material/AccountCircle';
import React from 'react'; import React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { fetchAccount } from '../../../redux/clientSlice'; import { fetchAccount } from '../../../redux/clientSlice';
import AccountInfoDialog from './account-info-dialog'; import AccountInfoDialog from './account-info-dialog';
import ChangePasswordDialog from './change-password-dialog'; import ChangePasswordDialog from './change-password-dialog';
import LockOpenOutlined from '@material-ui/icons/LockOpenOutlined'; import LockOpenOutlined from '@mui/icons-material/LockOpenOutlined';
import Link from '@material-ui/core/Link'; import Link from '@mui/material/Link';
import ExitToAppOutlined from '@material-ui/icons/ExitToAppOutlined'; import ExitToAppOutlined from '@mui/icons-material/ExitToAppOutlined';
type ActionType = 'change-password' | 'account-info' | undefined; type ActionType = 'change-password' | 'account-info' | undefined;
const AccountMenu = (): React.ReactElement => { const AccountMenu = (): React.ReactElement => {
@ -35,7 +35,7 @@ const AccountMenu = (): React.ReactElement => {
arrow={true} arrow={true}
title={`${account?.firstname} ${account?.lastname} <${account?.email}>`} title={`${account?.firstname} ${account?.lastname} <${account?.email}>`}
> >
<IconButton onClick={handleMenu}> <IconButton onClick={handleMenu} size="large">
<AccountCircle fontSize="large" style={{ color: 'black' }} /> <AccountCircle fontSize="large" style={{ color: 'black' }} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
@ -44,7 +44,6 @@ const AccountMenu = (): React.ReactElement => {
anchorEl={anchorEl} anchorEl={anchorEl}
keepMounted keepMounted
open={open} open={open}
getContentAnchorEl={null}
onClose={handleClose} onClose={handleClose}
anchorOrigin={{ anchorOrigin={{
vertical: 'bottom', vertical: 'bottom',

28
packages/webapp/src/components/maps-page/action-chooser/index.tsx
View File

@ -1,21 +1,21 @@
import React from 'react'; import React from 'react';
import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined'; import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined'; import FileCopyOutlinedIcon from '@mui/icons-material/FileCopyOutlined';
import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined'; import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined'; import CloudDownloadOutlinedIcon from '@mui/icons-material/CloudDownloadOutlined';
import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import EditOutlinedIcon from '@material-ui/icons/EditOutlined'; import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import PublicOutlinedIcon from '@material-ui/icons/PublicOutlined'; import PublicOutlinedIcon from '@mui/icons-material/PublicOutlined';
import PrintOutlinedIcon from '@material-ui/icons/PrintOutlined'; import PrintOutlinedIcon from '@mui/icons-material/PrintOutlined';
import ShareOutlinedIcon from '@material-ui/icons/ShareOutlined'; import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined';
import LabelOutlined from '@material-ui/icons/LabelOutlined'; import LabelOutlined from '@mui/icons-material/LabelOutlined';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { fetchMapById } from '../../../redux/clientSlice'; import { fetchMapById } from '../../../redux/clientSlice';
import Menu from '@material-ui/core/Menu'; import Menu from '@mui/material/Menu';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@mui/material/ListItemIcon';
import Divider from '@material-ui/core/Divider'; import Divider from '@mui/material/Divider';
export type ActionType = export type ActionType =
| 'open' | 'open'
| 'share' | 'share'

4
packages/webapp/src/components/maps-page/action-chooser/styled.ts
View File

@ -1,5 +1,5 @@
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import withStyles from '@material-ui/core/styles/withStyles'; import withStyles from '@mui/styles/withStyles';
export const StyledMenuItem = withStyles({ export const StyledMenuItem = withStyles({
root: { root: {

6
packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/index.tsx
View File

@ -3,9 +3,9 @@ import { FormattedMessage } from 'react-intl';
import { ErrorInfo } from '../../../../classes/client'; import { ErrorInfo } from '../../../../classes/client';
import { StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from './style'; import { StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from './style';
import GlobalError from '../../../form/global-error'; import GlobalError from '../../../form/global-error';
import DialogContentText from '@material-ui/core/DialogContentText'; import DialogContentText from '@mui/material/DialogContentText';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import { PaperProps } from '@material-ui/core/Paper'; import { PaperProps } from '@mui/material/Paper';
export type DialogProps = { export type DialogProps = {
onClose: () => void; onClose: () => void;

10
packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/style.ts
View File

@ -1,8 +1,8 @@
import Dialog from '@material-ui/core/Dialog'; import Dialog from '@mui/material/Dialog';
import DialogActions from '@material-ui/core/DialogActions'; import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@material-ui/core/DialogContent'; import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle'; import DialogTitle from '@mui/material/DialogTitle';
import withStyles from '@material-ui/core/styles/withStyles'; import withStyles from '@mui/styles/withStyles';
export const StyledDialogContent = withStyles({ export const StyledDialogContent = withStyles({
root: { root: {

2
packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { useMutation } from 'react-query'; import { useMutation } from 'react-query';
import { useSelector } from 'react-redux'; 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 Client, { BasicMapInfo, ErrorInfo } from '../../../../classes/client';
import { activeInstance } from '../../../../redux/clientSlice'; import { activeInstance } from '../../../../redux/clientSlice';

4
packages/webapp/src/components/maps-page/action-dispatcher/delete-dialog/index.tsx
View File

@ -6,8 +6,8 @@ import Client, { ErrorInfo } from '../../../../classes/client';
import { activeInstance, fetchMapById } from '../../../../redux/clientSlice'; import { activeInstance, fetchMapById } from '../../../../redux/clientSlice';
import { SimpleDialogProps, handleOnMutationSuccess } from '..'; import { SimpleDialogProps, handleOnMutationSuccess } from '..';
import BaseDialog from '../base-dialog'; import BaseDialog from '../base-dialog';
import Alert from '@material-ui/lab/Alert'; import Alert from '@mui/material/Alert';
import AlertTitle from '@material-ui/lab/AlertTitle'; import AlertTitle from '@mui/material/AlertTitle';
const DeleteDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => { const DeleteDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
const intl = useIntl(); const intl = useIntl();

4
packages/webapp/src/components/maps-page/action-dispatcher/delete-multiselect-dialog/index.tsx
View File

@ -6,8 +6,8 @@ import Client from '../../../../classes/client';
import { activeInstance } from '../../../../redux/clientSlice'; import { activeInstance } from '../../../../redux/clientSlice';
import { handleOnMutationSuccess } from '..'; import { handleOnMutationSuccess } from '..';
import BaseDialog from '../base-dialog'; import BaseDialog from '../base-dialog';
import Alert from '@material-ui/lab/Alert'; import Alert from '@mui/material/Alert';
import AlertTitle from '@material-ui/lab/AlertTitle'; import AlertTitle from '@mui/material/AlertTitle';
export type DeleteMultiselectDialogProps = { export type DeleteMultiselectDialogProps = {
mapsId: number[]; mapsId: number[];

2
packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { useMutation } from 'react-query'; import { useMutation } from 'react-query';
import FormControl from '@material-ui/core/FormControl'; import FormControl from '@mui/material/FormControl';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import Client, { BasicMapInfo, ErrorInfo } from '../../../../classes/client'; import Client, { BasicMapInfo, ErrorInfo } from '../../../../classes/client';

14
packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx
View File

@ -2,14 +2,14 @@ import React, { useEffect } from 'react';
import { FormattedMessage, useIntl } from 'react-intl'; import { FormattedMessage, useIntl } from 'react-intl';
import BaseDialog from '../base-dialog'; import BaseDialog from '../base-dialog';
import { useStyles } from './style'; import { useStyles } from './style';
import Alert from '@material-ui/lab/Alert'; import Alert from '@mui/material/Alert';
import { fetchMapById } from '../../../../redux/clientSlice'; import { fetchMapById } from '../../../../redux/clientSlice';
import FormControl from '@material-ui/core/FormControl'; import FormControl from '@mui/material/FormControl';
import RadioGroup from '@material-ui/core/RadioGroup'; import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@material-ui/core/Radio'; import Radio from '@mui/material/Radio';
import Select from '@material-ui/core/Select'; import Select from '@mui/material/Select';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import { Designer, TextExporterFactory, ImageExporterFactory, Exporter, Mindmap } from '@wisemapping/mindplot'; import { Designer, TextExporterFactory, ImageExporterFactory, Exporter, Mindmap } from '@wisemapping/mindplot';
import Client from '../../../../classes/client'; import Client from '../../../../classes/client';
import { activeInstance } from '../../../../redux/clientSlice'; import { activeInstance } from '../../../../redux/clientSlice';

4
packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/style.ts
View File

@ -1,5 +1,5 @@
import createStyles from '@material-ui/core/styles/createStyles'; import createStyles from '@mui/styles/createStyles';
import makeStyles from '@material-ui/core/styles/makeStyles'; import makeStyles from '@mui/styles/makeStyles';
export const useStyles = makeStyles(() => export const useStyles = makeStyles(() =>
createStyles({ createStyles({

18
packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx
View File

@ -8,15 +8,15 @@ import { SimpleDialogProps } from '..';
import BaseDialog from '../base-dialog'; import BaseDialog from '../base-dialog';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import TableContainer from '@material-ui/core/TableContainer'; import TableContainer from '@mui/material/TableContainer';
import Table from '@material-ui/core/Table'; import Table from '@mui/material/Table';
import TableRow from '@material-ui/core/TableRow'; import TableRow from '@mui/material/TableRow';
import TableCell from '@material-ui/core/TableCell'; import TableCell from '@mui/material/TableCell';
import TableHead from '@material-ui/core/TableHead'; import TableHead from '@mui/material/TableHead';
import TableBody from '@material-ui/core/TableBody'; import TableBody from '@mui/material/TableBody';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import Link from '@material-ui/core/Link'; import Link from '@mui/material/Link';
import Paper from '@material-ui/core/Paper'; import Paper from '@mui/material/Paper';
const HistoryDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => { const HistoryDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
const intl = useIntl(); const intl = useIntl();

4
packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx
View File

@ -1,5 +1,5 @@
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import FormControl from '@material-ui/core/FormControl'; import FormControl from '@mui/material/FormControl';
import React from 'react'; import React from 'react';
import { FormattedMessage, useIntl } from 'react-intl'; import { FormattedMessage, useIntl } from 'react-intl';

10
packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx
View File

@ -7,11 +7,11 @@ import { SimpleDialogProps } from '..';
import { useStyles } from './style'; import { useStyles } from './style';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { fetchMapById } from '../../../../redux/clientSlice'; import { fetchMapById } from '../../../../redux/clientSlice';
import Paper from '@material-ui/core/Paper'; import Paper from '@mui/material/Paper';
import Card from '@material-ui/core/Card'; import Card from '@mui/material/Card';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@mui/material/ListItem';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import List from '@material-ui/core/List'; import List from '@mui/material/List';
const InfoDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => { const InfoDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
const { map } = fetchMapById(mapId); const { map } = fetchMapById(mapId);

4
packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/style.ts
View File

@ -1,5 +1,5 @@
import createStyles from '@material-ui/core/styles/createStyles'; import createStyles from '@mui/styles/createStyles';
import makeStyles from '@material-ui/core/styles/makeStyles'; import makeStyles from '@mui/styles/makeStyles';
export const useStyles = makeStyles(() => export const useStyles = makeStyles(() =>
createStyles({ createStyles({

24
packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx
View File

@ -8,16 +8,16 @@ import BaseDialog from '../base-dialog';
import { handleOnMutationSuccess, SimpleDialogProps } from '..'; import { handleOnMutationSuccess, SimpleDialogProps } from '..';
import { useStyles } from './style'; import { useStyles } from './style';
import FormControl from '@material-ui/core/FormControl'; import FormControl from '@mui/material/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox'; import Checkbox from '@mui/material/Checkbox';
import TabContext from '@material-ui/lab/TabContext'; import TabContext from '@mui/lab/TabContext';
import AppBar from '@material-ui/core/AppBar'; import AppBar from '@mui/material/AppBar';
import TabList from '@material-ui/lab/TabList'; import TabList from '@mui/lab/TabList';
import Tab from '@material-ui/core/Tab'; import Tab from '@mui/material/Tab';
import TabPanel from '@material-ui/lab/TabPanel'; import TabPanel from '@mui/lab/TabPanel';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import TextareaAutosize from '@material-ui/core/TextareaAutosize'; import TextareaAutosize from '@mui/material/TextareaAutosize';
const PublishDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => { const PublishDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
const { map } = fetchMapById(mapId); const { map } = fetchMapById(mapId);
@ -129,7 +129,7 @@ const PublishDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElemen
className={classes.textarea} className={classes.textarea}
readOnly={true} readOnly={true}
spellCheck={false} spellCheck={false}
rowsMax={6} maxRows={6}
defaultValue={`<iframe style="width:600px;height:400px;border:1px solid black" src="https://app.wisemapping.com/c/maps/${mapId}/embed?zoom=1.0"></iframe>`} defaultValue={`<iframe style="width:600px;height:400px;border:1px solid black" src="https://app.wisemapping.com/c/maps/${mapId}/embed?zoom=1.0"></iframe>`}
/> />
</TabPanel> </TabPanel>
@ -144,7 +144,7 @@ const PublishDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElemen
className={classes.textarea} className={classes.textarea}
readOnly={true} readOnly={true}
spellCheck={false} spellCheck={false}
rowsMax={1} maxRows={1}
defaultValue={`https://app.wisemapping.com/c/maps/${mapId}/public`} defaultValue={`https://app.wisemapping.com/c/maps/${mapId}/public`}
/> />
</TabPanel> </TabPanel>

4
packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/style.ts
View File

@ -1,5 +1,5 @@
import createStyles from '@material-ui/core/styles/createStyles'; import createStyles from '@mui/styles/createStyles';
import makeStyles from '@material-ui/core/styles/makeStyles'; import makeStyles from '@mui/styles/makeStyles';
export const useStyles = makeStyles(() => export const useStyles = makeStyles(() =>
createStyles({ createStyles({

2
packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx
View File

@ -7,7 +7,7 @@ import { activeInstance, fetchMapById } from '../../../../redux/clientSlice';
import { SimpleDialogProps, handleOnMutationSuccess } from '..'; import { SimpleDialogProps, handleOnMutationSuccess } from '..';
import Input from '../../../form/input'; import Input from '../../../form/input';
import BaseDialog from '../base-dialog'; import BaseDialog from '../base-dialog';
import FormControl from '@material-ui/core/FormControl'; import FormControl from '@mui/material/FormControl';
export type RenameModel = { export type RenameModel = {
id: number; id: number;

34
packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/index.tsx
View File

@ -6,24 +6,24 @@ import Client, { ErrorInfo, Permission } from '../../../../classes/client';
import { activeInstance } from '../../../../redux/clientSlice'; import { activeInstance } from '../../../../redux/clientSlice';
import { SimpleDialogProps } from '..'; import { SimpleDialogProps } from '..';
import BaseDialog from '../base-dialog'; import BaseDialog from '../base-dialog';
import List from '@material-ui/core/List'; import List from '@mui/material/List';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@mui/material/ListItem';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@mui/material/ListItemText';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import DeleteIcon from '@material-ui/icons/Delete'; import DeleteIcon from '@mui/icons-material/Delete';
import Paper from '@material-ui/core/Paper'; import Paper from '@mui/material/Paper';
import Select from '@material-ui/core/Select'; import Select from '@mui/material/Select';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import TextField from '@material-ui/core/TextField'; import TextField from '@mui/material/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox'; import Checkbox from '@mui/material/Checkbox';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import { useStyles } from './style'; import { useStyles } from './style';
import RoleIcon from '../../role-icon'; import RoleIcon from '../../role-icon';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
type ShareModel = { type ShareModel = {
emails: string; emails: string;
@ -189,7 +189,7 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
<TextField <TextField
multiline multiline
rows={3} rows={3}
rowsMax={3} maxRows={3}
className={classes.textArea} className={classes.textArea}
variant="filled" variant="filled"
name="message" name="message"
@ -236,7 +236,7 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
onClick={(e) => onClick={(e) =>
handleOnDeleteClick(e, permission.email) handleOnDeleteClick(e, permission.email)
} }
> size="large">
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>
</Tooltip> </Tooltip>

4
packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/style.ts
View File

@ -1,5 +1,5 @@
import createStyles from '@material-ui/core/styles/createStyles'; import createStyles from '@mui/styles/createStyles';
import makeStyles from '@material-ui/core/styles/makeStyles'; import makeStyles from '@mui/styles/makeStyles';
export const useStyles = makeStyles(() => export const useStyles = makeStyles(() =>
createStyles({ createStyles({

25
packages/webapp/src/components/maps-page/help-menu/index.tsx
View File

@ -1,17 +1,17 @@
import React from 'react'; import React from 'react';
import { FormattedMessage, useIntl } from 'react-intl'; import { FormattedMessage, useIntl } from 'react-intl';
import Help from '@material-ui/icons/Help'; import Help from '@mui/icons-material/Help';
import PolicyOutlined from '@material-ui/icons/PolicyOutlined'; import PolicyOutlined from '@mui/icons-material/PolicyOutlined';
import FeedbackOutlined from '@material-ui/icons/FeedbackOutlined'; import FeedbackOutlined from '@mui/icons-material/FeedbackOutlined';
import EmojiPeopleOutlined from '@material-ui/icons/EmailOutlined'; import EmojiPeopleOutlined from '@mui/icons-material/EmailOutlined';
import EmailOutlined from '@material-ui/icons/EmailOutlined'; import EmailOutlined from '@mui/icons-material/EmailOutlined';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import Menu from '@material-ui/core/Menu'; import Menu from '@mui/material/Menu';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import Link from '@material-ui/core/Link'; import Link from '@mui/material/Link';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@mui/material/ListItemIcon';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
const HelpMenu = (): React.ReactElement => { const HelpMenu = (): React.ReactElement => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@ -32,7 +32,7 @@ const HelpMenu = (): React.ReactElement => {
arrow={true} arrow={true}
title={intl.formatMessage({ id: 'help.support', defaultMessage: 'Support' })} title={intl.formatMessage({ id: 'help.support', defaultMessage: 'Support' })}
> >
<IconButton aria-haspopup="true" onClick={handleMenu}> <IconButton aria-haspopup="true" onClick={handleMenu} size="large">
<Help /> <Help />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
@ -41,7 +41,6 @@ const HelpMenu = (): React.ReactElement => {
anchorEl={anchorEl} anchorEl={anchorEl}
keepMounted keepMounted
open={open} open={open}
getContentAnchorEl={null}
onClose={handleClose} onClose={handleClose}
anchorOrigin={{ anchorOrigin={{
vertical: 'bottom', vertical: 'bottom',

44
packages/webapp/src/components/maps-page/index.tsx
View File

@ -1,10 +1,10 @@
import React, { ErrorInfo, ReactElement, useEffect } from 'react'; import React, { ErrorInfo, ReactElement, useEffect } from 'react';
import clsx from 'clsx'; import clsx from 'clsx';
import Drawer from '@material-ui/core/Drawer'; import Drawer from '@mui/material/Drawer';
import AppBar from '@material-ui/core/AppBar'; import AppBar from '@mui/material/AppBar';
import Toolbar from '@material-ui/core/Toolbar'; import Toolbar from '@mui/material/Toolbar';
import List from '@material-ui/core/List'; import List from '@mui/material/List';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import { useStyles } from './style'; import { useStyles } from './style';
import { MapsList } from './maps-list'; import { MapsList } from './maps-list';
import { createIntl, createIntlCache, FormattedMessage, IntlProvider, IntlShape, useIntl } from 'react-intl'; 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 LanguageMenu from './language-menu';
import AppI18n, { Locales } from '../../classes/app-i18n'; import AppI18n, { Locales } from '../../classes/app-i18n';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@mui/material/ListItemIcon';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@mui/material/ListItem';
import AddCircleTwoTone from '@material-ui/icons/AddCircleTwoTone'; import AddCircleTwoTone from '@mui/icons-material/AddCircleTwoTone';
import CloudUploadTwoTone from '@material-ui/icons/CloudUploadTwoTone'; import CloudUploadTwoTone from '@mui/icons-material/CloudUploadTwoTone';
import DeleteOutlineTwoTone from '@material-ui/icons/DeleteOutlineTwoTone'; import DeleteOutlineTwoTone from '@mui/icons-material/DeleteOutlineTwoTone';
import LabelTwoTone from '@material-ui/icons/LabelTwoTone'; import LabelTwoTone from '@mui/icons-material/LabelTwoTone';
import PersonOutlineTwoTone from '@material-ui/icons/PersonOutlineTwoTone'; import PersonOutlineTwoTone from '@mui/icons-material/PersonOutlineTwoTone';
import PublicTwoTone from '@material-ui/icons/PublicTwoTone'; import PublicTwoTone from '@mui/icons-material/PublicTwoTone';
import ScatterPlotTwoTone from '@material-ui/icons/ScatterPlotTwoTone'; import ScatterPlotTwoTone from '@mui/icons-material/ScatterPlotTwoTone';
import ShareTwoTone from '@material-ui/icons/ShareTwoTone'; import ShareTwoTone from '@mui/icons-material/ShareTwoTone';
import StarTwoTone from '@material-ui/icons/StarTwoTone'; import StarTwoTone from '@mui/icons-material/StarTwoTone';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import Link from '@material-ui/core/Link'; import Link from '@mui/material/Link';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@mui/material/ListItemText';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import logoIcon from './logo-small.svg'; import logoIcon from './logo-small.svg';
import poweredByIcon from './pwrdby-white.svg'; import poweredByIcon from './pwrdby-white.svg';
@ -311,7 +311,7 @@ const StyleListItem = (props: ListItemProps) => {
edge="end" edge="end"
aria-label="delete" aria-label="delete"
onClick={(e) => handleOnDelete(e, filter)} onClick={(e) => handleOnDelete(e, filter)}
> size="large">
<DeleteOutlineTwoTone color="secondary" /> <DeleteOutlineTwoTone color="secondary" />
</IconButton> </IconButton>
</ListItemSecondaryAction> </ListItemSecondaryAction>

23
packages/webapp/src/components/maps-page/language-menu/index.tsx
View File

@ -1,4 +1,4 @@
import TranslateTwoTone from '@material-ui/icons/TranslateTwoTone'; import TranslateTwoTone from '@mui/icons-material/TranslateTwoTone';
import React from 'react'; import React from 'react';
import { useMutation, useQueryClient } from 'react-query'; import { useMutation, useQueryClient } from 'react-query';
import Client from '../../../classes/client'; import Client from '../../../classes/client';
@ -6,16 +6,16 @@ import { useSelector } from 'react-redux';
import { activeInstance, fetchAccount } from '../../../redux/clientSlice'; import { activeInstance, fetchAccount } from '../../../redux/clientSlice';
import { FormattedMessage, useIntl } from 'react-intl'; import { FormattedMessage, useIntl } from 'react-intl';
import { LocaleCode, Locales } from '../../../classes/app-i18n'; import { LocaleCode, Locales } from '../../../classes/app-i18n';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import Menu from '@material-ui/core/Menu'; import Menu from '@mui/material/Menu';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import Dialog from '@material-ui/core/Dialog'; import Dialog from '@mui/material/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle'; import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent'; import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText'; import DialogContentText from '@mui/material/DialogContentText';
import DialogActions from '@material-ui/core/DialogActions'; import DialogActions from '@mui/material/DialogActions';
import Divider from '@material-ui/core/Divider'; import Divider from '@mui/material/Divider';
const LanguageMenu = (): React.ReactElement => { const LanguageMenu = (): React.ReactElement => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -76,7 +76,6 @@ const LanguageMenu = (): React.ReactElement => {
anchorEl={anchorEl} anchorEl={anchorEl}
keepMounted keepMounted
open={open} open={open}
getContentAnchorEl={null}
onClose={handleClose} onClose={handleClose}
anchorOrigin={{ anchorOrigin={{
vertical: 'bottom', vertical: 'bottom',

8
packages/webapp/src/components/maps-page/maps-list/add-label-button/index.tsx
View File

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import Popover from '@material-ui/core/Popover'; import Popover from '@mui/material/Popover';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import LabelTwoTone from '@material-ui/icons/LabelTwoTone'; import LabelTwoTone from '@mui/icons-material/LabelTwoTone';
import { FormattedMessage, useIntl } from 'react-intl'; import { FormattedMessage, useIntl } from 'react-intl';
import { Label } from '../../../../classes/client'; import { Label } from '../../../../classes/client';
import { LabelSelector } from '../label-selector'; import { LabelSelector } from '../label-selector';

40
packages/webapp/src/components/maps-page/maps-list/index.tsx
View File

@ -11,27 +11,27 @@ import dayjs from 'dayjs';
import { Filter, LabelFilter } from '..'; import { Filter, LabelFilter } from '..';
import { FormattedMessage, useIntl } from 'react-intl'; import { FormattedMessage, useIntl } from 'react-intl';
import Table from '@material-ui/core/Table'; import Table from '@mui/material/Table';
import TableBody from '@material-ui/core/TableBody'; import TableBody from '@mui/material/TableBody';
import TableCell from '@material-ui/core/TableCell'; import TableCell from '@mui/material/TableCell';
import TableContainer from '@material-ui/core/TableContainer'; import TableContainer from '@mui/material/TableContainer';
import TableHead from '@material-ui/core/TableHead'; import TableHead from '@mui/material/TableHead';
import TablePagination from '@material-ui/core/TablePagination'; import TablePagination from '@mui/material/TablePagination';
import TableRow from '@material-ui/core/TableRow'; import TableRow from '@mui/material/TableRow';
import TableSortLabel from '@material-ui/core/TableSortLabel'; import TableSortLabel from '@mui/material/TableSortLabel';
import Toolbar from '@material-ui/core/Toolbar'; import Toolbar from '@mui/material/Toolbar';
import Paper from '@material-ui/core/Paper'; import Paper from '@mui/material/Paper';
import Checkbox from '@material-ui/core/Checkbox'; import Checkbox from '@mui/material/Checkbox';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import InputBase from '@material-ui/core/InputBase'; import InputBase from '@mui/material/InputBase';
import Link from '@material-ui/core/Link'; import Link from '@mui/material/Link';
import DeleteOutlined from '@material-ui/icons/DeleteOutlined'; import DeleteOutlined from '@mui/icons-material/DeleteOutlined';
import MoreHorizIcon from '@material-ui/icons/MoreHoriz'; import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
import StarRateRoundedIcon from '@material-ui/icons/StarRateRounded'; import StarRateRoundedIcon from '@mui/icons-material/StarRateRounded';
import SearchIcon from '@material-ui/icons/Search'; import SearchIcon from '@mui/icons-material/Search';
import { AddLabelButton } from './add-label-button'; import { AddLabelButton } from './add-label-button';
import relativeTime from 'dayjs/plugin/relativeTime'; import relativeTime from 'dayjs/plugin/relativeTime';

12
packages/webapp/src/components/maps-page/maps-list/label-selector/index.tsx
View File

@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
import FormGroup from '@material-ui/core/FormGroup'; import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControlLabel from '@mui/material/FormControlLabel';
import Divider from '@material-ui/core/Divider'; import Divider from '@mui/material/Divider';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@mui/icons-material/Add';
import Checkbox from '@material-ui/core/Checkbox'; import Checkbox from '@mui/material/Checkbox';
import Container from '@material-ui/core/Container'; import Container from '@mui/material/Container';
import { Label as LabelComponent } from '../label'; import { Label as LabelComponent } from '../label';
import Client, { Label, ErrorInfo } from '../../../../classes/client'; import Client, { Label, ErrorInfo } from '../../../../classes/client';
import { useQuery } from 'react-query'; import { useQuery } from 'react-query';

2
packages/webapp/src/components/maps-page/maps-list/label-selector/styled.ts
View File

@ -1,5 +1,5 @@
import styled from 'styled-components'; import styled from 'styled-components';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
export const StyledButton = styled(Button)` export const StyledButton = styled(Button)`
margin: 4px; margin: 4px;

4
packages/webapp/src/components/maps-page/maps-list/labels-cell/index.tsx
View File

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import Chip from '@material-ui/core/Chip'; import Chip from '@mui/material/Chip';
import { Label } from '../../../../classes/client'; import { Label } from '../../../../classes/client';
import LabelTwoTone from '@material-ui/icons/LabelTwoTone'; import LabelTwoTone from '@mui/icons-material/LabelTwoTone';
type Props = { type Props = {
labels: Label[], labels: Label[],
}; };

14
packages/webapp/src/components/maps-page/maps-list/styled.ts
View File

@ -1,7 +1,7 @@
import { fade } from '@material-ui/core/styles'; import { alpha, Theme } from '@mui/material/styles';
import { Theme } from '@material-ui/core/styles/createTheme';
import createStyles from '@material-ui/core/styles/createStyles'; import createStyles from '@mui/styles/createStyles';
import makeStyles from '@material-ui/core/styles/makeStyles'; import makeStyles from '@mui/styles/makeStyles';
export const useStyles = makeStyles((theme: Theme) => export const useStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
@ -59,9 +59,9 @@ export const useStyles = makeStyles((theme: Theme) =>
}, },
search: { search: {
borderRadius: 9, borderRadius: 9,
backgroundColor: fade(theme.palette.common.white, 0.15), backgroundColor: alpha(theme.palette.common.white, 0.15),
'&:hover': { '&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25), backgroundColor: alpha(theme.palette.common.white, 0.25),
}, },
margin: '10px 0px', margin: '10px 0px',
width: '100%', width: '100%',
@ -90,7 +90,7 @@ export const useStyles = makeStyles((theme: Theme) =>
// vertical padding + font size from searchIcon // vertical padding + font size from searchIcon
border: '1px solid #ffa800', border: '1px solid #ffa800',
borderRadius: 4, borderRadius: 4,
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`, paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create('width'), transition: theme.transitions.create('width'),
width: '100%', width: '100%',
[theme.breakpoints.up('sm')]: { [theme.breakpoints.up('sm')]: {

8
packages/webapp/src/components/maps-page/role-icon/index.tsx
View File

@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import PersonSharpIcon from '@material-ui/icons/PersonSharp'; import PersonSharpIcon from '@mui/icons-material/PersonSharp';
import EditSharpIcon from '@material-ui/icons/EditSharp'; import EditSharpIcon from '@mui/icons-material/EditSharp';
import VisibilitySharpIcon from '@material-ui/icons/VisibilitySharp'; import VisibilitySharpIcon from '@mui/icons-material/VisibilitySharp';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Role } from '../../../classes/client'; import { Role } from '../../../classes/client';

7
packages/webapp/src/components/maps-page/style.ts
View File

@ -1,6 +1,7 @@
import { Theme } from '@material-ui/core/styles/createTheme'; import { Theme } from '@mui/material/styles';
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';
const drawerWidth = 300; const drawerWidth = 300;

4
packages/webapp/src/components/registration-page/index.tsx
View File

@ -14,8 +14,8 @@ import { activeInstance } from '../../redux/clientSlice';
import Input from '../form/input'; import Input from '../form/input';
import GlobalError from '../form/global-error'; import GlobalError from '../form/global-error';
import SubmitButton from '../form/submit-button'; import SubmitButton from '../form/submit-button';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import FormControl from '@material-ui/core/FormControl'; import FormControl from '@mui/material/FormControl';
import AppConfig from '../../classes/app-config'; import AppConfig from '../../classes/app-config';
export type Model = { export type Model = {

4
packages/webapp/src/components/registration-success-page/index.tsx
View File

@ -4,8 +4,8 @@ import FormContainer from '../layout/form-container';
import Header from '../layout/header'; import Header from '../layout/header';
import Footer from '../layout/footer'; import Footer from '../layout/footer';
import { Link as RouterLink } from 'react-router-dom'; import { Link as RouterLink } from 'react-router-dom';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
const RegistrationSuccessPage = (): React.ReactElement => { const RegistrationSuccessPage = (): React.ReactElement => {
const intl = useIntl(); const intl = useIntl();

6
packages/webapp/src/theme/index.ts
View File

@ -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: { overrides: {
MuiCssBaseline: { MuiCssBaseline: {
'@global': { '@global': {
@ -74,6 +74,6 @@ const theme = createMuiTheme({
contrastText: '#FFFFFF', contrastText: '#FFFFFF',
}, },
}, },
}); }));
export { theme }; export { theme };