From 49e599bf6ab383c50bbe7b9a5c8caccad8eddf9f Mon Sep 17 00:00:00 2001
From: Karl Carriere <kcarriere@devsights.com>
Date: Tue, 17 Dec 2024 16:45:49 -0500
Subject: [PATCH] Creator bug fix

---
 src/stores/creatorProfileStore.js          |  12 -
 src/views/creators/BannerActions.vue       |  21 +-
 src/views/profile/creators/CreatorPage.vue | 417 ++++++++++++---------
 3 files changed, 257 insertions(+), 193 deletions(-)

diff --git a/src/stores/creatorProfileStore.js b/src/stores/creatorProfileStore.js
index 2f2d5e3..9946702 100644
--- a/src/stores/creatorProfileStore.js
+++ b/src/stores/creatorProfileStore.js
@@ -49,21 +49,9 @@ export const useCreatorProfileStore = defineStore('creator-profile', () => {
     }
   }
 
-  async function fetchSpecificCreatorProfile(creatorAlias) {
-    try {
-      const creatorResponse = await client.get(
-        `/api/creators/@${creatorAlias}`
-      );
-      value.value = creatorResponse.data;
-    } catch (error) {
-      value.value = undefined;
-    }
-  }
-
   return {
     creator: value,
     hasCreator,
     fetchCurrentCreatorProfile,
-    fetchSpecificCreatorProfile,
   };
 });
diff --git a/src/views/creators/BannerActions.vue b/src/views/creators/BannerActions.vue
index c3776b2..8ddcd98 100644
--- a/src/views/creators/BannerActions.vue
+++ b/src/views/creators/BannerActions.vue
@@ -1,13 +1,12 @@
 <script setup>
 import { useBrandingStore } from '@/stores/brandingStore.js';
-import { useCreatorProfileStore } from '@/stores/creatorProfileStore';
 import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue';
 import { onBeforeUnmount, onMounted, ref } from 'vue';
 
-const creatorProfileStore = useCreatorProfileStore();
-
 const brandingStore = useBrandingStore();
 const isMobile = ref(false);
+const creator = ref(null);
+const baseURL = window.location.origin;
 
 function updateIsMobile() {
   isMobile.value = window.innerWidth <= 640;
@@ -89,7 +88,12 @@ onMounted(async () => {
   }
 
   const creatorName = window.location.pathname.split('/@').pop();
-  await creatorProfileStore.fetchSpecificCreatorProfile(creatorName);
+  try {
+    const creatorResponse = await client.get(`/api/creators/@${creatorName}`);
+    creator.value = creatorResponse.data;
+  } catch (error) {
+    creator.value = undefined;
+  }
 });
 
 onBeforeUnmount(() => {
@@ -197,10 +201,11 @@ onBeforeUnmount(() => {
           :style="{ backgroundColor: brandingStore.colors.secondary }"
         >
           <donation-button-banner
-            :creator-id="creatorProfileStore.creator.id"
-            :creator-name="creatorProfileStore.creator.name"
-            :on-success-url="successUrl"
-            :on-cancelled-url="cancelledUrl"
+            v-if="creator"
+            :creator-id="creator.id"
+            :creator-name="creator.name"
+            :on-success-url="baseURL + '/paymentcompleted'"
+            :on-cancelled-url="baseURL"
           ></donation-button-banner>
         </div>
       </div>
diff --git a/src/views/profile/creators/CreatorPage.vue b/src/views/profile/creators/CreatorPage.vue
index 18f29ed..2792d63 100644
--- a/src/views/profile/creators/CreatorPage.vue
+++ b/src/views/profile/creators/CreatorPage.vue
@@ -1,22 +1,29 @@
 <script setup>
-import XIcon from '@/assets/icons/x.svg'
-import {computed, ref} from 'vue'
-import Socials from './Socials.vue'
-import BannerPicker from './BannerPicker.vue'
-import ColorsPicker from './ColorsPicker.vue'
-import LogoPicker from "./LogoPicker.vue"
-import CreateCreator from "./CreateCreator.vue";
-import {useClient} from "@/plugins/api.js";
-import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
-import {useUserProfileStore} from "@/stores/userProfileStore.js";
-import ChangeTitle from "@/views/profile/creators/ChangeTitle.vue";
+import XIcon from '@/assets/icons/x.svg';
+import { useClient } from '@/plugins/api.js';
+import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
+import { useUserProfileStore } from '@/stores/userProfileStore.js';
+import ChangeTitle from '@/views/profile/creators/ChangeTitle.vue';
+import { computed, ref } from 'vue';
+import BannerPicker from './BannerPicker.vue';
+import ColorsPicker from './ColorsPicker.vue';
+import CreateCreator from './CreateCreator.vue';
+import LogoPicker from './LogoPicker.vue';
+import Socials from './Socials.vue';
 
-const creatorProfileStore = useCreatorProfileStore()
-const imageBanner = computed(() => creatorProfileStore.creator.images.banner || '/images/placeholders/banner.png')
-const imageLogo = computed(() => creatorProfileStore.creator.images.logo || '/images/placeholders/logo.png')
+const creatorProfileStore = useCreatorProfileStore();
+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 currentComponent = ref('');
 
 const componentsMap = {
   BannerPicker,
@@ -24,54 +31,53 @@ const componentsMap = {
   Socials,
   ColorsPicker,
   CreateCreator,
-  ChangeTitle
+  ChangeTitle,
 };
 
 async function requestAccept(creatorName) {
-  const userProfileStore = useUserProfileStore()
-  const client = useClient()
-  const response = await client.post(
-      '/api/creators',
-      {
-        'creatorId': userProfileStore.user.id,
-        'name': creatorName
-      })
+  const userProfileStore = useUserProfileStore();
+  const client = useClient();
+  const response = await client.post('/api/creators', {
+    creatorId: userProfileStore.user.id,
+    name: creatorName,
+  });
   if (response.status >= 200 && response.status < 300) {
-    currentComponent.value = null
-    dialog.value = false
-    await creatorProfileStore.fetchCurrentCreatorProfile()
+    currentComponent.value = null;
+    dialog.value = false;
+    await creatorProfileStore.fetchCurrentCreatorProfile();
   } else {
-    console.log(`An issue while creating the creator: ${response.statusText}`)
+    console.log(`An issue while creating the creator: ${response.statusText}`);
   }
 }
 
 function requestCancel() {
-  currentComponent.value = null
-  dialog.value = false
+  currentComponent.value = null;
+  dialog.value = false;
 }
 
 const openDialog = (component) => {
-  currentComponent.value = componentsMap[component]
-  dialog.value = true
-}
+  currentComponent.value = componentsMap[component];
+  dialog.value = true;
+};
 
 const closeDialog = () => {
-  currentComponent.value = null
-  dialog.value = false
-}
-
+  currentComponent.value = null;
+  dialog.value = false;
+};
 </script>
 
 <template>
-
   <v-dialog v-model="dialog" max-width="800px">
-    <v-card :style="{ borderRadius: '25px', border: '3px solid rgb(159, 76, 173)' }">
+    <v-card
+      :style="{ borderRadius: '25px', border: '3px solid rgb(159, 76, 173)' }"
+    >
       <v-card-text>
-        <component :is="currentComponent"
-                   :creator="creatorProfileStore.creator"
-                   @closeRequested="closeDialog"
-                   @requestAccept="requestAccept"
-                   @requestCancel="requestCancel"
+        <component
+          :is="currentComponent"
+          :creator="creatorProfileStore.creator"
+          @closeRequested="closeDialog"
+          @requestAccept="requestAccept"
+          @requestCancel="requestCancel"
         ></component>
       </v-card-text>
     </v-card>
@@ -85,221 +91,289 @@ const closeDialog = () => {
     </h1>
 
     <div v-if="creatorProfileStore.hasCreator" class="w-full max-w-[800px]">
-
       <div class="my-10 border rounded-2xl">
-
-        <div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.informations') }}</div>
+        <div class="py-5 uppercase ml-4">
+          {{ $t('creatorinfopage.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">{{ $t('creatorinfopage.name') }}</span>
-            <span class="flex-auto text-left pr-6 capitalize">{{ creatorProfileStore.creator.name }}</span>
-            <span class="flex-none">  
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
+            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">{{
+              $t('creatorinfopage.name')
+            }}</span>
+            <span class="flex-auto text-left pr-6 capitalize">{{
+              creatorProfileStore.creator.name
+            }}</span>
+            <span class="flex-none">
+              <v-icon>mdi-chevron-right</v-icon>
+            </span>
           </button>
         </div>
         <div class="flex flex-col w-full">
           <button
-              @click="openDialog('ChangeTitle')"
-              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">{{ $t('creatorinfopage.title') }}</span>
-            <span class="flex-auto text-left pr-6 capitalize">{{ creatorProfileStore.creator.title }}</span>
-            <span class="flex-none">  
-    <v-icon>mdi-chevron-right</v-icon>
-  </span>
+            @click="openDialog('ChangeTitle')"
+            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">{{
+              $t('creatorinfopage.title')
+            }}</span>
+            <span class="flex-auto text-left pr-6 capitalize">{{
+              creatorProfileStore.creator.title
+            }}</span>
+            <span class="flex-none">
+              <v-icon>mdi-chevron-right</v-icon>
+            </span>
           </button>
         </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 rounded-b-2xl">
-            <span class="flex-none pa-2 min-w-32 text-left">Stripe Account</span>
-            <span class="flex-auto text-left pr-6 capitalize">asdasd038338</span>
-            <span class="flex-none">  
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
+            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"
+              >Stripe Account</span
+            >
+            <span class="flex-auto text-left pr-6 capitalize"
+              >asdasd038338</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">{{ $t('creatorinfopage.banner&profile') }}</div>
+        <div class="py-5 uppercase ml-4">
+          {{ $t('creatorinfopage.banner&profile') }}
+        </div>
         <div class="flex flex-col w-full gap-4">
-
-
           <button
-              @click="openDialog('ColorsPicker')"
-              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-auto text-left pr-6 capitalize">  Choisissez votre palette de couleurs. </span>
-            <span class="flex-none">  
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
+            @click="openDialog('ColorsPicker')"
+            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-auto text-left pr-6 capitalize">
+              Choisissez votre palette de couleurs.
+            </span>
+            <span class="flex-none">
+              <v-icon>mdi-chevron-right</v-icon>
+            </span>
           </button>
 
           <button>
             <img
-                @click="openDialog('BannerPicker')"
-                :src="imageBanner"
-                class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
-                alt="Tutorial Banner"
-            >
+              @click="openDialog('BannerPicker')"
+              :src="imageBanner"
+              class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
+              alt="Tutorial Banner"
+            />
           </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"
-                :src="imageLogo"
-                alt="Profile Image"
-            >
+              @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"
+              :src="imageLogo"
+              alt="Profile Image"
+            />
           </button>
-
-
         </div>
       </div>
 
       <div class="mt-10 border rounded-2xl">
-
-        <div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.socialnetwork') }}</div>
+        <div class="py-5 uppercase ml-4">
+          {{ $t('creatorinfopage.socialnetwork') }}
+        </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">{{ creatorProfileStore.creator.socials.facebookUrl }}</span>
+            @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">{{
+              creatorProfileStore.creator.socials.facebookUrl
+            }}</span>
             <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
+              <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">{{ creatorProfileStore.creator.socials.instagramUrl }}</span>
+            @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">{{
+              creatorProfileStore.creator.socials.instagramUrl
+            }}</span>
             <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
+              <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 w-9 h-9 text-left ml-0.5">    
-            <XIcon></XIcon>
-          </span>
-            <span class="flex-auto text-left pr-6">{{ creatorProfileStore.creator.socials.xUrl }}</span>
-            <span class="flex-none">          
-                        <v-icon>mdi-chevron-right</v-icon>
-          </span>
+            @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 w-9 h-9 text-left ml-0.5">
+              <XIcon></XIcon>
+            </span>
+            <span class="flex-auto text-left pr-6">{{
+              creatorProfileStore.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">{{ creatorProfileStore.creator.socials.linkedInUrl }}</span>
+            @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">{{
+              creatorProfileStore.creator.socials.linkedInUrl
+            }}</span>
             <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
+              <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"> 
-            <XIcon class="w-5 h-5"></XIcon>
-          </span>
-            <span class="flex-auto text-left pr-6">{{ creatorProfileStore.creator.socials.tikTokUrl }}</span>
+            @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">
+              <XIcon class="w-5 h-5"></XIcon>
+            </span>
+            <span class="flex-auto text-left pr-6">{{
+              creatorProfileStore.creator.socials.tikTokUrl
+            }}</span>
             <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
+              <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">{{ creatorProfileStore.creator.socials.youtubeUrl }}</span>
+            @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">{{
+              creatorProfileStore.creator.socials.youtubeUrl
+            }}</span>
             <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
+              <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">{{ creatorProfileStore.creator.socials.redditUrl }}</span>
+            @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">{{
+              creatorProfileStore.creator.socials.redditUrl
+            }}</span>
             <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
+              <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">{{ creatorProfileStore.creator.socials.websiteUrl }}</span>
+            @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">{{
+              creatorProfileStore.creator.socials.websiteUrl
+            }}</span>
             <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
+              <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="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">
-            <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">  
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
+            @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"
+          >
+            <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">
+              <v-icon>mdi-chevron-right</v-icon>
+            </span>
           </button>
 
           <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">
+            @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"
+          >
             <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-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">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
+              <v-icon>mdi-chevron-right</v-icon>
+            </span>
           </button>
 
           <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 rounded-b-2xl  ">
+            @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 rounded-b-2xl"
+          >
             <span class="pa-2 min-w-32 text-left">Description</span>
-            <span class="flex-auto text-left pr-6">Pour la description, c'est un espace où vous pouvez écrire ce que vous souhaitez : décrire votre page, le service que vous offrez, la raison de votre présence sur la plateforme, votre historique... Vous choisissez ! Dans notre cas, pour Hutopy, nous sommes ici afin de créer une plateforme sur laquelle les gens pourront s'exprimer et créer, tout en étant respectés et non exploités. </span>
+            <span class="flex-auto text-left pr-6"
+              >Pour la description, c'est un espace où vous pouvez écrire ce que
+              vous souhaitez : décrire votre page, le service que vous offrez,
+              la raison de votre présence sur la plateforme, votre historique...
+              Vous choisissez ! Dans notre cas, pour Hutopy, nous sommes ici
+              afin de créer une plateforme sur laquelle les gens pourront
+              s'exprimer et créer, tout en étant respectés et non exploités.
+            </span>
             <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
+              <v-icon>mdi-chevron-right</v-icon>
+            </span>
           </button>
         </div>
       </div>
-
     </div>
-
   </div>
-
 </template>
 
 <style>
-
 .HoverBtn:hover {
   @apply bg-[#A6147D] text-white;
   @apply hover:opacity-90;
@@ -309,7 +383,4 @@ const closeDialog = () => {
 .custom-border {
   border: 3px solid;
 }
-
 </style>
-
-