jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add navigation link to return to creator page in PaymentCompleted and PaymentFailed views, update styles for improved layout

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-04-24 14:09:15 -04:00
parent 3a6ee307cd
commit 7d0aea75d8
2 changed files with 89 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/views/PaymentCompleted.vue
View File

@@ -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>

64
frontend/src/views/PaymentFailed.vue
View File

@@ -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>