fix(deps): replace dependency @material-ui/icons with @mui/icons-material

components/BusinessCard.jsx

@@ -1,19 +1,19 @@
 import React from 'react';
 
 import {BusinessInfoType} from '../test-data/data-types';
-import {Card, Box, Button, withStyles} from '@material-ui/core';
+import {Card, Box, Button, styled} from '@mui/material';
 import {useState} from 'react';
 
 import BusinessCardDetail from './BusinessCardDetail';
 import BusinessCardSummary from './BusinessCardSummary';
 
-const ShowMoreButton = withStyles(({spacing}) => ({
+const ShowMoreButton = styled(Button)(({theme}) => ({
   root: {
     width: '80%',
-    marginTop: spacing(2),
-    marginBottom: spacing(2),
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
   },
-}))(Button);
+}));
 
 const BusinessCard = ({businessInfo}) => {
   const [isExpanded, setIsExpanded] = useState(false);

components/BusinessCardDetail.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {bool} from 'prop-types';
 import {BusinessInfoType} from '../test-data/data-types';
-import {Box, Typography, Collapse} from '@material-ui/core';
+import {Box, Typography, Collapse} from '@mui/material';
 
 const CardDetail = ({businessInfo, expanded}) => {
   const {tags} = businessInfo;

components/BusinessCardSummary.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {BusinessInfoType} from '../test-data/data-types';
-import {Typography} from '@material-ui/core';
+import {Typography} from '@mui/material';
 import WebsiteLink from './WebsiteLink';
 
 const CardSummary = ({businessInfo}) => {

components/BusinessGrid.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {BusinessInfoType} from '../test-data/data-types';
-import {Grid} from '@material-ui/core';
+import {Grid} from '@mui/material';
 import BusinessCard from './BusinessCard';
 
 const BusinessGrid = ({places}) => {

components/BusinessIcon.jsx

@@ -1,12 +1,12 @@
-import FastfoodIcon from '@material-ui/icons/Fastfood';
-import LocalBarIcon from '@material-ui/icons/LocalBar';
-import LocalCafeIcon from '@material-ui/icons/LocalCafe';
+import FastfoodIcon from '@mui/icons-material/Fastfood';
+import LocalBarIcon from '@mui/icons-material/LocalBar';
+import LocalCafeIcon from '@mui/icons-material/LocalCafe';
 import LocalConvenienceStoreIcon
-  from '@material-ui/icons/LocalConvenienceStore';
-import LocalDiningIcon from '@material-ui/icons/LocalDining';
-import PinDropIcon from '@material-ui/icons/PinDrop';
+  from '@mui/icons-material/LocalConvenienceStore';
+import LocalDiningIcon from '@mui/icons-material/LocalDining';
+import PinDropIcon from '@mui/icons-material/PinDrop';
 import React from 'react';
-import StoreIcon from '@material-ui/icons/Store';
+import StoreIcon from '@mui/icons-material/Store';
 
 const icons = {
   'FastFoodIcon': FastfoodIcon,

components/CenteredTypography.jsx

@@ -1,12 +1,12 @@
-import {Typography, withStyles} from '@material-ui/core';
+import {styled, Typography} from '@mui/material';
 
-const CenteredTypography = withStyles(({spacing}) => ({
+const CenteredTypography = styled(Typography)(({theme}) => ({
   root: {
     textAlign: 'center',
   },
   h2: {
-    marginTop: spacing(3),
+    marginTop: theme.spacing(3),
   },
-}))(Typography);
+}));
 
 export default CenteredTypography;

components/Footer.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import WebsiteLink from './WebsiteLink';
-import {Box, withStyles} from '@material-ui/core';
+import {Box, styled} from '@mui/material';
 import CenteredTypography from './CenteredTypography';
 import Logo from './Logo';
 
-const StyledBox = withStyles(({palette}) => ({
+const StyledBox = styled(Box)(({theme}) => ({
   root: {
-    borderTop: `1px solid ${palette.primary.main}`,
+    borderTop: `1px solid ${theme.palette.primary.main}`,
   },
-}))(Box);
+}));
 
 const Footer = () => {
   return (

components/Maps.jsx

@@ -5,25 +5,26 @@ import WebsiteLink from './WebsiteLink';
 import places from '../test-data/places';
 import {
   Typography,
-  MuiThemeProvider,
+  ThemeProvider,
   useTheme,
   Paper,
-  withStyles,
+
   CircularProgress,
   Box,
-} from '@material-ui/core'; import BusinessIcon from './BusinessIcon';
+  styled,
+} from '@mui/material'; import BusinessIcon from './BusinessIcon';
 
 const mapStyles = {
   height: '500px',
   borderRadius: '4px',
 };
 
-const StyledPaper = withStyles({
+const StyledPaper = styled(Paper)(() => ({
   root: {
     display: 'flex',
     ...mapStyles,
   },
-})(Paper);
+}));
 
 const LoadingComponent = () => (
   <StyledPaper elevation={3}>
@@ -86,7 +87,7 @@ const Maps = ({zoom, google}) => {
         <InfoWindow
           marker={activeMarker}
           visible={typeof activeMarker !== 'null'}>
-          <MuiThemeProvider theme={theme}>
+          <ThemeProvider theme={theme}>
             <div style={{
               display: 'flex',
               flexDirection: 'column',
@@ -99,7 +100,7 @@ const Maps = ({zoom, google}) => {
                 label={markerDetails.website}
                 color='primary'/>
             </div>
-          </MuiThemeProvider>
+          </ThemeProvider>
         </InfoWindow>
       </Map>
     </StyledPaper>

components/Nav.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import NextMuiLink from './NextMuiLink';
-import {Typography, AppBar, Toolbar, makeStyles} from '@material-ui/core';
+import {Typography, AppBar, Toolbar} from '@mui/material';
+import {styled} from '@mui/material/styles';
 
 const routes = [{
   name: 'Home',
@@ -10,24 +11,20 @@ const routes = [{
   path: '/about',
 }];
 
-const useStyles = makeStyles(({spacing}) => ({
-  link: {
-    marginLeft: spacing(3),
-    color: 'white',
-  },
+const RouteTypography = styled(Typography)(({theme}) => ({
+  marginLeft: theme.spacing(3),
+  color: 'white',
 }));
 
 const Nav = () => {
-  const classes = useStyles();
-
   return (
     <AppBar position='static' component='nav'>
       <Toolbar>
         {routes.map(({name, path}) => {
           return (<NextMuiLink key={name} href={path} color='secondary'>
-            <Typography className={classes.link} variant="h6">
+            <RouteTypography variant="h6">
               {name}
-            </Typography>
+            </RouteTypography>
           </NextMuiLink>);
         })}
       </Toolbar>

components/NextMuiLink.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import {useRouter} from 'next/router';
 import NextLink from 'next/link';
-import MuiLink from '@material-ui/core/Link';
+import MuiLink from '@mui/material/Link';
 
 const NextComposed = React.forwardRef(function NextComposed(props, ref) {
   const {as, href, ...other} = props;

components/SearchableTable.jsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react';
 import {useDebounce} from '../utils/hooks';
-import {TextField, Box} from '@material-ui/core';
+import {TextField, Box} from '@mui/material';
 import Fuse from 'fuse.js'; ;
 
 import BusinessGrid from './BusinessGrid';
@@ -20,29 +20,6 @@ const fuseOptions = {
   }],
 };
 
-
-// const CssTextField = withStyles({
-//   root: {
-//     '& label.Mui-focused': {
-//       color: 'white',
-//     },
-//     '& .MuiInput-underline:after': {
-//       borderBottomColor: '#4cb5ab',
-//     },
-//     '& .MuiOutlinedInput-root': {
-//       '& fieldset': {
-//         borderColor: 'white',
-//       },
-//       '&:hover fieldset': {
-//         borderColor: 'white',
-//       },
-//       '&.Mui-focused fieldset': {
-//         borderColor: '#4cb5ab',
-//       },
-//     },
-//   },
-// })(TextField);
-
 const SearchableTable = ({dataSet}) => {
   const [fuse, setFuse] = useState(null);
   const [rows, setRows] = useState(dataSet);

components/Table.jsx

@@ -8,18 +8,16 @@ import {
   TableRow,
   Paper,
   TablePagination,
-  makeStyles,
   Typography,
-} from '@material-ui/core';
+} from '@mui/material';
 
 import WebsiteLink from './WebsiteLink';
+import {styled} from '@mui/material/styles';
 
-const useStyles = makeStyles({
-  container: {
-    maxHeight: 500,
-    minHeight: 250,
-  },
-});
+const StyledTableContainer = styled(TableContainer)(() => ({
+  maxHeight: 500,
+  minHeight: 250,
+}));
 
 const PlaceTable = ({rows}) => {
   const [page, setPage] = React.useState(0);
@@ -33,11 +31,11 @@ const PlaceTable = ({rows}) => {
     setRowsPerPage(+event.target.value);
     setPage(0);
   };
-  const classes = useStyles();
+
   return (
     <Paper>
-      <TableContainer className={classes.container}>
-        <Table className={classes.table} aria-label="simple table">
+      <StyledTableContainer>
+        <Table aria-label="simple table">
           <TableHead>
             <TableRow>
               <TableCell>
@@ -72,7 +70,7 @@ const PlaceTable = ({rows}) => {
                 ))}
           </TableBody>
         </Table>
-      </TableContainer>
+      </StyledTableContainer>
       <TablePagination
         rowsPerPageOptions={[3, 5, 10]}
         component="div"

components/WebsiteLink.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import {Link} from '@material-ui/core';
-import OpenInNew from '@material-ui/icons/OpenInNew';
+import {Link} from '@mui/material';
+import OpenInNew from '@mui/icons-material/OpenInNew';
 import {logEvent, CATEGORY} from '../utils/analytics';
 
 const WebsiteLink = ({href, label, color}) => (

config/theme.js

@@ -1,8 +1,8 @@
 
-import {createMuiTheme} from '@material-ui/core/styles';
+import {createTheme} from '@mui/material';
 
 // Create a theme instance.
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: {
       main: '#4cb5ab',

package.json

@@ -11,8 +11,11 @@
     "test": "jest"
   },
   "dependencies": {
-    "@material-ui/core": "4.12.3",
-    "@material-ui/icons": "4.11.2",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "5.0.0",
+    "@mui/material": "^5.15.3",
+    "@mui/styles": "^5.15.3",
     "fuse.js": "6.5.3",
     "google-maps-react": "2.0.6",
     "next": "12.0.10",

pages/_app.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import App from 'next/app';
 import Head from 'next/head';
-import {ThemeProvider} from '@material-ui/core/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
+import {ThemeProvider} from '@mui/material';
+import CssBaseline from '@mui/material/CssBaseline';
 import theme from '../config/theme';
 import Nav from '../components/Nav';
 import Footer from '../components/Footer';

pages/_document.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Document, {Head, Html, Main, NextScript} from 'next/document';
-import {ServerStyleSheets} from '@material-ui/core/styles';
+import {ServerStyleSheets} from '@mui/styles';
 import theme from '../config/theme';
 
 /**

pages/about.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Paper, Typography, Container, Box} from '@material-ui/core';
+import {Paper, Typography, Container, Box} from '@mui/material';
 import Head from 'next/head';
 import CenteredTypography from '../components/CenteredTypography';
 

pages/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Head from 'next/head';
 import Maps from '../components/Maps';
 import SearchableTable from '../components/SearchableTable';
-import {Container, Box} from '@material-ui/core';
+import {Container, Box} from '@mui/material';
 import CenteredTypography from '../components/CenteredTypography';
 
 const Home = () => {