Update MUI to version 5 WIP

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",

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

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

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();

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

src/components/Dialog.js

@@ -1,20 +1,22 @@
 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,
   DialogContent,
   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 <Slide direction="up" ref={ref} {...props} />;
@@ -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 ? (
-        <DialogTitle className={classes.dialogTitle} disableTypography>
+        <DialogTitle className={classes.dialogTitle}>
           <h2>{title}</h2>
-          <IconButton onClick={handleClose}>
+          <IconButton onClick={handleClose} size="large">
             <CloseIcon />
           </IconButton>
         </DialogTitle>

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) => {
                 <IconButton
                   aria-label="Fetch postcode details"
                   onClick={handleSearch}
-                >
+                  size="large">
                   <SearchIcon />
                 </IconButton>
               </InputAdornment>

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

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(() => ({

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();

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';
-
-<Backdrop className={classes.backdrop} open={open} onClick={handleClose}>
-        <CircularProgress color="inherit" />
-      </Backdrop>
-*/
 import { useCampaignConfig } from "@hooks/useConfig";
 import useData from "@hooks/useData";
 const Iframe = (props) => {

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

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) {
         }
       />
       <ListItemSecondaryAction>
-        <IconButton edge="end" aria-label="Tweet" onClick={tweet}>
+        <IconButton edge="end" aria-label="Tweet" onClick={tweet} size="large">
           <SvgIcon>
             <TwitterIcon />
           </SvgIcon>

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";
 //