Merge pull request #89 from notisnan/issue-78-information-overlay

Issue 78 information overlay

README.md

@@ -6,6 +6,8 @@ A Chrome extension to show important COVID-19 global and local information.
 
 <img src="./banner.jpg" width="400">
 
+<br>
+
 ## Features
 - Initialized with global stats and the top four countries with highest confirmed cases.
 - Ability to curate the list of countries you want to keep an eye on.
@@ -14,12 +16,14 @@ A Chrome extension to show important COVID-19 global and local information.
 - Panel to view data from all reporting countries at the same time.
 - Your country data will persist between Chrome sessions by being stored in Chrome sync storage.
 
+<br>
 
-## Data
+## Where do we get our data?
 We are consuming the data from the [Corona Virus Monitor](https://rapidapi.com/astsiatsko/api/coronavirus-monitor?endpoint=apiendpoint_f48abf8b-68b3-4012-97ee-f0cc72cff406) API.
 
 API information is updated on 10 minute intervals and consumes the data from [Johns Hopkins](https://coronavirus.jhu.edu/map.html) or [Worldometer](https://www.worldometers.info/coronavirus/) depending on which one has the most up to date information at the time.
 
+<br>
 
 ## Running the app locally
 

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "COVID-19 Coronavirus Tracker",
-  "version": "2.3",
+  "version": "2.4",
   "description": "This Chrome Extension is a COVID-19 Coronavirus Tracker allowing you to track the world-wide spread of this pandemic.",
   "permissions": [
     "storage"

src/App.css

@@ -6,7 +6,9 @@
   width: 580px;
 }
 
-.app--disabled {
+.app--disabled .header__item,
+.app--disabled .country-toggle-wrapper,
+.app--disabled .count-toggle-wrapper {
   pointer-events: none;
 }
 
@@ -21,14 +23,14 @@
 
 .app__body {
   padding: 0 20px 0;
-  max-height: 400px;
+  max-height: 330px;
   overflow-y: auto;
 }
 
 .app__footer {
   display: flex;
   margin-top: 5px;
-  padding: 10px 20px 15px;
+  padding: 10px 30px 15px 20px;
   min-height: 48px;
   position: relative;
   z-index: 100;
@@ -70,6 +72,10 @@
   text-align: center;
 }
 
+.app-message__loader {
+  width: 60px;
+}
+
 /* ------------ */
 /* Column Sizes */
 /* ------------ */
@@ -88,4 +94,98 @@
 .app--refreshing .countries {
   opacity: 0.5;
   pointer-events: none;
+}
+
+/* ----------- */
+/* Footer info */
+/* ----------- */
+
+.info {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  background: #22294b;
+  padding: 18px 20px;
+}
+
+.info__reset {
+  margin-right: auto;
+  color: #a8b4d3;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+}
+
+.info__reset__icon {
+  fill: #5c71a8;
+  width: 20px;
+  margin-right: 8px;
+}
+
+.info__button {
+  text-decoration: none;
+  color: #dde7ff;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border-radius: 20px;
+  font-size: 12px;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.info__button::before,
+.info__button::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  border-radius: 20px;
+}
+
+.info__button::before {
+  background: #4a5caa;
+  background: linear-gradient(#4a5caa, #3a477d);
+  box-shadow: inset 1px 1px rgba(255,255,255, 0.1);
+}
+.info__button::after {
+  background: #5f74cf;
+  background: linear-gradient(#5f74cf, #435293);
+  box-shadow: inset 1px 1px rgba(255,255,255, 0.1);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.info__button:hover:after {
+  opacity: 1;
+}
+
+/* ----------- */
+/* Info Button */
+/* ----------- */
+
+.info-button {
+  display: flex;
+  cursor: pointer;
+  margin-left: 16px;
+  margin-top: -1px;
+}
+
+.info-button--loading {
+  margin-left: auto;
+}
+
+.info-button__open {
+  width: 23px;
+  fill: #808aa2;
+  transition: fill 0.2s;
+  margin-top: -1px;
+}
+
+.info-button:hover .info-button__open {
+  fill: #a2afcd;
 }