Applying new redesign.

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>