Add footer

Author: PrinceSumberia

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 Footer from "./components/Footer";
 
 class App extends Component {
   constructor(props) {
@@ -55,6 +56,7 @@ class App extends Component {
             </Switch>
           </div>
         </div>
+        {/* <Footer /> */}
       </Paper>
     );
   }

src/components/CovidApp.js

@@ -15,6 +15,7 @@ import stateCodes from "../constants/stateCodes";
 import Lottie from "react-lottie";
 import * as animationData from "../assets/loading.json";
 import FadeIn from "react-fade-in";
+import Footer from "./Footer";
 
 const defaultOptions = {
   loop: true,
@@ -236,6 +237,7 @@ class CovidApp extends Component {
             />
           </div>
         </div>
+        <Footer />
       </FadeIn>
     );
   }

src/components/Footer.js

@@ -0,0 +1,24 @@
+import React, { Component } from "react";
+import { withStyles } from "@material-ui/styles";
+import styles from "../styles/FooterStyles.js";
+import classNames from "classnames";
+
+class Footer extends Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <footer className={classes.footer}>
+        <button className={classNames(classes.btn, classes.github)}>
+          Contribute on Github
+        </button>
+        <button className={classNames(classes.btn, classes.twitter)}>
+          Share on Twitter
+        </button>
+        <button className={classNames(classes.btn, classes.issue)}>
+          Report an Issue
+        </button>
+      </footer>
+    );
+  }
+}
+export default withStyles(styles)(Footer);

src/components/Form.js

@@ -23,7 +23,6 @@ export default class Form extends Component {
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
-        <p>{this.state.area}</p>
         <input
           name="area"
           type="text"

src/styles/FooterStyles.js

@@ -0,0 +1,36 @@
+export default {
+  footer: {
+    display: "flex",
+    justifyContent: "space-around",
+    marginTop: "3rem",
+    padding: "4rem",
+  },
+  btn: {
+    padding: "1.5rem 4rem",
+    fontFamily: "inherit",
+    border: "none",
+    fontSize: "1.7rem",
+    borderRadius: "2rem",
+    color: "white",
+    transition: "all .3s",
+    transform: "translateY(-.5rem)",
+    boxShadow: "0 .5rem 2rem rgba(0,0,0,.5)",
+
+    "&:hover": {
+      transform: "translateY(0)",
+      boxShadow: "0 .25rem 1rem rgba(0,0,0,.25)",
+    },
+  },
+
+  github: {
+    backgroundColor: "black",
+  },
+
+  twitter: {
+    backgroundColor: "#00acee",
+  },
+
+  issue: {
+    backgroundColor: "#817C9B",
+  },
+};