From 0aefec28d7a073b5dd17c0f2f081fe01d665bf26 Mon Sep 17 00:00:00 2001
From: laurejablonski <laure.jablonski@ugent.be>
Date: Sat, 10 May 2025 10:38:41 +0200
Subject: [PATCH] fix: titels uniform

---
 frontend/src/assets/common.css                | 14 ++++++++
 .../views/assignments/CreateAssignment.vue    |  2 +-
 .../src/views/assignments/UserAssignments.vue |  9 +----
 frontend/src/views/classes/SingleClass.vue    | 19 ++---------
 frontend/src/views/classes/StudentClasses.vue | 20 ++---------
 frontend/src/views/classes/TeacherClasses.vue | 21 ++----------
 frontend/src/views/homepage/UserHomePage.vue  | 33 ++-----------------
 7 files changed, 25 insertions(+), 93 deletions(-)
 create mode 100644 frontend/src/assets/common.css

diff --git a/frontend/src/assets/common.css b/frontend/src/assets/common.css
new file mode 100644
index 00000000..b769c187
--- /dev/null
+++ b/frontend/src/assets/common.css
@@ -0,0 +1,14 @@
+h1 {
+    color: #0e6942;
+    text-transform: uppercase;
+    font-weight: bolder;
+    font-size: 50px;
+    padding-left: 1%;
+}
+
+@media screen and (max-width: 850px) {
+    h1 {
+        text-align: center;
+        padding-left: 0;
+    }
+}
diff --git a/frontend/src/views/assignments/CreateAssignment.vue b/frontend/src/views/assignments/CreateAssignment.vue
index 32cda330..713f5e11 100644
--- a/frontend/src/views/assignments/CreateAssignment.vue
+++ b/frontend/src/views/assignments/CreateAssignment.vue
@@ -96,7 +96,7 @@
 
 <template>
     <div class="main-container">
-        <h1 class="title">{{ t("new-assignment") }}</h1>
+        <h1>{{ t("new-assignment") }}</h1>
         <v-card class="form-card">
             <v-form
                 ref="form"
diff --git a/frontend/src/views/assignments/UserAssignments.vue b/frontend/src/views/assignments/UserAssignments.vue
index afb7a380..66e5437a 100644
--- a/frontend/src/views/assignments/UserAssignments.vue
+++ b/frontend/src/views/assignments/UserAssignments.vue
@@ -9,6 +9,7 @@
     import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
     import { asyncComputed } from "@vueuse/core";
     import { useDeleteAssignmentMutation } from "@/queries/assignments.ts";
+    import '../../assets/common.css'
 
     const { t } = useI18n();
     const router = useRouter();
@@ -139,17 +140,9 @@
     .assignments-container {
         width: 100%;
         margin: 0 auto;
-        padding: 2% 4%;
         box-sizing: border-box;
     }
 
-    h1 {
-        color: #0e6942;
-        text-transform: uppercase;
-        font-weight: bolder;
-        font-size: 50px;
-    }
-
     .center-btn {
         display: block;
         margin-left: auto;
diff --git a/frontend/src/views/classes/SingleClass.vue b/frontend/src/views/classes/SingleClass.vue
index 5cc62043..50de0f75 100644
--- a/frontend/src/views/classes/SingleClass.vue
+++ b/frontend/src/views/classes/SingleClass.vue
@@ -13,6 +13,7 @@
     import { useCreateTeacherInvitationMutation } from "@/queries/teacher-invitations";
     import type { TeacherInvitationData } from "@dwengo-1/common/interfaces/teacher-invitation";
     import { useDisplay } from "vuetify";
+    import '../../assets/common.css'
 
     const { t } = useI18n();
 
@@ -186,7 +187,7 @@
             v-slot="classResponse: { data: ClassResponse }"
         >
             <div>
-                <h1 class="title">{{ classResponse.data.class.displayName }}</h1>
+                <h1>{{ classResponse.data.class.displayName }}</h1>
                 <using-query-result
                     :query-result="getStudents"
                     v-slot="studentsResponse: { data: StudentsResponse }"
@@ -391,14 +392,6 @@
         border-collapse: collapse;
     }
 
-    h1 {
-        color: #0e6942;
-        text-transform: uppercase;
-        font-weight: bolder;
-        padding-top: 2%;
-        font-size: 50px;
-    }
-
     h2 {
         color: #0e6942;
         font-size: 30px;
@@ -416,15 +409,7 @@
         text-decoration: underline;
     }
 
-    main {
-        margin-left: 30px;
-    }
-
     @media screen and (max-width: 800px) {
-        h1 {
-            text-align: center;
-            padding-left: 0;
-        }
 
         .join {
             text-align: center;
diff --git a/frontend/src/views/classes/StudentClasses.vue b/frontend/src/views/classes/StudentClasses.vue
index 4d7cc369..9a00f153 100644
--- a/frontend/src/views/classes/StudentClasses.vue
+++ b/frontend/src/views/classes/StudentClasses.vue
@@ -12,6 +12,7 @@
     import { useClassStudentsQuery, useClassTeachersQuery } from "@/queries/classes";
     import type { StudentsResponse } from "@/controllers/students";
     import type { TeachersResponse } from "@/controllers/teachers";
+    import '../../assets/common.css'
 
     const { t } = useI18n();
 
@@ -135,7 +136,7 @@
             ></v-empty-state>
         </div>
         <div v-else>
-            <h1 class="title">{{ t("classes") }}</h1>
+            <h1>{{ t("classes") }}</h1>
             <using-query-result
                 :query-result="classesQuery"
                 v-slot="classResponse: { data: ClassesResponse }"
@@ -306,14 +307,6 @@
         border-collapse: collapse;
     }
 
-    h1 {
-        color: #0e6942;
-        text-transform: uppercase;
-        font-weight: bolder;
-        padding-top: 2%;
-        font-size: 50px;
-    }
-
     h2 {
         color: #0e6942;
         font-size: 30px;
@@ -331,16 +324,7 @@
         text-decoration: underline;
     }
 
-    main {
-        margin-left: 30px;
-    }
-
     @media screen and (max-width: 800px) {
-        h1 {
-            text-align: center;
-            padding-left: 0;
-        }
-
         .join {
             text-align: center;
             align-items: center;
diff --git a/frontend/src/views/classes/TeacherClasses.vue b/frontend/src/views/classes/TeacherClasses.vue
index 3d6c4db9..0f5e104f 100644
--- a/frontend/src/views/classes/TeacherClasses.vue
+++ b/frontend/src/views/classes/TeacherClasses.vue
@@ -15,6 +15,7 @@
         useTeacherInvitationsReceivedQuery,
     } from "@/queries/teacher-invitations";
     import { useDisplay } from "vuetify";
+    import '../../assets/common.css'
 
     const { t } = useI18n();
 
@@ -183,7 +184,7 @@
             ></v-empty-state>
         </div>
         <div v-else>
-            <h1 class="title">{{ t("classes") }}</h1>
+            <h1>{{ t("classes") }}</h1>
             <using-query-result
                 :query-result="classesQuery"
                 v-slot="classesResponse: { data: ClassesResponse }"
@@ -318,7 +319,7 @@
                 </v-container>
             </using-query-result>
 
-            <h1 class="title">
+            <h1>
                 {{ t("invitations") }}
             </h1>
             <v-container
@@ -484,14 +485,6 @@
         border-collapse: collapse;
     }
 
-    h1 {
-        color: #0e6942;
-        text-transform: uppercase;
-        font-weight: bolder;
-        padding-top: 2%;
-        font-size: 50px;
-    }
-
     h2 {
         color: #0e6942;
         font-size: 30px;
@@ -509,15 +502,7 @@
         text-decoration: underline;
     }
 
-    main {
-        margin-left: 30px;
-    }
-
     @media screen and (max-width: 850px) {
-        h1 {
-            text-align: center;
-            padding-left: 0;
-        }
 
         .join {
             text-align: center;
diff --git a/frontend/src/views/homepage/UserHomePage.vue b/frontend/src/views/homepage/UserHomePage.vue
index 28d66cb3..b6ae1ee9 100644
--- a/frontend/src/views/homepage/UserHomePage.vue
+++ b/frontend/src/views/homepage/UserHomePage.vue
@@ -3,6 +3,7 @@
     import { useI18n } from "vue-i18n";
     import { THEMESITEMS, AGE_TO_THEMES } from "@/utils/constants.ts";
     import BrowseThemes from "@/components/BrowseThemes.vue";
+    import '../../assets/common.css'
 
     const { t, locale } = useI18n();
 
@@ -46,7 +47,7 @@
 
 <template>
     <div class="main-container">
-        <h1 class="title">{{ t("themes") }}</h1>
+        <h1>{{ t("themes") }}</h1>
         <v-container class="dropdowns">
             <v-select
                 class="v-select"
@@ -77,30 +78,6 @@
 </template>
 
 <style scoped>
-    .main-container {
-        min-height: 100vh;
-        min-width: 100vw;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: flex-start;
-    }
-
-    .title {
-        max-width: 50rem;
-        margin-left: 1rem;
-        margin-top: 1rem;
-        text-align: center;
-        display: flex;
-        justify-content: center;
-    }
-
-    h1 {
-        color: #0e6942;
-        text-transform: uppercase;
-        font-weight: bolder;
-        font-size: 50px;
-    }
 
     .dropdowns {
         display: flex;
@@ -114,12 +91,6 @@
         min-width: 100px;
     }
 
-    @media (max-width: 768px) {
-        .main-container {
-            padding: 1rem;
-        }
-    }
-
     @media (max-width: 700px) {
         .dropdowns {
             flex-direction: column;