v1.1.1/release

fix stylings

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">
-                  Based on{" "}
-                  {this.getSampleSize()
+                <h6 className="overline success" data-font="sans">
+                  Based on
+                  {` ${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
-                  style={{ marginBottom: "1.2rem" }}
-                  className="overline"
-                  data-font="sans"
-                >
+                <h6 className="subheader" data-font="sans">
                   NET EFFICACY
                 </h6>
-                <h6 className="overline" data-font="sans-italic">
-                  {name} was effective for
-                </h6>
-                <h3 className="subheader" data-font="sans-bold">
+                <h3 className="header" data-font="sans-bold">
                   {VAX_EFFICACY[name][age]}%
                 </h3>
-                <h6 className="overline" data-font="sans-italic">
-                  of people who took it, in the {age} age group
+                <h6 className="overline" 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>
               </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>