v1.0.1/release

copyright & privacy policy. fix update path bug
2021-04-14 21:28:46 -04:00
parent eb63c9c48f
commit 3040c6f064
14 changed files with 573 additions and 63 deletions
@@ -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"
      }
    ]
  },
@@ -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;
 });
@@ -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;
 });
@@ -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": [
@@ -1,3 +0,0 @@
-RewriteEngine On
-
-DirectoryIndex index.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>
@@ -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>
@@ -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,17 +116,25 @@
    <!-- End Google Tag Manager (noscript) -->
    <div id="root"></div>
    <footer data-font="sans">
-      <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 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="%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>
-        <h6 class="overline" data-font="sans">Download</h6>
-        <a href="%PUBLIC_URL%/vaxandme_chart.pdf">Visualized Chart</a>
-      </div>
-      <div>
+      <div class="overline by" data-font="sans">
        Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
      </div>
    </footer>
@@ -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>
@@ -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 {
@@ -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;
 }
-
-footer > div:not(:first-of-type) {
+.link-container > 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;
 }
@@ -1,5 +1,5 @@
 .input-popup {
-  height: 10rem;
+  height: 11.5rem;
 }

 .input-popup.expanded {
@@ -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">