Add extension banner to the hompage

PREreview · Aug 14, 2020 · c0fdb9b · c0fdb9b
1 parent 61d83f5
commit c0fdb9b
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 2 deletions.
diff --git a/src/components/header-bar.css b/src/components/header-bar.css
@@ -43,6 +43,12 @@
     border-top-left-radius: var(--xsgrd);
     border-bottom-left-radius: var(--xsgrd);
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+    @media (--narrow-screen) {
+      bottom: calc(var(--xlgrd) + 50px);
+    }
+    @media (--mobile) {
+      bottom: var(--xlgrd);
+    }
     & :any-link {
       color: white;
       text-decoration: none;

diff --git a/src/components/home.css b/src/components/home.css
@@ -38,7 +38,7 @@
     flex: 0 0 var(--middle-column-default-width);
     width: var(--middle-column-default-width);
     max-width: calc(100vw - var(--left-panel-min-width));
-
+    margin-bottom: 60px;
     position: relative;
     box-sizing: border-box;
     @media (--narrow-screen) {
@@ -103,4 +103,47 @@
       margin: var(--xsgrd);
     }
   }
+
+  & .home__extention-banner {
+    position: fixed;
+    text-align: center;
+    font: var(--ui-basic-font);
+    font-size: medium;
+    line-height: 1.25em;
+    background-color: var(--prereview-red);
+    color: white;
+    flex: 0 0 var(--middle-column-default-width);
+    text-shadow: 0px 0px 10px #eb0000;
+    left: var(--left-panel-min-width);
+    bottom: 0;
+    width: var(--middle-column-default-width);
+    max-width: calc(80vw - var(--left-panel-min-width));
+    padding: var(--xsgrd) var(--xlgrd);
+    margin: var(--mgrd) var(--sgrd) 0;
+    border-top-left-radius: var(--xsgrd);
+    border-top-right-radius: var(--xsgrd);
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    @media (--narrow-screen) {
+      left: 0;
+      font-size: inherit;
+      max-width: calc(100vw - 130px);
+    }
+    @media (--mobile) {
+      display: none;
+    }
+    & .home-extension-banner__close-button {
+      position: absolute;
+      right: 0;
+      top: 0;
+      color: inherit;
+    }
+    & :any-link {
+      color: white;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
 }
diff --git a/src/components/home.js b/src/components/home.js
@@ -8,7 +8,8 @@ import { usePreprintSearchResults } from '../hooks/api-hooks';
 import {
   useIsNewVisitor,
   useIsMobile,
-  useNewPreprints
+  useNewPreprints,
+  useDisplayExtensionBanner
 } from '../hooks/ui-hooks';
 import { useUser } from '../contexts/user-context';
 import { unprefix, getId } from '../utils/jsonld';
@@ -26,6 +27,9 @@ import { createPreprintQs, apifyPreprintQs } from '../utils/search';
 import WelcomeModal from './welcome-modal';
 import XLink from './xlink';
 import AddButton from './add-button';
+import IconButton from './icon-button';
+import VisuallyHidden from '@reach/visually-hidden';
+import { MdClose } from 'react-icons/md';
 import { ORG } from '../constants';
 import Banner from './banner';
 
@@ -38,6 +42,7 @@ export default function Home() {
   const [showLeftPanel, setShowLeftPanel] = useState(!isMobile);
   const [loginModalOpenNext, setLoginModalOpenNext] = useState(null);
   const isNewVisitor = useIsNewVisitor();
+  const [displayExtensionBanner, closeExtensionBanner] = useDisplayExtensionBanner();
   const [isWelcomeModalOpen, setIsWelcomeModalOpen] = useState(true);
   const [newPreprints, setNewPreprints] = useNewPreprints();
 
@@ -323,6 +328,25 @@ export default function Home() {
         </div>
 
         <div className="home__main__right"></div>
+        {
+          displayExtensionBanner && (<div className="home__extention-banner">
+            You have not yet installed the Outbreak Science Rapid PREreivew browser extension to enable requesting, adding and/or reading rapid reviews on other websites. Install it&nbsp;
+            <a
+              href="https://outbreaksci.prereview.org/extension"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              here
+            </a>!
+            <IconButton
+              className="home-extension-banner__close-button"
+              onClick={closeExtensionBanner}
+            >
+              <VisuallyHidden>Close</VisuallyHidden>
+              <MdClose className="home-extension-banner_close-button__icon" />
+            </IconButton>
+          </div>)
+        }
       </div>
     </div>
   );

diff --git a/src/hooks/ui-hooks.js b/src/hooks/ui-hooks.js
@@ -1,4 +1,7 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  CSS_SCOPE_ID
+} from '../constants';
 import { useStores } from '../contexts/store-context';
 
 /**
@@ -156,3 +159,23 @@ export function usePrevious(value) {
   // Return previous value (happens before update in useEffect above)
   return ref.current;
 }
+
+export function useDisplayExtensionBanner() {
+  const [displayExtensionBanner, setDisplayExtensionBanner] = useState(false);
+
+  useEffect(() => {
+    if(document.readyState === 'interactive' || document.readyState === 'complete'){
+      setTimeout(() => {
+        const shouldDisplayExtensionBanner = localStorage.getItem('displayExtensionBanner') !== 'false' && !document.getElementById(CSS_SCOPE_ID);
+        setDisplayExtensionBanner(shouldDisplayExtensionBanner);
+      },500)
+    }
+  }, []);
+
+  const localSet = useCallback(() => {
+    localStorage.setItem('displayExtensionBanner', 'false');
+    setDisplayExtensionBanner(false);
+  }, []);
+
+  return [displayExtensionBanner, localSet];
+}