Skip to content

Commit 094b8e2

Browse files
mxmxmarexmxmmxmxmarexmxm
committed
style: Completely restyled project layout
1 parent 7f795b9 commit 094b8e2

18 files changed

+178
-58
lines changed

‎prettier.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
singleQuote: true,
3+
};

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>IT Quiz</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
box-sizing: border-box;
33
margin: 0;
44
padding: 0;
5-
color: #08151a;
5+
color: rgb(221, 221, 221);
66
}

‎src/assets/img/binary.png

284 KB
Loading

‎src/components/Answer item/AnswerItem.module.css

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
11
.wrapper {
2-
background-color: #054D48;
2+
background-color: #475353;
33
display: flex;
44
align-items: center;
55
justify-content: center;
66
border-radius: 25px;
77
cursor: pointer;
8-
overflow: hidden;
98
}
109

1110
.button {
12-
padding: 1rem 1.5rem ;
11+
padding: 1rem 1.5rem;
1312
font-size: 1.3em;
14-
background-color: inherit;
13+
background-color: #262e2e;
1514
width: 100%;
1615
border: none;
1716
color: white;
1817
cursor: pointer;
19-
font-weight: bold;
18+
font-weight: normal;
2019
}
2120

2221
.button-focus {
23-
background-color: #EDFF71;
24-
color: #054D48;
22+
background-color: rgb(221, 221, 221);
23+
border: 4px solid rgb(87, 88, 87);
24+
color: black;
2525
}
2626

27+
.button:hover {
28+
border: 1px solid rgb(210, 216, 210);
29+
}

‎src/components/UI/Button.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.wrapper {
22
color: white;
3-
background-color: #054D48;
3+
background-color: #262e2e;
44
display: flex;
55
align-items: center;
66
justify-content: center;

‎src/components/UI/Card.module.css

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
.card {
2-
padding: 1rem;
2+
padding: 2rem;
33
cursor: pointer;
4-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
54
border-radius: 14px;
6-
background-color: white;
7-
}
5+
background-color: #0a0909;
6+
border: 2px solid rgb(210, 216, 210);
7+
display: flex;
8+
flex-direction: column;
9+
justify-content: center;
10+
align-items: center;
11+
width: 100%;
12+
aspect-ratio: 1/1;
13+
}

‎src/components/UI/Layout.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import classes from './Layout.module.css';
22

33
const Layout = (props) => {
4-
return <div className={classes.container}>{props.children}</div>;
4+
return (
5+
<div className={classes.screen}>
6+
<div className={classes.content}>{props.children}</div>
7+
</div>
8+
);
59
};
610

711
export default Layout;

‎src/components/UI/Layout.module.css

+34-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,38 @@
1-
.container {
1+
.screen {
22
min-height: 100vh;
3-
width: 100%;
4-
padding: 2rem;
5-
margin: 0 auto;
3+
width: 100vw;
64
display: flex;
5+
flex-direction: column;
76
align-items: center;
87
justify-content: center;
9-
background-color: #037171;
10-
}
8+
position: relative;
9+
z-index: 1;
10+
color: white;
11+
padding: 1rem;
12+
}
13+
14+
.content {
15+
width: 100%;
16+
}
17+
18+
.screen::before {
19+
content: '';
20+
position: absolute;
21+
top: 0;
22+
left: 0;
23+
width: 100%;
24+
height: 100%;
25+
background-image: url('../../assets/img/binary.png');
26+
background-size: cover;
27+
filter: grayscale(88%) blur(5px);
28+
z-index: -1;
29+
}
30+
31+
@media only screen and (min-width: 768px) {
32+
.content {
33+
max-width: 700px;
34+
}
35+
.screen::before {
36+
filter: grayscale(88%) blur(10px);
37+
}
38+
}

‎src/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ body {
44
sans-serif;
55
}
66
html {
7-
background-color: #037171
7+
background-color: white
88
}
99
code {
1010
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

‎src/pages/ConfigureQuizScreen.js

+1-9
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,7 @@ import { useState } from 'react';
22
import Button from '../components/UI/Button';
33
import classes from './ConfigureQuizScreen.module.css';
44

5-
const CATEGORIES = [
6-
'Linux',
7-
'Bash',
8-
'Docker',
9-
'SQL',
10-
'CMS',
11-
'Code',
12-
'DevOps'
13-
];
5+
const CATEGORIES = ['Linux', 'Bash', 'Docker', 'SQL', 'CMS', 'Code', 'DevOps'];
146
const DIFFICULTY = ['Easy', 'Medium', 'Hard'];
157
const NUMBERS = [1, 5, 10, 15, 20];
168

‎src/pages/ConfigureQuizScreen.module.css

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
h1 {
22
margin-bottom: 1.5rem;
3+
text-align: center;
4+
color: white;
35
}
46

57
.container {
6-
background-color: #037676;
8+
background-color: #0a0909;
79
padding: 1.5rem;
810
align-items: center;
911
justify-content: center;
1012
border-radius: 15px;
11-
}
13+
border: 1px solid rgb(210, 216, 210);
14+
width: 100%;
15+
}
16+
17+
.configBtn {
18+
background-color: #262e2e;
19+
}

‎src/pages/GameOverScreen.js

+18-6
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const GameOverScreen = (props) => {
66
const { correctAnswers, incorrectAnswers } = props;
77

88
return (
9-
<div>
9+
<div className={classes.container}>
1010
<h1>
1111
Result: {correctAnswers.length} of {props.questions.length} (
1212
{(correctAnswers.length / props.questions.length) * 100}%)
@@ -20,8 +20,14 @@ const GameOverScreen = (props) => {
2020
<h2>
2121
{answer.questionNumber}. {answer.question.question}
2222
</h2>
23-
<h4> Your answer: {answer.question.answers[answer.userAnswer]}</h4>
24-
<h4> Correct answer: {answer.question.answers[answer.correctAnswer]}</h4>
23+
<h4>
24+
{' '}
25+
Your answer: {answer.question.answers[answer.userAnswer]}
26+
</h4>
27+
<h4>
28+
{' '}
29+
Correct answer: {answer.question.answers[answer.correctAnswer]}
30+
</h4>
2531
</div>
2632
))}
2733
</div>
@@ -35,13 +41,19 @@ const GameOverScreen = (props) => {
3541
<h2>
3642
{answer.questionNumber}. {answer.question.question}
3743
</h2>
38-
<h4> Your answer: {answer.question.answers[answer.userAnswer]}</h4>
39-
<h4> Correct answer: {answer.question.answers[answer.correctAnswer]}</h4>
44+
<h4>
45+
{' '}
46+
Your answer: {answer.question.answers[answer.userAnswer]}
47+
</h4>
48+
<h4>
49+
{' '}
50+
Correct answer: {answer.question.answers[answer.correctAnswer]}
51+
</h4>
4052
</div>
4153
))}
4254
</div>
4355
)}
44-
<Button onClick={() => window.location.reload(false)} text='Try Again!' />
56+
<Button onClick={() => window.location.reload(false)} text="Try Again!" />
4557
</div>
4658
);
4759
};

‎src/pages/GameOverScreen.module.css

+16-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,23 @@
1+
.container {
2+
padding: 2rem;
3+
cursor: pointer;
4+
border-radius: 14px;
5+
background-color: #0a0909;
6+
border: 2px solid rgb(210, 216, 210);
7+
display: flex;
8+
flex-direction: column;
9+
justify-content: center;
10+
align-items: center;
11+
width: 100%;
12+
}
13+
114
.question {
215
display: flex;
316
flex-direction: column;
417
gap: 1rem;
518
padding: 1rem;
619
border-radius: 25px;
720
margin: 1rem auto;
8-
background-color: #44A1A0;
9-
}
21+
background-color: #262e2e;
22+
23+
}

‎src/pages/QuizScreen.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ const QuizScreen = (props) => {
7575
return (
7676
<div className={classes.container}>
7777
{
78-
<h2>
78+
<h2 className={classes.title}>
7979
{currentQuestion + 1 + '. '}
8080
{props.questions[currentQuestion].question}
8181
</h2>
@@ -89,7 +89,7 @@ const QuizScreen = (props) => {
8989
/>
9090
))}
9191
</div>
92-
<button onClick={nextHandler}>Next {'>'}</button>
92+
<button onClick={nextHandler}>Next </button>
9393
</div>
9494
);
9595
};

‎src/pages/QuizScreen.module.css

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
.container{
1+
.container {
22
padding: 1.5rem;
3-
background-color: #037676;
4-
max-width: 578px;
3+
background-color: #0a0909;
4+
width: 100%;
55
border-radius: 15px;
6+
border: 2px solid rgb(210, 216, 210);
7+
width: 100%;
8+
color: white;
69
}
710

811
.answers-container {
@@ -14,10 +17,16 @@
1417
gap: 15px;
1518
}
1619

20+
.title {
21+
color: white;
22+
font-weight: 400;
23+
margin-bottom: 1rem;
24+
}
25+
1726
button {
1827
padding: 1rem 2rem;
1928
margin: 0 auto;
20-
background-color:#091c2f;
29+
background-color: #475353;
2130
color: white;
2231
width: 100%;
2332
border: none;
@@ -26,6 +35,3 @@ button {
2635
font-size: 1.3rem;
2736
cursor: pointer;
2837
}
29-
30-
31-

‎src/pages/WelcomeScreen.js

+14-6
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
import classes from './WelcomeScreen.module.css';
2-
import Card from '../components/UI/Card';
32
import Button from '../components/UI/Button';
43

54
const WelcomeScreen = (props) => {
65
return (
76
<div className={classes.container}>
8-
<Card>
9-
<h1>IT Quiz</h1>
10-
<h3>Test your programming knowledge!</h3>
11-
<Button onClick={props.onGetStarted} text='Get started!' />
12-
</Card>
7+
<h1>
8+
<span className={classes.htmlTag}>{'<h1> '}</span>IT Quiz
9+
<span className={classes.htmlTag}>{' </h1>'}</span>
10+
</h1>
11+
<p>
12+
Welcome to the IT Quiz! Test your knowledge and challenge yourself
13+
with questions from the exciting world of Information Technology. This
14+
quiz will cover various topics including Linux, Bash, Docker, SQL, CMS
15+
and more.
16+
</p>
17+
<span className={classes.readyText}>
18+
Are you ready to put your IT skills to the test?
19+
</span>
20+
<Button onClick={props.onGetStarted} text="Get started!" />
1321
</div>
1422
);
1523
};

0 commit comments

Comments
 (0)