Implemented discoverpage and edittrivio. Did also change some bugs in the layout.

src/components/HistoryBox.vue

@@ -20,26 +20,26 @@ const props = defineProps({
       <img src="/src/assets/trivio.svg" alt="Question picture">
       <div class="quiz-text">
         <div class="quiz-title">{{title}}</div>
-        <div class="difficulty">{{difficulty}}</div>
+        <div class="difficulty">Difficulty: {{difficulty}}</div>
         <div class="user-info">
           <img src="/src/assets/user.svg" alt="">
           <div class="username">{{username}}</div>
         </div>
       </div>
       <div class="right-side">
-        <div class="score">Score: {{ score }}/{{ numberOfQuestion }}</div>
-        <div class="date">04.03.24</div>
+        <H1 class="score-text">Score: {{ score }}/{{ numberOfQuestion }}</H1>
+        <H3 class="date">Date: 04.03.24</h3>
       </div>
+
     </div>
   </div>
 </template>
 
 <style scoped>
 .quiz-box {
-  width: 80%;
+  width: 100%;
   background-color: #a990f4;
   border-radius: 10px;
-  margin-top: 1em;
   border: 1px solid;
 }
 
@@ -85,15 +85,16 @@ const props = defineProps({
   display: flex;
   flex-direction: column;
   margin-left: auto;
+  align-items: end;
 }
 
 .date {
   margin-top: auto;
   font-size: 16px;
+  color: white;
 }
 
-.score {
-  font-size: 25px;
-  color: #f9f333;
+.score-text{
+  color: white;
 }
 </style>