Big cleanup for styling

frontend/src/views/profile/ProfilePage.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="flex flex-col min-h-screen max-w-[960px] mx-auto">
+  <div class="flex flex-col min-h-screen w-[1024px]">
     <!-- Modal -->
     <v-dialog v-model="dialogEditFullnameShown" max-width="800px">
       <fullname-dialog
@@ -20,21 +20,19 @@
     </v-dialog>
 
     <!-- Creator Section (integrated directly) -->
-    <v-dialog v-model="dialog" max-width="800px">
-      <div class="card">
+    <v-dialog v-model="dialogShown" max-width="800px">
         <component
             :is="currentComponent"
             :creator="creatorProfileStore.creator"
             @closeRequested="closeDialog"
         ></component>
-      </div>
     </v-dialog>
 
     <div class="space-y-6 p-4">
 
       <div class="card">
 
-        <div class="title">
+        <div class="card-title">
           {{ $t('personnalinformation.informations') }}
         </div>
 
@@ -61,7 +59,7 @@
       <!-- Phone & email -->
       <div class="card">
 
-        <div class="title">
+        <div class="card-title">
           {{ $t('personnalinformation.contactdetails') }}
         </div>
 
@@ -77,7 +75,7 @@
 
       <template v-if="creatorProfileStore.creator !== undefined">
         <div class="card">
-          <div class="title">
+          <div class="card-title">
             {{ $t('creatorinfopage.informations') }}
           </div>
           <div class="content">
@@ -107,7 +105,7 @@
         </div>
 
         <div class="card">
-          <div class="title">
+          <div class="card-title">
             {{ $t('creatorinfopage.socialnetwork') }}
           </div>
           <div class="content">
@@ -233,7 +231,7 @@ function handleSaveEditEmail(firstname, lastname) {
 
 const creatorProfileStore = useCreatorProfileStore();
 
-const dialog = ref(false);
+const dialogShown = ref(false);
 const currentComponent = ref('');
 
 const componentsMap = {
@@ -245,34 +243,22 @@ const componentsMap = {
 
 function requestCancel() {
   currentComponent.value = null;
-  dialog.value = false;
+  dialogShown.value = false;
 }
 
 const openDialog = (component) => {
   currentComponent.value = componentsMap[component];
-  dialog.value = true;
+  dialogShown.value = true;
 };
 
 const closeDialog = () => {
   currentComponent.value = null;
-  dialog.value = false;
+  dialogShown.value = false;
 };
 </script>
 
 <style scoped>
 
-.card {
-  @apply p-4 bg-hSurface text-hOnSurface shadow-md rounded-lg mb-4;
-}
-
-.title {
-  @apply text-lg font-semibold text-hOnSecondary mb-2;
-}
-
-.content {
-  @apply text-base font-semibold text-hOnSurface flex flex-col w-full;
-}
-
 .action {
   @apply active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full;
 }