From 6e89eccc9f0bbd51dfddcf9f15fce7c1f410502a Mon Sep 17 00:00:00 2001
From: Perside Rosalie <perside.rosalie@wikimedia.de>
Date: Fri, 1 Aug 2025 11:38:04 +0200
Subject: [PATCH 1/5] Added fallback font for systems without the Lato font
 style. The Segeoe UI on Windows is a very similar to Lato on Linux Sans-serif
 is the fallback for all other systems with neither of these fonts

---
 src/components/Pages/Complaint.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Pages/Complaint.vue b/src/components/Pages/Complaint.vue
index a67a4c0b..b263abe5 100644
--- a/src/components/Pages/Complaint.vue
+++ b/src/components/Pages/Complaint.vue
@@ -171,7 +171,7 @@ export default {
 #pageContent{
   color: #000;
   font-feature-settings: 'liga' off, 'clig' off;
-  font-family: Lato;
+  font-family: Lato, Segoe UI, sans-serif;
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
@@ -181,7 +181,7 @@ export default {
   align-self: stretch;
   color: #000;
   font-feature-settings: 'liga' off, 'clig' off;
-  font-family: Lato;
+  font-family: Lato, Segoe UI, sans-serif;
   font-size: 32px;
   font-style: normal;
   font-weight: 600;

From 4382cdc791865b82d16386af06c0df1b0ff1122d Mon Sep 17 00:00:00 2001
From: Perside Rosalie <perside.rosalie@wikimedia.de>
Date: Fri, 8 Aug 2025 14:55:29 +0200
Subject: [PATCH 2/5] change font for alert popup to Roboto and add max width

---
 src/components/Pages/Complaint.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Pages/Complaint.vue b/src/components/Pages/Complaint.vue
index b263abe5..765a2d9b 100644
--- a/src/components/Pages/Complaint.vue
+++ b/src/components/Pages/Complaint.vue
@@ -58,7 +58,7 @@
             </v-btn>
           </div>
       </v-form>
-      <v-snackbar color="success" elevation="24" v-model="successMessage">
+      <v-snackbar class="alert-text" color="success" elevation="24" v-model="successMessage">
         Report successfully submitted. Thanks!
         <template v-slot:action>
           <v-btn
@@ -71,7 +71,7 @@
         </template>
       </v-snackbar>
       <v-snackbar color="error" elevation="24" v-model="errorMessage" multi-line>
-        Something went wrong with sending your message. Please try again.
+        <p class="alert-text" >Something went wrong with submitting your report. Please try again.</p>
         <template v-slot:action>
           <v-btn
             text
@@ -190,4 +190,17 @@ export default {
 .body{
   padding: 8px;
 }
+
+.alert-text{
+  color: var(--shades-white, #FFF);
+
+  /* v-text/body-1 */
+  font-family: Roboto, sans-serif !important;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
+  letter-spacing: 0.5px;
+  max-width: 443px;
+}
 </style>

From b590fba6957a3e340875bc1bcc971f59aa09292e Mon Sep 17 00:00:00 2001
From: Perside Rosalie <perside.rosalie@wikimedia.de>
Date: Mon, 11 Aug 2025 14:54:31 +0200
Subject: [PATCH 3/5] Fix font

---
 src/components/Pages/Complaint.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Pages/Complaint.vue b/src/components/Pages/Complaint.vue
index 765a2d9b..ed179ce0 100644
--- a/src/components/Pages/Complaint.vue
+++ b/src/components/Pages/Complaint.vue
@@ -171,7 +171,7 @@ export default {
 #pageContent{
   color: #000;
   font-feature-settings: 'liga' off, 'clig' off;
-  font-family: Lato, Segoe UI, sans-serif;
+  font-family: Roboto, sans-serif;
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
@@ -195,7 +195,7 @@ export default {
   color: var(--shades-white, #FFF);
 
   /* v-text/body-1 */
-  font-family: Roboto, sans-serif !important;
+  font-family: Roboto, sans-serif;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;

From 09cb8804dba64a1c2ccd13bafb50264368b0aeb1 Mon Sep 17 00:00:00 2001
From: Perside Rosalie <perside.rosalie@wikimedia.de>
Date: Tue, 12 Aug 2025 09:21:27 +0200
Subject: [PATCH 4/5] fix some css and remove max-width on alert pop up as that
 had no effect

---
 src/components/Pages/Complaint.vue | 32 ++++++++----------------------
 1 file changed, 8 insertions(+), 24 deletions(-)

diff --git a/src/components/Pages/Complaint.vue b/src/components/Pages/Complaint.vue
index ed179ce0..74854be9 100644
--- a/src/components/Pages/Complaint.vue
+++ b/src/components/Pages/Complaint.vue
@@ -58,8 +58,8 @@
             </v-btn>
           </div>
       </v-form>
-      <v-snackbar class="alert-text" color="success" elevation="24" v-model="successMessage">
-        Report successfully submitted. Thanks!
+      <v-snackbar color="success" elevation="24" v-model="successMessage">
+        <p class="alert-text" >Report successfully submitted. Thanks!</p>
         <template v-slot:action>
           <v-btn
             text
@@ -169,38 +169,22 @@ export default {
 
 <style>
 #pageContent{
-  color: #000;
-  font-feature-settings: 'liga' off, 'clig' off;
-  font-family: Roboto, sans-serif;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 24px; /* 171.429% */
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
 }
 #titleReportIllegalContent{
   align-self: stretch;
-  color: #000;
-  font-feature-settings: 'liga' off, 'clig' off;
-  font-family: Lato, Segoe UI, sans-serif;
-  font-size: 32px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 40px; /* 125% */
+  font-size: 34px;
+  font-weight: 400;
+  line-height: 40px;
 }
 .body{
   padding: 8px;
 }
 
 .alert-text{
-  color: var(--shades-white, #FFF);
-
-  /* v-text/body-1 */
-  font-family: Roboto, sans-serif;
   font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px; /* 150% */
   letter-spacing: 0.5px;
-  max-width: 443px;
 }
 </style>

From 7ceb6eff33a04471b1a5f552e2f14c1ab8ff5367 Mon Sep 17 00:00:00 2001
From: Perside Rosalie <perside.rosalie@wikimedia.de>
Date: Tue, 12 Aug 2025 14:41:15 +0200
Subject: [PATCH 5/5] remove unused css and reuse vuetify defined css classes
 for styling

---
 src/components/Pages/Complaint.vue | 24 ++++--------------------
 1 file changed, 4 insertions(+), 20 deletions(-)

diff --git a/src/components/Pages/Complaint.vue b/src/components/Pages/Complaint.vue
index 74854be9..14cbbb48 100644
--- a/src/components/Pages/Complaint.vue
+++ b/src/components/Pages/Complaint.vue
@@ -2,8 +2,8 @@
   <v-main>
     <v-responsive max-width="616px" min-width="250px" >
       <div class="body">
-      <p id="titleReportIllegalContent">Reporting illegal content</p>
-        <p id="pageContent">Please use this form to report any content that you consider to be illegal. After sending the email,
+      <p class="text-h4">Reporting illegal content</p>
+        <p class="text-body-1">Please use this form to report any content that you consider to be illegal. After sending the email,
         which is generated by clicking the ‘Report illegal content’ button, your report will be delivered to
         us and handled in accordance with Regulation (EU) 2022/2065, Article 16 (‘Digital Services Act’).
         If you supply an email, you will then automatically receive a confirmation of receipt and, as soon
@@ -59,7 +59,7 @@
           </div>
       </v-form>
       <v-snackbar color="success" elevation="24" v-model="successMessage">
-        <p class="alert-text" >Report successfully submitted. Thanks!</p>
+        <span class="text-body-1" >Report successfully submitted. Thanks!</span>
         <template v-slot:action>
           <v-btn
             text
@@ -71,7 +71,7 @@
         </template>
       </v-snackbar>
       <v-snackbar color="error" elevation="24" v-model="errorMessage" multi-line>
-        <p class="alert-text" >Something went wrong with submitting your report. Please try again.</p>
+        <span class="text-body-1" >Something went wrong with submitting your report. Please try again.</span>
         <template v-slot:action>
           <v-btn
             text
@@ -168,23 +168,7 @@ export default {
 </script>
 
 <style>
-#pageContent{
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-}
-#titleReportIllegalContent{
-  align-self: stretch;
-  font-size: 34px;
-  font-weight: 400;
-  line-height: 40px;
-}
 .body{
   padding: 8px;
 }
-
-.alert-text{
-  font-size: 16px;
-  letter-spacing: 0.5px;
-}
 </style>