Merge branch 'dev' into feat/endpoints-in-backend-om-eigen-leerpaden-en-leerobjecten-toe-te-voegen-aan-de-databank-#248

frontend/src/components/LearningPathSearchField.vue

@@ -31,4 +31,9 @@
     ></v-text-field>
 </template>
 
-<style scoped></style>
+<style scoped>
+    .search-field {
+        width: 25%;
+        min-width: 300px;
+    }
+</style>

frontend/src/components/LearningPathsGrid.vue

@@ -53,9 +53,9 @@
         white-space: normal;
     }
     .results-grid {
-        margin: 20px;
+        margin: 20px auto;
         display: flex;
-        align-items: stretch;
+        justify-content: center;
         gap: 20px;
         flex-wrap: wrap;
     }

frontend/src/components/MenuBar.vue

@@ -16,6 +16,7 @@
     const _router = useRouter(); // Zonder '_' gaf dit een linter error voor unused variable
 
     const name: string = auth.authState.user!.profile.name!;
+    const username = auth.authState.user!.profile.preferred_username!;
     const email = auth.authState.user!.profile.email;
     const initials: string = name
         .split(" ")
@@ -183,10 +184,15 @@
             <v-card>
                 <v-card-text>
                     <div class="mx-auto text-center">
-                        <v-avatar color="#0e6942">
-                            <span class="text-h5">{{ initials }}</span>
+                        <v-avatar
+                            color="#0e6942"
+                            size="large"
+                            class="user-button mb-3"
+                        >
+                            <span>{{ initials }}</span>
                         </v-avatar>
                         <h3>{{ name }}</h3>
+                        <p class="text-caption mt-1">{{ username }}</p>
                         <p class="text-caption mt-1">{{ email }}</p>
                         <v-divider class="my-3"></v-divider>
                         <v-btn

frontend/src/components/SingleQuestion.vue

@@ -6,6 +6,7 @@
     import type { AnswersResponse } from "@/controllers/answers";
     import type { AnswerData, AnswerDTO } from "@dwengo-1/common/interfaces/answer";
     import authService from "@/services/auth/auth-service";
+    import { AccountType } from "@dwengo-1/common/util/account-types";
 
     const props = defineProps<{
         question: QuestionDTO;
@@ -80,7 +81,7 @@
             {{ question.content }}
         </div>
         <div
-            v-if="authService.authState.activeRole === 'teacher'"
+            v-if="authService.authState.activeRole === AccountType.Teacher"
             class="answer-input-container"
         >
             <input