Add onbackground to Footer

src/views/creators/CreatorLayout.vue

@@ -24,6 +24,5 @@
 import CreatorBanner from "@/views/creators/CreatorBanner.vue";
 import Footer from "@/views/main/Footer.vue";
 import {useBrandingStore} from "@/stores/brandingStore.js";
-
 const brandingStore = useBrandingStore()
 </script>

src/views/main/Footer.vue

@@ -2,59 +2,56 @@
 import XIcon from '@/assets/icons/x.svg'
 import FacebookIcon from '@/assets/icons/facebook.svg'
 import InstagramIcon from '@/assets/icons/instagram.svg'
+import {useBrandingStore} from "@/stores/brandingStore.js";
+const brandingStore = useBrandingStore()
 </script>
 
 <template>
 
-  <footer class="py-8 flex flex-col gap-8">
+  <footer class="py-8 flex flex-col gap-8" :style="{color: brandingStore.value.colors.onBackground}">
+
+    <div class="centered-text" :style="{color: brandingStore.value.colors.onBackground}" >Hutopy</div>
 
-    <div class="flex justify-center">
-      <router-link to="/">
-        <img src="/images/hutopymedia/banners/hutopy.png" alt="hutopy"
-             width="300px"
-             height="64px">
-      </router-link>
-    </div>
 
     <div class="flex flex-row justify-center gap-10">
       <a href="https://www.facebook.com/profile.php?id=61556819217561">
-        <facebook-icon class="icon"></facebook-icon>
+        <facebook-icon class="icon" :style="{ fill: brandingStore.value.colors.onBackground }" ></facebook-icon>
       </a>
 
       <a href="https://www.instagram.com/hutopy.inc/">
-        <instagram-icon class="icon"></instagram-icon>
+        <instagram-icon class="icon" :style="{ fill: brandingStore.value.colors.onBackground }"></instagram-icon>
       </a>
 
       <a href="https://x.com/Hutopyinc/">
-        <x-icon class="icon"></x-icon>
+        <x-icon class="icon" :style="{ fill: brandingStore.value.colors.onBackground }"></x-icon>
       </a>
     </div>
 
     <div class="flex flex-row flex-wrap justify-center gap-4" >
-      <router-link to="/helpandcontact">
+      <router-link to="/helpandcontact"  :style="{color: brandingStore.value.colors.onBackground}">
         Aide & Contact
       </router-link>
-      <router-link to="/faq">
+      <router-link to="/faq"  :style="{color: brandingStore.value.colors.onBackground}">
         FAQ
       </router-link>
-      <router-link to="/guideforcreators">
+      <router-link to="/guideforcreators"  :style="{color: brandingStore.value.colors.onBackground}">
         Guide pour les créateurs
       </router-link>
-      <router-link to="/termsandconditions">
+      <router-link to="/termsandconditions"  :style="{color: brandingStore.value.colors.onBackground}">
         Termes et Conditions
       </router-link>
-      <router-link to="/contentpolicy">
+      <router-link to="/contentpolicy"  :style="{color: brandingStore.value.colors.onBackground}">
         Politique de Contenu
       </router-link>
-      <router-link to="/about">
+      <router-link to="/about"  :style="{color: brandingStore.value.colors.onBackground}">
         À Propos
       </router-link>
-      <router-link to="/pricing">
+      <router-link to="/pricing"  :style="{color: brandingStore.value.colors.onBackground}">
         Frais
       </router-link>
     </div>
 
-    <div class="flex justify-center base-text">
+    <div class="flex justify-center base-text"  :style="{color: brandingStore.value.colors.onBackground}">
       Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
     </div>
 
@@ -65,9 +62,8 @@ import InstagramIcon from '@/assets/icons/instagram.svg'
 <style scoped>
 
 .icon {
-  width: 36px;
+  width: 30px;
-  height: 36px;
+  height: 30px;
-  fill: #6a0065;
 }
 
 .base-text {
@@ -82,4 +78,15 @@ a:hover {
   @apply text-gray-400
 }
 
+.centered-text {
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+  letter-spacing: 125px; 
+  font-size: 2rem; 
+  font-weight: bold; 
+  margin-left: 7rem;
+}
+
+
 </style>