Adds brandingStore.

Split userStore into userProfileStore and creatorProfileStore

src/views/creators/DonationButtonBanner.vue

@@ -1,28 +1,32 @@
 <template>
   <v-btn :style="{ 
-    backgroundColor: colorBorder, color: 'white', 
-    borderRadius: '8px', padding:'20px 24px', 
-    display: 'flex', alignItems: 'center', 
-    justifyContent: 'center' }" @click="openDonationDialog()">
-    <div class="font-bold"> Je soutiens </div>
+    backgroundColor: brandingStore.value.colors.primary, 
+    color: 'white', 
+    borderRadius: '8px',
+     padding:'20px 24px', 
+    display: 'flex', 
+    alignItems: 'center', 
+    justifyContent: 'center' }" 
+         @click="openDonationDialog()">
+    <div class="font-bold"> Je soutiens</div>
   </v-btn>
 
   <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.image.logoUrl"
               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>
@@ -53,7 +57,7 @@
                       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>
@@ -76,28 +80,16 @@
       </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 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 brandingStore = useBrandingStore()
 
 const donationModal = ref(false);
 
@@ -109,7 +101,6 @@ function closeDonationDialog() {
   donationModal.value = false
 }
 
-
 const isPaymentDialogActive = ref(false);
 
 const tipAmount = ref(0);
@@ -148,6 +139,7 @@ function closeDialog() {
     checkout.destroy();
   }
 }
+
 async function goPay() {
   isPaymentDialogActive.value = true;