Upgraded gatsby and mui to latest version

.eslintrc.json

@@ -36,6 +36,13 @@
         "@typescript-eslint"
     ],
     "rules": {
-        "quotes": [2, "single", "avoid-escape"]
+        "quotes": [2, "single", "avoid-escape"],
+        "react/function-component-definition": [
+            2,
+            {
+              "namedComponents": "arrow-function",
+              "unnamedComponents": "arrow-function"
+            }
+        ]
     }
 }

gatsby-browser.js

@@ -1,15 +1,13 @@
-import { createMuiTheme } from '@material-ui/core';
+import React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
-const React = require('react');
-const { MuiThemeProvider } = require('@material-ui/core/styles');
-
-const theme = createMuiTheme({});
+const theme = createTheme({});
 
 // eslint-disable-next-line import/prefer-default-export
 export const wrapRootElement = ({ element }) => (
-  <MuiThemeProvider theme={theme}>
+  <ThemeProvider theme={theme}>
     {element}
-  </MuiThemeProvider>
+  </ThemeProvider>
 );
 
 export const shouldUpdateScroll = () => {

gatsby-config.js

@@ -106,9 +106,9 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-sass',
       options: {
-        includePaths: ['node_modules', './src/scss'],
-        // eslint-disable-next-line global-require
-        implementation: require('sass'),
+        sassOptions: {
+          includePaths: ['node_modules', './src/scss'],
+        },
       },
     },
     {

package.json

@@ -5,72 +5,70 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
-    "@emotion/core": "10.1.1",
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
-    "@material-ui/core": "^4.9.7",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/styles": "^4.9.6",
-    "babel-plugin-styled-components": "^1.13.2",
-    "dotenv": "^8.2.0",
-    "emotion": "^10.0.9",
-    "emotion-server": "^10.0.9",
-    "emotion-theming": "^10.0.10",
-    "eslint-plugin-prettier": "^3.1.2",
-    "gatsby": "^2.19.12",
-    "gatsby-image": "2.11.0",
+    "@emotion/css": "^11.9.0",
+    "@emotion/react": "^11.9.3",
+    "@emotion/server": "^11.4.0",
+    "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.9.1",
+    "@mui/styles": "^5.9.1",
+    "@snyk/protect": "latest",
+    "babel-plugin-styled-components": "^2.0.7",
+    "dotenv": "^16.0.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "gatsby": "^4.19.1",
+    "gatsby-image": "3.11.0",
     "gatsby-plugin-anchor-links": "^1.2.0",
-    "gatsby-plugin-emotion": "4.5.0",
+    "gatsby-plugin-emotion": "7.19.0",
     "gatsby-plugin-google-fonts": "^1.0.1",
-    "gatsby-plugin-google-tagmanager": "^2.11.0",
-    "gatsby-plugin-hubspot": "^1.3.4",
-    "gatsby-plugin-manifest": "^2.12.1",
-    "gatsby-plugin-offline": "^2.1.1",
+    "gatsby-plugin-google-tagmanager": "^4.19.0",
+    "gatsby-plugin-hubspot": "^2.0.0",
+    "gatsby-plugin-manifest": "^4.19.0",
+    "gatsby-plugin-offline": "^5.19.0",
     "gatsby-plugin-react-css-modules-scss-support": "^0.1.0",
-    "gatsby-plugin-react-helmet": "^3.10.0",
+    "gatsby-plugin-react-helmet": "^5.19.0",
     "gatsby-plugin-react-helmet-canonical-urls": "^1.4.0",
     "gatsby-plugin-react-svg": "^3.0.0",
-    "gatsby-plugin-sass": "^2.8.0",
-    "gatsby-plugin-scroll-reveal": "0.0.6",
+    "gatsby-plugin-sass": "^5.19.0",
+    "gatsby-plugin-scroll-reveal": "0.0.7",
     "gatsby-plugin-segment-js": "^3.1.0",
-    "gatsby-plugin-sharp": "2.14.4",
-    "gatsby-plugin-styled-components": "^3.10.0",
-    "gatsby-plugin-typescript": "^2.12.1",
-    "gatsby-remark-copy-linked-files": "^2.10.0",
-    "gatsby-remark-images": "^3.11.1",
-    "gatsby-source-filesystem": "^2.11.1",
-    "gatsby-theme-material-ui": "^1.0.8",
-    "gatsby-transformer-remark": "^2.16.1",
-    "gatsby-transformer-sharp": "2.12.1",
-    "js-cookie": "^2.2.1",
+    "gatsby-plugin-sharp": "4.19.0",
+    "gatsby-plugin-styled-components": "^5.19.0",
+    "gatsby-plugin-typescript": "^4.19.0",
+    "gatsby-remark-copy-linked-files": "^5.19.0",
+    "gatsby-remark-images": "^6.19.0",
+    "gatsby-source-filesystem": "^4.19.0",
+    "gatsby-theme-material-ui": "^5.2.0",
+    "gatsby-transformer-remark": "^5.19.0",
+    "gatsby-transformer-sharp": "4.19.0",
+    "js-cookie": "^3.0.1",
     "node-fetch": "^2.6.0",
     "prism-react-renderer": "^1.0.2",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
+    "react": "^18.2.0",
     "react-body-classname": "^1.3.1",
-    "react-dom": "^16.8.6",
-    "react-helmet": "^5.2.1",
+    "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-multi-carousel": "^2.5.5",
-    "rehype-react": "^4.0.1",
+    "rehype-react": "^7.1.1",
     "sass": "^1.42.1",
     "slugify": "^1.3.6",
-    "styled-components": "^4.4.0",
-    "typescript": "^3.7.5",
-    "@snyk/protect": "latest"
+    "styled-components": "^5.3.5",
+    "typescript": "^4.7.4"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.19.0",
-    "@typescript-eslint/parser": "^2.19.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-standard": "^14.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
+    "eslint": "^8.20.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "gatsby-plugin-sitemap": "^2.12.0",
-    "prettier": "^1.17.1"
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "gatsby-plugin-sitemap": "^5.19.0",
+    "prettier": "^2.7.1"
   },
   "keywords": [
     "gatsby"

src/components/category-button/category-button.js

@@ -17,7 +17,7 @@
  */
 
 import React from 'react';
-import styles from './category-button.module.scss';
+import * as styles from './category-button.module.scss';
 import LargeIcon from '../homepage/large-icons';
 
 const CategoryButton = ({

src/components/codeRenderer.tsx

@@ -16,10 +16,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import withStyles from '@material-ui/core/styles/withStyles';
-import { Box, Tooltip } from '@material-ui/core';
-import Highlight, { defaultProps } from 'prism-react-renderer';
 import React from 'react';
+import { withStyles } from '@mui/styles';
+import { Box, Tooltip } from '@mui/material';
+import Highlight, { defaultProps } from 'prism-react-renderer';
 import copyBtn from '../images/copy-btn.svg';
 
 const CodeRenderer = withStyles((theme) => ({

src/components/contact/category-drop.js

@@ -18,7 +18,7 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 
-import styles from './category-drop.module.scss';
+import * as styles from './category-drop.module.scss';
 import dropIcon from '../../images/drop-arrow-down.svg';
 import contactFormRecipients from '../shared/contact-form-recipients';
 

src/components/cookies-banner/cookies-banner.js

@@ -18,7 +18,7 @@
 
 import React, { useState } from 'react';
 import Cookies from 'js-cookie';
-import styles from './cookies-banner.module.scss';
+import * as styles from './cookies-banner.module.scss';
 
 const CookiesBanner = () => {
   const isBrowser = typeof window !== 'undefined';

src/components/footer/footer.js

@@ -17,9 +17,8 @@
  */
 
 import React from 'react';
-import { Link } from 'gatsby';
 import PropTypes from 'prop-types';
-import styles from './footer.module.scss';
+import * as styles from './footer.module.scss';
 import cncfLogo from '../../images/footer/cncf-white.svg';
 import github from '../../images/footer/github-icon.svg';
 
@@ -35,11 +34,11 @@ const Footer = ({ whiteFooter }) => (
     <img src={cncfLogo} alt='CNCF logo' className={styles.logo} />
     <div className={styles.copyrightBar}>
       <div className={styles.verticalCenter}>
-        <Link to='https://www.linuxfoundation.org/terms' className={styles.mutedLink}>Terms of Service</Link>
+        <a href='https://www.linuxfoundation.org/terms' className={styles.mutedLink}>Terms of Service</a>
         <span>
           |
         </span>
-        <Link to='https://www.linuxfoundation.org/privacy' className={styles.mutedLink}>Privacy Policy</Link>
+        <a href='https://www.linuxfoundation.org/privacy' className={styles.mutedLink}>Privacy Policy</a>
       </div>
       <div className={styles.centerContent}>
         Copyright © 2018- The Pixie Authors. All Rights Reserved.

src/components/header/header-dropdown.js

@@ -17,7 +17,7 @@
  */
 
 import React, { useEffect, useRef, useState } from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { withStyles } from '@mui/styles';
 
 const HeaderDropdown = withStyles(() => ({
   main: {

src/components/header/header.js

@@ -21,10 +21,10 @@ import { Link } from 'gatsby';
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import BodyClassName from 'react-body-classname';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
-import CloseIcon from '@material-ui/icons/Close';
-import styles from './header.module.scss';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
+import CloseIcon from '@mui/icons-material/Close';
+import * as styles from './header.module.scss';
 
 import docs from '../../images/footer/docs-icon.svg';
 import github from '../../images/footer/github-icon.svg';
@@ -228,9 +228,9 @@ const Header = ({ whiteHeader, transparentMenu }) => {
               </li>
             </ul>
 
-            <Link to='https://www.linuxfoundation.org/terms'>Terms of Service</Link>
+            <a href='https://www.linuxfoundation.org/terms'>Terms of Service</a>
             <br />
-            <Link to='https://www.linuxfoundation.org/privacy'>Privacy Policy</Link>
+            <a href='https://www.linuxfoundation.org/privacy'>Privacy Policy</a>
           </div>
         </div>
         <IconButton onClick={() => setOpen(true)} className='hide-desktop'>

src/components/hero-image/hero-image.js

@@ -18,7 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './hero-image.module.scss';
+import * as styles from './hero-image.module.scss';
 
 const HeroImage = ({ img }) => (
   <img className={styles.heroImageWrapper} src={img} alt='' />

src/components/inline-dropdown/inline-dropdown.js

@@ -17,7 +17,7 @@
  */
 
 import React, { useEffect, useRef, useState } from 'react';
-import styles from './inline-dropdown.module.scss';
+import * as styles from './inline-dropdown.module.scss';
 
 const InlineDropdown = ({ children, title, noBorder = false }) => {
   const [isDropOpen, setIsDropOpen] = useState(false);

src/components/newsletter/newsletter.jsx

@@ -18,7 +18,7 @@
 
 import React, { useState } from 'react';
 import Cookies from 'js-cookie';
-import styles from './newsletter.module.scss';
+import * as styles from './newsletter.module.scss';
 
 const Newsletter = () => {
   const [loading, setLoading] = useState(false);

src/components/poi-tooltip/poi-tooltip.jsx

@@ -18,7 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './poi-tooltip.module.scss';
+import * as styles from './poi-tooltip.module.scss';
 
 const PoiTooltip = ({ children, top, left }) => (
   <div className={styles.main} style={{ top: `${top}%`, left: `${left}%` }}>

src/components/shared/blog-post-item/blog-post-item.js

@@ -21,7 +21,7 @@ import { Link } from 'gatsby';
 import Img from 'gatsby-image';
 
 import PropTypes from 'prop-types';
-import styles from './blog-post-item.module.scss';
+import * as styles from './blog-post-item.module.scss';
 
 const BlogPostItem = ({ post }) => {
   const {

src/components/shared/button/button.js

@@ -20,7 +20,7 @@ import React from 'react';
 import { Link } from 'gatsby';
 import PropTypes from 'prop-types';
 
-import styles from './button.module.scss';
+import * as styles from './button.module.scss';
 
 const Button = ({
   to, className, children, onClick, outline, link,

src/pages/404.js

@@ -22,7 +22,7 @@ import { Link } from 'gatsby';
 import BodyClassName from 'react-body-classname';
 import Layout from '../components/layout';
 import SEO from '../components/seo';
-import styles from '../scss/pages/not-found.module.scss';
+import * as styles from '../scss/pages/not-found.module.scss';
 import img404 from '../images/404.svg';
 
 const NotFoundPage = () => (

src/pages/community.js

@@ -20,7 +20,7 @@ import React from 'react';
 
 import Layout from '../components/layout';
 import SEO from '../components/seo';
-import styles from '../scss/pages/community.module.scss';
+import * as styles from '../scss/pages/community.module.scss';
 import pin from '../images/community/pin.svg';
 import attachment from '../images/community/attachment.svg';
 import Button from '../components/shared/button';

src/pages/enterprise.js

@@ -17,14 +17,15 @@
  */
 
 import React from 'react';
+import 'react-multi-carousel/lib/styles.css';
+
 import Layout from '../components/layout/layout';
 import SEO from '../components/seo';
-import styles from '../scss/pages/enterprise.module.scss';
+import Button from '../components/shared/button';
 import pixieLabsLogo from '../images/enterprise/pixie-labs-logo.svg';
 import moon from '../images/enterprise/moon.svg';
 import support from '../images/enterprise/support.svg';
-import 'react-multi-carousel/lib/styles.css';
-import Button from '../components/shared/button';
+import * as styles from '../scss/pages/enterprise.module.scss';
 
 const Enterprise = () => (
   <Layout transparentMenu>