diff --git a/src/components/presentational/Menubar.jsx b/src/components/presentational/Menubar.jsx index c81fd8d5c0823ce0b5aa98076475877b376a5a08..b53eacc2455f3c5bbdfd2809c88a789726cdd0ee 100644 --- a/src/components/presentational/Menubar.jsx +++ b/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"; @@ -11,7 +12,7 @@ import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; import DialogContentText from "@mui/material/DialogContentText"; import DialogTitle from "@mui/material/DialogTitle"; - + export default function Menubar(props) { const [showAbout, setShowAbout] = React.useState(false); @@ -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 ? ( <> diff --git a/src/components/presentational/SearchAndFilterInput.jsx b/src/components/presentational/SearchAndFilterInput.jsx index 40d6f13ce12a7b05a2a201343837f264afe7dba5..1152cc7fbbaf2a24952b6ffc2c0e5f51487ff26a 100644 --- a/src/components/presentational/SearchAndFilterInput.jsx +++ b/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> ); } diff --git a/src/styles.css b/src/styles.css index 776d8554c698bd9aa069245e1aa4b7a8a2f98244..b20c70193e578daf519d32df2f0d3635873f443f 100644 --- a/src/styles.css +++ b/src/styles.css @@ -508,6 +508,7 @@ Help Box Inside Search and Filter } .helpBoxContent, .subPopup { + color: #000; width: 300px; padding: 20px; background-color: #fff;