Minor change

Author: PrinceSumberia

src/components/CovidApp.js

@@ -207,7 +207,7 @@ class CovidApp extends Component {
               <h2 className={classes.tableHeading}>
                 State/UT Wise Data (Sortable){" "}
               </h2>
-              <DisplayTable tableData={tableData} />
+              <DisplayTable tableData={tableData} isDarkMode={isDarkMode} />
             </div>
           </div>
         )}

src/components/DisplayTable.js

@@ -35,8 +35,11 @@ const useSortableData = (items, config = null) => {
   return { items: sortedItems, requestSort, sortConfig };
 };
 
-const DisplayTable = (props) => {
-  const { items, requestSort, sortConfig } = useSortableData(props.tableData);
+const DisplayTable = ({ tableData, isDarkMode }) => {
+  const { items, requestSort, sortConfig } = useSortableData(tableData);
+  const lightText = {
+    color: isDarkMode && "rgba(255,255,255,.75)",
+  };
   const getClassNamesFor = (name) => {
     if (!sortConfig) {
       return;
@@ -98,11 +101,11 @@ const DisplayTable = (props) => {
       <tbody>
         {items.map((item) => (
           <tr key={item.id}>
-            <td>{item.name}</td>
-            <td>{item.confirmed}</td>
-            <td>{item.active}</td>
-            <td>{item.discharged}</td>
-            <td>{item.deaths}</td>
+            <td style={lightText}>{item.name}</td>
+            <td style={lightText}>{item.confirmed}</td>
+            <td style={lightText}>{item.active}</td>
+            <td style={lightText}>{item.discharged}</td>
+            <td style={lightText}>{item.deaths}</td>
           </tr>
         ))}
       </tbody>

src/components/MapSection.js

@@ -2,39 +2,7 @@ import React, { Component } from "react";
 import DisplayPanels from "./DisplayPanels";
 import Map from "./Map/Map";
 import { withStyles } from "@material-ui/styles";
-
-const styles = {
-  mainContainer: {
-    backgroundColor: "rgba(129, 124, 155, 0.05)",
-    padding: "7rem 3rem",
-    textAlign: "center",
-  },
-  heading: {
-    fontSize: "2.5rem",
-  },
-  para: {
-    marginBottom: "3rem",
-    color: "#bbb",
-  },
-  container: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  mapContainer: {
-    flex: "1",
-  },
-  panelsContainer: {
-    display: "flex",
-    flex: "0 0 30%",
-    justifyContent: "center",
-    flexWrap: "wrap",
-    alignItems: "center",
-  },
-  singlePanel: {
-    width: "50%",
-  },
-};
+import styles from "../styles/MapSection";
 
 class MapSection extends Component {
   constructor(props) {

src/components/Paper.js

@@ -4,7 +4,7 @@ import { withStyles } from "@material-ui/styles";
 const styles = {
   darkMode: {
     backgroundColor: "#121212",
-    color: "rgba(255,255,255,.87)",
+    color: "rgba(255,255,255,.75)",
   },
 };
 

src/constants/colors.js

@@ -6,3 +6,10 @@ export default {
   darkPurple: "#1A1053",
   lightPurple: "#817C9B",
 };
+
+//  purple: rgb(98, 54, 255);
+//  red: rgb(249, 52, 94);
+//  green: rgb(28, 177, 66);
+//  orange: rgb(250, 100, 0);
+//  darkPurple: rgb(26, 16, 83);
+//  lightPurple: rgb(129, 124, 155);

src/styles/DisplayPanelsStyles.js

@@ -6,11 +6,29 @@ export default {
     flexDirection: "column",
     marginBottom: "3.5rem",
     marginTop: "3.5rem",
-    boxShadow: "0 1rem 2rem rgba(0, 0, 0, 0.05)",
+    // boxShadow: "0 1rem 2rem rgba(0, 0, 0, 0.05)",
     backgroundColor: (props) => (props.isDarkMode ? colors.darkPurple : "#fff"),
     margin: (props) => (props.isMiniPanel ? "3rem 1rem" : "3.5rem 0"),
     padding: (props) => (props.isMiniPanel ? "1.5rem 1.5rem" : "1.5rem 3rem"),
     borderRadius: (props) => (props.isMiniPanel ? "2rem" : "2.5rem"),
+
+    boxShadow: (props) => {
+      if (props.isMiniPanel) {
+        return null;
+      }
+      let color;
+      let title = props.title.toLowerCase();
+      if (title === "recovered") {
+        color = "rgb(28, 177, 66,.2)";
+      } else if (title === "deceased") {
+        color = "rgb(98, 54, 25,.2)";
+      } else if (title === "active") {
+        color = "rgb(250, 100, 0,.2)";
+      } else if (title === "confirmed") {
+        color = "rgb(249, 52, 94,.2)";
+      }
+      return `0 .5rem 3rem ${color}`;
+    },
   },
 
   heading: {
@@ -36,6 +54,7 @@ export default {
     paddingTop: ".5rem",
     paddingBottom: ".5rem",
   },
+
   dataChange: {
     fontSize: (props) => (props.isMiniPanel ? "1.4rem" : "inherit"),
     color: (props) => {

src/styles/MapSection.js

@@ -0,0 +1,32 @@
+export default {
+  mainContainer: {
+    backgroundColor: "rgba(129, 124, 155, 0.05)",
+    padding: "7rem 3rem",
+    textAlign: "center",
+  },
+  heading: {
+    fontSize: "2.5rem",
+  },
+  para: {
+    marginBottom: "3rem",
+    color: "#bbb",
+  },
+  container: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  mapContainer: {
+    flex: "1",
+  },
+  panelsContainer: {
+    display: "flex",
+    flex: "0 0 30%",
+    justifyContent: "center",
+    flexWrap: "wrap",
+    alignItems: "center",
+  },
+  singlePanel: {
+    width: "50%",
+  },
+};