From 98a1e3126b71b0449cf300802cc415745caeb653 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Mon, 17 Feb 2025 12:37:16 -0500
Subject: [PATCH] Fix alignment in login-view

---
 frontend/src/assets/main.css                       |  5 +++--
 frontend/src/views/LoginView.vue                   | 14 ++++++--------
 .../src/views/creators/DonationButtonBanner.vue    | 11 ++++-------
 3 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 1b1d387..fcf59af 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -26,10 +26,11 @@
     .btn {
         @apply min-w-24 w-full;
         @apply p-4;
-        @apply flex flex-nowrap gap-4 items-center justify-center ;
+        @apply flex flex-nowrap gap-4 items-center justify-center;
         @apply rounded-lg;
         @apply capitalize text-base font-sans font-medium;
-        @apply w-fit px-10;
+        @apply px-10;
+        @apply cursor-pointer;
     }
 
     button.primary {
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 525949d..8e6243c 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -23,29 +23,27 @@ async function googleCallback(token) {
 
 <template>
 
-  <div class="flex min-h-screen items-center">
-    <div class="card justify-items-center">
+  <div class="flex min-h-screen justify-center items-center p-10 w-full">
+    <div class="card justify-items-center ">
 
       <img alt="hutopy login"
            src="/images/hutopy-logo.png"/>
 
-      <div class="flex flex-col w-[800px] gap-10 justify-items-center">
+      <div class="flex flex-col gap-10">
 
         <h1 class="text-2xl font-bold login-text text-center mt-10 ">
           Connexion
         </h1>
 
-        <div class="w-full items-center justify-center flex flex-col gap-4">
+        <div class="flex flex-col gap-4">
           <google-login :callback="googleCallback"
-                        class=""
                         popup-type="TOKEN">
-            <button class="secondary w-full">
+            <button class="secondary">
               <v-icon left>mdi-google</v-icon>
               Google
             </button>
           </google-login>
-
-          <button class="secondary w-full text-red-600"
+          <button class="secondary"
                   @click="loginWithFacebook">
             <facebook class="social-icon"></facebook>
             Facebook
diff --git a/frontend/src/views/creators/DonationButtonBanner.vue b/frontend/src/views/creators/DonationButtonBanner.vue
index 4f6f1de..52efa4c 100644
--- a/frontend/src/views/creators/DonationButtonBanner.vue
+++ b/frontend/src/views/creators/DonationButtonBanner.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-      class="secondary text-white donation-action"
+      class="secondary donation-action"
       @click="openDonationDialog()"
   >
     {{ $t('isupportbtn.isupport') }}
@@ -169,14 +169,11 @@ function preventNonNumeric(event) {
 <style scoped>
 
 .donation-action {
-  @apply bg-hutopyPrimary;
+  @apply bg-hutopyPrimary text-hOnPrimary;
+  @apply hover:bg-hutopySecondary;
+  @apply w-fit;
 }
 
-.donation-action:hover {
-  @apply bg-hutopySecondary;
-}
-
-
 .error-message {
   color: white;
   background-color: red;