Adds brandingStore.

Split userStore into userProfileStore and creatorProfileStore

src/views/creators/DonationButton.vue

@@ -6,20 +6,20 @@
 
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>
-      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">
+      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
         <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="creatorLogo"
+              :src="brandingStore.value.images.logo"
               alt="Profile Image"
               class="rounded-full"
               width="40"
               height="40"
-              :style="{ border: `2px solid ${colorAccent}` }">
-          <div class="capitalize px-2 text-2xl">{{ creatorName }}</div>
+              :style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }">
+          <div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
           <v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
             <v-icon>mdi-close</v-icon>
           </v-btn>
@@ -50,7 +50,8 @@
                       clearable
           ></v-textarea>
 
-          <v-btn variant="outlined" :style="{ borderColor: colorBorder, color: colorBorder }"
+          <v-btn variant="outlined"
+                 :style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
                  @click="goPay()" class="w-full mt-5">
             Envoyez
           </v-btn>
@@ -68,34 +69,29 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn block class="ma-auto" style="width: 200px;" text @click="closeDialog()">Annuler</v-btn>
+          <v-btn block class="ma-auto"
+                 style="width: 200px;"
+                 @click="closeDialog()">Annuler
+          </v-btn>
         </v-card-actions>
       </v-card>
     </template>
   </v-dialog>
-  
+
 </template>
 
 <script setup>
 import {useClient} from '@/plugins/api.js';
 import {loadStripe} from '@stripe/stripe-js';
-import {computed, onMounted, ref} from 'vue';
+import {onMounted, ref} from 'vue';
+import {useBrandingStore} from "@/stores/brandingStore.js";
+
+const brandingStore = useBrandingStore()
 
 const props = defineProps({
-  colorBorder: {required: true},
-  colorAccent: {required: true},
-  creatorId: {type: String, required: true},
-  creatorName: {type: String, required: true},
-  creatorLogo: {required: true},
   iconColorClass: {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);
 
 function openDonationDialog() {
@@ -145,6 +141,7 @@ function closeDialog() {
     checkout.destroy();
   }
 }
+
 async function goPay() {
   isPaymentDialogActive.value = true;