From 98033203cde0cbd24ad8d144772e6a5b7b702a0b Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Thu, 19 Sep 2024 00:11:03 -0400
Subject: [PATCH] Redesign updated - Banner - The header in the app is
 disabled.

---
 src/App.vue                                   |   4 +-
 src/views/creators/CreatorBanner.vue          |   2 +-
 src/views/creators/CreatorPage.vue            |   6 +-
 src/views/creators/FollowButton.vue           |   8 +-
 src/views/creators/SubscribeButton.vue        |   8 +-
 .../banner/bannerlower/BannerActionsXl.vue    | 121 +++++++++++-------
 6 files changed, 90 insertions(+), 59 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 39768ee..e1077b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <div class="m-0 flex flex-column h-screen">
-      <Header class="fixed w-full z-50 top-0 p-2"></Header>
+<!--      <Header class="fixed w-full z-50 top-0 p-2"></Header>-->
       <div class="flex flex-row relative">
         <div
             class="fixed h-full w-2 z-20"
@@ -15,7 +15,7 @@
           </div>
         </transition>
 
-        <div class="flex flex-col  w-full md:ml-1 mt-16" style="background-color: #f4f4f4">
+        <div class="flex flex-col  w-full" style="background-color: #f4f4f4">
           <RouterView></RouterView>
           <Footer></Footer>
         </div>
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 0bdef12..ef5032b 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -4,7 +4,7 @@
       <div class="py-4 min-h-9 md:rounded-t-2xl"
            :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
       </div>
-      <div class="h-1" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> ></div>
+      <div class="h-1" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> </div>
 
       <!--Banner-->
       <div class="relative">
diff --git a/src/views/creators/CreatorPage.vue b/src/views/creators/CreatorPage.vue
index 05dca84..72007e9 100644
--- a/src/views/creators/CreatorPage.vue
+++ b/src/views/creators/CreatorPage.vue
@@ -1,6 +1,7 @@
 <template>
-  <div v-if="creator && creator.id">
-    <div class="max-w-[1350px] mx-auto">
+  <div :style="{ backgroundColor: '#2D2728' }">
+  <div class="mt-10" v-if="creator && creator.id">
+    <div class="max-w-[1500px] mx-auto">
     <creator-banner  :creator="creator"
                     @content-posted="contentPosted"
     ></creator-banner>
@@ -27,6 +28,7 @@
       </v-card>
     </div>
   </div>
+  </div>
 </template>
 
 <script async setup>
diff --git a/src/views/creators/FollowButton.vue b/src/views/creators/FollowButton.vue
index a95e50a..038ea88 100644
--- a/src/views/creators/FollowButton.vue
+++ b/src/views/creators/FollowButton.vue
@@ -32,7 +32,7 @@ function unsubscribeFromCreator() {
     <v-btn
         :style="{ 
        width: '150px',
-       height: '32px',
+       height: '28px',
         backgroundColor: colorBorder, 
         color: 'white', 
       borderRadius: '8px 0 0 8px',
@@ -44,7 +44,7 @@ function unsubscribeFromCreator() {
       }"
         @click="subscribeToCreator"
     >
-      <div class="font-bold">Follow</div>
+      <div>Follow</div>
     </v-btn>
   </template>
 
@@ -52,7 +52,7 @@ function unsubscribeFromCreator() {
     <v-btn
         :style="{ 
        width: '150px',
-              height: '32px',
+              height: '28px',
         backgroundColor: colorBorder, 
         color: 'white', 
       borderRadius: '8px 0 0 8px',
@@ -64,7 +64,7 @@ function unsubscribeFromCreator() {
       }"
         @click="showUnsubscribeModal = true"
     >
-      <div class="font-bold">{{ $t('subscribebutton.unsubscribe') }}</div>
+      <div>{{ $t('subscribebutton.unsubscribe') }}</div>
     </v-btn>
   </template>
 
diff --git a/src/views/creators/SubscribeButton.vue b/src/views/creators/SubscribeButton.vue
index fbe562e..0011ecb 100644
--- a/src/views/creators/SubscribeButton.vue
+++ b/src/views/creators/SubscribeButton.vue
@@ -32,7 +32,7 @@ function unsubscribeFromCreator() {
     <v-btn
         :style="{ 
        width: '150px',
-              height: '32px',
+              height: '28px',
         backgroundColor: colorBorder, 
         color: 'white', 
       borderRadius: '0 8px 8px 0',
@@ -44,7 +44,7 @@ function unsubscribeFromCreator() {
       }"
         @click="subscribeToCreator"
     >
-      <div class="font-bold">{{ $t('subscribebutton.subscribe') }}</div>
+      <div>{{ $t('subscribebutton.subscribe') }}</div>
     </v-btn>
   </template>  
 
@@ -52,7 +52,7 @@ function unsubscribeFromCreator() {
     <v-btn     
         :style="{ 
        width: '150px',
-              height: '32px',
+              height: '28px',
         backgroundColor: colorBorder, 
         color: 'white', 
       borderRadius: '0 8px 8px 0',
@@ -64,7 +64,7 @@ function unsubscribeFromCreator() {
       }"
         @click="showUnsubscribeModal = true"
     >
-      <div class="font-bold">{{ $t('subscribebutton.unsubscribe') }}</div>
+      <div>{{ $t('subscribebutton.unsubscribe') }}</div>
     </v-btn>
   </template>
 
diff --git a/src/views/creators/banner/bannerlower/BannerActionsXl.vue b/src/views/creators/banner/bannerlower/BannerActionsXl.vue
index bdf1d41..1dae56f 100644
--- a/src/views/creators/banner/bannerlower/BannerActionsXl.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsXl.vue
@@ -5,34 +5,32 @@
       <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>
 
-            <!-- 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 }}
+            <!--            Profile and info-->
+            <div class="absolute">
+              <div>
+                <img
+                    class="shadow-2xl rounded-full border-solid border-2 absolute z-20 max-w-[190px] ml-10 -mt-10"
+                    :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="text-xs">
-                105 Followers . {{ creator.subscriberCount }} {{ $t('banner.subscription') }}
+              <div class="ml-64 text-white w-25 min-w-60">
+                <p class="capitalize text-2xl mt-1">{{ 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>
 
-
-            <div class="flex-grow"></div>
-
-
-            <div class="flex flex-col items-center justify-center w-full">
+            <!--  Actions - follow register-->
+            <div class="flex flex-col items-center justify-center w-full min-h-24">
               <!-- Social Media Icons -->
               <div class="flex flex-row space-x-6 justify-center">
                 <a
@@ -51,9 +49,8 @@
                        alt="Website">
                 </a>
               </div>
-
               <!-- Follow and Subscribe Buttons -->
-              <div class="flex flex-row space-x-1 justify-center mt-4">
+              <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
                 <follow-button
                     :creator="creator"
                     :color-border="creator.colors.menu">
@@ -64,34 +61,65 @@
                 </subscribe-button>
               </div>
             </div>
-
-  
-            <div class="flex-grow w-50">
-              
-            </div>
-
-
           </div>
+
+          <div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-2xl text-white"
+               :style="{ backgroundColor: creator.colors.bannerTop}">
+
+            <div class="w-96 h-28 flex flex-col">
+              <!-- Section 3 et 4 - Prend 2/3 de la hauteur -->
+              <div class="flex flex-row flex-grow-[2] min-h-20">
+                <div class="rounded-tl-xl w-1/2   flex items-center justify-center"
+                     :style="{ backgroundColor: creator.colors.bannerBottom, opacity: 0.20 }">
+                </div>
+                <div class="rounded-tr-xl w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
+                     :style="{ backgroundColor: creator.colors.bannerBottom}">
+                  <div class="absolute left-20"> 0 $</div>
+                  <v-btn variant="text"
+                         height="80px"
+                         width="200px"
+                         style="font-size: 18px;">Je supporte
+                  </v-btn>
+                </div>
+              </div>
+              <!-- Section 1 - Prend 1/3 de la hauteur -->
+              <div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-2xl"
+                   :style="{ backgroundColor: creator.colors.bannerBottom,opacity: 0.80 }">
+
+<textarea
+
+    rows="1"
+    placeholder="Message facultatif"
+    class="w-full p-2 border border-gray-300 rounded-b-2xl resize-none"
+    style="max-height: 300px; overflow-y: hidden; outline: none;"
+    oninput="this.style.height = ''; this.style.height = Math.min(this.scrollHeight, 300) + 'px'"></textarea>
+
+
+              </div>
+            </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 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>-->
-<!--      -->
+      <!--        </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"-->
@@ -155,6 +183,7 @@ 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 = [];