Skip to content

Commit 97a77b0

Browse files
author
Matheus Ishiyama
authored
Features: finish screen and finish socket connection and workflow (#2)
2 parents c6ca443 + efa4fbc commit 97a77b0

File tree

5 files changed

+710
-9
lines changed

5 files changed

+710
-9
lines changed

‎css/Home.module.css‎

Lines changed: 346 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,346 @@
1+
.content {
2+
background: url("../public/background1.png");
3+
background-size: 100%;
4+
height: 100vh;
5+
}
6+
7+
.header {
8+
position: fixed;
9+
left: 0;
10+
top: 0;
11+
width: 100%;
12+
padding: 15px 80px;
13+
display: flex;
14+
flex-direction: row;
15+
justify-content: space-between;
16+
align-items: center;
17+
background: white;
18+
}
19+
20+
.header h2 {
21+
font-size: 4vh;
22+
font-family: "Montserrat";
23+
font-weight: 900;
24+
text-transform: uppercase;
25+
background: linear-gradient(to top right, #2784f0, #27b1ec);
26+
background-clip: text;
27+
color: transparent;
28+
text-align: center;
29+
width: fit-content;
30+
}
31+
32+
.header div {
33+
display: flex;
34+
flex-direction: row;
35+
align-items: center;
36+
justify-content: space-between;
37+
}
38+
39+
.header div p {
40+
font-size: 1.2em;
41+
font-family: "Poppins";
42+
color: #007cff;
43+
margin-right: 5px;
44+
}
45+
46+
.header div h3 {
47+
font-size: 1.5em;
48+
font-family: "Montserrat";
49+
font-weight: bold;
50+
text-transform: uppercase;
51+
color: #2784f0;
52+
}
53+
54+
.header .button {
55+
padding: 10px 25px;
56+
border: 1px solid #2784f0;
57+
font-size: 0.7em;
58+
font-family: "Poppins";
59+
color: #2784f0;
60+
border-radius: 15px;
61+
cursor: pointer;
62+
}
63+
64+
.body {
65+
display: flex;
66+
flex-direction: row;
67+
justify-content: space-around;
68+
width: 100vw;
69+
}
70+
71+
.body .chat {
72+
height: 580px;
73+
width: 55%;
74+
background-color: rgba(255, 255, 255, 0.4);
75+
margin-top: 90px;
76+
border-radius: 20px;
77+
}
78+
79+
.body .chat h2 {
80+
margin: 20px 40px;
81+
font-size: 1.2em;
82+
font-family: "Montserrat";
83+
font-weight: bold;
84+
text-transform: capitalize;
85+
color: #007cff;
86+
}
87+
88+
.body .chat .messages {
89+
margin: 10px 30px;
90+
height: 420px;
91+
background: rgba(255, 255, 255, 0.2);
92+
border-radius: 10px;
93+
overflow: auto;
94+
}
95+
96+
.body .chat .messages .user {
97+
margin: 10px 20px;
98+
display: flex;
99+
justify-content: flex-end;
100+
}
101+
102+
.body .chat .messages .user div p {
103+
margin-top: 5px;
104+
padding: 10px 15px;
105+
background: #007cff;
106+
width: fit-content;
107+
max-width: 400px;
108+
color: white;
109+
border-radius: 5px;
110+
overflow-wrap: break-word;
111+
}
112+
113+
.body .chat .messages .friend div p {
114+
margin-top: 5px;
115+
margin-left: 20px;
116+
padding: 10px 15px;
117+
background: white;
118+
width: fit-content;
119+
max-width: 400px;
120+
color: #007cff;
121+
border-radius: 5px;
122+
overflow-wrap: break-word;
123+
}
124+
125+
.body .chat .sendMessage {
126+
margin: 20px 30px;
127+
display: flex;
128+
justify-content: space-between;
129+
align-items: center;
130+
}
131+
132+
.body .chat .sendMessage .message {
133+
height: 40px;
134+
width: 600px;
135+
outline: none;
136+
border-radius: 10px;
137+
border: 1px solid #969696;
138+
font-size: 1em;
139+
padding: 0 10px;
140+
}
141+
142+
.body .chat .sendMessage .button {
143+
outline: none;
144+
height: 40px;
145+
width: 150px;
146+
font-size: 0.8em;
147+
font-family: "Poppins";
148+
padding: 10px 20px;
149+
background: #2784f0;
150+
color: white;
151+
border: none;
152+
border-radius: 10px;
153+
}
154+
155+
.body .friends {
156+
height: 580px;
157+
width: 40%;
158+
background-color: rgba(255, 255, 255, 0.4);
159+
margin-top: 90px;
160+
border-radius: 20px;
161+
}
162+
163+
.body .friends h2 {
164+
margin-top: 20px;
165+
margin-left: 20px;
166+
font-size: 1.5em;
167+
font-family: "Montserrat";
168+
font-weight: bold;
169+
text-transform: uppercase;
170+
color: #183657;
171+
}
172+
173+
.body .friends .addFriend {
174+
margin: 10px 10px 10px 25px;
175+
}
176+
177+
.body .friends .addFriend input {
178+
width: 450px;
179+
height: 30px;
180+
outline: none;
181+
border: 1px solid #969696;
182+
font-size: 1em;
183+
font-family: "Poppins";
184+
padding: 0 10px;
185+
color: black;
186+
border-radius: 5px;
187+
transition: 0.5s;
188+
}
189+
190+
.body .friends .addFriend input:focus {
191+
height: 35px;
192+
border: 1px solid #2784f0;
193+
font-size: 1.2em;
194+
color: #2784f0;
195+
}
196+
197+
.body .friends .addFriend button {
198+
margin-left: 5px;
199+
width: 100px;
200+
height: 30px;
201+
transition: 0.5s;
202+
border: none;
203+
font-size: 0.8em;
204+
font-family: "Poppins";
205+
color: white;
206+
background: #2784f0;
207+
border-radius: 5px;
208+
}
209+
210+
.body .friends .addFriend button:hover {
211+
width: 100px;
212+
height: 35px;
213+
background: #27b1ec;
214+
}
215+
216+
.body .friends .friendsCards {
217+
height: 460px;
218+
width: 98%;
219+
overflow: auto;
220+
}
221+
222+
.body .friends .friendsCards .requestCard {
223+
margin: 5px 25px 20px 25px;
224+
width: 540px;
225+
padding: 10px 20px;
226+
border-radius: 10px;
227+
background: white;
228+
display: flex;
229+
flex-direction: column;
230+
align-items: center;
231+
}
232+
233+
.body .friends .friendsCards .requestCard p {
234+
color: #007cff;
235+
font-size: 1em;
236+
font-family: "Poppins";
237+
text-align: center;
238+
}
239+
240+
.body .friends .friendsCards .requestCard strong {
241+
color: #007cff;
242+
font-size: 1em;
243+
font-family: "Poppins";
244+
font-weight: bold;
245+
text-transform: uppercase;
246+
margin-right: 5px;
247+
}
248+
249+
.body .friends .friendsCards .requestCard div .accept {
250+
margin: 10px;
251+
font-size: 0.7em;
252+
font-family: "Poppins";
253+
color: white;
254+
background: #2784f0;
255+
padding: 10px 40px;
256+
border-radius: 10px;
257+
border: 0;
258+
}
259+
260+
.body .friends .friendsCards .requestCard div .decline {
261+
margin: 10px;
262+
font-size: 0.7em;
263+
font-family: "Poppins";
264+
color: #2784f0;
265+
background: white;
266+
padding: 10px 40px;
267+
border-radius: 10px;
268+
border: 1px solid #2784f0;
269+
}
270+
271+
272+
.body .friends .friendsCards .card {
273+
margin: 5px 25px 20px 25px;
274+
width: 540px;
275+
padding: 10px 20px;
276+
border-radius: 10px;
277+
background: white;
278+
transform: 1s;
279+
}
280+
281+
.body .friends .friendsCards .card .cardHeader {
282+
display: flex;
283+
flex-direction: row;
284+
justify-content: space-between;
285+
align-items: center;
286+
}
287+
288+
.body .friends .friendsCards .card .cardHeader div {
289+
display: flex;
290+
flex-direction: row;
291+
align-items: center;
292+
}
293+
294+
.body .friends .friendsCards .card .cardHeader div h3 {
295+
color: #2784f0;
296+
font-size: 1em;
297+
font-family: "Montserrat";
298+
font-weight: bold;
299+
text-transform: capitalize;
300+
margin-right: 10px;
301+
}
302+
303+
.body .friends .friendsCards .card .cardHeader div h4 {
304+
color: #2784f0;
305+
font-size: 0.9em;
306+
font-family: "Poppins";
307+
font-weight: 500;
308+
}
309+
310+
.body .friends .friendsCards .card .cardHeader button {
311+
background: #2784f0;
312+
border: none;
313+
padding: 10px 15px;
314+
font-size: 0.7em;
315+
font-family: "Poppins";
316+
color: white;
317+
border-radius: 10px;
318+
}
319+
.body .friends .friendsCards .card .cardBody .title {
320+
font-size: 0.9em;
321+
font-family: "Poppins";
322+
font-weight: 500;
323+
color: #255992;
324+
}
325+
326+
.body .friends .friendsCards .card .cardBody .message {
327+
font-size: 0.8em;
328+
font-family: "Poppins";
329+
font-weight: 500;
330+
color: #255992;
331+
margin-bottom: 15px;
332+
}
333+
334+
.footer {
335+
position: fixed;
336+
top: 95%;
337+
width: 100vw;
338+
height: 40px;
339+
font-size: 1em;
340+
font-family: "Poppins";
341+
color: #2784f0;
342+
display: flex;
343+
background: white;
344+
align-items: center;
345+
justify-content: center;
346+
}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"axios": "^0.21.1",
2424
"next": "^10.1.3",
2525
"react": "^17.0.2",
26-
"react-dom": "^17.0.2"
26+
"react-dom": "^17.0.2",
27+
"socket.io-client": "^4.0.1"
2728
}
2829
}

0 commit comments

Comments
 (0)