Add a Help Icon to the Topbar

client/src/components/Header.jsx

@@ -6,10 +6,12 @@ import Toolbar from "@mui/material/Toolbar";
 import Button from "@mui/material/Button";
 import { Link } from 'react-router-dom';
 import TimeRangePicker from "./TimeRangePicker.jsx";
-
+import HelpDialog from "./HelpDialog.jsx";
+
 export default function Header(){
     const LayoutContext = useLayoutContext();
-
+    const [helpOpen, setHelpOpen] = React.useState(false);
+
     return(
         <AppBar position='sticky'>
             <Toolbar disableGutters>
@@ -34,6 +36,15 @@ export default function Header(){
 							Login
 						</Button>
 					</Link>
+                    <HelpDialog open={helpOpen} onClose={() => setHelpOpen(false)} />
+                    <Button onClick={() => setHelpOpen(true)} 
+                        sx={{
+                            color: 'white',
+                            bgcolor: 'black',
+                        }}
+                    >
+                        Help
+                    </Button>
                 </styles.HeaderRightBox>
             </Toolbar>
         </AppBar>

client/src/components/HelpDialog.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+
+function HelpDialog({ open, onClose }) {
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Help</DialogTitle>
+      <DialogContent>
+        hello you have reached the help pop-up
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>CLOSE</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default HelpDialog;