Remove colors

frontend/src/App.vue

@@ -2,15 +2,14 @@
   <v-app>
     <div class="flex flex-row">
       <!-- Side Bar for larger screens -->
-      <div v-if="!smAndDown" class="border-r-2 z-30">
+      <div v-if="!smAndDown" class="border-r-1 z-30">
         <side-bar></side-bar>
       </div>
 
       <!-- Mobile -->
       <div v-if="smAndDown" class="mobile-container">
         <div v-if="!brandingStore.loading"
-             class="min-h-screen justify-center items-center"
-             :style="{ backgroundColor: brandingStore.colors.background }">
+             class="min-h-screen justify-center items-center bg-hBackground">
           <router-view></router-view>
         </div>
       </div>
@@ -18,8 +17,7 @@
       <!-- PC -->
       <div v-if="!smAndDown" class="w-full ml-64">
         <div v-if="!brandingStore.loading"
-             class="min-h-screen justify-center items-center"
-             :style="{ backgroundColor: brandingStore.colors.background }">
+             class="min-h-screen justify-center items-center bg-hBackground">
           <router-view class="p-2"></router-view>
         </div>
       </div>

frontend/src/assets/main.css

@@ -1,3 +1,18 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+:root {
+    --h-background: #2D2728;
+    --h-on-background: #f1f1f1;
+    --h-surface: #494949;
+    --h-on-surface: #eca815;
+    --h-primary: #231F20;
+    --h-on-primary: #d9e1e1;
+    --h-secondary: #683B1E;
+    --h-on-secondary: #ececec;
+    --h-tertiary: #272A44;
+    --h-on-tertiary: #bdb6b6;
+    --h-error: #bc2f2f;
+    --h-on-error: #ffffff;
+}

frontend/src/stores/brandingStore.js

@@ -16,19 +16,6 @@ export const useBrandingStore = defineStore(
             {},
             {writeDefaults: false})
 
-        const defaultColors = {
-            "background": "#f4f4f4",
-            "error": "#f4f4f4",
-            "primary": "#f4f4f4",
-            "secondary": "#f4f4f4",
-            "surface": "#f4f4f4",
-            "onBackground": "#000",
-            "onError": "#000",
-            "onPrimary": "#000",
-            "onSecondary": "#000",
-            "onSurface": "#000",
-        }
-        const colors = ref(defaultColors)
         const presentationInfos = ref([]) 
 
         const route = useRoute()
@@ -41,12 +28,10 @@ export const useBrandingStore = defineStore(
                     if (newCreator !== undefined) {
                         value.value = await fetchCreatorData(newCreator)
                         currentBrand.value = newCreator
-                        colors.value = value.value?.colors
                         presentationInfos.value = value.value?.presentationInfos
                     } else {
                         value.value = {}
                         currentBrand.value = undefined
-                        colors.value = defaultColors
                         presentationInfos.value = [] 
                     }
                 }
@@ -68,7 +53,6 @@ export const useBrandingStore = defineStore(
         return {
             currentBrand,
             value,
-            colors,
             loading,
             presentationInfos 
         }

frontend/src/views/contents/ContentEditorPage.vue

@@ -55,14 +55,14 @@ onMounted(() => {
   
   
 
-  <div v-else class="flex flex-col h-screen" :style="{ backgroundColor: creatorData.colors?.background, color: creatorData?.colors?.onSurface}">
+  <div v-else class="flex flex-col h-screen bg-hSurface text-hOnSurface">
     <div class="max-w-[1000px] mx-auto shadow-2xl  rounded-lg overflow-hidden">
-      <header class="text-2xl text-center py-4" :style="{ backgroundColor: creatorData?.colors?.primary, color: creatorData?.colors?.onPrimary }">
+      <header class="text-2xl text-center py-4 bg-hPrimary text-hOnPrimary">
         Éditeur de contenu
       </header>
 
       <div class="flex flex-grow">
-        <aside class="side-menu flex flex-col items-center py-6 " :style="{ backgroundColor: creatorData?.colors?.secondary, color: creatorData?.colors?.onSecondary }">
+        <aside class="side-menu flex flex-col items-center py-6 bg-hSecondary text-hOnSecondary">
           <div class="text-xl uppercase mb-6 px-2">Type de contenu</div>
 
           <v-btn

frontend/src/views/contents/ContentList.vue

@@ -21,7 +21,7 @@
 
 
       <template v-slot:empty >
-       <div class="py-2" :style="{color:branding.colors.onSurface}">Il n'y a pas plus de contenu</div>
+       <div class="py-2 text-hOnSurface">Il n'y a pas plus de contenu</div>
       </template>
 
       <template v-slot:error>

frontend/src/views/contents/HTMLContentEditor.vue

@@ -49,7 +49,7 @@ const imagesUploadHandler = async (blobInfo) => {
   }
 };
 
-const filePickerCallback = (callback, value, meta) => {
+const filePickerCallback = (callback, _) => {
   const input = document.createElement('input');
   input.setAttribute('type', 'file');
   input.setAttribute('accept', 'image/*');
@@ -113,13 +113,6 @@ const setupTinyMCE = (editor) => {
         title: 'Select Page Background Color',
         body: {
           type: 'panel',
-          items: [
-            {
-              type: 'colorpicker',
-              name: 'colorpicker',
-              label: 'Background Color'
-            }
-          ]
         },
         buttons: [
           {

frontend/src/views/contents/PublishContentButton.vue

@@ -78,10 +78,7 @@ const closeDialog = () => {
 
   <v-dialog v-model="isDialogActive" max-width="500">
     <v-form>
-      <v-card class="text-center rounded-xl"
-              :style="{ 
-                border: `3px solid ${brandingStore.value.colors.menu}` 
-              }">
+      <v-card class="text-center rounded-xl border-2 border-solid border-hSecondary">
 
         <v-card-title class="font-medium">
           Créer un Contenu

frontend/src/views/contents/contentcards/NContentCard.vue

@@ -62,11 +62,10 @@ function hexToRgb(hex) {
 <template>
 
 
-  <div class="shadow-md rounded-md bg-gray-50 border custom-border w-52 h-[300px]"
+  <div class="shadow-md rounded-md bg-gray-50 border custom-border w-52 h-[300px] bg-hSurface"
        :style="{
-         backgroundColor: branding.colors.surface,
          boxShadow: '0 10px 10px rgba(0, 0, 0, 0.3)',
-         borderColor: `rgba(${hexToRgb(branding.colors.secondary)}, 0.4)`,
+         borderColor: `rgba(${hexToRgb('--h-secondary')}, 0.4)`,
          borderWidth: '1px',
        }">
     
@@ -79,11 +78,15 @@ function hexToRgb(hex) {
 
     <div class="p-1">
       <div class="flex flex-row justify-between items-center">
-        <span class="text-caption mt-1 px-2"   :style="{color:branding.colors.onSurface}">{{ time_ago(props.content.createdAt) }}</span>
+        <span class="text-caption mt-1 px-2 text-hOnSurface">
+          {{ time_ago(props.content.createdAt) }}
+        </span>
         <v-menu v-if="creatorIsCurrentUser" :offset-y="true">
           <template v-slot:activator="{ props }">
-            <v-btn variant="plain" v-bind="props" style="min-width: auto; padding: 0; margin-right: 4px;">
-              <div :style="{color:branding.colors.onSurface}">
+            <v-btn variant="plain"
+                   v-bind="props"
+                   style="min-width: auto; padding: 0; margin-right: 4px;">
+              <div class="text-hOnSurface">
               <v-icon>mdi-dots-vertical</v-icon>
              </div>
             </v-btn>
@@ -98,7 +101,7 @@ function hexToRgb(hex) {
     </div>
 
    
-    <div class="capitalize p-2" :style="{color:branding.colors.onSurface}">{{ props.content.title }}</div>
+    <div class="capitalize p-2 text-hOnSurface">{{ props.content.title }}</div>
   </div>
 
   <!-- Delete Dialog -->

frontend/src/views/creators/Banner.vue

@@ -3,23 +3,18 @@
   <div class="shadow-lg rounded-2xl mt-2">
     <div class="relative z-20">
 
-      <div class="min-h-8 rounded-t-2xl shadow-lg"
-           :style="{ backgroundColor: branding.colors.primary }"
-      ></div>
+      <div class="min-h-8 rounded-t-2xl shadow-lg bg-hPrimary">
+      </div>
 
       <actual-banner></actual-banner>
       <banner-actions></banner-actions>
 
     </div>
 
-
   </div>
 </template>
 
 <script setup>
-import {useBrandingStore} from "@/stores/brandingStore.js";
 import ActualBanner from "@/views/creators/ActualBanner.vue";
 import BannerActions from "@/views/creators/BannerActions.vue";
-
-const branding = useBrandingStore();
 </script>

frontend/src/views/creators/BannerActions.vue

@@ -110,9 +110,8 @@ onBeforeUnmount(() => {
   <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"
+      <div class="rounded-b-2xl shadow-2xl bg-hPrimary"
            :style="{
-            backgroundColor: brandingStore.colors.primary,
             boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)',
             }">
 
@@ -139,12 +138,11 @@ onBeforeUnmount(() => {
         <!-- Bouton Support -->
         <div
             v-show="brandingStore.value.acceptDonation"
-            class="z-20 shadow-2xl rounded-md text-white flex justify-center items-center z-50"
+            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,
           }"
-            :style="{ backgroundColor: brandingStore.colors.secondary }"
         >
           <donation-button-banner
               v-if="creator"
@@ -159,9 +157,8 @@ onBeforeUnmount(() => {
 
     <!-- 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"
+        class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center bg-hSecondary"
         :style="{
-        backgroundColor: brandingStore.colors.secondary,
         boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)',
       }"
     >

frontend/src/views/creators/CreatorHome.vue

@@ -1,18 +1,17 @@
 <template>
-  <div v-if="creatorProfileStore.creator?.id === brandingStore.value.id" class="flex justify-end space-x-2 mb-5 pa-1">
+
+  <div v-if="creatorProfileStore.creator?.id === brandingStore.value.id"
+       class="flex justify-end space-x-2 mb-5 pa-1">
 
     <!-- Bouton principal : Éditer ou Enregistrer -->
     <button
         v-if="isLoggedIn"
         @click="isEditMode ? saveChanges() : toggleEditMode()"
-        class="px-4 py-2 rounded-md hover:opacity-90"
-        :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
+        class="px-4 py-2 rounded-md hover:opacity-90 bg-hSecondary text-hOnSecondary"
     >
-      <v-icon>mdi-home-edit</v-icon>
+      {{ isEditMode ? 'Enregistrer' : 'Éditer la page' }}
     </button>
 
-
-
     <button
         v-if="isEditMode && isLoggedIn"
         @click="cancelEdit"
@@ -23,359 +22,282 @@
   </div>
 
   <!-- MainPage -->
-  <div v-if="!isEditMode" class=" flex flex-col" >
+  <div class="flex flex-col max-w-[650px] mx-auto px-6 bg-hBackground text-hOnBackground">
 
-    <div v-if=" mainTitle || mainImageUrl || mainImageText || videoSubtitleMain || videoUrlMain || mainVideoText || imagesSubtitle || image1Url || image2Url || image3Url || image4Url || imagesText || videoSubtitle || videoUrl || videoText" :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }" class="rounded-2xl py-4"  >
-    <!-- Main image -->
-    <div v-if="mainTitle || mainImageUrl || mainImageText " class="py-4" :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
-      <div v-if="mainTitle">
-        <h1 class="text-4xl font-bold text-center py-4 mb-4">{{ mainTitle }}</h1>
-      </div>
+    <h1 class="flex justify-start text-2xl font-bold text-center  mb-4">Qui sommes-nous</h1>
 
-      <div class="flex justify-center items-center">
-      <img
-          v-if="mainImageUrl"
-          :src="mainImageUrl"
-          alt="Image principale"
-          class=" max-w-full h-auto cursor-pointer flex center"
-          @click="openFullscreen(mainImageUrl)"/>
-      </div>
+    <div>
+      <!-- Main image  Bloc D'information-->
+      <div class="py-4" >
 
-      <p v-if="mainImageText" class="text-lg text-justify pa-6">
-        {{ mainImageText }}
-      </p>
-    </div>
+        <div v-if="!isEditMode">
+          <p  class="py-4 text-justify" v-if="mainImageText ">
+            {{ mainImageText }}
+          </p>
+        </div>
+        <v-textarea v-if="isEditMode" label="Description" variant="outlined" v-model="editableMainImageText"
+                    class="w-full p-2 py-6 "></v-textarea>
 
-    <!-- Main video -->
-    <div v-if="videoSubtitleMain || videoUrlMain || mainVideoText " :style="{ backgroundColor: brandingStore.colors.surface, color: brandingStore.colors.onSurface }">
-      <h2 v-if="videoSubtitleMain" class="text-3xl font-semibold text-center py-6">
-        {{ videoSubtitleMain }}
-      </h2>
+        <div class="flex flex-row items-center space-x-4">
+          <!--          image principale-->
+          <div v-if="!isEditMode" class="flex justify-center items-center w-1/2">
+            <img
+                v-if="mainImageUrl"
+                :src="mainImageUrl"
+                alt="Image principale"
+                class="max-w-full h-auto cursor-pointer"
+                @click="openFullscreen(mainImageUrl)" />
+          </div>
+          <div v-if="isEditMode" class="relative flex justify-center">
+            <label  >
+              <input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden"/>
+              <img :src="mainImageUrl || fallbackImage"
+                   alt="Image principale"
+                   class=" max-w-full h-auto cursor-pointer max-h-96"/>
+            </label>
+            <button v-if="isEditMode" @click="deleteImage('mainImageUrl')"
+                    class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
+              X
+            </button>
+          </div>
 
-      <div v-if="videoUrlMain" class="video-container">
-        <iframe
-            :src="videoUrlMain"
-            title="YouTube video player"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen
-            class="video-frame">
-        </iframe>
-      </div>
-      <p v-if="mainVideoText" class="text-lg text-justify pa-6 mb-4">
-        {{ mainVideoText }}
-      </p>
-    </div>
+          <div class="w-1/2 flex flex-col justify-center">
+            <h2 v-if="videoSubtitleMain" class="text-xl font-semibold text-center">
+              Pourquoi nous supporter
+            </h2>
 
-    <!-- Images  -->
-    <div v-if="imagesSubtitle || image1Url || image2Url || image3Url || image4Url || imagesText " :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
-      <div>
-        <h2 v-if="imagesSubtitle" class="text-xl font-semibold text-center mb-6">
-          {{ imagesSubtitle }}
-        </h2>
-      </div>
-
-      <!--        images-->
-      <div class="pa-2">
-        <FullscreenImage ref="fullscreenImage" :image-url="currentImage"/>
-        <div>
-          <!-- Affichage des images -->
-          <div class="flex flex-wrap gap-4">
-            <!-- Première image -->
-            <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" 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="!isEditMode">
+              <p v-if="mainVideoText" class="text-lg  text-justify mt-5 mb-4">
+                {{ mainVideoText }}
+              </p>
             </div>
 
-            <!-- Deuxième image -->
-            <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" 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="isEditMode">
+              <v-textarea
+                  label="Description"
+                  v-model="editableMainVideoText"
+                  class="p-2 rounded-md mt-4"
+                  variant="outlined"
+                  rows="10"
+              ></v-textarea>
             </div>
+          </div>
+        </div>
 
-            <!-- Troisième image -->
-            <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image3Url"
-                 @click="openFullscreen(image3Url)">
-              <img :src="image3Url" alt="Image 3" class="rounded-md max-w-full h-auto cursor-pointer"/>
-            </div>
+        <div >
+          <div v-if="!isEditMode" class="py-5 text-lg font-bold">
+            {{ videoSubtitle }}
+          </div>
+          <div v-if="isEditMode">
+            <v-text-field
+                label="Titre"
+                variant="outlined"
+                v-model="editableVideoSubtitle"
+                class="w-full p-2"
+            ></v-text-field>
+          </div>
 
-            <!-- Quatrième image -->
-            <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image4Url"
-                 @click="openFullscreen(image4Url)">
-              <img :src="image4Url" alt="Image 4" class="rounded-md max-w-full h-auto cursor-pointer"/>
-            </div>
+          <v-textarea v-if="isEditMode" rows="10" variant="outlined" v-model="editableImagesText" class="w-full p-2 border rounded-md"></v-textarea>
+
+          <div v-if="!isEditMode">
+            <p v-if="imagesText " class="text-lg text-justify">
+              {{ imagesText }}
+            </p>
           </div>
         </div>
       </div>
 
-      <div>
-        <p v-if="imagesText" class="text-lg text-justify pa-6">
-          {{ imagesText }}
-        </p>
-      </div>
-
-    </div>
-
-    <!--SecondVideo-->
-    <div v-if="videoSubtitle || videoUrl || videoText " :style="{ backgroundColor: brandingStore.colors.surface, color: brandingStore.colors.onSurface }">
-      <h2 v-if="videoSubtitle" class="text-xl font-semibold text-center py-6">
-        {{ videoSubtitle }}
-      </h2>
-
-      <div class="flex justify-center items-center h-full">
-        <iframe
-            v-if="videoUrl"
-            :src="videoUrl"
-            title="YouTube video player"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen
-            class="rounded-md"
-            style="width: 600px; height: 337px;"
-        ></iframe>
-      </div>
-
-      <p v-if="videoText" class="text-lg text-justify pa-6">
-        {{ videoText }}
-      </p>
-    </div>
-
-    <!-- Contact Info-->
-    <div v-if="editablePhoneNumber || editableEmail" class="mb-6" :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
-      <!--      mobile-->
-      <div v-if="smAndDown">
-        <div class="flex flex-col space-y-10 mt-12 justify-center items-center">
-          <!-- Affichage du téléphone -->
-          <div v-if="editablePhoneNumber" class="flex items-center space-x-2">
-            <i class="mdi mdi-phone-outline text-2xl"></i>
-            <span>{{ editablePhoneNumber }}</span>
-          </div>
-          <!-- Affichage de l'email -->
-          <div v-if="editableEmail" class="flex items-center space-x-2">
-            <i class="mdi mdi-email-outline text-2xl"></i>
-            <a
-                :href="`mailto:${editableEmail}`"
-                class="no-underline text-current"
-            >
-              {{ editableEmail }}
-            </a>
-          </div>
+      <!--      media-->
+      <div v-if="!isEditMode">
+        <div v-if="videoUrlMain" class="video-container">
+          <iframe
+              :src="videoUrlMain"
+              title="YouTube video player"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowfullscreen
+              class="video-frame">
+          </iframe>
         </div>
       </div>
 
-      <!--pc-->
-      <div v-if="!smAndDown">
-        <div class="flex space-x-64 space-y-4 mt-9 justify-center items-center">
-          <!-- Affichage du téléphone -->
-          <div v-if="editablePhoneNumber" class="flex items-center space-x-2">
-            <i class="mdi mdi-phone-outline text-2xl"></i>
-            <span>{{ editablePhoneNumber }}</span>
-          </div>
-          <!-- Affichage de l'email -->
-          <div v-if="editableEmail" class="flex items-center space-x-2">
-            <i class="mdi mdi-email-outline text-2xl"></i>
-            <a
-                :href="`mailto:${editableEmail}`"
-                class="no-underline text-current"
-            >
-              {{ editableEmail }}
-            </a>
-          </div>
-        </div>
-      </div>
-
-
-    </div>
-
-    </div>
-  </div>
-
-  <!--  Editmode-->
-  <div v-if="isEditMode" class="space-y-10">
-
-    <!--Main image-->
-    <div class="rounded-2xl"
-         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
-      <div v-if="isEditMode">
-        <div class="text-2xl pa-4">Image principale</div>
-        <v-text-field label="Titre" variant="outlined" v-model="editableMainTitle" class="w-full p-2"></v-text-field>
-      </div>
-
-      <div class="relative flex justify-center">
-        <label v-if="isEditMode">
-          <input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden"/>
-          <img :src="mainImageUrl || fallbackImage"
-               alt="Image principale"
-               class=" max-w-full h-auto cursor-pointer max-h-96"/>
-        </label>
-
-        <button v-if="isEditMode" @click="deleteImage('mainImageUrl')"
-                class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
-          X
-        </button>
-      </div>
-
-      <v-textarea label="Description" variant="outlined" v-model="editableMainImageText"
-                  class="w-full p-2 py-6 "></v-textarea>
-
-    </div>
-
-    <!--Main VideoUrl-->
-    <div class="rounded-2xl"
-         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary}">
-      <!--Titre Video-->
-      <div class="text-2xl pa-4">Vidéo Princpiale</div>
-      <v-text-field
-          label="Titre"
-          variant="outlined"
-          v-model="editableVideoSubtitleMain"
-          class="w-full p-2 border rounded-md"></v-text-field>
-
-      <!--urlvideo-->
-      <v-text-field
-          label="URL Video"
-          variant="outlined"
-          v-if="isEditMode"
-          type="text"
-          v-model="editableVideoUrlMain"
-          class="w-full p-2 rounded-md"
-
-      />
-
-
-      <!-- Texte sous video principale -->
-      <v-text-field
-          label="Description"
-          v-model="editableMainVideoText" class="w-full p-2  rounded-md h-24"
-          variant="outlined"
-      ></v-text-field>
-    </div>
-
-    <!--  4 images-->
-    <div class="rounded-2xl"
-         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary}">
-
       <div v-if="isEditMode">
-        <div class="text-2xl pa-4">Galerie d'images</div>
-        <v-text-field label="Titre" variant="outlined" v-model="editableImagesSubtitle" class="w-full p-2 rounded-md"></v-text-field>
+        <v-text-field
+            label="URL Video"
+            variant="outlined"
+            v-if="isEditMode"
+            type="text"
+            v-model="editableVideoUrlMain"
+            class="w-full p-2 rounded-md"
+        />
       </div>
 
-      <!--images-->
-      <div class=" text-2xl pa-2
-        ">Images
-      </div>
-      <div class="pa-2 grid grid-cols-1 gap-4 md:grid-cols-4">
-        <!-- Première image -->
-        <div class="relative">
-          <label>
-            <input type="file" @change="updateImage('image1Url', $event)" class="hidden"/>
-            <img :src="image1Url || fallbackImage"
-                 alt="Image 1"
-                 class="rounded-md max-w-full h-auto cursor-pointer"/>
-          </label>
-          <button @click="deleteImage('image1Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
-            X
-          </button>
-        </div>
+      <!-- Images  -->
 
-        <!-- Deuxième image -->
-        <div class="relative">
-          <label>
-            <input type="file" @change="updateImage('image2Url', $event)" class="hidden"/>
-            <img :src="image2Url || fallbackImage"
-                 alt="Image 2"
-                 class="rounded-md max-w-full h-auto cursor-pointer"/>
-          </label>
-          <button @click="deleteImage('image2Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
-            X
-          </button>
-        </div>
+      <div v-if="!isEditMode">
+        <div v-if="imagesSubtitle || image1Url || image2Url || image3Url || image4Url || imagesText " >
+          <!--        images-->
+          <div class="py-2">
+            <FullscreenImage ref="fullscreenImage" :image-url="currentImage"/>
+            <div>
+              <!-- 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>
 
-        <!-- Troisième image -->
-        <div class="relative">
-          <label>
-            <input type="file" @change="updateImage('image3Url', $event)" class="hidden"/>
-            <img :src="image3Url || fallbackImage"
-                 alt="Image 3"
-                 class="rounded-md max-w-full h-auto cursor-pointer"/>
-          </label>
-          <button @click="deleteImage('image3Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
-            X
-          </button>
-        </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>
 
-        <!-- Quatrième image -->
-        <div class="relative">
-          <label>
-            <input type="file" @change="updateImage('image4Url', $event)" class="hidden"/>
-            <img :src="image4Url || fallbackImage"
-                 alt="Image 4"
-                 class="rounded-md max-w-full h-auto cursor-pointer"/>
-          </label>
-          <button @click="deleteImage('image4Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
-            X
-          </button>
+                <!-- 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>
+
+                <!-- 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>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 
-      <!-- Description-->
-      <div class="text-2xl pa-2"> Description</div>
-      <v-textarea variant="outlined" v-model="editableImagesText" class="w-full p-2 border rounded-md"></v-textarea>
+      <div v-if="isEditMode" class="rounded-2xl">
+        <!--images-->
+        <div class=" text-2xl pa-2">Images</div>
+        <div class="pa-2 grid grid-cols-1 gap-4 md:grid-cols-4">
+          <!-- Première image -->
+          <div class="relative">
+            <label>
+              <input type="file" @change="updateImage('image1Url', $event)" class="hidden"/>
+              <img :src="image1Url || fallbackImage"
+                   alt="Image 1"
+                   class="rounded-md max-w-full h-auto cursor-pointer"/>
+            </label>
+            <button @click="deleteImage('image1Url')"
+                    class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
+              X
+            </button>
+          </div>
 
-    </div>
+          <!-- Deuxième image -->
+          <div class="relative">
+            <label>
+              <input type="file" @change="updateImage('image2Url', $event)" class="hidden"/>
+              <img :src="image2Url || fallbackImage"
+                   alt="Image 2"
+                   class="rounded-md max-w-full h-auto cursor-pointer"/>
+            </label>
+            <button @click="deleteImage('image2Url')"
+                    class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
+              X
+            </button>
+          </div>
 
-    <!-- Second Video -->
-    <div class="rounded-2xl"
-         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
-      <div class="text-2xl pa-4">Vidéo Secondaire</div>
+          <!-- Troisième image -->
+          <div class="relative">
+            <label>
+              <input type="file" @change="updateImage('image3Url', $event)" class="hidden"/>
+              <img :src="image3Url || fallbackImage"
+                   alt="Image 3"
+                   class="rounded-md max-w-full h-auto cursor-pointer"/>
+            </label>
+            <button @click="deleteImage('image3Url')"
+                    class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
+              X
+            </button>
+          </div>
 
-      <v-text-field
-          label="Titre"
-          variant="outlined"
-          v-model="editableVideoSubtitle"
-          class="w-full p-2"
-      ></v-text-field>
+          <!-- Quatrième image -->
+          <div class="relative">
+            <label>
+              <input type="file" @change="updateImage('image4Url', $event)" class="hidden"/>
+              <img :src="image4Url || fallbackImage"
+                   alt="Image 4"
+                   class="rounded-md max-w-full h-auto cursor-pointer"/>
+            </label>
+            <button @click="deleteImage('image4Url')"
+                    class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
+              X
+            </button>
+          </div>
+        </div>
 
-      <v-text-field
-          label="URL Vidéo"
-          variant="outlined"
-          v-if="isEditMode"
-          v-model="editableVideoUrl"
-          class="w-full p-2"
-      ></v-text-field>
+        <!-- Description-->
+        <div class="text-2xl pa-2"> Description</div>
+      </div>
 
-      <v-textarea
-          label="Description"
-          variant="outlined"
-          v-model="editableVideoText"
-          class="w-full p-2 py-6"
-      ></v-textarea>
-    </div>
+      <!--Edit-->
+      <div v-if="isEditMode">
+        <v-text-field
+            label="Numéro de Téléphone"
+            variant="outlined"
+            v-model="editablePhoneNumber"
+            class="w-full p-2"
+        ></v-text-field>
 
-    <!-- Informations de Contact -->
-    <div class="rounded-2xl"
-         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
-      <div class="text-2xl pa-4">Informations de Contact</div>
+        <v-text-field
+            label="Adresse Email"
+            variant="outlined"
+            v-model="editableEmail"
+            class="w-full p-2"
+        ></v-text-field>
+      </div>
 
-      <v-text-field
-          label="Numéro de Téléphone"
-          variant="outlined"
-          v-model="editablePhoneNumber"
-          class="w-full p-2"
-      ></v-text-field>
+      <!-- Contact Info-->
+      <div v-if="!isEditMode">
+        <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">
+              <!-- Affichage du téléphone -->
+              <div v-if="phoneNumber" class="flex items-center space-x-2">
+                <i class="mdi mdi-phone-outline text-2xl"></i>
+                <span>{{ phoneNumber }}</span>
+              </div>
+              <!-- Affichage de l'email -->
+              <div v-if="email" class="flex items-center space-x-2">
+                <i class="mdi mdi-email-outline text-2xl"></i>
+                <a
+                    :href="`mailto:${email}`"
+                    class="no-underline text-current"
+                >
+                  {{ email }}
+                </a>
+              </div>
+            </div>
+          </div>
+          <!--pc-->
+          <div v-if="!smAndDown">
+            <div class="flex space-x-4 space-y-4 mt-5 justify-center items-center w-full">
+              <!-- Affichage du téléphone -->
+              <div v-if="phoneNumber" class="flex items-center space-x-2 w-1/2 justify-start">
+                <i class="mdi mdi-phone-outline text-2xl"></i>
+                <span>{{ phoneNumber }}</span>
+              </div>
 
-      <v-text-field
-          label="Adresse Email"
-          variant="outlined"
-          v-model="editableEmail"
-          class="w-full p-2"
-      ></v-text-field>
+              <!-- Affichage de l'email -->
+              <div v-if="email" class="flex items-center space-x-2 w-1/2 justify-center">
+                <i class="mdi mdi-email-outline text-2xl"></i>
+                <a :href="`mailto:${email}`" class="no-underline text-current">
+                  {{ email }}
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 
-
 </template>
 
 <script setup>
@@ -388,8 +310,6 @@ import {watch} from "vue";
 import FullscreenImage from "@/views/creators/FullscreenImage.vue";
 
 const {smAndDown} = useDisplay();
-const isMobileView = ref(smAndDown.value);
-
 
 const creatorProfileStore = useCreatorProfileStore();
 const brandingStore = useBrandingStore();
@@ -399,25 +319,12 @@ const isLoading = ref(true);
 const isLoggedIn = true;
 const isEditMode = ref(false);
 
-
 const currentImage = ref("");
 const fullscreenImage = ref(null);
 
-function openFullscreen(imageUrl) {
-  currentImage.value = imageUrl;
-  fullscreenImage.value.open();
-}
-
-watch(smAndDown, (newVal) => {
-  isMobileView.value = newVal;
-});
-
-// Image de fallback pour l'éditeur
 const fallbackImage = "/medias/emptyimage.png";
 
 // Variables réactives pour les données
-const editablePhoneNumber = ref("");
-const editableEmail = ref("");
 const mainTitle = ref("");
 const mainImageUrl = ref("");
 const mainImageText = ref("");
@@ -431,26 +338,27 @@ const imagesText = ref("");
 const videoSubtitle = ref("");
 const videoSubtitleMain = ref("");
 const videoUrlMain = ref("");
-const videoUrl = ref("");
-const videoText = ref("");
 const phoneNumber = ref("");
 const email = ref("");
 
-
-const editableImages = ref([null, null, null, null]);
-
-
 // Editable fields
 const editableMainTitle = ref("");
 const editableMainImageText = ref("");
 const editableMainVideoText = ref("");
-const editableImagesSubtitle = ref("");
 const editableImagesText = ref("");
 const editableVideoSubtitle = ref("");
-const editableVideoSubtitleMain = ref("");
-const editableVideoText = ref("");
 const editableVideoUrlMain = ref("");
-const editableVideoUrl = ref("");
+const editablePhoneNumber = ref("");
+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() {
@@ -460,27 +368,19 @@ function toggleEditMode() {
     editableMainTitle.value = mainTitle.value;
     editableMainImageText.value = mainImageText.value;
     editableMainVideoText.value = mainVideoText.value;
-    editableImagesSubtitle.value = imagesSubtitle.value;
     editableImagesText.value = imagesText.value;
     editableVideoSubtitle.value = videoSubtitle.value;
-    editableVideoSubtitleMain.value = videoSubtitleMain.value;
-    editableVideoText.value = videoText.value;
     editableVideoUrlMain.value = videoUrlMain.value;
-    editableVideoUrl.value = videoUrl.value;
     editablePhoneNumber.value = phoneNumber.value;
     editableEmail.value = email.value;
   } else {
-    // Sauvegarder les modifications ou réinitialiser les URLs des images supprimées
+    // Sauvegarder les modifications
     mainTitle.value = editableMainTitle.value;
     mainImageText.value = editableMainImageText.value;
     mainVideoText.value = editableMainVideoText.value;
-    imagesSubtitle.value = editableImagesSubtitle.value;
     imagesText.value = editableImagesText.value;
     videoSubtitle.value = editableVideoSubtitle.value;
-    videoSubtitleMain.value = editableVideoSubtitleMain.value;
-    videoText.value = editableVideoText.value;
     videoUrlMain.value = editableVideoUrlMain.value;
-    videoUrl.value = editableVideoUrl.value;
     phoneNumber.value = editablePhoneNumber.value;
     email.value = editableEmail.value;
 
@@ -493,7 +393,6 @@ function toggleEditMode() {
   }
 }
 
-
 // Supprimer une image
 function deleteImage(field) {
   switch (field) {
@@ -515,12 +414,10 @@ function deleteImage(field) {
   }
 }
 
-
 // Mettre à jour une image
 function updateImage(field, event) {
   const file = event.target.files[0];
   if (file) {
-    // Stocker le fichier dans editableImages pour l'envoi
     switch (field) {
       case "mainImageUrl":
         editableImages.value[0] = file;
@@ -546,7 +443,6 @@ function updateImage(field, event) {
   }
 }
 
-
 // Charger les données au montage
 onMounted(() => {
   mainTitle.value = brandingStore.presentationInfos.title;
@@ -561,11 +457,7 @@ onMounted(() => {
   imagesText.value = brandingStore.presentationInfos.imagesText;
   videoSubtitle.value = brandingStore.presentationInfos.videoSubtitle;
   videoSubtitleMain.value = brandingStore.presentationInfos.videoSubtitleMain;
-  videoUrl.value = brandingStore.presentationInfos.videoUrl;
   videoUrlMain.value = brandingStore.presentationInfos.videoUrlMain;
-  videoText.value = brandingStore.presentationInfos.videoText;
-  editablePhoneNumber.value = brandingStore.presentationInfos.phoneNumber;
-  editableEmail.value = brandingStore.presentationInfos.email;
   phoneNumber.value = brandingStore.presentationInfos.phoneNumber;
   email.value = brandingStore.presentationInfos.email;
 });
@@ -584,13 +476,9 @@ async function saveChanges() {
   formData.append("Title", editableMainTitle.value || "");
   formData.append("MainImageText", editableMainImageText.value || "");
   formData.append("MainVideoText", editableMainVideoText.value || "");
-  formData.append("ImagesSubtitle", editableImagesSubtitle.value || "");
   formData.append("ImagesText", editableImagesText.value || "");
   formData.append("VideoSubtitle", editableVideoSubtitle.value || "");
-  formData.append("VideoSubtitleMain", editableVideoSubtitleMain.value || "");
   formData.append("VideoUrlMain", editableVideoUrlMain.value || "");
-  formData.append("VideoUrl", editableVideoUrl.value || "");
-  formData.append("VideoText", editableVideoText.value || "");
 
   // Ajout des URLs d'images supprimées
   formData.append("MainImageUrl", mainImageUrl.value || ""); // Peut contenir un string vide
@@ -607,10 +495,8 @@ async function saveChanges() {
   if (editableImages.value[4]) formData.append("Image4", editableImages.value[4]);
 
   try {
-    // Désactiver le bouton de sauvegarde pour éviter les clics multiples
     isLoading.value = true;
 
-    // Envoyer les données au backend
     const response = await client.post(
         `/api/creators/${creatorProfileStore.creator.id}/presentation-infos`,
         formData,
@@ -621,51 +507,37 @@ async function saveChanges() {
     mainTitle.value = editableMainTitle.value;
     mainImageText.value = editableMainImageText.value;
     mainVideoText.value = editableMainVideoText.value;
-    imagesSubtitle.value = editableImagesSubtitle.value;
     imagesText.value = editableImagesText.value;
     videoSubtitle.value = editableVideoSubtitle.value;
-    videoSubtitleMain.value = editableVideoSubtitleMain.value;
-    videoText.value = editableVideoText.value;
     videoUrlMain.value = editableVideoUrlMain.value;
-    videoUrl.value = editableVideoUrl.value;
     phoneNumber.value = editablePhoneNumber.value;
     email.value = editableEmail.value;
 
     console.log("Données sauvegardées :", response.data);
 
-    // Réinitialiser le mode édition
     isEditMode.value = false;
 
-    // Rafraîchir après une légère pause pour s'assurer des mises à jour visuelles
-
   } catch (error) {
     console.error("Erreur lors de la sauvegarde :", error);
   } finally {
-    // Réactiver les interactions
     isLoading.value = false;
   }
 }
 
-
 function cancelEdit() {
   // Restaurer les valeurs d'origine
   editableMainTitle.value = mainTitle.value;
   editableMainImageText.value = mainImageText.value;
   editableMainVideoText.value = mainVideoText.value;
-  editableImagesSubtitle.value = imagesSubtitle.value;
   editableImagesText.value = imagesText.value;
   editableVideoSubtitle.value = videoSubtitle.value;
-  editableVideoSubtitleMain.value = videoSubtitleMain.value;
-  editableVideoText.value = videoText.value;
   editableVideoUrlMain.value = videoUrlMain.value;
-  editableVideoUrl.value = videoUrl.value;
   editablePhoneNumber.value = phoneNumber.value;
   editableEmail.value = email.value;
 
   // Désactiver le mode édition
   isEditMode.value = false;
 }
-
 </script>
 
 <style scoped>
@@ -684,4 +556,4 @@ function cancelEdit() {
   border: 0;
   border-radius: 0.5rem; /* Pour les bords arrondis */
 }
-</style>
+</style>

frontend/src/views/creators/CreatorLogo.vue

@@ -6,14 +6,13 @@
   >
 
     <img
-        class="shadow-2xl rounded-full border-solid border-102 max-w-[190px]"
+        class="shadow-2xl rounded-full border-solid border-hSecondary border-102 max-w-[190px]"
         :src="brandingStore.value.images.logo
             ? brandingStore.value.images.logo
             : '/images/placeholders/logo.png'"
         alt="Profile Picture"
         :style="{
-            borderColor: brandingStore.colors.secondary,
-            height: '190px',
+            height: '190px'
         }"
     />
 

frontend/src/views/creators/DonationButton.vue

@@ -1,12 +1,12 @@
 <template> 
-  <v-btn class="hover:scale-125" variant="text" icon @click="openDonationDialog()">
+  <v-btn class="hover:scale-125" variant="text" @click="openDonationDialog()">
     <v-icon :class="['text-2xl', iconColorClass]">mdi-gift-outline</v-icon>
   </v-btn>
 
 
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>
-      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.colors.primary}` }">
+      <v-card class="text-center rounded-xl border-2 border-solid border-hPrimary">
         <div class="py-4 text-2xl font-bold border-b mb-2">
           Je Soutiens!
         </div>
@@ -15,12 +15,11 @@
           <img
               :src="brandingStore.value.images.logo"
               alt="Profile Image"
-              class="rounded-full"
+              class="rounded-full border-2 border-solid border-hSecondary"
               width="40"
-              height="40"
-              :style="{ border: `2px solid ${brandingStore.colors.secondary}` }">
+              height="40">
           <div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
-          <v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
+          <v-btn @click="closeDonationDialog()" class="ml-auto" variant="text">
             <v-icon>mdi-close</v-icon>
           </v-btn>
         </div>
@@ -51,8 +50,8 @@
           ></v-textarea>
 
           <v-btn variant="outlined"
-                 :style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
-                 @click="goPay()" class="w-full mt-5">
+                 @click="goPay()"
+                 class="w-full mt-5 border-hPrimary">
             Envoyez
           </v-btn>
         </v-card-text>

frontend/src/views/creators/DonationButtonBanner.vue

@@ -11,8 +11,7 @@
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>
       <v-card
-        class="text-center rounded-xl"
-        :style="{ border: `3px solid ${brandingStore.colors.primary}` }"
+        class="text-center rounded-xl border-2 border-solid border-hPrimary"
       >
         <div class="py-4 text-2xl font-bold border-b mb-2"> {{ $t('isupportbtn.isupport') }}</div>
 
@@ -20,16 +19,14 @@
           <img
             :src="brandingStore.value.images.logo"
             alt="Profile Image"
-            class="rounded-full"
+            class="rounded-full border-2 border-solid border-hSecondary"
             width="40"
             height="40"
-            :style="{ border: `2px solid ${brandingStore.colors.secondary}` }"
           />
           <div class="capitalize px-2 text-2xl">
             {{ brandingStore.value.name }}
           </div>
           <v-btn
-            icon
             @click="closeDonationDialog()"
             class="ml-auto"
             variant="text"
@@ -68,13 +65,8 @@
 
           <v-btn
             variant="outlined"
-            :style="{
-              borderColor: brandingStore.colors.primary,
-              color: brandingStore.colors.primary,
-              backgroundColor: brandingStore.colors.secondary,
-            }"
             @click="goPay()"
-            class="w-full mt-5"
+            class="w-full mt-5 border-hPrimary bg-hSecondary text-hOnPrimary"
           >
             {{ $t('isupportbtn.send') }}
           </v-btn>
@@ -193,10 +185,6 @@ function preventNonNumeric(event) {
 </script>
 
 <style>
-.full-height {
-  height: 100%;
-}
-
 .error-message {
   color: white;
   background-color: red;

frontend/src/views/creators/ExclusiveContentCard.vue

@@ -19,18 +19,16 @@ function hexToRgb(hex) {
   <div class="flex items-center justify-center">
     <!-- ExclusiveCard -->
     <div
-        class="rounded-lg w-[290px] h-[380px] relative"
+        class="rounded-lg w-[290px] h-[380px] relative bg-hSurface"
         :style="{
-        backgroundColor: branding.colors.surface,
         boxShadow: '0 10px 10px rgba(0, 0, 0, 0.3)',
-        borderColor: `rgba(${hexToRgb(branding.colors.secondary)}, 0.4)`,
+        borderColor: `rgba(${hexToRgb('--h-secondary')}, 0.4)`,
         borderWidth: '1px',
       }"
     >
       <!-- Conteneur pour aligner le titre et le bouton -->
       <div
-          class="flex items-center justify-between py-2 px-3"
-          :style="{ color: branding.colors.onPrimary }"
+          class="flex items-center justify-between py-2 px-3 text-hOnPrimary"
       >
         <div class="text-md">Comment créer un logo</div>
 
@@ -39,18 +37,12 @@ function hexToRgb(hex) {
           <template #activator="{ props }">
             <button
                 v-bind="props"
-                class="text-gray-600"
-                :style="{ color: branding.colors.onPrimary }"
+                class="text-gray-600 text-hOnPrimary"
             >
               <i class="mdi mdi-dots-vertical text-lg"></i>
             </button>
           </template>
-          <v-list
-              :style="{
-              backgroundColor: branding.colors.secondary,
-              color: branding.colors.onSecondary,
-            }"
-          >
+          <v-list class="bg-hSecondary text-hOnSecondary">
             <v-list-item title="Modifier" @click="modifier" />
             <v-list-item title="Effacer" @click="effacer" />
             <v-list-item title="Reporter" @click="reporter" />
@@ -65,21 +57,16 @@ function hexToRgb(hex) {
             alt="image"
         />
         <div class="absolute inset-0 flex items-center justify-center">
-          <i
-              class="mdi mdi-lock text-7xl p-2 rounded-full"
-              :style="{
-              color: branding.colors.secondary,
-              border: `2px solid ${branding.colors.secondary}`,
-            }"
+          <i class="mdi mdi-lock text-7xl p-2 rounded-full text-hSecondary border-2 border-solid border-hSecondary"
           ></i>
         </div>
       </div>
 
-      <div class="text-end pa-2 px-4" :style="{ color: branding.colors.onPrimary }">
+      <div class="text-end pa-2 px-4 text-hOnPrimary">
         14-05-2024
       </div>
 
-      <div class="text-justify px-4 text-md" :style="{ color: branding.colors.onPrimary }">
+      <div class="text-justify px-4 text-md text-hOnPrimary">
         Tutoriel sur comment s'assurer d'avoir un logo unique et percutant
         qui se démarque de la concurrence.
       </div>

frontend/src/views/creators/ExclusiveContentContainer.vue

@@ -6,15 +6,11 @@
         <!-- Grille avec colonnes dynamiques basées sur la largeur -->
         <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 min-w-[250px]">
           <div v-for="(item, index) in contenuexclusif" :key="index"
-               class="my-1 text-white rounded-lg w-full border-2 shadow h-[380px] hover-card relative overflow-hidden"
-               :style="{ 
-                 background: creator.colors.bannerTop, 
-                 borderColor: `rgba(${getRGB(creator.colors.bannerBottom)}, 0.38)` 
-               }">
+               class="my-1 text-white rounded-lg w-full border-2 shadow h-[380px] hover-card relative overflow-hidden bg-hPrimary text-hOnPrimary border-hSecondary">
             <div class="flex justify-center items-center">            
             </div>
             <div>
-              <img :src="item.photo" class="w-full h-auto max-h-[170px] object-cover" />
+              <img :src="item.photo" alt="photo" class="w-full h-auto max-h-[170px] object-cover" />
 
               <!-- Section du nombre de clics et du bouton d'édition -->
               <div class="flex flex-row justify-between items-center p-2">
@@ -24,7 +20,7 @@
                   <p class="text-xs">200 clicks</p>
                 </div>
                 <!-- Bouton pour éditer le contenu à droite -->
-                <v-btn class="" icon variant="plain" @click="editCard(item)">
+                <v-btn class="" variant="plain" @click="editCard(item)">
                   <v-icon>mdi-dots-vertical</v-icon>
                 </v-btn>
               </div>
@@ -160,17 +156,10 @@ window.addEventListener('resize', () => {
   transform: scale(1.03); /* Effet de hover restauré */
 }
 
-.stars .v-icon {
+.stars {
   font-size: 18px; /* Ajustez la taille des icônes */
 }
 
-.limited-text {
-  height: 60px; /* Limite la hauteur du texte */
-  overflow: hidden; /* Empêche le texte de dépasser */
-  text-overflow: ellipsis; /* Ajoute des points de suspension si le texte dépasse */
-  white-space: nowrap; /* Le texte reste sur une seule ligne */
-}
-
 .stars {
   position: absolute; /* Fixe les étoiles au bas à droite */
   bottom: 10px;

frontend/src/views/creators/FullscreenImage.vue

@@ -1,10 +1,8 @@
 <template>
   <v-dialog v-model="isVisible" fullscreen hide-overlay transition="fade-transition">
-    <v-card class="pa-0" :style="{ backgroundColor: brandingStore.colors.background, color: brandingStore.colors.onBackground }">
+    <v-card class="pa-0 bg-hBackground text-hOnBackground">
       <v-btn
-          class="close-button"
-          icon
-          :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
+          class="close-button bg-hSecondary text-hOnSecondary"
           @click="close"
       >
         <v-icon>mdi-close</v-icon>

frontend/src/views/creators/NameTitle.vue

@@ -13,15 +13,14 @@
         <icon-account-verified></icon-account-verified>
       </div>
 
-      <div class="flex flex-col"
-           :style="{ color: brandingStore.colors.onPrimary }">
-      <span class="capitalize text-3xl">
-        {{ brandingStore.value.name }}
-      </span>
+      <div class="flex flex-col text-hOnPrimary">
+        <span class="capitalize text-3xl">
+          {{ brandingStore.value.name }}
+        </span>
 
-        <span class="capitalize text-lg">
-        {{ brandingStore.value.title }}
-      </span>
+          <span class="capitalize text-lg">
+          {{ brandingStore.value.title }}
+        </span>
       </div>
 
       <!-- Tint Effect -->

frontend/src/views/creators/SubscribeButton.vue

@@ -31,7 +31,7 @@ function unsubscribeFromCreator() {
         :style="{ 
           width: '150px',
           height: '28px',
-          backgroundColor: brandingStore.colors.secondary, 
+          backgroundColor: '--h-secondary',
           color: 'white', 
           borderRadius: '8px',
           padding: '10px 24px',
@@ -51,7 +51,7 @@ function unsubscribeFromCreator() {
         :style="{ 
           width: '150px',
           height: '28px',
-          backgroundColor: brandingStore.colors.secondary, 
+          backgroundColor: '--h-secondary',
           color: 'white', 
           borderRadius: '0 8px 8px 0',
           padding: '10px 24px',
@@ -67,8 +67,7 @@ function unsubscribeFromCreator() {
   </template>
 
   <v-dialog v-model="showUnsubscribeModal" max-width="500">
-    <v-card class="text-center rounded-xl"
-            :style="{ border: `3px solid ${brandingStore.colors.secondary}` }">
+    <v-card class="text-center rounded-xl border-2 border-solid border-hSecondary">
 
       <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
         <div class="flex-1 text-center">
@@ -84,11 +83,10 @@ function unsubscribeFromCreator() {
                @click="unsubscribeFromCreator">Oui
         </v-btn>
 
-        <v-btn class="flex-grow-1"
-               :style="{ borderColor: brandingStore.colors.secondary, color: brandingStore.colors.secondary }"
+        <v-btn class="flex-grow-1 border-hSecondary text-hOnSecondary"
                variant="outlined"
                @click="showUnsubscribeModal = false">
-          <div :style="{ color: brandingStore.colors.secondary }">Non</div>
+          Non
         </v-btn>
       </v-card-actions>
     </v-card>

frontend/src/views/creators/SubscriptionMenu.vue

@@ -2,9 +2,8 @@
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import {ref, onMounted} from 'vue';
 import {useClient} from "@/plugins/api.js";
-import {useRoute, useRouter} from "vue-router";
+import {useRoute} from "vue-router";
 
-const router = useRouter()
 const brandingStore = useBrandingStore();
 
 const tiers = ref([]);
@@ -23,14 +22,6 @@ onMounted(() => {
   fetchTiers();
 });
 
-// Colors
-
-const onPrimary = {color: brandingStore.colors.onPrimary}
-const Primary = {backgroundColor: brandingStore.colors.primary}
-
-const onSecondaryColor = {color: brandingStore.colors.onSecondary}
-const secondaryColor = {backgroundColor: brandingStore.colors.secondary}
-
 const route = useRoute()
 const baseUrl = window.location.origin;
 const creatorSlug = route.params.creator_slug || route.path.split('/')[1];
@@ -48,7 +39,7 @@ async function doSubscribe(tier) {
           checkoutSuccessUrl: successUrl, // TODO: ensure the success-url will insert subscription
           checkoutCancelledUrl: cancelledUrl
         })
-    
+
     window.location.href = response.data.stripeCheckoutUrl;
   } catch (error) {
     console.error("Error loading subscriptions:", error);
@@ -88,12 +79,4 @@ async function doSubscribe(tier) {
 </template>
 
 <style scoped>
-.v-card {
-  border-radius: 12px;
-}
-
-.dotted-border {
-  border: 2px dotted;
-  padding: 1px;
-}
 </style>

frontend/src/views/main/Footer.vue

@@ -2,59 +2,66 @@
 import XIcon from '@/assets/icons/x.svg'
 import FacebookIcon from '@/assets/icons/facebook.svg'
 import InstagramIcon from '@/assets/icons/instagram.svg'
-import {useBrandingStore} from "@/stores/brandingStore.js";
-const brandingStore = useBrandingStore()
 </script>
 
 <template>
 
-  <footer class="py-8 flex flex-col gap-8" :style="{color: brandingStore.colors.onBackground}">
-
-    <div class="centered-text text-2xl font-bold flex justify-center items-center ml-28 lg:tracking-[125px] md:tracking-[50px] sm:tracking-[20px]">Hutopy</div>
+  <footer class="py-8 flex flex-col gap-8 bg-hBackground">
 
+    <div
+        class="text-hOnBackground centered-text text-2xl font-bold flex justify-center items-center ml-28 lg:tracking-[125px] md:tracking-[50px] sm:tracking-[20px]">
+      Hutopy
+    </div>
 
     <div class="flex flex-row justify-center gap-10">
       <a href="https://www.facebook.com/profile.php?id=61556819217561">
-        <facebook-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }" ></facebook-icon>
+        <facebook-icon class="icon"></facebook-icon>
       </a>
 
       <a href="https://www.instagram.com/hutopy.inc/">
-        <instagram-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }"></instagram-icon>
+        <instagram-icon class="icon"></instagram-icon>
       </a>
 
       <a href="https://x.com/Hutopyinc/">
-        <x-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }"></x-icon>
+        <x-icon class="icon"></x-icon>
       </a>
     </div>
 
-    <div class="flex flex-row flex-wrap justify-center gap-4 px-4 "  >
-      <router-link to="/documents/helpandcontact"  :style="{color: brandingStore.colors.onBackground}">
+    <div class="flex flex-row flex-wrap justify-center gap-4 px-4">
+      <router-link to="/documents/helpandcontact"
+                   class="link">
         {{ $t('footer.helpandcontact') }}
       </router-link>
-      <router-link to="/documents/faq"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="/documents/faq"
+                   class="link">
         {{ $t('footer.faq') }}
       </router-link>
-      <router-link to="/documents/guideforcreators"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="/documents/guideforcreators"
+                   class="link">
         {{ $t('footer.creatorguide') }}
       </router-link>
-      <router-link to="/documents/termsandconditions"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="/documents/termsandconditions"
+                   class="link">
         {{ $t('footer.termsandconditions') }}
       </router-link>
-      <router-link to="/documents/contentpolicy"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="/documents/contentpolicy"
+                   class="link">
         {{ $t('footer.contentpolicy') }}
       </router-link>
-      <router-link to="/documents/about"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="/documents/about"
+                   class="link">
         {{ $t('footer.about') }}
       </router-link>
-      <router-link to="/documents/pricing"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="/documents/pricing"
+                   class="link">
         {{ $t('footer.pricing') }}
       </router-link>
     </div>
 
-    <div class="flex justify-center base-text mb-13"  :style="{color: brandingStore.colors.onBackground}">
+    <div class="flex justify-center base-text mb-13 link">
       Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
     </div>
- 
+
   </footer>
 
 </template>
@@ -62,12 +69,16 @@ const brandingStore = useBrandingStore()
 <style scoped>
 
 .icon {
-  width: 30px;
-  height: 30px;
+  @apply fill-current w-8 h-8;
+  fill: var(--h-on-background);
+}
+
+.link {
+  @apply text-hOnBackground;
 }
 
 .base-text {
-  @apply text-gray-600 tracking-widest font-sans text-sm uppercase
+  @apply text-hOnBackground tracking-widest font-sans text-sm uppercase
 }
 
 a {

frontend/src/views/main/SideBar.vue

@@ -31,106 +31,68 @@ const authStore = useAuthStore();
 function toggleLanguage() {
   locale.value = locale.value === 'fr' ? 'en' : 'fr';
 }
-
 </script>
 
 <template>
-  <nav class="fixed flex flex-col h-full bg-white border-r border-gray-300 max-w-64 px-4">
-
-    <!-- LOGO HUTOPY -->
+  <nav class="fixed flex flex-col h-full bg-hBackground border-r border-hOnBackground max-w-64 px-4">
     <div class="mt-4 px-4">
       <router-link to="/@hutopy">
-        <img src="/medias/hutopy.png"
-             alt="hutopy logo"
-             width="300"
-             height="64">
+        <img src="/medias/hutopy.png" alt="hutopy logo" width="300" height="64">
       </router-link>
     </div>
 
-    <div
-        class="border-b border-gray-300 my-4 mx-auto w-48"
-    ></div>
+    <div class="border-b border-gray-300 my-4 mx-auto w-48"></div>
 
     <div class="flex-grow"></div>
 
-    <!-- SECTION UTILISATEUR -->
     <div class="px-4">
-
       <div class="flex items-center justify-start p-2 mb-4">
-        <img
-            :src="userProfileStore.portraitUrl"
-            alt="Profile Image"
-            referrerpolicy="no-referrer"
-            class="rounded-full"
-            width="42"
-            height="42"
-            style="max-height: 42px;">
-        <span class="ml-2 text-sm font-sans capitalize">
-          {{ userProfileStore.alias }}
-        </span>
+        <img :src="userProfileStore.portraitUrl" alt="Profile Image" referrerpolicy="no-referrer" class="rounded-full"
+             width="42" height="42" style="max-height: 42px;">
+        <span class="ml-2 text-lg font-sans capitalize text-hOnBackground">{{ userProfileStore.alias }}</span>
       </div>
 
       <div class="flex flex-col gap-4 mb-4">
-
         <div v-if="authStore.isAuthenticated">
-
-          <v-btn v-if="creatorProfileStore.hasCreator"
-                 :to="`/@${creatorProfileStore.creator.name}`"
-                 class="w-full justify-start"
-                 prepend-icon="mdi-file-account-outline"
-                 variant="flat">
-            {{ t.myPage }}
-          </v-btn>
-
-          <v-btn v-else
-                 to="/create-creator"
-                 variant="flat"
-                 class="w-full justify-start"
-                 prepend-icon="mdi-file-account-outline">
-            {{ t.myPage }}
-          </v-btn>
-
+          <router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
+            <button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded">
+              <i class="mdi mdi-file-account-outline"></i> {{ t.myPage }}
+            </button>
+          </router-link>
+          <router-link v-else to="/create-creator">
+            <button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded">
+              <i class="mdi mdi-file-account-outline"></i> {{ t.myPage }}
+            </button>
+          </router-link>
         </div>
 
         <div v-if="authStore.isAuthenticated">
-          <v-btn to="/profile"
-                 class="w-full justify-start"
-                 prepend-icon="mdi-account"
-                 variant="flat">
-            {{ t.myProfile }}
-          </v-btn>
+          <router-link to="/profile">
+            <button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded">
+              <i class="mdi mdi-account"></i> {{ t.myProfile }}
+            </button>
+          </router-link>
         </div>
 
-        <v-btn variant="flat"
-               class="w-full justify-start"
-               prepend-icon="mdi-translate-variant"
-               @click="toggleLanguage">
-          {{ locale }}
-        </v-btn>
+        <button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded"
+                @click="toggleLanguage">
+          <i class="mdi mdi-translate-variant"></i> {{ locale }}
+        </button>
 
         <div v-if="!authStore.isAuthenticated">
-          <v-btn to="/login"
-                 variant="flat"
-                 class="justify-start"
-                 prepend-icon="mdi-login">
-            {{ t.signIn }}
-          </v-btn>
+          <router-link to="/login">
+            <button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded">
+              <i class="mdi mdi-login"></i> {{ t.signIn }}
+            </button>
+          </router-link>
         </div>
         <div v-else>
-          <v-btn @click="authStore.logout"
-                 variant="flat"
-                 class="justify-start"
-                 prepend-icon="mdi-logout">
-            {{ t.signOut }}
-          </v-btn>
+          <button @click="authStore.logout"
+                  class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded">
+            <i class="mdi mdi-logout"></i> {{ t.signOut }}
+          </button>
         </div>
-
       </div>
     </div>
-
   </nav>
-
 </template>
-
-
-

frontend/src/views/profile/CreatorPage.vue

@@ -3,8 +3,7 @@ import XIcon from '@/assets/icons/x.svg';
 import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
 import ChangeStripeID from '@/views/profile/creators/ChangeStripeID.vue';
 import ChangeTitle from '@/views/profile/creators/ChangeTitle.vue';
-import {computed, ref} from 'vue';
-import ColorsPicker from './creators/ColorsPicker.vue';
+import {ref} from 'vue';
 import LogoPicker from '../creators/CreatorLogoEditor.vue';
 import Socials from './creators/Socials.vue';
 
@@ -16,7 +15,6 @@ const currentComponent = ref('');
 const componentsMap = {
   LogoPicker,
   Socials,
-  ColorsPicker,
   ChangeTitle,
   ChangeStripeID,
 };
@@ -55,7 +53,7 @@ const closeDialog = () => {
   </v-dialog>
 
   <!--  Lorsque l'utilisateur n'a pas de creator name-->
-  <v-card rounded="xl" class="w-full">>
+  <v-card rounded="xl" class="w-full">
     <h1 class="uppercase">
       {{ $t('creatorinfopage.informations') }}
     </h1>
@@ -89,7 +87,7 @@ const closeDialog = () => {
             <span class="flex-none pa-2 min-w-32 text-left">{{
                 $t('creatorinfopage.title')
               }}</span>
-        <span class="flex-auto text-left pr-6 capitalize">{{
+        <span class="flex-auto text-left pr-6 capitalize">`{{
             creatorProfileStore.creator.title
           }}</span>
         <span class="flex-none">
@@ -119,26 +117,6 @@ const closeDialog = () => {
 
   </v-card>
 
-  <v-card rounded="xl" class="w-full">
-    <div class="py-5 uppercase ml-4">
-      {{ $t('creatorinfopage.banner&profile') }}
-    </div>
-
-    <div class="flex flex-col w-full">
-      <button
-          @click="openDialog('ColorsPicker')"
-          class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
-      >
-            <span class="flex-auto text-left pr-6 capitalize">
-              Choisissez votre palette de couleurs.
-            </span>
-        <span class="flex-none">
-              <v-icon>mdi-chevron-right</v-icon>
-            </span>
-      </button>
-    </div>
-  </v-card>
-
   <v-card rounded="xl" class="w-full">
     <div class="uppercase">
       {{ $t('creatorinfopage.socialnetwork') }}
@@ -276,8 +254,4 @@ const closeDialog = () => {
   @apply bg-[#A6147D] text-white;
   @apply hover:opacity-90;
 }
-
-.custom-border {
-  border: 3px solid;
-}
 </style>

frontend/src/views/profile/ProfilePage.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="bg-red flex flex-col gap-8 p-8">
+  <div class="flex flex-col gap-8 p-8">
     <account-page></account-page>
     <creator-page></creator-page>
   </div>

frontend/src/views/profile/creators/ColorsPicker.vue

@@ -1,250 +0,0 @@
-<script setup>
-import {ref, computed} from 'vue';
-import {useClient} from "@/plugins/api.js";
-
-const props = defineProps({
-  creator: {
-    required: true
-  }
-});
-
-const emits = defineEmits(['closeRequested']);
-
-const primaryColor = ref(props.creator.colors.primary)
-const secondaryColor = ref(props.creator.colors.secondary)
-const backgroundColor = ref(props.creator.colors.background)
-const errorColor = ref(props.creator.colors.error)
-const surfaceColor = ref(props.creator.colors.surface)
-const onPrimaryColor = ref(props.creator.colors.onPrimary)
-const onSecondaryColor = ref(props.creator.colors.onSecondary)
-const onBackgroundColor = ref(props.creator.colors.onBackground)
-const onErrorColor = ref(props.creator.colors.onError)
-const onSurfaceColor = ref(props.creator.colors.onSurface)
-
-const selectedColorName = ref('primary');
-const selectedBackgroundColor = computed({
-  get() {
-    switch (selectedColorName.value) {
-      case 'primary':
-        return primaryColor.value
-      case 'secondary':
-        return secondaryColor.value
-      case 'background':
-        return backgroundColor.value
-      case 'error':
-        return errorColor.value
-      case 'surface':
-        return surfaceColor.value
-      default:
-        return '#e42aad';
-    }
-  },
-  set(value) {
-    switch (selectedColorName.value) {
-      case 'primary':
-        primaryColor.value = value
-        break
-      case 'secondary':
-        secondaryColor.value = value
-        break
-      case 'background':
-        backgroundColor.value = value
-        break
-      case 'error':
-        errorColor.value = value
-        break
-      case 'surface':
-        surfaceColor.value = value
-        break      
-    }
-  }
-})
-const selectedTextColor = computed({
-  get() {
-    switch (selectedColorName.value) {
-      case 'primary':
-        return onPrimaryColor.value
-      case 'secondary':
-        return onSecondaryColor.value
-      case 'background':
-        return onBackgroundColor.value
-      case 'error':
-        return onErrorColor.value
-      case 'surface':
-        return onSurfaceColor.value
-      default:
-        return '#e42aad';
-    }
-  },
-  set(value) {
-    switch (selectedColorName.value) {
-      case 'primary':
-        onPrimaryColor.value = value
-        break
-      case 'secondary':
-        onSecondaryColor.value = value
-        break
-      case 'background':
-        onBackgroundColor.value = value
-        break
-      case 'error':
-        onErrorColor.value = value
-        break
-      case 'surface':
-        onSurfaceColor.value = value
-        break
-    }
-  }
-})
-
-
-const selectColor = (colorName) => {
-  selectedColorName.value = colorName;
-};
-
-const client = useClient();
-const save = async () => {
-  try {
-    await client.post(
-        `/api/creators/${props.creator.id}/colors`,
-        {
-          'primary': primaryColor.value,
-          'secondary': secondaryColor.value,
-          'background': backgroundColor.value,
-          'error': errorColor.value,
-          'surface': surfaceColor.value,
-          'onPrimary': onPrimaryColor.value,
-          'onSecondary': onSecondaryColor.value,
-          'onBackground': onBackgroundColor.value,
-          'onError': onErrorColor.value,
-          'onSurface': onSurfaceColor.value,
-        });
-
-    props.creator.colors.primary = primaryColor.value
-    props.creator.colors.secondary = secondaryColor.value
-    props.creator.colors.background = backgroundColor.value
-    props.creator.colors.error = errorColor.value
-    props.creator.colors.surface = surfaceColor.value
-    props.creator.colors.onPrimary = onPrimaryColor.value
-    props.creator.colors.onSecondary = onSecondaryColor.value
-    props.creator.colors.onBackground = onBackgroundColor.value
-    props.creator.colors.onError = onErrorColor.value
-    props.creator.colors.onSurface = onSurfaceColor.value
-
-    emits('closeRequested');
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-const cancel = () => {
-  emits('closeRequested');
-};
-</script>
-
-<template>
-  <h2 class="text-2xl font-semibold mb-4 flex justify-center">
-    Palette de Couleurs
-  </h2>
-
-  <div class="flex flex-column gap-6 justify-center items-start mt-5">
-
-    <div class="grid grid-cols-5 grid-rows-1 gap-4">
-      <div
-          class="color-square"
-          :class="{ selected: selectedColorName === 'primary' }"
-          :style="{ backgroundColor: primaryColor }"
-          @click="selectColor('primary')"
-      >
-        <span class="color-name"
-              :style="{ color: onPrimaryColor }">
-          Primary
-        </span>
-      </div>
-
-      <div
-          class="color-square"
-          :class="{ selected: selectedColorName === 'secondary' }"
-          :style="{ backgroundColor: secondaryColor }"
-          @click="selectColor('secondary')"
-      >
-        <span class="color-name"
-              :style="{ color: onSecondaryColor }">
-          Secondary
-        </span>
-      </div>
-
-      <div
-          class="color-square"
-          :class="{ selected: selectedColorName === 'surface' }"
-          :style="{ backgroundColor: surfaceColor }"
-          @click="selectColor('surface')"
-      >
-        <span class="color-name"
-              :style="{ color: onSurfaceColor }">
-          Surface
-        </span>
-      </div>
-
-      <div
-          class="color-square"
-          :class="{ selected: selectedColorName === 'background' }"
-          :style="{ backgroundColor: backgroundColor }"
-          @click="selectColor('background')"
-      >
-        <span class="color-name"
-              :style="{ color: onBackgroundColor }">
-          Background
-        </span>
-      </div>
-
-      <div
-          class="color-square"
-          :class="{ selected: selectedColorName === 'error' }"
-          :style="{ backgroundColor: errorColor }"
-          @click="selectColor('error')"
-      >
-        <span class="color-name"
-              :style="{ color: onErrorColor }"
-        >
-          Error
-        </span>
-      </div>
-    </div>
-
-    <div class="flex row justify-center space-x-12 mx-auto">
-      <div class="flex flex-col items-center">
-        <span class="mb-2 font-weight-bold">Text</span>
-        <v-color-picker v-model="selectedTextColor"></v-color-picker>
-      </div>
-
-      <div class="flex flex-col items-center">
-        <span class="mb-2 font-weight-bold">Background</span>
-        <v-color-picker v-model="selectedBackgroundColor"></v-color-picker>
-      </div>
-    </div>
-
-  </div>
-
-  <div class="flex justify-end space-x-4 mt-4">
-    <v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
-    <v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
-  </div>
-</template>
-
-<style scoped>
-.color-square {
-  @apply w-[150px] h-[150px];
-  @apply flex rounded-md cursor-pointer relative;
-  @apply items-center justify-center;
-  @apply font-bold text-2xl;
-}
-
-.color-square.selected {
-  @apply border-4 border-solid border-[crimson];
-}
-
-.color-name {
-  text-align: center;
-}
-</style>

frontend/src/views/svg/HutopySvg.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container>
     <div>
-      <svg width="45" height="45"   viewBox="0 0 540 540"  :style="{ color: branding.colors.onPrimary }">
+      <svg width="45" height="45" viewBox="0 0 540 540" class="fill-hOnPrimary">
         <path fill="currentColor" d="M0 0 C2.69849689 0.0031451 5.39587704 -0.02033719 8.09423828 -0.0456543 C24.64095924 -0.10755047 40.6877731 1.83145667 56.59814453 6.50317383 C57.64365479 6.80505615 58.68916504 7.10693848 59.76635742 7.41796875 C92.79656028 17.21576522 120.14877162 34.84217931 145.09814453 58.31567383 C145.80712891 58.97051758 146.51611328 59.62536133 147.24658203 60.30004883 C156.43027452 69.07141226 164.10800524 79.75645166 171.09814453 90.31567383 C171.99726562 91.64985352 171.99726562 91.64985352 172.91455078 93.01098633 C202.24624509 138.40104257 210.21713133 193.46657021 199.45556641 245.92919922 C192.90962056 275.68852135 179.08829353 305.20779517 159.09814453 328.31567383 C158.12705075 329.46844293 157.15708766 330.62216508 156.18798828 331.77661133 C145.74534244 344.15953661 145.74534244 344.15953661 140.09814453 349.31567383 C139.43814453 349.31567383 138.77814453 349.31567383 138.09814453 349.31567383 C138.09814453 349.97567383 138.09814453 350.63567383 138.09814453 351.31567383 C125.46428062 363.48565937 109.61785837 373.30307857 94.09814453 381.31567383 C93.49325195 381.62843262 92.88835937 381.94119141 92.26513672 382.26342773 C64.72703152 396.27155233 34.49385055 402.76232703 3.72314453 402.69067383 C2.84274506 402.69013 1.96234558 402.68958618 1.05526733 402.68902588 C-13.25349056 402.64848426 -26.95433873 401.73425935 -40.90185547 398.31567383 C-42.23821045 397.99421387 -42.23821045 397.99421387 -43.6015625 397.66625977 C-72.07884569 390.61747809 -98.87807183 378.00655878 -121.53857422 359.26879883 C-124.98230298 356.422742 -128.53024689 353.7103623 -132.06591797 350.97973633 C-132.97470703 350.15602539 -132.97470703 350.15602539 -133.90185547 349.31567383 C-133.90185547 348.65567383 -133.90185547 347.99567383 -133.90185547 347.31567383 C-134.56185547 347.31567383 -135.22185547 347.31567383 -135.90185547 347.31567383 C-135.90185547 346.65567383 -135.90185547 345.99567383 -135.90185547 345.31567383 C-136.56185547 345.31567383 -137.22185547 345.31567383 -137.90185547 345.31567383 C-139.24169922 343.98754883 -139.24169922 343.98754883 -140.83935547 342.06567383 C-143.10188476 339.38611053 -145.39815773 336.76489417 -147.80810547 334.21801758 C-148.30834229 333.68660156 -148.8085791 333.15518555 -149.32397461 332.60766602 C-150.32555716 331.54718583 -151.33248849 330.49172924 -152.3449707 329.44165039 C-155.90185547 325.64913211 -155.90185547 325.64913211 -155.90185547 322.31567383 C-151.7526342 322.86293323 -149.09751951 325.32327358 -145.96435547 327.87817383 C-112.49996321 354.28872765 -70.28107399 364.92725762 -28.16088867 360.37231445 C11.7404784 355.37903429 50.51367105 333.83116901 75.28564453 302.00317383 C102.2073581 266.1942078 113.74287629 223.77918143 108.03564453 179.19067383 C103.36182966 146.79964046 88.57557441 116.98148746 66.09814453 93.31567383 C65.60604492 92.78570801 65.11394531 92.25574219 64.60693359 91.7097168 C40.8738918 66.25446714 8.58347239 50.05740641 -25.90185547 45.31567383 C-27.07103516 45.13391602 -28.24021484 44.9521582 -29.44482422 44.76489258 C-71.61533582 39.65438979 -112.89208728 51.7135382 -146.31201172 77.46020508 C-149.8276055 80.21952147 -153.19809546 83.10839876 -156.42138672 86.20629883 C-157.90185547 87.31567383 -157.90185547 87.31567383 -160.90185547 87.31567383 C-160.35570146 83.08040407 -157.80081795 80.22554824 -155.21435547 77.00317383 C-154.72813721 76.3936084 -154.24191895 75.78404297 -153.7409668 75.15600586 C-143.89916607 62.99985508 -133.13277345 52.06245136 -120.90185547 42.31567383 C-120.33450684 41.85741211 -119.7671582 41.39915039 -119.18261719 40.92700195 C-97.55281967 23.63297615 -71.10136924 11.56026197 -44.27685547 5.06567383 C-43.26478027 4.81954346 -42.25270508 4.57341309 -41.20996094 4.31982422 C-27.42871573 1.10789603 -14.10433559 -0.03420308 0 0 Z "  transform="translate(258.90185546875,69.684326171875)"/>
         <path fill="currentColor" d="M0 0 C23.93418963 20.21356155 38.18828481 47.87411238 43.30859375 78.609375 C43.72796962 83.82104607 43.79621346 89.00908218 43.74609375 94.234375 C43.7423877 94.93147583 43.73868164 95.62857666 43.73486328 96.34680176 C43.51079954 126.08447361 33.84943539 152.98108038 14.30859375 175.609375 C13.37273437 176.74439453 13.37273437 176.74439453 12.41796875 177.90234375 C7.3119221 183.93204517 1.58692987 188.83219983 -4.69140625 193.609375 C-5.65691406 194.351875 -6.62242187 195.094375 -7.6171875 195.859375 C-33.76277727 214.99515608 -66.44544142 222.27976227 -98.37890625 217.421875 C-129.2224086 212.211016 -156.10496998 196.18588064 -175.99609375 172.10546875 C-177.69140625 169.609375 -177.69140625 169.609375 -177.69140625 166.609375 C-176.37140625 166.939375 -175.05140625 167.269375 -173.69140625 167.609375 C-173.69140625 168.269375 -173.69140625 168.929375 -173.69140625 169.609375 C-172.85222656 170.00576172 -172.85222656 170.00576172 -171.99609375 170.41015625 C-169.47801141 171.72041265 -167.18096648 173.22649078 -164.81640625 174.796875 C-141.95286732 189.35191305 -116.13355444 194.94004479 -89.48388672 189.12792969 C-74.00965166 185.43003002 -61.09388018 178.62819028 -48.69140625 168.609375 C-48.05976563 168.14273438 -47.428125 167.67609375 -46.77734375 167.1953125 C-29.95140734 154.19707727 -19.18769244 130.97695501 -16.03515625 110.39453125 C-15.865 109.01587891 -15.865 109.01587891 -15.69140625 107.609375 C-15.55734375 106.55621094 -15.42328125 105.50304687 -15.28515625 104.41796875 C-12.8813248 80.40697048 -19.85309354 55.11934523 -34.69921875 36.02734375 C-35.35664063 35.22941406 -36.0140625 34.43148437 -36.69140625 33.609375 C-37.32820312 32.82175781 -37.965 32.03414062 -38.62109375 31.22265625 C-54.38763523 12.57508008 -77.98681734 0.98006353 -102.19970703 -1.04858398 C-115.33840527 -1.9297872 -128.14870541 -0.56547477 -140.69140625 3.609375 C-141.71621094 3.94710937 -142.74101562 4.28484375 -143.796875 4.6328125 C-155.05737548 8.64192736 -164.81345042 14.73678833 -173.984375 22.359375 C-175.69140625 23.609375 -175.69140625 23.609375 -177.69140625 23.609375 C-176.02661937 12.90007435 -162.17010016 2.50403181 -153.91601562 -3.73193359 C-107.16913616 -37.54750108 -44.81974776 -36.84949238 0 0 Z "  transform="translate(291.69140625,175.390625)"/>
       </svg>

frontend/tailwind.config.js

@@ -4,9 +4,25 @@ export default {
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
+  darkMode: 'class',
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        hBackground: "var(--h-background)",
+        hOnBackground: "var(--h-on-background)",
+        hSurface: "var(--h-surface)",
+        hOnSurface: "var(--h-on-surface)",
+        hPrimary: "var(--h-primary)",
+        hOnPrimary: "var(--h-on-primary)",
+        hSecondary: "var(--h-secondary)",
+        hOnSecondary: "var(--h-on-secondary)",
+        hTertiary: "var(--h-tertiary)",
+        hOnTertiary: "var(--h-on-tertiary)",
+        hError: "var(--h-error)",
+        hOnError: "var(--h-on-error)",
+      }
+    }
   },
-  plugins: [],
+  plugins: []
 }