Big cleanup for styling

frontend/src/views/creators/CreatorHome.vue

@@ -7,7 +7,7 @@
     <button
         v-if="isLoggedIn"
         @click="isEditMode ? saveChanges() : toggleEditMode()"
-        class="px-4 py-2 rounded-md hover:opacity-90 bg-hSecondary text-hOnSecondary"
+        class="primary"
     >
       {{ isEditMode ? 'Enregistrer' : 'Éditer la page' }}
     </button>
@@ -15,14 +15,14 @@
     <button
         v-if="isEditMode && isLoggedIn"
         @click="cancelEdit"
-        class="px-4 py-2 rounded-md hover:opacity-90 bg-red-500 text-white"
+        class="secondary"
     >
       Annuler
     </button>
   </div>
 
   <!-- MainPage -->
-  <div class="flex flex-col max-w-[650px] mx-auto px-6 bg-hBackground text-hOnBackground">
+  <div class="flex flex-col mx-auto px-6">
 
     <h1 class="flex justify-start text-2xl font-bold text-center  mb-4">Qui sommes-nous</h1>
 
@@ -55,7 +55,8 @@
                    alt="Image principale"
                    class=" max-w-full h-auto cursor-pointer max-h-96"/>
             </label>
-            <button v-if="isEditMode" @click="deleteImage('mainImageUrl')"
+            <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>
@@ -301,12 +302,11 @@
 </template>
 
 <script setup>
-import {ref, onMounted} from "vue";
+import {onMounted, ref, watch} 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 {watch} from "vue";
 import FullscreenImage from "@/views/creators/FullscreenImage.vue";
 
 const {smAndDown} = useDisplay();