Added a help modal

app/pages/_app.js

@@ -1,6 +1,6 @@
-import { appWithTranslation } from 'next-i18next'
-import { createTheme, ThemeProvider } from '@mui/material/styles'
 import { CssBaseline } from '@mui/material'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
+import { appWithTranslation } from 'next-i18next'
 
 import 'reset-css'
 import '../styles/global.scss'

app/pages/home/HelpModal.js

@@ -0,0 +1,32 @@
+import { Dialog, DialogTitle, Box, Typography } from '@mui/material'
+import { useTranslation } from 'next-i18next'
+
+export default function HelpModal ({ open, onClose }) {
+  const { t } = useTranslation('home')
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+    >
+      <DialogTitle>
+        {t('help_header')}
+      </DialogTitle>
+      <Box
+        sx={{
+          p: 3
+        }}
+      >
+        <Typography gutterBottom>
+          {t('help_body_1')}
+        </Typography>
+        <Typography gutterBottom>
+          {t('help_body_2')}
+        </Typography>
+        <Typography gutterBottom>
+          {t('help_body_3')}
+        </Typography>
+      </Box>
+    </Dialog>
+  )
+}

app/pages/home/Hero.js

@@ -1,43 +1,72 @@
+import { Box, Chip } from '@mui/material'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
-import { Box } from '@mui/material'
+import { useState } from 'react'
 
 import logo from './assets/warframe_logo.png'
+import HelpModal from './HelpModal'
 
 const Hero = () => {
   const { t } = useTranslation('home')
+  const [modalOpen, setModalOpen] = useState(false)
+
+  const openModal = () => {
+    setModalOpen(true)
+  }
+
+  const closeModal = () => {
+    setModalOpen(false)
+  }
 
   return (
-    <Box
-      sx={{
-        py: 12,
-        textAlign: 'center'
-      }}
-    >
+    <>
       <Box
         sx={{
-          width: 400,
-          m: 'auto'
+          py: 12,
+          textAlign: 'center'
         }}
       >
-        <Image
-          src={logo}
-          alt='logo'
-          layout='responsive'
-          width={500}
-          height={300}
+        <Chip
+          label={t('help_header')}
+          variant='outlined'
+          onClick={openModal}
+          sx={{
+            position: 'absolute',
+            top: '10px',
+            right: '10px'
+          }}
         />
+
+        <Box
+          sx={{
+            width: 400,
+            m: 'auto'
+          }}
+        >
+          <Image
+            src={logo}
+            alt='logo'
+            layout='responsive'
+            width={500}
+            height={300}
+          />
+        </Box>
+        <Box
+          sx={{
+            width: 400,
+            m: 'auto'
+          }}
+        >
+          <h1>Market Gaps</h1>
+          <p>{t('description')}</p>
+        </Box>
       </Box>
-      <Box
-        sx={{
-          width: 400,
-          m: 'auto'
-        }}
-      >
-        <h1>Market Gaps</h1>
-        <p>{t('description')}</p>
-      </Box>
-    </Box>
+
+      <HelpModal
+        open={modalOpen}
+        onClose={closeModal}
+      />
+    </>
   )
 }
 

app/pages/home/Table.js

@@ -1,6 +1,6 @@
-import { Component } from 'react'
-import { DataGrid } from '@mui/x-data-grid'
 import { Link, Typography, Box } from '@mui/material'
+import { DataGrid } from '@mui/x-data-grid'
+import { Component } from 'react'
 import { withTranslation } from 'react-i18next'
 import Moment from 'react-moment'
 

app/pages/home/index.js

@@ -1,5 +1,5 @@
-import { Component } from 'react'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { Component } from 'react'
 import { models } from 'shared-stuff'
 
 import dbConnect from '../../lib/dbConnect'