From 329265aabb9f128534e8d8d9dfa151b4591145d0 Mon Sep 17 00:00:00 2001
From: Ayushya Amitabh <ayushyamitabh@gmail.com>
Date: Thu, 22 Apr 2021 23:47:22 -0400
Subject: [PATCH] v1.1.1/release styling fixes, add links

---
 website/public/index.html            | 15 +++++++++++----
 website/public/styles/extrasmall.css | 18 ++++++++++++------
 website/public/styles/medium.css     | 13 +++++++++----
 website/src/index.js                 | 20 ++++++++++++++++++--
 4 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/website/public/index.html b/website/public/index.html
index aaec5db..f9ad7af 100644
--- a/website/public/index.html
+++ b/website/public/index.html
@@ -117,16 +117,23 @@
     <div id="root"></div>
     <footer data-font="sans">
       <div class="link-container">
-        <div>
+        <div id="data-sources">
           <h6 class="overline" data-font="sans">FDA Data Sources</h6>
-          <a href="https://www.fda.gov/media/144416/download">PFizer-BioNTech</a>
-          <a href="https://www.fda.gov/media/144637/download">Moderna</a>
-          <a href="https://www.fda.gov/media/146304/download">J&J Janssen</a>
+          <a id="fda-pfizer" href="https://www.fda.gov/media/144416/download">PFizer-BioNTech</a>
+          <a id="fda-moderna" href="https://www.fda.gov/media/144637/download">Moderna</a>
+          <a id="fda-j&j" href="https://www.fda.gov/media/146304/download">J&J Janssen</a>
         </div>
         <div>
           <h6 class="overline" data-font="sans">Links</h6>
           <a href="%PUBLIC_URL%/vaxandme_chart.pdf">Download Chart</a>
           <a href="/">Home</a>
+          <a
+            target="_blank"
+            href="https://www.gavi.org/vaccineswork/what-difference-between-efficacy-and-effectiveness"
+            rel="noreferrer"
+          >
+            What is efficacy? ↗
+          </a>
         </div>
         <div>
           <h6 class="overline" data-font="sans">Legal</h6>
diff --git a/website/public/styles/extrasmall.css b/website/public/styles/extrasmall.css
index 556dfa3..085a8a4 100644
--- a/website/public/styles/extrasmall.css
+++ b/website/public/styles/extrasmall.css
@@ -8,6 +8,7 @@
 
 html {
   font-size: 10px;
+  scroll-behavior: smooth;
 }
 body {
   display: flex;
@@ -349,18 +350,14 @@ footer .by {
 .tip-container {
   display: flex;
   flex-direction: row;
-  padding: 2rem 4rem;
-  padding-left: 2rem;
+  padding: 2rem 0;
+  margin: 2rem 0;
   border-radius: 1rem;
   margin-bottom: 2rem;
-  border: 1px solid var(--color-secondary);
 }
 .tip-icon {
   font-size: 3rem;
 }
-.tip {
-  padding-left: 2rem;
-}
 .tip .overline {
   font-size: 1.6rem;
 }
@@ -373,6 +370,12 @@ footer .by {
   font-size: 6rem;
   letter-spacing: 0.5rem;
 }
+.tip-container .overline[data-button] {
+  margin-top: 1rem;
+}
+.tip-container .overline[data-button]:first-of-type {
+  margin-top: 2rem;
+}
 
 @keyframes loading {
   0% {
@@ -403,6 +406,9 @@ footer .by {
   margin-top: 5rem;
   flex-direction: column;
   margin-bottom: 2rem;
+  border: 1px solid var(--color-secondary);
+  border-radius: 1rem;
+  padding: 3rem 2rem;
 }
 
 .result-header-container .symptom-container {
diff --git a/website/public/styles/medium.css b/website/public/styles/medium.css
index b8a5946..3a13c02 100644
--- a/website/public/styles/medium.css
+++ b/website/public/styles/medium.css
@@ -104,11 +104,16 @@ footer {
   max-width: 50%;
 }
 
-.tip-container {
-  width: fit-content;
-  max-width: 45rem;
+.tip-container .overline[data-button] {
+  margin-top: 2rem;
+  margin-left: 0;
+}
+.tip-container .overline[data-button]:last-of-type {
+  margin-left: 1.2rem;
+}
+.tip {
+  padding-left: 2rem;
 }
-
 
 .result-header-container {
   flex-direction: row;
diff --git a/website/src/index.js b/website/src/index.js
index f5151fe..278f8d0 100644
--- a/website/src/index.js
+++ b/website/src/index.js
@@ -860,7 +860,7 @@ class App extends React.Component {
 
           {this.shouldShowResults() ? (
             <div className="tip-container">
-              <div className="tip-icon">&#9432;</div>
+              {/* <div className="tip-icon">&#9432;</div> */}
               <div className="tip">
                 <h6 className="subheader" data-font="sans">
                   NET EFFICACY
@@ -868,10 +868,26 @@ class App extends React.Component {
                 <h3 className="header" data-font="sans-bold">
                   {VAX_EFFICACY[name][age]}%
                 </h3>
-                <h6 className="overline" data-font="sans">
+                <h6
+                  className="overline"
+                  style={{ wordBreak: "break-word" }}
+                  data-font="sans"
+                >
                   of vaccine trial participants who took the <u>{name}</u>{" "}
                   vaccine (in the <u>{age}</u> age group) did not get COVID-19
                 </h6>
+                <h6 className="overline" data-font="sans" data-button>
+                  <a href="#data-sources">See Data Sources ↗</a>
+                </h6>
+                <h6 className="overline" data-font="sans" data-button>
+                  <a
+                    target="_blank"
+                    href="https://www.gavi.org/vaccineswork/what-difference-between-efficacy-and-effectiveness"
+                    rel="noreferrer"
+                  >
+                    What is efficacy? ↗
+                  </a>
+                </h6>
               </div>
             </div>
           ) : null}