Big cleanup for styling

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

@@ -1,6 +1,6 @@
 <script setup>
-import { useClient } from '@/plugins/api.js';
-import { ref } from 'vue';
+import {useClient} from '@/plugins/api.js';
+import {ref} from 'vue';
 
 const props = defineProps({
   creator: {
@@ -33,27 +33,33 @@ const cancel = () => {
 </script>
 
 <template>
-  <div class="pb-5 text-2xl">Modifier le Stripe ID</div>
-  <div class="flex flex-col space-y-4">
-    <v-text-field
-      variant="outlined"
-      v-model="stripeId"
-      label="Stripe Id"
-      outlined
-    ></v-text-field>
+  <div class="card">
+    <div class="card-title">
+      Modifier le Stripe ID
+    </div>
 
-    <div class="flex justify-end space-x-4">
-      <v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
-      <v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
+    <div class="card-entry">
+      <v-text-field
+          v-model="stripeId"
+          label="Stripe Id"
+          outlined
+          variant="outlined"
+      ></v-text-field>
+
+      <div class="card-actions">
+        <button class="secondary"
+                @click="cancel">
+          Annuler
+        </button>
+        <button class="primary"
+                @click="save">
+          Enregistrer
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.flex {
-  display: flex;
-}
-.space-y-4 > * + * {
-  margin-top: 1rem;
-}
+
 </style>