A bit of css for the content-list and content-card

src/views/contents/ContentCard.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="shadow-lg rounded-lg">
+  <div class="shadow-md rounded-lg bg-blue-100">
 
     <div class="text-lg font-bold">
       {{ props.content.title }}
@@ -8,8 +8,9 @@
       {{ time_ago(props.content.createdAt) }}
         </span>
     </div>
-    
-    <div class="h-48 object-cover bg-purple rounded-md">
+
+    <div v-if="props.content.url !== null || props.content.uri !== null"
+         class="h-48 object-cover bg-gray-300 rounded-md">
 
       <v-img :src="props.content.url"
              v-if="!isHttpUrl">
@@ -40,17 +41,19 @@
 
     </div>
 
-    <div>
+    <div> 
 
-      <div class="border-b p-6">
+      <div>
         <h2 class="font-sans font-semibold">Commentaires</h2>
-        <MessageList :subject-id="props.content.id">
-        </MessageList>
+        <message-list :subject-id="props.content.id">
+        </message-list>
       </div>
-      <div class="border-b-2 p-6">
-        <PostMessage :subject-id="props.content.id">
-        </PostMessage>
+      
+      <div class="border-t-2 border-gray-300 mt-4 pt-4">
+        <post-message :subject-id="props.content.id">
+        </post-message>
       </div>
+      
     </div>
 
   </div>

src/views/contents/ContentList.vue

@@ -1,14 +1,14 @@
 <template>
 
   <v-infinite-scroll :items="contents"
-                     :onLoad="load"
-                     class="bg-teal justify-items-center">
+                     :onLoad="load">
 
-    <ContentCard v-for="content in contents"
-                 :content="content"
-                 class="my-2 p-4 bg-yellow-300 w-full"
-    >
-    </ContentCard>
+    <template v-for="content in contents">
+        <ContentCard :content="content"
+                     class="w-full p-2 my-2"
+        >
+        </ContentCard>
+    </template>
 
     <template v-slot:empty>
       Il n'y a pas plus de contenus
@@ -20,6 +20,8 @@
 
   </v-infinite-scroll>
 
+  <p class="bg-orange">test</p>
+
 </template>
 
 <script setup>

src/views/creators/CreatorPage.vue

@@ -4,8 +4,8 @@
     <creator-banner :creator="creator"></creator-banner>
     <donation-popup :creator-id="creator.id"></donation-popup>
 
-    <div class="max-w-[800px] mx-auto flex flex-row justify-center border-l-2 border-r-2 -mt-6 ">
-      <div class="w-full mt-20 h-full">
+    <div class="max-w-[1000px] mx-auto flex flex-row justify-center border-l-2 border-r-2 -mt-6 ">
+      <div class="w-full h-full mx-1">
         <content-list :creator-id="creator.id">
         </content-list>
       </div>

src/views/messages/MessageList.vue

@@ -3,12 +3,12 @@
   <v-infinite-scroll :items="messages"
                      :onLoad="load"
                      mode="manual"
-                     class="bg-teal justify-items-center">
+                     class="bg-gray-300 rounded-md justify-items-center">
 
     <template v-for="(message, index) in messages" :key="index">
       <Message
           :message="message"
-          class="my-2 p-4 bg-amber-200 w-full"
+          class="m-2 p-2 rounded-md bg-gray-100"
       >
       </Message>
     </template>
@@ -16,7 +16,7 @@
     <template v-slot:load-more="{ props }">
       <v-btn
           size="small"
-          variant="flat"
+          variant="plain"
           v-bind="props"
       >Voir plus de commentaires
       </v-btn>

src/views/messages/PostMessage.vue

@@ -4,7 +4,7 @@
 
     <div class="flex flex-row">
 
-      <div class="px-1 content-center">
+      <div class="mx-2 content-center">
         <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
              alt="Profile Image"
              class="rounded-full"
@@ -23,9 +23,9 @@
 
     </div>
 
-    <div class="flex flex-row gap-2 p-2 justify-end">
-      <v-btn style="border-radius: 20px" variant="text">Annuler</v-btn>
-      <v-btn style="border-radius: 20px" @click="publish">Commenter</v-btn>
+    <div class="flex flex-row gap-2 mt-2 justify-end">
+      <v-btn variant="plain">Annuler</v-btn>
+      <v-btn variant="tonal" @click="publish">Commenter</v-btn>
     </div>
 
   </div>
@@ -33,7 +33,6 @@
 </template>
 
 <script setup>
-// import posts from "@/views/posts/posts.json";
 
 import {useClient} from '@/plugins/api.js';
 import {defineProps, ref} from 'vue';
@@ -57,5 +56,4 @@ const publish = async () => {
       });
 }
 
-
-</script>
+</script>

src/views/messages/posts.json

@@ -1,29 +0,0 @@
-[
-  {
-    "content": "40C28A05-2262-43F4-862A-09A4246A8DDE",
-    "portrait": "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png",
-    "created_by": "@marchy",
-    "created_at": "",
-    "message": "Hello World!",
-    "thumb_up_count": 0,
-    "thumb_down_count": 0
-  },
-  {
-    "content": "40C28A05-2262-43F4-862A-09A4246A8DDE",
-    "portrait": "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png",
-    "created_by": "@marchy",
-    "created_at": "",
-    "message": "Welcome to life!",
-    "thumb_up_count": 0,
-    "thumb_down_count": 3
-  },
-  {
-    "content": "40C28A05-2262-43F4-862A-09A4246A8DDE",
-    "portrait": "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png",
-    "created_by": "@marchy",
-    "created_at": "",
-    "message": "We love you!",
-    "thumb_up_count": 1,
-    "thumb_down_count": 0
-  }
-]