From a02695c81aa883d07a88e9da61062128c7db7820 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Mon, 7 Oct 2024 18:39:46 -0400
Subject: [PATCH] Fix the timing/loading issues with branding when navigating
 the site

---
 src/App.vue                                   | 13 ++++-
 src/stores/brandingStore.js                   | 48 +++++++++++++------
 src/views/creators/CreatorBanner.vue          |  2 +-
 src/views/creators/CreatorHome.vue            |  2 +-
 src/views/creators/CreatorLayout.vue          | 29 +++++------
 src/views/creators/DonationButton.vue         |  6 +--
 src/views/creators/DonationButtonBanner.vue   |  8 ++--
 .../creators/DonationButtonBannerSlim.vue     |  8 ++--
 src/views/creators/FollowButton.vue           | 10 ++--
 src/views/creators/SubscribeButton.vue        | 10 ++--
 src/views/creators/SubscribeButtonSlim.vue    | 10 ++--
 .../banner/bannerlower/BannerActionsLg.vue    |  8 ++--
 .../banner/bannerlower/BannerActionsMd.vue    |  4 +-
 .../banner/bannerlower/BannerActionsSm.vue    |  2 +-
 .../banner/bannerlower/BannerActionsXl.vue    | 18 +++----
 src/views/main/Footer.vue                     | 26 +++++-----
 16 files changed, 114 insertions(+), 90 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index cec2875..59c864e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,8 +6,14 @@
         <side-bar></side-bar>
       </div>
 
-      <div class="pl-60 w-full min-h-screen flex justify-center items-center bg-green">
-        <router-view></router-view>
+      <div class="pl-60 w-full min-h-screen">
+
+        <div v-if="!brandingStore.loading"
+             class="flex justify-center items-center"
+             :style="{backgroundColor: brandingStore.colors.background}">
+          <router-view></router-view>
+        </div>
+
       </div>
 
     </div>
@@ -20,6 +26,9 @@
 <script async setup>
 import SideBar from "@/views/main/SideBar.vue";
 import SizeIndicator from "@/views/tools/SizeIndicator.vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
+
+const brandingStore = useBrandingStore()
 </script>
 
 <style scoped>
diff --git a/src/stores/brandingStore.js b/src/stores/brandingStore.js
index 3e0f04d..013d2f2 100644
--- a/src/stores/brandingStore.js
+++ b/src/stores/brandingStore.js
@@ -1,53 +1,71 @@
 import {defineStore} from 'pinia'
 import {useClient} from "@/plugins/api.js";
 import {useSessionStorage} from "@vueuse/core";
-import {onBeforeMount, ref, watch} from "vue";
+import {ref, watch} from "vue";
 import {useRoute} from "vue-router";
 
 export const useBrandingStore = defineStore(
     'branding',
     () => {
 
-        const currentBrand = ref('')
+        const currentBrand = ref(undefined)
+        const loading = ref(false)
 
         const value = useSessionStorage(
             'branding',
             {},
             {writeDefaults: false})
 
-        const loading = ref(true)
+        const defaultColors = {
+            "background": "#f4f4f4",
+            "error": "#f4f4f4",
+            "primary": "#f4f4f4",
+            "secondary": "#f4f4f4",
+            "surface": "#f4f4f4",
+            "onBackground": "#000",
+            "onError": "#000",
+            "onPrimary": "#000",
+            "onSecondary": "#000",
+            "onSurface": "#000",
+        }
+        const colors = ref(defaultColors)
 
         const route = useRoute()
-
-        onBeforeMount(async () => await fetchCreatorData(route.params.creator))
-
         watch(
             () => route.params.creator,
-            async () => {
-                if (route.params.creator !== currentBrand.value) {
-                    if (route.params.creator !== undefined) {                        
-                        await fetchCreatorData(route.params.creator)
-                        currentBrand.value = route.params.creator
+            async (newCreator, oldCreator) => {
+                loading.value = true
+
+                if (newCreator !== oldCreator) {
+                    if (newCreator !== undefined) {
+                        value.value = await fetchCreatorData(newCreator)
+                        currentBrand.value = newCreator
+                        colors.value = value.value.colors
+                    } else {
+                        value.value = {}
+                        currentBrand.value = undefined
+                        colors.value = defaultColors
                     }
                 }
+
+                loading.value = false
             }
         )
 
         const fetchCreatorData = async (creatorAlias) => {
             try {
-                loading.value = true
                 const client = useClient()
                 const response = await client.get(`/api/creators/@${creatorAlias}`)
-                value.value = response.data
+                return response.data
             } catch (error) {
                 console.error(`Error fetching content: ${error}`)
-            } finally {
-                loading.value = false
             }
         }
 
         return {
+            currentBrand,
             value,
+            colors,
             loading
         }
     })
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 6b42239..e8098e8 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="shadow-lg rounded-2xl mt-2 ">
       <div class="relative z-20">
-        <div class="min-h-8 rounded-t-2xl shadow-lg" :style="{ backgroundColor: branding.value.colors.primary}"></div>
+        <div class="min-h-8 rounded-t-2xl shadow-lg" :style="{ backgroundColor: branding.colors.primary}"></div>
         <!--Banner-->
         <div class="relative">
           <div>
diff --git a/src/views/creators/CreatorHome.vue b/src/views/creators/CreatorHome.vue
index a6db721..b37f55d 100644
--- a/src/views/creators/CreatorHome.vue
+++ b/src/views/creators/CreatorHome.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-row">
     
         <div class="px-4" 
-             :style="{ backgroundColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.onPrimary}">
+             :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary}">
       <h1>TEST</h1>
       <p>GET ME AN EDITOR NOW!</p>
     </div>
diff --git a/src/views/creators/CreatorLayout.vue b/src/views/creators/CreatorLayout.vue
index 917207f..2ac38b2 100644
--- a/src/views/creators/CreatorLayout.vue
+++ b/src/views/creators/CreatorLayout.vue
@@ -1,27 +1,24 @@
 <template>
-  <div :style="{ backgroundColor: brandingStore.value.colors.background }">
 
-    <div class="flex flex-col min-h-screen max-w-[1500px] mx-auto">
+  <div class="flex flex-col min-h-screen max-w-[1500px] mx-auto">
 
-      <div v-if="brandingStore.loading">
-        <v-progress-linear indeterminate></v-progress-linear>
-      </div>
-      <div v-else>
-        <creator-banner></creator-banner>
-      </div>
+    <div v-if="brandingStore.loading">
+      <v-progress-linear indeterminate></v-progress-linear>
+    </div>
+    <div v-else>
+      <creator-banner></creator-banner>
+    </div>
 
-      <div class="py-8 flex-grow">
-        <router-view></router-view>
-      </div>
-
-      <div>
-        <Footer></Footer>
-      </div>
+    <div class="py-8 flex-grow">
+      <router-view></router-view>
+    </div>
 
+    <div>
+      <Footer></Footer>
     </div>
 
   </div>
-
+  
 </template>
 
 <script async setup>
diff --git a/src/views/creators/DonationButton.vue b/src/views/creators/DonationButton.vue
index 90d349a..c726a05 100644
--- a/src/views/creators/DonationButton.vue
+++ b/src/views/creators/DonationButton.vue
@@ -6,7 +6,7 @@
 
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>
-      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
+      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.colors.primary}` }">
         <div class="py-4 text-2xl font-bold border-b mb-2">
           Je Soutiens!
         </div>
@@ -18,7 +18,7 @@
               class="rounded-full"
               width="40"
               height="40"
-              :style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }">
+              :style="{ border: `2px solid ${brandingStore.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>
@@ -51,7 +51,7 @@
           ></v-textarea>
 
           <v-btn variant="outlined"
-                 :style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
+                 :style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
                  @click="goPay()" class="w-full mt-5">
             Envoyez
           </v-btn>
diff --git a/src/views/creators/DonationButtonBanner.vue b/src/views/creators/DonationButtonBanner.vue
index d42ec81..ce73805 100644
--- a/src/views/creators/DonationButtonBanner.vue
+++ b/src/views/creators/DonationButtonBanner.vue
@@ -1,6 +1,6 @@
 <template>
   <v-btn :style="{ 
-    backgroundColor: brandingStore.value.colors.primary, 
+    backgroundColor: brandingStore.colors.primary, 
     color: 'white', 
     borderRadius: '8px',
      padding:'20px 24px', 
@@ -13,7 +13,7 @@
 
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>
-      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
+      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.colors.primary}` }">
         <div class="py-4 text-2xl font-bold border-b mb-2">
           Je Soutiens!
         </div>
@@ -25,7 +25,7 @@
               class="rounded-full"
               width="40"
               height="40"
-              :style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }">
+              :style="{ border: `2px solid ${brandingStore.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>
@@ -57,7 +57,7 @@
                       clearable
           ></v-textarea>
 
-          <v-btn variant="outlined" :style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
+          <v-btn variant="outlined" :style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
                  @click="goPay()" class="w-full mt-5">
             Envoyez
           </v-btn>
diff --git a/src/views/creators/DonationButtonBannerSlim.vue b/src/views/creators/DonationButtonBannerSlim.vue
index ca0ee72..189b485 100644
--- a/src/views/creators/DonationButtonBannerSlim.vue
+++ b/src/views/creators/DonationButtonBannerSlim.vue
@@ -1,6 +1,6 @@
 <template>
   <v-btn :style="{
-    backgroundColor: brandingStore.value.colors.primary,
+    backgroundColor: brandingStore.colors.primary,
     color: 'white', 
     borderRadius: '8px', 
     padding:'0px 24px', 
@@ -13,7 +13,7 @@
 
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>
-      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
+      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.colors.primary}` }">
         <div class="py-4 text-2xl font-bold border-b mb-2">
           Je Soutiens!
         </div>
@@ -25,7 +25,7 @@
               class="rounded-full"
               width="40"
               height="40"
-              :style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }">
+              :style="{ border: `2px solid ${brandingStore.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>
@@ -58,7 +58,7 @@
           ></v-textarea>
 
           <v-btn variant="outlined"
-                 :style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
+                 :style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
                  @click="goPay()" class="w-full mt-5">
             Envoyez
           </v-btn>
diff --git a/src/views/creators/FollowButton.vue b/src/views/creators/FollowButton.vue
index eed5883..da6a673 100644
--- a/src/views/creators/FollowButton.vue
+++ b/src/views/creators/FollowButton.vue
@@ -28,7 +28,7 @@ function unsubscribeFromCreator() {
         :style="{ 
        width: '150px',
        height: '28px',
-        backgroundColor: brandingStore.value.colors.secondary, 
+        backgroundColor: brandingStore.colors.secondary, 
         color: 'white', 
       borderRadius: '8px 0 0 8px',
         padding: '10px 24px',
@@ -48,7 +48,7 @@ function unsubscribeFromCreator() {
         :style="{
       width: '150px',
       height: '28px',
-      backgroundColor: brandingStore.value.colors.secondary,
+      backgroundColor: brandingStore.colors.secondary,
       color: 'white', 
       borderRadius: '8px 0 0 8px',
       padding: '10px 24px',
@@ -65,7 +65,7 @@ function unsubscribeFromCreator() {
 
   <v-dialog v-model="showUnsubscribeModal" max-width="500">
     <v-card class="text-center rounded-xl"
-            :style="{ border: `3px solid ${brandingStore.value.colors.secondary}` }">
+            :style="{ border: `3px solid ${brandingStore.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">
@@ -82,10 +82,10 @@ function unsubscribeFromCreator() {
         </v-btn>
 
         <v-btn class="flex-grow-1"
-               :style="{ borderColor: brandingStore.value.colors.secondary, color: brandingStore.value.colors.secondary }"
+               :style="{ borderColor: brandingStore.colors.secondary, color: brandingStore.colors.secondary }"
                variant="outlined"
                @click="showUnsubscribeModal = false">
-          <div :style="{ color: brandingStore.value.colors.secondary }">Non</div>
+          <div :style="{ color: brandingStore.colors.secondary }">Non</div>
         </v-btn>
       </v-card-actions>
     </v-card>
diff --git a/src/views/creators/SubscribeButton.vue b/src/views/creators/SubscribeButton.vue
index c0399d9..95125c9 100644
--- a/src/views/creators/SubscribeButton.vue
+++ b/src/views/creators/SubscribeButton.vue
@@ -28,7 +28,7 @@ function unsubscribeFromCreator() {
         :style="{ 
           width: '150px',
           height: '28px',
-          backgroundColor: brandingStore.value.colors.secondary, 
+          backgroundColor: brandingStore.colors.secondary, 
           color: 'white', 
           borderRadius: '0 8px 8px 0',
           padding: '10px 24px',
@@ -48,7 +48,7 @@ function unsubscribeFromCreator() {
         :style="{ 
        width: '150px',
               height: '28px',
-        backgroundColor: brandingStore.value.colors.secondary, 
+        backgroundColor: brandingStore.colors.secondary, 
         color: 'white', 
       borderRadius: '0 8px 8px 0',
         padding: '10px 24px',
@@ -65,7 +65,7 @@ function unsubscribeFromCreator() {
 
   <v-dialog v-model="showUnsubscribeModal" max-width="500">
     <v-card class="text-center rounded-xl"
-            :style="{ border: `3px solid ${brandingStore.value.colors.secondary}` }">
+            :style="{ border: `3px solid ${brandingStore.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">
@@ -82,10 +82,10 @@ function unsubscribeFromCreator() {
         </v-btn>
 
         <v-btn class="flex-grow-1"
-               :style="{ borderColor: brandingStore.value.colors.secondary, color: brandingStore.value.colors.secondary }"
+               :style="{ borderColor: brandingStore.colors.secondary, color: brandingStore.colors.secondary }"
                variant="outlined"
                @click="showUnsubscribeModal = false">
-          <div :style="{ color: brandingStore.value.colors.secondary }">Non</div>
+          <div :style="{ color: brandingStore.colors.secondary }">Non</div>
         </v-btn>
       </v-card-actions>
     </v-card>
diff --git a/src/views/creators/SubscribeButtonSlim.vue b/src/views/creators/SubscribeButtonSlim.vue
index 1870f8a..303e0f5 100644
--- a/src/views/creators/SubscribeButtonSlim.vue
+++ b/src/views/creators/SubscribeButtonSlim.vue
@@ -25,7 +25,7 @@ function unsubscribeFromCreator() {
     <v-btn
         class="mr-4"
         :style="{ 
-        backgroundColor: brandingStore.value.colors.secondary, 
+        backgroundColor: brandingStore.colors.secondary, 
         color: 'white', 
         borderRadius: '8px', 
         padding: '0px 24px',
@@ -44,7 +44,7 @@ function unsubscribeFromCreator() {
     <v-btn
         class="mr-4"
         :style="{ 
-        backgroundColor: brandingStore.value.colors.secondary, 
+        backgroundColor: brandingStore.colors.secondary, 
         color: 'white', 
         borderRadius: '8px', 
         padding: '0px 24px',
@@ -61,7 +61,7 @@ function unsubscribeFromCreator() {
 
   <v-dialog v-model="showUnsubscribeModal" max-width="500">
     <v-card class="text-center rounded-xl"
-            :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
+            :style="{ border: `3px solid ${brandingStore.colors.primary}` }">
 
       <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
         <div class="flex-1 text-center">
@@ -78,10 +78,10 @@ function unsubscribeFromCreator() {
         </v-btn>
 
         <v-btn class="flex-grow-1"
-               :style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
+               :style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
                variant="outlined"
                @click="showUnsubscribeModal = false">
-          <div :style="{ color: brandingStore.value.colors.primary }">Non</div>
+          <div :style="{ color: brandingStore.colors.primary }">Non</div>
         </v-btn>
       </v-card-actions>
     </v-card>
diff --git a/src/views/creators/banner/bannerlower/BannerActionsLg.vue b/src/views/creators/banner/bannerlower/BannerActionsLg.vue
index 416532e..07ff9d7 100644
--- a/src/views/creators/banner/bannerlower/BannerActionsLg.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsLg.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="relative w-full">
     <div ref="mainContainer" class="rounded-b-2xl pt-2 pb-1"
-         :style="{ backgroundColor: brandingStore.value.colors.bannerBottom, borderBottom: '5px inset' + (brandingStore.value.colors.menu || '#000') }">
+         :style="{ backgroundColor: brandingStore.colors.bannerBottom, borderBottom: '5px inset' + (brandingStore.colors.menu || '#000') }">
 
       <!-- Logo & User Info -->
       <div class="relative z-20">
@@ -11,7 +11,7 @@
                 class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[190px] ml-15 -mt-32"
                 :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
                 alt="Profile Picture"
-                :style="{ borderColor: brandingStore.value.colors.accent, height: '190px'}"
+                :style="{ borderColor: brandingStore.colors.accent, height: '190px'}"
             />
           </div>
 
@@ -33,14 +33,14 @@
 
     <!-- Conteneur sticky -->
     <div v-show="isSticky" class=" sticky-header fixed top-14 left-0 right-0 w-full z-20"
-         :style="{ backgroundColor: brandingStore.value.colors.bannerBottom , borderBottom: '5px inset' + (brandingStore.value.colors.menu || '#000') }">
+         :style="{ backgroundColor: brandingStore.colors.bannerBottom , borderBottom: '5px inset' + (brandingStore.colors.menu || '#000') }">
       <div class="shadow-3xl flex flex-row items-center py-2 px-2">
         <div>
           <img
               class="max-w-[40px] max-h-[40px] ml-5 rounded-full"
               :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
               alt="Profile Picture"
-              :style="{ borderColor: brandingStore.value.colors.accent, height: '190px'}"
+              :style="{ borderColor: brandingStore.colors.accent, height: '190px'}"
           />
         </div>
         <div class="ml-5 text-white">
diff --git a/src/views/creators/banner/bannerlower/BannerActionsMd.vue b/src/views/creators/banner/bannerlower/BannerActionsMd.vue
index 7192e23..2f3473a 100644
--- a/src/views/creators/banner/bannerlower/BannerActionsMd.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsMd.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
     <div class="rounded-b-2xl"
-         :style="{ backgroundColor: brandingStore.value.colors.bannerBottom }">
+         :style="{ backgroundColor: brandingStore.colors.bannerBottom }">
       <div>
 
         <!-- Logo-Name-Followers -->
@@ -11,7 +11,7 @@
                 class="absolute rounded-full border-solid border-2  max-w-[140px] h-auto ml-3 -mt-3"
                 :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
                 alt="Profile Picture"
-                :style="{ borderColor: brandingStore.value.colors.accent, height: '150px'}"
+                :style="{ borderColor: brandingStore.colors.accent, height: '150px'}"
             />
           </div>
 
diff --git a/src/views/creators/banner/bannerlower/BannerActionsSm.vue b/src/views/creators/banner/bannerlower/BannerActionsSm.vue
index 8c76c24..a05ce6b 100644
--- a/src/views/creators/banner/bannerlower/BannerActionsSm.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsSm.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
     <div
-        :style="{backgroundColor: brandingStore.value.colors.bannerBottom, borderBottom: `2px solid ${brandingStore.value.colors.accent}`}">
+        :style="{backgroundColor: brandingStore.colors.bannerBottom, borderBottom: `2px solid ${brandingStore.colors.accent}`}">
       <div>
         <!--        Logo-Name-Followers-->
         <div class="flex flex-row relative z-20">
diff --git a/src/views/creators/banner/bannerlower/BannerActionsXl.vue b/src/views/creators/banner/bannerlower/BannerActionsXl.vue
index 8effd60..fae9f38 100644
--- a/src/views/creators/banner/bannerlower/BannerActionsXl.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsXl.vue
@@ -4,7 +4,7 @@
     <div class="relative w-full shadow-xl rounded-2xl">
 
       <div ref="mainContainer" class="rounded-b-2xl shadow-2xl"
-           :style="{ backgroundColor: brandingStore.value.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
+           :style="{ backgroundColor: brandingStore.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
 
         <div>
           <div>
@@ -16,7 +16,7 @@
                     class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10"
                     :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
                     alt="Profile Picture"
-                    :style="{ borderColor: brandingStore.value.colors.secondary, height: '190px'}"
+                    :style="{ borderColor: brandingStore.colors.secondary, height: '190px'}"
                 />
               </div>
               <div class="ml-64 text-white w-25 min-w-60">
@@ -57,16 +57,16 @@
           </div>
 
           <div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md text-white"
-               :style="{ backgroundColor: brandingStore.value.colors.secondary}">
+               :style="{ backgroundColor: brandingStore.colors.secondary}">
 
             <div class="w-96 h-28 flex flex-col">
               <!-- Section 3 et 4 - Prend 2/3 de la hauteur -->
               <div class="flex flex-row flex-grow-[2] min-h-20">
                 <div class="rounded-tl-md w-1/2   flex items-center justify-center"
-                     :style="{ backgroundColor: brandingStore.value.colors.primary, opacity: 0.20 }">
+                     :style="{ backgroundColor: brandingStore.colors.primary, opacity: 0.20 }">
                 </div>
                 <div class="rounded-tr-md w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
-                     :style="{ backgroundColor: brandingStore.value.colors.secondary}">
+                     :style="{ backgroundColor: brandingStore.colors.secondary}">
                   <div class="absolute left-1">
                     <div class="flex flex-row items-center justify-center space-x-5">
                       <div class="flex flex-row items-center">
@@ -81,11 +81,11 @@
 
                       <div class="flex flex-col items-center space-y-2">
                         <v-btn
-                            :style="{ backgroundColor: brandingStore.value.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
+                            :style="{ backgroundColor: brandingStore.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
                             variant="tonal">+
                         </v-btn>
                         <v-btn
-                            :style="{ backgroundColor: brandingStore.value.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
+                            :style="{ backgroundColor: brandingStore.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
                             variant="tonal">-
                         </v-btn>
                       </div>
@@ -102,7 +102,7 @@
               </div>
 
               <div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md"
-                   :style="{ backgroundColor: brandingStore.value.colors.secondary, opacity: 0.80 }">
+                   :style="{ backgroundColor: brandingStore.colors.secondary, opacity: 0.80 }">
 
                 <textarea
                     rows="1"
@@ -120,7 +120,7 @@
     </div>
 
     <div class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center"
-         :style="{ backgroundColor: brandingStore.value.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
+         :style="{ backgroundColor: brandingStore.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
       <div class="flex justify-evenly mt-3 w-full">
         <RouterLink class="nav-button"
                     :to="`/@${brandingStore.value.name}`">
diff --git a/src/views/main/Footer.vue b/src/views/main/Footer.vue
index e978172..65dee55 100644
--- a/src/views/main/Footer.vue
+++ b/src/views/main/Footer.vue
@@ -8,50 +8,50 @@ const brandingStore = useBrandingStore()
 
 <template>
 
-  <footer class="py-8 flex flex-col gap-8" :style="{color: brandingStore.value.colors.onBackground}">
+  <footer class="py-8 flex flex-col gap-8" :style="{color: brandingStore.colors.onBackground}">
 
-    <div class="centered-text" :style="{color: brandingStore.value.colors.onBackground}" >Hutopy</div>
+    <div class="centered-text" :style="{color: brandingStore.colors.onBackground}" >Hutopy</div>
 
 
     <div class="flex flex-row justify-center gap-10">
       <a href="https://www.facebook.com/profile.php?id=61556819217561">
-        <facebook-icon class="icon" :style="{ fill: brandingStore.value.colors.onBackground }" ></facebook-icon>
+        <facebook-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }" ></facebook-icon>
       </a>
 
       <a href="https://www.instagram.com/hutopy.inc/">
-        <instagram-icon class="icon" :style="{ fill: brandingStore.value.colors.onBackground }"></instagram-icon>
+        <instagram-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }"></instagram-icon>
       </a>
 
       <a href="https://x.com/Hutopyinc/">
-        <x-icon class="icon" :style="{ fill: brandingStore.value.colors.onBackground }"></x-icon>
+        <x-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }"></x-icon>
       </a>
     </div>
 
     <div class="flex flex-row flex-wrap justify-center gap-4" >
-      <router-link to="/helpandcontact"  :style="{color: brandingStore.value.colors.onBackground}">
+      <router-link to="/helpandcontact"  :style="{color: brandingStore.colors.onBackground}">
         Aide & Contact
       </router-link>
-      <router-link to="/faq"  :style="{color: brandingStore.value.colors.onBackground}">
+      <router-link to="/faq"  :style="{color: brandingStore.colors.onBackground}">
         FAQ
       </router-link>
-      <router-link to="/guideforcreators"  :style="{color: brandingStore.value.colors.onBackground}">
+      <router-link to="/guideforcreators"  :style="{color: brandingStore.colors.onBackground}">
         Guide pour les créateurs
       </router-link>
-      <router-link to="/termsandconditions"  :style="{color: brandingStore.value.colors.onBackground}">
+      <router-link to="/termsandconditions"  :style="{color: brandingStore.colors.onBackground}">
         Termes et Conditions
       </router-link>
-      <router-link to="/contentpolicy"  :style="{color: brandingStore.value.colors.onBackground}">
+      <router-link to="/contentpolicy"  :style="{color: brandingStore.colors.onBackground}">
         Politique de Contenu
       </router-link>
-      <router-link to="/about"  :style="{color: brandingStore.value.colors.onBackground}">
+      <router-link to="/about"  :style="{color: brandingStore.colors.onBackground}">
         À Propos
       </router-link>
-      <router-link to="/pricing"  :style="{color: brandingStore.value.colors.onBackground}">
+      <router-link to="/pricing"  :style="{color: brandingStore.colors.onBackground}">
         Frais
       </router-link>
     </div>
 
-    <div class="flex justify-center base-text"  :style="{color: brandingStore.value.colors.onBackground}">
+    <div class="flex justify-center base-text"  :style="{color: brandingStore.colors.onBackground}">
       Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
     </div>