Adds brandingStore.

Split userStore into userProfileStore and creatorProfileStore

src/views/creators/FollowButton.vue

@@ -1,27 +1,22 @@
 <script setup>
-import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
 import {computed, ref} from "vue";
+import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const props = defineProps({
-  creator: {type: Object, required: true},
-  backgroundColor: {required: true},
-});
-
-const colorBorder = computed(() => props.colorBorder);
-
+const brandingStore = useBrandingStore()
 const subscriptionStore = useSubscriptionStore();
 
-const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));
+const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(brandingStore.value.id));
 
 function subscribeToCreator() {
-  subscriptionStore.subscribeTo(props.creator.id);
+  subscriptionStore.subscribeTo(brandingStore.value.id);
 }
 
 // Référence pour contrôler l'affichage du modal
 const showUnsubscribeModal = ref(false);
 
 function unsubscribeFromCreator() {
-  subscriptionStore.unsubscribeFrom(props.creator.id);
+  subscriptionStore.unsubscribeFrom(brandingStore.value.id);
   // Fermer le modal après désabonnement
   showUnsubscribeModal.value = false;
 }
@@ -33,7 +28,7 @@ function unsubscribeFromCreator() {
         :style="{ 
        width: '150px',
        height: '28px',
-        backgroundColor: backgroundColor, 
+        backgroundColor: brandingStore.value.colors.secondary, 
         color: 'white', 
       borderRadius: '8px 0 0 8px',
         padding: '10px 24px',
@@ -50,17 +45,17 @@ function unsubscribeFromCreator() {
 
   <template v-else>
     <v-btn
-        :style="{ 
-       width: '150px',
-              height: '28px',
-        backgroundColor: backgroundColor, 
-        color: 'white', 
+        :style="{
+      width: '150px',
+      height: '28px',
+      backgroundColor: brandingStore.value.colors.secondary,
+      color: 'white', 
       borderRadius: '8px 0 0 8px',
-        padding: '10px 24px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        transition: 'background-color 0.3s ease'
+      padding: '10px 24px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      transition: 'background-color 0.3s ease'
       }"
         @click="showUnsubscribeModal = true"
     >
@@ -70,7 +65,7 @@ function unsubscribeFromCreator() {
 
   <v-dialog v-model="showUnsubscribeModal" max-width="500">
     <v-card class="text-center rounded-xl"
-            :style="{ border: `3px solid ${creator.colors.menu}` }">
+            :style="{ border: `3px solid ${brandingStore.value.colors.secondary}` }">
 
       <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
         <div class="flex-1 text-center">
@@ -87,12 +82,13 @@ function unsubscribeFromCreator() {
         </v-btn>
 
         <v-btn class="flex-grow-1"
-               :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined"
+               :style="{ borderColor: brandingStore.value.colors.secondary, color: brandingStore.value.colors.secondary }"
+               variant="outlined"
                @click="showUnsubscribeModal = false">
-          <div :style="{ color: creator.colors.menu }">Non</div>
+          <div :style="{ color: brandingStore.value.colors.secondary }">Non</div>
         </v-btn>
       </v-card-actions>
     </v-card>
-  </v-dialog>
+  </v-dialog> 
 </template>