From 3ca2dc58eb1888f79985b528c71c02dd38a9f537 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Tue, 11 Feb 2025 13:40:32 -0500
Subject: [PATCH] Update colors for Payments pages

---
 frontend/src/views/PaymentCompleted.vue | 152 +++++++++++-------------
 frontend/src/views/PaymentFailed.vue    | 114 +++++++++---------
 2 files changed, 129 insertions(+), 137 deletions(-)

diff --git a/frontend/src/views/PaymentCompleted.vue b/frontend/src/views/PaymentCompleted.vue
index f12957d..2f6306c 100644
--- a/frontend/src/views/PaymentCompleted.vue
+++ b/frontend/src/views/PaymentCompleted.vue
@@ -1,69 +1,52 @@
 <template>
-  <v-container class="py-10">
-    <v-row class="d-flex flex-column align-center">
-      <v-col cols="10">
-        <v-card
-          class="elevation-3"
-          style="background-color: white; border-radius: 12px"
-        >
-          <!-- Title Section -->
-          <v-card-title class="text-center text-h4 font-weight-bold mb-4">
-            {{ $t('paymentConfirmation.success.title') }}
-          </v-card-title>
+  <div class="container">
+    <div class="card">
 
-          <!-- Check Icon -->
-          <v-card-text class="text-center mb-4">
-            <v-icon size="120" color="success">mdi-check-circle</v-icon>
-          </v-card-text>
+      <h1>
+        {{ $t('paymentConfirmation.success.title') }}
+      </h1>
 
-          <!-- Thank You Message -->
-          <v-card-text class="text-center mb-4">
-            <p class="text-h6">
-              {{ $t('paymentConfirmation.success.message') }}
-              <span class="text-h5 font-weight-bold" v-if="creatorUserName">{{
-                creatorUserName
-              }}</span>
-              <span class="text-h6" v-else>{{
-                $t('paymentConfirmation.success.usernameDefault')
-              }}</span>
-            </p>
-          </v-card-text>
+      <p>
+        <v-icon size="120" color="success">
+          mdi-check-circle
+        </v-icon>
+      </p>
 
-          <!-- Email Input and Receipt Button -->
-          <v-card-text class="text-center mb-4">
-            <p class="text-h6">
-              {{ $t('paymentConfirmation.success.receipt') }}
-            </p>
-          </v-card-text>
+      <p>
+        {{ $t('paymentConfirmation.success.message') }}
 
-          <!-- Continue Button -->
-          <v-card-actions class="justify-center">
-            <v-btn
-              color="primary"
-              class="text-white px-5 py-3"
-              @click="router.push({ path: `/@${creatorUserName}` })"
-            >
-              {{ $t('paymentConfirmation.success.continue') }}
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-    </v-row>
+        <span v-if="creatorUserName">
+          {{ creatorUserName }}
+        </span>
+
+        <span v-else>
+          {{ $t('paymentConfirmation.success.usernameDefault') }}
+        </span>
+
+      </p>
+
+      <p>
+        {{ $t('paymentConfirmation.success.receipt') }}
+      </p>
+
+      <!-- Continue Button -->
+      <div class="card-actions">
+        <button
+            class="action-button"
+            @click="router.push({ path: `/@${creatorUserName}` })">
+          {{ $t('paymentConfirmation.success.continue') }}
+        </button>
+      </div>
+
+    </div>
+  </div>
 
-    <!-- Error Snackbar -->
-    <v-snackbar v-model="errorSnackBar" color="red darken-1">
-      Aucun reçu trouvé pour cet email.
-      <template v-slot:actions>
-        <v-btn color="white" text @click="errorSnackBar = false">Fermer</v-btn>
-      </template>
-    </v-snackbar>
-  </v-container>
 </template>
 
 <script setup>
-import { useClient } from '@/plugins/api.js';
-import { onBeforeMount, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import {useClient} from '@/plugins/api.js';
+import {onBeforeMount, ref} from 'vue';
+import {useRoute, useRouter} from 'vue-router';
 
 const router = useRouter();
 const route = useRoute();
@@ -71,8 +54,6 @@ const client = useClient();
 
 const creatorId = route.params.creatorId;
 const creatorUserName = ref('');
-const email = ref('');
-const errorSnackBar = ref(false);
 
 onBeforeMount(async () => {
   try {
@@ -83,36 +64,41 @@ onBeforeMount(async () => {
   }
 });
 
-async function getReceipt() {
-  try {
-    const response = await client.get(
-      `/api/Stripe/GetMyLastReceipt?CreatorId=${creatorId}&Email=${email.value}`
-    );
-    const receiptUrl = response.data.receiptUrl;
-
-    if (!receiptUrl) {
-      errorSnackBar.value = true;
-    } else {
-      window.open(receiptUrl, '_blank');
-    }
-  } catch (error) {
-    console.error('Failed to fetch receipt:', error);
-    errorSnackBar.value = true;
-  }
-}
 </script>
 
 <style scoped>
-.v-container {
-  max-width: 800px;
-  margin: auto;
+.container {
+  @apply min-h-screen;
+  @apply flex items-center justify-center;
 }
 
-.v-card {
-  padding: 24px;
+.card {
+  @apply bg-hSurface text-hOnSurface;
+  @apply p-8;
+  @apply font-sans;
+  @apply rounded-3xl;
 }
 
-.v-btn {
-  border-radius: 8px;
+.card-actions {
+  @apply flex items-center justify-end;
+}
+
+h1 {
+  @apply text-6xl;
+  @apply font-medium;
+  @apply mb-8;
+}
+
+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;
 }
 </style>
diff --git a/frontend/src/views/PaymentFailed.vue b/frontend/src/views/PaymentFailed.vue
index c000f8e..ca06480 100644
--- a/frontend/src/views/PaymentFailed.vue
+++ b/frontend/src/views/PaymentFailed.vue
@@ -1,55 +1,39 @@
 <template>
-  <v-container class="py-10">
-    <v-row class="d-flex flex-column align-center">
-      <v-col cols="10">
-        <v-card
-          class="elevation-3"
-          style="background-color: white; border-radius: 12px"
+
+  <div class="container">
+    <div class="card">
+
+      <h1>
+        {{ $t('paymentConfirmation.failure.title') }}
+      </h1>
+
+      <p>
+        <v-icon size="120" color="error">
+          mdi-close-circle
+        </v-icon>
+      </p>
+
+      <p>
+        {{ $t('paymentConfirmation.failure.message') }}
+      </p>
+
+      <div class="card-actions">
+        <button
+            class="action-button"
+            @click="router.push({ path: `/@${creatorUserName}` })"
         >
-          <!-- Title Section -->
-          <v-card-title
-            class="text-center text-h4 font-weight-bold mb-4 text-danger"
-          >
-            {{ $t('paymentConfirmation.failure.title') }}
-          </v-card-title>
-
-          <!-- Cancel Icon -->
-          <v-card-text class="text-center mb-4">
-            <v-icon size="120" color="error">mdi-close-circle</v-icon>
-          </v-card-text>
-
-          <!-- Message -->
-          <v-card-text class="text-center mb-4">
-            <p class="text-h6">
-              {{ $t('paymentConfirmation.failure.message') }}
-            </p>
-            <p class="text-h5 font-weight-bold">
-              {{ $t('paymentConfirmation.failure.thanks') }}
-              {{ creatorUserName }}
-            </p>
-          </v-card-text>
-
-          <!-- Back Button -->
-          <v-card-actions class="justify-center">
-            <v-btn
-              color="primary"
-              class="text-white px-5 py-3"
-              @click="router.push({ path: `/@${creatorUserName}` })"
-            >
-              {{ $t('paymentConfirmation.failure.return') }}
-              {{ creatorUserName }}
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
+          {{ $t('paymentConfirmation.success.continue') }}
+          {{ creatorUserName }}
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { useClient } from '@/plugins/api.js';
-import { onBeforeMount, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import {useClient} from '@/plugins/api.js';
+import {onBeforeMount, ref} from 'vue';
+import {useRoute, useRouter} from 'vue-router';
 
 const router = useRouter();
 const route = useRoute();
@@ -69,16 +53,38 @@ onBeforeMount(async () => {
 </script>
 
 <style scoped>
-.v-container {
-  max-width: 800px;
-  margin: auto;
+.container {
+  @apply min-h-screen;
+  @apply flex items-center justify-center;
 }
 
-.v-card {
-  padding: 24px;
+.card {
+  @apply bg-hSurface text-hOnSurface;
+  @apply p-8;
+  @apply font-sans;
+  @apply rounded-3xl;
 }
 
-.v-btn {
-  border-radius: 8px;
+.card-actions {
+  @apply flex items-center justify-end;
+}
+
+h1 {
+  @apply text-6xl;
+  @apply font-medium;
+  @apply mb-8;
+}
+
+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;
 }
 </style>