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

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
-  }
-]