Fix LowerBannerUI structure with subfiles and breakpoints.

src/views/creators/CreatorAbout.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <button
-        class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 mr-2"
+        class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 "
         @click="AboutUs = true"
     >
       <v-icon style="font-size: 35px; height: 35px; width: 55px;">

src/views/creators/CreatorBanner.vue

@@ -34,67 +34,10 @@
         </div>
       </div>    
 
-      <!-- Actions Button & image profile -->
+    <banner-actions :creator="creator" @content-posted="addContent"></banner-actions>
-      <div class="relative bottom-4 w-full">
-        <div class="bg-gray-800 py-4 relative shadow-lg min-h-24 md:rounded-b-none lg:rounded-b-2xl"
-             :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
-          <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
-                    class="rounded-full border-solid border-2 z-20 lg:max-w-[175px] max-w-[175px] sm:max-w-[125px] h-auto"
-                    :src="creator.images.logo"
-                    alt="Profile Picture"
-                    :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
-                />
-              </div>
-            </div>
-
-            <!-- 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>
-                <div class="text-lg text-white">{{ creator.subscriberCount }} Abonnés</div>
-              </div>
-            </div>
-
-            <div class="px-6 mt-2">
-              <subscribe-button :creator="creator"></subscribe-button>
-            </div>
-
-            <donation-button :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>
     
     
-            <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">
-
-              <publish-content-button :creator="creator"
-                                      @content-posted="addContent"
-              ></publish-content-button>
-
-              <div class="text-white text-2xl">
-                {{ creator.about.title }}
-              </div>
-
-              <creator-about :creator="creator"
-              ></creator-about>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   
 </template>
@@ -104,6 +47,7 @@ import CreatorAbout from "@/views/creators/CreatorAbout.vue";
 import SubscribeButton from "@/views/creators/SubscribeButton.vue";
 import PublishContentButton from "@/views/contents/PublishContentButton.vue";
 import DonationButton from "@/views/creators/DonationButton.vue";
+import BannerActions from "@/views/creators/banner/BannerActions.vue";
 
 const props = defineProps({
   creator: {type: Object, required: true},

src/views/creators/DonationButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-btn variant="text" icon @click="openDonationDialog()">
+  <v-btn class="hover:scale-125" variant="text" icon @click="openDonationDialog()">
     <v-icon :class="['text-2xl', iconColorClass]">mdi-gift-outline</v-icon>
   </v-btn>
 

src/views/creators/banner/BannerActions.vue

@@ -0,0 +1,34 @@
+<script setup>
+import BannerActionsSm from "@/views/creators/banner/BannerActionsSm.vue";
+import BannerActionsMd from "@/views/creators/banner/BannerActionsMd.vue";
+import BannerActionsLg from "@/views/creators/banner/BannerActionsLg.vue";
+import BannerActionsXl from "@/views/creators/banner/BannerActionsXl.vue";
+
+const props = defineProps({
+  creator: { type: Object, required: true }
+});
+
+const emits = defineEmits(['content-posted']);
+
+function addContent(content) {
+  emits('content-posted', content);
+}
+</script>
+
+<template>
+  <div>
+    <banner-actions-sm class="d-sm-none" :creator="creator" @content-posted="addContent"></banner-actions-sm>
+
+    <div class="d-none d-sm-flex d-md-none">
+      <banner-actions-md :creator="creator" @content-posted="addContent"></banner-actions-md>
+    </div>
+
+    <div class="d-none d-md-flex d-lg-none">
+      <banner-actions-lg :creator="creator" @content-posted="addContent"></banner-actions-lg>
+    </div>
+
+    <div class="d-none d-lg-flex">
+      <banner-actions-xl :creator="creator" @content-posted="addContent"></banner-actions-xl>
+    </div>
+  </div>
+</template>

src/views/creators/banner/BannerActionsLg.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="relative w-full">
+    <div class="rounded-b-2xl"
+         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
+      <div class="relative z-20">
+        <div class="flex flex-row items-center py-2">
+          <!--Logo & User Info-->
+          <div>
+            <div>
+              <img
+                  class="rounded-full border-solid border-2 absolute z-20 max-w-[175px] ml-15 -mt-20"
+                  :src="creator.images.logo"
+                  alt="Profile Picture"
+                  :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
+              />
+            </div>
+          </div>
+
+          <div class="ml-60 text-white mr-10">
+            <div>
+              <p class="capitalize text-3xl font-bold ">{{ creator.name }}</p>
+              <div>{{ creator.subscriberCount }} Abonnés</div>
+            </div>
+          </div>
+
+          <div class="flex items-center">
+            <subscribe-button :creator="creator"></subscribe-button>
+          </div>
+
+          <div class="flex items-center ml-4">
+            <donation-button :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>
+          </div>
+
+          <div class="flex ml-auto space-x-4 items-center">
+            <publish-content-button :creator="creator"
+                                    @content-posted="addContent"
+            ></publish-content-button>
+
+            <div class="text-white">
+              {{ creator.about.title }}
+            </div>
+
+            <creator-about :creator="creator"></creator-about>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import SubscribeButton from "@/views/creators/SubscribeButton.vue";
+import PublishContentButton from "@/views/contents/PublishContentButton.vue";
+import DonationButton from "@/views/creators/DonationButton.vue";
+import CreatorAbout from "@/views/creators/CreatorAbout.vue";
+
+const props = defineProps({
+  creator: {type: Object, required: true}
+});
+
+const emits = defineEmits(['content-posted']);
+
+function addContent(content) {
+  emits('content-posted', content);
+}
+</script>

src/views/creators/banner/BannerActionsMd.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="w-full">
+    <div class="rounded-b-2xl"
+         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
+      <div>
+
+        <!-- Logo-Name-Followers -->
+        <div class="flex flex-row relative z-20">
+          <div>
+            <img
+                class="absolute rounded-full border-solid border-2  max-w-[140px] h-auto ml-3 -mt-3"
+                :src="creator.images.logo"
+                alt="Profile Picture"
+                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
+            />
+          </div>
+
+          <div class="flex flex-column text-white cap px-2 mt-1 w-full ml-40">
+            <div class="flex justify-between">
+              <div>
+                <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
+                <div>{{ creator.subscriberCount }} Abonnés</div>
+                
+              </div>
+              <div class="flex items-center">
+                <div class="mt-1">{{ creator.about.title }}</div>
+                <creator-about :creator="creator"></creator-about>
+              </div>
+            </div>
+
+            <div class="flex justify-between mt-2">
+              <subscribe-button :creator="creator"></subscribe-button>
+              <div class="flex space-x-2">
+                <publish-content-button :creator="creator"
+                                        @content-posted="addContent"
+                ></publish-content-button>
+                <donation-button :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>
+              </div>
+            </div>
+          </div>
+        </div>  
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
+<script setup>
+import SubscribeButton from "@/views/creators/SubscribeButton.vue";
+import PublishContentButton from "@/views/contents/PublishContentButton.vue";
+import DonationButton from "@/views/creators/DonationButton.vue";
+import CreatorAbout from "@/views/creators/CreatorAbout.vue";
+
+const props = defineProps({
+  creator: {type: Object, required: true}
+});
+
+const emits = defineEmits(['content-posted']);
+
+function addContent(content) {
+  emits('content-posted', content);
+}
+</script>

src/views/creators/banner/BannerActionsSm.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="w-full">
+    <div
+        :style="{ 
+    backgroundColor: creator.colors.bannerBottom || '#A30E79',
+    borderBottom: `2px solid ${creator.colors.accent || '#000000'}` 
+  }">
+      <div>
+
+        <!--        Logo-Name-Followers-->
+        <div class="flex flex-row relative z-20">
+          <div>
+            <img
+                class="rounded-full border-solid border-2 -mt-4  max-w-[80px] h-auto ml-2"
+                :src="creator.images.logo"
+                alt="Profile Picture"
+                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
+            />
+          </div>
+
+          <div class="flex flex-column text-white cap px-2 mt-1">
+            <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
+            <div>{{ creator.subscriberCount }} Abonnés</div>
+          </div>
+
+          <div class="flex ml-auto text-right text-white text-lg px-3 mt-2">
+            <div class="mt-1">{{ creator.about.title }}</div>
+            <creator-about :creator="creator"></creator-about>
+          </div>
+
+        </div>
+
+        <!--        Title-info-donation-->
+        <div class="flex flex-row items-center justify-between w-full px-4">
+
+          <div>
+            <subscribe-button :creator="creator"></subscribe-button>
+          </div>
+
+          <div class="flex ml-auto space-x-4">
+            <publish-content-button :creator="creator"
+                                    @content-posted="addContent"
+            ></publish-content-button>
+
+            <donation-button :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>
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script setup>
+import SubscribeButton from "@/views/creators/SubscribeButton.vue";
+import PublishContentButton from "@/views/contents/PublishContentButton.vue";
+import DonationButton from "@/views/creators/DonationButton.vue";
+import CreatorAbout from "@/views/creators/CreatorAbout.vue";
+
+const props = defineProps({
+  creator: {type: Object, required: true}
+});
+
+const emits = defineEmits(['content-posted']);
+
+function addContent(content) {
+  emits('content-posted', content);
+}
+</script>

src/views/creators/banner/BannerActionsXl.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="relative w-full">
+    <div class="rounded-b-2xl"
+         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
+      <div class="relative z-20">
+        <div class="flex flex-row items-center py-2">
+          <!--Logo & User Info-->
+          <div>
+            <div>
+              <img
+                  class="rounded-full border-solid border-2 absolute z-20 max-w-[175px] ml-15 -mt-20"
+                  :src="creator.images.logo"
+                  alt="Profile Picture"
+                  :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
+              />
+            </div>
+          </div>
+
+          <div class="ml-60 text-white mr-10">
+            <div>
+              <p class="capitalize text-3xl font-bold ">{{ creator.name }}</p>
+              <div>{{ creator.subscriberCount }} Abonnés</div>
+            </div>
+          </div>
+
+          <div class="flex items-center">
+            <subscribe-button :creator="creator"></subscribe-button>
+          </div>
+
+          <div class="flex items-center ml-4">
+            <donation-button :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>
+          </div>
+
+          <div class="flex ml-auto space-x-4 items-center">
+            <publish-content-button :creator="creator"
+                                    @content-posted="addContent"
+            ></publish-content-button>
+
+            <div class="text-white">
+              {{ creator.about.title }}
+            </div>
+
+            <creator-about :creator="creator"></creator-about>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import SubscribeButton from "@/views/creators/SubscribeButton.vue";
+import PublishContentButton from "@/views/contents/PublishContentButton.vue";
+import DonationButton from "@/views/creators/DonationButton.vue";
+import CreatorAbout from "@/views/creators/CreatorAbout.vue";
+
+const props = defineProps({
+  creator: {type: Object, required: true}
+});
+
+const emits = defineEmits(['content-posted']);
+
+function addContent(content) {
+  emits('content-posted', content);
+}
+</script>