From 31e49802db227cec6e98094a698393be8cc2752f Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Fri, 16 Aug 2024 14:37:12 -0400
Subject: [PATCH] Adds creation of creator profile

---
 .../banner.png}                               | Bin
 .../logohutopy.png => placeholders/logo.png}  | Bin
 src/stores/userStore.js                       |  21 +-
 src/views/main/Header.vue                     |  28 +-
 src/views/profile/ProfilePage.vue             |   1 -
 src/views/profile/creators/ColorsPicker.vue   |   8 +-
 src/views/profile/creators/CreateCreator.vue  |  69 +--
 src/views/profile/creators/CreatorPage.vue    | 428 ++++++++++--------
 src/views/profile/creators/LogoPicker.vue     |   2 -
 9 files changed, 283 insertions(+), 274 deletions(-)
 rename public/images/{hutopymedia/banners/tutorialbanner.png => placeholders/banner.png} (100%)
 rename public/images/{hutopymedia/icons/logohutopy.png => placeholders/logo.png} (100%)

diff --git a/public/images/hutopymedia/banners/tutorialbanner.png b/public/images/placeholders/banner.png
similarity index 100%
rename from public/images/hutopymedia/banners/tutorialbanner.png
rename to public/images/placeholders/banner.png
diff --git a/public/images/hutopymedia/icons/logohutopy.png b/public/images/placeholders/logo.png
similarity index 100%
rename from public/images/hutopymedia/icons/logohutopy.png
rename to public/images/placeholders/logo.png
diff --git a/src/stores/userStore.js b/src/stores/userStore.js
index fe87a59..d481f32 100644
--- a/src/stores/userStore.js
+++ b/src/stores/userStore.js
@@ -17,11 +17,21 @@ export const useUserStore = defineStore(
                     user.value = undefined
                     creator.value = undefined
                 }
-            })       
-        
-        const user = useSessionStorage('user-user', {}, {writeDefaults: false})
-        const creator = useSessionStorage('user-creator', {}, {writeDefaults: false})
+            })
 
+        const user = useSessionStorage(
+            'user-user',
+            {},
+            {writeDefaults: false})
+        const creator = useSessionStorage(
+            'user-creator',
+            {},
+            {writeDefaults: false})
+
+        const hasCreator = computed(() =>
+            creator.value
+            && Object.getOwnPropertyNames(creator.value).length >= 1)
+        
         const alias = computed(() => {
             if (user.value) {
                 return user.value.alias || `${user.value.firstName || ''} ${user.value.lastName || ''}`.trim() || 'Anonyme'
@@ -49,8 +59,9 @@ export const useUserStore = defineStore(
                 }
             } catch (error) {
                 user.value = undefined;
+                creator.value = undefined
             }
         }
 
-        return {user, creator, alias, portraitUrl}
+        return {user, creator, alias, hasCreator, portraitUrl, fetchCurrentUserProfile}
     })
diff --git a/src/views/main/Header.vue b/src/views/main/Header.vue
index 66395c4..88b719f 100644
--- a/src/views/main/Header.vue
+++ b/src/views/main/Header.vue
@@ -6,7 +6,8 @@
     <div class="flex items-center">
       <v-app-bar-nav-icon @click.stop="sideBarStore.toggle()">
       </v-app-bar-nav-icon>
-      <RouterLink to="/" class="hidden md:block">
+
+      <RouterLink to="/">
         <v-img
             src="/medias/hutopy.png"
             ref="popupButtonRef"
@@ -14,15 +15,7 @@
             class="mr-2 h-10 w-20"
         ></v-img>
       </RouterLink>
-
-      <RouterLink to="/" class="block md:hidden">
-        <v-img
-            src="/images/hutopymedia/icons/logohutopy.png"
-            ref="popupButtonRef"
-            alt="Hutopy Logo"
-            class="mr-2 h-10 w-10"
-        ></v-img>
-      </RouterLink>
+      
     </div>
 
     <!-- Spacer to push the Explorer button to the center -->
@@ -49,7 +42,6 @@
       <v-icon>mdi-earth</v-icon>
     </v-btn>
 
-   
 
     <!-- Spacer to keep the search bar to the right -->
     <div class="flex-grow"></div>
@@ -111,8 +103,8 @@
                 </router-link>
               </v-list-item>
 
-              <v-list-item v-if="userStore.creator && !Object.keys(userStore.creator).length > 0" class="nav-button">
-                <router-link :to="`/@${userStore.creator.name}`">
+              <v-list-item v-if="!userStore.hasCreator" class="nav-button">
+                <router-link to="/profile">
                   <v-btn class="w-100" variant="plain">Activer votre page</v-btn>
                 </router-link>
               </v-list-item>
@@ -141,11 +133,11 @@
 </template>
 
 <script setup>
-import { ref, onBeforeUnmount, onBeforeMount } from "vue";
-import { useRouter } from 'vue-router';
-import { useSideBarStore } from '@/stores/sideBarStore.js';
-import { useUserStore } from "@/stores/userStore.js";
-import { useAuthStore } from "@/stores/authStore.js";
+import {ref, onBeforeUnmount, onBeforeMount} from "vue";
+import {useRouter} from 'vue-router';
+import {useSideBarStore} from '@/stores/sideBarStore.js';
+import {useUserStore} from "@/stores/userStore.js";
+import {useAuthStore} from "@/stores/authStore.js";
 
 const authStore = useAuthStore()
 const userStore = useUserStore()
diff --git a/src/views/profile/ProfilePage.vue b/src/views/profile/ProfilePage.vue
index a6fe533..e72459a 100644
--- a/src/views/profile/ProfilePage.vue
+++ b/src/views/profile/ProfilePage.vue
@@ -84,7 +84,6 @@ const isDown = ref(false);
 const startX = ref(0);
 const scrollLeft = ref(0);
 
-
 onMounted(() => {
   const slider = document.querySelector('.custom-scroll');
   slider.addEventListener('mousedown', (e) => {
diff --git a/src/views/profile/creators/ColorsPicker.vue b/src/views/profile/creators/ColorsPicker.vue
index 90ad2de..b9631aa 100644
--- a/src/views/profile/creators/ColorsPicker.vue
+++ b/src/views/profile/creators/ColorsPicker.vue
@@ -14,10 +14,10 @@ const props = defineProps({
 
 const emits = defineEmits(['closeRequested']);
 
-const bannerTopColor = ref(props.creator.colors.bannerTop);
-const bannerBottomColor = ref(props.creator.colors.bannerBottom);
-const accentColor = ref(props.creator.colors.accent);
-const menuColor = ref(props.creator.colors.menu);
+const bannerTopColor = ref(props.creator.colors.bannerTop)
+const bannerBottomColor = ref(props.creator.colors.bannerBottom)
+const accentColor = ref(props.creator.colors.accent)
+const menuColor = ref(props.creator.colors.menu)
 
 const selectedColorName = ref(props.colorName);
 const selectedColor = computed({
diff --git a/src/views/profile/creators/CreateCreator.vue b/src/views/profile/creators/CreateCreator.vue
index 4efc779..73e4745 100644
--- a/src/views/profile/creators/CreateCreator.vue
+++ b/src/views/profile/creators/CreateCreator.vue
@@ -1,67 +1,48 @@
 <script setup>
 import {ref} from 'vue'
 
-const props = defineProps({
-  creator: {type: Object, required: true},
-});
+const emits = defineEmits(['requestAccept', 'requestCancel'])
 
-const isDialogActive = ref(false);
+const creatorName = ref('')
 
-
-const cancel = () => {
-  closeDialog();
-};
-
-const closeDialog = () => {
-  isDialogActive.value = false;
+function requestCancel() {
+  emits('requestCancel')
 }
 
-const CreateCreator = () => {
+function requestAccept() {
+  emits('requestAccept', creatorName.value)
+}
 
-};
 </script>
 
 <template>
   <div class="text-center">
-    <div class="py-4 text-2xl font-bold border-b mb-2 flex flex-row items-center">
-      <div class="flex-grow text-center">Informations pour votre</div>
-      <v-btn icon @click="cancelPost" class="ml-auto" variant="text">
+    <div class="py-2 text-2xl font-bold flex flex-row items-center">
+      <div class="flex-grow text-center">Devenez Créateur</div>
+      <v-btn icon @click="requestCancel" class="ml-auto" variant="text">
         <v-icon>mdi-close</v-icon>
       </v-btn>
     </div>
 
-    <div class="flex flex-row align-center">
-      <v-text-field
-          variant="outlined"
-          v-model="Nom"
-          label="Nom"
-          outlined
-      ></v-text-field>
-    </div>
+    <v-text-field
+        variant="outlined"
+        v-model="creatorName"
+        label="Nom de créateur"
+        outlined
+    ></v-text-field>
 
-    <div class="flex flex-row align-center">
-      <v-text-field
-          variant="outlined"
-          v-model="Titre"
-          label="Titre"
-          outlined
-      ></v-text-field>
-    </div>
+    <div class="flex flex-row justify-end gap-2">
+      <v-btn
+          variant="flat"
+          @click="requestCancel"
+          :style="{ borderColor: 'rgb(159, 76, 173)', color: 'rgb(159, 76, 173)' }"
+      >
+        Annuler
+      </v-btn>
 
-    <div class="flex flex-row align-center">
-      <v-textarea
-          variant="outlined"
-          v-model="Description"
-          label="Description"
-          outlined
-      ></v-textarea>
-    </div>
-
-    <div class="flex justify-end space-x-4">
       <v-btn
           variant="outlined"
-          @click="CreateCreator"
-          class="w-full mb-5"
+          @click="requestAccept"
           :style="{ borderColor: 'rgb(159, 76, 173)', color: 'rgb(159, 76, 173)' }"
       >
         Créer
diff --git a/src/views/profile/creators/CreatorPage.vue b/src/views/profile/creators/CreatorPage.vue
index b416c08..40f4438 100644
--- a/src/views/profile/creators/CreatorPage.vue
+++ b/src/views/profile/creators/CreatorPage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {ref} from 'vue'
+import {computed, ref} from 'vue'
 import {useUserStore} from "@/stores/userStore.js"
 import Socials from './Socials.vue'
 import BannerPicker from './BannerPicker.vue'
@@ -7,9 +7,17 @@ import ColorsPicker from './ColorsPicker.vue'
 import LogoPicker from "./LogoPicker.vue"
 import About from "./About.vue";
 import CreateCreator from "./CreateCreator.vue";
+import {useClient} from "@/plugins/api.js";
 
 const userStore = useUserStore()
 
+const colorBannerTop = computed(() => userStore.creator.colors.bannerTop || '#a0c0f0')
+const colorBannerBottom = computed(() => userStore.creator.colors.bannerBottom || '#a0c0f0')
+const colorAccent = computed(() => userStore.creator.colors.accent || '#a0c0f0')
+const colorMenu = computed(() => userStore.creator.colors.menu || '#a0c0f0')
+const imageBanner = computed(() => userStore.creator.images.banner || '/images/placeholders/banner.png')
+const imageLogo = computed(() => userStore.creator.images.logo || '/images/placeholders/logo.png')
+
 const dialog = ref(false);
 const currentComponent = ref('')
 const colorToEdit = ref(null)
@@ -23,6 +31,26 @@ const componentsMap = {
   CreateCreator
 };
 
+async function requestAccept(creatorName) {
+  const client = useClient()
+  const response = await client.post(
+      '/api/creators',
+      {
+        'creatorId': userStore.user.id,
+        'name': creatorName
+      })
+  if (response.status >= 200 && response.status < 300) {
+    await userStore.fetchCurrentUserProfile()
+    dialog.value = false
+  } else {
+    console.log(`An issue while creating the creator: ${response.statusText}`)
+  }
+}
+
+function requestCancel() {
+  dialog.value = false
+}
+
 const openDialog = (component, colorName = null) => {
   currentComponent.value = componentsMap[component]
   colorToEdit.value = colorName
@@ -44,28 +72,220 @@ const closeDialog = () => {
         <component :is="currentComponent"
                    :creator="userStore.creator"
                    :colorName="colorToEdit"
-                   @closeRequested="closeDialog()
-"
+                   @closeRequested="closeDialog"
+                   @requestAccept="requestAccept"
+                   @requestCancel="requestCancel"
         ></component>
       </v-card-text>
     </v-card>
   </v-dialog>
 
-<!--  Lorsque l'utilisateur n'a pas de creator name-->
+  <!--  Lorsque l'utilisateur n'a pas de creator name-->
   <div class="flex flex-col items-center w-full">
     <h1 class="uppercase pb-5 text-2xl">
       <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
       Informations de votre page
     </h1>
 
-    <div v-if="userStore.creator.name == null">
-      <div class="my-10 border rounded-2xl w-full max-w-[800px]">
+    <div v-if="userStore.hasCreator" class="w-full max-w-[800px]">
+
+      <div class="my-10 border rounded-2xl">
+
+        <div class="py-5 uppercase ml-4">Informations</div>
+        <div class="flex flex-col w-full">
+          <button
+
+              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="flex-none pa-2 min-w-32 text-left">Nom</span>
+            <span class="flex-auto text-left pr-6 capitalize">{{ userStore.creator.name }}</span>
+            <span class="flex-none">  
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <button
+              @click="openDialog('About')"
+              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="flex-none pa-2 min-w-32 text-left">Titre</span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.about.title }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <button
+              @click="openDialog('About')"
+              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="pa-2 min-w-32 text-left">Description</span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.about.description }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+        </div>
+      </div>
+
+      <div class="border rounded-2xl">
+        <div class="py-5 uppercase ml-4">Bannière et image de profil</div>
+        <div class="flex flex-col w-full">
+
+          <button
+              @click="openDialog('ColorsPicker', 'bannerTop')"
+              class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
+              :style="{ backgroundColor: colorBannerTop }"
+          >
+            <v-icon>mdi-eyedropper-variant</v-icon>
+          </button>
+
+          <button>
+            <img
+                @click="openDialog('BannerPicker')"
+                :src="imageBanner"
+                class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
+                alt="Tutorial Banner"
+            >
+          </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">Couleur du contour de la photo de profil.</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">Couleur des entêtes de menus</span>
+            <span class="flex-none">
+           <v-icon>mdi-eyedropper-variant</v-icon>
+          </span>
+          </button>
+        </div>
+      </div>
+
+      <div class="mt-10 border rounded-2xl">
+
+        <div class="py-5 uppercase ml-4">Réseaux Sociaux</div>
+
+        <div class="flex flex-col w-full">
+          <button
+              @click="openDialog('Socials')"
+              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-facebook</v-icon></span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.facebookUrl }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <button
+              @click="openDialog('Socials')"
+              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="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-instagram</v-icon></span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.instagramUrl }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <button
+              @click="openDialog('Socials')"
+              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="flex-none pa-2 min-w-32 text-left">    <img src="/images/hutopymedia/icons/x.svg" width="23px"
+                                                                   height="23px"></span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
+            <span class="flex-none">          
+                        <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <button
+              @click="openDialog('Socials')"
+              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-linkedin</v-icon></span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.linkedInUrl }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <button
+              @click="openDialog('Socials')"
+              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="flex-none pa-2 min-w-32 text-left"> 
+            <img src="/images/hutopymedia/icons/tiktok.svg" class="w-5 h-5">
+          </span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.tikTokUrl }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <button
+              @click="openDialog('Socials')"
+              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-youtube</v-icon></span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.youtubeUrl }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <button
+              @click="openDialog('Socials')"
+              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-reddit</v-icon></span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.redditUrl }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <button
+              @click="openDialog('Socials')"
+              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="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.websiteUrl }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="w-full max-w-[800px]">
+      <div class="my-10 border rounded-2xl">
 
         <div class="py-5 uppercase ml-4 px-4">Informations pour pour votre page</div>
         <div class="flex flex-col w-full">
           <button
               @click="openDialog('CreateCreator')"
-              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">
+              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out">
             <span class="flex-none pa-2 min-w-32 text-left">Nom  (Unique) </span>
             <span class="flex-auto text-left pr-6">Vous devez vous assurer de choisir un nom unique ou d'utiliser votre propre nom. Cela est important car c'est votre nom de marque, celui que vous allez présenter aux gens. Par exemple, notre projet s'appelle Hutopy, nous avons donc utilisé ce nom pour notre page officielle sur la plateforme.</span>
             <span class="flex-none">  
@@ -75,7 +295,7 @@ const closeDialog = () => {
 
           <button
               @click="openDialog('CreateCreator')"
-              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">
+              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out">
             <span class="flex-none pa-2 min-w-32 text-left">Titre</span>
             <span class="flex-auto text-left pr-6">Le titre doit refléter ce que vous souhaitez mettre en avant sur la plateforme, ce que vous voulez présenter comme contenu ou la raison de votre présence sur la plateforme. Par exemple, des artistes pourraient écrire chanteur, danseur, peintre ou autre. Une entreprise pourrait indiquer son activité. Dans notre cas, pour Hutopy, c'est 'Créer un monde meilleur'. </span>
             <span class="flex-none">
@@ -94,201 +314,9 @@ const closeDialog = () => {
           </button>
         </div>
       </div>
-      
-    </div>
-    
-<!--    Si la personne a une creator name-->
-  <div v-if="userStore.creator.name != null">
-    <!-- Nom de la page créateur -->
-    <div class="my-10 border rounded-2xl w-full max-w-[800px]">
 
-      <div class="py-5 uppercase ml-4">Informations</div>
-      <div class="flex flex-col w-full">
-        <button
-       
-            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="flex-none pa-2 min-w-32 text-left">Nom</span>
-          <span class="flex-auto text-left pr-6 capitalize">{{ userStore.creator.name }}</span>
-          <span class="flex-none">  
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-        
-        <button
-            @click="openDialog('About')"
-            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="flex-none pa-2 min-w-32 text-left">Titre</span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.about.title }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <button
-            @click="openDialog('About')"
-            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="pa-2 min-w-32 text-left">Description</span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.about.description }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-      </div>
     </div>
 
-    <div class="border rounded-2xl w-full max-w-[800px]">
-      <div class="py-5 uppercase ml-4">Bannière et image de profil</div>
-      <div class="flex flex-col w-full">
-
-        <button
-            @click="openDialog('ColorsPicker', 'bannerTop')"
-            class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
-            :style="{ backgroundColor: userStore.creator.colors.bannerTop }"
-        >
-          <v-icon>mdi-eyedropper-variant</v-icon>
-        </button>
-
-        <button>
-          <img
-              @click="openDialog('BannerPicker')"
-              :src="userStore.creator.images.banner"
-              class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
-              alt="Tutorial Banner"
-          >
-        </button>
-
-        <button
-            @click="openDialog('ColorsPicker', 'bannerBottom')"
-            class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
-            :style="{ backgroundColor: userStore.creator.colors.bannerBottom }"
-        >
-          <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: userStore.creator.colors.accent }"
-              :src="userStore.creator.images.logo"
-              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">Couleur du contour de la photo de profil.</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">Couleur des entêtes de menus</span>
-          <span class="flex-none">
-           <v-icon>mdi-eyedropper-variant</v-icon>
-          </span>
-        </button>
-      </div>
-    </div>
-
-    <!-- Réseaux sociaux -->
-    <div class="mt-10 border rounded-2xl w-full max-w-[800px]">
-
-      <div class="py-5 uppercase ml-4">Réseaux Sociaux</div>
-
-      <div class="flex flex-col w-full">
-        <button
-            @click="openDialog('Socials')"
-            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-facebook</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.facebookUrl }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <button
-            @click="openDialog('Socials')"
-            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="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-instagram</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.instagramUrl }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <button
-            @click="openDialog('Socials')"
-            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="flex-none pa-2 min-w-32 text-left">    <img src="/images/hutopymedia/icons/x.svg" width="23px"
-                                                                   height="23px"></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
-          <span class="flex-none">          
-                        <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <button
-            @click="openDialog('Socials')"
-            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-linkedin</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.linkedInUrl }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <button
-            @click="openDialog('Socials')"
-            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="flex-none pa-2 min-w-32 text-left"> 
-            <img src="/images/hutopymedia/icons/tiktok.svg" class="w-5 h-5">
-          </span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.tikTokUrl }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <button
-            @click="openDialog('Socials')"
-            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-youtube</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.youtubeUrl }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <button
-            @click="openDialog('Socials')"
-            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-reddit</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.redditUrl }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <button
-            @click="openDialog('Socials')"
-            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="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.websiteUrl }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-      </div>
-    </div>
-  </div>
   </div>
 
 </template>
diff --git a/src/views/profile/creators/LogoPicker.vue b/src/views/profile/creators/LogoPicker.vue
index 30bf63d..a366bd6 100644
--- a/src/views/profile/creators/LogoPicker.vue
+++ b/src/views/profile/creators/LogoPicker.vue
@@ -11,8 +11,6 @@
     />
   </div>
 
-
-
   <v-file-input
       v-model="selectedFile"
       variant="outlined"