Skip to content

Commit

Permalink
updated register screen button
Browse files Browse the repository at this point in the history
  • Loading branch information
zac-olds committed Mar 30, 2021
1 parent ab0bda9 commit 33961d6
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 13 deletions.
6 changes: 3 additions & 3 deletions client/src/screens/Onboarding.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const info = [
backgroundColor: "#96B4B660",
foregroundColor: "#FFFFFF",
buttonColor: "#FE5D2A",
hoverColor: "#121212",
hoverColor: "#e43101",
headColor: "#121212",
},
{
Expand All @@ -31,7 +31,7 @@ const info = [
backgroundColor: "#FE5D2A",
foregroundColor: "#FFFFFF",
buttonColor: "#121212",
hoverColor: "#FE5D2A",
hoverColor: "#212121",
headColor: "#FFFFFF",
},
{
Expand All @@ -43,7 +43,7 @@ const info = [
backgroundColor: "#96B4B660",
foregroundColor: "#FFFFFF",
buttonColor: "#FE5D2A",
hoverColor: "#121212",
hoverColor: "#e43101",
headColor: "#121212",
},
];
Expand Down
38 changes: 30 additions & 8 deletions client/src/screens/Register.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ import {Link} from "react-router-dom";

// COMPONENTS
import ProgressDots from "../components/OnboardingCarousel/ProgressDots";
// import Button from "@material-ui/core/Button";

// MATERIAL UI COMPONENTS
import {Button, makeStyles} from "@material-ui/core";

// STYLES
import "../styles/Register.css";
Expand All @@ -16,7 +18,6 @@ import "../styles/Register.css";

const Register = (props) => {
// setting form data state

const [formData, setFormData] = useState({
first_name: "",
last_name: "",
Expand All @@ -28,7 +29,6 @@ const Register = (props) => {
const {first_name, last_name, username, email, password} = formData;

// deconstructing handle register function from auth

const {handleRegister} = props;

// generic handle change for input fields
Expand All @@ -40,6 +40,31 @@ const Register = (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="register-page">
Expand Down Expand Up @@ -85,12 +110,9 @@ const Register = (props) => {
onChange={handleChange}
/>
</div>
<button className="sign-up-button" type="submit">
<Button className={classes.button} variant="contained" type="submit">
Sign up
</button>
{/* <Button className="register-button" variant="contained" type="submit">
Register
</Button> */}
</Button>
</form>
<p className="login-user">
Already have an account? <Link to="/login">Login</Link>
Expand Down
4 changes: 2 additions & 2 deletions client/src/styles/Register.css
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
width: 100%;
}

.sign-up-button {
/* .sign-up-button {
background-color: #121212;
color: white;
border: none;
Expand All @@ -81,7 +81,7 @@
background-color: #fe5d2a;
box-shadow: 0px 2px 5px #12121280;
transform: translateY(3px);
}
} */

.login-user {
max-width: 80vw;
Expand Down

0 comments on commit 33961d6

Please sign in to comment.