diff --git a/package.json b/package.json index 92b118e00..5a8df4a76 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,12 @@ "url": "https://github.com/TechToThePeople/proca" }, "dependencies": { - "@material-ui/core": "^4.12.4", - "@material-ui/icons": "^4.11.3", - "@material-ui/lab": "^4.0.0-alpha.61", + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", + "@mui/icons-material": "^5.11.16", + "@mui/lab": "^5.0.0-alpha.133", + "@mui/material": "^5.13.4", + "@mui/styles": "^5.13.2", "@paypal/react-paypal-js": "^7.8.3", "@shopify/react-intersection-observer": "^4.0.4", "@stripe/react-stripe-js": "^2.1.0", diff --git a/src/components/Alert.js b/src/components/Alert.js index cf6c54c53..d06d92b18 100644 --- a/src/components/Alert.js +++ b/src/components/Alert.js @@ -1,9 +1,9 @@ import React from "react"; import PropTypes from "prop-types"; -import Snackbar from "@material-ui/core/Snackbar"; -import { Alert, AlertTitle } from "@material-ui/lab"; -import Slide from "@material-ui/core/Slide"; -import { makeStyles } from "@material-ui/core/styles"; +import Snackbar from "@mui/material/Snackbar"; +import { Alert, AlertTitle } from '@mui/material'; +import Slide from "@mui/material/Slide"; +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles(() => ({ title: { diff --git a/src/components/Closed.js b/src/components/Closed.js index 03dbe7b46..b77da0fb4 100644 --- a/src/components/Closed.js +++ b/src/components/Closed.js @@ -1,7 +1,7 @@ import React from "react"; import { useTranslation } from "react-i18next"; import useCount from "@hooks/useCount"; -import { Container } from "@material-ui/core"; +import { Container } from "@mui/material"; import Register from "@components/Register"; import TTag from "@components/TTag"; diff --git a/src/components/CommentWall.js b/src/components/CommentWall.js index f87cc22cf..e2246fda8 100644 --- a/src/components/CommentWall.js +++ b/src/components/CommentWall.js @@ -2,12 +2,12 @@ import React, { Fragment, useState, useEffect } from "react"; import { useSupabase } from "@lib/supabase"; import { useCampaignConfig } from "@hooks/useConfig"; -import List from "@material-ui/core/List"; -import ListItem from "@material-ui/core/ListItem"; -import Divider from "@material-ui/core/Divider"; -import ListItemText from "@material-ui/core/ListItemText"; -import ListItemIcon from "@material-ui/core/ListItemIcon"; -import QuoteIcon from "@material-ui/icons/FormatQuote"; +import List from "@mui/material/List"; +import ListItem from "@mui/material/ListItem"; +import Divider from "@mui/material/Divider"; +import ListItemText from "@mui/material/ListItemText"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import QuoteIcon from "@mui/icons-material/FormatQuote"; const Wall = (props) => { const supabase = useSupabase(); diff --git a/src/components/Consent.js b/src/components/Consent.js index ddb2a5380..bbf2786cb 100644 --- a/src/components/Consent.js +++ b/src/components/Consent.js @@ -12,14 +12,14 @@ import { FormControlLabel, Collapse, Checkbox, -} from "@material-ui/core"; -import { Alert, AlertTitle } from "@material-ui/lab"; +} from "@mui/material"; +import { Alert, AlertTitle } from '@mui/material'; import { useTranslation, Trans } from "react-i18next"; import { useCampaignConfig } from "@hooks/useConfig"; import { Controller } from "react-hook-form"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles((theme) => ({ check: { diff --git a/src/components/Dialog.js b/src/components/Dialog.js index b72ece5d1..4b8cec9f9 100644 --- a/src/components/Dialog.js +++ b/src/components/Dialog.js @@ -1,9 +1,11 @@ import React, { useState, useEffect } from "react"; -//import { Container, Grid } from "@material-ui/core"; +//import { Container, Grid } from "@mui/material"; import { useCampaignConfig } from "@hooks/useConfig"; -import { makeStyles, useTheme } from "@material-ui/core/styles"; +import { useTheme } from "@mui/material/styles"; + +import makeStyles from '@mui/styles/makeStyles'; import { Dialog, @@ -11,10 +13,10 @@ import { DialogTitle, useMediaQuery, IconButton, -} from "@material-ui/core"; +} from "@mui/material"; -import CloseIcon from "@material-ui/icons/Close"; -import Slide from "@material-ui/core/Slide"; +import CloseIcon from "@mui/icons-material/Close"; +import Slide from "@mui/material/Slide"; const Transition = React.forwardRef(function Transition(props, ref) { return ; @@ -39,7 +41,7 @@ function OpenDialog(props) { config.param.locales["dialog-title"] || config.campaign?.title; const theme = useTheme(); - const fullScreen = useMediaQuery(theme.breakpoints.down("xs"), { + const fullScreen = useMediaQuery(theme.breakpoints.down('sm'), { noSsr: true, }); useEffect(() => setOpen(props.dialog), [props.dialog]); @@ -66,9 +68,9 @@ function OpenDialog(props) { hideBackdrop={props.hideBackdrop || false} > {title ? ( - +

{title}

- + diff --git a/src/components/Email.js b/src/components/Email.js index 945cb9d05..abf1d93ea 100644 --- a/src/components/Email.js +++ b/src/components/Email.js @@ -14,13 +14,13 @@ import { FilledInput, FormHelperText, FormControl, -} from "@material-ui/core"; -import Alert from "@material-ui/lab/Alert"; +} from "@mui/material"; +import Alert from '@mui/material/Alert'; import EmailAction from "@components/email/Action"; import SkeletonListItem from "@components/layout/SkeletonListItem"; import ProgressCounter from "@components/ProgressCounter"; -import SearchIcon from "@material-ui/icons/Search"; +import SearchIcon from "@mui/icons-material/Search"; import Country from "@components/field/Country"; import useData from "@hooks/useData"; @@ -31,9 +31,9 @@ import Register from "@components/Register"; import { useTranslation } from "react-i18next"; import { useCampaignConfig, useSetCampaignConfig } from "@hooks/useConfig"; import { useForm } from "react-hook-form"; -import { Grid, Container } from "@material-ui/core"; +import { Grid, Container } from "@mui/material"; import TextField from "@components/TextField"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; import uuid from "@lib/uuid"; import { mainLanguage } from "@lib/i18n"; import { getCountryName } from "@lib/i18n"; @@ -109,7 +109,7 @@ const Filter = (props) => { + size="large"> diff --git a/src/components/Ep.js b/src/components/Ep.js index d5630e973..9cb2320e7 100644 --- a/src/components/Ep.js +++ b/src/components/Ep.js @@ -1,6 +1,6 @@ import React, { useState, useEffect, useCallback, Fragment } from "react"; -import List from "@material-ui/core/List"; +import List from "@mui/material/List"; import MepAction from "@components/MepAction"; import Dialog from "@components/Dialog"; import Country from "@components/field/Country"; diff --git a/src/components/FAB.js b/src/components/FAB.js index a1caedb6d..948db7ba6 100644 --- a/src/components/FAB.js +++ b/src/components/FAB.js @@ -2,13 +2,13 @@ import React, { useState, useEffect, forwardRef } from "react"; import ReactDOM from "react-dom"; import { useCampaignConfig } from "@hooks/useConfig"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; -import { Fab, Slide, Badge } from "@material-ui/core"; +import { Fab, Slide, Badge } from "@mui/material"; import { useTranslation } from "react-i18next"; import useCount from "@hooks/useCount.js"; -import CreateIcon from "@material-ui/icons/Create"; +import CreateIcon from "@mui/icons-material/Create"; import { useIntersection } from "@shopify/react-intersection-observer"; const useStyles = makeStyles(() => ({ diff --git a/src/components/Html.js b/src/components/Html.js index cd1b86bdb..4422c04b4 100644 --- a/src/components/Html.js +++ b/src/components/Html.js @@ -1,9 +1,9 @@ import React, { useLayoutEffect, useState } from "react"; import Alert from "@components/Alert"; import useData from "@hooks/useData"; -import SkipNextIcon from "@material-ui/icons/SkipNext"; +import SkipNextIcon from "@mui/icons-material/SkipNext"; import { useTranslation } from "react-i18next"; -import { Button } from "@material-ui/core"; +import { Button } from "@mui/material"; function Component(props) { const data = useData(); diff --git a/src/components/Iframe.js b/src/components/Iframe.js index af5ffc587..3e8855a0b 100644 --- a/src/components/Iframe.js +++ b/src/components/Iframe.js @@ -1,12 +1,5 @@ import React, { useEffect } from "react"; -/*import Backdrop from '@material-ui/core/Backdrop'; -import CircularProgress from '@material-ui/core/CircularProgress'; - - - - -*/ import { useCampaignConfig } from "@hooks/useConfig"; import useData from "@hooks/useData"; const Iframe = (props) => { diff --git a/src/components/ImplicitConsent.js b/src/components/ImplicitConsent.js index d2dba2e05..68dbb4cba 100644 --- a/src/components/ImplicitConsent.js +++ b/src/components/ImplicitConsent.js @@ -1,12 +1,12 @@ import React from "react"; -import { Grid, FormHelperText } from "@material-ui/core"; +import { Grid, FormHelperText } from "@mui/material"; import { useTranslation } from "react-i18next"; import { useCampaignConfig } from "@hooks/useConfig"; import { useLayout } from "@hooks/useLayout"; import { ConfirmProcessing } from "@components/Consent"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles((theme) => ({ bigHelper: { diff --git a/src/components/MepAction.js b/src/components/MepAction.js index 332536faf..08340f588 100644 --- a/src/components/MepAction.js +++ b/src/components/MepAction.js @@ -1,13 +1,13 @@ import React, { useState } from "react"; -import ListItem from "@material-ui/core/ListItem"; -import ListItemText from "@material-ui/core/ListItemText"; -import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction"; -import ListItemAvatar from "@material-ui/core/ListItemAvatar"; -import Avatar from "@material-ui/core/Avatar"; -import SvgIcon from "@material-ui/core/SvgIcon"; -import IconButton from "@material-ui/core/IconButton"; +import ListItem from "@mui/material/ListItem"; +import ListItemText from "@mui/material/ListItemText"; +import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction"; +import ListItemAvatar from "@mui/material/ListItemAvatar"; +import Avatar from "@mui/material/Avatar"; +import SvgIcon from "@mui/material/SvgIcon"; +import IconButton from "@mui/material/IconButton"; import PropTypes from "prop-types"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; // TODO: use it to check tweets' length https://www.npmjs.com/package/twitter-text import TwitterIcon from "../images/Twitter.js"; @@ -118,7 +118,7 @@ const component = function MepAction(profile) { } /> - + diff --git a/src/components/PictureWall.js b/src/components/PictureWall.js index a9ec3bdbc..7d1a95702 100644 --- a/src/components/PictureWall.js +++ b/src/components/PictureWall.js @@ -3,9 +3,9 @@ import React, { useState, useEffect, useMemo } from "react"; import { useSupabase } from "@lib/supabase"; import ProgressCounter from "@components/ProgressCounter"; import Dialog from "@components/Dialog"; -import { TextField, MenuItem, Grid } from "@material-ui/core"; +import { TextField, MenuItem, Grid } from "@mui/material"; import { useCampaignConfig } from "@hooks/useConfig"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; import { decode } from "blurhash"; //import { decodeBlurHash as decode } from "fast-blurhash"; // diff --git a/src/components/ProcaStyle.js b/src/components/ProcaStyle.js index 4954e6bb9..4802929ce 100644 --- a/src/components/ProcaStyle.js +++ b/src/components/ProcaStyle.js @@ -1,13 +1,11 @@ import React from "react"; -import { - StylesProvider, - createGenerateClassName, - createTheme, - ThemeProvider, -} from "@material-ui/core/styles"; -import { makeStyles, createStyles } from "@material-ui/core"; -//import CssBaseline from '@material-ui/core/ScopedCssBaseline'; -//import ScopedCssBaseline from '@material-ui/core/ScopedCssBaseline'; +import { createTheme, ThemeProvider, StyledEngineProvider } from "@mui/material/styles"; +import StylesProvider from '@mui/styles/StylesProvider'; +import createGenerateClassName from '@mui/styles/createGenerateClassName'; +import makeStyles from '@mui/styles/makeStyles'; +import createStyles from '@mui/styles/createStyles'; +//import CssBaseline from '@mui/material/ScopedCssBaseline'; +//import ScopedCssBaseline from '@mui/material/ScopedCssBaseline'; import { useLayout } from "@hooks/useLayout"; const generateClassName = createGenerateClassName({ @@ -51,7 +49,8 @@ export default function ProcaStyle(props) { palette: { primary: { main: layout.primaryColor }, secondary: { main: layout.secondaryColor }, - type: layout.theme, + // in mui 5 type is replaced with mode + mode: layout.theme, }, typography: { fontFamily: "unset!important", @@ -63,73 +62,92 @@ export default function ProcaStyle(props) { // fontFamily: `-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif`, // fontSize: 14, }, - overrides: { + // mui 5 overriding syntax + components: { MuiSnackbar: { - root: { - zIndex: 30003, - }, + styleOverrides: { + root: { + zIndex: 30003 + } + } }, MuiContainer: { - root: { - fontFamily: "unset!important", - paddingLeft: "0!important", - paddingRight: "0!important", - backgroundColor: layout.theme === "dark" ? "#303030" : "inherit", - }, + styleOverrides: { + root: { + fontFamily: "unset!important", + paddingLeft: "0!important", + paddingRight: "0!important", + backgroundColor: layout.theme === "dark" ? "#303030" : "inherit", + }, + } }, MuiButton: { - root: { backgroundImage: "none!important" }, + styleOverrides: { + root: { backgroundImage: "none!important" } + } }, MuiIconButton: { - root: { width: "auto!important", minWidth: "auto!important" }, + styleOverrides: { + root: { width: "auto!important", minWidth: "auto!important" } + }, }, MuiDialog: { - root: { fontFamily: "unset!important" }, + styleOverrides: { + root: { fontFamily: "unset!important" } + }, }, MuiFormControl: { - root: { marginTop: "8px!important", marginBottom: "4px!important" }, + styleOverrides: { + root: { marginTop: "8px!important", marginBottom: "4px!important" } + }, }, MuiFilledInput: { - root: { - margin: "0px!important", - "& input": { - height: "1.1876em!important", //can't be on input otherwise the height of the comment multiline field can't expand - width: "100%", + styleOverrides: { + root: { + margin: "0px!important", + "& input": { + height: "1.1876em!important", //can't be on input otherwise the height of the comment multiline field can't expand + width: "100%", + }, + "& select": { + height: "1.1876em!important", + }, }, - "& select": { - height: "1.1876em!important", + input: { + paddingTop: "23px!important", + paddingBottom: "10px!important", }, - }, - input: { - paddingTop: "23px!important", - paddingBottom: "10px!important", - }, - inputMultiline: {}, - multiline: { - paddingTop: "23px!important", - paddingBottom: "6px!important", - "& textarea": { - minHeight: "23px!important", - paddingTop: "0!important", - paddingBottom: "0!important", + inputMultiline: {}, + multiline: { + paddingTop: "23px!important", + paddingBottom: "6px!important", + "& textarea": { + minHeight: "23px!important", + paddingTop: "0!important", + paddingBottom: "0!important", + }, }, - }, - marginDense: {}, + marginDense: {}, + } }, MuiInputLabel: { - root: { - marginTop: 0, + styleOverrides: { + root: { + marginTop: 0, + } }, }, MuiInputBase: { - input: { - background: "unset!important", - boxSizing: "initial!important", - boxShadow: "unset!important", - border: "unset!important", - marginBottom: "0!important", - // this is where magic happens - // '& *': { color: 'rgba(255, 255, 255, 0.7)' }, + styleOverrides: { + input: { + background: "unset!important", + boxSizing: "initial!important", + boxShadow: "unset!important", + border: "unset!important", + marginBottom: "0!important", + // this is where magic happens + // '& *': { color: 'rgba(255, 255, 255, 0.7)' }, + } }, }, }, @@ -144,7 +162,9 @@ export default function ProcaStyle(props) { return ( - {props.children} + + {props.children} + ); } diff --git a/src/components/ProgressCounter.js b/src/components/ProgressCounter.js index 15496af17..4ce9d6e1a 100644 --- a/src/components/ProgressCounter.js +++ b/src/components/ProgressCounter.js @@ -1,7 +1,7 @@ import React, { useEffect } from "react"; -import { makeStyles } from "@material-ui/core/styles"; -import { LinearProgress, Box } from "@material-ui/core"; +import makeStyles from '@mui/styles/makeStyles'; +import { LinearProgress, Box } from "@mui/material"; import useCount from "@hooks/useCount"; //3,014,823 have signed. Let’s get to 4,500,000! import { useTranslation } from "react-i18next"; diff --git a/src/components/ReadMore.js b/src/components/ReadMore.js index 74ff1d77a..ca13e7aec 100644 --- a/src/components/ReadMore.js +++ b/src/components/ReadMore.js @@ -1,13 +1,13 @@ import React, { useState } from "react"; -import { Box, Button } from "@material-ui/core"; +import { Box, Button } from "@mui/material"; import { useTranslation } from "react-i18next"; import TTag, { Markdown } from "@components/TTag"; import Dialog from "@components/Dialog"; import { truncate } from "@lib/text"; -//import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline'; -import MoreIcon from "@material-ui/icons/MoreHoriz"; +//import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; +import MoreIcon from "@mui/icons-material/MoreHoriz"; const ReadMore = (props) => { const [open, setOpen] = useState(false); diff --git a/src/components/Redirect.js b/src/components/Redirect.js index 61f31e4c0..4f282e6ce 100644 --- a/src/components/Redirect.js +++ b/src/components/Redirect.js @@ -1,7 +1,7 @@ import React from "react"; import { useCampaignConfig } from "@hooks/useConfig"; import Alert from "@components/Alert"; -import { AlertTitle } from "@material-ui/lab"; +import { AlertTitle } from '@mui/material'; const Redirect = () => { const config = useCampaignConfig(); diff --git a/src/components/Register.js b/src/components/Register.js index d9e76aaf0..550524e87 100644 --- a/src/components/Register.js +++ b/src/components/Register.js @@ -1,7 +1,7 @@ import React, { useRef, useEffect, useState } from "react"; -/*import Backdrop from '@material-ui/core/Backdrop'; -import CircularProgress from '@material-ui/core/CircularProgress'; +/*import Backdrop from '@mui/material/Backdrop'; +import CircularProgress from '@mui/material/CircularProgress'; @@ -13,16 +13,16 @@ import { setCookie } from "@lib/cookie"; import { checkMail, getDomain } from "@lib/checkMail"; import { useCampaignConfig } from "@hooks/useConfig"; import useData from "@hooks/useData"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; -import { Container, Box, Button, Snackbar, Grid } from "@material-ui/core"; +import { Container, Box, Button, Snackbar, Grid } from "@mui/material"; import TextField from "@components/TextField"; -import Alert from "@material-ui/lab/Alert"; +import Alert from '@mui/material/Alert'; import ProcaIcon from "../images/Proca"; -import SvgIcon from "@material-ui/core/SvgIcon"; -import DoneIcon from "@material-ui/icons/Done"; -import SkipNextIcon from "@material-ui/icons/SkipNext"; +import SvgIcon from "@mui/material/SvgIcon"; +import DoneIcon from "@mui/icons-material/Done"; +import SkipNextIcon from "@mui/icons-material/SkipNext"; import { useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; diff --git a/src/components/Share.js b/src/components/Share.js index 4d26f8940..cf5cd13b7 100644 --- a/src/components/Share.js +++ b/src/components/Share.js @@ -1,6 +1,6 @@ import React from "react"; -//import { Container, Grid } from "@material-ui/core"; +//import { Container, Grid } from "@mui/material"; import { Container, @@ -12,7 +12,7 @@ import { CardActions, CardContent, CardMedia, -} from "@material-ui/core"; +} from "@mui/material"; import metadataparser from "page-metadata-parser"; import uuid from "@lib/uuid"; import { addAction } from "@lib/server"; @@ -20,8 +20,8 @@ import Url from "@lib/urlparser"; import dispatch from "@lib/event"; import { useTranslation } from "react-i18next"; import { useCampaignConfig } from "@hooks/useConfig"; -import SkipNextIcon from "@material-ui/icons/SkipNext"; -import ShareIcon from "@material-ui/icons/Share"; +import SkipNextIcon from "@mui/icons-material/SkipNext"; +import ShareIcon from "@mui/icons-material/Share"; import { useIsMobile } from "@hooks/useDevice"; import useData from "@hooks/useData"; import EmailConfirm from "@components/layout/EmailConfirm"; @@ -57,7 +57,7 @@ import { EmailIcon, } from "react-share"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles((theme) => ({ media: { diff --git a/src/components/SignatureList.js b/src/components/SignatureList.js index 86554c4d9..109049af2 100644 --- a/src/components/SignatureList.js +++ b/src/components/SignatureList.js @@ -1,14 +1,14 @@ import React, { useEffect, useState } from "react"; import { getLatest } from "@lib/server.js"; -import List from "@material-ui/core/List"; -import ListItem from "@material-ui/core/ListItem"; -import ListItemText from "@material-ui/core/ListItemText"; -import ListItemAvatar from "@material-ui/core/ListItemAvatar"; -import Avatar from "@material-ui/core/Avatar"; -import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction"; +import List from "@mui/material/List"; +import ListItem from "@mui/material/ListItem"; +import ListItemText from "@mui/material/ListItemText"; +import ListItemAvatar from "@mui/material/ListItemAvatar"; +import Avatar from "@mui/material/Avatar"; +import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction"; import TwitterIcon from "../images/Twitter.js"; -import SvgIcon from "@material-ui/core/SvgIcon"; -import IconButton from "@material-ui/core/IconButton"; +import SvgIcon from "@mui/material/SvgIcon"; +import IconButton from "@mui/material/IconButton"; const ListSignature = () => { const [list, setList] = useState([]); @@ -59,7 +59,7 @@ const ListSignature = () => { edge="end" aria-label="Tweet" onClick={() => tweet(k.twitter)} - > + size="large"> diff --git a/src/components/SignatureLogo.js b/src/components/SignatureLogo.js index c7d3a00ef..e7003e34e 100644 --- a/src/components/SignatureLogo.js +++ b/src/components/SignatureLogo.js @@ -1,8 +1,8 @@ import React, { useEffect, useState } from "react"; import { getLatest } from "@lib/server.js"; -//import {GridList,GridListTile}from "@material-ui/core"; -import { makeStyles, createStyles } from "@material-ui/core/styles"; -import Avatar from "@material-ui/core/Avatar"; +import makeStyles from '@mui/styles/makeStyles'; +import createStyles from '@mui/styles/createStyles'; +import Avatar from "@mui/material/Avatar"; const useStyles = makeStyles((theme) => createStyles({ diff --git a/src/components/SignatureTable.js b/src/components/SignatureTable.js index 956584039..9d6215d4d 100644 --- a/src/components/SignatureTable.js +++ b/src/components/SignatureTable.js @@ -1,7 +1,8 @@ import React, { useEffect, useState } from "react"; import { getLatest } from "@lib/server.js"; -import { makeStyles, createStyles } from "@material-ui/core/styles"; -import Avatar from "@material-ui/core/Avatar"; +import makeStyles from '@mui/styles/makeStyles'; +import createStyles from '@mui/styles/createStyles'; +import Avatar from "@mui/material/Avatar"; const useStyles = makeStyles((theme) => createStyles({ diff --git a/src/components/Target.js b/src/components/Target.js index deaae0fd5..96525831b 100644 --- a/src/components/Target.js +++ b/src/components/Target.js @@ -1,12 +1,12 @@ import React from "react"; -import Paper from "@material-ui/core/Paper"; -import Tabs from "@material-ui/core/Tabs"; -import Tab from "@material-ui/core/Tab"; -import Box from "@material-ui/core/Box"; -import AppBar from "@material-ui/core/AppBar"; +import Paper from "@mui/material/Paper"; +import Tabs from "@mui/material/Tabs"; +import Tab from "@mui/material/Tab"; +import Box from "@mui/material/Box"; +import AppBar from "@mui/material/AppBar"; -import EmailIcon from "@material-ui/icons/Email"; -import SvgIcon from "@material-ui/core/SvgIcon"; +import EmailIcon from "@mui/icons-material/Email"; +import SvgIcon from "@mui/material/SvgIcon"; import TwitterIcon from "../images/Twitter.js"; import Email from "./Email"; diff --git a/src/components/TextField.js b/src/components/TextField.js index 65a4faf31..2acf78d96 100644 --- a/src/components/TextField.js +++ b/src/components/TextField.js @@ -1,8 +1,8 @@ import React, { useRef } from "react"; import { useTranslation } from "react-i18next"; import { useLayout } from "@hooks/useLayout"; -import { makeStyles } from "@material-ui/core/styles"; -import { TextField } from "@material-ui/core"; +import makeStyles from '@mui/styles/makeStyles'; +import { TextField } from "@mui/material"; import { Controller } from "react-hook-form"; const useStyles = makeStyles((theme) => ({ diff --git a/src/components/Twitter.js b/src/components/Twitter.js index adf908cd0..d387a7d5d 100644 --- a/src/components/Twitter.js +++ b/src/components/Twitter.js @@ -4,7 +4,7 @@ import TwitterList from "@components/twitter/List"; import { tweet } from "@components/twitter/Action"; import Dialog from "@components/Dialog"; import ProcaAlert from "@components/Alert"; -import { Alert } from "@material-ui/lab"; +import { Alert } from '@mui/material'; import Country from "@components/field/Country"; import useData from "@hooks/useData"; import Register from "@components/Register"; @@ -13,12 +13,12 @@ import { useTranslation } from "react-i18next"; import { useCampaignConfig } from "@hooks/useConfig"; import { useForm } from "react-hook-form"; import { pickOne, tokenize } from "@lib/text"; -import { Grid, Button } from "@material-ui/core"; +import { Grid, Button } from "@mui/material"; import TwitterIcon from "../images/Twitter.js"; import Again, { Next } from "@components/twitter/Again"; -import { SvgIcon } from "@material-ui/core"; -import ReloadIcon from "@material-ui/icons/Cached"; -import { makeStyles } from "@material-ui/core/styles"; +import { SvgIcon } from "@mui/material"; +import ReloadIcon from "@mui/icons-material/Cached"; +import makeStyles from '@mui/styles/makeStyles'; import { get } from "lodash"; import PreviousStepConfirm from "@components/layout/PreviousStepConfirm"; //TODO should be moved to widget and change logic diff --git a/src/components/TwoColumns.js b/src/components/TwoColumns.js index aac307f32..ae714ce77 100644 --- a/src/components/TwoColumns.js +++ b/src/components/TwoColumns.js @@ -2,7 +2,7 @@ import React, { useEffect } from "react"; import { useCampaignConfig } from "@hooks/useConfig"; import { portals } from "../actionPage"; -import Grid from "@material-ui/core/Grid"; +import Grid from "@mui/material/Grid"; const TwoColumns = (props) => { const config = useCampaignConfig(); diff --git a/src/components/Wall.js b/src/components/Wall.js index ee37153ea..a2e4f1d3c 100644 --- a/src/components/Wall.js +++ b/src/components/Wall.js @@ -3,9 +3,9 @@ import Comment from "@components/CommentWall"; import Picture from "@components/PictureWall"; import ProgressCounter from "@components/ProgressCounter"; import useData from "@hooks/useData"; -import { Paper, AppBar, Tabs, Tab, Box } from "@material-ui/core"; -import CommentIcon from "@material-ui/icons/Comment"; -import ImageIcon from "@material-ui/icons/Image"; +import { Paper, AppBar, Tabs, Tab, Box } from "@mui/material"; +import CommentIcon from "@mui/icons-material/Comment"; +import ImageIcon from "@mui/icons-material/Image"; const Wall = () => { const [value, setValue] = useState("comment"); diff --git a/src/components/WelcomeSupporter.js b/src/components/WelcomeSupporter.js index e42c8d9a3..0ad7514d0 100644 --- a/src/components/WelcomeSupporter.js +++ b/src/components/WelcomeSupporter.js @@ -2,10 +2,10 @@ import React from "react"; import useData from "@hooks/useData"; import { setCookie } from "@lib/cookie"; import { useTranslation } from "react-i18next"; -import { Button, Box } from "@material-ui/core"; -import { Alert } from "@material-ui/lab"; -import RegisteredIcon from "@material-ui/icons/HowToReg"; -// not you? import NotInterestedIcon from '@material-ui/icons/NotInterested'; +import { Button, Box } from "@mui/material"; +import { Alert } from '@mui/material'; +import RegisteredIcon from "@mui/icons-material/HowToReg"; +// not you? import NotInterestedIcon from '@mui/icons-material/NotInterested'; const WelcomeSupporter = () => { const [data, setData] = useData(); diff --git a/src/components/Widget.js b/src/components/Widget.js index be92ca5eb..f8c4150db 100644 --- a/src/components/Widget.js +++ b/src/components/Widget.js @@ -13,7 +13,7 @@ import Url, { step as paramStep } from "@lib/urlparser"; import { getCookie } from "@lib/cookie"; import { getAllData, getOverwriteLocales } from "@lib/domparser"; -//import { useTheme } from "@material-ui/core/styles"; +//import { useTheme } from "@mui/material/styles"; import { useIsMobile } from "@hooks/useLayout"; import dispatch from "@lib/event"; import { scrollTo as _scrollTo } from "@lib/scroll"; diff --git a/src/components/bespoke/Download.js b/src/components/bespoke/Download.js index 55af82b33..79e7686cd 100644 --- a/src/components/bespoke/Download.js +++ b/src/components/bespoke/Download.js @@ -1,10 +1,10 @@ import React from "react"; -import Card from "@material-ui/core/Card"; -import CardActions from "@material-ui/core/CardActions"; -import CardContent from "@material-ui/core/CardContent"; -import Button from "@material-ui/core/Button"; -import Typography from "@material-ui/core/Typography"; -import SaveIcon from "@material-ui/icons/SaveAlt"; +import Card from "@mui/material/Card"; +import CardActions from "@mui/material/CardActions"; +import CardContent from "@mui/material/CardContent"; +import Button from "@mui/material/Button"; +import Typography from "@mui/material/Typography"; +import SaveIcon from "@mui/icons-material/SaveAlt"; import { useTranslation } from "react-i18next"; import useConfig from "../../hooks/useConfig"; diff --git a/src/components/bespoke/ImageSelector.js b/src/components/bespoke/ImageSelector.js index 83cf2e78d..39e1ec6f4 100644 --- a/src/components/bespoke/ImageSelector.js +++ b/src/components/bespoke/ImageSelector.js @@ -1,12 +1,12 @@ import React, { useState, useEffect, useLayoutEffect } from "react"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; -import { Button, Card, CardActionArea } from "@material-ui/core"; -import { List, ListItem } from "@material-ui/core"; +import { Button, Card, CardActionArea } from "@mui/material"; +import { List, ListItem } from "@mui/material"; import { useCampaignConfig } from "@hooks/useConfig"; -//import UploadIcon from '@material-ui/icons/CloudUploadTwoTone'; -import UploadIcon from "@material-ui/icons/PhotoCamera"; +//import UploadIcon from '@mui/icons-material/CloudUploadTwoTone'; +import UploadIcon from "@mui/icons-material/PhotoCamera"; const useStyles = makeStyles(() => ({ overflow: { diff --git a/src/components/bespoke/Move4Nature.jsx b/src/components/bespoke/Move4Nature.jsx index e7af7efd2..9ec50224e 100644 --- a/src/components/bespoke/Move4Nature.jsx +++ b/src/components/bespoke/Move4Nature.jsx @@ -1,4 +1,4 @@ -import { Box, Fab, Grid, InputAdornment } from "@material-ui/core"; +import { Box, Fab, Grid, InputAdornment } from "@mui/material"; import TextField from "@components/TextField"; import { useTranslation } from "react-i18next"; diff --git a/src/components/bespoke/italy/Consent.js b/src/components/bespoke/italy/Consent.js index 6374a8231..c846d7230 100644 --- a/src/components/bespoke/italy/Consent.js +++ b/src/components/bespoke/italy/Consent.js @@ -1,13 +1,13 @@ import React from "react"; -import { Container, Grid } from "@material-ui/core"; +import { Container, Grid } from "@mui/material"; -import FormLabel from "@material-ui/core/FormLabel"; -import FormGroup from "@material-ui/core/FormGroup"; -import Checkbox from "@material-ui/core/Checkbox"; +import FormLabel from "@mui/material/FormLabel"; +import FormGroup from "@mui/material/FormGroup"; +import Checkbox from "@mui/material/Checkbox"; import { useTranslation } from "react-i18next"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; import { useCampaignConfig } from "@hooks/useConfig"; const useStyles = makeStyles((theme) => ({ diff --git a/src/components/bespoke/italy/Register.js b/src/components/bespoke/italy/Register.js index a3958df7a..ceae599a7 100644 --- a/src/components/bespoke/italy/Register.js +++ b/src/components/bespoke/italy/Register.js @@ -1,20 +1,20 @@ import React, { useState } from "react"; -import { Container, Grid } from "@material-ui/core"; +import { Container, Grid } from "@mui/material"; import useElementWidth from "@hooks/useElementWidth"; import Url from "@lib/urlparser.js"; import { useCampaignConfig } from "@hooks/useConfig"; import useData from "@hooks/useData"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; import { formatDate } from "@lib/date"; -import { Box, Button, Snackbar } from "@material-ui/core"; +import { Box, Button, Snackbar } from "@mui/material"; import TextField from "@components/TextField"; -import Alert from "@material-ui/lab/Alert"; +import Alert from '@mui/material/Alert'; import ProcaIcon from "@images/Proca"; -import SvgIcon from "@material-ui/core/SvgIcon"; -import DoneIcon from "@material-ui/icons/Done"; +import SvgIcon from "@mui/material/SvgIcon"; +import DoneIcon from "@mui/icons-material/Done"; import { useForm } from "react-hook-form"; import i18n from "@lib/i18n"; diff --git a/src/components/bespoke/meme/CreateMeme.js b/src/components/bespoke/meme/CreateMeme.js index 7ade26a56..173e539f7 100644 --- a/src/components/bespoke/meme/CreateMeme.js +++ b/src/components/bespoke/meme/CreateMeme.js @@ -1,10 +1,10 @@ import React, { useState, useEffect, useRef } from "react"; -import { Typography, Grid } from "@material-ui/core"; +import { Typography, Grid } from "@mui/material"; import ImageSelector from "../ImageSelector"; import { shuffle } from "@lib/array"; import TextField from "@components/TextField"; import { useTranslation } from "react-i18next"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; import { useSupabase } from "@lib/supabase"; import { useCampaignConfig } from "@hooks/useConfig"; diff --git a/src/components/bespoke/meme/Select.js b/src/components/bespoke/meme/Select.js index a18c53fbe..9e6ad388f 100644 --- a/src/components/bespoke/meme/Select.js +++ b/src/components/bespoke/meme/Select.js @@ -1,7 +1,7 @@ import React from "react"; -import { Grid, Typography } from "@material-ui/core"; +import { Grid, Typography } from "@mui/material"; import ImageSelector from "../ImageSelector"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles(() => ({ responsive: { width: "100%", diff --git a/src/components/bespoke/meme/Wall.js b/src/components/bespoke/meme/Wall.js index 6de2f6970..57df2888d 100644 --- a/src/components/bespoke/meme/Wall.js +++ b/src/components/bespoke/meme/Wall.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import Masonry from "react-masonry-component"; import { useSupabase } from "@lib/supabase"; import ProgressCounter from "@components/ProgressCounter"; -import { TextField, MenuItem } from "@material-ui/core"; +import { TextField, MenuItem } from "@mui/material"; export const localeName = { cs: "čeština", diff --git a/src/components/campax/Download.js b/src/components/campax/Download.js index 122dcc860..e6877ffbe 100644 --- a/src/components/campax/Download.js +++ b/src/components/campax/Download.js @@ -1,13 +1,13 @@ import React from "react"; -import Card from "@material-ui/core/Card"; -import CardActions from "@material-ui/core/CardActions"; -import CardContent from "@material-ui/core/CardContent"; -import Button from "@material-ui/core/Button"; -import Typography from "@material-ui/core/Typography"; -import SaveIcon from "@material-ui/icons/SaveAlt"; +import Card from "@mui/material/Card"; +import CardActions from "@mui/material/CardActions"; +import CardContent from "@mui/material/CardContent"; +import Button from "@mui/material/Button"; +import Typography from "@mui/material/Typography"; +import SaveIcon from "@mui/icons-material/SaveAlt"; import { useTranslation } from "react-i18next"; import { useData } from "@hooks/useData"; -import SkipNextIcon from "@material-ui/icons/SkipNext"; +import SkipNextIcon from "@mui/icons-material/SkipNext"; const url = (data, param) => { let postcardUrl = diff --git a/src/components/campax/Initiative.js b/src/components/campax/Initiative.js index a48d15844..e77f238b5 100644 --- a/src/components/campax/Initiative.js +++ b/src/components/campax/Initiative.js @@ -1,14 +1,14 @@ import React, { useEffect, useState } from "react"; import PropTypes from "prop-types"; -import { Container, Grid } from "@material-ui/core"; -import { makeStyles } from "@material-ui/core/styles"; +import { Container, Grid } from "@mui/material"; +import makeStyles from '@mui/styles/makeStyles'; -import { TextField as MUITextField, Button, Snackbar } from "@material-ui/core"; -import Alert from "@material-ui/lab/Alert"; +import { TextField as MUITextField, Button, Snackbar } from "@mui/material"; +import Alert from '@mui/material/Alert'; -import SendIcon from "@material-ui/icons/Send"; -import DoneIcon from "@material-ui/icons/Done"; +import SendIcon from "@mui/icons-material/Send"; +import DoneIcon from "@mui/icons-material/Done"; import { useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; diff --git a/src/components/donate/Amount.js b/src/components/donate/Amount.js index 630d54278..b68ca9c35 100644 --- a/src/components/donate/Amount.js +++ b/src/components/donate/Amount.js @@ -1,8 +1,8 @@ import React, { useState } from "react"; import { useCampaignConfig } from "@hooks/useConfig"; import useData from "@hooks/useData"; -import { makeStyles } from "@material-ui/core/styles"; -import { CardContent, Container, Grid, Typography } from "@material-ui/core"; +import makeStyles from '@mui/styles/makeStyles'; +import { CardContent, Container, Grid, Typography } from "@mui/material"; import useElementWidth from "@hooks/useElementWidth"; @@ -12,7 +12,7 @@ import Steps, { useDonateStep } from "./Stepper"; import PaymentMethodButtons from "./PaymentMethodButtons"; import Frequencies from "./buttons/FrequencyButton"; import Amounts from "./buttons/AmountButton"; -import { Alert } from "@material-ui/lab"; +import { Alert } from '@mui/material'; const useStyles = makeStyles((theme) => ({ amount: { diff --git a/src/components/donate/ChangeAmount.js b/src/components/donate/ChangeAmount.js index d89f3f0ba..be9af1b47 100644 --- a/src/components/donate/ChangeAmount.js +++ b/src/components/donate/ChangeAmount.js @@ -1,7 +1,7 @@ import React from "react"; -import { Grid, Button, Box } from "@material-ui/core"; -import BackspaceIcon from "@material-ui/icons/Backspace"; +import { Grid, Button, Box } from "@mui/material"; +import BackspaceIcon from "@mui/icons-material/Backspace"; import { useTranslation } from "react-i18next"; import { goStep } from "@hooks/useConfig"; @@ -10,7 +10,7 @@ export default function ChangeAmount() { return ( - +