Fix Dark Mode Bug

Author: PrinceSumberia

src/App.js

@@ -41,9 +41,21 @@ class App extends Component {
                   />
                 )}
               />
-              <Route exact path="/symptoms" render={() => <Symptoms />} />
-              <Route exact path="/stay-safe" render={() => <StaySafe />} />
-              <Route exact path="/essentials" render={() => <Help />} />
+              <Route
+                exact
+                path="/symptoms"
+                render={() => <Symptoms isDarkMode={isDarkMode} />}
+              />
+              <Route
+                exact
+                path="/stay-safe"
+                render={() => <StaySafe isDarkMode={isDarkMode} />}
+              />
+              <Route
+                exact
+                path="/essentials"
+                render={() => <Help isDarkMode={isDarkMode} />}
+              />
               <Route
                 path="/"
                 render={() => (

src/components/StaySafe.js

@@ -19,13 +19,18 @@ class StaySafe extends Component {
       { src: Fifth, title: "Keep Distance" },
       { src: Sixth, title: "Stay Home Stay Safe" },
     ];
-    const { classes } = this.props;
+    const { classes, isDarkMode } = this.props;
     return (
       <div className={classes.staySafe}>
         <h1>Stay Safe</h1>
         <div className={classes.cardsBox}>
           {svgIcons.map((s, i) => (
-            <Cards key={i} src={s.src} title={s.title} />
+            <Cards
+              key={i}
+              src={s.src}
+              title={s.title}
+              isDarkMode={isDarkMode}
+            />
           ))}
         </div>
       </div>

src/styles/CardsStyles.js

@@ -1,4 +1,5 @@
 import sizes from "./sizes";
+import colors from "../constants/colors";
 
 export default {
   card: {
@@ -9,7 +10,8 @@ export default {
     alignItems: "center",
     flex: "0 0 20%",
     padding: "3rem 4rem",
-    backgroundColor: "#fff",
+    backgroundColor: ({ isDarkMode }) =>
+      isDarkMode ? colors.darkPurple : "#fff",
     marginBottom: "7rem",
     transition: "all .5s",
     boxShadow: `0 1px 2.3px -50px rgba(0, 0, 0, 0.014),

src/styles/HelpStyles.js

@@ -1,4 +1,5 @@
 import sizes from "./sizes";
+import colors from "../constants/colors";
 
 export default {
   help: {
@@ -26,7 +27,8 @@ export default {
 
   card: {
     boxShadow: "0 1.5rem 3.5rem rgba(0,0,0,0.1)",
-    backgroundColor: "#fff",
+    backgroundColor: ({ isDarkMode }) =>
+      isDarkMode ? colors.darkPurple : "#fff",
     borderRadius: "1rem",
     padding: "3.5rem",
     width: "20%",