From 8b9e1141a2c0656ef7ae3127cd514d01bc1ac479 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Thu, 25 Apr 2024 00:04:44 -0400
Subject: [PATCH] PayementCompleted - ui

---
 src/views/PayementCompleted.vue | 105 +++++++++++++++++++-------------
 1 file changed, 64 insertions(+), 41 deletions(-)
diff --git a/src/views/PayementCompleted.vue b/src/views/PayementCompleted.vue
index ad02f0d..35e2968 100644
--- a/src/views/PayementCompleted.vue
+++ b/src/views/PayementCompleted.vue
@@ -1,44 +1,67 @@
-<script setup>
+<template>
 
+  <body style="background-color: #f4f4f4;">
+
+    <DefaultLayout></DefaultLayout>
+    <v-container>
+      <div class="margin-top-mobile">
+        <v-row style="margin-top: 8%; margin-bottom: 2%" class="d-flex justify-center align-center">
+          <v-col cols="12" xxl="3" xl="4" lg="6" md="7" sm="9"> <v-card class="custom-dialog"
+              style="background-color: white;">
+              <v-container>
+                <!-- Title Card -->
+                <v-card-text style="font-weight: 600; margin-top: 25px; margin-bottom: 25px; font-size: 2.5rem;"
+                  class="text-center">
+                  Paiement complété
+                </v-card-text>
+                <v-row justify="center">
+
+                  <!-- Icon Check -->
+                  <v-col cols="12" class="text-center">
+                    <v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
+                  </v-col>
+                </v-row>
+                <!-- Informations -->
+                <v-row justify="center">
+                  <v-col cols="12">
+                    <v-card-text style="font-size: 1.2rem; text-align: center;">
+                      Merci de supporter
+                    </v-card-text>
+                    <v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center;">
+                      Guillaume Mousseau
+                    </v-card-text>
+                  </v-col>
+                </v-row>
+                <!-- Ok btn -->
+                <v-row>
+                  <v-col cols="12">
+                    <v-card-actions class="justify-center">
+                      <v-btn color="white" outlined elevation="2"
+                        style="font-size: 2rem; width: 250px; height: 50px; margin-bottom: 25px; background-color: #a30e79;"
+                        @click="this.$router.push({ path: '/guillaumeaime' })">Ok</v-btn>
+                    </v-card-actions>
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-card>
+          </v-col>
+        </v-row>
+      </div>
+    </v-container>
+    <FooterLayout></FooterLayout>
+
+  </body>
+</template>
+
+<script setup>
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import FooterLayout from '@/layouts/FooterLayout.vue';
 </script>
 
-<template>
-  <v-card class="custom-dialog" style="background-color: #f4f4f4;">
-    <v-container>
-      <v-row justify="center">
-        <!-- Icon Check -->
-        <v-col cols="12" class="text-center">
-          <v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
-        </v-col>
-      </v-row>
-
-      <!-- Informations -->
-      <v-row justify="center">
-        <v-col cols="12">
-          <v-card-text style="font-weight: 600;">
-            Paiement complété
-          </v-card-text>
-          <v-card-text style="margin-top: -24px;">
-            Transaction : #
-          </v-card-text>
-
-          <v-card-text style="font-size: 1.2rem; text-align: center;">
-            Merci de supporter
-          </v-card-text>
-          <v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center;">
-            Guillaume Mousseau
-          </v-card-text>
-        </v-col>
-      </v-row>
-
-      <!-- Ok btn -->
-      <v-row>
-        <v-col cols="12">
-          <v-card-actions class="justify-end">
-            <v-btn @click="this.$router.push({path: '/guillaumeaime'})">Ok</v-btn>
-          </v-card-actions>
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-card>
-</template>
\ No newline at end of file
+<style scoped>
+@media (min-width: 200px) and (max-width: 960px) {
+  .margin-top-mobile {
+    margin-top: 60px;
+  }
+}
+</style>
