Add Symptoms and minor changes

Author: PrinceSumberia

src/App.css

@@ -3,7 +3,7 @@
  }
 
  .navBar {
-   flex: 0 0 10%;
+   flex: 0 0 8%;
    min-height: 100vh;
    background-color: #1A1053;
    color: rgba(255, 255, 255, .9);

src/App.js

@@ -6,6 +6,7 @@ import Navbar from "./components/Navbar";
 import { Switch, Route } from "react-router-dom";
 import StaySafe from "./components/StaySafe";
 import Help from "./components/Help";
+import Symptoms from "./components/Symptoms";
 
 class App extends Component {
   constructor(props) {
@@ -40,7 +41,7 @@ class App extends Component {
                   />
                 )}
               />
-              <Route exact path="/symptoms" render={() => <h1>symptoms</h1>} />
+              <Route exact path="/symptoms" render={() => <Symptoms />} />
               <Route exact path="/stay-safe" render={() => <StaySafe />} />
               <Route exact path="/essentials" render={() => <Help />} />
               <Route

src/components/Symptoms.js

@@ -1,12 +1,95 @@
 import React, { Component } from "react";
 import { withStyles } from "@material-ui/styles";
 import styles from "../styles/SymptomsStyles";
+import { Link } from "react-router-dom";
 
 class Symptoms extends Component {
   render() {
+    const { classes } = this.props;
     return (
-      <div>
-        <h1>Symptoms</h1>
+      <div className={classes.symptoms}>
+        <h2 className={classes.heading}>
+          <span>COVID-19 Coronavirus</span> - Symptoms
+        </h2>
+        <div className={classes.content}>
+          <div className={classes.mainContent}>
+            <div className={classes.alert}>
+              <p>
+                There’s currently no vaccine to prevent coronavirus disease
+                (COVID-19). So, take the necessary preventive measures.
+              </p>
+            </div>
+            <div className={classes.symptomsMain}>
+              <p>
+                On average it takes 5–6 days from when someone is infected with
+                the virus for symptoms to show, however it can take up to 14
+                days. People with mild symptoms who are otherwise healthy should
+                self-isolate. Seek medical attention if you have a fever, a
+                cough, and difficulty breathing.
+              </p>
+            </div>
+            <div className={classes.symptomsDiv}>
+              <p>
+                COVID-19 affects different people in different ways. Most
+                infected people will develop mild to moderate symptoms.
+              </p>
+              <h5 className={classes.symptomsHeading}>Common symptoms</h5>
+              <ul className={classes.sympList}>
+                <li>fever.</li>
+                <li>tiredness.</li>
+                <li>dry cough.</li>
+              </ul>
+              <h5 className={classes.symptomsHeading}>
+                Some people may experience
+              </h5>
+              <ul className={classes.sympList}>
+                <li>aches and pains.</li>
+                <li>nasal congestion.</li>
+                <li>runny</li>
+                <li>nose.</li>
+                <li>sore throat.</li>
+                <li>diarrhoea.</li>
+              </ul>
+            </div>
+            <small className={classes.info}>
+              These are for informational purposes only. Consult your local
+              medical authority for advice. (Source: World Health Organization)
+            </small>
+          </div>
+          <div className={classes.sidebar}>
+            <div className={classes.video}>
+              <iframe
+                title="coronavirus-who"
+                width="100%"
+                height="100%"
+                src="https://www.youtube.com/embed/bPITHEiFWLc"
+                frameBorder="0"
+                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+              ></iframe>
+            </div>
+            <div>
+              <h4>Useful Links</h4>
+              <ul className={classes.helpfulLinks}>
+                <li>
+                  <Link className={classes.link} to="/stay-safe">
+                    Prevention of Coronavirus.
+                  </Link>
+                </li>
+                <li>
+                  <a
+                    className={classes.link}
+                    href="https://www.who.int/emergencies/diseases/novel-coronavirus-2019"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Learn more on who.int
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

src/styles/SymptomsStyles.js

@@ -1 +1,86 @@
-export default {};
+export default {
+  symptoms: {
+    padding: ".2rem 1rem",
+  },
+
+  content: {
+    padding: "1rem",
+    display: "flex",
+  },
+
+  mainContent: {
+    padding: "4rem",
+    flex: "0 0 1",
+    border: "1px solid #ccc",
+    borderRadius: "1rem",
+    marginRight: "2rem",
+  },
+
+  sidebar: {
+    padding: ".5rem 1rem",
+    flex: "0 0 30%",
+  },
+
+  video: {
+    height: "25rem",
+    borderRadius: "1rem",
+    marginBottom: "4rem",
+    "& iframe": {
+      display: "block",
+      overflow: "hidden",
+      border: 0,
+    },
+  },
+
+  heading: {
+    marginBottom: "2rem",
+    "& span": {
+      color: "#6236FF",
+    },
+  },
+
+  alert: {
+    fontSize: "1.7rem",
+    padding: "2rem",
+    borderRadius: "1rem",
+    color: "rgb(249, 52, 94)",
+    backgroundColor: "rgb(249, 52, 94,.15)",
+    marginBottom: "2.5rem",
+  },
+
+  symptomsMain: {},
+
+  symptomsDiv: {
+    marginTop: "2rem",
+    marginBottom: "3rem",
+  },
+
+  symptomsHeading: {
+    marginTop: "1.5rem",
+    fontSize: "1.7rem",
+    textTransform: "capitalize",
+  },
+
+  sympList: {
+    padding: ".5rem 2rem",
+    textTransform: "capitalize",
+  },
+
+  helpfulLinks: {
+    padding: "1rem 2rem",
+  },
+
+  link: {
+    transition: "all .2s",
+    "&, &:visited": {
+      textDecoration: "none",
+    },
+
+    "&:hover": {
+      color: "#000",
+      marginRight: "2rem",
+    },
+  },
+
+  info: {},
+};