From 663659101168f441b65593064ddf81615906db01 Mon Sep 17 00:00:00 2001 From: Isaac Kabucho Date: Thu, 3 Aug 2023 17:03:27 +0300 Subject: [PATCH 1/2] made changes to both login.css and login.jsx to add changes --- src/pages/Login/Login.css | 50 +++++++++++++------- src/pages/Login/Login.jsx | 99 +++++++++++++++++++++++---------------- 2 files changed, 90 insertions(+), 59 deletions(-) diff --git a/src/pages/Login/Login.css b/src/pages/Login/Login.css index db88bb9..e524692 100644 --- a/src/pages/Login/Login.css +++ b/src/pages/Login/Login.css @@ -3,40 +3,54 @@ flex-direction: column; justify-content: center; align-items: center; + gap: 1.5rem; height: 100vh; font-family: 'Roboto', 'Open Sans', sans-serif; } -.MuiFormControl-root { - margin-bottom: 15px; - /* Adjust margin between the fields */ +.login-wrapper-icon { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } +.login-wrapper-input { + display: flex; + flex-direction: column; + gap: 1rem; + width: 35%; +} + + + .MuiInputBase-input { font-family: 'Roboto', 'Open Sans', sans-serif; - margin-top: 15px; - margin-bottom: 15px; } -.checkbox-wrapper { - display: flex; - align-items: center; - margin-bottom: 5px; - /* Adjust margin between the checkbox and the label */ -} -.forgot-password { - margin-bottom: 5px; - /* Adjust margin below the "Forgot Password" link */ +.checkbox-wrapper input { + margin-right: .5rem; } + + .login-button { - /* Adjust margin above the login button */ background-color: #1976d2; - /* Set primary color */ color: #fff; - padding: 10px 20px; + padding: .5rem 1.25rem; border: none; - border-radius: 4px; + font-weight: 700; + font-size: 1.25rem; + border-radius: .25rem; cursor: pointer; + width: 35%; } + +.login-wrapper-forgot-register { + display: flex; + width: 35%; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; +} \ No newline at end of file diff --git a/src/pages/Login/Login.jsx b/src/pages/Login/Login.jsx index 1fe8987..deae428 100644 --- a/src/pages/Login/Login.jsx +++ b/src/pages/Login/Login.jsx @@ -6,6 +6,8 @@ import { TextField, Typography, } from '@mui/material'; +import Avatar from '@mui/material/Avatar'; +import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; import { Visibility, VisibilityOff } from '@mui/icons-material'; import { Link } from 'react-router-dom'; import './Login.css'; @@ -44,51 +46,66 @@ function Login() { return (
- setUsernameOrEmail(e.target.value)} - /> - setPassword(e.target.value)} - InputProps={{ - endAdornment: ( - - setShowPassword(!showPassword)} - onMouseDown={(e) => e.preventDefault()} - > - {showPassword ? ( - - ) : ( - - )} - - - ), - }} - /> -
- setRememberMe(e.target.checked)} +
+ + + + + Sign In + +
+
+ setUsernameOrEmail(e.target.value)} + /> + setPassword(e.target.value)} + InputProps={{ + endAdornment: ( + + + setShowPassword(!showPassword) + } + onMouseDown={(e) => e.preventDefault()} + > + {showPassword ? ( + + ) : ( + + )} + + + ), + }} /> - +
+ setRememberMe(e.target.checked)} + /> + +
- - Forgot Password - + - - Don't have an account? Please{' '} - register here - +
+ + Forgot Password + + + Don't have an account? Please{' '} + register here + +
); } From 78d809643868810ab90524cd8cfcef9605996fe5 Mon Sep 17 00:00:00 2001 From: Isaac Kabucho Date: Fri, 4 Aug 2023 11:04:38 +0300 Subject: [PATCH 2/2] made changes to login.jsx to add css using material UI --- src/components/Register/Register.css | 3 +- src/components/Register/Register.jsx | 210 +++++++++++++++++++-------- 2 files changed, 153 insertions(+), 60 deletions(-) diff --git a/src/components/Register/Register.css b/src/components/Register/Register.css index 4eff54f..5d00d0f 100644 --- a/src/components/Register/Register.css +++ b/src/components/Register/Register.css @@ -5,4 +5,5 @@ justify-content: center; min-height: 100vh; padding: 16px; -} + +} \ No newline at end of file diff --git a/src/components/Register/Register.jsx b/src/components/Register/Register.jsx index d4f9dab..ba30e81 100644 --- a/src/components/Register/Register.jsx +++ b/src/components/Register/Register.jsx @@ -8,8 +8,14 @@ import { Typography, Container, IconButton, + Grid, + Box, + Avatar, } from '@mui/material'; import { Visibility, VisibilityOff } from '@mui/icons-material'; +import CssBaseline from '@mui/material/CssBaseline'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; +import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; import axios from 'axios'; import './Register.css'; @@ -51,67 +57,153 @@ const Register = () => { } }; + const defaultTheme = createTheme(); return ( - - setUsername(e.target.value)} - /> - setEmail(e.target.value)} - /> - setPassword(e.target.value)} - InputProps={{ - endAdornment: ( - - {showPassword ? : } - - ), - }} - /> - setConfirmPassword(e.target.value)} - InputProps={{ - endAdornment: ( - + + + + + + + + Sign up + + + + + + setUsername(e.target.value) + } + /> + + + setEmail(e.target.value)} + /> + + + + setPassword(e.target.value) + } + InputProps={{ + endAdornment: ( + + {showPassword ? ( + + ) : ( + + )} + + ), + }} + /> + + + + setConfirmPassword(e.target.value) + } + InputProps={{ + endAdornment: ( + + {showConfirmPassword ? ( + + ) : ( + + )} + + ), + }} + /> + + + + } + label='I agree to the Terms and Conditions' + /> + + Read our{' '} + + Privacy Policy + + . + + + + - + Sign Up + + + + + Already have an account? Sign in + + + + + + + ); };