fix(auth): change background color of card in ForgotPasswordView.vue

frontend/src/views/ForgotPasswordView.vue

@@ -5,11 +5,12 @@
         {{ t('title') }}
       </h1>
 
-      <p class="text-center text-gray-600 dark:text-gray-400">
+      <p class="text-center text-hOnSurface">
         {{ t('description') }}
       </p>
 
-      <form @submit.prevent="handleForgotPassword" class="card">
+      <div class="card">
+        <form @submit.prevent="handleForgotPassword">
           <div class="card-content">
             <div class="flex flex-col gap-4">
               <div class="form-field">
@@ -40,6 +41,7 @@
             </div>
           </div>
         </form>
+      </div>
       
       <!-- Success message -->
       <div v-if="showSuccessMessage" class="notification success">
@@ -55,12 +57,12 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import { useClient } from '@/plugins/api.js';
+import {ref} from 'vue';
+import {useI18n} from 'vue-i18n';
+import {useRouter} from 'vue-router';
+import {useClient} from '@/plugins/api.js';
 
-const { t } = useI18n();
+const {t} = useI18n();
 const router = useRouter();
 const clientApi = useClient();
 
@@ -110,10 +112,6 @@ async function handleForgotPassword() {
 </script>
 
 <style scoped>
-.card {
-  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden;
-}
-
 .card-content {
   @apply p-6;
 }
@@ -155,13 +153,23 @@ async function handleForgotPassword() {
 }
 
 @keyframes fade-in {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes fade-out {
-  from { opacity: 1; }
-  to { opacity: 0; }
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
 </style>