Move mui theme into separate file and update mui imports for v5

Author: MrDogeBro

src/pages/contact.tsx

@@ -1,31 +1,16 @@
 import Head from 'next/head';
 import React, { Component } from 'react';
 
-import { createTheme, ThemeProvider } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import twConfig from '@base/tailwind.config';
+import { ThemeProvider } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
 
 import { Navbar } from '@ui/Navbar';
 import { Footer } from '@ui/Footer';
 import { Button } from '@ui/Button';
 import { Spinner } from '@ui/Spinner';
+import { muiTheme } from '@styles/theme';
 import API from '@api';
 
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#1987bd',
-    },
-    secondary: {
-      main: '#9e1cf3',
-    },
-    type: 'dark',
-  },
-  typography: {
-    fontFamily: twConfig.theme.fontFamily.sans.join(','),
-  },
-});
-
 type Props = {};
 type States = {
   invalidFields: {
@@ -295,7 +280,7 @@ export default class Contact extends Component<Props, States> {
             id="contactForm"
             className="w-11/12 md:w-9/12 lg:w-7/12 xl:w-6/12 2xl:w-5/12 mx-auto px-3 md:px-10 flex-grow"
           >
-            <ThemeProvider theme={theme}>
+            <ThemeProvider theme={muiTheme}>
               <div className="flex justify-center py-1">
                 <TextField
                   id="contactName"

src/styles/theme.ts

@@ -0,0 +1,18 @@
+import { createTheme } from '@mui/material/styles';
+
+import twConfig from '@base/tailwind.config';
+
+export const muiTheme = createTheme({
+  palette: {
+    primary: {
+      main: '#1987bd',
+    },
+    secondary: {
+      main: '#9e1cf3',
+    },
+    mode: 'dark',
+  },
+  typography: {
+    fontFamily: twConfig.theme.extend.fontFamily.sans.join(','),
+  },
+});

src/ui/Button.tsx

@@ -5,7 +5,7 @@ import React, {
   Fragment,
 } from 'react';
 
-import ButtonBase from '@material-ui/core/ButtonBase';
+import ButtonBase from '@mui/material/ButtonBase';
 
 export type ButtonProps = DetailedHTMLProps<
   ButtonHTMLAttributes<HTMLButtonElement>,

src/ui/Navbar.tsx

@@ -1,13 +1,13 @@
 import Link from 'next/link';
 import React, { useState } from 'react';
 
-import { Drawer, IconButton } from '@material-ui/core';
-import {
-  createTheme,
-  ThemeProvider,
-  makeStyles,
-} from '@material-ui/core/styles';
-import { Menu } from '@material-ui/icons';
+import Drawer from '@mui/material/Drawer';
+import IconButton from '@mui/material/IconButton';
+import { ThemeProvider } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
+import Menu from '@mui/icons-material/Menu';
+
+import { muiTheme } from '@styles/theme';
 
 export interface NavbarProps {
   className?: string;
@@ -18,13 +18,7 @@ interface PageData {
   location: string;
 }
 
-const theme = createTheme({
-  palette: {
-    type: 'dark',
-  },
-});
-
-const styles = makeStyles((_) => ({
+const styles = makeStyles((_: any) => ({
   drawerPaper: {
     backgroundColor: '#0c0c0c',
   },
@@ -69,7 +63,7 @@ export const Navbar: React.FC<NavbarProps> = ({ className = '' }) => {
       </div>
 
       <div className="block md:hidden">
-        <ThemeProvider theme={theme}>
+        <ThemeProvider theme={muiTheme}>
           <IconButton
             aria-label="Open navigation"
             className="relative left-3"
@@ -87,6 +81,7 @@ export const Navbar: React.FC<NavbarProps> = ({ className = '' }) => {
               setDrawer(false);
             }}
             classes={{
+              //@ts-ignore
               paper: styles().drawerPaper,
             }}
           >