Update colors for Payments pages

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>