Fix alignment in login-view

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 {

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

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;