From 66888bee9ee2b22c4600cc9ac7c14ba834f0f7fb Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 14 Jul 2024 22:01:26 -0400
Subject: [PATCH] Wip

---
 src/views/creators/AboutYou.vue         | 54 +++++++++++++++++-------
 src/views/creators/CreatePostButton.vue |  2 +-
 src/views/creators/CreatorBanner.vue    | 56 ++++++++++++++-----------
 3 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/src/views/creators/AboutYou.vue b/src/views/creators/AboutYou.vue
index 4d41cbe..053b875 100644
--- a/src/views/creators/AboutYou.vue
+++ b/src/views/creators/AboutYou.vue
@@ -12,7 +12,7 @@
         <v-card-title>
           À propos
           <br><br>
-          <div class="flex justify-center">      {{ creator.about }}</div>
+          <div class="flex justify-center">{{ creator.about }}</div>
           <br>
         </v-card-title>
         <v-card-text class="scrollable-content">
@@ -28,40 +28,62 @@
 </template>
 
 <script setup>
-
-import {ref} from 'vue';
-import {useUserStore} from "@/stores/user.js";
+import { ref, onMounted } from 'vue';
 
 const AboutUs = ref(false);
 
 const props = defineProps({
-  creator: {type: Object, required: true},
+  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;
   box-shadow: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/creators/CreatePostButton.vue b/src/views/creators/CreatePostButton.vue
index 9c2e148..fca68c5 100644
--- a/src/views/creators/CreatePostButton.vue
+++ b/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>
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index a2eaee6..0b45910 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -1,11 +1,12 @@
 <template>
   <seize-indicator></seize-indicator>
-    
+
   <!--  Bannière-->
   <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()"
@@ -18,20 +19,23 @@
           </a>
         </div>
       </div>
-    </div>    
-    
+    </div>
+
     <!--Banner & user info-->
     <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">
-      </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">
+      </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-">
-          <CreatePostButton :creator="creator" />         
+        <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-">
+          <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">
-            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-comment-text</v-icon>
-          </button>
-          <AboutYou :creator="creator"></AboutYou>
+        
+          <CreatePostButton :creator="creator"/>
+         
+          
         </div>
       </div>
     </div>
@@ -81,35 +85,39 @@ 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 },
+  creator: {type: Object, required: true},
 });
 
 
-function GetActiveSocialNetworkUrls(){
+function GetActiveSocialNetworkUrls() {
   const socialNetworks = [];
   const userSocialNetworks = props.creator.socialNetworks;
-  if (userSocialNetworks.facebookUrl !== ''){
+  if (userSocialNetworks.facebookUrl !== '') {
     socialNetworks.push({icon: "mdi-facebook", url: props.creator.socialNetworks.facebookUrl})
   }
-  if (userSocialNetworks.facebookUrl !== ''){
+  if (userSocialNetworks.facebookUrl !== '') {
     socialNetworks.push({icon: "mdi-twitter", url: props.creator.socialNetworks.xUrl})
   }
-  if (userSocialNetworks.instagramUrl !== ''){
+  if (userSocialNetworks.instagramUrl !== '') {
     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})
+  if (userSocialNetworks.tiktokUrl !== '') {
+    socialNetworks.push({
+      icon: "/images/hutopymedia/icons/white/tiktokwhite.png",
+      url: props.creator.socialNetworks.tikTokUrl
+    })
   }
-  if (userSocialNetworks.youtubeUrl !== ''){
+  if (userSocialNetworks.youtubeUrl !== '') {
     socialNetworks.push({icon: "mdi-youtube", url: props.creator.socialNetworks.youtubeUrl})
   }
   if (userSocialNetworks.yourWebsiteUrl !== ''){
     const websiteIconWithBackup = props.creator.storedDataUrls.websiteIconUrl === '' ? "mdi-web" : props.creator.storedDataUrls.websiteIconUrl;
     socialNetworks.push({icon: websiteIconWithBackup, url: props.creator.socialNetworks.yourWebsiteUrl})
   }
-  
+
   return socialNetworks;
 }
-    
+
 </script>
\ No newline at end of file