make changes for screen tests

src/App.css

@@ -37,16 +37,23 @@ body {
 }
 
 .dashboard-title {
+  width: 100%;
   font-family: Arial Black;
   text-align: center;
   align-self: center;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+  flex-direction: row;
   font-size: xx-large;
   background-color: rgb(215, 192, 252);
 }
 
 .last-update {
+  width: 100%;
   font-size: small;
   text-align: end;
+  font-weight: 500;
 }
 
 .developer {
@@ -62,6 +69,28 @@ body {
   width: 1em;
 }
 
+.gov-logo {
+  width: 1em;
+}
+
+.title-text {
+  margin: 0 1em 0 1em;
+  font-size: medium;
+}
+
+.numeric-card {
+  height: 30vh;
+  width: 28vw;
+  padding: 20px;
+  box-shadow: 5px 10px 8px 10px #888888;
+  border-radius: 15px;
+  margin: 20px;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 @media screen and (min-width: 320px) {
   .numeric-card {
     height: 200px;
@@ -172,7 +201,7 @@ body {
 
   .card-title {
     color: black;
-    font-size: 1em;
+    font-size: 2em;
     font-weight: 600;
     font-family: sans-serif;
   }
@@ -201,6 +230,10 @@ body {
     font-size: xx-large;
     background-color: rgb(215, 192, 252);
   }
+
+  .title-text {
+    font-size: x-large;
+  }
 }
 
 @media screen and (min-width: 1200px) {
@@ -219,14 +252,14 @@ body {
 
   .card-title {
     color: black;
-    font-size: 1em;
+    font-size: 2em;
     font-weight: 600;
     font-family: sans-serif;
   }
 
   .card-data {
     color: black;
-    font-size: 4em;
+    font-size: 6em;
     font-family: sans-serif;
   }
 
@@ -243,17 +276,30 @@ body {
   }
 
   .dashboard-title {
+    height: 10vh;
     text-align: center;
     align-self: center;
     font-size: xx-large;
     background-color: rgb(215, 192, 252);
   }
+
+  .title-text {
+    font-size: xx-large;
+  }
+
+  .nscm-logo {
+    width: 2.5em;
+  }
+  
+  .gov-logo {
+    width: 2.5em;
+  }
 }
 
 @media screen and (min-width: 2560px) {
   .numeric-card {
-    height: 200px;
-    width: 300px;
+    height: 30vh;
+    width: 28vw;
     padding: 20px;
     box-shadow: 5px 10px 8px 10px #888888;
     border-radius: 15px;
@@ -266,14 +312,14 @@ body {
 
   .card-title {
     color: black;
-    font-size: 1em;
+    font-size: 6em;
     font-weight: 600;
     font-family: sans-serif;
   }
 
   .card-data {
     color: black;
-    font-size: 4em;
+    font-size: 18em;
     font-family: sans-serif;
   }
 
@@ -292,9 +338,20 @@ body {
   .dashboard-title {
     text-align: center;
     align-self: center;
-    font-size: xx-large;
     background-color: rgb(215, 192, 252);
   }
+
+  .title-text {
+    font-size: 2vw;
+  }
+
+  .nscm-logo {
+    width: 5em;
+  }
+  
+  .gov-logo {
+    width: 5em;
+  }
 }
 
 div.chart {

src/App.js

@@ -1,10 +1,6 @@
 import logo from './logo.png';
 import './App.css';
 import React, { useEffect, useState } from 'react';
-import BarChart from './BarChart';
-import TestResultChart from './TestResultChart';
-import GenderChart from './GenderChart';
-import RegistraionChart from './RegistraionChart';
 
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
@@ -84,7 +80,7 @@ function App() {
       setPositives(traitCount + diseaseCount);
       setTraits(traitCount);
       setDiseases(diseaseCount);
-      setLastUpdate(lastUpdate);
+      setLastUpdate(Date.now());
     });
   }, []);
 
@@ -104,10 +100,13 @@ function App() {
   return (
     <div>
       <div class='dashboard-title'>
-        <img className="nscm-logo" src={require('./logo_nobg.png')} /> HPOS Sickel Cell Test Dashboard
+        <img className="nscm-logo" src={require('./logo_nobg.png')} />
+         <div className='title-text'>HPOS Sickel Cell Test Dashboard</div>
+         <img className="gov-logo" src={require('./gov_logo2.png')} />
+        <img className="gov-logo" src={require('./gov_logo3.png')} />
       </div>
       <div className='last-update'>
-        Updated At: {Date(lastUpdate).toString()}
+        Updated At: {Date(lastUpdate).toLocaleString()}
       </div>
       <div className='cards-container'>
         <div className='cards-row'>