v1.1.1/release

fix stylings

website/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vaxandme",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "dependencies": {
     "firebase": "^8.4.1",

website/public/styles/extrasmall.css

@@ -349,7 +349,6 @@ footer .by {
 .tip-container {
   display: flex;
   flex-direction: row;
-  align-items: center;
   padding: 2rem 4rem;
   padding-left: 2rem;
   border-radius: 1rem;
@@ -363,10 +362,16 @@ footer .by {
   padding-left: 2rem;
 }
 .tip .overline {
-  font-size: 1.4rem;
+  font-size: 1.6rem;
 }
 .tip .subheader {
-  font-size: 3.2rem;
+  font-size: 2rem;
+  letter-spacing: 0.2rem;
+  margin-top: 0.4rem;
+}
+.tip .header {
+  font-size: 6rem;
+  letter-spacing: 0.5rem;
 }
 
 @keyframes loading {

website/public/styles/medium.css

@@ -106,6 +106,7 @@ footer {
 
 .tip-container {
   width: fit-content;
+  max-width: 45rem;
 }
 
 

website/src/index.js

@@ -19,7 +19,7 @@ if (window.location.host !== "www.vaxand.me") {
   firebase.functions().useEmulator(window.location.host.split(":")[0], 5001);
 }
 
-const fb_functions = firebase.app().functions('us-central1');
+const fb_functions = firebase.functions();
 const saveResult = fb_functions.httpsCallable("saveResultV1");
 const getPastResult = fb_functions.httpsCallable("getPastResultV1");
 const getStats = fb_functions.httpsCallable("getStatsV1");
@@ -559,7 +559,7 @@ class App extends React.Component {
             {answerDose}
           </h6>
         ) : null}
-        <p className="question" data-font="sans-italic">
+        <p className="question" data-font="sans">
           {dose === VAX_DOSES.ONE && answerDose === VAX_DOSES.TWO
             ? "(You can comeback later to tell us about Dose 2)"
             : "(Select all side effects that you experienced)"}
@@ -728,7 +728,7 @@ class App extends React.Component {
           ) : null}
           {!loading ? (
             <div className="question-container">
-              <p className="question" data-font="sans-italic">
+              <p className="question" data-font="sans">
                 Select Vaccine
               </p>
               <div className="answers-container">
@@ -757,7 +757,7 @@ class App extends React.Component {
           ) : null}
           {this.shouldShowDoses() ? (
             <div className="question-container">
-              <p className="question" data-font="sans-italic">
+              <p className="question" data-font="sans">
                 Select Dose
               </p>
               <div className="answers-container">
@@ -785,7 +785,7 @@ class App extends React.Component {
 
           {this.shouldShowAgeGroup() ? (
             <div className="question-container">
-              <p className="question" data-font="sans-italic">
+              <p className="question" data-font="sans">
                 Select Age Group
               </p>
               <div className="answers-container">
@@ -828,7 +828,7 @@ class App extends React.Component {
                 </h6>
               </div>
               <div className="result-header-select">
-                <h6 className="overline" data-font="sans-italic">
+                <h6 className="overline" data-font="sans">
                   Use data from:
                 </h6>
                 <select
@@ -842,15 +842,15 @@ class App extends React.Component {
                     <option key={dataKey}>{DATA_CHOICES[dataKey]}</option>
                   ))}
                 </select>
-                <h6 className="overline success" data-font="sans-italic">
+                <h6 className="overline success" data-font="sans">
-                  Based on{" "}
+                  Based on
-                  {this.getSampleSize()
+                  {` ${this.getSampleSize()
                     .toString()
-                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}{" "}
+                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")} `}
                   individual experiences
                 </h6>
                 {Object.keys(stats).length < 1 ? (
-                  <h6 className="overline errored" data-font="sans-italic">
+                  <h6 className="overline errored" data-font="sans">
                     Failed to get stats from Vax&amp;Me
                   </h6>
                 ) : null}
@@ -862,21 +862,15 @@ class App extends React.Component {
             <div className="tip-container">
               <div className="tip-icon">&#9432;</div>
               <div className="tip">
-                <h6
+                <h6 className="subheader" data-font="sans">
-                  style={{ marginBottom: "1.2rem" }}
-                  className="overline"
-                  data-font="sans"
-                >
                   NET EFFICACY
                 </h6>
-                <h6 className="overline" data-font="sans-italic">
+                <h3 className="header" data-font="sans-bold">
-                  {name} was effective for
-                </h6>
-                <h3 className="subheader" data-font="sans-bold">
                   {VAX_EFFICACY[name][age]}%
                 </h3>
-                <h6 className="overline" data-font="sans-italic">
+                <h6 className="overline" data-font="sans">
-                  of people who took it, in the {age} age group
+                  of vaccine trial participants who took the <u>{name}</u>{" "}
+                  vaccine (in the <u>{age}</u> age group) did not get COVID-19
                 </h6>
               </div>
             </div>
@@ -948,7 +942,7 @@ class App extends React.Component {
                   <p className="question" data-font="sans">
                     You can comeback and update your experience at any time!
                   </p>
-                  <p className="question" data-font="sans-italic">
+                  <p className="question" data-font="sans">
                     (Just use the same device)
                   </p>
                 </div>