refactor: add icons and change titles on game over screen

Author: mxmxmarexmxm

src/assets/img/icons/correct-icon.svg

@@ -1,6 +1,8 @@
 import React from 'react';
 import Button from '../components/UI/Button';
 import classes from './GameOverScreen.module.css';
+import { ReactComponent as FalseIcon } from '../assets/img/icons/false-icon.svg';
+import { ReactComponent as CorrectIcon } from '../assets/img/icons/correct-icon.svg';
 
 const GameOverScreen = (props) => {
   const { trueAnswers, falseAnswers } = props;
@@ -12,10 +14,13 @@ const GameOverScreen = (props) => {
         {(trueAnswers.length / props.questions.length) * 100}%)
       </h1>
 
-      {falseAnswers.length !== 0 && (
+      {trueAnswers.length !== 0 && (
         <div className={classes['answers-container']}>
-          <span className={classes['answers-title']}>False answers:</span>
-          {falseAnswers.map((answer) => (
+          <span className={classes['answers-title']}>
+            <CorrectIcon className={classes.icon} />
+            True answers:
+          </span>
+          {trueAnswers.map((answer) => (
             <div
               key={answer.question.id}
               className={classes['question-container']}
@@ -24,37 +29,42 @@ const GameOverScreen = (props) => {
                 {answer.questionNumber}. {answer.question.question}
               </span>
               <span className={classes['question-answer']}>
-                Your answer: {answer.question.answers[answer.userAnswer]}
-              </span>
-              <span className={classes['question-answer']}>
-                Correct answer: {answer.question.answers[answer.correctAnswer]}
+                <CorrectIcon className={classes.icon} />
+                {answer.question.answers[answer.userAnswer]}
               </span>
             </div>
           ))}
         </div>
       )}
 
-      {trueAnswers.length !== 0 && (
+      {falseAnswers.length !== 0 && (
         <div className={classes['answers-container']}>
-          <span className={classes['answers-title']}>True answers:</span>
-          {trueAnswers.map((answer) => (
+          <span className={classes['answers-title']}>
+            <FalseIcon className={classes.icon} />
+            False answers:
+          </span>
+          {falseAnswers.map((answer) => (
             <div
               key={answer.question.id}
               className={classes['question-container']}
             >
               <span className={classes['question-title']}>
                 {answer.questionNumber}. {answer.question.question}
               </span>
+
               <span className={classes['question-answer']}>
-                Your answer: {answer.question.answers[answer.userAnswer]}
+                <FalseIcon className={classes.icon} />
+                {answer.question.answers[answer.userAnswer]}
               </span>
               <span className={classes['question-answer']}>
-                Correct answer: {answer.question.answers[answer.correctAnswer]}
+                <CorrectIcon className={classes.icon} />
+                {answer.question.answers[answer.correctAnswer]}
               </span>
             </div>
           ))}
         </div>
       )}
+
       <Button onClick={() => window.location.reload(false)} text="Try Again!" />
     </div>
   );

src/assets/img/icons/false-icon.svg

@@ -43,3 +43,10 @@
 .answers-container {
   width: 100%;
 }
+
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+  margin-right: 1rem;
+  margin-left: 1rem;
+}