Skip to content

Commit 3d2082b

Browse files
CodeDeadCodeDead
committed
* Upgrade to mui v5
* Added missing dependencies * Refactoring
1 parent 13544da commit 3d2082b

File tree

47 files changed

+1019
-2465
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1019
-2465
lines changed

‎gatsby-config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ module.exports = {
1818
facebook: 'https://facebook.com/deadlinecodedead',
1919
},
2020
plugins: [
21+
'gatsby-plugin-material-ui',
2122
{
2223
resolve: 'gatsby-source-filesystem',
2324
options: {
@@ -60,7 +61,6 @@ module.exports = {
6061
'gatsby-plugin-catch-links',
6162
'gatsby-plugin-react-helmet',
6263
'gatsby-transformer-remark',
63-
'gatsby-theme-material-ui',
6464
'gatsby-plugin-sitemap',
6565
'gatsby-plugin-robots-txt',
6666
'gatsby-plugin-image',

‎package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,22 @@
1414
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
1515
},
1616
"dependencies": {
17-
"@material-ui/core": "^4.12.3",
18-
"@material-ui/icons": "^4.11.2",
19-
"@material-ui/lab": "^4.0.0-alpha.60",
17+
"@emotion/react": "^11.4.1",
18+
"@emotion/styled": "^11.3.0",
19+
"@mui/icons-material": "^5.0.1",
20+
"@mui/material": "^5.0.1",
2021
"axios": "^0.21.4",
2122
"gatsby": "^3.14.0",
2223
"gatsby-plugin-catch-links": "^3.14.0",
2324
"gatsby-plugin-google-gtag": "^3.14.0",
2425
"gatsby-plugin-image": "^1.14.0",
26+
"gatsby-plugin-material-ui": "^4.0.3",
27+
"gatsby-plugin-react-helmet": "^4.14.0",
2528
"gatsby-plugin-robots-txt": "^1.6.10",
2629
"gatsby-plugin-sharp": "^3.14.0",
2730
"gatsby-plugin-sitemap": "^4.10.0",
2831
"gatsby-remark-images": "^5.11.0",
2932
"gatsby-source-filesystem": "^3.14.0",
30-
"gatsby-theme-material-ui": "^2.0.1",
3133
"gatsby-transformer-remark": "^4.11.0",
3234
"gatsby-transformer-sharp": "^3.14.0",
3335
"react": "^17.0.2",

‎src/components/AlertDialog/index.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React, { useState } from 'react';
2-
import DialogTitle from '@material-ui/core/DialogTitle';
3-
import DialogContent from '@material-ui/core/DialogContent';
4-
import DialogContentText from '@material-ui/core/DialogContentText';
5-
import DialogActions from '@material-ui/core/DialogActions';
6-
import Button from '@material-ui/core/Button';
7-
import Dialog from '@material-ui/core/Dialog';
2+
import DialogTitle from '@mui/material/DialogTitle';
3+
import DialogContent from '@mui/material/DialogContent';
4+
import DialogContentText from '@mui/material/DialogContentText';
5+
import DialogActions from '@mui/material/DialogActions';
6+
import Button from '@mui/material/Button';
7+
import Dialog from '@mui/material/Dialog';
88

99
const AlertDialog = ({
1010
title, content, ok, onClose,

‎src/components/Application/index.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
2-
import CardActionArea from '@material-ui/core/CardActionArea';
32
import { navigate } from 'gatsby';
4-
import CardContent from '@material-ui/core/CardContent';
5-
import Typography from '@material-ui/core/Typography';
6-
import Card from '@material-ui/core/Card';
7-
import { CardMedia } from '@material-ui/core';
3+
import CardActionArea from '@mui/material/CardActionArea';
4+
import CardContent from '@mui/material/CardContent';
5+
import Typography from '@mui/material/Typography';
6+
import Card from '@mui/material/Card';
7+
import CardMedia from '@mui/material/CardMedia';
8+
import CardHeader from '@mui/material/CardHeader';
89
import { GatsbyImage } from 'gatsby-plugin-image';
9-
import CardHeader from '@material-ui/core/CardHeader';
1010

1111
const Application = ({
1212
name, description, url, image,

‎src/components/BackButton/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import Button from '@material-ui/core/Button';
3-
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
2+
import Button from '@mui/material/Button';
3+
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
44
import { navigate } from 'gatsby';
55

66
const BackButton = ({ disabled, style }) => {

‎src/components/BlogList/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import Grid from '@material-ui/core/Grid';
2+
import Grid from '@mui/material/Grid';
33
import BlogPost from '../BlogPost';
44

55
const BlogList = ({ blogPosts, style }) => (

‎src/components/BlogPost/index.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22
import { navigate } from 'gatsby';
3-
import Card from '@material-ui/core/Card';
4-
import CardActionArea from '@material-ui/core/CardActionArea';
5-
import CardHeader from '@material-ui/core/CardHeader';
6-
import CardContent from '@material-ui/core/CardContent';
7-
import Typography from '@material-ui/core/Typography';
3+
import Card from '@mui/material/Card';
4+
import CardActionArea from '@mui/material/CardActionArea';
5+
import CardHeader from '@mui/material/CardHeader';
6+
import CardContent from '@mui/material/CardContent';
7+
import Typography from '@mui/material/Typography';
88

99
const BlogPost = ({
1010
title, path, abstract, date,

‎src/components/DefaultAppBar/index.jsx‎

Lines changed: 14 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,25 @@
11
import React, { useContext, useState } from 'react';
2-
import { makeStyles } from '@material-ui/core/styles';
3-
import AppBar from '@material-ui/core/AppBar';
4-
import Toolbar from '@material-ui/core/Toolbar';
5-
import Typography from '@material-ui/core/Typography';
6-
import IconButton from '@material-ui/core/IconButton';
7-
import MenuIcon from '@material-ui/icons/Menu';
2+
import AppBar from '@mui/material/AppBar';
3+
import Toolbar from '@mui/material/Toolbar';
4+
import Typography from '@mui/material/Typography';
5+
import IconButton from '@mui/material/IconButton';
6+
import MenuIcon from '@mui/icons-material/Menu';
87
import { Link } from 'gatsby';
9-
import Brightness5Icon from '@material-ui/icons/Brightness5';
10-
import Brightness7Icon from '@material-ui/icons/Brightness7';
8+
import Brightness5Icon from '@mui/icons-material/Brightness5';
9+
import Brightness7Icon from '@mui/icons-material/Brightness7';
10+
import { useTheme } from '@mui/material/styles';
1111
import NavigationDrawer from '../NavigationDrawer';
1212
import { MainContext } from '../../contexts/MainContextProvider';
1313
import { setThemeIndex } from '../../reducers/MainReducer/Actions';
1414

15-
const useStyles = makeStyles((theme) => ({
16-
root: {
17-
flexGrow: 1,
18-
},
19-
menuButton: {
20-
marginRight: theme.spacing(2),
21-
},
22-
title: {
23-
flexGrow: 1,
24-
},
25-
}));
26-
2715
const DefaultAppBar = ({
2816
title,
2917
}) => {
3018
const [state, dispatch] = useContext(MainContext);
3119

3220
const { themeIndex } = state;
3321

34-
const classes = useStyles();
22+
const theme = useTheme();
3523
const [drawerOpen, setDrawerOpen] = useState(false);
3624

3725
/**
@@ -42,12 +30,14 @@ const DefaultAppBar = ({
4230
};
4331

4432
return (
45-
<div className={classes.root}>
33+
<div style={{ flexGrow: 1 }}>
4634
<AppBar position="static">
4735
<Toolbar>
4836
<IconButton
4937
edge="start"
50-
className={classes.menuButton}
38+
sx={{
39+
marginRight: theme.spacing(2),
40+
}}
5141
color="inherit"
5242
aria-label="menu"
5343
onClick={() => setDrawerOpen(true)}
@@ -66,7 +56,7 @@ const DefaultAppBar = ({
6656
</Typography>
6757
</Link>
6858

69-
<div className={classes.title} />
59+
<div style={{ flexGrow: 1 }} />
7060

7161
<IconButton color="inherit" onClick={changeTheme}>
7262
{themeIndex === 1 ? <Brightness5Icon /> : <Brightness7Icon />}

‎src/components/FacebookIcon/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import SvgIcon from '@material-ui/core/SvgIcon';
2+
import SvgIcon from '@mui/material/SvgIcon';
33

44
const FacebookIcon = () => (
55
<SvgIcon>

‎src/components/Footer/index.jsx‎

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
2-
import BottomNavigation from '@material-ui/core/BottomNavigation';
3-
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
4-
import { SvgIcon } from '@material-ui/core';
2+
import BottomNavigation from '@mui/material/BottomNavigation';
3+
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
4+
import Paper from '@mui/material/Paper';
5+
import SvgIcon from '@mui/material/SvgIcon';
56
import FacebookIcon from '../FacebookIcon';
67
import TwitterIcon from '../TwitterIcon';
78
import GitHubIcon from '../GithubIcon';
@@ -18,40 +19,47 @@ const Footer = ({ facebookUrl, githubUrl, twitterUrl }) => {
1819
};
1920

2021
return (
21-
<BottomNavigation
22-
showLabels
23-
style={{
24-
position: 'fixed', bottom: 0, width: '100%',
22+
<Paper
23+
sx={{
24+
position: 'fixed',
25+
bottom: 0,
26+
left: 0,
27+
right: 0,
2528
}}
29+
elevation={3}
2630
>
27-
<BottomNavigationAction
28-
icon={(
29-
<SvgIcon>
30-
<FacebookIcon />
31-
</SvgIcon>
32-
)}
33-
label="Facebook"
34-
onClick={() => openSite(facebookUrl)}
35-
/>
36-
<BottomNavigationAction
37-
icon={(
38-
<SvgIcon>
39-
<TwitterIcon />
40-
</SvgIcon>
41-
)}
42-
label="Twitter"
43-
onClick={() => openSite(twitterUrl)}
44-
/>
45-
<BottomNavigationAction
46-
icon={(
47-
<SvgIcon>
48-
<GitHubIcon />
49-
</SvgIcon>
50-
)}
51-
label="GitHub"
52-
onClick={() => openSite(githubUrl)}
53-
/>
54-
</BottomNavigation>
31+
<BottomNavigation
32+
showLabels
33+
>
34+
<BottomNavigationAction
35+
icon={(
36+
<SvgIcon>
37+
<FacebookIcon />
38+
</SvgIcon>
39+
)}
40+
label="Facebook"
41+
onClick={() => openSite(facebookUrl)}
42+
/>
43+
<BottomNavigationAction
44+
icon={(
45+
<SvgIcon>
46+
<TwitterIcon />
47+
</SvgIcon>
48+
)}
49+
label="Twitter"
50+
onClick={() => openSite(twitterUrl)}
51+
/>
52+
<BottomNavigationAction
53+
icon={(
54+
<SvgIcon>
55+
<GitHubIcon />
56+
</SvgIcon>
57+
)}
58+
label="GitHub"
59+
onClick={() => openSite(githubUrl)}
60+
/>
61+
</BottomNavigation>
62+
</Paper>
5563
);
5664
};
5765

0 commit comments

Comments
 (0)