From 66dadb3cd26f60f60809697c0befbc1e5317f2e2 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Wed, 18 Sep 2024 16:34:41 -0400
Subject: [PATCH] Applying new redesign.

---
 src/views/creators/CreatorBanner.vue          |  94 +-----
 src/views/creators/CreatorPage.vue            |   5 +-
 src/views/creators/FollowButton.vue           |  98 +++++++
 src/views/creators/SubscribeButton.vue        |  18 +-
 .../banner/bannerlower/BannerActionsXl.vue    | 277 +++++++++++++-----
 5 files changed, 313 insertions(+), 179 deletions(-)
 create mode 100644 src/views/creators/FollowButton.vue

diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 020999e..0bdef12 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -1,33 +1,11 @@
-<template>
-  <!--  Bannière-->
-  <div class="shadow-lg rounded-2xl">
-    <div class="relative z-20 -mt-2 md:mt-2">
-      <div>
-        <!-- Social Network UpperPart-->
-        <div class="py-4 min-h-14 md:rounded-t-2xl"
-             :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
-
-          <div class=" flex w-full justify-evenly max-h-8">
-            <a
-                v-for="socialNetwork in GetSocialsUrls()"
-                :href="socialNetwork.url"
-                target="_blank"
-                class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
-              <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
-              <img v-if="socialNetwork.icon.includes('tiktok')"
-                   :src="socialNetwork.icon"
-                   class="w-9 h-9"
-                   alt="Tiktok">
-              <img v-if="socialNetwork.icon.includes('websiteIcon')"
-                   :src="socialNetwork.icon"
-                   class="w-5 h-5"
-                   alt="Website">
-            </a>
-          </div>
-        </div>
+<template> 
+  <div class="shadow-lg rounded-2xl" :style="{ backgroundColor: creator.colors.bannerBottom}">
+    <div class="relative z-20">
+      <div class="py-4 min-h-9 md:rounded-t-2xl"
+           :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
       </div>
-      <div class="h-1.5" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> ></div>
-    
+      <div class="h-1" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> ></div>
+
       <!--Banner-->
       <div class="relative">
         <div>
@@ -41,11 +19,10 @@
       </div>
 
     </div>
-    <div class="h-1.5" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> </div>
+    <div class="h-1" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"></div>
     <!--actions - Lowerpart-->
     <banner-actions :creator="creator" @content-posted="addContent"></banner-actions>
   </div>
-
 </template>
 
 <script setup>
@@ -61,60 +38,5 @@ function addContent(content) {
   emits('content-posted', content)
 }
 
-function GetSocialsUrls() {
-
-  const socials = [];
-
-  if (props.creator.socials.facebookUrl !== null) {
-    socials.push({
-      icon: "mdi-facebook",
-      url: props.creator.socials.facebookUrl
-    })
-  }
-  if (props.creator.socials.instagramUrl !== null) {
-    socials.push({
-      icon: "mdi-instagram",
-      url: props.creator.socials.instagramUrl
-    })
-  }
-  if (props.creator.socials.xUrl !== null) {
-    socials.push({
-      icon: "mdi-twitter",
-      url: props.creator.socials.xUrl
-    })
-  }
-  if (props.creator.socials.linkedInUrl !== null) {
-    socials.push({
-      icon: 'mdi-linkedin',
-      url: props.creator.socials.linkedInUrl
-    })
-  }
-  if (props.creator.socials.tikTokUrl !== null) {
-    socials.push({
-      icon: '/images/socials/tiktok-white.png',
-      url: props.creator.socials.tikTokUrl
-    })
-  }
-  if (props.creator.socials.youtubeUrl !== null) {
-    socials.push({
-      icon: 'mdi-youtube',
-      url: props.creator.socials.youtubeUrl
-    })
-  }
-  if (props.creator.socials.redditUrl !== null) {
-    socials.push({
-      icon: 'mdi-reddit',
-      url: props.creator.socials.redditUrl
-    })
-  }
-  if (props.creator.socials.websiteUrl !== null) {
-    socials.push({
-      icon: 'mdi-web',
-      url: props.creator.socials.websiteUrl
-    })
-  }
-
-  return socials;
-}
 
 </script>
\ No newline at end of file
diff --git a/src/views/creators/CreatorPage.vue b/src/views/creators/CreatorPage.vue
index dcf7f1f..05dca84 100644
--- a/src/views/creators/CreatorPage.vue
+++ b/src/views/creators/CreatorPage.vue
@@ -1,7 +1,6 @@
 <template>
   <div v-if="creator && creator.id">
-
-    <div class="max-w-[1250px] mx-auto">
+    <div class="max-w-[1350px] mx-auto">
     <creator-banner  :creator="creator"
                     @content-posted="contentPosted"
     ></creator-banner>
@@ -16,7 +15,6 @@
     </div>
   </div>
 
-
   <div v-else>
     <div v-if="loading">
       <v-progress-linear indeterminate></v-progress-linear>
@@ -32,7 +30,6 @@
 </template>
 
 <script async setup>
-
 import {watch, ref, onBeforeMount} from 'vue';
 import {useRoute} from 'vue-router';
 import {useClient} from "@/plugins/api.js";
diff --git a/src/views/creators/FollowButton.vue b/src/views/creators/FollowButton.vue
new file mode 100644
index 0000000..a95e50a
--- /dev/null
+++ b/src/views/creators/FollowButton.vue
@@ -0,0 +1,98 @@
+<script setup>
+import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
+import {computed, ref} from "vue";
+
+const props = defineProps({
+  creator: {type: Object, required: true},
+  colorBorder: {required: true},
+});
+
+const colorBorder = computed(() => props.colorBorder);
+
+const subscriptionStore = useSubscriptionStore();
+
+const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));
+
+function subscribeToCreator() {
+  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);
+  // Fermer le modal après désabonnement
+  showUnsubscribeModal.value = false;
+}
+</script>
+
+<template>
+  <template v-if="isSubscribe">
+    <v-btn
+        :style="{ 
+       width: '150px',
+       height: '32px',
+        backgroundColor: colorBorder, 
+        color: 'white', 
+      borderRadius: '8px 0 0 8px',
+        padding: '10px 24px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background-color 0.3s ease'
+      }"
+        @click="subscribeToCreator"
+    >
+      <div class="font-bold">Follow</div>
+    </v-btn>
+  </template>
+
+  <template v-else>
+    <v-btn
+        :style="{ 
+       width: '150px',
+              height: '32px',
+        backgroundColor: colorBorder, 
+        color: 'white', 
+      borderRadius: '8px 0 0 8px',
+        padding: '10px 24px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background-color 0.3s ease'
+      }"
+        @click="showUnsubscribeModal = true"
+    >
+      <div class="font-bold">{{ $t('subscribebutton.unsubscribe') }}</div>
+    </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="{ backgroundColor: 'rgba(255, 255, 255, 0.1)', color: 'rgba(0, 0, 0, 0.4)' }"
+               @click="unsubscribeFromCreator">Oui
+        </v-btn>
+
+        <v-btn 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>
+
diff --git a/src/views/creators/SubscribeButton.vue b/src/views/creators/SubscribeButton.vue
index c2377e3..fbe562e 100644
--- a/src/views/creators/SubscribeButton.vue
+++ b/src/views/creators/SubscribeButton.vue
@@ -30,12 +30,13 @@ function unsubscribeFromCreator() {
 <template>
   <template v-if="isSubscribe">
     <v-btn
-        class="mr-4"
         :style="{ 
+       width: '150px',
+              height: '32px',
         backgroundColor: colorBorder, 
         color: 'white', 
-        borderRadius: '8px', 
-        padding: '20px 24px',
+      borderRadius: '0 8px 8px 0',
+        padding: '10px 24px',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -45,16 +46,17 @@ function unsubscribeFromCreator() {
     >
       <div class="font-bold">{{ $t('subscribebutton.subscribe') }}</div>
     </v-btn>
-  </template>
+  </template>  
 
   <template v-else>
-    <v-btn
-        class="mr-4"
+    <v-btn     
         :style="{ 
+       width: '150px',
+              height: '32px',
         backgroundColor: colorBorder, 
         color: 'white', 
-        borderRadius: '8px', 
-        padding: '20px 24px',
+      borderRadius: '0 8px 8px 0',
+        padding: '10px 24px',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
diff --git a/src/views/creators/banner/bannerlower/BannerActionsXl.vue b/src/views/creators/banner/bannerlower/BannerActionsXl.vue
index e8aa174..bdf1d41 100644
--- a/src/views/creators/banner/bannerlower/BannerActionsXl.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsXl.vue
@@ -1,110 +1,225 @@
 <template>
-  <div class="relative w-full">
-    <div ref="mainContainer" class="rounded-b-2xl pt-2 pb-1"
-         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }">
+  <div class="flex flex-column w-full">
 
-      <!-- Logo & User Info -->
-      <div class="relative z-20">
-        <div class="flex flex-row items-center py-2">
-          <div>
-            <img
-                class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[190px] ml-15 -mt-32"
-                :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
-                alt="Profile Picture"
-                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
-            />
-          </div>
-          <div class="ml-72 text-white mr-10">
-            <p class="capitalize text-4xl font-bold">{{ creator.name }}</p>
-            <div class="text-2xl text-white flex flex-row align-center">
-              {{ creator.about.title }}
-              <creator-about class="px-2" :creator="creator"></creator-about>
+    <div class="relative w-full shadow-xl rounded-2xl">
+      <div ref="mainContainer" class="rounded-b-2xl shadow-2xl"
+           :style="{ backgroundColor: creator.colors.bannerTop || '#A30E79', boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
+
+        <div class="relative">
+          <div class="flex flex-row items-center py-2">
+            <!-- Profile Image -->
+            <div>
+              <img
+                  class="shadow-2xl rounded-full border-solid border-2 absolute z-20 max-w-[190px] ml-15 -mt-20"
+                  :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
+                  alt="Profile Picture"
+                  :style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
+              />
             </div>
-          </div>
-          <div class="flex flex-row ml-auto space-x-2.5">
-            <donation-button-banner
-                :color-border="creator.colors.menu"
-                :color-accent="creator.colors.accent"
-                :creator-id="creator.id"
-                :creator-name="creator.name"
-                :creator-logo="creator.images.logo"
-                iconColorClass="text-white">
-            </donation-button-banner>
-            <div class="flex flex-column">
-              <!-- Bouton abonnement affiché seulement si non abonné -->
-              <subscribe-button
-               
-                  :creator="creator"
-                  :color-border="creator.colors.menu">
-              </subscribe-button>
-              <div class="font-bold text-white flex justify-end mr-5 py-1.5">
-                {{ creator.subscriberCount }} {{ $t('banner.subscription') }}
+
+            <!-- Creator Information -->
+            <div class="ml-72 text-white w-25">
+              <p class="capitalize text-2xl">{{ creator.name }}</p>
+              <div class="text-md py-1">
+                {{ creator.about.title }}
+              </div>
+              <div class="text-xs">
+                105 Followers . {{ creator.subscriberCount }} {{ $t('banner.subscription') }}
               </div>
             </div>
+
+
+            <div class="flex-grow"></div>
+
+
+            <div class="flex flex-col items-center justify-center w-full">
+              <!-- Social Media Icons -->
+              <div class="flex flex-row space-x-6 justify-center">
+                <a
+                    v-for="socialNetwork in GetSocialsUrls()"
+                    :href="socialNetwork.url"
+                    target="_blank"
+                    class="text-white text-md transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
+                  <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
+                  <img v-if="socialNetwork.icon.includes('tiktok')"
+                       :src="socialNetwork.icon"
+                       class="w-6 h-6 mt-0.5"
+                       alt="Tiktok">
+                  <img v-if="socialNetwork.icon.includes('websiteIcon')"
+                       :src="socialNetwork.icon"
+                       class="w-6 h-6 mt-0.5"
+                       alt="Website">
+                </a>
+              </div>
+
+              <!-- Follow and Subscribe Buttons -->
+              <div class="flex flex-row space-x-1 justify-center mt-4">
+                <follow-button
+                    :creator="creator"
+                    :color-border="creator.colors.menu">
+                </follow-button>
+                <subscribe-button
+                    :creator="creator"
+                    :color-border="creator.colors.menu">
+                </subscribe-button>
+              </div>
+            </div>
+
+  
+            <div class="flex-grow w-50">
+              
+            </div>
+
+
           </div>
         </div>
+
+      </div>
+
+
+<!--      <div class="flex flex-row ml-auto space-x-2.5">-->
+<!--        <donation-button-banner-->
+<!--            :color-border="creator.colors.menu"-->
+<!--            :color-accent="creator.colors.accent"-->
+<!--            :creator-id="creator.id"-->
+<!--            :creator-name="creator.name"-->
+<!--            :creator-logo="creator.images.logo"-->
+<!--            iconColorClass="text-white">-->
+<!--        </donation-button-banner>-->
+<!--        <div class="flex flex-column">-->
+<!--          &lt;!&ndash; Bouton abonnement affiché seulement si non abonné &ndash;&gt;-->
+
+<!--        </div>-->
+<!--      </div>-->
+<!--      -->
+
+      <!--    &lt;!&ndash; Conteneur sticky &ndash;&gt;-->
+      <!--    <div v-show="isSticky" class=" sticky-header fixed top-14 left-0 right-0 w-full z-20"-->
+      <!--         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }">-->
+      <!--      <div class="shadow-3xl flex flex-row items-center py-2 px-2">-->
+      <!--        <div>-->
+      <!--          <img-->
+      <!--              class="max-w-[40px] max-h-[40px] ml-5 rounded-full"-->
+      <!--              :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"-->
+      <!--              alt="Profile Picture"-->
+      <!--              :style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"-->
+      <!--          />-->
+      <!--        </div>-->
+      <!--        <div class="ml-5 text-white">-->
+      <!--          <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>-->
+      <!--        </div>-->
+      <!--        <div class="ml-auto flex flex-row space-x-2.5 mr-3 ">-->
+      <!--        -->
+      <!--          <donation-button-banner-slim -->
+      <!--             class=""-->
+      <!--              :color-border="creator.colors.menu"-->
+      <!--              :color-accent="creator.colors.accent"-->
+      <!--              :creator-id="creator.id"-->
+      <!--              :creator-name="creator.name"-->
+      <!--              :creator-logo="creator.images.logo"-->
+      <!--             >-->
+      <!--          </donation-button-banner-slim>-->
+
+      <!--          &lt;!&ndash; Afficher le bouton d'abonnement seulement si l'utilisateur n'est pas abonné &ndash;&gt;-->
+      <!--          <subscribe-button-slim-->
+      <!--              v-if="!isSubscribed"-->
+      <!--              :creator="creator"-->
+      <!--              :color-border="creator.colors.menu">-->
+      <!--          </subscribe-button-slim>-->
+      <!--          -->
+      <!--        </div>-->
+      <!--      </div>-->
+      <!--    </div>-->
+    </div>
+
+    <div class="rounded-b-2xl min-h-10 px-36 flex flex-col items-center justify-center"
+         :style="{ backgroundColor: creator.colors.bannerBottom, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
+      <div class="flex justify-evenly w-full">
+        <v-btn variant="text" class="text-white">Présentation</v-btn>
+        <v-btn variant="text" class="text-white">Actualité</v-btn>
+        <v-btn variant="text" class="text-white">Exclusivité</v-btn>
       </div>
     </div>
 
-    <!-- Conteneur sticky -->
-    <div v-show="isSticky" class=" sticky-header fixed top-14 left-0 right-0 w-full z-20"
-         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }">
-      <div class="shadow-3xl flex flex-row items-center py-2 px-2">
-        <div>
-          <img
-              class="max-w-[40px] max-h-[40px] ml-5 rounded-full"
-              :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
-              alt="Profile Picture"
-              :style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
-          />
-        </div>
-        <div class="ml-5 text-white">
-          <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
-        </div>
-        <div class="ml-auto flex flex-row space-x-2.5 mr-3 ">
-        
-          <donation-button-banner-slim 
-             class=""
-              :color-border="creator.colors.menu"
-              :color-accent="creator.colors.accent"
-              :creator-id="creator.id"
-              :creator-name="creator.name"
-              :creator-logo="creator.images.logo"
-             >
-          </donation-button-banner-slim>
-
-          <!-- Afficher le bouton d'abonnement seulement si l'utilisateur n'est pas abonné -->
-          <subscribe-button-slim
-              v-if="!isSubscribed"
-              :creator="creator"
-              :color-border="creator.colors.menu">
-          </subscribe-button-slim>
-          
-        </div>
-      </div>
-    </div>
   </div>
+
 </template>
 
-
 <script setup>
-import { ref, onMounted, computed } from 'vue';
-import { useSubscriptionStore } from "@/stores/subscriptionStore.js";
+import {ref, onMounted, computed} from 'vue';
+import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
 import SubscribeButton from "@/views/creators/SubscribeButton.vue";
 import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
 import CreatorAbout from "@/views/creators/CreatorAbout.vue";
 import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue";
 import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue";
+import FollowButton from "@/views/creators/FollowButton.vue";
+
+function GetSocialsUrls() {
+
+  const socials = [];
+
+  if (props.creator.socials.facebookUrl !== null) {
+    socials.push({
+      icon: "mdi-facebook",
+      url: props.creator.socials.facebookUrl
+    })
+  }
+  if (props.creator.socials.instagramUrl !== null) {
+    socials.push({
+      icon: "mdi-instagram",
+      url: props.creator.socials.instagramUrl
+    })
+  }
+  if (props.creator.socials.xUrl !== null) {
+    socials.push({
+      icon: "mdi-twitter",
+      url: props.creator.socials.xUrl
+    })
+  }
+  if (props.creator.socials.linkedInUrl !== null) {
+    socials.push({
+      icon: 'mdi-linkedin',
+      url: props.creator.socials.linkedInUrl
+    })
+  }
+  if (props.creator.socials.tikTokUrl !== null) {
+    socials.push({
+      icon: '/images/socials/tiktok-white.png',
+      url: props.creator.socials.tikTokUrl
+    })
+  }
+  if (props.creator.socials.youtubeUrl !== null) {
+    socials.push({
+      icon: 'mdi-youtube',
+      url: props.creator.socials.youtubeUrl
+    })
+  }
+  if (props.creator.socials.redditUrl !== null) {
+    socials.push({
+      icon: 'mdi-reddit',
+      url: props.creator.socials.redditUrl
+    })
+  }
+  if (props.creator.socials.websiteUrl !== null) {
+    socials.push({
+      icon: 'mdi-web',
+      url: props.creator.socials.websiteUrl
+    })
+  }
+
+  return socials;
+}
+
 
 const props = defineProps({
-  creator: { type: Object, required: true }
+  creator: {type: Object, required: true}
 });
 
 const subscriptionStore = useSubscriptionStore();
 
 // Calculer si l'utilisateur est abonné
 const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(props.creator.id));
-
 const isSticky = ref(false);
 const mainContainer = ref(null);
 
@@ -113,7 +228,7 @@ onMounted(() => {
       ([entry]) => {
         isSticky.value = !entry.isIntersecting;
       },
-      { threshold: 0 }
+      {threshold: 0}
   );
 
   if (mainContainer.value) {