Skip to content

Commit 435971e

Browse files
AnWhiteMAnWhiteM
committed
auth styles
1 parent b22f2ff commit 435971e

File tree

9 files changed

+207
-22
lines changed

9 files changed

+207
-22
lines changed

‎src/components/Login/Login.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import css from "./Login.module.css"
44

55
export default function Login() {
66
return(
7+
<div className={css.cont}>
78
<div className={css.box}>
89
<div className={css.nav}>
910
<ul className={css.navList}>
@@ -13,6 +14,6 @@ export default function Login() {
1314
</div>
1415
<LoginForm />
1516
</div>
16-
17+
</div>
1718
)
1819
}

‎src/components/Login/Login.module.css

+22
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,31 @@
1+
.cont{
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
justify-content: center;
6+
height: 100vh;
7+
background: linear-gradient(to bottom, #ffffff, #BEDBB0);
8+
font-family: "Poppins", sans-serif;
9+
10+
}
11+
12+
.nav{
13+
padding-bottom: 40px;
14+
}
15+
116
.box{
217
background-color: var(--black);
318
padding: 20px;
419
border-radius: 10px;
20+
width: 335px;
521

622
}
23+
@media screen and (min-width: 768px) {
24+
.box {
25+
width: 424px;
26+
padding: 40px;
27+
}
28+
}
729
.navList{
830
display: flex;
931
flex-direction: row;

‎src/components/LoginForm/LoginForm.jsx

+29-6
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { logIn } from '../../redux/auth/operations';
33
import { useDispatch } from 'react-redux';
44
import { useNavigate } from 'react-router-dom';
55
import css from "./LoginForm.module.css"
6+
import svg from "../../img/icons.svg";
7+
import { useState } from 'react';
68

79
export default function LoginForm() {
810
const dispatch = useDispatch();
@@ -16,6 +18,14 @@ export default function LoginForm() {
1618
}
1719
actions.resetForm();
1820
};
21+
22+
23+
const [showPassword, setShowPassword] = useState(false);
24+
25+
const togglePasswordVisibility = (event) => {
26+
event.preventDefault();
27+
setShowPassword(!showPassword);
28+
};
1929

2030
return (
2131
<div>
@@ -27,13 +37,26 @@ export default function LoginForm() {
2737
onSubmit={handleSubmit}
2838
>
2939
<Form className={css.form}>
30-
<label>Enter your Email</label>
31-
<Field type="email" name="email"/>
32-
33-
<label>Confirm a password</label>
34-
<Field type="password" name="password"/>
40+
<label htmlFor="email"/>
41+
<Field type="email" name="email" placeholder ="Enter your email" className={css.input}/>
42+
<label htmlFor="password"/>
43+
<div>
44+
<Field
45+
type={showPassword ? "text" : "password"}
46+
name="password"
47+
className={css.input}
48+
placeholder="Confirm a password"
49+
/>
50+
<button type="button "className={css.eye} onClick={togglePasswordVisibility}>
51+
{/* <svg width="18" height="18" stroke="currentColor">
52+
<use
53+
href={`${svg}${showPassword ? "#eye-slash-icon" : "#eye-icon"}`}
54+
></use>
55+
</svg> */}
56+
</button>
57+
</div>
3558

36-
<button type="submit">Log In Now</button>
59+
<button type="submit" className={css.button}>Log in Now</button>
3760
</Form>
3861
</Formik>
3962
</div>

‎src/components/LoginForm/LoginForm.module.css

+48-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,51 @@
11
.form{
22
display: flex;
33
flex-direction: column;
4-
gap: 14px;
5-
}
4+
gap:8px;
5+
}
6+
.input{
7+
width: 287px;
8+
height: 49px;
9+
color: var(--white);
10+
background-color: #1F1F1F;
11+
width: 100%;
12+
padding: 10px;
13+
border: 1px solid #bedbb07a;
14+
border-radius: 5px;
15+
outline: none;
16+
box-shadow: none;
17+
18+
transition: border var(--animation);
19+
}
20+
@media screen and (min-width: 768px) {
21+
.input {
22+
width: 344px;
23+
}
24+
}
25+
26+
.input:hover, .input:focus{
27+
border: 1px solid #bedbb0;
28+
}
29+
.button{
30+
margin-top: 24px;
31+
width: 100%;
32+
padding: 10px;
33+
background-color: #bedbb0;
34+
color: #333;
35+
border: none;
36+
border-radius: 5px;
37+
cursor: pointer;
38+
39+
font-size: 18px;
40+
font-weight: 500;
41+
transition: background-color var(--animation);
42+
}
43+
.button:hover, .button:focus{
44+
background-color: #dbffc9;
45+
}
46+
47+
.eye {
48+
background-color: transparent;
49+
border: none;
50+
color: var(--white)
51+
}

‎src/components/LoginPage/LoginPage.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
justify-content: center;
77
height: 100vh;
88
background: linear-gradient(to bottom, #ffffff, #BEDBB0);
9-
font-family: Arial, sans-serif;
9+
font-family: "Poppins", sans-serif;
1010
}
1111

1212
.img {

‎src/components/Register/Register.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import css from "./Register.module.css"
44

55
export default function Register() {
66
return(
7+
<div className={css.cont}>
78
<div className={css.box}>
89
<div className={css.nav}>
910
<ul className={css.navList}>
@@ -13,6 +14,6 @@ export default function Register() {
1314
</div>
1415
<RegistrationForm />
1516
</div>
16-
17+
</div>
1718
)
1819
}

‎src/components/Register/Register.module.css

+23
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,31 @@
1+
.cont{
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
justify-content: center;
6+
height: 100vh;
7+
background: linear-gradient(to bottom, #ffffff, #BEDBB0);
8+
font-family: "Poppins", sans-serif;
9+
10+
11+
}
12+
13+
.nav{
14+
padding-bottom: 40px;
15+
}
116
.box{
217
background-color: var(--black);
318
padding: 20px;
419
border-radius: 10px;
20+
width: 335px;
21+
522
}
23+
@media screen and (min-width: 768px) {
24+
.box {
25+
width: 424px;
26+
padding: 40px;
27+
}
28+
}
629
.navList{
730
display: flex;
831
flex-direction: row;

‎src/components/RegistrationForm/RegistrationForm.jsx

+32-9
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ import { Formik, Form, Field} from 'formik';
22
import { register } from '../../redux/auth/operations';
33
import { useDispatch } from 'react-redux';
44
import css from "./RegistrationForm.module.css"
5+
import svg from "../../img/icons.svg";
6+
import { useState } from 'react';
7+
8+
59

610

711
export const RegistrationForm = () => {
@@ -13,6 +17,13 @@ export const RegistrationForm = () => {
1317
actions.resetForm();
1418
};
1519

20+
const [showPassword, setShowPassword] = useState(false);
21+
22+
const togglePasswordVisibility = (event) => {
23+
event.preventDefault();
24+
setShowPassword(!showPassword);
25+
};
26+
1627

1728
return (
1829
<div>
@@ -27,16 +38,28 @@ export const RegistrationForm = () => {
2738
onSubmit={handleSubmit}
2839
>
2940
<Form className={css.form}>
30-
<label>Enter your name</label>
31-
<Field type="name" name="name"/>
32-
33-
<label>Enter your Email</label>
34-
<Field type="email" name="email"/>
35-
36-
<label>Create a password</label>
37-
<Field type="password" name="password"/>
41+
<label htmlFor="name"/>
42+
<Field type="name" name="name" placeholder ="Enter your name" className={css.input}/>
43+
<label htmlFor="email"/>
44+
<Field type="email" name="email" placeholder ="Enter your email" className={css.input}/>
45+
<label htmlFor="password"/>
46+
<div>
47+
<Field
48+
type={showPassword ? "text" : "password"}
49+
name="password"
50+
className={css.input}
51+
placeholder="Create a password"
52+
/>
53+
<button type="button "className={css.eye} onClick={togglePasswordVisibility}>
54+
{/* <svg width="18" height="18" stroke="currentColor">
55+
<use
56+
href={`${svg}${showPassword ? "#eye-slash-icon" : "#eye-icon"}`}
57+
></use>
58+
</svg> */}
59+
</button>
60+
</div>
3861

39-
<button type="submit">Register Now</button>
62+
<button type="submit" className={css.button}>Register Now</button>
4063
</Form>
4164
</Formik>
4265
</div>

‎src/components/RegistrationForm/RegistrationForm.module.css

+48-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,51 @@
11
.form{
22
display: flex;
33
flex-direction: column;
4-
gap: 14px;
5-
}
4+
gap:8px;
5+
}
6+
.input{
7+
width: 287px;
8+
height: 49px;
9+
color: var(--white);
10+
background-color: #1F1F1F;
11+
width: 100%;
12+
padding: 10px;
13+
border: 1px solid #bedbb07a;
14+
border-radius: 5px;
15+
outline: none;
16+
box-shadow: none;
17+
18+
transition: border var(--animation);
19+
}
20+
@media screen and (min-width: 768px) {
21+
.input {
22+
width: 344px;
23+
}
24+
}
25+
26+
.input:hover, .input:focus{
27+
border: 1px solid #bedbb0;
28+
}
29+
.button{
30+
margin-top: 24px;
31+
width: 100%;
32+
padding: 10px;
33+
background-color: #bedbb0;
34+
color: #333;
35+
border: none;
36+
border-radius: 5px;
37+
cursor: pointer;
38+
39+
font-size: 18px;
40+
font-weight: 500;
41+
transition: background-color var(--animation);
42+
}
43+
.button:hover, .button:focus{
44+
background-color: #dbffc9;
45+
}
46+
47+
.eye {
48+
background-color: transparent;
49+
border: none;
50+
color: var(--white);
51+
}

0 commit comments

Comments
 (0)