v1.0.1/release

copyright & privacy policy. fix update path bug

firebase.json

@@ -8,8 +8,40 @@
     ],
     "rewrites": [
       {
-        "source": "**",
+        "source": "/copyright",
+        "destination" : "/copyright.html"
+      },
+      {
+        "source": "/privacy",
+        "destination" : "/privacy.html"
+      },
+      {
+        "source": "/jj",
         "destination": "/index.html"
+      },
+      {
+        "source": "/pb",
+        "destination": "/index.html"
+      },
+      {
+        "source":  "/md",
+        "destination": "/index.html"
+      },
+      {
+        "source": "/jj/**",
+        "destination": "/index.html"
+      },
+      {
+        "source": "/pb/**",
+        "destination": "/index.html"
+      },
+      {
+        "source":  "/md/**",
+        "destination": "/index.html"
+      },
+      {
+        "source": "**",
+        "destination": "/404.html"
       }
     ]
   },

functions/lib/index.js

@@ -60,11 +60,11 @@ exports.saveResult = functions.https.onCall(async (data, context) => {
                     incrementValue = 1;
                 }
                 if (data.dose) {
-                    updateDoc[`${data.dose}.${data.age}.${symptom}`] =
+                    updateDoc[`${data.dose}.${data.age}.${symptom.replace("/", "OR")}`] =
                         admin.firestore.FieldValue.increment(incrementValue);
                 }
                 else {
-                    updateDoc[`${data.age}.${symptom}`] =
+                    updateDoc[`${data.age}.${symptom.replace("/", "OR")}`] =
                         admin.firestore.FieldValue.increment(incrementValue);
                 }
             });
@@ -86,11 +86,11 @@ exports.saveResult = functions.https.onCall(async (data, context) => {
                     symptom !== "age") {
                     if (existingData[symptom] === true) {
                         if (existingData.dose) {
-                            undoDoc[`${existingData.dose}.${existingData.age}.${symptom}`] =
+                            undoDoc[`${existingData.dose}.${existingData.age}.${symptom.replace("/", "OR")}`] =
                                 admin.firestore.FieldValue.increment(-1);
                         }
                         else {
-                            undoDoc[`${existingData.age}.${symptom}`] =
+                            undoDoc[`${existingData.age}.${symptom.replace("/", "OR")}`] =
                                 admin.firestore.FieldValue.increment(-1);
                         }
                     }
@@ -115,11 +115,11 @@ exports.saveResult = functions.https.onCall(async (data, context) => {
             Object.keys(docData).forEach((symptom) => {
                 if (docData[symptom] === true) {
                     if (data.dose) {
-                        updateDoc[`${data.dose}.${data.age}.${symptom}`] =
+                        updateDoc[`${data.dose}.${data.age}.${symptom.replace("/", "OR")}`] =
                             admin.firestore.FieldValue.increment(1);
                     }
                     else {
-                        updateDoc[`${data.age}.${symptom}`] =
+                        updateDoc[`${data.age}.${symptom.replace("/", "OR")}`] =
                             admin.firestore.FieldValue.increment(1);
                     }
                 }
@@ -145,11 +145,11 @@ exports.saveResult = functions.https.onCall(async (data, context) => {
             Object.keys(docData).forEach((symptom) => {
                 if (docData[symptom] === true) {
                     if (data.dose) {
-                        updateDoc[`${data.dose}.${data.age}.${symptom}`] =
+                        updateDoc[`${data.dose}.${data.age}.${symptom.replace("/", "OR")}`] =
                             admin.firestore.FieldValue.increment(1);
                     }
                     else {
-                        updateDoc[`${data.age}.${symptom}`] =
+                        updateDoc[`${data.age}.${symptom.replace("/", "OR")}`] =
                             admin.firestore.FieldValue.increment(1);
                     }
                 }
@@ -165,12 +165,19 @@ exports.saveResult = functions.https.onCall(async (data, context) => {
 exports.getPastResult = functions.https.onCall(async (data, context) => {
     if (!!data && !!context) {
         const { gid } = data;
-        return await admin
+        const existingData = await admin
             .firestore()
             .collection("results")
             .doc(serializeGaId(gid))
             .get()
             .then((doc) => doc.data());
+        if (existingData) {
+            if (existingData["NAUSEA / VOMITING"]) {
+                existingData["NAUSEA OR VOMITING"] =
+                    existingData["NAUSEA / VOMITING"];
+            }
+            return existingData;
+        }
     }
     return undefined;
 });

functions/src/index.ts

@@ -73,10 +73,11 @@ export const saveResult = functions.https.onCall(
               incrementValue = 1;
             }
             if (data.dose) {
-              updateDoc[`${data.dose}.${data.age}.${symptom}`] =
+              updateDoc[
+                  `${data.dose}.${data.age}.${symptom.replace("/", "OR")}`] =
                  admin.firestore.FieldValue.increment(incrementValue);
             } else {
-              updateDoc[`${data.age}.${symptom}`] =
+              updateDoc[`${data.age}.${symptom.replace("/", "OR")}`] =
                  admin.firestore.FieldValue.increment(incrementValue);
             }
           });
@@ -98,10 +99,11 @@ export const saveResult = functions.https.onCall(
               if (existingData[symptom] === true) {
                 if (existingData.dose) {
                   undoDoc[
-                      `${existingData.dose}.${existingData.age}.${symptom}`] =
+                      `${existingData.dose}.${existingData.age}.${
+                        symptom.replace("/", "OR")}`] =
                      admin.firestore.FieldValue.increment(-1);
                 } else {
-                  undoDoc[`${existingData.age}.${symptom}`] =
+                  undoDoc[`${existingData.age}.${symptom.replace("/", "OR")}`] =
                      admin.firestore.FieldValue.increment(-1);
                 }
               }
@@ -126,10 +128,11 @@ export const saveResult = functions.https.onCall(
           Object.keys(docData).forEach((symptom : string) => {
             if (docData[symptom] === true) {
               if (data.dose) {
-                updateDoc[`${data.dose}.${data.age}.${symptom}`] =
+                updateDoc[
+                    `${data.dose}.${data.age}.${symptom.replace("/", "OR")}`] =
                      admin.firestore.FieldValue.increment(1);
               } else {
-                updateDoc[`${data.age}.${symptom}`] =
+                updateDoc[`${data.age}.${symptom.replace("/", "OR")}`] =
                      admin.firestore.FieldValue.increment(1);
               }
             }
@@ -154,10 +157,11 @@ export const saveResult = functions.https.onCall(
           Object.keys(docData).forEach((symptom : string) => {
             if (docData[symptom] === true) {
               if (data.dose) {
-                updateDoc[`${data.dose}.${data.age}.${symptom}`] =
+                updateDoc[
+                    `${data.dose}.${data.age}.${symptom.replace("/", "OR")}`] =
                    admin.firestore.FieldValue.increment(1);
               } else {
-                updateDoc[`${data.age}.${symptom}`] =
+                updateDoc[`${data.age}.${symptom.replace("/", "OR")}`] =
                    admin.firestore.FieldValue.increment(1);
               }
             }
@@ -174,12 +178,19 @@ export const saveResult = functions.https.onCall(
 export const getPastResult = functions.https.onCall(async (data, context) => {
   if (!!data && !!context) {
     const {gid} = data;
-    return await admin
+    const existingData : admin.firestore.DocumentData | undefined = await admin
         .firestore()
         .collection("results")
         .doc(serializeGaId(gid))
         .get()
         .then((doc) => doc.data());
+    if (existingData) {
+      if (existingData["NAUSEA / VOMITING"]) {
+        existingData["NAUSEA OR VOMITING"] =
+          existingData["NAUSEA / VOMITING"];
+      }
+      return existingData;
+    }
   }
   return undefined;
 });

website/package.json

@@ -14,7 +14,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "deploy": "firebase deploy --only hosting"
+    "deploy": "firebase deploy --only hosting",
+    "serve" : "firebase serve --only hosting"
   },
   "eslintConfig": {
     "extends": [

website/public/.htaccess

@@ -1,3 +0,0 @@
-RewriteEngine On
-
-DirectoryIndex index.html

website/public/404.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Learn about the expected side effects of COVID-19 Vaccines"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+
+    <style>
+      @import "/styles/variables.css";
+      @import "/styles/variables-dark.css" screen and
+        (prefers-color-scheme: dark);
+      @import "/styles/extrasmall.css";
+      @import "/styles/small.css" only screen and (min-width: 370px)
+        and (max-width: 767px);
+      @import "/styles/smallmedium.css" only screen and
+        (min-width: 768px) and (max-width: 1023px);
+      @import "/styles/medium.css" only screen and
+        (min-width: 1024px);
+      @import "/styles/large.css" only screen and
+        (min-width: 1366px);
+      @import "/styles/extralarge.css" only screen and
+        (min-width: 1921px);
+      @font-face {
+        font-family: "GlacialBold";
+        src: url("/fonts/glacialindifference-bold-webfont.woff2")
+            format("woff2"),
+          url("/fonts/glacialindifference-bold-webfont.woff") format("woff");
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "GlacialItalic";
+        src: url("/fonts/glacialindifference-italic-webfont.woff2")
+            format("woff2"),
+          url("/fonts/glacialindifference-italic-webfont.woff")
+            format("woff");
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Glacial";
+        src: url("/fonts/glacialindifference-regular-webfont.woff2")
+            format("woff2"),
+          url("/fonts/glacialindifference-regular-webfont.woff")
+            format("woff");
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      [data-font="sans"] {
+        font-family: "Glacial", sans-serif;
+        font-display: swap;
+      }
+      [data-font="sans-bold"] {
+        font-family: "GlacialBold", sans-serif;
+        font-display: swap;
+      }
+      [data-font="sans-italic"] {
+        font-family: "GlacialItalic", sans-serif;
+        font-style: italic;
+        font-display: swap;
+      }
+    </style>
+    <title>Vax & Me | 404</title>
+  </head>
+  <body>
+    <div id="root">
+        <div class="app-container">
+            <header>
+                <div class="logo-container">
+                  <div class="logo"> </div>
+                </div>
+              </header>
+              <main>
+                <div class="intro">
+                  <h1 class="header" data-font="sans-bold">
+                    404
+                  </h1>
+                  <h6 class="overline" data-font="sans">
+                    This page doesn't exist.
+                  </h6>
+                </div>
+              </main>
+        </div>
+    </div>
+    <footer data-font="sans">
+      <div class="link-container">
+        <div>
+          <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>
+        </div>
+        <div>
+          <h6 class="overline" data-font="sans">Links</h6>
+          <a href="/vaxandme_chart.pdf">Download Chart</a>
+          <a href="/">Home</a>
+        </div>
+        <div>
+          <h6 class="overline" data-font="sans">Legal</h6>
+          <a href="/copyright">Copyright</a>
+          <a href="/privacy">Privacy</a>
+        </div>
+      </div>
+      <div class="overline by" data-font="sans">
+        Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
+      </div>
+    </footer>
+  </body>
+</html>

website/public/copyright.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Learn about the expected side effects of COVID-19 Vaccines"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+
+    <style>
+      @import "/styles/variables.css";
+      @import "/styles/variables-dark.css" screen and
+        (prefers-color-scheme: dark);
+      @import "/styles/extrasmall.css";
+      @import "/styles/small.css" only screen and (min-width: 370px) and
+        (max-width: 767px);
+      @import "/styles/smallmedium.css" only screen and (min-width: 768px) and
+        (max-width: 1023px);
+      @import "/styles/medium.css" only screen and (min-width: 1024px);
+      @import "/styles/large.css" only screen and (min-width: 1366px);
+      @import "/styles/extralarge.css" only screen and (min-width: 1921px);
+      @font-face {
+        font-family: "GlacialBold";
+        src: url("/fonts/glacialindifference-bold-webfont.woff2")
+            format("woff2"),
+          url("/fonts/glacialindifference-bold-webfont.woff") format("woff");
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "GlacialItalic";
+        src: url("/fonts/glacialindifference-italic-webfont.woff2")
+            format("woff2"),
+          url("/fonts/glacialindifference-italic-webfont.woff") format("woff");
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Glacial";
+        src: url("/fonts/glacialindifference-regular-webfont.woff2")
+            format("woff2"),
+          url("/fonts/glacialindifference-regular-webfont.woff") format("woff");
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      [data-font="sans"] {
+        font-family: "Glacial", sans-serif;
+        font-display: swap;
+      }
+      [data-font="sans-bold"] {
+        font-family: "GlacialBold", sans-serif;
+        font-display: swap;
+      }
+      [data-font="sans-italic"] {
+        font-family: "GlacialItalic", sans-serif;
+        font-style: italic;
+        font-display: swap;
+      }
+    </style>
+    <title>Vax & Me | Copyright</title>
+  </head>
+  <body>
+    <div id="root">
+      <div class="app-container">
+        <header>
+          <div class="logo-container">
+            <div class="logo"></div>
+            <div class="logo-text-container">
+              <p data-font="sans-bold">COPYRIGHT</p>
+            </div>
+          </div>
+        </header>
+        <main>
+          <div class="intro">
+            <h3 class="subheader" data-font="sans-bold">© 2021</h3>
+            <h6 style="display: inline-block;" class="overline" data-font="sans">
+              Alba Rajanibala
+            </h6>
+            <h6 style="display: inline-block;" class="overline" data-font="sans"> &amp; Ayushya Amitabh
+            </h6>
+          </div>
+          <div class="question-container">
+            <p class="overline" data-font="sans">
+              Unauthorized copying of this website via any medium is strictly
+              prohibited. Designed and developed by Alba Rajanibala and Ayushya
+              Amitabh.
+            </p>
+          </div>
+          <div class="question-container">
+            <p class="overline" data-font="sans">
+              All content on this website, unless otherwise cited is the
+              intellectual property of Alba Rajanibala and Ayushya Amitabh, and
+              may not be copied, edited, or reproduced without permission.
+            </p>
+          </div>
+          <div class="question-container">
+            <p class="overline" data-font="sans-italic">
+              Data shown is based on FDA clinical trials.
+            </p>
+            <div class="answers-container">
+              <a
+                style="display: block"
+                class="question"
+                data-font="sans-italic"
+                href="https://www.fda.gov/media/144416/download"
+                >PFizer-BioNTech</a
+              >
+              <a
+                style="display: block"
+                class="question"
+                data-font="sans-italic"
+                href="https://www.fda.gov/media/144637/download"
+                >Moderna</a
+              >
+              <a
+                style="display: block"
+                class="question"
+                data-font="sans-italic"
+                href="https://www.fda.gov/media/146304/download"
+                >J&amp;J Janssen</a
+              >
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <footer data-font="sans">
+      <div class="link-container">
+        <div>
+          <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>
+        </div>
+        <div>
+          <h6 class="overline" data-font="sans">Links</h6>
+          <a href="/vaxandme_chart.pdf">Download Chart</a>
+          <a href="/">Home</a>
+        </div>
+        <div>
+          <h6 class="overline" data-font="sans">Legal</h6>
+          <a href="/copyright">Copyright</a>
+          <a href="/privacy">Privacy</a>
+        </div>
+      </div>
+      <div class="overline by" data-font="sans">
+        Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
+      </div>
+    </footer>
+  </body>
+</html>

website/public/index.html

@@ -31,7 +31,7 @@
       @import "%PUBLIC_URL%/styles/variables-dark.css" screen and
         (prefers-color-scheme: dark);
       @import "%PUBLIC_URL%/styles/extrasmall.css";
-      @import "%PUBLIC_URL%/styles/small.css" only screen and (min-width: 400px)
+      @import "%PUBLIC_URL%/styles/small.css" only screen and (min-width: 370px)
         and (max-width: 767px);
       @import "%PUBLIC_URL%/styles/smallmedium.css" only screen and
         (min-width: 768px) and (max-width: 1023px);
@@ -116,6 +116,7 @@
     <!-- End Google Tag Manager (noscript) -->
     <div id="root"></div>
     <footer data-font="sans">
+      <div class="link-container">
         <div>
           <h6 class="overline" data-font="sans">FDA Data Sources</h6>
           <a href="https://www.fda.gov/media/144416/download">PFizer-BioNTech</a>
@@ -123,10 +124,17 @@
           <a href="https://www.fda.gov/media/146304/download">J&J Janssen</a>
         </div>
         <div>
-        <h6 class="overline" data-font="sans">Download</h6>
+          <h6 class="overline" data-font="sans">Links</h6>
-        <a href="%PUBLIC_URL%/vaxandme_chart.pdf">Visualized Chart</a>
+          <a href="%PUBLIC_URL%/vaxandme_chart.pdf">Download Chart</a>
+          <a href="/">Home</a>
         </div>
         <div>
+          <h6 class="overline" data-font="sans">Legal</h6>
+          <a href="/copyright">Copyright</a>
+          <a href="/privacy">Privacy</a>
+        </div>
+      </div>
+      <div class="overline by" data-font="sans">
         Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
       </div>
     </footer>

website/public/privacy.html

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Learn about the expected side effects of COVID-19 Vaccines"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+
+    <style>
+      @import "/styles/variables.css";
+      @import "/styles/variables-dark.css" screen and
+        (prefers-color-scheme: dark);
+      @import "/styles/extrasmall.css";
+      @import "/styles/small.css" only screen and (min-width: 370px) and
+        (max-width: 767px);
+      @import "/styles/smallmedium.css" only screen and (min-width: 768px) and
+        (max-width: 1023px);
+      @import "/styles/medium.css" only screen and (min-width: 1024px);
+      @import "/styles/large.css" only screen and (min-width: 1366px);
+      @import "/styles/extralarge.css" only screen and (min-width: 1921px);
+      @font-face {
+        font-family: "GlacialBold";
+        src: url("/fonts/glacialindifference-bold-webfont.woff2")
+            format("woff2"),
+          url("/fonts/glacialindifference-bold-webfont.woff") format("woff");
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "GlacialItalic";
+        src: url("/fonts/glacialindifference-italic-webfont.woff2")
+            format("woff2"),
+          url("/fonts/glacialindifference-italic-webfont.woff") format("woff");
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Glacial";
+        src: url("/fonts/glacialindifference-regular-webfont.woff2")
+            format("woff2"),
+          url("/fonts/glacialindifference-regular-webfont.woff") format("woff");
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      [data-font="sans"] {
+        font-family: "Glacial", sans-serif;
+        font-display: swap;
+      }
+      [data-font="sans-bold"] {
+        font-family: "GlacialBold", sans-serif;
+        font-display: swap;
+      }
+      [data-font="sans-italic"] {
+        font-family: "GlacialItalic", sans-serif;
+        font-style: italic;
+        font-display: swap;
+      }
+    </style>
+    <title>Vax & Me | Privacy</title>
+  </head>
+  <body>
+    <div id="root">
+      <div class="app-container">
+        <header>
+          <div class="logo-container">
+            <div class="logo"></div>
+            <div class="logo-text-container">
+              <p data-font="sans-bold">PRIVACY</p>
+            </div>
+          </div>
+        </header>
+        <main>
+          <div class="intro">
+            <h6 class="overline" data-font="sans">What's collected</h6>
+            <h6 class="overline" data-font="sans">&amp; How it's used</h6>
+          </div>
+          <div class="question-container">
+            <h6 class="subheader" data-font="sans-bold">
+              USER PERSONAL INFORMATION
+            </h6>
+            <div class="answers-container">
+              <p class="overline" data-font="sans">
+                No personally indentifiable information or user data is
+                collected. Vax & Me only uses Google Analytics on it's website
+                to study website performance, and error prevention.
+              </p>
+            </div>
+          </div>
+          <div class="question-container">
+            <h6 class="subheader" data-font="sans-bold">USER ACTIVITY</h6>
+            <div class="answers-container">
+              <p class="overline" data-font="sans">
+                Vax & Me monitors some click, and keystrokes on it's website to
+                detect functionality errors.
+              </p>
+            </div>
+          </div>
+          <div class="question-container">
+            <h6 class="subheader" data-font="sans-bold">USER DATA</h6>
+            <div class="answers-container">
+              <p class="overline" data-font="sans">
+                Volunteered data is linked to Google Analytics Client ID - which
+                is unique to a device and web-browser combination. This is
+                required to prevent data duplicacy and is core to the
+                functionality of Vax & Me.
+              </p>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <footer data-font="sans">
+      <div class="link-container">
+        <div>
+          <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>
+        </div>
+        <div>
+          <h6 class="overline" data-font="sans">Links</h6>
+          <a href="/vaxandme_chart.pdf">Download Chart</a>
+          <a href="/">Home</a>
+        </div>
+        <div>
+          <h6 class="overline" data-font="sans">Legal</h6>
+          <a href="/copyright">Copyright</a>
+          <a href="/privacy">Privacy</a>
+        </div>
+      </div>
+      <div class="overline by" data-font="sans">
+        Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
+      </div>
+    </footer>
+  </body>
+</html>

website/public/styles/extrasmall.css

@@ -39,27 +39,32 @@ header {
 .logo-container {
   display: flex;
   width: fit-content;
-  align-items: center;
   justify-content: center;
+  flex-direction: column;
 }
 .logo {
   background-size: 100%;
   width: 5rem;
   height: 5rem;
   display: inline-block;
+  background-image: url("/logo512.png");
 }
 .logo-text-container {
-  display: none;
   justify-content: center;
   vertical-align: middle;
   flex-direction: column;
   flex: 1;
-  margin-left: 1.5rem;
+  margin-top: 3.5rem;
 }
 .logo-text-container p {
   font-size: 2.4rem;
 }
 
+.header {
+  font-size: 10rem;
+  letter-spacing: 1rem;
+}
+
 .subheader {
   font-size: 2.5rem;
   margin: 0;
@@ -189,28 +194,30 @@ header {
 }
 
 footer {
-  font-size: 1.2rem;
   padding: 5rem 3.75rem;
   width: calc(100vw - 7.5rem);
   margin-left: -3.75rem;
   background-color: var(--color-secondary-light);
+}
+.link-container {
+  font-size: 1.2rem;
   transition: none !important;
   display: flex;
   flex-direction: column;
 }
 
-footer > div {
+.link-container > div {
   flex: 1;
   display: flex;
   flex-direction: column;
   color: var(--color-primary);
 }
 
-footer > div > .overline {
+.link-container > div > .overline {
   color: var(--color-primary);
 }
 
-footer > div:not(:first-of-type) {
+.link-container > div:not(:first-of-type) {
   margin-top: 3rem;
 }
 
@@ -218,6 +225,16 @@ a {
   color: var(--color);
   margin-top: 0.75rem;
   max-width: fit-content;
+
+}
+
+.link-container a {
+  font-size: 1.8rem;
+}
+
+footer .by {
+  color: var(--color-primary);
+  margin-top: 4rem;
 }
 
 @keyframes slideUp {
@@ -268,6 +285,9 @@ a {
   justify-content: center;
   align-items: center;
   background-color: var(--color-secondary-light);
+  border-bottom: 1px solid transparent;
+}
+.input-popup.expanded .input-popup-header {
   border-bottom: 1px solid var(--color-tertiary);
 }
 .input-popup-header-text {

website/public/styles/medium.css

@@ -4,11 +4,21 @@ body {
   height: calc(100vh - 5rem);
 }
 
+.logo-container {
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
 .logo {
   width: 7.5rem;
   height: 7.5rem;
 }
-
+.logo-text-container {
+  margin-top: 0;
+  margin-left: 1.5rem;
+  border-left: 1px solid var(--color-secondary);
+  padding-left: 1.5rem;
+}
 .intro .overline {
   font-size: 3rem;
 }
@@ -16,6 +26,11 @@ body {
   font-size: 4rem;
 }
 
+.header {
+  font-size: 15rem;
+  letter-spacing: 1.5rem;
+}
+
 .overline[data-button] {
   display: inline-block;
 }
@@ -60,25 +75,23 @@ body {
 }
 
 footer {
-  font-size: 1.7rem;
   padding: 5rem 7.5rem;
   width: calc(100vw - 15rem);
   margin-left: -7.5rem;
+}
+.link-container {
+  font-size: 1.7rem;
   flex-direction: row;
 }
-footer > div {
+.link-container > div {
   flex-direction: column;
   flex: 1;
 }
-
+.link-container > div:not(:first-of-type) {
-footer > div:not(:first-of-type) {
   margin-left: 3rem;
   margin-top: 0;
 }
-footer > div:last-of-type {
+
-  flex: 3;
-  align-items: flex-end;
-}
 .input-popup {
   height: 10rem;
 }

website/public/styles/small.css

@@ -1,5 +1,5 @@
 .input-popup {
-  height: 10rem;
+  height: 11.5rem;
 }
 
 .input-popup.expanded {

website/src/index.js

@@ -111,7 +111,7 @@ const MD_DOSE1_YOUNGER_RESULT = {
   FATIGUE: "4",
   "MUSCLE PAIN": "2",
   "JOINT PAIN": "2",
-  "NAUSEA / VOMITING": "1",
+  "NAUSEA OR VOMITING": "1",
   FEVER: "1",
   CHILLS: "1",
 };
@@ -124,7 +124,7 @@ const MD_DOSE2_YOUNGER_RESULT = {
   "JOINT PAIN": "5",
   CHILLS: "5",
   FEVER: "2",
-  "NAUSEA / VOMITING": "2",
+  "NAUSEA OR VOMITING": "2",
   "MUSCLE PAIN": "1",
 };
 const MD_DOSE1_OLDER_RESULT = {
@@ -135,7 +135,7 @@ const MD_DOSE1_OLDER_RESULT = {
   FATIGUE: "3",
   "MUSCLE PAIN": "2",
   "JOINT PAIN": "2",
-  "NAUSEA / VOMITING": "1",
+  "NAUSEA OR VOMITING": "1",
   CHILLS: "1",
   FEVER: "<1",
 };
@@ -148,7 +148,7 @@ const MD_DOSE2_OLDER_RESULT = {
   "MUSCLE PAIN": "5",
   "JOINT PAIN": "4",
   CHILLS: "3",
-  "NAUSEA / VOMITING": "1",
+  "NAUSEA OR VOMITING": "1",
   FEVER: "1",
 };
 const JJ_YOUNGER_RESULT = {
@@ -159,7 +159,7 @@ const JJ_YOUNGER_RESULT = {
   FATIGUE: "4",
   "MUSCLE PAIN": "4",
   "NEED PAIN MED": "3",
-  "NAUSEA / VOMITING": "2",
+  "NAUSEA OR VOMITING": "2",
   FEVER: "1",
 };
 const JJ_OLDER_RESULT = {
@@ -169,7 +169,7 @@ const JJ_OLDER_RESULT = {
   HEADACHE: "3",
   FATIGUE: "3",
   "MUSCLE PAIN": "2",
-  "NAUSEA / VOMITING": "1",
+  "NAUSEA OR VOMITING": "1",
   "NEED PAIN MED": "1",
   FEVER: "<1",
 };
@@ -214,7 +214,7 @@ const ICONS = {
   "JOINT PAIN": "🦵",
   FEVER: "🤒",
   VOMITING: "🤮",
-  "NAUSEA / VOMITING": "🤮",
+  "NAUSEA OR VOMITING": "🤮",
 };
 
 class App extends React.Component {
@@ -428,10 +428,6 @@ class App extends React.Component {
         <header>
           <div className="logo-container">
             <div className="logo"> </div>
-            <div className="logo-text-container">
-              <p data-font="sans-bold">VAX</p>
-              <p data-font="sans">&amp; ME</p>
-            </div>
           </div>
           <div className="intro">
             <h6 className="overline" data-font="sans">