Migration to MUI v5

package.json

@@ -6,10 +6,12 @@
   "description": "Template for building an SaaS/admin application using React + Material-UI",
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/pickers": "^3.3.10",
-    "@material-ui/system": "^4.12.1",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.4.4",
+    "@mui/lab": "^5.0.0-alpha.71",
+    "@mui/material": "^5.4.4",
+    "@mui/styles": "^5.4.4",
     "@stripe/react-stripe-js": "^1.4.1",
     "@stripe/stripe-js": "^1.16.0",
     "aos": "^2.3.4",
@@ -24,7 +26,7 @@
     "react-dropzone": "^11.3.4",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^2.1.3",
     "recharts": "^2.1.2",
     "workbox-background-sync": "^6.2.4",
     "workbox-broadcast-update": "^6.2.2",

src/App.js

@@ -1,5 +1,5 @@
 import React, { Fragment, Suspense, lazy } from "react";
-import { MuiThemeProvider, CssBaseline } from "@material-ui/core";
+import { ThemeProvider, StyledEngineProvider, CssBaseline } from "@mui/material";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import theme from "./theme";
 import GlobalStyles from "./GlobalStyles";
@@ -12,21 +12,23 @@ const LoggedOutComponent = lazy(() => import("./logged_out/components/Main"));
 function App() {
   return (
     <BrowserRouter>
-      <MuiThemeProvider theme={theme}>
-        <CssBaseline />
-        <GlobalStyles />
-        <Pace color={theme.palette.primary.light} />
-        <Suspense fallback={<Fragment />}>
-          <Switch>
-            <Route path="/c">
-              <LoggedInComponent />
-            </Route>
-            <Route>
-              <LoggedOutComponent />
-            </Route>
-          </Switch>
-        </Suspense>
-      </MuiThemeProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <GlobalStyles />
+          <Pace color={theme.palette.primary.light} />
+          <Suspense fallback={<Fragment />}>
+            <Switch>
+              <Route path="/c">
+                <LoggedInComponent />
+              </Route>
+              <Route>
+                <LoggedOutComponent />
+              </Route>
+            </Switch>
+          </Suspense>
+        </ThemeProvider>
+      </StyledEngineProvider>
     </BrowserRouter>
   );
 }

src/GlobalStyles.js

@@ -1,4 +1,4 @@
-import { withStyles } from "@material-ui/core";
+import withStyles from '@mui/styles/withStyles';
 
 const styles = theme => ({
   "@global": {
@@ -13,14 +13,14 @@ const styles = theme => ({
       color: theme.palette.common.white
     },
     ".listItemLeftPadding": {
-      paddingTop: `${theme.spacing(1.75)}px !important`,
-      paddingBottom: `${theme.spacing(1.75)}px !important`,
-      paddingLeft: `${theme.spacing(4)}px !important`,
-      [theme.breakpoints.down("sm")]: {
-        paddingLeft: `${theme.spacing(4)}px !important`
+      paddingTop: `${theme.spacing(1.75)} !important`,
+      paddingBottom: `${theme.spacing(1.75)} !important`,
+      paddingLeft: `${theme.spacing(4)} !important`,
+      [theme.breakpoints.down('md')]: {
+        paddingLeft: `${theme.spacing(4)} !important`
       },
       "@media (max-width:  420px)": {
-        paddingLeft: `${theme.spacing(1)}px !important`
+        paddingLeft: `${theme.spacing(1)} !important`
       }
     },
     ".container": {
@@ -54,39 +54,39 @@ const styles = theme => ({
       maxWidth: 1370
     },
     ".lg-mg-top": {
-      marginTop: `${theme.spacing(20)}px !important`,
-      [theme.breakpoints.down("md")]: {
-        marginTop: `${theme.spacing(18)}px !important`
+      marginTop: `${theme.spacing(20)} !important`,
+      [theme.breakpoints.down('lg')]: {
+        marginTop: `${theme.spacing(18)} !important`
       },
-      [theme.breakpoints.down("sm")]: {
-        marginTop: `${theme.spacing(16)}px !important`
+      [theme.breakpoints.down('md')]: {
+        marginTop: `${theme.spacing(16)} !important`
       },
-      [theme.breakpoints.down("xs")]: {
-        marginTop: `${theme.spacing(14)}px !important`
+      [theme.breakpoints.down('sm')]: {
+        marginTop: `${theme.spacing(14)} !important`
       }
     },
     ".lg-mg-bottom": {
-      marginBottom: `${theme.spacing(20)}px !important`,
-      [theme.breakpoints.down("md")]: {
-        marginBottom: `${theme.spacing(18)}px !important`
+      marginBottom: `${theme.spacing(20)} !important`,
+      [theme.breakpoints.down('lg')]: {
+        marginBottom: `${theme.spacing(18)} !important`
       },
-      [theme.breakpoints.down("sm")]: {
-        marginBottom: `${theme.spacing(16)}px !important`
+      [theme.breakpoints.down('md')]: {
+        marginBottom: `${theme.spacing(16)} !important`
       },
-      [theme.breakpoints.down("xs")]: {
-        marginBottom: `${theme.spacing(14)}px !important`
+      [theme.breakpoints.down('sm')]: {
+        marginBottom: `${theme.spacing(14)} !important`
       }
     },
     ".lg-p-top": {
-      paddingTop: `${theme.spacing(20)}px !important`,
-      [theme.breakpoints.down("md")]: {
-        paddingTop: `${theme.spacing(18)}px !important`
+      paddingTop: `${theme.spacing(20)} !important`,
+      [theme.breakpoints.down('lg')]: {
+        paddingTop: `${theme.spacing(18)} !important`
       },
-      [theme.breakpoints.down("sm")]: {
-        paddingTop: `${theme.spacing(16)}px !important`
+      [theme.breakpoints.down('md')]: {
+        paddingTop: `${theme.spacing(16)} !important`
       },
-      [theme.breakpoints.down("xs")]: {
-        paddingTop: `${theme.spacing(14)}px !important`
+      [theme.breakpoints.down('sm')]: {
+        paddingTop: `${theme.spacing(14)} !important`
       }
     }
   }

src/logged_in/components/Main.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useState, useEffect, Fragment } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-import { withStyles } from "@material-ui/core";
+import withStyles from '@mui/styles/withStyles';
 import Routing from "./Routing";
 import NavBar from "./navigation/NavBar";
 import ConsecutiveSnackbarMessages from "../../shared/components/ConsecutiveSnackbarMessages";
@@ -16,7 +16,7 @@ const styles = (theme) => ({
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
     }),
-    [theme.breakpoints.down("xs")]: {
+    [theme.breakpoints.down('sm')]: {
       marginLeft: 0,
     },
   },

src/logged_in/components/Routing.js

@@ -1,7 +1,7 @@
 import React, { memo } from "react";
 import PropTypes from "prop-types";
 import { Switch } from "react-router-dom";
-import { withStyles } from "@material-ui/core";
+import withStyles from '@mui/styles/withStyles';
 import Dashboard from "./dashboard/Dashboard";
 import Posts from "./posts/Posts";
 import Subscription from "./subscription/Subscription";

src/logged_in/components/dashboard/AccountInformationArea.js

@@ -9,9 +9,9 @@ import {
   ListItemIcon,
   Switch,
   Box,
-  withStyles
-} from "@material-ui/core";
-import LoopIcon from "@material-ui/icons/Loop";
+} from "@mui/material";
+import withStyles from '@mui/styles/withStyles';
+import LoopIcon from "@mui/icons-material/Loop";
 
 const styles = theme => ({
   paper: {

src/logged_in/components/dashboard/Dashboard.js

@@ -1,6 +1,6 @@
 import React, { Fragment, useEffect } from "react";
 import PropTypes from "prop-types";
-import { Typography, Box } from "@material-ui/core";
+import { Typography, Box } from "@mui/material";
 import SettingsArea from "./SettingsArea";
 import UserDataArea from "./UserDataArea";
 import AccountInformationArea from "./AccountInformationArea";

src/logged_in/components/dashboard/Settings1.js

@@ -15,13 +15,15 @@ import {
   FormControl,
   Select,
   Box,
-  withStyles,
-} from "@material-ui/core";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import withWidth from "@material-ui/core/withWidth";
+} from "@mui/material";
+import withStyles from '@mui/styles/withStyles';
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import Bordered from "../../../shared/components/Bordered";
 import ButtonCircularProgress from "../../../shared/components/ButtonCircularProgress";
 
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
+
 const styles = (theme) => ({
   numberInput: {
     width: 110,

src/logged_in/components/dashboard/Settings2.js

@@ -16,17 +16,17 @@ import {
   MenuItem,
   Checkbox,
   Box,
-  withStyles,
-} from "@material-ui/core";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+} from "@mui/material";
+import withStyles from '@mui/styles/withStyles';
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import HelpIcon from "../../../shared/components/HelpIcon";
 import Bordered from "../../../shared/components/Bordered";
 import ButtonCircularProgress from "../../../shared/components/ButtonCircularProgress";
 
 const styles = (theme) => ({
   numberInput: {
     width: 120,
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down('md')]: {
       width: 80,
     },
     "@media (max-width: 350px)": {

src/logged_in/components/dashboard/StatisticsArea.js

@@ -1,6 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Grid, withTheme } from "@material-ui/core";
+import { Grid } from "@mui/material";
+
+import withTheme from '@mui/styles/withTheme';
 
 function StatisticsArea(props) {
   const { theme, CardChart, data } = props;

src/logged_in/components/dashboard/UserDataArea.js

@@ -12,12 +12,12 @@ import {
   Accordion,
   AccordionSummary,
   Typography,
-  withStyles,
-} from "@material-ui/core";
-import PlayCirlceOutlineIcon from "@material-ui/icons/PlayCircleOutline";
-import PauseCircleOutlineIcon from "@material-ui/icons/PauseCircleOutline";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import DeleteIcon from "@material-ui/icons/Delete";
+} from "@mui/material";
+import withStyles from '@mui/styles/withStyles';
+import PlayCirlceOutlineIcon from "@mui/icons-material/PlayCircleOutline";
+import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import DeleteIcon from "@mui/icons-material/Delete";
 import EnhancedTableHead from "../../../shared/components/EnhancedTableHead";
 import stableSort from "../../../shared/functions/stableSort";
 import getSorting from "../../../shared/functions/getSorting";
@@ -241,7 +241,7 @@ function CustomTable(props) {
                                 toggleTarget(row);
                               }}
                               aria-label="Pause"
-                            >
+                              size="large">
                               <PauseCircleOutlineIcon
                                 className={classes.blackIcon}
                               />
@@ -254,7 +254,7 @@ function CustomTable(props) {
                                 toggleTarget(row);
                               }}
                               aria-label="Resume"
-                            >
+                              size="large">
                               <PlayCirlceOutlineIcon />
                             </IconButton>
                           )}
@@ -264,7 +264,7 @@ function CustomTable(props) {
                               handleDeleteTargetDialogOpen(row);
                             }}
                             aria-label="Delete"
-                          >
+                            size="large">
                             <DeleteIcon className={classes.blackIcon} />
                           </IconButton>
                         </Box>
@@ -293,7 +293,7 @@ function CustomTable(props) {
             nextIconButtonProps={{
               "aria-label": "Next Page",
             }}
-            onChangePage={handleChangePage}
+            onPageChange={handleChangePage}
             classes={{
               select: classes.dNone,
               selectIcon: classes.dNone,

src/logged_in/components/navigation/Balance.js

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { OutlinedInput, withStyles } from "@material-ui/core";
+import { OutlinedInput } from "@mui/material";
+import withStyles from '@mui/styles/withStyles';
 import currencyPrettyPrint from "../../../shared/functions/currencyPrettyPrint";
 
 const styles = {

src/logged_in/components/navigation/MessageListItem.js

@@ -5,8 +5,8 @@ import {
   ListItemAvatar,
   ListItemText,
   Avatar,
-} from "@material-ui/core";
-import ErrorIcon from "@material-ui/icons/Error";
+} from "@mui/material";
+import ErrorIcon from "@mui/icons-material/Error";
 import formatDistance from "date-fns/formatDistance";
 
 function MessageListItem(props) {

src/logged_in/components/navigation/MessagePopperButton.js

@@ -10,9 +10,9 @@ import {
   ListItemText,
   Typography,
   Box,
-  withStyles,
-} from "@material-ui/core";
-import MessageIcon from "@material-ui/icons/Message";
+} from "@mui/material";
+import withStyles from '@mui/styles/withStyles';
+import MessageIcon from "@mui/icons-material/Message";
 import MessageListItem from "./MessageListItem";
 
 const styles = (theme) => ({
@@ -25,7 +25,7 @@ const styles = (theme) => ({
     maxWidth: 350,
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(1),
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down('md')]: {
       maxWidth: 270,
     },
   },
@@ -59,7 +59,7 @@ function MessagePopperButton(props) {
         aria-label="Open Messages"
         aria-describedby={id}
         color="primary"
-      >
+        size="large">
         <MessageIcon />
       </IconButton>
       <Popover