Big cleanup for styling

frontend/src/assets/main.css

@@ -33,11 +33,15 @@
     }
 
     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 {

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 }}

frontend/src/views/creators/CreatorHome.vue

@@ -31,7 +31,7 @@
       <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,8 +45,7 @@
                 v-if="mainImageUrl"
                 :src="mainImageUrl"
                 alt="Image principale"
-                class="max-w-full h-auto cursor-pointer"
+                class="max-w-full h-auto cursor-pointer"/>
-                @click="openFullscreen(mainImageUrl)" />
           </div>
           <div v-if="isEditMode" class="relative flex justify-center">
             <label>
@@ -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>
@@ -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>
@@ -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"
+                <div v-if="image1Url" class="relative w-full sm:flex-1 ">
-                     @click="openFullscreen(image1Url)">
+                  <img :src="image1Url"
-                  <img :src="image1Url" alt="Image 1" class="rounded-md max-w-full h-auto cursor-pointer"/>
+                       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"
+                <div v-if="image2Url" class="relative w-full sm:flex-1 ">
-                     @click="openFullscreen(image2Url)">
+                  <img :src="image2Url"
-                  <img :src="image2Url" alt="Image 2" class="rounded-md max-w-full h-auto cursor-pointer"/>
+                       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"
+                <div v-if="image3Url" class="relative w-full sm:flex-1 ">
-                     @click="openFullscreen(image3Url)">
+                  <img :src="image3Url"
-                  <img :src="image3Url" alt="Image 3" class="rounded-md max-w-full h-auto cursor-pointer"/>
+                       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"
+                <div v-if="image4Url" class="relative w-full sm:flex-1 ">
-                     @click="openFullscreen(image4Url)">
+                  <img :src="image4Url"
-                  <img :src="image4Url" alt="Image 4" class="rounded-md max-w-full h-auto cursor-pointer"/>
+                       alt="Image 4"
+                       class="rounded-md max-w-full h-auto cursor-pointer"/>
                 </div>
               </div>
             </div>
@@ -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;

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()"

frontend/src/views/creators/DonationButtonBanner.vue

@@ -1,12 +1,10 @@
 <template>
-  <v-btn
+  <button
-    variant="text"
+      class="secondary"
-    style="font-size: x-large; height: 100%"
-    block
     @click="openDonationDialog()"
   >
     {{ $t('isupportbtn.isupport') }}
-  </v-btn>
+  </button>
 
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>

frontend/src/views/creators/FullscreenImage.vue

@@ -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>