From 87604925b00abfe202608ed11ce97f2349c961e9 Mon Sep 17 00:00:00 2001 From: 1v4n4 Date: Mon, 12 Jun 2023 15:31:45 +0300 Subject: [PATCH 01/11] Add mui 5 --- package.json | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index f78805bb1..93fc178f3 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", From 054071dd1625a39640b667755bf83ed6bf58a675 Mon Sep 17 00:00:00 2001 From: 1v4n4 Date: Mon, 12 Jun 2023 16:26:42 +0300 Subject: [PATCH 02/11] Change imports with codmod --- src/components/Alert.js | 8 ++++---- src/components/Closed.js | 2 +- src/components/CommentWall.js | 12 ++++++------ src/components/Consent.js | 6 +++--- src/components/Dialog.js | 18 ++++++++++-------- src/components/Ep.js | 2 +- src/components/FAB.js | 6 +++--- src/components/Html.js | 4 ++-- src/components/Iframe.js | 7 ------- src/components/ImplicitConsent.js | 4 ++-- src/components/MepAction.js | 18 +++++++++--------- src/components/PictureWall.js | 4 ++-- src/components/ProgressCounter.js | 4 ++-- src/components/ReadMore.js | 6 +++--- src/components/Redirect.js | 2 +- src/components/Register.js | 16 ++++++++-------- src/components/Share.js | 10 +++++----- src/components/SignatureTable.js | 5 +++-- src/components/Target.js | 14 +++++++------- src/components/TextField.js | 4 ++-- 20 files changed, 74 insertions(+), 78 deletions(-) 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/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/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/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) => ({ From 6ea5a57cd32e7f5eb15a69d104849bfe777791dc Mon Sep 17 00:00:00 2001 From: 1v4n4 Date: Mon, 12 Jun 2023 16:44:53 +0300 Subject: [PATCH 03/11] Change imports with codemod --- src/components/Twitter.js | 10 +++++----- src/components/TwoColumns.js | 2 +- src/components/Wall.js | 6 +++--- src/components/WelcomeSupporter.js | 8 ++++---- src/components/Widget.js | 2 +- src/components/bespoke/Download.js | 12 ++++++------ src/components/bespoke/ImageSelector.js | 10 +++++----- src/components/bespoke/Move4Nature.jsx | 2 +- src/components/bespoke/meme/CreateMeme.js | 4 ++-- src/components/bespoke/meme/Select.js | 4 ++-- src/components/bespoke/meme/Wall.js | 2 +- src/components/campax/Download.js | 14 +++++++------- src/components/campax/Initiative.js | 12 ++++++------ src/components/donate/Amount.js | 6 +++--- src/components/donate/DonateButton.js | 4 ++-- src/components/donate/DonateTitle.js | 3 ++- src/components/donate/OtherAmount.js | 2 +- src/components/donate/PayPalButton.js | 4 +++- src/components/donate/Payment.js | 6 +++--- src/components/donate/PaymentMethodButtons.js | 8 ++++---- src/components/donate/Sepa.js | 8 ++++---- src/components/donate/Stepper.js | 11 +++-------- src/components/donate/Stripe.js | 8 ++++---- src/components/donate/Tab.js | 18 +++++++++--------- src/components/donate/Thanks.js | 2 +- 25 files changed, 83 insertions(+), 85 deletions(-) diff --git a/src/components/Twitter.js b/src/components/Twitter.js index 5f4d89b17..30abdcf31 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/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/DonateButton.js b/src/components/donate/DonateButton.js index 39ad17f28..1efc5e68f 100644 --- a/src/components/donate/DonateButton.js +++ b/src/components/donate/DonateButton.js @@ -1,8 +1,8 @@ // import React from "react"; import React from "react"; -import { Button, CircularProgress } from "@material-ui/core"; -import LockIcon from "@material-ui/icons/Lock"; +import { Button, CircularProgress } from "@mui/material"; +import LockIcon from "@mui/icons-material/Lock"; import { useFormatMoney } from "@hooks/useFormatting"; import { useTranslation } from "react-i18next"; diff --git a/src/components/donate/DonateTitle.js b/src/components/donate/DonateTitle.js index 8492c28be..f5c15bbe8 100644 --- a/src/components/donate/DonateTitle.js +++ b/src/components/donate/DonateTitle.js @@ -1,4 +1,5 @@ -import { CardHeader, makeStyles } from "@material-ui/core"; +import { CardHeader } from "@mui/material"; +import makeStyles from '@mui/styles/makeStyles'; import { useTranslation } from "react-i18next"; import React from "react"; diff --git a/src/components/donate/OtherAmount.js b/src/components/donate/OtherAmount.js index 5a9e50b7b..e9b05611a 100644 --- a/src/components/donate/OtherAmount.js +++ b/src/components/donate/OtherAmount.js @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { useTranslation } from "react-i18next"; -import { InputAdornment } from "@material-ui/core"; +import { InputAdornment } from "@mui/material"; import TextField from "../TextField"; import { useFormatMoney } from "@hooks/useFormatting"; diff --git a/src/components/donate/PayPalButton.js b/src/components/donate/PayPalButton.js index cac422d3f..33ca89e41 100644 --- a/src/components/donate/PayPalButton.js +++ b/src/components/donate/PayPalButton.js @@ -13,7 +13,9 @@ import { DISPATCH_ACTION, } from "@paypal/react-paypal-js"; import { addDonateContact } from "../../lib/server.js"; -import { Box, Button, CircularProgress, makeStyles } from "@material-ui/core"; +import { Box, Button, CircularProgress } from "@mui/material"; + +import makeStyles from '@mui/styles/makeStyles'; const _addContactFromPayPal = (setFormData, contact, payer) => { if (!payer) return; diff --git a/src/components/donate/Payment.js b/src/components/donate/Payment.js index dd7b6089f..13baaafc0 100644 --- a/src/components/donate/Payment.js +++ b/src/components/donate/Payment.js @@ -1,12 +1,12 @@ import React, { useState } from "react"; -import Container from "@material-ui/core/Container"; -import Alert from "@material-ui/lab/Alert"; +import Container from "@mui/material/Container"; +import Alert from '@mui/material/Alert'; import { useTranslation } from "react-i18next"; import Stripe from "./Stripe"; import Sepa from "./Sepa"; import useData from "../../hooks/useData.js"; -import { CardContent, Grid } from "@material-ui/core"; +import { CardContent, Grid } from "@mui/material"; import Steps from "./Stepper"; export default function Payment(props) { diff --git a/src/components/donate/PaymentMethodButtons.js b/src/components/donate/PaymentMethodButtons.js index 288dc9e60..e617aab8d 100644 --- a/src/components/donate/PaymentMethodButtons.js +++ b/src/components/donate/PaymentMethodButtons.js @@ -1,10 +1,10 @@ import React, { useState } from "react"; -import { Button, FormHelperText, Grid, Typography } from "@material-ui/core"; -import { makeStyles } from "@material-ui/core/styles"; +import { Button, FormHelperText, Grid, Typography } from "@mui/material"; +import makeStyles from '@mui/styles/makeStyles'; -import AccountBalanceIcon from "@material-ui/icons/AccountBalance"; -import PaymentIcon from "@material-ui/icons/Payment"; +import AccountBalanceIcon from "@mui/icons-material/AccountBalance"; +import PaymentIcon from "@mui/icons-material/Payment"; import Paypal from "./Paypal"; import ExternalPayment from "@components/donate/buttons/External"; import { useCampaignConfig } from "@hooks/useConfig"; diff --git a/src/components/donate/Sepa.js b/src/components/donate/Sepa.js index 96ff62ee3..ac39bda03 100644 --- a/src/components/donate/Sepa.js +++ b/src/components/donate/Sepa.js @@ -1,15 +1,15 @@ import React, { useEffect, useState } from "react"; -import { Container, Grid } from "@material-ui/core"; -import { Snackbar } from "@material-ui/core"; +import { Container, Grid } from "@mui/material"; +import { Snackbar } 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 TextField from "@components/TextField"; -import Alert from "@material-ui/lab/Alert"; +import Alert from '@mui/material/Alert'; import { useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; diff --git a/src/components/donate/Stepper.js b/src/components/donate/Stepper.js index 94b76e1f9..842d7f965 100644 --- a/src/components/donate/Stepper.js +++ b/src/components/donate/Stepper.js @@ -1,13 +1,8 @@ import React, { useCallback } from "react"; -import { - Box, - makeStyles, - Step, - StepIcon, - StepLabel, - Stepper, -} from "@material-ui/core"; +import { Box, Step, StepIcon, StepLabel, Stepper } from "@mui/material"; + +import makeStyles from '@mui/styles/makeStyles'; import { atom, useRecoilState } from "recoil"; import { goStep, useCampaignConfig } from "@hooks/useConfig"; diff --git a/src/components/donate/Stripe.js b/src/components/donate/Stripe.js index 86ea4152e..5b689f079 100644 --- a/src/components/donate/Stripe.js +++ b/src/components/donate/Stripe.js @@ -8,7 +8,7 @@ import { Container, FormHelperText, CircularProgress, -} from "@material-ui/core"; +} from "@mui/material"; import TextField from "@components/TextField"; // We can't use the goodies of our material ui wrapper, because it triggers too many redraw and sometimes clear the stripe field (credit cards when it shouldn't) @@ -17,13 +17,13 @@ import TextField from "@components/TextField"; import useScript from "react-script-hook"; import { useLayout } from "../../hooks/useLayout"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; import useElementWidth from "../../hooks/useElementWidth"; import { useCampaignConfig } from "../../hooks/useConfig"; import useData from "../../hooks/useData"; import { useTranslation } from "react-i18next"; -//import SendIcon from "@material-ui/icons/Send"; -import LockIcon from "@material-ui/icons/Lock"; +//import SendIcon from "@mui/icons-material/Send"; +import LockIcon from "@mui/icons-material/Lock"; import { addDonateContact, stripeCreate } from "../../lib/server.js"; import dispatch from "../../lib/event.js"; import Url from "@lib/urlparser"; diff --git a/src/components/donate/Tab.js b/src/components/donate/Tab.js index a16bd9a51..6fd79b294 100644 --- a/src/components/donate/Tab.js +++ b/src/components/donate/Tab.js @@ -1,16 +1,16 @@ import React, { useState } 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 Alert from "@material-ui/lab/Alert"; +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 Alert from '@mui/material/Alert'; import { useTranslation } from "react-i18next"; -import PaymentIcon from "@material-ui/icons/Payment"; -import AccountBalanceIcon from "@material-ui/icons/AccountBalance"; +import PaymentIcon from "@mui/icons-material/Payment"; +import AccountBalanceIcon from "@mui/icons-material/AccountBalance"; import PaypalIcon from "@images/Paypal.js"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; import Stripe from "./Stripe"; import Sepa from "./Sepa"; diff --git a/src/components/donate/Thanks.js b/src/components/donate/Thanks.js index fd2410ef1..451a1e750 100644 --- a/src/components/donate/Thanks.js +++ b/src/components/donate/Thanks.js @@ -1,4 +1,4 @@ -import { CardContent, Container, Grid, Typography } from "@material-ui/core"; +import { CardContent, Container, Grid, Typography } from "@mui/material"; import React from "react"; import { useTranslation } from "react-i18next"; From 2557d2d3a52b2455cbb3345df3db4ef5442c5a85 Mon Sep 17 00:00:00 2001 From: 1v4n4 Date: Mon, 12 Jun 2023 16:49:23 +0300 Subject: [PATCH 04/11] Change imports with codemod --- src/components/donate/buttons/AmountButton.js | 11 +++-------- src/components/donate/buttons/External.js | 4 ++-- src/components/donate/buttons/FrequencyButton.js | 5 +++-- src/components/donate/buttons/RecoilDebugButton.js | 2 +- src/components/eci/Address.js | 2 +- src/components/eci/Consent.js | 10 +++++----- src/components/eci/Country.js | 2 +- src/components/eci/Details.js | 12 ++++++------ src/components/eci/Download.js | 12 ++++++------ src/components/eci/Email.js | 4 ++-- src/components/eci/General.js | 6 +++--- src/components/eci/GeneratePaper.jsx | 2 +- src/components/eci/Id.js | 6 +++--- src/components/eci/More.js | 2 +- src/components/eci/ReadMore.js | 6 +++--- src/components/eci/Reminder.js | 10 +++++----- src/components/eci/Standalone.jsx | 2 +- src/components/eci/Stepper.js | 8 ++++---- 18 files changed, 51 insertions(+), 55 deletions(-) diff --git a/src/components/donate/buttons/AmountButton.js b/src/components/donate/buttons/AmountButton.js index e7be4afce..d7e8ddd71 100644 --- a/src/components/donate/buttons/AmountButton.js +++ b/src/components/donate/buttons/AmountButton.js @@ -1,11 +1,6 @@ -import { - Button, - FormControl, - FormGroup, - Grid, - makeStyles, - withStyles, -} from "@material-ui/core"; +import { Button, FormControl, FormGroup, Grid } from "@mui/material"; +import makeStyles from '@mui/styles/makeStyles'; +import withStyles from '@mui/styles/withStyles'; import useData from "../../../hooks/useData"; import React, { useState } from "react"; diff --git a/src/components/donate/buttons/External.js b/src/components/donate/buttons/External.js index d8f2224f7..0e9e1e031 100644 --- a/src/components/donate/buttons/External.js +++ b/src/components/donate/buttons/External.js @@ -1,9 +1,9 @@ import React from "react"; import useData from "@hooks/useData"; -import { Button, Grid } from "@material-ui/core"; +import { Button, Grid } from "@mui/material"; -//import PaymentIcon from "@material-ui/icons/Payment"; +//import PaymentIcon from "@mui/icons-material/Payment"; import DonationIcon from "@images/Donate"; import { useCampaignConfig } from "@hooks/useConfig"; import { useTranslation } from "react-i18next"; diff --git a/src/components/donate/buttons/FrequencyButton.js b/src/components/donate/buttons/FrequencyButton.js index 6678b063a..719bcc4a1 100644 --- a/src/components/donate/buttons/FrequencyButton.js +++ b/src/components/donate/buttons/FrequencyButton.js @@ -1,9 +1,10 @@ import { useData } from "../../../hooks/useData"; import React from "react"; -import { Button, Grid, Typography, withStyles } from "@material-ui/core"; +import { Button, Grid, Typography } from "@mui/material"; +import withStyles from '@mui/styles/withStyles'; import { useTranslation } from "react-i18next"; import { useCampaignConfig } from "../../../hooks/useConfig"; -import { makeStyles } from "@material-ui/styles"; +import { makeStyles } from "@mui/styles"; const StyledButton = withStyles((theme) => ({ root: { diff --git a/src/components/donate/buttons/RecoilDebugButton.js b/src/components/donate/buttons/RecoilDebugButton.js index a6936c925..de2648970 100644 --- a/src/components/donate/buttons/RecoilDebugButton.js +++ b/src/components/donate/buttons/RecoilDebugButton.js @@ -1,5 +1,5 @@ import React from "react"; -import { Button } from "@material-ui/core"; +import { Button } from "@mui/material"; import { useRecoilCallback } from "recoil"; const DebugButton = () => { diff --git a/src/components/eci/Address.js b/src/components/eci/Address.js index 53b13867a..e8dfd0e4b 100644 --- a/src/components/eci/Address.js +++ b/src/components/eci/Address.js @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; -import { Typography, Container, Grid } from "@material-ui/core"; +import { Typography, Container, Grid } from "@mui/material"; import TextField from "@components/TextField"; import Country from "@components/field/Country"; // the country component is for address, different than the country for nationality import { useTranslation } from "react-i18next"; diff --git a/src/components/eci/Consent.js b/src/components/eci/Consent.js index 30787bf3e..9ddc99f59 100644 --- a/src/components/eci/Consent.js +++ b/src/components/eci/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 EciDialog from "./Popup"; const useStyles = makeStyles((theme) => ({ diff --git a/src/components/eci/Country.js b/src/components/eci/Country.js index 5c91f8969..7816c5731 100644 --- a/src/components/eci/Country.js +++ b/src/components/eci/Country.js @@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next"; import useGeoLocation from "react-ipgeolocation"; import { useCampaignConfig } from "@hooks/useConfig"; import { useIsWindows } from "@hooks/useDevice"; -import { Container, Grid } from "@material-ui/core"; +import { Container, Grid } from "@mui/material"; const emoji = (country) => { const offset = 127397; diff --git a/src/components/eci/Details.js b/src/components/eci/Details.js index f47cad5f3..46ca56036 100644 --- a/src/components/eci/Details.js +++ b/src/components/eci/Details.js @@ -2,12 +2,12 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { useCampaignConfig } from "@hooks/useConfig"; -import List from "@material-ui/core/List"; -import ListItem from "@material-ui/core/ListItem"; -//import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from "@material-ui/core/ListItemText"; -//import Divider from '@material-ui/core/Divider'; -import FileIcon from "@material-ui/icons/Description"; +import List from "@mui/material/List"; +import ListItem from "@mui/material/ListItem"; +//import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from "@mui/material/ListItemText"; +//import Divider from '@mui/material/Divider'; +import FileIcon from "@mui/icons-material/Description"; export default function Details() { const config = useCampaignConfig(); diff --git a/src/components/eci/Download.js b/src/components/eci/Download.js index 5b12decbb..6ed626232 100644 --- a/src/components/eci/Download.js +++ b/src/components/eci/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 { useCampaignConfig } from "@hooks/useConfig"; import useData from "@hooks/useData"; diff --git a/src/components/eci/Email.js b/src/components/eci/Email.js index deda461aa..620a8e8a0 100644 --- a/src/components/eci/Email.js +++ b/src/components/eci/Email.js @@ -1,9 +1,9 @@ import React from "react"; import Register from "@components/Register"; -import { Container, CardHeader } from "@material-ui/core"; +import { Container, CardHeader } from "@mui/material"; import { useCampaignConfig } from "@hooks/useConfig"; import { useTranslation } from "react-i18next"; -import Alert from "@material-ui/lab/Alert"; +import Alert from '@mui/material/Alert'; const RegisterEmail = (props) => { const config = useCampaignConfig(); diff --git a/src/components/eci/General.js b/src/components/eci/General.js index 05b76a184..be4aae668 100644 --- a/src/components/eci/General.js +++ b/src/components/eci/General.js @@ -1,8 +1,8 @@ import React from "react"; import { isDate } from "@lib/date"; -import { Container, Grid, Typography } from "@material-ui/core"; -/*import Backdrop from '@material-ui/core/Backdrop'; -import CircularProgress from '@material-ui/core/CircularProgress'; +import { Container, Grid, Typography } from "@mui/material"; +/*import Backdrop from '@mui/material/Backdrop'; +import CircularProgress from '@mui/material/CircularProgress'; diff --git a/src/components/eci/GeneratePaper.jsx b/src/components/eci/GeneratePaper.jsx index f3dce3669..b286db4be 100644 --- a/src/components/eci/GeneratePaper.jsx +++ b/src/components/eci/GeneratePaper.jsx @@ -4,7 +4,7 @@ import Country from "@components/field/Country"; import { useTranslation } from "react-i18next"; import { useCampaignConfig } from "@hooks/useConfig"; import { useForm } from "react-hook-form"; -import { Button, SvgIcon } from "@material-ui/core"; +import { Button, SvgIcon } from "@mui/material"; import useData from "@hooks/useData"; import { addActionContact } from "@lib/server"; import { slugify } from "@lib/text"; diff --git a/src/components/eci/Id.js b/src/components/eci/Id.js index b6de52fe5..f1774efdf 100644 --- a/src/components/eci/Id.js +++ b/src/components/eci/Id.js @@ -1,8 +1,8 @@ import React, { useEffect } from "react"; -import { Typography, Container, Grid } from "@material-ui/core"; -/*import Backdrop from '@material-ui/core/Backdrop'; -import CircularProgress from '@material-ui/core/CircularProgress'; +import { Typography, Container, Grid } from "@mui/material"; +/*import Backdrop from '@mui/material/Backdrop'; +import CircularProgress from '@mui/material/CircularProgress'; diff --git a/src/components/eci/More.js b/src/components/eci/More.js index 56ad82b86..130a85b1d 100644 --- a/src/components/eci/More.js +++ b/src/components/eci/More.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; -import { Button } from "@material-ui/core"; +import { Button } from "@mui/material"; import { useTranslation } from "./hooks/useEciTranslation"; import Dialog from "@components/Dialog"; diff --git a/src/components/eci/ReadMore.js b/src/components/eci/ReadMore.js index fab0797a2..245185613 100644 --- a/src/components/eci/ReadMore.js +++ b/src/components/eci/ReadMore.js @@ -1,14 +1,14 @@ import React, { useState } from "react"; -import { Button } from "@material-ui/core"; +import { Button } from "@mui/material"; import { useTranslation } from "./hooks/useEciTranslation"; import TTag from "@components/TTag"; import Dialog from "@components/Dialog"; import Details from "./Details"; import { scrollTo } from "@lib/scroll"; -//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 = () => { const [open, setOpen] = useState(false); diff --git a/src/components/eci/Reminder.js b/src/components/eci/Reminder.js index 36098f28d..2420cf94e 100644 --- a/src/components/eci/Reminder.js +++ b/src/components/eci/Reminder.js @@ -3,17 +3,17 @@ import Url from "@lib/urlparser"; import { useCampaignConfig } from "@hooks/useConfig"; import useData from "@hooks/useData"; import EmailField from "@components/field/Email"; -import SendIcon from "@material-ui/icons/Send"; +import SendIcon from "@mui/icons-material/Send"; import Dialog from "@components/Dialog"; import { useForm } from "react-hook-form"; -import { Button, Box } from "@material-ui/core"; +import { Button, Box } from "@mui/material"; import uuid, { isSet as isUuid } from "@lib/uuid.js"; import { useTranslation } from "react-i18next"; import { addActionContact } from "@lib/server.js"; -import RemindIcon from "@material-ui/icons/AccessAlarms"; +import RemindIcon from "@mui/icons-material/AccessAlarms"; import { ConsentProcessing } from "@components/Consent"; -import MailIcon from "@material-ui/icons/MailOutline"; -import Alert from "@material-ui/lab/Alert"; +import MailIcon from "@mui/icons-material/MailOutline"; +import Alert from '@mui/material/Alert'; import dispatch from "@lib/event"; const RemindMeLater = (props) => { diff --git a/src/components/eci/Standalone.jsx b/src/components/eci/Standalone.jsx index 8a04b5354..5fbdc4a4a 100644 --- a/src/components/eci/Standalone.jsx +++ b/src/components/eci/Standalone.jsx @@ -1,7 +1,7 @@ import React from "react"; import { useIsMobile } from "@hooks/useLayout"; -import Grid from "@material-ui/core/Grid"; +import Grid from "@mui/material/Grid"; import Support from './Support'; import More from './More'; diff --git a/src/components/eci/Stepper.js b/src/components/eci/Stepper.js index e4954555f..83a2ca304 100644 --- a/src/components/eci/Stepper.js +++ b/src/components/eci/Stepper.js @@ -1,8 +1,8 @@ import React, { useState } from "react"; -import { Container, Stepper, Step, StepButton } from "@material-ui/core"; -import Box from "@material-ui/core/Box"; -import EciIcon from "@material-ui/icons/HowToVote"; -import ShareIcon from "@material-ui/icons/Share"; +import { Container, Stepper, Step, StepButton } from "@mui/material"; +import Box from "@mui/material/Box"; +import EciIcon from "@mui/icons-material/HowToVote"; +import ShareIcon from "@mui/icons-material/Share"; import Email from "./Email"; import Support from "./Support"; From 9ddea3bb34d5df017ba669dba67aed8c1e06a985 Mon Sep 17 00:00:00 2001 From: 1v4n4 Date: Mon, 12 Jun 2023 23:36:52 +0300 Subject: [PATCH 05/11] Change imports with codemod --- src/components/eci/Support.js | 8 ++++---- src/components/eci/Tab.js | 16 ++++++++-------- src/components/email/Selectable.js | 2 +- src/components/field/Address.js | 2 +- src/components/field/StickerImage.js | 14 +++++++------- src/components/field/image/Select.js | 2 +- src/components/field/image/Upload.js | 2 +- src/components/italy/Consent.js | 10 +++++----- src/components/italy/Register.js | 12 ++++++------ src/components/layout/ClosedNotice.js | 4 ++-- src/components/layout/EmailConfirm.js | 6 +++--- src/components/layout/PreviousStepConfirm.js | 4 ++-- src/components/twitter/Action.js | 16 ++++++++-------- src/components/twitter/Again.js | 6 +++--- src/components/twitter/List.js | 6 +++--- src/components/twitter/Message.js | 4 ++-- src/hooks/useLayout.js | 2 +- src/images/Donate.js | 2 +- 18 files changed, 59 insertions(+), 59 deletions(-) diff --git a/src/components/eci/Support.js b/src/components/eci/Support.js index eb18f2e91..5cb6963a0 100644 --- a/src/components/eci/Support.js +++ b/src/components/eci/Support.js @@ -12,8 +12,8 @@ import { Snackbar, Box, Container, -} from "@material-ui/core"; -import SendIcon from "@material-ui/icons/Send"; +} from "@mui/material"; +import SendIcon from "@mui/icons-material/Send"; import { useTranslation, countries } from "./hooks/useEciTranslation"; import { useForm } from "react-hook-form"; @@ -32,10 +32,10 @@ import ReadMore from "./ReadMore"; import useElementWidth from "@hooks/useElementWidth"; import useData from "@hooks/useData"; import { useCampaignConfig } from "@hooks/useConfig"; -import Alert from "@material-ui/lab/Alert"; +import Alert from '@mui/material/Alert'; import useCount from "@hooks/useCount"; import ProgressCounter from "@components/ProgressCounter"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; //const countries = eciLocale.common.country; diff --git a/src/components/eci/Tab.js b/src/components/eci/Tab.js index f9a90622e..194080dcc 100644 --- a/src/components/eci/Tab.js +++ b/src/components/eci/Tab.js @@ -1,13 +1,13 @@ import React, { useState } 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/FavoriteBorder"; -import EciIcon from "@material-ui/icons/HowToVote"; -import ShareIcon from "@material-ui/icons/Share"; +import EmailIcon from "@mui/icons-material/FavoriteBorder"; +import EciIcon from "@mui/icons-material/HowToVote"; +import ShareIcon from "@mui/icons-material/Share"; import Email from "./Email"; import Support from "./Support"; diff --git a/src/components/email/Selectable.js b/src/components/email/Selectable.js index 4e0c056e4..fc1dd6c0a 100644 --- a/src/components/email/Selectable.js +++ b/src/components/email/Selectable.js @@ -1,5 +1,5 @@ import React from "react"; -import { ListItemSecondaryAction, Checkbox } from "@material-ui/core"; +import { ListItemSecondaryAction, Checkbox } from "@mui/material"; const Selectable = (props) => { const key = props.profile.procaid; diff --git a/src/components/field/Address.js b/src/components/field/Address.js index 839fc86ad..341217008 100644 --- a/src/components/field/Address.js +++ b/src/components/field/Address.js @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; -import { Grid } from "@material-ui/core"; +import { Grid } from "@mui/material"; import TextField from "@components/TextField"; import { useTranslation } from "react-i18next"; import { useCampaignConfig } from "@hooks/useConfig"; diff --git a/src/components/field/StickerImage.js b/src/components/field/StickerImage.js index 4d5c1f438..6a9f46a64 100644 --- a/src/components/field/StickerImage.js +++ b/src/components/field/StickerImage.js @@ -13,9 +13,9 @@ import Hidden from "./Hidden"; import { IndividualSticker } from "./image/sticker"; import UploadPicture from "./image/Upload"; import SelectPicture from "./image/Select"; -import ImageIcon from "@material-ui/icons/Image"; -import PhotoCameraIcon from "@material-ui/icons/PhotoCamera"; -import PhotoLibraryIcon from "@material-ui/icons/PhotoLibrary"; +import ImageIcon from "@mui/icons-material/Image"; +import PhotoCameraIcon from "@mui/icons-material/PhotoCamera"; +import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary"; import { useCampaignConfig } from "@hooks/useConfig"; import { resize } from "@lib/image"; @@ -34,13 +34,13 @@ import { Card, CardHeader, Collapse, -} from "@material-ui/core"; -import { Alert, AlertTitle } from "@material-ui/lab"; -import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; +} from "@mui/material"; +import { Alert, AlertTitle } from '@mui/material'; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import Dialog from "@components/Dialog"; import { useTranslation } from "react-i18next"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles((theme) => ({ imgsticker: { diff --git a/src/components/field/image/Select.js b/src/components/field/image/Select.js index cf117bdfb..b8b0bbfa3 100644 --- a/src/components/field/image/Select.js +++ b/src/components/field/image/Select.js @@ -1,7 +1,7 @@ import React, { useRef } from "react"; import { useCampaignConfig } from "@hooks/useConfig"; import { resize } from "@lib/image"; -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles((theme) => ({ thumb: { diff --git a/src/components/field/image/Upload.js b/src/components/field/image/Upload.js index 129ad59c4..26cf2f8c4 100644 --- a/src/components/field/image/Upload.js +++ b/src/components/field/image/Upload.js @@ -1,5 +1,5 @@ import React, { useRef } from "react"; -import { Button } from "@material-ui/core"; +import { Button } from "@mui/material"; import { resize } from "@lib/image"; export default function UploadPicture(props) { diff --git a/src/components/italy/Consent.js b/src/components/italy/Consent.js index 68c4c49f3..899a33667 100644 --- a/src/components/italy/Consent.js +++ b/src/components/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/italy/Register.js b/src/components/italy/Register.js index a3958df7a..ceae599a7 100644 --- a/src/components/italy/Register.js +++ b/src/components/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/layout/ClosedNotice.js b/src/components/layout/ClosedNotice.js index 1ae3d0017..ca042bd09 100644 --- a/src/components/layout/ClosedNotice.js +++ b/src/components/layout/ClosedNotice.js @@ -3,8 +3,8 @@ import ReactDOM from "react-dom"; import { useCampaignConfig } from "@hooks/useConfig"; import useCount from "@hooks/useCount"; import { formatNumber } from "@components/ProgressCounter"; -import { makeStyles } from "@material-ui/core/styles"; -import Box from "@material-ui/core/Box"; +import makeStyles from '@mui/styles/makeStyles'; +import Box from "@mui/material/Box"; const useStyles = makeStyles((theme) => ({ "@global": { diff --git a/src/components/layout/EmailConfirm.js b/src/components/layout/EmailConfirm.js index 986b85a4b..0dd1728f7 100644 --- a/src/components/layout/EmailConfirm.js +++ b/src/components/layout/EmailConfirm.js @@ -1,8 +1,8 @@ import React from "react"; import { useTranslation } from "react-i18next"; -import DeleteIcon from "@material-ui/icons/Delete"; -import CheckIcon from "@material-ui/icons/CheckCircleOutline"; -import { AlertTitle } from "@material-ui/lab"; +import DeleteIcon from "@mui/icons-material/Delete"; +import CheckIcon from "@mui/icons-material/CheckCircleOutline"; +import { AlertTitle } from '@mui/material'; import Alert from "@components/Alert"; // used when returning from email confirmation (double opt-in or action confirm) const EmailConfirm = () => { diff --git a/src/components/layout/PreviousStepConfirm.js b/src/components/layout/PreviousStepConfirm.js index f6c8f4e6d..95aec0897 100644 --- a/src/components/layout/PreviousStepConfirm.js +++ b/src/components/layout/PreviousStepConfirm.js @@ -1,8 +1,8 @@ import React from "react"; import { useTranslation } from "react-i18next"; import useData from "@hooks/useData"; -import MailIcon from "@material-ui/icons/MailOutline"; -import { AlertTitle } from "@material-ui/lab"; +import MailIcon from "@mui/icons-material/MailOutline"; +import { AlertTitle } from '@mui/material'; import Alert from "@components/Alert"; const PreviousStepConfirm = (props) => { diff --git a/src/components/twitter/Action.js b/src/components/twitter/Action.js index 555b67754..7f357845e 100644 --- a/src/components/twitter/Action.js +++ b/src/components/twitter/Action.js @@ -1,11 +1,11 @@ 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 Url from "@lib/urlparser"; // TODO: use it to check tweets' length https://www.npmjs.com/package/twitter-text @@ -95,7 +95,7 @@ const TwitterAction = (profile) => { {clickable && ( - + diff --git a/src/components/twitter/Again.js b/src/components/twitter/Again.js index 28e0960a8..177badd51 100644 --- a/src/components/twitter/Again.js +++ b/src/components/twitter/Again.js @@ -1,7 +1,7 @@ import React from "react"; -import { Button } from "@material-ui/core"; -import ReloadIcon from "@material-ui/icons/Cached"; -import NextIcon from "@material-ui/icons/SkipNext"; +import { Button } from "@mui/material"; +import ReloadIcon from "@mui/icons-material/Cached"; +import NextIcon from "@mui/icons-material/SkipNext"; import { useTranslation } from "react-i18next"; import { useCampaignConfig } from "@hooks/useConfig"; diff --git a/src/components/twitter/List.js b/src/components/twitter/List.js index 3078a655b..ebe8f1ee6 100644 --- a/src/components/twitter/List.js +++ b/src/components/twitter/List.js @@ -1,10 +1,10 @@ import React from "react"; -import { makeStyles } from "@material-ui/core/styles"; -import List from "@material-ui/core/List"; +import makeStyles from '@mui/styles/makeStyles'; +import List from "@mui/material/List"; import TwitterAction from "./Action"; import { useTranslation } from "react-i18next"; import { getCountryName } from "@lib/i18n"; -import Alert from "@material-ui/lab/Alert"; +import Alert from '@mui/material/Alert'; const useStyles = makeStyles(() => ({ root: { diff --git a/src/components/twitter/Message.js b/src/components/twitter/Message.js index 4b87e2584..f949a0ffa 100644 --- a/src/components/twitter/Message.js +++ b/src/components/twitter/Message.js @@ -1,7 +1,7 @@ import React from "react"; -//import TextField from '@material-ui/core/TextField'; +//import TextField from '@mui/material/TextField'; import TextField from "@components/TextField"; -import Grid from "@material-ui/core/Grid"; +import Grid from "@mui/material/Grid"; import { useTranslation } from "react-i18next"; export default function TwitterMessage(props) { diff --git a/src/hooks/useLayout.js b/src/hooks/useLayout.js index dcb25be15..20dd82398 100644 --- a/src/hooks/useLayout.js +++ b/src/hooks/useLayout.js @@ -1,4 +1,4 @@ -import { useMediaQuery } from "@material-ui/core"; +import { useMediaQuery } from "@mui/material"; import { atom, useSetRecoilState, useRecoilValue } from "recoil"; diff --git a/src/images/Donate.js b/src/images/Donate.js index 10770a32a..d52ea5ba0 100644 --- a/src/images/Donate.js +++ b/src/images/Donate.js @@ -1,5 +1,5 @@ import * as React from "react"; -import SvgIcon from "@material-ui/core/SvgIcon"; +import SvgIcon from "@mui/material/SvgIcon"; const SvgComponent = (props) => ( From 0ddbc5cc1e26a74ab0e2b01a9da5125d8904e758 Mon Sep 17 00:00:00 2001 From: 1v4n4 Date: Tue, 13 Jun 2023 12:09:11 +0300 Subject: [PATCH 06/11] Adapt ProcaStyle to mui 5 (codemod) --- src/components/ProcaStyle.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/ProcaStyle.js b/src/components/ProcaStyle.js index 4954e6bb9..3bec4645c 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, adaptV4Theme } 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({ @@ -47,7 +45,7 @@ export default function ProcaStyle(props) { const layout = useLayout(); const theme = React.useMemo( () => - createTheme({ + createTheme(adaptV4Theme({ palette: { primary: { main: layout.primaryColor }, secondary: { main: layout.secondaryColor }, @@ -133,7 +131,7 @@ export default function ProcaStyle(props) { }, }, }, - }), + })), [layout] ); // palette.background.default @@ -144,7 +142,9 @@ export default function ProcaStyle(props) { return ( - {props.children} + + {props.children} + ); } From 5410a993f2fbc219c0bcfed7215cf63542f9f623 Mon Sep 17 00:00:00 2001 From: 1v4n4 Date: Tue, 13 Jun 2023 12:15:02 +0300 Subject: [PATCH 07/11] Change imports and set buttons with no size to large (default padding is reduced in mui5) --- src/components/Email.js | 12 ++++++------ src/components/SignatureList.js | 18 +++++++++--------- src/components/eci/Captcha.js | 20 ++++++++++---------- src/components/email/Action.js | 16 ++++++++-------- src/components/field/Camera.js | 17 +++++++---------- src/components/field/Organisation.js | 22 +++++++++++----------- src/components/field/Salutation.js | 6 +++--- 7 files changed, 54 insertions(+), 57 deletions(-) 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/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/eci/Captcha.js b/src/components/eci/Captcha.js index c64230753..737ef821a 100644 --- a/src/components/eci/Captcha.js +++ b/src/components/eci/Captcha.js @@ -1,14 +1,14 @@ import React, { useState, useEffect } from "react"; //import parse from 'html-react-parser'; -import { Grid, Box, Button } from "@material-ui/core"; +import { Grid, Box, Button } from "@mui/material"; import TextField from "@components/TextField"; import { useTranslation } from "react-i18next"; -import IconButton from "@material-ui/core/IconButton"; -import PlayIcon from "@material-ui/icons/RecordVoiceOver"; -import PlayCircleOutlineIcon from "@material-ui/icons/PlayCircleOutline"; -import InputAdornment from "@material-ui/core/InputAdornment"; -import ReplayIcon from "@material-ui/icons/Replay"; -import { makeStyles } from "@material-ui/core/styles"; +import IconButton from "@mui/material/IconButton"; +import PlayIcon from "@mui/icons-material/RecordVoiceOver"; +import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline"; +import InputAdornment from "@mui/material/InputAdornment"; +import ReplayIcon from "@mui/icons-material/Replay"; +import makeStyles from '@mui/styles/makeStyles'; import dispatch from "@lib/event"; import { useCampaignConfig } from "@hooks/useConfig"; @@ -176,7 +176,7 @@ export default function Captcha(props) { "eci:form.captcha-button-arialabel-refresh" )} onClick={() => handlePlay(config.lang)} - > + size="large"> @@ -208,7 +208,7 @@ export default function Captcha(props) { onMouseDown={handleMouseDown} onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave} - > + size="large"> @@ -227,7 +227,7 @@ export default function Captcha(props) { setAudioCaptcha(true)} - > + size="large"> diff --git a/src/components/email/Action.js b/src/components/email/Action.js index bd47c5461..0e097a60a 100644 --- a/src/components/email/Action.js +++ b/src/components/email/Action.js @@ -1,17 +1,17 @@ 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 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 IconButton from "@mui/material/IconButton"; import { useCampaignConfig } from "@hooks/useConfig"; import { useTranslation } from "react-i18next"; import Selectable from "./Selectable"; // TODO: use it to check tweets' length https://www.npmjs.com/package/twitter-text -import EmailIcon from "@material-ui/icons/Email"; +import EmailIcon from "@mui/icons-material/Email"; import { addAction } from "@lib/server"; import uuid from "@lib/uuid"; @@ -90,7 +90,7 @@ const EmailAction = ({ profile, selection, setSelection }) => { /> {config.component?.email?.split === true && ( - + diff --git a/src/components/field/Camera.js b/src/components/field/Camera.js index 9b987cfd4..5240100e7 100644 --- a/src/components/field/Camera.js +++ b/src/components/field/Camera.js @@ -1,10 +1,10 @@ import React, { useState, useEffect, useRef, useCallback } from "react"; -import { Button, IconButton, Box, LinearProgress } from "@material-ui/core"; -import { FormHelperText } from "@material-ui/core"; -import PhotoCameraIcon from "@material-ui/icons/PhotoCamera"; -import VideocamIcon from "@material-ui/icons/Videocam"; -import CameraFrontIcon from "@material-ui/icons/CameraFront"; -import CameraRearIcon from "@material-ui/icons/CameraRear"; +import { Button, IconButton, Box, LinearProgress } from "@mui/material"; +import { FormHelperText } from "@mui/material"; +import PhotoCameraIcon from "@mui/icons-material/PhotoCamera"; +import VideocamIcon from "@mui/icons-material/Videocam"; +import CameraFrontIcon from "@mui/icons-material/CameraFront"; +import CameraRearIcon from "@mui/icons-material/CameraRear"; import { useSupabase } from "@lib/supabase"; import { useCampaignConfig } from "@hooks/useConfig"; import { useTranslation } from "react-i18next"; @@ -312,10 +312,7 @@ const CameraField = (props) => { {cameras.length > 1 && ( - + {camera === "user" ? : } )} diff --git a/src/components/field/Organisation.js b/src/components/field/Organisation.js index 9ab8b74ae..9f47f3523 100644 --- a/src/components/field/Organisation.js +++ b/src/components/field/Organisation.js @@ -2,21 +2,21 @@ import React, { useState } from "react"; import { useTranslation } from "react-i18next"; //import useConfig from "@hooks/useConfig"; -import { Grid, IconButton } from "@material-ui/core"; -import { makeStyles } from "@material-ui/core/styles"; +import { Grid, IconButton } from "@mui/material"; +import makeStyles from '@mui/styles/makeStyles'; -import InputAdornment from "@material-ui/core/InputAdornment"; +import InputAdornment from "@mui/material/InputAdornment"; import TwitterIcon from "../../images/Twitter.js"; -import SvgIcon from "@material-ui/core/SvgIcon"; +import SvgIcon from "@mui/material/SvgIcon"; import TextField from "@components/TextField"; -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 SearchIcon from "@material-ui/icons/Search"; +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 SearchIcon from "@mui/icons-material/Search"; const useStyles = makeStyles((theme) => ({ profile: { @@ -127,7 +127,7 @@ const Organisation = (props) => { aria-label="Fetch details from Twitter" onClick={handleClick} onMouseDown={handleMouseDown} - > + size="large"> ) : ( diff --git a/src/components/field/Salutation.js b/src/components/field/Salutation.js index 6ff1e9bec..cf6dd3092 100644 --- a/src/components/field/Salutation.js +++ b/src/components/field/Salutation.js @@ -1,8 +1,8 @@ import React, { useEffect, useState } from "react"; -import { Grid, InputAdornment, IconButton } from "@material-ui/core"; +import { Grid, InputAdornment, IconButton } from "@mui/material"; import TextField from "@components/TextField"; import { useTranslation } from "react-i18next"; -import CancelIcon from "@material-ui/icons/Cancel"; +import CancelIcon from "@mui/icons-material/Cancel"; const Salutation = (props) => { const { t } = useTranslation(); @@ -73,7 +73,7 @@ const Salutation = (props) => { aria-label="Cancel" onClick={handleClick} edge="end" - > + size="large"> From 4a1628bb491fc854e7b0e5af8213f02c36434674 Mon Sep 17 00:00:00 2001 From: 1v4n4 Date: Tue, 13 Jun 2023 12:36:19 +0300 Subject: [PATCH 08/11] Change imports, discard other codemod changes --- src/components/SignatureLogo.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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({ From b53e37e7a0003680136d3912a4bb788ddd7c67d1 Mon Sep 17 00:00:00 2001 From: 1v4n4 Date: Tue, 13 Jun 2023 12:41:12 +0300 Subject: [PATCH 09/11] Change justify to justifYContent --- src/components/donate/ChangeAmount.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 ( - +