Move HelpBox to Menubar

src/components/presentational/Menubar.jsx

@@ -4,6 +4,7 @@ import OpenInFullIcon from "@mui/icons-material/OpenInFull";
 import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import GeoStacWhiteIcon from "../../images/logos/geostac-logo-white.svg";
+import HelpBox from "./HelpBox.jsx";
 
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
@@ -23,6 +24,16 @@ export default function Menubar(props) {
     setShowAbout(false);
   };
 
+   const handleOpenHelpBox = () => {
+    setShowHelpBox(true);
+  };
+
+  const handleCloseHelpBox = () => {
+    setShowHelpBox(false);
+  }
+
+  const [showHelpBox, setShowHelpBox] = React.useState(false);
+
   return (
     <div id="menu-bar">
       <div className="menu-item" onClick={handleOpenAbout}>
@@ -47,6 +58,13 @@ export default function Menubar(props) {
           <span className="menu-item-text">Help</span>
         </div>
       </a>
+
+      <div className="menu-item"onClick={handleOpenHelpBox}>
+        <span className="menu-item-text">Interactions</span>
+        </div>
+        
+      <HelpBox isOpen={showHelpBox} onClose={handleCloseHelpBox} />
+
       <div className="menu-item" onClick={props.handleOpenCloseHeader}>
         {props.showHeaderFooter ? (
           <>

src/components/presentational/SearchAndFilterInput.jsx

@@ -19,8 +19,6 @@ import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 
 import { Collapse, Divider } from "@mui/material";
 import ListItemText from "@mui/material/ListItemText";
- //help box
-import HelpBox from "./HelpBox.jsx";
 
 /**
  * Controls css styling for this component using js to css
@@ -87,9 +85,6 @@ export default function SearchAndFilterInput(props) {
   const [dateFromVal, setDateFromVal] = React.useState(null);     // From Date
   const [dateToVal, setDateToVal] = React.useState(null);         // To Date
 
-  // help box
-  const [showHelpBox, setShowHelpBox] = React.useState(false);
-
   //const for callback
   const {UpdateQueryableTitles} = props;
   const handleExpandFilterClick = () => {
@@ -304,15 +299,6 @@ export default function SearchAndFilterInput(props) {
 
   }, [props.targetName]);
 
-  //help box
-  const handleOpenHelpBox = () => {
-    setShowHelpBox(true);
-  };
-
-  const handleCloseHelpBox = () => {
-    setShowHelpBox(false);
-  }
-
   /* Control IDs for reference:
   sortBySelect
   sortAscCheckBox
@@ -455,8 +441,6 @@ export default function SearchAndFilterInput(props) {
           </Collapse>
         </div>
       </Collapse>
-      <button onClick={handleOpenHelpBox} style={{marginTop: "20px"}}>Help</button>
-      <HelpBox isOpen={showHelpBox} onClose={handleCloseHelpBox} />
     </div>
   );
 }

src/styles.css

@@ -508,6 +508,7 @@ Help Box Inside Search and Filter
 }
 
 .helpBoxContent, .subPopup {
+  color: #000;
   width: 300px;
   padding: 20px;
   background-color: #fff;