From 906fb704b691de4bed941887d2afbeee19bb5685 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Wed, 7 Aug 2024 21:47:47 -0400
Subject: [PATCH] Update post btn

---
 src/views/contents/ContentCard.vue          |  1 +
 src/views/contents/PublishContentButton.vue | 86 ++++++++++++---------
 src/views/creators/CreatorBanner.vue        |  2 +-
 3 files changed, 50 insertions(+), 39 deletions(-)

diff --git a/src/views/contents/ContentCard.vue b/src/views/contents/ContentCard.vue
index aa9b2b2..cf2715e 100644
--- a/src/views/contents/ContentCard.vue
+++ b/src/views/contents/ContentCard.vue
@@ -27,6 +27,7 @@
         <div>
           {{ props.content.description }}
         </div>
+        
       </v-card-title>
       
 
diff --git a/src/views/contents/PublishContentButton.vue b/src/views/contents/PublishContentButton.vue
index 7eacd4b..01c771e 100644
--- a/src/views/contents/PublishContentButton.vue
+++ b/src/views/contents/PublishContentButton.vue
@@ -2,7 +2,7 @@
 import {useClient} from '@/plugins/api.js';
 import {ref} from 'vue';
 import {useUserStore} from '@/stores/userStore.js';
-import {v7} from 'uuid'
+import {v7} from 'uuid';
 
 const props = defineProps({
   creator: {type: Object, required: true},
@@ -15,10 +15,9 @@ const isDialogActive = ref(false);
 const client = useClient();
 const title = ref('');
 const message = ref('');
-const files = ref([])
+const files = ref([]);
 
 async function publishPost() {
-
   const formData = new FormData();
   formData.append('id', v7());
   formData.append('creatorId', userStore.user.id);
@@ -36,29 +35,27 @@ async function publishPost() {
           headers: {
             'Content-Type': 'multipart/form-data',
           }
-        })
-    
-    closeDialog()
+        }
+    );
+    closeDialog();
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
 }
 
 const cancelPost = () => {
-  closeDialog()
+  closeDialog();
 }
 
 const closeDialog = () => {
-  isDialogActive.value = false
-  title.value = ''
-  message.value = ''
-  files.value = []
+  isDialogActive.value = false;
+  title.value = '';
+  message.value = '';
+  files.value = [];
 }
-
 </script>
 
 <template>
-
   <button
       v-if="creator && userStore.user && creator.id === userStore.user.id"
       class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 px-4"
@@ -66,20 +63,33 @@ const closeDialog = () => {
     <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
   </button>
 
-  <v-dialog v-model="isDialogActive"
-            max-width="500">
-
+  <v-dialog v-model="isDialogActive" max-width="500">
     <v-form>
-
-      <v-card class="text-center rounded-xl">
-
-        <v-card-title class="text-white p-4 rounded-t"
-                      :style="{backgroundColor: creator.colors.menu || '#A30E79'}">
+      <v-card class="text-center rounded-xl"
+              :style="{ 
+                border: `3px solid ${creator.colors.menu}` 
+              }">
+        
+        <div class="py-4 text-2xl font-bold  border-b mb-2">
           Quicky
-        </v-card-title>
+        </div>
 
+        <div class="flex flex-row align-center px-3">
+          <img
+              :src="userStore.portraitUrl"
+              alt="Profile Image"
+              class="rounded-full"
+              width="40"
+              height="40"
+              :style="{ 
+                border: `2px solid ${creator.colors.accent}` 
+              }">
+          <div class="capitalize px-2 text-2xl">{{ userStore.creator.name }}</div>
+          <v-btn icon @click="cancelPost" class="ml-auto" variant="text">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </div>
         <v-card-text>
-
           <v-text-field v-model="title"
                         class="p-2"
                         label="Titre"
@@ -100,26 +110,26 @@ const closeDialog = () => {
           ></v-textarea>
 
           <v-file-input v-model="files"
-                        label="Ajoutez des fichiers"
-                        class="p-2"
-                        outlined
+                        label="Glissez vos images"
+                        class="p-2 custom-file-input"
+                        variant="outlined"
                         multiple
                         dropzone
-                        placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
-          ></v-file-input>
+                        prepend-icon=""
+                        placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"                        
+          ></v-file-input>      
+
+          <v-btn variant="outlined" :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" @click="publishPost" class="w-full">
+            Publier
+          </v-btn>
+          
+          
+
 
         </v-card-text>
-
-        <v-card-actions class="justify-end">
-          <v-btn color="secondary" @click="cancelPost">Annuler</v-btn>
-          <v-btn color="primary" @click="publishPost">Publier</v-btn>
-        </v-card-actions>
-
       </v-card>
-
     </v-form>
-
   </v-dialog>
-
 </template>
 
+
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 11d2081..4e77930 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -45,7 +45,7 @@
                 class="rounded-full border-solid border-2 z-20 lg:max-w-[200px] max-w-[200px] h-auto"
                 :src="creator.images.logo"
                 alt="Profile Picture"
-                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px' /* Adjust the height here */ }"
+                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
             />
           </div>
         </div>