Ensure the Creator's Colors are applied to the DonationButton

src/views/contents/ContentCard.vue

@@ -78,8 +78,14 @@
           <v-icon>mdi-comment-outline</v-icon>
         </v-btn>
 
-
-        <donation-button :creator="creator" iconColorClass="text-black"></donation-button>
+        <donation-button :color-border="colorMenu"
+                         :color-accent="colorAccent"
+                         :creator-id="creatorId"
+                         :creator-name="creatorName"
+                         :creator-logo="creatorLogo"
+                         iconColorClass="text-black"
+        ></donation-button>
+        
       </div>
 
       <div :class="{'hidden': !messagesVisible}">
@@ -103,9 +109,9 @@ import {computed, ref} from 'vue';
 import {time_ago} from "@/internal_time_ago.js";
 import MessageList from "@/views/messages/MessageList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
+import DonationButton from "@/views/creators/DonationButton.vue";
 import YoutubePlayer from './YoutubePlayer.vue';
 import ImageViewer from './ImageViewer.vue';
-import DonationButton from "@/views/creators/DonationButton.vue";
 
 const props = defineProps({
   content: {
@@ -114,7 +120,11 @@ const props = defineProps({
   }
 });
 
-const creator = ref(null);
+const creatorId = computed(() => props.content.createdBy)
+const creatorName = computed(() => props.content.createdByName)
+const creatorLogo = computed(() => props.content.createdByPortraitUrl)
+const colorMenu = computed(() => props.content.colorMenu)
+const colorAccent = computed(() => props.content.colorAccent)
 
 const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
 const messagesVisible = ref(false);

src/views/contents/ContentPage.vue

@@ -55,33 +55,43 @@
           <v-btn variant="plain" icon @click="dislikeContent">
             <v-icon :color="'#000000'">mdi-thumb-down-outline</v-icon>
           </v-btn>
-          <donation-button :creator="creator" iconColorClass="text-black"></donation-button>
+
+          <donation-button v-if="data"
+                           :color-border="data.colorMenu"
+                           :color-accent="data.colorAccent"
+                           :creator-id="data.createdBy"
+                           :creator-name="data.createdByName"
+                           :creator-logo="data.createdByPortraitUrl"
+                           iconColorClass="text-black"
+          ></donation-button>
+
         </div>
       </div>
 
       <div class="border-b-2 p-6">
         <h2 class="font-sans font-semibold">Commentaires</h2>
-        <MessageList :content-id="contentId"></MessageList>
+        <message-list :subject-id="contentId"
+        ></message-list>
       </div>
 
       <div class="border-b-2 p-6">
-        <PostMessage :content-id="contentId"></PostMessage>
+        <post-message :subject-id="contentId"
+        ></post-message>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue';
+import {ref, computed, onMounted, watch} from 'vue';
 import PostMessage from "@/views/messages/PostMessage.vue";
 import MessageList from "@/views/messages/MessageList.vue";
 import DonationButton from "@/views/creators/DonationButton.vue";
-import { useClient } from "@/plugins/api.js";
-import { useRoute } from 'vue-router';
+import {useClient} from "@/plugins/api.js";
+import {useRoute} from 'vue-router';
 
-const data = ref();
+const data = ref(null);
 const currentImageIndex = ref(0);
-const creator = ref(null);
 
 const route = useRoute();
 const client = useClient();
@@ -90,36 +100,31 @@ const contentId = computed(() => {
   return route.params.contentId;
 });
 
-const creatorAlias = ref(route.params.creator); // Récupération de l'alias du créateur
-
 const currentImage = computed(() => {
-  return data.value?.urls[currentImageIndex.value] || '';
+  if (data.value && data.value.urls) {
+    return data.value.urls[currentImageIndex.value] || '';
+  }
+  return '';
 });
 
 // Calculer si on a plus d'une image
 const multipleImages = computed(() => {
-  return data.value?.urls.length > 1;
+  if (data.value && data.value.urls) {
+    return data.value.urls.length > 1;
+  }
+  return 0;
 });
 
 const fetchContentData = async (contentId) => {
   try {
     const response = await client.get(`/api/contents/${contentId}`);
     data.value = response.data;
+    console.table(data.value)
   } catch (error) {
     console.error(`Error fetching content: ${error}`);
   }
 };
 
-
-const fetchCreatorData = async (creatorAlias) => {
-  try {
-    const response = await client.get(`/api/creators/@hutopy`);
-    creator.value = response.data;
-  } catch (error) {
-    console.error(`Error fetching creator data: ${error}`);
-  }
-};
-
 function goBack() {
   window.history.go(-1);
 }
@@ -138,16 +143,12 @@ function previousImage() {
 
 onMounted(() => {
   fetchContentData(contentId.value);
-  fetchCreatorData(creatorAlias.value); // Fetch creator data
 });
 
 watch(contentId, (newContentId) => {
   fetchContentData(newContentId);
 });
 
-watch(creatorAlias, (newCreatorAlias) => {
-  fetchCreatorData(newCreatorAlias); // Update creator data if alias changes
-});
 </script>
 
 <style scoped>