Feat/upgrade mui

.github/workflows/push_docker_images.yml

@@ -82,4 +82,3 @@ jobs:
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
-

frontend/components/Footer.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Image from 'next/image'
-import { Typography, Grid } from '@material-ui/core'
+import { Typography, Grid } from '@mui/material'
 import Link from '../components/Link'
 import useStyles from '../styles/components/Footer'
 

frontend/components/Header.js

@@ -8,8 +8,8 @@ import {
   ListItem,
   Grid,
   Link as MuiLink
-} from '@material-ui/core'
-import { YouTube, Twitter, GitHub } from '@material-ui/icons'
+} from '@mui/material'
+import { YouTube, Twitter, GitHub } from '@mui/icons-material'
 import Link from './Link'
 import useStyles from '../styles/components/Header'
 

frontend/components/Link.js

@@ -3,8 +3,8 @@ 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 { styled } from '@material-ui/core/styles'
+import MuiLink from '@mui/material/Link'
+import { styled } from '@mui/styles'
 
 // Add support for the sx prop for consistency with the other branches.
 const Anchor = styled('a')({})

frontend/package.json

@@ -8,9 +8,13 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/lab": "^5.0.0-alpha.79",
+    "@mui/material": "^5.6.3",
+    "@mui/styles": "^5.6.2",
+    "@mui/x-data-grid": "^5.10.0",
     "axios": "^0.26.1",
     "clsx": "^1.1.1",
     "next": "^12.1.5",

frontend/pages/_app.js

@@ -2,8 +2,8 @@ import { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
-import { ThemeProvider } from '@material-ui/core/styles'
-import CssBaseline from '@material-ui/core/CssBaseline'
+import { ThemeProvider } from '@mui/styles'
+import CssBaseline from '@mui/material/CssBaseline'
 import { AuthProvider } from '../contexts/AuthContext'
 import light from '../themes/light'
 import Header from '../components/Header'

frontend/pages/_document.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Document, { Html, Head, Main, NextScript } from 'next/document'
-import { ServerStyleSheets } from '@material-ui/core/styles'
+import { ServerStyleSheets } from '@mui/styles'
 
 export default class MyDocument extends Document {
   render() {

frontend/pages/about.js

@@ -1,6 +1,7 @@
-import { Container, Grid, Typography } from '@material-ui/core'
+import { Container, Grid, Typography } from '@mui/material'
 
 export default function About() {
+
   return (
     <Container>
       <Grid container spacing={2}>

frontend/pages/contact.js

@@ -1,4 +1,4 @@
-import { Container, Grid, Typography } from '@material-ui/core'
+import { Container, Grid, Typography } from '@mui/material'
 
 export default function Contact() {
   return (

frontend/pages/index.js

@@ -5,7 +5,7 @@ import {
   CardActionArea,
   CardMedia,
   Typography
-} from '@material-ui/core'
+} from '@mui/material'
 import Link from '../components/Link'
 import useStyles from '../styles/pages/index'
 

frontend/pages/login.js

@@ -7,9 +7,9 @@ import {
   Typography,
   Container,
   Snackbar
-} from '@material-ui/core'
+} from '@mui/material'
 import Alert from '@material-ui/lab/Alert'
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined'
 import Link from '../components/Link'
 import useStyles from '../styles/pages/login'
 import { AuthContext } from '../contexts/AuthContext'

frontend/pages/tutorials.js

@@ -1,4 +1,4 @@
-import { Container, Grid, Typography } from '@material-ui/core'
+import { Container, Grid, Typography } from '@mui/material'
 
 export default function Tutorials() {
   return (

frontend/pages/upload.js

@@ -6,7 +6,7 @@ import {
   TextField,
   MenuItem,
   Button
-} from '@material-ui/core'
+} from '@mui/material'
 import { parseCookies } from 'nookies'
 import useStyles from '../styles/pages/upload'
 

frontend/styles/components/Footer.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles(theme => ({
   root: {

frontend/styles/components/Header.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles(theme => ({
   list: {

frontend/styles/pages/index.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles(theme => ({
   root: {

frontend/styles/pages/login.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles(theme => ({
   container: {

frontend/styles/pages/upload.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles(theme => ({
   gridContainer: {

frontend/themes/light.js

@@ -1,4 +1,4 @@
-import { createTheme } from '@material-ui/core/styles'
+import { createTheme } from '@mui/material/styles';
 
 const light = createTheme({
   palette: {