Wip

src/views/creators/AboutYou.vue

@@ -28,37 +28,59 @@
 </template>
 
 <script setup>
-
+import { ref, onMounted } from 'vue';
-import {ref} from 'vue';
-import {useUserStore} from "@/stores/user.js";
 
 const AboutUs = ref(false);
 
 const props = defineProps({
   creator: { type: Object, required: true },
 });
+
+onMounted(() => {
+  const style = document.createElement('style');
+  style.innerHTML = `
+    .scrollable-content::-webkit-scrollbar-thumb {
+      background-color: ${props.creator.profileColors.menu};
+      border-radius: 10px;
+    }
+    .scrollable-content::-webkit-scrollbar-thumb:hover {
+      background-color: ${shadeColor(props.creator.profileColors.accent, -10)};
+    }
+  `;
+  document.head.appendChild(style);
+});
+
+function shadeColor(color, percent) {
+  const f = parseInt(color.slice(1), 16),
+      t = percent < 0 ? 0 : 255,
+      p = percent < 0 ? percent * -1 : percent,
+      R = f >> 16,
+      G = (f >> 8) & 0x00ff,
+      B = f & 0x0000ff;
+  return (
+      "#" +
+      (
+          0x1000000 +
+          (Math.round((t - R) * p) + R) * 0x10000 +
+          (Math.round((t - G) * p) + G) * 0x100 +
+          (Math.round((t - B) * p) + B)
+      )
+          .toString(16)
+          .slice(1)
+  );
+}
 </script>
 
 <style scoped>
 .scrollable-content {
   max-height: 600px;
   overflow-y: auto;
-
 }
 
 .scrollable-content::-webkit-scrollbar {
   width: 6px;
 }
 
-.scrollable-content::-webkit-scrollbar-thumb {
-  background-color: #A30E79;
-  border-radius: 10px;
-}
-
-.scrollable-content::-webkit-scrollbar-thumb:hover {
-  background-color: #a21caf;
-}
-
 .transparent-btn {
   background-color: transparent;
   color: inherit;

src/views/creators/CreatePostButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <button v-if="creator.id === userStore.getCurrentUser().id"
-            class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
+            class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 px-4"
             @click="isDialogActive = true">
       <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
     </button>

src/views/creators/CreatorBanner.vue

@@ -5,7 +5,8 @@
   <div class="relative bottom-4  z-20 m">
     <div class="relative flex flex-col">
       <!-- Social Network-->
-      <div class="bg-opacity-50 flex flex-col md:flex-row items-center py-4 px-4 min-h-14" :style="{ backgroundColor: creator.profileColors.bannerTop || '#6B0065' }">
+      <div class="bg-opacity-50 flex flex-col md:flex-row items-center py-4 px-4 min-h-14"
+           :style="{ backgroundColor: creator.profileColors.bannerTop || '#6B0065' }">
         <div class="w-full flex justify-between lg:justify-end gap-14 mt-2">
           <a
               v-for="socialNetwork in GetActiveSocialNetworkUrls()"
@@ -24,14 +25,17 @@
     <div class="relative">
       <!--Banner-->
       <div>
-        <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="creator.storedDataUrls.bannerPictureUrl || '/images/hutopymedia/banners/tutorialbanner.png'" alt="Profile Banner" style="max-height: 550px">
+        <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]"
+             :src="creator.storedDataUrls.bannerPictureUrl || '/images/hutopymedia/banners/tutorialbanner.png'"
+             alt="Profile Banner" style="max-height: 550px">
       </div>
     </div>
   </div>
 
   <!-- Actions Button & image profile -->
   <div class="relative bottom-4 w-full">
-    <div class="bg-gray-800 py-4 relative shadow-lg min-h-24" :style="{ backgroundColor: creator.profileColors.bannerBottom || '#A30E79' }">
+    <div class="bg-gray-800 py-4 relative shadow-lg min-h-24"
+         :style="{ backgroundColor: creator.profileColors.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">
@@ -58,18 +62,18 @@
         </div>
 
         <!-- Buttons -->
-        <div  class="flex flex-wrap items-center justify-center mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4 ml-">
+        <div
-          <CreatePostButton :creator="creator" />         
+            class="flex flex-wrap items-center justify-center mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4 ml-">
+          <AboutYou :creator="creator"></AboutYou>
           <button class="text-white py-2 px-4 rounded"
                   style="background-color: #333; transition: background-color 0.3s ease;"
                   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
             S'ABONNER
           </button>
-          <button
+        
-              class="flex items-center text-white transform transition-transform duration-200 hover:text-white hover:scale-125">
+          <CreatePostButton :creator="creator"/>
-            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-comment-text</v-icon>
+         
-          </button>
+          
-          <AboutYou :creator="creator"></AboutYou>
         </div>
       </div>
     </div>
@@ -81,6 +85,7 @@ import CreatePostButton from "@/views/creators/CreatePostButton.vue";
 import {defineProps, ref} from "vue";
 import SeizeIndicator from "@/views/tools/SeizeIndicator.vue";
 import AboutYou from "@/views/creators/AboutYou.vue";
+
 const props = defineProps({
   creator: {type: Object, required: true},
 });
@@ -99,7 +104,10 @@ function GetActiveSocialNetworkUrls(){
     socialNetworks.push({icon: "mdi-instagram", url: props.creator.socialNetworks.instagramUrl})
   }
   if (userSocialNetworks.tiktokUrl !== '') {
-    socialNetworks.push({icon: "/images/hutopymedia/icons/white/tiktokwhite.png", url: props.creator.socialNetworks.tikTokUrl})
+    socialNetworks.push({
+      icon: "/images/hutopymedia/icons/white/tiktokwhite.png",
+      url: props.creator.socialNetworks.tikTokUrl
+    })
   }
   if (userSocialNetworks.youtubeUrl !== '') {
     socialNetworks.push({icon: "mdi-youtube", url: props.creator.socialNetworks.youtubeUrl})