Skip to content

Commit 3cad0c5

Browse files
author
Aishwarya Nair
committed
fix css for log in sign up
1 parent c40164c commit 3cad0c5

File tree

3 files changed

+240
-189
lines changed

3 files changed

+240
-189
lines changed

‎Frontend/src/Components/LoginSignUp/Login.jsx‎

Lines changed: 70 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,76 @@
1-
import React from 'react'
2-
import './LoginSignUp.css'
3-
import {useState} from 'react'
4-
import { useNavigate } from "react-router-dom";
1+
import React from "react";
2+
import "./LoginSignUp.css";
3+
import {useState} from "react";
4+
import {useNavigate} from "react-router-dom";
55

6-
import password_icon from '../Assets/password.png'
7-
import user_icon from '../Assets/user.png'
6+
import password_icon from "../Assets/password.png";
7+
import user_icon from "../Assets/user.png";
88

9-
import { loginUser } from '../../User/UserServiceAPI'
10-
import {resetUserPasswordUsingFirebase} from "../../Authentication/UserAuthenticationController"
9+
import {loginUser} from "../../User/UserServiceAPI";
10+
import {resetUserPasswordUsingFirebase} from "../../Authentication/UserAuthenticationController";
1111

1212
export const Login = ({setAction}) => {
13-
const navigate = useNavigate();
14-
15-
const [userEmail, setUserEmail] = useState("");
16-
const [userPassword, setUserPassword] = useState("");
17-
18-
19-
return (
20-
<div className = "login-container">
21-
<div className="inputs">
22-
<div className="input">
23-
<div className="input-container">
24-
<img src= {user_icon} alt="" />
25-
<input type="text" placeholder = "Email" onChange={(e) => {setUserEmail(e.target.value);}} value={userEmail}/>
26-
</div>
27-
</div>
28-
<div className="input">
29-
<div className="input-container">
30-
<img src= {password_icon} alt="" />
31-
<input type="password" placeholder = "Password" onChange={(e) => {setUserPassword(e.target.value);}} value={userPassword}/>
32-
</div>
33-
</div>
34-
35-
</div>
36-
<div className="forgot-password"> Forgot Password? <span onClick={()=>resetUserPasswordUsingFirebase(userEmail)}> Click Here.</span></div>
37-
<div className="submit-container">
38-
<div className="submit"
39-
onClick = {async () => {
40-
const result = await loginUser(userEmail, userPassword)
41-
if(result) {
42-
navigate("/landing");
43-
}
44-
}}>Log In</div>
45-
</div>
46-
<div className="signup-nav"> Don't have an account? <span onClick={()=>setAction("Sign Up")}> Sign Up.</span></div>
47-
</div>
48-
49-
)
50-
}
13+
const navigate = useNavigate();
5114

15+
const [userEmail, setUserEmail] = useState("");
16+
const [userPassword, setUserPassword] = useState("");
5217

18+
return (
19+
<div className="login-container">
20+
<div className="inputs">
21+
<div className="input">
22+
<div className="input-container">
23+
<img src={user_icon} alt="" />
24+
<input
25+
type="text"
26+
placeholder="Email"
27+
onChange={(e) => {
28+
setUserEmail(e.target.value);
29+
}}
30+
value={userEmail}
31+
/>
32+
</div>
33+
</div>
34+
<div className="input">
35+
<div className="input-container">
36+
<img src={password_icon} alt="" />
37+
<input
38+
type="password"
39+
placeholder="Password"
40+
onChange={(e) => {
41+
setUserPassword(e.target.value);
42+
}}
43+
value={userPassword}
44+
/>
45+
</div>
46+
</div>
47+
</div>
48+
<div className="forgot-password">
49+
{" "}
50+
Forgot Password?{" "}
51+
<span onClick={() => resetUserPasswordUsingFirebase(userEmail)}>
52+
{" "}
53+
Click Here.
54+
</span>
55+
</div>
56+
<div className="submit-container">
57+
<div
58+
className="submit"
59+
onClick={async () => {
60+
const result = await loginUser(userEmail, userPassword);
61+
if (result) {
62+
navigate("/landing");
63+
}
64+
}}
65+
>
66+
Log In
67+
</div>
68+
</div>
69+
<div className="signup-nav">
70+
{" "}
71+
Don't have an account?{" "}
72+
<span onClick={() => setAction("Sign Up")}> Sign Up.</span>
73+
</div>
74+
</div>
75+
);
76+
};

‎Frontend/src/Components/LoginSignUp/LoginSignUp.css‎

Lines changed: 80 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,129 @@
11
.container-loginsignup {
2-
display: flex;
3-
flex-direction: column;
4-
margin: auto;
5-
margin-top: 80px;
6-
width: 600px;
7-
background: #fff;
8-
padding-bottom: 30px;
2+
display: flex;
3+
flex-direction: column;
4+
margin: auto;
5+
margin-top: 80px;
6+
width: 600px;
7+
background: #fff;
8+
padding-bottom: 30px;
99
}
1010

1111
.header {
12-
display: flex;
13-
flex-direction: column;
14-
align-items: center;
15-
gap: 9px;
16-
width: 100%;
17-
margin-top: 30px;
12+
display: flex;
13+
flex-direction: column;
14+
align-items: center;
15+
gap: 9px;
16+
width: 100%;
17+
margin-top: 30px;
1818
}
1919

2020
.text {
21-
color: #000;
22-
font-size: 38px;
23-
font-weight: 700;
21+
color: #000;
22+
font-size: 38px;
23+
font-weight: 700;
2424
}
2525

2626
.underline {
27-
width: 61px;
28-
height: 6px;
29-
background: #52CC65;
30-
border-radius: 9px;
27+
width: 61px;
28+
height: 6px;
29+
background: #52cc65;
30+
border-radius: 9px;
3131
}
3232

3333
.input img {
34-
width: 25px;
35-
height: 25px;
34+
width: 25px;
35+
height: 25px;
3636
}
3737

3838
.inputs {
39-
margin-top: 55px;
40-
display: flex;
41-
flex-direction: column;
42-
gap: 25px;
39+
margin-top: 55px;
40+
display: flex;
41+
flex-direction: column;
42+
gap: 25px;
4343
}
4444

4545
.input-container {
46-
display: flex;
47-
gap: 20px;
48-
align-items: center;
46+
display: flex;
47+
gap: 20px;
48+
align-items: center;
4949
}
5050

5151
.input {
52-
display: flex;
53-
align-items: center;
54-
margin: auto;
55-
width: 380px;
56-
height: 70px;
57-
background: #e9e9e9;
58-
border-radius: 5px;
59-
padding: 0rem 1rem;
52+
display: flex;
53+
align-items: center;
54+
margin: auto;
55+
width: 380px;
56+
height: 70px;
57+
background: #e9e9e9;
58+
border-radius: 5px;
59+
padding: 0rem 1rem;
6060
}
6161

6262
.input input {
63-
height: 50px;
64-
width: 400px;
65-
background: transparent;
66-
border: none;
67-
outline: none;
68-
color: #797979;
69-
font-size: 19px;
63+
height: 50px;
64+
width: 400px;
65+
background: transparent;
66+
border: none;
67+
outline: none;
68+
color: #797979;
69+
font-size: 19px;
7070
}
7171

7272
.forgot-password {
73-
padding-left: 110px;
74-
margin-top: 27px;
75-
color: #797979;
76-
font-size: 18px;
73+
padding-left: 95px;
74+
/* margin-top: 27px; */
75+
color: #797979;
76+
font-size: 18px;
7777
}
7878

7979
.forgot-password span {
80-
color: #52CC65;
81-
cursor: pointer;
80+
color: #52cc65;
81+
cursor: pointer;
8282
}
8383

8484
.submit-container {
85-
display: flex;
86-
gap: 30px;
87-
margin: auto;
85+
display: flex;
86+
gap: 30px;
87+
margin: auto;
8888
}
8989

9090
.submit {
91-
display: flex;
92-
justify-content: center;
93-
align-items: center;
94-
width: 110px;
95-
height: 60px;
96-
color: #fff;
97-
background: #52CC65;
98-
border-radius: 10px;
99-
font-size: 19px;
100-
font-weight: 700;
101-
cursor: pointer;
91+
display: flex;
92+
justify-content: center;
93+
align-items: center;
94+
width: 110px;
95+
height: 60px;
96+
color: #fff;
97+
background: #52cc65;
98+
border-radius: 10px;
99+
font-size: 19px;
100+
font-weight: 700;
101+
cursor: pointer;
102102
}
103103

104104
.gray {
105-
background: #e9e9e9;
106-
color: #676767;
107-
}
108-
109-
.signup-nav {
110-
display:flex;
111-
justify-content: center;
112-
align-items: center;
113-
}
114-
115-
.signup-nav span{
116-
color: #1f76ef;
105+
background: #e9e9e9;
106+
color: #676767;
117107
}
118108

109+
.signup-nav,
119110
.login-nav {
120-
display:flex;
121-
justify-content: center;
122-
align-items: center;
111+
display: flex;
112+
justify-content: center;
113+
align-items: center;
114+
margin-top: 10px;
115+
gap: 5px;
123116
}
124117

125-
.login-nav span{
126-
color: #1f76ef;
127-
}
128-
129-
.login-container {
130-
display: flex;
131-
flex-direction: column;
132-
align-items: center;
118+
.signup-nav span,
119+
.login-nav span {
120+
color: #1f76ef;
121+
cursor: pointer;
133122
}
134123

124+
.login-container,
135125
.signup-container {
136-
display: flex;
137-
flex-direction: column;
138-
align-items: center;
126+
display: flex;
127+
flex-direction: column;
128+
gap: 20px;
139129
}
140-

0 commit comments

Comments
 (0)