Refactoring

Author: CodeDead

gatsby-browser.js

@@ -1,8 +1,15 @@
 import React from 'react';
 import MainContextProvider from './src/contexts/MainContextProvider';
+import { Helmet } from 'react-helmet';
 
 export const wrapRootElement = ({ element }) => (
   <MainContextProvider>
-    {element}
+    <>
+      <Helmet>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+      </Helmet>
+      {element}
+    </>
   </MainContextProvider>
 );

src/components/AlertDialog/index.jsx

@@ -28,9 +28,7 @@ const AlertDialog = ({
     >
       <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
       <DialogContent>
-        <DialogContentText id="alert-dialog-description">
-          {content}
-        </DialogContentText>
+        {content}
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="primary" autoFocus>

src/components/Layout/index.jsx

@@ -5,7 +5,6 @@ import Alert from '@mui/material/Alert';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
-import { Helmet } from 'react-helmet';
 import DefaultAppBar from '../DefaultAppBar';
 import Footer from '../Footer';
 import { MainContext } from '../../contexts/MainContextProvider';
@@ -58,10 +57,6 @@ const Layout = ({ children }) => {
 
   return (
     <ThemeProvider theme={theme}>
-      <Helmet>
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
-        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-      </Helmet>
       <CssBaseline />
       <DefaultAppBar title={data.site.siteMetadata.title} />
       {children}