last fix and firebase deploy

.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1,20 @@
+favicon.ico,499162500000,d96ddbc4933b04e12c738ab39f469573143949ca2c39eda0a49d16f83d40c319
+logo192.png,499162500000,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b
+logo512.png,499162500000,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
+manifest.json,499162500000,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
+robots.txt,499162500000,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
+asset-manifest.json,1599751671435,65efad0687d6d25b171a15b3d5f822ee26a610e9cb652dbc6292bf2b089280e6
+index.html,1599751671435,946aa0257e9278367f331f9a639b219934a327056ee6ec42243817a3a8eb293d
+precache-manifest.3e50cffc0519c885afd22e0437e7f367.js,1599751671435,1471e877f135fb8ca80049021cde7ab7958923cd42d04da39a5e81aec32b73d4
+service-worker.js,1599751671435,60a8d18aa9edd458230c36d709616803204c4da45a2f3647a3b462ea25a644df
+static/css/main.3e0ca9e0.chunk.css,1599751671438,cb222311db55c6736ecc24eeb355bc8a87ff615335608b7d17b52d063550ffe0
+static/css/2.a4567992.chunk.css,1599751671551,902210f3783727f2cf81ec002d4202aef0a8f4eda14de5752fafb9f7229ebe28
+static/css/main.3e0ca9e0.chunk.css.map,1599751671551,6defd8cfe9ecc290463ca27a8fd18dbed708131208d7cf387b293a5de93c607c
+static/js/2.bb155923.chunk.js.LICENSE.txt,1599751671551,02a3ac699f02b7a489534afa4c6433cf4a4b11099db186f515a1d2e95385c349
+static/css/2.a4567992.chunk.css.map,1599751671551,c1b31b222fdc95c540b99d2fe2893b1eb0d88bd8275171621193a8e49861eaca
+static/js/main.b1576011.chunk.js,1599751671440,bb76b177387b596f15b72e8f2904a7209c910b98b97bc5dce63374da00f8ca68
+static/js/runtime-main.8b39ddf8.js,1599751671551,eb0b64071120c5c4cf7febae070bab15c03787c6bebe7129f4d58b1f3deceb79
+static/js/runtime-main.8b39ddf8.js.map,1599751671552,7b5969723dae7ae2575de590d6eecbea864662b6a521280046633db49cbc6d9b
+static/js/main.b1576011.chunk.js.map,1599751671552,44d85f8182297d2a79a8d7104dc301edf7d8f2b020d336a99f73a26ee2443b4d
+static/js/2.bb155923.chunk.js,1599751671551,81203cb2bea52e88d461eb53d60c2a423842dc907e5386844221b73ef0b6c0e9
+static/js/2.bb155923.chunk.js.map,1599751671554,f3397500cd7517d11ed3cc2776a99b5ea0aafe182bdd76a1026a19e63976a9ad

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "covid-19-tracker-cfb05"
+  }
+}

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

src/App.css

@@ -9,16 +9,26 @@ body {
 .app {
   display: flex;
   justify-content: space-evenly;
+  background-color: #f5f6fa;
   padding: 20px;
 }
 
-.app_header {
+.app__dropdown {
+  background-color: white;
+}
+
+.app__header {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
   justify-content: space-between;
 }
 
+.app__header > h1 {
+  color: #fc3c3c;
+  font-size: 2rem;
+}
+
 .app__left {
   flex: 0.9;
 }
@@ -28,6 +38,25 @@ body {
   justify-content: space-between;
 }
 
+.app__right {
+  display: flex;
+  flex-direction: column;
+}
+
+.app__right .MuiCardContent-root {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.app__graphTitle {
+  margin-top: 20px;
+}
+
+.app__graph {
+  flex-grow: 1;
+}
+
 @media (max-width: 990px) {
   .app {
     flex-direction: column;

src/App.js

@@ -25,6 +25,7 @@ function App() {
     });
     const [mapZoom, setMapZoom] = useState(3);
     const [mapCountries, setMapCountries] = useState([]);
+    const [casesType, setCasesType] = useState("cases");
 
     // get the worldwide data for the first access the the page
     useEffect(() => {
@@ -80,9 +81,9 @@ function App() {
     return (
         <div className="app">
             <div className="app__left">
-                <div className="app_header">
+                <div className="app__header">
                     <h1>COVID-19 TRACKER</h1>
-                    <FormControl className="app_dropdown">
+                    <FormControl className="app__dropdown">
                         <Select
                             variant="outlined"
                             onChange={onCountryChange}
@@ -100,30 +101,43 @@ function App() {
 
                 <div className="app__stats">
                     <InfoBox
+                        isRed
+                        active={casesType === "cases"}
+                        onClick={(e) => setCasesType("cases")}
                         title="Coronavirus Cases"
                         cases={prettyPrintStat(countryInfo.todayCases)}
                         total={prettyPrintStat(countryInfo.cases)}
                     />
                     <InfoBox
+                        active={casesType === "recovered"}
+                        onClick={(e) => setCasesType("recovered")}
                         title="Recovered"
                         cases={prettyPrintStat(countryInfo.todayRecovered)}
                         total={prettyPrintStat(countryInfo.recovered)}
                     />
                     <InfoBox
+                        isRed
+                        active={casesType === "deaths"}
+                        onClick={(e) => setCasesType("deaths")}
                         title="Deaths"
                         cases={prettyPrintStat(countryInfo.todayDeaths)}
                         total={prettyPrintStat(countryInfo.deaths)}
                     />
                 </div>
 
-                <Map countries={mapCountries} casesType="cases" center={mapCenter} zoom={mapZoom} />
+                <Map
+                    countries={mapCountries}
+                    casesType={casesType}
+                    center={mapCenter}
+                    zoom={mapZoom}
+                />
             </div>
             <Card className="app__right">
                 <CardContent>
                     <h3>Live Cases by Country</h3>
                     <Table countries={tableData} />
-                    <h3>Worldwide new cases</h3>
-                    <LineGraph />
+                    <h3 className="app__graphTitle">Worldwide new {casesType}</h3>
+                    <LineGraph className="app__graph" casesType={casesType} />
                 </CardContent>
             </Card>
         </div>

src/InfoBox.css

@@ -1,5 +1,6 @@
 .infoBox {
     flex: 1;
+    cursor: pointer;
 }
 
 .infoBox:not(:last-child) {

src/InfoBox.js

@@ -2,16 +2,16 @@ import React from "react";
 import { Card, CardContent, Typography } from "@material-ui/core";
 import "./InfoBox.css"
 
-function InfoBox({ title, cases, total }) {
+function InfoBox({ title, cases, isRed, active, total, ...props }) {
   return (
-    <Card className="infoBox">
+    <Card onClick={props.onClick} className={`infoBox ${active && 'infoBox--selected'} ${isRed && 'infoBox--red'}`}>
       <CardContent>
         <Typography className="infoBox__title" color="textSecondary">
           {title}
         </Typography>
 
-        <h2 className="infoBox__cases">{cases}</h2>
-
+        <h2 className={`infoBox__cases ${!isRed && "infoBox__cases--green"}`}>{cases}</h2>
+        
         <Typography className="infoBox__total" color="textSecondary">
           {total}
         </Typography>

src/LineGraph.js

@@ -47,33 +47,33 @@ const options = {
     },
 };
 
-function LineGraph({ casesType ='cases'}) {
-    const [data, setData] = useState({});
-
-    // building the chart lines
-    const buildChartData = (data, casesType = "cases") => {
-        const chartData = [];
-        let lastDataPoint;
-        for (let date in data.cases) {
-            if (lastDataPoint) {
-                const newDataPoint = {
-                    x: date,
-                    y: data[casesType][date] - lastDataPoint,
-                };
-                chartData.push(newDataPoint);
-            }
-            lastDataPoint = data[casesType][date];
+// building the chart lines
+const buildChartData = (data, casesType = "cases") => {
+    const chartData = [];
+    let lastDataPoint;
+    for (let date in data.cases) {
+        if (lastDataPoint) {
+            const newDataPoint = {
+                x: date,
+                y: data[casesType][date] - lastDataPoint,
+            };
+            chartData.push(newDataPoint);
         }
-        return chartData;
-    };
+        lastDataPoint = data[casesType][date];
+    }
+    return chartData;
+};
+
+function LineGraph({ casesType = "cases", ...props }) {
+    const [data, setData] = useState({});
 
     // request historic of all country/caseType-total of the last 120days
     useEffect(() => {
         const fetchData = async () => {
-            fetch("https:disease.sh/v3/covid-19/historical/all?lastdays=120")
+            fetch("https://disease.sh/v3/covid-19/historical/all?lastdays=120")
                 .then((response) => response.json())
                 .then((data) => {
-                    const chartData = buildChartData(data);
+                    const chartData = buildChartData(data, casesType);
                     setData(chartData);
                 });
         };
@@ -82,8 +82,7 @@ function LineGraph({ casesType ='cases'}) {
     }, [casesType]);
 
     return (
-        <div>
-            <h1>im a graph</h1>
+        <div className={props.className}>
             {/* do nothing before we finished to fetch the data */}
             {data?.length > 0 && (
                 <Line

src/Table.css

@@ -1,7 +1,8 @@
 .table {
-    margin-top: 20px;
+     margin-top: 20px;
     overflow: scroll;
     height: 400px;
+    color: #6a5d5d;
     background-color: white;
 }
 
@@ -12,6 +13,7 @@
 
 table td {
     padding: 0.5rem;
+    border: none;
 }
 
 .table tr:nth-of-type(odd) {