jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-05-12 22:33:31 -04:00
parent 47f2f3cf00
commit 5908f5d21f
1 changed files with 57 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/views/ForgotPasswordView.vue
View File

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