Style Form

Author: PrinceSumberia

src/components/Form.js

@@ -1,6 +1,8 @@
 import React, { Component } from "react";
+import { withStyles } from "@material-ui/styles";
+import styles from "../styles/FormStyles";
 
-export default class Form extends Component {
+class Form extends Component {
   constructor(props) {
     super(props);
 
@@ -22,18 +24,22 @@ export default class Form extends Component {
   }
 
   render() {
+    const { classes } = this.props;
     return (
       <form onSubmit={this.handleSubmit}>
         <input
+          className={classes.input}
           name="location"
           type="text"
           value={this.state.location}
           placeholder="Enter any location"
           onChange={this.handleChange}
           required
         />
-        <button>Get Help</button>
+        <button className={classes.btn}>Get Help</button>
       </form>
     );
   }
 }
+
+export default withStyles(styles)(Form);

src/components/Help.js

@@ -5,6 +5,7 @@ import Form from "./Form";
 import axios from "axios";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+import FadeIn from "react-fade-in";
 
 class Help extends Component {
   constructor(props) {
@@ -62,7 +63,7 @@ class Help extends Component {
         }
       }
     }
-    this.setState({ currentResources: resources });
+    this.setState({ currentResources: resources, isLoading: false });
   }
 
   render() {
@@ -73,7 +74,7 @@ class Help extends Component {
           for (const key2 in object[key]) {
             if (object[key].hasOwnProperty(key2)) {
               const result = object[key][key2].map((resource) => (
-                <div
+                <FadeIn
                   key={resource.phonenumber.split(0, 5)}
                   className={classes.card}
                 >
@@ -99,7 +100,7 @@ class Help extends Component {
                       Contact: {resource.phonenumber}
                     </p>
                   </div>
-                </div>
+                </FadeIn>
               ));
               return result;
             }
@@ -119,15 +120,3 @@ class Help extends Component {
 }
 
 export default withStyles(styles)(Help);
-
-// 0:
-// Gangtok:
-// CoVID-19 Testing Lab: Array(1)
-// 0:
-// category: "CoVID-19 Testing Lab"
-// city: "Gangtok"
-// contact: "https://covid.icmr.org.in/index.php/testing-labs-deatails#"
-// descriptionandorserviceprovided: "Collection Site Only"
-// nameoftheorganisation: "Sir Thutob Namgyal Memorial (STNM)"
-// phonenumber: "9845562399"
-// state: "Sikkim"

src/styles/FormStyles.js

@@ -0,0 +1,44 @@
+export default {
+  input: {
+    fontFamily: "inherit",
+    fontSize: "1.6rem",
+    border: "none",
+    padding: "1.5rem 3rem",
+    width: "20%",
+    borderRadius: "2.5rem",
+    margin: "1.5rem",
+    transition: "all .4s",
+
+    "&:focus": {
+      width: "22%",
+      outline: "none",
+    },
+
+    "&::placeholder": {
+      color: "#bbb",
+    },
+  },
+
+  btn: {
+    "&, &:active": {
+      fontFamily: "inherit",
+      fontSize: "1.4rem",
+      padding: "1.5rem 2rem",
+      backgroundColor: "#1A1053",
+      color: "#fff",
+      borderRadius: "2.5rem",
+      border: "none",
+      outline: "none",
+      transition: "all .4s",
+      transform: "translateY(-2px)",
+      boxShadow: "0 .5rem 1rem rgba(0,0,0,0.2)",
+    },
+
+    "&:hover": {
+      backgroundColor: "#000",
+      cursor: "pointer",
+      transform: "translateY(0)",
+      outline: "none",
+    },
+  },
+};

src/styles/HelpStyles.js

@@ -20,6 +20,7 @@ export default {
     display: "flex",
     margin: "2rem 0",
     flexDirection: "column",
+    textAlign: "left",
   },
 
   header: {