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

frontend/src/views/ForgotPasswordView.vue

@@ -4,42 +4,44 @@
       <h1 class="text-2xl font-bold text-center">
         {{ 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-content">
-          <div class="flex flex-col gap-4">
-            <div class="form-field">
-              <label for="email" class="form-label">{{ t('email') }}</label>
-              <input 
-                id="email"
-                v-model="email" 
-                type="email" 
-                class="form-input" 
-                required 
-              />
-            </div>
+      <div class="card">
+        <form @submit.prevent="handleForgotPassword">
+          <div class="card-content">
+            <div class="flex flex-col gap-4">
+              <div class="form-field">
+                <label for="email" class="form-label">{{ t('email') }}</label>
+                <input
+                    id="email"
+                    v-model="email"
+                    type="email"
+                    class="form-input"
+                    required
+                />
+              </div>
 
-            <button 
-              type="submit" 
-              class="primary w-full"
-              :disabled="isLoading"
-            >
-              <span v-if="isLoading" class="loading-spinner mr-2"></span>
-              {{ t('resetPassword') }}
-            </button>
+              <button
+                  type="submit"
+                  class="primary w-full"
+                  :disabled="isLoading"
+              >
+                <span v-if="isLoading" class="loading-spinner mr-2"></span>
+                {{ t('resetPassword') }}
+              </button>
 
-            <div class="text-center mt-4">
-              <router-link to="/login" class="text-sm text-blue-500">
-                {{ t('backToLogin') }}
-              </router-link>
+              <div class="text-center mt-4">
+                <router-link to="/login" class="text-sm text-blue-500">
+                  {{ t('backToLogin') }}
+                </router-link>
+              </div>
             </div>
           </div>
-        </div>
-      </form>
+        </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();
 
@@ -74,7 +76,7 @@ async function handleForgotPassword() {
   // Reset notification states
   showSuccessMessage.value = false;
   showErrorMessage.value = false;
-  
+
   if (!email.value) {
     errorMessage.value = t('emailRequired');
     showErrorMessage.value = true;
@@ -91,10 +93,10 @@ async function handleForgotPassword() {
 
     // Show success message
     showSuccessMessage.value = true;
-    
+
     // Clear the form
     email.value = '';
-    
+
     // Redirect to login after a short delay
     setTimeout(() => {
       router.push('/login');
@@ -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;
 }
@@ -127,14 +125,14 @@ async function handleForgotPassword() {
 }
 
 .form-input {
-  @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg 
-         focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5
-         dark:bg-gray-700 dark:border-gray-600 dark:text-white;
+  @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg
+  focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5
+  dark:bg-gray-700 dark:border-gray-600 dark:text-white;
 }
 
 .primary {
   @apply bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg text-sm px-5 py-2.5
-         focus:outline-none focus:ring-4 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed;
+  focus:outline-none focus:ring-4 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed;
 }
 
 .notification {
@@ -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>