updated login screen button

LLuth0r · Mar 30, 2021 · b7054d5 · b7054d5
1 parent 33961d6
commit b7054d5
Showing 1 changed file with 32 additions and 19 deletions.
diff --git a/client/src/screens/Login.jsx b/client/src/screens/Login.jsx
@@ -1,25 +1,15 @@
+// DEPENDENCIES
 import React, {useState} from "react";
 import {Link} from "react-router-dom";
 
-//Styling
-import "../styles/Login.css";
-
+// MATERIAL UI COMPONENTS
+import {Button, makeStyles} from "@material-ui/core";
 
-// const useStyles = makeStyles((theme) => ({
-//   root: {},
-//   input: {
-//     background: `#F5F5F5`,
-//     width: "70vw",
-//     height: "30px",
-//     borderRadius: "20px",
-//   },
-// }));
+// STYLES
+import "../styles/Login.css";
 
 const Login = (props) => {
-  // const classes = useStyles();
-
   // setting form data state
-
   const [formData, setFormData] = useState({
     username: "",
     password: "",
@@ -28,11 +18,9 @@ const Login = (props) => {
   const {username, password} = formData;
 
   // deconstructing the handle login function from props
-
   const {handleLogin} = props;
 
   // generic handle change to grab what is put in text fields
-
   const handleChange = (e) => {
     const {name, value} = e.target;
     setFormData((prevState) => ({
@@ -41,6 +29,31 @@ const Login = (props) => {
     }));
   };
 
+  // Define useStyles function using makeStyles
+  const useStyles = makeStyles((theme) => ({
+    button: {
+      backgroundColor: "#121212",
+      color: "white",
+      textTransform: "none",
+      height: "40px",
+      width: "60vw",
+      maxWidth: "350px",
+      borderRadius: "100px",
+      margin: "50px 0px 50px 0px",
+      boxShadow: "0px 5px 5px #12121280",
+      "&:hover": {
+        backgroundColor: "#212121",
+      },
+      "&:active": {
+        boxShadow: "0px 2px 5px #12121280",
+        transform: "translateY(3px)",
+      },
+    },
+  }));
+
+  // Invoke useStyles function to add styles to the button using className
+  const classes = useStyles();
+
   return (
     <div className="login-page">
       <h3 className="login-header">Login to your account.</h3>
@@ -65,9 +78,9 @@ const Login = (props) => {
             onChange={handleChange}
           />
         </div>
-        <button className="login-button" type="submit">
+        <Button className={classes.button} variant="contained" type="submit">
           Login
-        </button>
+        </Button>
       </form>
       <p className="register-user">
         Not a member?{" "}