From d9f4973319ffa97e1f81e6c4c3396da824356fb6 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sat, 13 Jul 2024 12:28:07 -0400
Subject: [PATCH] I added the "About Us" button in the banner section and
 connected it with the backend.

---
 src/views/creators/AboutYou.vue      | 64 ++++++++++++++++++++++++++++
 src/views/creators/CreatorBanner.vue |  9 ++--
 2 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 src/views/creators/AboutYou.vue

diff --git a/src/views/creators/AboutYou.vue b/src/views/creators/AboutYou.vue
new file mode 100644
index 0000000..8c0cc33
--- /dev/null
+++ b/src/views/creators/AboutYou.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <button
+        class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 mr-2"
+        @click="AboutUs = true"
+    >
+      <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
+    </button>
+
+    <v-dialog v-model="AboutUs" max-width="500px">
+      <v-card>
+        <v-card-title>
+          À propos
+        </v-card-title>
+        <v-card-text class="scrollable-content">
+          {{ creator.description }}
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn text class="ml-auto" @click="isModalOpen = false">Fermer</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup>
+
+import {ref} from 'vue';
+import {useUserStore} from "@/stores/user.js";
+
+const AboutUs = ref(false);
+
+const props = defineProps({
+  creator: {type: Object, required: true},
+});
+</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
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 0cdeee8..16bcb4c 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -61,7 +61,7 @@
         </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">
+        <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-">
           <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"
               @click="isDialogActive = true">
@@ -76,10 +76,7 @@
               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>
-          <button
-              class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125">
-            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
-          </button>
+          <AboutYou :creator="creator"></AboutYou>
         </div>
       </div>
     </div>
@@ -126,6 +123,7 @@
   </v-dialog>
 
 
+
 </template>
 
 <script setup>
@@ -133,6 +131,7 @@
 import {defineProps, ref} from "vue";
 import {useUserStore} from "@/stores/user.js";
 import SeizeIndicator from "@/views/tools/SeizeIndicator.vue";
+import AboutYou from "@/views/creators/AboutYou.vue";
 
 const props = defineProps({
   creator: { type: Object, required: true },