Dev

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;

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 (
     <header>
-      <div className="header-logo" onClick={() => navigate('/')}>
-        DGIdb
-      </div>
-      <nav>
-        <ul>
-          <li>
-            <Button className="browse-button" onClick={handleOpen}>
-              Browse
-            </Button>
-            <Menu
-              id="simple-menu"
-              anchorEl={anchorEl}
-              open={Boolean(anchorEl)}
-              onClose={handleClose}
-              anchorOrigin={{
-                vertical: 'bottom',
-                horizontal: 'center',
-              }}
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'center',
-              }}
-            >
-              <MenuItem
-                onClick={() => {
-                  handleClose();
-                  navigate('/browse/categories');
+      <Box display="flex">
+        <div className="header-logo" onClick={() => navigate('/')}>
+          DGIdb
+        </div>
+        <nav>
+          <ul>
+            <li>
+              <Button className="browse-button" onClick={handleOpen}>
+                Browse
+              </Button>
+              <Menu
+                id="simple-menu"
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleClose}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'center',
                 }}
-              >
-                Categories
-              </MenuItem>
-              <MenuItem
-                onClick={() => {
-                  handleClose();
-                  navigate('/browse/sources');
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'center',
                 }}
               >
-                Sources
-              </MenuItem>
-            </Menu>
-          </li>
-          <li onClick={() => navigate('/about')}>About</li>
-          <li onClick={() => navigate('/downloads')}>Downloads</li>
-        </ul>
-      </nav>
+                <MenuItem
+                  onClick={() => {
+                    handleClose();
+                    navigate('/browse/categories');
+                  }}
+                >
+                  Categories
+                </MenuItem>
+                <MenuItem
+                  onClick={() => {
+                    handleClose();
+                    navigate('/browse/sources');
+                  }}
+                >
+                  Sources
+                </MenuItem>
+              </Menu>
+            </li>
+            <li onClick={() => navigate('/about')}>About</li>
+            <li onClick={() => navigate('/downloads')}>Downloads</li>
+          </ul>
+        </nav>
+      </Box>
+      {!hideBanner ? (
+        <Box className="header-banner">
+          <Box>
+            The previous version of DGIdb can be found at{' '}
+            <Link href="https://old.dgidb.org" color="inherit">
+              old.dgidb.org
+            </Link>{' '}
+            until June 1st, 2024.
+          </Box>
+          <IconButton
+            aria-label="close"
+            size="small"
+            onClick={handleCloseNotificationBanner}
+          >
+            <CloseIcon fontSize="inherit" />
+          </IconButton>
+        </Box>
+      ) : (
+        ''
+      )}
     </header>
   );
 };
 
 const Footer: React.FC = () => {
-  const { state, dispatch } = useContext(GlobalClientContext);
-
   return (
     <footer>
-      {state.themeSettings.showDisclaimer && (
-        <div>
-          Disclaimer: This resource is intended for purely research purposes. It
-          should not be used for emergencies or medical or professional advice.
-          <IconButton
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              marginLeft: '10px',
-              fontSize: '25px',
-            }}
-            onClick={() => dispatch({ type: ActionTypes.HideDisclaimer })}
-          >
-            <HighlightOffIcon />
-          </IconButton>
-        </div>
-      )}
       <ReleaseInformation />
     </footer>
   );
 };
 
+const DisclaimerPopup: React.FC = () => {
+  const [hideDisclaimer, setHideDisclaimer] = useState(
+    window.localStorage.getItem('disclaimer-closed')
+  );
+
+  const handleClose = () => {
+    setHideDisclaimer('true');
+    window.localStorage.setItem('disclaimer-closed', 'true');
+  };
+
+  return (
+    <>
+      <Dialog
+        open={!(hideDisclaimer === 'true')}
+        onClose={handleClose}
+        aria-labelledby="disclaimer-dialog-title"
+        aria-describedby="disclaimer-dialog-description"
+      >
+        <DialogTitle id="disclaimer-dialog-title">
+          <b>Disclaimer:</b> This resource is intended for purely research
+          purposes. It should not be used for emergencies or medical or
+          professional advice.
+        </DialogTitle>
+        <IconButton
+          aria-label="close"
+          size="small"
+          onClick={handleClose}
+          sx={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+          }}
+        >
+          <CloseIcon fontSize="inherit" />
+        </IconButton>
+        <hr />
+        <DialogContent>
+          <DialogContentText id="disclaimer-dialog-description">
+            <Box mb={2}>
+              {
+                '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.'
+              }
+            </Box>
+            <Box>
+              {
+                "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."
+              }
+            </Box>
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="secondary">
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
 export const MainLayout = ({ children }: MainLayoutProps) => {
   const { state } = useContext(GlobalClientContext);
 
@@ -129,6 +210,7 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
 
   return (
     <div className={'layout-container'} data-theme={theme}>
+      <DisclaimerPopup />
       <Header />
       <div className="content-container">
         <Box className="content">{children}</Box>