diff --git a/client/src/components/Layout/MainLayout.scss b/client/src/components/Layout/MainLayout.scss index 0972e129..cc05fcde 100644 --- a/client/src/components/Layout/MainLayout.scss +++ b/client/src/components/Layout/MainLayout.scss @@ -33,7 +33,6 @@ body { } header { - display: flex; background: -webkit-linear-gradient( var(--header-gradient-1), var(--header-gradient-2) @@ -62,6 +61,15 @@ header { color: var(--background); } + .header-banner { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 15px; + background-color: #f0e7c0; + padding: 10px; + } + nav { flex-grow: 1; display: flex; diff --git a/client/src/components/Layout/MainLayout.tsx b/client/src/components/Layout/MainLayout.tsx index e83acd38..1217761f 100644 --- a/client/src/components/Layout/MainLayout.tsx +++ b/client/src/components/Layout/MainLayout.tsx @@ -3,13 +3,24 @@ import { useContext, useState } from 'react'; import { useNavigate } from 'react-router-dom'; // client state -import { ActionTypes } from 'stores/Global/reducers'; import { GlobalClientContext } from 'stores/Global/GlobalClient'; // style import './MainLayout.scss'; -import { Box, Button, IconButton, Menu, MenuItem } from '@mui/material'; -import HighlightOffIcon from '@mui/icons-material/HighlightOff'; +import { + Box, + Button, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + IconButton, + Link, + Menu, + MenuItem, +} from '@mui/material'; +import CloseIcon from '@mui/icons-material/Close'; import ReleaseInformation from 'components/Shared/ReleaseInformation/ReleaseInformation'; type MainLayoutProps = { @@ -18,6 +29,9 @@ type MainLayoutProps = { const Header: React.FC = () => { const [anchorEl, setAnchorEl] = useState(null); + const [hideBanner, setHideBanner] = useState( + window.localStorage.getItem('banner-closed') + ); const handleOpen = (event: any) => { setAnchorEl(event.currentTarget); @@ -27,87 +41,154 @@ const Header: React.FC = () => { setAnchorEl(null); }; + const handleCloseNotificationBanner = () => { + setHideBanner('true'); + window.localStorage.setItem('banner-closed', 'true'); + }; + const navigate = useNavigate(); return (
-
navigate('/')}> - DGIdb -
- + + {!hideBanner ? ( + + + The previous version of DGIdb can be found at{' '} + + old.dgidb.org + {' '} + until June 1st, 2024. + + + + + + ) : ( + '' + )}
); }; const Footer: React.FC = () => { - const { state, dispatch } = useContext(GlobalClientContext); - return ( ); }; +const DisclaimerPopup: React.FC = () => { + const [hideDisclaimer, setHideDisclaimer] = useState( + window.localStorage.getItem('disclaimer-closed') + ); + + const handleClose = () => { + setHideDisclaimer('true'); + window.localStorage.setItem('disclaimer-closed', 'true'); + }; + + return ( + <> + + + Disclaimer: This resource is intended for purely research + purposes. It should not be used for emergencies or medical or + professional advice. + + + + +
+ + + + { + 'A finding of a drug-gene interaction or potentially druggable category does not necessarily indicate effectiveness (or lack thereof) of any drug or treatment regimen. A finding of no interaction or no potentially druggable category does not necessarily indicate lack of effectiveness of any drug or treatment regimen. Drug-gene interactions or potentially druggable categories are not presented in ranked order of potential or predicted efficacy.' + } + + + { + "The dgidb.org website does not provide any medical or healthcare products, services or advice, and is not for medical emergencies or urgent situations. IF YOU THINK YOU MAY HAVE A MEDICAL EMERGENCY, CALL YOUR DOCTOR OR 911 IMMEDIATELY. Information contained on this website is not a substitute for a doctor's medical judgment or advice. We recommend that you discuss your specific, individual health concerns with your doctor or health care professional." + } + + + + + + +
+ + ); +}; + export const MainLayout = ({ children }: MainLayoutProps) => { const { state } = useContext(GlobalClientContext); @@ -129,6 +210,7 @@ export const MainLayout = ({ children }: MainLayoutProps) => { return (
+
{children}