From a1c8d343327263c0351e3d2dea174d5985bb7bb0 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Wed, 12 Feb 2025 16:41:22 -0500
Subject: [PATCH] Big cleanup for styling

---
 frontend/src/assets/main.css                  | 10 ++-
 frontend/src/views/creators/BannerActions.vue | 37 ++++-------
 frontend/src/views/creators/CreatorHome.vue   | 64 +++++++++----------
 frontend/src/views/creators/CreatorLogo.vue   |  2 +-
 .../views/creators/DonationButtonBanner.vue   | 16 ++---
 .../src/views/creators/FullscreenImage.vue    | 56 ----------------
 6 files changed, 58 insertions(+), 127 deletions(-)
 delete mode 100644 frontend/src/views/creators/FullscreenImage.vue

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 80bfcd7..a41e81d 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -26,18 +26,22 @@
     .btn {
         @apply min-w-24 w-full;
         @apply p-4;
-        @apply flex flex-nowrap gap-4 items-center justify-center;
+        @apply flex flex-nowrap gap-4 items-center justify-center ;
         @apply rounded-lg;
         @apply capitalize text-base font-sans font-medium;
         @apply w-fit px-10;
     }
 
     button.primary {
-        @apply btn bg-hPrimary text-hOnPrimary;
+        @apply btn;
+        @apply bg-hPrimary text-hOnPrimary;
+        @apply hover:brightness-125;
     }
 
     button.secondary {
-        @apply btn bg-hSecondary text-hOnSecondary;
+        @apply btn;
+        @apply bg-hSecondary text-hOnSecondary;
+        @apply hover:brightness-90;
     }
 
     div.card {
diff --git a/frontend/src/views/creators/BannerActions.vue b/frontend/src/views/creators/BannerActions.vue
index f24526a..05036f3 100644
--- a/frontend/src/views/creators/BannerActions.vue
+++ b/frontend/src/views/creators/BannerActions.vue
@@ -114,57 +114,42 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
+
   <div class="flex flex-column w-full">
     <!-- Container principal avec le profil -->
     <div class="relative w-full shadow-xl rounded-2xl">
-      <div class="rounded-b-2xl shadow-2xl bg-hPrimary"
+      <div class="rounded-b-2xl shadow-2xl bg-hPrimary text-hOnPrimary"
            :style="{
             boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)',
             }">
 
-        <div class="flex flex-row p-2">
+        <div class="flex flex-row py-4 pr-4 items-center">
           <!-- Profile et Info -->
 
-          <div>
+          <div class="absolute -mt-4">
             <creator-logo/>
           </div>
 
-          <div class="flex items-center">
+          <div class="flex items-center ml-52 grow">
             <name-title></name-title>
           </div>
 
-
-          <!-- Actions - Follow et Register -->
-          <!--          <div class="flex flex-col items-center justify-center w-full">-->
-          <!--            <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">-->
-          <!--              &lt;!&ndash;<subscribe-button></subscribe-button>&ndash;&gt;-->
-          <!--            </div>-->
-          <!--          </div>-->
-        </div>
-
-        <!-- Bouton Support -->
-        <div
-            v-show="brandingStore.value.acceptDonation"
-            class="z-20 shadow-2xl rounded-md bg-hSecondary text-hOnSecondary flex justify-center items-center z-50"
-            :class="{
-            'absolute bottom-6 right-8 w-64 h-28 ': !isMobile,
-            'fixed bottom-0 left-0 right-0 w-full h-16': isMobile,
-          }"
-        >
           <donation-button-banner
-              v-if="creator"
+              v-if="brandingStore.value.acceptDonation && creator"
               :creator-id="creator.id"
               :creator-name="creator.name"
-              :on-success-url="baseURL + '/paymentcompleted/' + creator.id"
               :on-cancelled-url="baseURL + '/paymentfailed/' + creator.id"
+              :on-success-url="baseURL + '/paymentcompleted/' + creator.id"
           ></donation-button-banner>
+
         </div>
+
       </div>
     </div>
 
     <!-- Section pour les icônes de réseaux sociaux -->
     <div
-        class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center bg-hSecondary"
+        class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center bg-hSecondary text-hOnSecondary"
         :style="{
         boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)',
       }"
@@ -176,7 +161,7 @@ onBeforeUnmount(() => {
               :key="socialNetwork.url"
               :href="socialNetwork.url"
               target="_blank"
-              class="text-white text-md transform transition-transform duration-200 hover:scale-125 hover:text-blue-500"
+              class="text-md transform transition-transform duration-200 hover:scale-125 hover:text-fuchsia-900"
           >
             <v-icon v-if="socialNetwork.icon.includes('mdi')">
               {{ socialNetwork.icon }}
diff --git a/frontend/src/views/creators/CreatorHome.vue b/frontend/src/views/creators/CreatorHome.vue
index 4d26b10..63906aa 100644
--- a/frontend/src/views/creators/CreatorHome.vue
+++ b/frontend/src/views/creators/CreatorHome.vue
@@ -28,10 +28,10 @@
 
     <div>
       <!-- Main image  Bloc D'information-->
-      <div class="py-4" >
+      <div class="py-4">
 
         <div v-if="!isEditMode">
-          <p  class="py-4 text-justify" v-if="mainImageText ">
+          <p v-if="mainImageText ">
             {{ mainImageText }}
           </p>
         </div>
@@ -45,11 +45,10 @@
                 v-if="mainImageUrl"
                 :src="mainImageUrl"
                 alt="Image principale"
-                class="max-w-full h-auto cursor-pointer"
-                @click="openFullscreen(mainImageUrl)" />
+                class="max-w-full h-auto cursor-pointer"/>
           </div>
           <div v-if="isEditMode" class="relative flex justify-center">
-            <label  >
+            <label>
               <input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden"/>
               <img :src="mainImageUrl || fallbackImage"
                    alt="Image principale"
@@ -68,7 +67,7 @@
             </h2>
 
             <div v-if="!isEditMode">
-              <p v-if="mainVideoText" class="text-lg  text-justify mt-5 mb-4">
+              <p v-if="mainVideoText">
                 {{ mainVideoText }}
               </p>
             </div>
@@ -85,7 +84,7 @@
           </div>
         </div>
 
-        <div >
+        <div>
           <div v-if="!isEditMode" class="py-5 text-lg font-bold">
             {{ videoSubtitle }}
           </div>
@@ -98,10 +97,15 @@
             ></v-text-field>
           </div>
 
-          <v-textarea v-if="isEditMode" rows="10" variant="outlined" v-model="editableImagesText" class="w-full p-2 border rounded-md"></v-textarea>
+          <v-textarea v-if="isEditMode"
+                      v-model="editableImagesText"
+                      class="w-full p-2 border rounded-md"
+                      rows="10"
+                      variant="outlined">
+          </v-textarea>
 
           <div v-if="!isEditMode">
-            <p v-if="imagesText " class="text-lg text-justify">
+            <p v-if="imagesText ">
               {{ imagesText }}
             </p>
           </div>
@@ -135,7 +139,7 @@
       <!-- Images  -->
 
       <div v-if="!isEditMode">
-        <div v-if="imagesSubtitle || image1Url || image2Url || image3Url || image4Url || imagesText " >
+        <div v-if="imagesSubtitle || image1Url || image2Url || image3Url || image4Url || imagesText ">
           <!--        images-->
           <div class="py-2">
             <FullscreenImage ref="fullscreenImage" :image-url="currentImage"/>
@@ -143,27 +147,31 @@
               <!-- Affichage des images -->
               <div class="flex  gap-2">
                 <!-- Première image -->
-                <div class="relative w-full sm:flex-1 " v-if="image1Url"
-                     @click="openFullscreen(image1Url)">
-                  <img :src="image1Url" alt="Image 1" class="rounded-md max-w-full h-auto cursor-pointer"/>
+                <div v-if="image1Url" class="relative w-full sm:flex-1 ">
+                  <img :src="image1Url"
+                       alt="Image 1"
+                       class="rounded-md max-w-full h-auto cursor-pointer"/>
                 </div>
 
                 <!-- Deuxième image -->
-                <div class="relative w-full sm:flex-1 " v-if="image2Url"
-                     @click="openFullscreen(image2Url)">
-                  <img :src="image2Url" alt="Image 2" class="rounded-md max-w-full h-auto cursor-pointer"/>
+                <div v-if="image2Url" class="relative w-full sm:flex-1 ">
+                  <img :src="image2Url"
+                       alt="Image 2"
+                       class="rounded-md max-w-full h-auto cursor-pointer"/>
                 </div>
 
                 <!-- Troisième image -->
-                <div class="relative w-full sm:flex-1 " v-if="image3Url"
-                     @click="openFullscreen(image3Url)">
-                  <img :src="image3Url" alt="Image 3" class="rounded-md max-w-full h-auto cursor-pointer"/>
+                <div v-if="image3Url" class="relative w-full sm:flex-1 ">
+                  <img :src="image3Url"
+                       alt="Image 3"
+                       class="rounded-md max-w-full h-auto cursor-pointer"/>
                 </div>
 
                 <!-- Quatrième image -->
-                <div class="relative w-full sm:flex-1 " v-if="image4Url"
-                     @click="openFullscreen(image4Url)">
-                  <img :src="image4Url" alt="Image 4" class="rounded-md max-w-full h-auto cursor-pointer"/>
+                <div v-if="image4Url" class="relative w-full sm:flex-1 ">
+                  <img :src="image4Url"
+                       alt="Image 4"
+                       class="rounded-md max-w-full h-auto cursor-pointer"/>
                 </div>
               </div>
             </div>
@@ -255,7 +263,7 @@
 
       <!-- Contact Info-->
       <div v-if="!isEditMode">
-        <div v-if="phoneNumber || email" class="mb-6" >
+        <div v-if="phoneNumber || email" class="mb-6">
           <!--      mobile-->
           <div v-if="smAndDown">
             <div class="flex flex-col space-y-10 mt-12 justify-center items-center">
@@ -302,12 +310,11 @@
 </template>
 
 <script setup>
-import {onMounted, ref, watch} from "vue";
+import {onMounted, ref} from "vue";
 import {useClient} from "@/plugins/api.js";
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useDisplay} from "vuetify";
-import FullscreenImage from "@/views/creators/FullscreenImage.vue";
 
 const {smAndDown} = useDisplay();
 
@@ -353,13 +360,6 @@ const editableEmail = ref("");
 
 const editableImages = ref([null, null, null, null]);
 
-function openFullscreen(imageUrl) {
-  currentImage.value = imageUrl;
-  fullscreenImage.value.open();
-}
-
-watch(smAndDown, () => {});
-
 // Activer/désactiver le mode édition
 function toggleEditMode() {
   isEditMode.value = !isEditMode.value;
diff --git a/frontend/src/views/creators/CreatorLogo.vue b/frontend/src/views/creators/CreatorLogo.vue
index fa69e02..ef881b9 100644
--- a/frontend/src/views/creators/CreatorLogo.vue
+++ b/frontend/src/views/creators/CreatorLogo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-full relative bg-red"
+  <div class="rounded-full relative"
        @mouseenter="showTint = isCurrentCreator"
        @mouseleave="showTint = false"
        @click="isCurrentCreator && openBannerEditor()"
diff --git a/frontend/src/views/creators/DonationButtonBanner.vue b/frontend/src/views/creators/DonationButtonBanner.vue
index f754814..0d12efb 100644
--- a/frontend/src/views/creators/DonationButtonBanner.vue
+++ b/frontend/src/views/creators/DonationButtonBanner.vue
@@ -1,12 +1,10 @@
 <template>
-  <v-btn
-    variant="text"
-    style="font-size: x-large; height: 100%"
-    block
+  <button
+      class="secondary"
     @click="openDonationDialog()"
   >
     {{ $t('isupportbtn.isupport') }}
-  </v-btn>
+  </button>
 
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>
@@ -98,10 +96,10 @@
 </template>
 
 <script setup>
-import { useClient } from '@/plugins/api.js';
-import { useBrandingStore } from '@/stores/brandingStore.js';
-import { loadStripe } from '@stripe/stripe-js';
-import { onMounted, ref } from 'vue';
+import {useClient} from '@/plugins/api.js';
+import {useBrandingStore} from '@/stores/brandingStore.js';
+import {loadStripe} from '@stripe/stripe-js';
+import {onMounted, ref} from 'vue';
 
 const brandingStore = useBrandingStore();
 
diff --git a/frontend/src/views/creators/FullscreenImage.vue b/frontend/src/views/creators/FullscreenImage.vue
deleted file mode 100644
index bc29491..0000000
--- a/frontend/src/views/creators/FullscreenImage.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <v-dialog v-model="isVisible" fullscreen hide-overlay transition="fade-transition">
-    <v-card class="pa-0 bg-hBackground text-hOnBackground">
-      <v-btn
-          class="close-button bg-hSecondary text-hOnSecondary"
-          @click="close"
-      >
-        <v-icon>mdi-close</v-icon>
-      </v-btn>
-      <v-img :src="imageUrl" class="fullscreen-image"></v-img>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script setup>
-import {ref} from "vue";
-import {useBrandingStore} from "@/stores/brandingStore.js";
-
-const brandingStore = useBrandingStore();
-
-const props = defineProps({
-  imageUrl: {
-    type: String,
-    required: true,
-  },
-});
-
-const isVisible = ref(false);
-
-function open() {
-  isVisible.value = true;
-}
-
-function close() {
-  isVisible.value = false;
-}
-
-defineExpose({
-  open,
-});
-</script>
-
-<style scoped>
-.fullscreen-image {
-  height: 100vh;
-  width: 100%;
-  object-fit: contain;
-}
-
-.close-button {
-  position: absolute;
-  top: 50px;
-  right: 50px;
-  z-index: 10;
-}
-</style>