From 7d0aea75d8b1c270df4176e44568225fe9c656ee Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Thu, 24 Apr 2025 14:09:15 -0400
Subject: [PATCH] feat: Add navigation link to return to creator page in
 PaymentCompleted and PaymentFailed views, update styles for improved layout

---
 frontend/src/views/PaymentCompleted.vue | 69 ++++++++++++++++---------
 frontend/src/views/PaymentFailed.vue    | 64 ++++++++++++++++-------
 2 files changed, 89 insertions(+), 44 deletions(-)

diff --git a/frontend/src/views/PaymentCompleted.vue b/frontend/src/views/PaymentCompleted.vue
index a18a5fd..caf2f13 100644
--- a/frontend/src/views/PaymentCompleted.vue
+++ b/frontend/src/views/PaymentCompleted.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="container">
     <div class="card">
+      <!-- Navigation Link at the top -->
+      <div class="navigation-link">
+        <button class="link-button" @click="goBack()">
+          <v-icon>mdi-arrow-left</v-icon>
+          {{ t('returnToCreator') }}
+        </button>
+      </div>
 
       <h1>
         {{ t('title') }}
@@ -28,19 +35,8 @@
       <p>
         {{ t('receipt') }}
       </p>
-
-      <!-- Continue Button -->
-      <div class="card-actions">
-        <button
-            class="action-button"
-            @click="goBack()">
-          {{ t('continue') }}
-        </button>
-      </div>
-
     </div>
   </div>
-
 </template>
 
 <script setup>
@@ -66,28 +62,31 @@ function goBack() {
     "message": "Your payment has been processed successfully.",
     "usernameDefault": "the creator",
     "receipt": "A receipt has been sent to your email.",
-    "continue": "Continue to"
+    "continue": "Continue to",
+    "returnToCreator": "Return to creator page"
   },
   "fr": {
     "title": "Paiement réussi !",
     "message": "Votre paiement a été traité avec succès.",
     "usernameDefault": "le créateur",
     "receipt": "Un reçu a été envoyé à votre email.",
-    "continue": "Continuer vers"
+    "continue": "Continuer vers",
+    "returnToCreator": "Retourner à la page du créateur"
   },
   "es": {
     "title": "¡Pago exitoso!",
     "message": "Su pago ha sido procesado con éxito.",
     "usernameDefault": "el creador",
     "receipt": "Se ha enviado un recibo a su correo electrónico.",
-    "continue": "Continuar a"
+    "continue": "Continuar a",
+    "returnToCreator": "Volver a la página del creador"
   }
 }
 </i18n>
 
 <style scoped>
 .container {
-  @apply min-h-screen;
+  @apply p-5;
   @apply flex items-center justify-center;
 }
 
@@ -95,29 +94,49 @@ function goBack() {
   @apply bg-hSurface text-hOnSurface;
   @apply p-8;
   @apply font-sans;
-  @apply rounded-3xl;
+  @apply rounded-2xl;
+  @apply shadow-2xl;
+  @apply relative;
+  @apply w-full;
+  @apply max-w-2xl;
 }
 
-.card-actions {
-  @apply flex items-center justify-end;
+.card::before {
+  @apply absolute inset-0;
+  @apply rounded-2xl;
+  @apply p-[1px];
+  content: '';
+  background: linear-gradient(135deg, rgba(64, 64, 64, 1) 0%, rgba(64, 64, 64, 0) 20%, rgba(64, 64, 64, 0.5) 100%);
+  mask: linear-gradient(#fff 0 0) content-box,
+  linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.navigation-link {
+  @apply flex items-center;
+  @apply mb-6;
+}
+
+.link-button {
+  @apply flex items-center gap-2;  
+  @apply text-hutopyPrimary hover:text-hutopySecondary;
+  @apply transition-colors;
+  @apply duration-300;
+  @apply font-medium;
 }
 
 h1 {
   @apply text-6xl;
   @apply font-medium;
   @apply mb-8;
+  @apply text-center;
 }
 
 p {
   @apply text-lg;
   @apply font-medium;
   @apply mb-8;
-}
-
-.action-button {
-  @apply bg-hPrimary text-hOnPrimary;
-  @apply p-4 m-4;
-  @apply text-lg;
-  @apply rounded-xl;
+  @apply text-center;
 }
 </style>
diff --git a/frontend/src/views/PaymentFailed.vue b/frontend/src/views/PaymentFailed.vue
index 8cb4b3f..d2238cb 100644
--- a/frontend/src/views/PaymentFailed.vue
+++ b/frontend/src/views/PaymentFailed.vue
@@ -1,13 +1,16 @@
 <template>
   <div class="container">
     <div class="card">
-      <h1>{{ t('title') }}</h1>
-      <p>{{ t('message') }}</p>
-      <div class="card-actions">
-        <button class="action-button" @click="goBack()">
-          {{ t('retry') }}
+      <!-- Navigation Link at the top -->
+      <div class="navigation-link">
+        <button class="link-button" @click="goBack()">
+          <v-icon>mdi-arrow-left</v-icon>
+          {{ t('returnToCreator') }}
         </button>
       </div>
+      
+      <h1>{{ t('title') }}</h1>
+      <p>{{ t('message') }}</p>
     </div>
   </div>
 </template>
@@ -31,54 +34,77 @@ function goBack() {
   "en": {
     "title": "Payment Failed",
     "message": "We couldn't process your payment.",
-    "retry": "Try Again"
+    "retry": "Try Again",
+    "returnToCreator": "Return to creator page"
   },
   "fr": {
     "title": "Échec du paiement",
     "message": "Nous n'avons pas pu traiter votre paiement.",
-    "retry": "Réessayer"
+    "retry": "Réessayer",
+    "returnToCreator": "Retourner à la page du créateur"
   },
   "es": {
     "title": "Pago fallido",
     "message": "No pudimos procesar su pago.",
-    "retry": "Intentar de nuevo"
+    "retry": "Intentar de nuevo",
+    "returnToCreator": "Volver a la página del creador"
   }
 }
 </i18n>
 
 <style scoped>
 .container {
-  @apply min-h-screen;
   @apply flex items-center justify-center;
+  @apply p-5;
 }
 
 .card {
   @apply bg-hSurface text-hOnSurface;
   @apply p-8;
   @apply font-sans;
-  @apply rounded-3xl;
+  @apply rounded-2xl;
+  @apply shadow-2xl;
+  @apply relative;
+  @apply w-full;
+  @apply max-w-2xl;
 }
 
-.card-actions {
-  @apply flex items-center justify-end;
+.card::before {
+  content: '';
+  @apply absolute inset-0;
+  @apply rounded-2xl;
+  @apply p-[1px];
+  background: linear-gradient(135deg, rgba(64, 64, 64, 1) 0%, rgba(64, 64, 64, 0) 20%, rgba(64, 64, 64, 0.5) 100%);
+  mask: linear-gradient(#fff 0 0) content-box,
+  linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.navigation-link {
+  @apply flex items-center;
+  @apply mb-6;
+}
+
+.link-button {
+  @apply flex items-center gap-2;
+  @apply text-hutopyPrimary hover:text-hutopySecondary;
+  @apply transition-colors;
+  @apply duration-300;
+  @apply font-medium;
 }
 
 h1 {
   @apply text-6xl;
   @apply font-medium;
   @apply mb-8;
+  @apply text-center;
 }
 
 p {
   @apply text-lg;
   @apply font-medium;
   @apply mb-8;
-}
-
-.action-button {
-  @apply bg-hPrimary text-hOnPrimary;
-  @apply p-4 m-4;
-  @apply text-lg;
-  @apply rounded-xl;
+  @apply text-center;
 }
 </style>