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>