Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request]: Want to improve Signup Signin Cards Ui #466 #493

Merged
merged 1 commit into from
Jul 23, 2024
Merged

[Feature Request]: Want to improve Signup Signin Cards Ui #466 #493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions src/pages/SignIn/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ const SignIn = () => {
<CircularProgress color="inherit" />
</Backdrop>

<h3 className="text-center h-size">Sign In</h3>
<h3 className="text-center signin_head h-size">Sign In</h3>
<form className="mt-4">
<div className="form-group mb-4 w-100">
<TextField
Expand Down Expand Up @@ -232,7 +232,7 @@ const SignIn = () => {
,}}
/>
<Button
className="icon"
className="icon back_icon"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword === false ? (
Expand All @@ -258,28 +258,28 @@ const SignIn = () => {
</div>
)}

<div className="form-group mt-3 mb-4 w-100 d-flex justify-content-end">
<Button
className="btn btn-link float-end"
<div className="form-group mt-1 mb-1 w-100 d-flex justify-content-end">
<p
className="forgot_pass"
onClick={forgotPassword}
sx={{fontSize:"1.3rem"}}
>
Forgot Password?
</Button>
</p>
</div>

<div className="form-group mt-5 mb-4 w-100">
<div className="form-group mt-1 mb-4 w-100">
<Button
disabled={isDisabled}
className="btn btn-g btn-lg w-100 "
className="btn sign_in_but btn-g btn-lg w-100 "
onClick={signIn}
>
Sign In
</Button>
</div>

<div className="form-group mb-4 w-100 signInOr " >
<p className="text-center">OR</p>
<div className="form-group mb-2 w-100 signInOr " >
<div className='or_contain'> <p className="text-center">OR</p></div>
<Button
className="w-100"
variant="outlined"
Expand All @@ -289,10 +289,10 @@ const SignIn = () => {
</Button>
</div>

<p className="text-center" style={{fontSize:"1.6rem",cursor:"auto"}}>
<p className="text-center mt-4" style={{fontSize:"1.6rem",cursor:"auto"}}>
Don't have an account?{' '}
<b>
<Link to="/signup" >Sign Up</Link>
<Link to="/signup " className='signin_link' >Sign Up</Link>
</b>
</p>
</form>
Expand Down
50 changes: 50 additions & 0 deletions src/pages/SignIn/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,55 @@
.loginWrapper {
padding: 75px 0px;
background: #f1f1f1;
background: url('../../assets/images/bg.webp') !important;
height: auto;
}
.sign_in_but{
background-color: #0b830b !important;
transition: 0.3s all ease-in-out !important;
}
.sign_in_but:hover{
background-color: #016201 !important;
}
.or_contain{
display: flex;
align-items: center;
justify-content: center;
font-size: 20px !important;
margin-top: 10px;
}
.signin_head{
color: #016201 !important;
}
.or_contain p{
font-size: 24px !important;
}
.forgot_pass{
font-size: 24px !important;
color: #016201 !important;
font-weight: 400;
transition: 0.3s all ease-in-out;
}
.forgot_pass:hover{
text-decoration: underline;

}
.send_otp{
color: #007bff !important;
font-size: 24px !important;
font-weight: 600;
transition: 0.3s all ease-in-out;
padding-bottom: 0px !important;
}
.send_otp:hover{
text-decoration: underline;

}

.back_icon :hover{
color: white !important;
background-color: transparent !important;
}
.btn :hover{
color: white ;
}
Expand Down Expand Up @@ -86,6 +133,9 @@ form{
margin-right: 15px;

}
.signin_link{
font-weight: 600 !important;
}
.loginWrapper{
height: 1000px;
}
Expand Down
16 changes: 8 additions & 8 deletions src/pages/SignUp/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@ const SignUp = () => {
<CircularProgress color="inherit" />
</Backdrop>

<h3 className="text-center h-size" style={{color:"#3bb77e"}}>SignUp</h3>
<h3 className="text-center signin_head h-size" >SignUp</h3>
<form className="mt-4 w-100">
<div className="form-group mb-4 w-100">
<TextField
Expand Down Expand Up @@ -432,7 +432,7 @@ const SignUp = () => {
</div>

{otpCount < OTP_LIMIT && (
<div className="form-group mb-4 w-100">
<div className="form-group w-100">
<TextField
id="phoneNumber"
type="tel"
Expand All @@ -456,14 +456,14 @@ const SignUp = () => {
{inputErrors.phoneNumber}
</Typography>
)}
<Button
<p
onClick={handleSendOtp}
style={{fontSize:"1.5rem",marginTop:"20px"}}

className='send_otp'
disabled={!validatePhoneNumber(formFields.phoneNumber)}
>
Send OTP
</Button>
</p>
</div>
)}

Expand Down Expand Up @@ -493,10 +493,10 @@ const SignUp = () => {
</div>
)}

<div className="form-group mt-5 mb-4 w-100">
<div className="form-group mb-4 w-100">
<Button
disabled={isDisabled}
className="btn btn-g btn-lg w-100"
className="btn sign_in_but btn-g btn-lg w-100"
onClick={signUp}
>
Sign Up
Expand All @@ -506,7 +506,7 @@ const SignUp = () => {
<p className="text-center" style={{fontSize:"1.6rem",cursor:"auto"}}>
Already have an account?
<b>
<Link to="/signIn">Sign In</Link>
<Link to="/signIn" className='signin_link'>Sign In</Link>
</b>
</p>
</form>
Expand Down