Big cleanup for styling

frontend/src/views/creators/CreateCreator.vue

@@ -47,48 +47,55 @@ async function createAccount() {
 </script>
 
 <template>
+  <div class="container">
+    <div class="card">
 
-  <div class="h-1"></div>  <!--  To delete and find the bug that causes the margin of the following component to use a white background.-->
+      <div class="card-title">
+        Créez votre Hutopy.
+      </div>
 
-  <div class="create-creator-card">
+      <div class="card-entry">
+        <name-editor
+            v-model:name="creatorName"
+            creator-name-reservation-id="creatorNameDirty"
+            @update:creator-name-reservation-id="handleCreatorNameReservationIdChanged($event)"
+        ></name-editor>
+      </div>
 
-    <div class="py-2 text-3xl font-bold text-center mb-10">
-      Créez votre Hutopy.
-    </div>
-
-    <div class="flex flex-column justify-end gap-2">
-      <v-alert
-          v-if="!!errorMessage"
-          outlined
-          type="error"
-      >
-        {{ errorMessage }}
-      </v-alert>
-
-      <name-editor
-          v-model:name="creatorName"
-          creator-name-reservation-id="creatorNameDirty"
-          @update:creator-name-reservation-id="handleCreatorNameReservationIdChanged($event)"
-      ></name-editor>
-
-      <div class="flex flex-row justify-end gap-2">
-        <v-btn
+      <div class="card-actions">
+        <button
             :disabled="!canSave"
-            variant="outlined"
-            @click="createAccount"
-            :style="{ borderColor: 'rgb(159, 76, 173)', color: 'rgb(159, 76, 173)' }"
-        >
+            class="secondary"
+            @click="createAccount">
+          Cancel
+        </button>
+        <button
+            class="primary"
+            :disabled="!canSave"
+            @click="createAccount">
           Créer
-        </v-btn>
+        </button>
       </div>
 
     </div>
   </div>
+
+  <v-alert
+      v-if="!!errorMessage"
+      outlined
+      type="error"
+  >
+    {{ errorMessage }}
+  </v-alert>
+
+
 </template>
 
 <style scoped>
-.create-creator-card {
-  @apply text-center max-w-[1000px] mx-auto p-10 bg-white shadow-2xl rounded mt-16 ;
+
+.container {
+  @apply min-h-screen w-full;
+  @apply flex items-center justify-center;
 }
 
 </style>

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

frontend/src/views/creators/CreatorLayout.vue

@@ -1,18 +1,20 @@
 <template>
 
-  <div class="flex flex-col min-h-screen max-w-[960px] mx-auto">
+  <div class="min-h-screen w-[1024px] bg-hSurface text-hOnSurface">
+
     <div v-if="brandingStore.loading">
       <v-progress-linear indeterminate></v-progress-linear>
     </div>
     <div v-else>
-      <banner></banner>
-    </div>
-    <div class="py-8 flex-grow">
-      <router-view></router-view>
-    </div>
-
-    <div>
-      <Footer></Footer>
+      <div>
+        <banner></banner>
+      </div>
+      <div>
+        <router-view></router-view>
+      </div>
+      <div>
+        <Footer></Footer>
+      </div>
     </div>
 
   </div>
@@ -23,5 +25,6 @@
 import Banner from "@/views/creators/Banner.vue";
 import Footer from "@/views/main/Footer.vue";
 import {useBrandingStore} from "@/stores/brandingStore.js";
+
 const brandingStore = useBrandingStore()
 </script>