I renamed CreatorAbout to reduce confusion

src/views/creators/CreatorDescriptionBtn.vue

@@ -0,0 +1,89 @@
+<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
+          <br><br>
+          <div class="flex justify-center">{{ creator.about }}</div>
+          <br>
+        </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="AboutUs = false">Fermer</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+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;
+}
+
+.transparent-btn {
+  background-color: transparent;
+  color: inherit;
+  box-shadow: none;
+}
+</style>