Ensure the Creator's Colors are applied to the DonationButton

src/views/creators/CreatorBanner.vue

@@ -62,18 +62,24 @@
           <subscribe-button :creator="creator"></subscribe-button>
         </div>
 
-        <donation-button :creator="creator" iconColorClass="text-white"></donation-button>
+        <donation-button :color-border="creator.colors.menu"
+                         :color-accent="creator.colors.accent"
+                         :creator-id="creator.id"
+                         :creator-name="creator.name"
+                         :creator-logo="creator.images.logo"
+                         iconColorClass="text-white"
+        ></donation-button>
 
 
         <div class="flex flex-row align-center">
-       
-         
+
+
         </div>
         <!-- Buttons -->
         <div class="flex flex-wrap items-center  mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4">
           <publish-content-button :creator="creator"></publish-content-button>
           <div class="text-white text-2xl">{{ creator.about.title }}</div>
-          <creator-about :creator="creator"></creator-about>     
+          <creator-about :creator="creator"></creator-about>
         </div>
       </div>
     </div>

src/views/creators/DonationButton.vue

@@ -1,32 +1,32 @@
 <template>
-  <v-btn variant="text" icon @click="donationModal = true">
+  <v-btn variant="text" icon @click="openDonationDialog()">
     <v-icon :class="['text-2xl', iconColorClass]">mdi-gift-outline</v-icon>
   </v-btn>
 
 
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>
-      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${creator.colors.menu}` }">
+      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">
         <div class="py-4 text-2xl font-bold border-b mb-2">
           Je Soutiens!
         </div>
 
         <div class="flex flex-row align-center px-3">
           <img
-              :src="creator.images.logo"
+              :src="creatorLogo"
               alt="Profile Image"
               class="rounded-full"
               width="40"
               height="40"
-              :style="{ border: `2px solid ${creator.colors.accent}` }">
-          <div class="capitalize px-2 text-2xl">{{ creator.name }}</div>
-          <v-btn icon @click="donationModal = false" class="ml-auto" variant="text">
+              :style="{ border: `2px solid ${colorAccent}` }">
+          <div class="capitalize px-2 text-2xl">{{ creatorName }}</div>
+          <v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
             <v-icon>mdi-close</v-icon>
           </v-btn>
         </div>
 
         <v-card-text>
-          <v-text-field v-model="price"
+          <v-text-field v-model="tipAmount"
                         class="p-2"
                         label="Montant"
                         density="comfortable"
@@ -44,7 +44,8 @@
                       clearable
           ></v-textarea>
 
-          <v-btn variant="outlined" :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" @click="goPay()" class="w-full mt-5">
+          <v-btn variant="outlined" :style="{ borderColor: colorBorder, color: colorBorder }"
+                 @click="goPay()" class="w-full mt-5">
             Envoyez
           </v-btn>
         </v-card-text>
@@ -55,9 +56,10 @@
   <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
     <template v-slot:default>
       <v-card>
+
         <div id="checkout">
-         
         </div>
+
         <v-card-actions>
           <v-spacer></v-spacer>
           <v-btn block class="ma-auto" style="width: 200px;" text @click="closeDialog()">Annuler</v-btn>
@@ -65,32 +67,52 @@
       </v-card>
     </template>
   </v-dialog>
+  
 </template>
 
 <script setup>
 import {useClient} from '@/plugins/api.js';
 import {loadStripe} from '@stripe/stripe-js';
-import {onMounted, ref} from 'vue';
+import {computed, onMounted, ref} from 'vue';
+
+const props = defineProps({
+  colorBorder: {type: String, required: true},
+  colorAccent: {type: String, required: true},
+  creatorId: {type: String, required: true},
+  creatorName: {type: String, required: true},
+  creatorLogo: {type: String, required: true},
+  iconColorClass: {type: String, default: 'text-black'}
+});
+
+const colorBorder = computed(() => props.colorBorder)
+const colorAccent = computed(() => props.colorAccent)
+const creatorId = computed(() => props.creatorId)
+const creatorName = computed(() => props.creatorName)
+const creatorLogo = computed(() => props.creatorLogo)
 
 const donationModal = ref(false);
-const isPaymentDialogActive = ref(false); // Ajout de cette ligne
-const price = ref(0);
+
+function openDonationDialog() {
+  donationModal.value = true
+}
+
+function closeDonationDialog() {
+  donationModal.value = false
+}
+
+
+const isPaymentDialogActive = ref(false);
+
+const tipAmount = ref(0);
 const tipMessage = ref("");
 
 let stripe = null;
 let checkout;
 
-const client = useClient();
-
-const props = defineProps({
-  creator: {type: Object, required: true},
-  iconColorClass: { type: String, default: 'text-black' }
-});
-
 
 onMounted(async () => {
   stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
-  console.log(props.creator.id)
+  console.log(creatorId)
 });
 
 const fetchClientSecret = async () => {
@@ -99,13 +121,13 @@ const fetchClientSecret = async () => {
 };
 
 
-
 async function createCheckoutSession() {
+  const client = useClient()
   let clientSecret = await client.post('/api/Stripe', {
-    amount: (price.value * 100),
+    amount: (tipAmount.value * 100),
     tipMessage: tipMessage.value,
-    creatorId: props.creator.id
-    
+    creatorId: props.creatorId
+
   });
 
   let secret = clientSecret["data"];