Remove text and add Icon

frontend/src/views/creators/CreatorBanner.vue

@@ -3,7 +3,18 @@
   <div v-if="!isMobile">
     <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.colors.primary }"></div>
+        <div class="min-h-12 rounded-t-2xl shadow-lg flex justify-end align-center"
+             :style="{ backgroundColor: branding.colors.primary, color: branding.colors.onPrimary }">
+
+          <v-btn v-if="isCreatorConnected"
+                 variant="text"
+                 class="mx-5"
+                 :to="'/profile'">
+            <v-icon size="32">mdi-palette</v-icon>
+
+          </v-btn>
+        </div>
+
         <!-- Banner -->
         <div class="relative">
           <div>
@@ -20,22 +31,32 @@
     </div>
   </div>
 
+
   <!-- Mobile -->
   <div v-if="isMobile">
-    <div class="shadow-lg rounded-2xl ">
+    <div class="shadow-lg rounded-2xl">
       <div class="relative z-20">
         <div class="shadow-2xl flex items-center px-2 py-2"
              :style="{ backgroundColor: branding.colors.primary, color: branding.colors.onPrimary }">
-  
           <router-link to="/@Hutopy">
             <div class="flex items-center">
               <HutopySvg></HutopySvg>
-              <div class="text-xl font-bold -ml-2 ">Hutopy</div>
+              <div class="text-xl font-bold -ml-2">Hutopy</div>
             </div>
           </router-link>
 
           <div class="flex-1"></div>
 
+
+
+          <v-btn v-if="isCreatorConnected"
+                 variant="text"
+                 class="mr-4"
+                 :to="'/profile'"
+         >
+            <v-icon size="32">mdi-palette</v-icon>
+          </v-btn>
+
           <router-link to="/login">
             <button class="lg:hidden flex items-center justify-center mr-4">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
@@ -51,7 +72,7 @@
           <div>
             <img
                 class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)]"
-                :src="branding.value.images.banner ? branding.value.images.banner : '/images/placeholders/banner.png'"
+                :src="branding.value.images.banner || '/images/placeholders/banner.png'"
                 alt="Profile Banner"
                 style="max-height: 425px"
             >
@@ -65,13 +86,17 @@
 
 
 <script setup>
-import {ref, onMounted, onBeforeUnmount} from "vue";
+import {ref, onMounted, onBeforeUnmount, computed} from "vue";
 import BannerActions from "@/views/creators/BannerActions.vue";
-import {useBrandingStore} from "@/stores/brandingStore.js";
 import HutopySvg from "@/views/svg/HutopySvg.vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
+import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 
 
 const branding = useBrandingStore();
+const creatorProfileStore = useCreatorProfileStore();
+
+
 const isMobile = ref(false);
 
 function updateIsMobile() {
@@ -81,14 +106,26 @@ function updateIsMobile() {
 onMounted(() => {
   updateIsMobile();
   window.addEventListener("resize", updateIsMobile);
+
+  if (!creatorProfileStore.creator) {
+    creatorProfileStore.fetchCreatorData?.();
+  }
 });
 
 onBeforeUnmount(() => {
   window.removeEventListener("resize", updateIsMobile);
 });
 
+// Vérification si le créateur est connecté
+const isCreatorConnected = computed(() => {
+  const creatorId = creatorProfileStore.creator?.id || null;
+  const brandingId = branding.value?.id || null;
+  return creatorId && brandingId && creatorId === brandingId;
+});
 </script>
 
+
+
 <style>
 
 </style>

frontend/src/views/main/Home.vue

@@ -115,10 +115,6 @@ import Footer from "@/views/main/Footer.vue";
 </template>
 
 <style scoped>
-.bg-primary{
-  background-color: #6A0164;
-}
-
 .box-text{
   color: #6A0164;
   font-size: 30px;
@@ -185,7 +181,7 @@ body {
 }
 
 .support-text {
-  font-size: 2.5rem; /* Ajustez la taille du texte */
+  font-size: 2.2rem; /* Ajustez la taille du texte */
   line-height: 1.1; /* Ajustez l'espacement entre les lignes */
   text-align: left; /* Alignement du texte à gauche */
   font-weight: bold; /* Rend le texte gras */