Modification de CreatorFolio - Tweaking de la mise en page, changement du favicon et modification du component StripePayment pour le ui

src/views/StripePayment.vue

@@ -1,42 +1,49 @@
 <template>
   <v-container>
-    <v-row>
-      <v-col>
-        <v-text-field
-          label="Montant ($)"
-          v-model="price"
-          style="color: rgb(0, 109, 119); background-color: #f4f4f4">
-        </v-text-field>
-      </v-col>
 
-      <v-col>
-        <v-btn
-          @click="goPay()"
-          style=" background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
-          >Envoyez
-        </v-btn>
-      </v-col>
+    <v-row>
+      <v-text-field label="Message"
+        style=" margin-top: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
+      </v-text-field>
     </v-row>
 
+
+    <v-row>
+      <v-text-field label="Montant ($)" v-model="price"
+        style="margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
+      </v-text-field>
+    </v-row>
+
+    <v-row justify="center">
+      <v-btn @click="goPay()"
+        style="margin-bottom: 10px; width: 200px;  background-color: #6b0065; color: white; font-weight: bold;">
+        <v-icon left style="margin-right: 10px;">
+          mdi-gift
+        </v-icon>
+        Envoyez
+      </v-btn>
+    </v-row>
+
+
     <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
       <template v-slot:default>
         <v-card>
-            <div id="checkout">
-                <!-- Checkout will insert the payment form here -->
-            </div>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn
-                    text="Annuler"
-                    @click="closeDialog()"
-                ></v-btn>
-            </v-card-actions>
+          <div id="checkout">
+            <!-- Checkout will insert the payment form here -->
+          </div>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn block class="ma-auto" style="width: 200px;" text="Annuler" @click="closeDialog()"></v-btn>
+          </v-card-actions>
         </v-card>
       </template>
     </v-dialog>
   </v-container>
 
 
+
+
+
 </template>
 
 <script setup>
@@ -44,44 +51,44 @@ import { useClient } from '@/plugins/api.js';
 import { loadStripe } from '@stripe/stripe-js';
 import { onMounted, ref } from "vue";
 
-  let stripe = null;
-  const client = useClient();
-  const price = ref(0);
-  const isPaymentDialogActive = ref(false);
-  var checkout;
+let stripe = null;
+const client = useClient();
+const price = ref(0);
+const isPaymentDialogActive = ref(false);
+var checkout;
 
-  onMounted(async () => {
-    // I removed api key to push. Need to get it from backend.
-    stripe = await loadStripe('');
-  })
+onMounted(async () => {
+  // I removed api key to push. Need to get it from backend.
+  stripe = await loadStripe('');
+})
 
-  const fetchClientSecret = async () => {
-    const clientSecret = await createCheckoutSession();
-    return clientSecret;
-  };
+const fetchClientSecret = async () => {
+  const clientSecret = await createCheckoutSession();
+  return clientSecret;
+};
 
-  async function createCheckoutSession() {
-    let clientSecret = await client.post('/api/Stripe', {
-      price: price.value * 100
-    });
-
-    let secret = clientSecret["data"];
-    return secret;
-  }
-
-  function closeDialog(){
-    isPaymentDialogActive.value = false;
-    checkout.destroy();
-  }
-
-  async function goPay() {
-    isPaymentDialogActive.value = true;
-
-    checkout = await stripe.initEmbeddedCheckout({
-      fetchClientSecret,
+async function createCheckoutSession() {
+  let clientSecret = await client.post('/api/Stripe', {
+    price: price.value * 100
   });
 
-    await checkout.mount('#checkout');
-  }
+  let secret = clientSecret["data"];
+  return secret;
+}
+
+function closeDialog() {
+  isPaymentDialogActive.value = false;
+  checkout.destroy();
+}
+
+async function goPay() {
+  isPaymentDialogActive.value = true;
+
+  checkout = await stripe.initEmbeddedCheckout({
+    fetchClientSecret,
+  });
+
+  await checkout.mount('#checkout');
+}
 
 </script>