Skip to content

Commit a66a493

Browse files
lorenzoleitelorenzoleite
committed
Incomplete views
1 parent 50e74b7 commit a66a493

14 files changed

+477
-15
lines changed

Diff for: ‎package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@
88
"@testing-library/user-event": "^7.1.2",
99
"react": "^16.13.1",
1010
"react-dom": "^16.13.1",
11+
"react-icons": "^3.10.0",
1112
"react-router-dom": "^5.1.2",
12-
"react-scripts": "3.4.1",
13-
"react-icons": "^3.9.0",
1413
"react-scripts": "^3.4.1",
1514
"styled-components": "^5.1.0"
1615
},

Diff for: ‎src/assets/iconProfile.png

20.7 KB
Loading

Diff for: ‎src/assets/[email protected]

45.8 KB
Loading

Diff for: ‎src/assets/layerStars.png

274 KB
Loading

Diff for: ‎src/assets/[email protected]

438 KB
Loading

Diff for: ‎src/assets/[email protected]

1.2 MB
Loading

Diff for: ‎src/routes/routes.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ export default function Routes() {
1919
return(
2020
<BrowserRouter>
2121
<Switch>
22-
<Route path="/" component={Login} />
22+
<Route path="/login" component={Login} />
2323
<Route path="/register" component={Register} />
24-
<Route path="/profile/edit" component={EditProfile} />
24+
<Route path="/" component={EditProfile} />
2525
<Route path="/forgot_password" component={ForgotPassword} />
2626

2727
<Route path="/tests/new" component={NewTest} />

Diff for: ‎src/views/EditProfile/index.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import { Link, useHistory } from 'react-router-dom';
3+
import { FiImage, FiArrowLeft } from 'react-icons/fi';
4+
5+
import './styles.css';
6+
7+
import layerStars from '../../assets/layerStars.png'
8+
import fotoPerfil from '../../assets/iconProfile.png';
9+
10+
export default function EditProfile () {
11+
return(
12+
<div className="editprofile-container">
13+
14+
<Link className="arrow" to="/register">
15+
<FiArrowLeft size={24} color="#FFF" />
16+
Voltar
17+
</Link>
18+
19+
<img src={fotoPerfil} alt="Icon" />
20+
21+
<h1>Nome do Usuário</h1>
22+
<h3>Curso do Usuário</h3>
23+
24+
<form>
25+
<input placeholder="Escolha o seu curso" />
26+
<input placeholder="Nome de usuário" />
27+
28+
<div className="profile">
29+
<text>Foto de perfil</text>
30+
<button className="image" type="submit">
31+
<FiImage size={28} color="#FFF" />
32+
</button>
33+
</div>
34+
35+
<input type="password" placeholder="Confirme sua senha" />
36+
37+
<button className="button" type="submit">Enviar</button>
38+
39+
</form>
40+
</div>
41+
);
42+
}

Diff for: ‎src/views/EditProfile/styles.css

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
outline: 0;
7+
box-sizing: border-box;
8+
font: 400 20px Roboto, sans-serif;
9+
}
10+
11+
.editprofile-container {
12+
width: 100%;
13+
max-width: 1920px;
14+
height: 100vh;
15+
margin: 0 auto;
16+
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
justify-content: center;
21+
background-image: url("../../assets/layerStars.png");
22+
background-size: cover;
23+
}
24+
25+
.arrow {
26+
position: absolute;
27+
top: 30px;
28+
left: 60px;
29+
display: flex;
30+
flex-direction: row;
31+
text-decoration: none;
32+
font-weight: bold;
33+
color: #FFF;
34+
transition: opacity 0.2s;
35+
}
36+
37+
.arrow svg {
38+
margin-right: 8px;
39+
}
40+
41+
.arrow:hover {
42+
opacity: 0.8;
43+
}
44+
45+
.editprofile-container img {
46+
width: 8%;
47+
}
48+
49+
.editprofile-container h1 {
50+
font-weight: bold;
51+
font-size: 50px;
52+
color: #FFF;
53+
margin-top: 20px;
54+
}
55+
56+
.editprofile-container h3 {
57+
font-weight: bold;
58+
font-size: 20px;
59+
color: #409EF8;
60+
margin-top: 5px;
61+
margin-bottom: 50px;
62+
}
63+
64+
65+
.editprofile-container form {
66+
display: flex;
67+
flex-direction: column;
68+
align-items: center;
69+
justify-content: center;
70+
}
71+
72+
.editprofile-container form input {
73+
width: 150%;
74+
height: 50px;
75+
border: 2px solid #409EF8;
76+
border-radius: 8px;
77+
margin-bottom: 10px;
78+
text-align: center;
79+
color: #409EF8;
80+
background-color: #464646;
81+
}
82+
83+
::-webkit-input-placeholder {
84+
color: #409EF8;
85+
}
86+
87+
.editprofile-container div.profile {
88+
display: flex;
89+
flex-direction: row;
90+
align-items: center;
91+
justify-content: space-between;
92+
margin-left: 70px;
93+
margin-bottom: 10px;
94+
width: 180%;
95+
}
96+
97+
.editprofile-container form div.profile text {
98+
display: flex;
99+
align-items: center;
100+
justify-content: center;
101+
width: 150%;
102+
height: 50px;
103+
border: 2px solid #409EF8;
104+
border-radius: 8px;
105+
color: #409EF8;
106+
text-align: center;
107+
background-color: #464646;
108+
}
109+
110+
.editprofile-container form button.image {
111+
width: 25%;
112+
height: 45px;
113+
border: 2px solid #FFF;
114+
border-radius: 12px;
115+
text-decoration: none;
116+
background: #195792;
117+
margin-left: 10px;
118+
transition: filter 0.2s;
119+
}
120+
121+
.editprofile-container form button.image svg {
122+
margin-top: 5px;
123+
}
124+
125+
.editprofile-container form button.image:hover {
126+
filter: brightness(90%);
127+
}
128+
129+
.editprofile-container form button.button {
130+
width: 100%;
131+
height: 55px;
132+
border: 0;
133+
border-radius: 8px;
134+
margin-top: 10px;
135+
margin-bottom: 16px;
136+
text-align: center;
137+
text-decoration: none;
138+
color: #000;
139+
font-size: 24px;
140+
font-weight: bold;
141+
background: #409EF8;
142+
transition: filter 0.2s;
143+
}
144+
145+
.editprofile-container form button.button:hover {
146+
filter: brightness(90%);
147+
}

Diff for: ‎src/views/Login/index.js

+35-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,42 @@
11
import React from 'react';
2+
import { Link, useHistory } from 'react-router-dom';
3+
import { FiMail, FiLock, FiArrowLeft } from 'react-icons/fi';
24

35
import './styles.css';
46

5-
export default function ForgotPassword() {
7+
import layerStars from '../../assets/layerStars.png'
8+
import loboBranco from '../../assets/iconeLobo.png';
9+
10+
export default function Login() {
611
return(
7-
<h1>Dominação Mundial</h1>
12+
<div className="login-container">
13+
14+
<Link className="arrow" to="/home">
15+
<FiArrowLeft size={24} color="#FFF" />
16+
Voltar
17+
</Link>
18+
19+
<img src={loboBranco} alt="Icon" />
20+
21+
<form>
22+
<input placeholder="Digite seu email" />
23+
<input type="password" placeholder="Digite sua senha" />
24+
25+
<div className="forgot">
26+
<Link className="back-link" to="/forgot_password">
27+
Esqueci minha senha
28+
</Link>
29+
</div>
30+
31+
<button className="button" type="submit">Entrar</button>
32+
33+
<div className="account">
34+
<text>Não tem conta?</text>
35+
<Link className="back-link" to="/register">
36+
Cadastre-se!
37+
</Link>
38+
</div>
39+
</form>
40+
</div>
841
);
942
}

Diff for: ‎src/views/Login/styles.css

+123-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,124 @@
1-
h1 {
2-
color: #e02041;
1+
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
outline: 0;
7+
box-sizing: border-box;
8+
font: 400 20px Roboto, sans-serif;
9+
}
10+
11+
.login-container {
12+
width: 100%;
13+
max-width: 1920px;
14+
height: 100vh;
15+
margin: 0 auto;
16+
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
justify-content: center;
21+
background-image: url("../../assets/layerStars.png");
22+
background-size: cover;
23+
}
24+
25+
.arrow {
26+
position: absolute;
27+
top: 30px;
28+
left: 60px;
29+
display: flex;
30+
flex-direction: row;
31+
text-decoration: none;
32+
font-weight: bold;
33+
color: #FFF;
34+
transition: opacity 0.2s;
35+
}
36+
37+
.arrow svg {
38+
margin-right: 8px;
39+
}
40+
41+
.arrow:hover {
42+
opacity: 0.8;
43+
}
44+
45+
.login-container img {
46+
width: 8%;
47+
margin-bottom: 50px;
48+
}
49+
50+
.login-container form {
51+
display: flex;
52+
flex-direction: column;
53+
align-items: center;
54+
justify-content: center;
55+
}
56+
57+
.login-container form input {
58+
width: 150%;
59+
height: 50px;
60+
border: 2px solid #409EF8;
61+
border-radius: 8px;
62+
margin-bottom: 20px;
63+
text-align: center;
64+
background-color: #464646;
65+
color: #409EF8;
66+
}
67+
68+
::-webkit-input-placeholder {
69+
color: #409EF8;
70+
}
71+
72+
.login-container form button {
73+
width: 150%;
74+
height: 55px;
75+
border: 0;
76+
border-radius: 8px;
77+
margin-top: 50px;
78+
margin-bottom: 16px;
79+
text-align: center;
80+
text-decoration: none;
81+
color: #000;
82+
font-size: 24px;
83+
font-weight: bold;
84+
background: #409EF8;
85+
transition: filter 0.2s;
86+
}
87+
88+
.login-container form button:hover {
89+
filter: brightness(90%);
90+
}
91+
92+
.login-container div.forgot {
93+
position: absolute;
94+
left: 590px;
95+
margin-top: 5px;
96+
}
97+
98+
.login-container text {
99+
color: #FFF;
100+
font-size: 18px;
101+
}
102+
103+
.login-container div.account {
104+
display: flex;
105+
flex-direction: row;
106+
align-items: center;
107+
justify-content: space-between;
108+
}
109+
110+
.login-container div.account text{
111+
margin-right: 5px;
112+
}
113+
114+
.back-link {
115+
color: #409EF8;
116+
font-size: 18px;
117+
text-decoration: none;
118+
font-weight: 500;
119+
transition: opacity 0.2s;
120+
}
121+
122+
.back-link:hover{
123+
opacity: 0.8;
3124
}

0 commit comments

Comments
 (0)