From 7540aa81e359c1da9b3a287535c4fd3214a7dcaa Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Mon, 8 Jul 2024 23:34:29 -0400
Subject: [PATCH] I modified the creator's page by adding borders and adjusting
 the width of the center column. I also added a button to the message.

---
 src/views/creators/CreatorPage.vue |  8 +--
 src/views/messages/Message.vue     | 97 +++++++++++++++++-------------
 2 files changed, 55 insertions(+), 50 deletions(-)

diff --git a/src/views/creators/CreatorPage.vue b/src/views/creators/CreatorPage.vue
index 69950da..312adbe 100644
--- a/src/views/creators/CreatorPage.vue
+++ b/src/views/creators/CreatorPage.vue
@@ -9,13 +9,7 @@
     
     <div class="w-full mt-20">
 
-      <v-tabs
-          v-model="tab"
-          bg-color="primary"
-      >
-        <v-tab value="content">Contenu</v-tab>
-        <v-tab value="community">Communauté</v-tab>
-      </v-tabs>
+   
 
       <v-card-text>
         <v-tabs-window v-model="tab">
diff --git a/src/views/messages/Message.vue b/src/views/messages/Message.vue
index 7576601..fa7af75 100644
--- a/src/views/messages/Message.vue
+++ b/src/views/messages/Message.vue
@@ -1,9 +1,6 @@
 <template>
-
   <div class="flex flex-column">
-
-    <div class="flex flex-row p-1">
-
+    <div class="flex flex-row p-1 items-center">
       <div class="px-2 content-center">
         <img :src="message.portrait"
              alt="Profile Image"
@@ -12,54 +9,68 @@
              height="32px">
       </div>
 
-      <div class="p-2">
-
-        <div>
-          <span class="font-semibold font-sans mr-2">{{ message.created_by }}</span>
-          <span class="text-sm font-sans text-gray-700">il y a 3 heures</span>
+      <div class="p-2 flex-1">
+        <div class="flex justify-between items-center">
+          <div>
+            <span class="font-semibold font-sans mr-2">{{ message.createdBy }}</span>
+            <span class="text-sm font-sans text-gray-700">il y a 3 heures</span>
+          </div>
+          <v-menu :location="location">
+            <template v-slot:activator="{ props }">
+              <v-btn variant="plain" icon v-bind="props">
+                <v-icon>mdi-dots-vertical</v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item @click="editMessage(message)">
+                <v-list-item-title>Edit</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="deleteMessage(message)">
+                <v-list-item-title>Delete</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="reportMessage(message)">
+                <v-list-item-title>Report</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
         </div>
 
         <div class="font-sans">
           {{ message.value }}
         </div>
-
-        <div class="flex px-4">
-
-          <div>
-            <v-icon>mdi-thumb-up-outline</v-icon>
-            {{ message.thumb_up_count }}
-          </div>
-
-          <div>
-            <v-icon>mdi-thumb-down-outline</v-icon>
-            {{ message.thumb_down_count }}
-          </div>
-
-          <div>
-            <v-btn variant="flat">Reply</v-btn>
-          </div>
-        </div>
-
       </div>
-
-    </div>
-
+    </div>   
   </div>
-
 </template>
 
-<script setup>
-
-import {defineProps} from 'vue';
-
-defineProps({
-  message: {
-    type: Object,
-    required: true
+<script>
+export default {
+  props: {
+    message: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    editMessage(message) {
+      // Logic for editing the message
+      console.log('Edit message', message);
+    },
+    deleteMessage(message) {
+      // Logic for deleting the message
+      console.log('Delete message', message);
+    },
+    reportMessage(message) {
+      // Logic for reporting the message
+      console.log('Report message', message);
+    }
   }
-});
-
+}
 </script>
 
-
-
+<style scoped>
+.content-center {
+  display: flex;
+  align-items: center;
+}
+</style>