Change the Creator's Profile to allow edition colors

src/views/profile/creators/ColorsPicker.vue

@@ -5,10 +5,6 @@ import {useClient} from "@/plugins/api.js";
 const props = defineProps({
   creator: {
     required: true
-  },
-  colorName: {
-    type: String,
-    default: 'primary'
   }
 });
 
@@ -25,7 +21,7 @@ const onBackgroundColor = ref(props.creator.colors.onBackground)
 const onErrorColor = ref(props.creator.colors.onError)
 const onSurfaceColor = ref(props.creator.colors.onSurface)
 
-const selectedColorName = ref(props.colorName);
+const selectedColorName = ref('primary');
 const selectedBackgroundColor = computed({
   get() {
     switch (selectedColorName.value) {

src/views/profile/creators/CreatorPage.vue

@@ -11,17 +11,11 @@ import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useUserProfileStore} from "@/stores/userProfileStore.js";
 
 const creatorProfileStore = useCreatorProfileStore()
-
-const colorBannerTop = computed(() => creatorProfileStore.creator.colors.primary || '#a0c0f0')
-const colorBannerBottom = computed(() => creatorProfileStore.creator.colors.secondary || '#a0c0f0')
-const colorAccent = computed(() => creatorProfileStore.creator.colors.accent || '#a0c0f0')
-const colorMenu = computed(() => creatorProfileStore.creator.colors.menu || '#a0c0f0')
 const imageBanner = computed(() => creatorProfileStore.creator.images.banner || '/images/placeholders/banner.png')
 const imageLogo = computed(() => creatorProfileStore.creator.images.logo || '/images/placeholders/logo.png')
 
 const dialog = ref(false);
 const currentComponent = ref('')
-const colorToEdit = ref(null)
 
 const componentsMap = {
   BannerPicker,
@@ -52,9 +46,8 @@ function requestCancel() {
   dialog.value = false
 }
 
-const openDialog = (component, colorName = null) => {
+const openDialog = (component) => {
   currentComponent.value = componentsMap[component]
-  colorToEdit.value = colorName
   dialog.value = true
 }
 
@@ -72,7 +65,6 @@ const closeDialog = () => {
       <v-card-text>
         <component :is="currentComponent"
                    :creator="creatorProfileStore.creator"
-                   :colorName="colorToEdit"
                    @closeRequested="closeDialog"
                    @requestAccept="requestAccept"
                    @requestCancel="requestCancel"
@@ -108,15 +100,17 @@ const closeDialog = () => {
 
       <div class="border rounded-2xl">
         <div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.banner&profile') }}</div>
-        <div class="flex flex-col w-full">
+        <div class="flex flex-col w-full gap-4">
 
-          <button
+
-              @click="openDialog('ColorsPicker', 'bannerTop')"
+          <v-btn
-              class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
+              variant="elevated"
-              :style="{ backgroundColor: colorBannerTop }"
+              @click="openDialog('ColorsPicker')"
+              class="flex h-10 px-5 hover:brightness-150"
           >
-            <v-icon>mdi-eyedropper-variant</v-icon>
+            Choissisez votre palette de couleurs
-          </button>
+          </v-btn>
+
 
           <button>
             <img
@@ -127,43 +121,16 @@ const closeDialog = () => {
             >
           </button>
 
-          <button
-              @click="openDialog('ColorsPicker', 'bannerBottom')"
-              class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
-              :style="{ backgroundColor: colorBannerBottom }"
-          >
-            <v-icon>mdi-eyedropper-variant</v-icon>
-          </button>
-
           <button class="flex justify-center my-5">
             <img
                 @click="openDialog('LogoPicker')"
                 class="custom-border hover:brightness-125 active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full"
-                :style="{ borderColor: colorAccent }"
                 :src="imageLogo"
                 alt="Profile Image"
             >
           </button>
 
-          <button
-              @click="openDialog('ColorsPicker', 'accent')"
-              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
-            <span class="pa-2 min-w-32 text-left"><v-icon>mdi-circle-outline</v-icon></span>
-            <span class="flex-auto text-left pr-6">{{ $t('creatorinfopage.borderpicturecolor') }}</span>
-            <span class="flex-none">
-        <v-icon>mdi-eyedropper-variant</v-icon>
-          </span>
-          </button>
 
-          <button
-              @click="openDialog('ColorsPicker', 'menu')"
-              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
-            <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-menu</v-icon></span>
-            <span class="flex-auto text-left pr-6">{{ $t('creatorinfopage.menucolor') }}</span>
-            <span class="flex-none">
-           <v-icon>mdi-eyedropper-variant</v-icon>
-          </span>
-          </button>
         </div>
       </div>
 
@@ -257,7 +224,9 @@ const closeDialog = () => {
           </button>
 
         </div>
+
       </div>
+
     </div>
 
     <div v-else class="w-full max-w-[800px]">