From 6409303139d82d09a59af4f094bd2d78ab2cee69 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Thu, 8 Aug 2024 00:59:10 -0400
Subject: [PATCH] Tweaking banner component

---
 src/views/creators/CreatorAbout.vue    |  2 +-
 src/views/creators/CreatorBanner.vue   | 24 +++++---
 src/views/creators/SubscribeButton.vue | 80 ++++++++++++++++++--------
 3 files changed, 73 insertions(+), 33 deletions(-)

diff --git a/src/views/creators/CreatorAbout.vue b/src/views/creators/CreatorAbout.vue
index a33dbce..7a09a7b 100644
--- a/src/views/creators/CreatorAbout.vue
+++ b/src/views/creators/CreatorAbout.vue
@@ -21,7 +21,7 @@
               {{ creator.about.title }}
             </div>
 
-            <v-btn icon @click="cancelPost" class="ml-auto mr-2" variant="text">
+            <v-btn icon @click="AboutUs = false" class="ml-auto mr-2" variant="text">
               <v-icon>mdi-close</v-icon>
             </v-btn>
           </div>
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 4e77930..d83e280 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -39,6 +39,7 @@
       <div class="flex flex-col items-center lg:flex-row lg:items-center lg:justify-between">
         <!-- Profile Image Wrapper -->
         <div class="relative flex justify-center lg:w-auto lg:justify-start">
+          
           <!-- Profile Image -->
           <div class="absolute lg:ml-72 transform -translate-y-1/2 lg:-translate-y-1/2 z-20">
             <img
@@ -53,20 +54,27 @@
         <!-- User Info -->
         <div class="mt-2 flex flex-col items-center lg:items-start lg:ml-64">
           <div class="text-3xl font-bold text-center lg:text-left md:mt-24 lg:mt-0 sm:mt-24 mt-24 text-white cap ">
-            <p class="capitalize">{{ creator.name }}</p>
+            <p class="capitalize ">{{ creator.name }} </p>
+            <div class="text-lg text-white">{{ creator.subscriberCount }} Abonnés</div>
           </div>
-          <div class="text-lg text-white">{{ creator.subscriberCount }} Abonnés</div>
         </div>
 
+        <div class="px-6 mt-2">
+          <subscribe-button :creator="creator"></subscribe-button>
+        </div>
+        
+       
+
+
+        <div class="flex flex-row align-center">
+       
+         
+        </div>
         <!-- Buttons -->
         <div class="flex flex-wrap items-center  mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4">
-
-          <creator-about :creator="creator"></creator-about>
-
-          <subscribe-button :creator="creator"></subscribe-button>
-
           <publish-content-button :creator="creator"></publish-content-button>
-          
+          <div class="text-white text-2xl">{{ creator.about.title }}</div>
+          <creator-about :creator="creator"></creator-about>     
         </div>
       </div>
     </div>
diff --git a/src/views/creators/SubscribeButton.vue b/src/views/creators/SubscribeButton.vue
index f7e32e3..567460a 100644
--- a/src/views/creators/SubscribeButton.vue
+++ b/src/views/creators/SubscribeButton.vue
@@ -1,53 +1,85 @@
 <script setup>
 import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
-import {computed} from "vue";
+import {computed, ref} from "vue";
 
 const props = defineProps({
   creator: {type: Object, required: true},
 });
 
-const subscriptionStore = useSubscriptionStore()
+const subscriptionStore = useSubscriptionStore();
 
-const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id))
+const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));
 
 function subscribeToCreator() {
-  subscriptionStore.subscribeTo(props.creator.id)
+  subscriptionStore.subscribeTo(props.creator.id);
 }
 
+// Référence pour contrôler l'affichage du modal
+const showUnsubscribeModal = ref(false);
+
 function unsubscribeFromCreator() {
-  subscriptionStore.unsubscribeFrom(props.creator.id)
+  subscriptionStore.unsubscribeFrom(props.creator.id);
+  // Fermer le modal après désabonnement
+  showUnsubscribeModal.value = false;
 }
-
 </script>
 
 <template>
-  
   <template v-if="isSubscribe">
-    <v-btn class="action mr-4"
-           @click="subscribeToCreator()"
-           style="transition: background-color 0.3s ease;">
+    <v-btn
+        class="action mr-4"
+        variant="outlined"
+        @click="subscribeToCreator"
+        color="white"
+    >
       S'ABONNER
     </v-btn>
   </template>
-  
+
   <template v-else>
-    <v-btn class="action mr-4"
-           @click="unsubscribeFromCreator()"
-           style="transition: background-color 0.3s ease;">
+    <v-btn
+        class="action mr-4"
+        variant="outlined"
+        @click="showUnsubscribeModal = true"
+        style="transition: background-color 0.3s ease;"
+        color="white"
+    >
       SE DESABONNER
     </v-btn>
   </template>
-  
+
+  <v-dialog v-model="showUnsubscribeModal" max-width="500">
+    <v-card class="text-center rounded-xl"
+            :style="{ 
+                border: `3px solid ${creator.colors.menu}` 
+              }">
+
+      <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
+        <div class="flex-1 text-center">
+          Déabonnement
+        </div>
+      </div>
+
+      <v-card-title>Confirmation</v-card-title>
+      <v-card-text>Êtes-vous sûr de vouloir vous désabonner ?</v-card-text>
+      <v-card-actions class="justify-center px-4 pb-4">
+        <v-btn text class="flex-grow-1" variant="outlined"
+               style="background-color: rgba(255, 255, 255, 0.1); color: rgba(0, 0, 0, 0.4);"
+               @click="unsubscribeFromCreator">Oui
+        </v-btn>
+
+        <v-btn color="secondary" class="flex-grow-1"
+               :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined"
+               @click="showUnsubscribeModal = false "> <div :style="{color: creator.colors.menu}">non</div>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
 
 <style scoped>
-
 .action {
-    @apply py-2  px-4 rounded bg-gray-100 hover:bg-gray-300
- }
-
-
-
-
-
-</style>
\ No newline at end of file
+  @apply py-2 px-4 rounded;
+  border: 1px solid currentColor;
+}
+</style>