From 24f5d79a55a0ba5940a4eafdb8207cbf5602bda4 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Mon, 17 Feb 2025 13:51:59 -0500
Subject: [PATCH] More mobile styling fixes

---
 frontend/src/assets/main.css                  |  13 +-
 frontend/src/stores/creatorProfileStore.js    |   6 +-
 frontend/src/views/profile/ProfilePage.vue    | 384 +++++++++---------
 .../src/views/profile/account/AliasDialog.vue |   2 +-
 .../src/views/profile/account/EmailDialog.vue |   2 +-
 .../views/profile/account/FullnameDialog.vue  |  37 +-
 .../profile/creators/ChangeStripeIdDialog.vue |   2 +-
 .../profile/creators/ChangeTitleDialog.vue    |   2 +-
 .../views/profile/creators/SocialsDialog.vue  |  32 +-
 9 files changed, 234 insertions(+), 246 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index fcf59af..231bcd1 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -45,9 +45,13 @@
         @apply hover:bg-hSecondary;
     }
 
+    div.dialog {
+        @apply place-self-center;
+    }
+
     div.card {
-        @apply max-w-[1024px];
-        @apply rounded-xl p-10 m-4;
+        @apply w-full max-w-[1024px];
+        @apply rounded-xl p-4;
         @apply bg-hSurface text-hOnSurface;
     }
 
@@ -63,4 +67,9 @@
     div.card-actions {
         @apply flex flex-row gap-6 justify-end;
     }
+
+    div.card-actions > * {
+        @apply w-fit;
+        @apply sm:min-w-40 min-w-0;
+    }
 }
diff --git a/frontend/src/stores/creatorProfileStore.js b/frontend/src/stores/creatorProfileStore.js
index 0adc6ec..74cbb89 100644
--- a/frontend/src/stores/creatorProfileStore.js
+++ b/frontend/src/stores/creatorProfileStore.js
@@ -17,10 +17,10 @@ export const useCreatorProfileStore = defineStore(
             async (newValue) => {
                 if (newValue) {
                     await fetchCreatorProfile();
-                    if (value.value === undefined) {
-                        await router.push('/');
-                    } else {
+                    if (value.value) {
                         await router.push(`/@${value.value.name}`);
+                    } else {
+                        await router.push('/');
                     }
                 } else {
                     value.value = undefined;
diff --git a/frontend/src/views/profile/ProfilePage.vue b/frontend/src/views/profile/ProfilePage.vue
index 5a6278a..837efc7 100644
--- a/frontend/src/views/profile/ProfilePage.vue
+++ b/frontend/src/views/profile/ProfilePage.vue
@@ -1,198 +1,13 @@
-<template>
-
-  <div class="flex flex-col min-h-screen w-[1024px]">
-    <!-- Modal -->
-    <v-dialog v-model="dialogEditFullnameShown" max-width="800px">
-      <fullname-dialog
-          :firstname="userProfileStore.user.firstname"
-          :lastname="userProfileStore.user.lastname"
-          @close="handleCloseEditFullname"
-          @save="handleSaveEditFullname"
-      ></fullname-dialog>
-    </v-dialog>
-
-    <v-dialog v-model="dialogEditAliasShown" max-width="800px">
-      <alias-dialog
-          :alias="userProfileStore.user.alias"
-          @close="handleCloseEditAlias"
-          @save="handleSaveEditAlias"
-      ></alias-dialog>
-    </v-dialog>
-
-    <!-- Creator Section (integrated directly) -->
-    <v-dialog v-model="dialogShown" max-width="800px">
-        <component
-            :is="currentComponent"
-            :creator="creatorProfileStore.creator"
-            @closeRequested="closeDialog"
-        ></component>
-    </v-dialog>
-
-    <div class="space-y-6 p-4">
-
-      <div class="card">
-
-        <div class="card-title">
-          {{ $t('personnalinformation.informations') }}
-        </div>
-
-        <div class="content">
-          <button
-              class="action"
-              @click="openEditFullname">
-            <span class="label">{{ $t('personnalinformation.fullname') }}</span>
-            <span class="value">{{ userProfileStore.fullname }}</span>
-            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-          </button>
-
-          <button
-              class="action"
-              @click="openEditAlias">
-            <span class="label">{{ $t('personnalinformation.alias') }}</span>
-            <span class="value">{{ userProfileStore.user.alias }}</span>
-            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-          </button>
-        </div>
-
-      </div>
-
-      <!-- Phone & email -->
-      <div class="card">
-
-        <div class="card-title">
-          {{ $t('personnalinformation.contactdetails') }}
-        </div>
-
-        <div class="content">
-          <button class="action" @click="openDialog('EmailDialog')">
-            <span class="label">{{ $t('personnalinformation.email') }}</span>
-            <span class="value">{{ userProfileStore.user.email }}</span>
-            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-          </button>
-        </div>
-
-      </div>
-
-      <template v-if="creatorProfileStore.creator !== undefined">
-        <div class="card">
-          <div class="card-title">
-            {{ $t('creatorinfopage.informations') }}
-          </div>
-          <div class="content">
-
-            <!-- NAME -->
-            <button class="action">
-              <span class="label">{{ $t('creatorinfopage.name') }}</span>
-              <span class="value">{{ creatorProfileStore.creator.name }}</span>
-              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-            </button>
-
-            <!-- TITLE -->
-            <button class="action" @click="openDialog('ChangeTitleDialog')">
-              <span class="label">{{ $t('creatorinfopage.title') }}</span>
-              <span class="value">{{ creatorProfileStore.creator.title }}</span>
-              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-            </button>
-
-            <!-- STRIPE -->
-            <button class="action" @click="openDialog('ChangeStripeIdDialog')">
-              <span class="label">Stripe Account ID</span>
-              <span class="value">{{ creatorProfileStore.creator.stripeId }}</span>
-              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-            </button>
-
-          </div>
-        </div>
-
-        <div class="card">
-          <div class="card-title">
-            {{ $t('creatorinfopage.socialnetwork') }}
-          </div>
-          <div class="content">
-
-            <button class="action" @click="openDialog('SocialsDialog')">
-              <span class="label">
-                <facebook class="social-icon"></facebook>
-              </span>
-              <span class="value">{{ creatorProfileStore.creator.socials?.facebookUrl }}</span>
-              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-            </button>
-
-            <button class="action" @click="openDialog('SocialsDialog')">
-              <span class="label">
-                <instagram class="social-icon"></instagram>
-              </span>
-              <span class="value">{{ creatorProfileStore.creator.socials?.instagramUrl }}</span>
-              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-            </button>
-
-            <button class="action" @click="openDialog('SocialsDialog')">
-              <span class="label">
-                <x class="social-icon"></x>
-              </span>
-              <span class="value">{{ creatorProfileStore.creator.socials?.xUrl }}</span>
-              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-            </button>
-
-            <button class="action" @click="openDialog('SocialsDialog')">
-              <span class="label">
-                <linkedin class="social-icon"></linkedin>
-              </span>
-              <span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
-              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-            </button>
-
-            <button class="action" @click="openDialog('SocialsDialog')">
-              <span class="label">
-                <tiktok class="social-icon"></tiktok>
-              </span>
-              <span class="value">{{ creatorProfileStore.creator.socials?.tikTokUrl }}</span>
-              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-            </button>
-
-            <button class="action" @click="openDialog('SocialsDialog')">
-              <span class="label">
-                <youtube class="social-icon"></youtube>
-              </span>
-              <span class="value">{{ creatorProfileStore.creator.socials?.youtubeUrl }}</span>
-              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-            </button>
-
-            <button class="action" @click="openDialog('SocialsDialog')">
-              <span class="label">
-                <reddit class="social-icon"></reddit>
-              </span>
-              <span class="value">{{ creatorProfileStore.creator.socials?.redditUrl }}</span>
-              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-            </button>
-
-            <button class="action" @click="openDialog('SocialsDialog')">
-              <span class="label">
-                <web class="social-icon"></web>
-              </span>
-              <span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
-              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-            </button>
-
-          </div>
-        </div>
-      </template>
-
-    </div>
-
-  </div>
-</template>
-
-<script setup>
-import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
-import ChangeStripeIdDialog from '@/views/profile/creators/ChangeStripeIdDialog.vue';
-import ChangeTitleDialog from '@/views/profile/creators/ChangeTitleDialog.vue';
+<script setup>
 import {ref} from 'vue';
+import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
+import {useUserProfileStore} from "@/stores/userProfileStore.js";
 import SocialsDialog from './creators/SocialsDialog.vue';
 import AliasDialog from "@/views/profile/account/AliasDialog.vue";
 import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
 import EmailDialog from "@/views/profile/account/EmailDialog.vue";
-import {useUserProfileStore} from "@/stores/userProfileStore.js";
+import ChangeStripeIdDialog from '@/views/profile/creators/ChangeStripeIdDialog.vue';
+import ChangeTitleDialog from '@/views/profile/creators/ChangeTitleDialog.vue';
 import Youtube from "@/views/svg/Youtube.vue";
 import Web from "@/views/svg/Web.vue";
 import Reddit from "@/views/svg/Reddit.vue";
@@ -280,14 +95,198 @@ const closeDialog = () => {
 };
 </script>
 
+<template>
+
+  <div class="min-h-screen w-full">
+
+    <v-dialog v-model="dialogEditFullnameShown">
+      <fullname-dialog
+          :firstname="userProfileStore.user.firstname"
+          :lastname="userProfileStore.user.lastname"
+          @close="handleCloseEditFullname"
+          @save="handleSaveEditFullname"
+      ></fullname-dialog>
+    </v-dialog>
+    <v-dialog v-model="dialogEditAliasShown">
+      <alias-dialog
+          :alias="userProfileStore.user.alias"
+          @close="handleCloseEditAlias"
+          @save="handleSaveEditAlias"
+      ></alias-dialog>
+    </v-dialog>
+    <v-dialog v-model="dialogShown">
+      <component
+          :is="currentComponent"
+          :creator="creatorProfileStore.creator"
+          @closeRequested="closeDialog"
+      ></component>
+    </v-dialog>
+
+    <div class="flex flex-col items-center gap-4 m-4">
+
+      <div class="card">
+
+        <div class="card-title">
+          {{ $t('personnalinformation.informations') }}
+        </div>
+
+        <div class="content">
+          <button
+              class="action"
+              @click="openEditFullname">
+            <span class="label">{{ $t('personnalinformation.fullname') }}</span>
+            <span class="value">{{ userProfileStore.fullname }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+
+          <button
+              class="action"
+              @click="openEditAlias">
+            <span class="label">{{ $t('personnalinformation.alias') }}</span>
+            <span class="value">{{ userProfileStore.user.alias }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+        </div>
+
+      </div>
+
+      <div class="card">
+
+        <div class="card-title">
+          {{ $t('personnalinformation.contactdetails') }}
+        </div>
+
+        <div class="content">
+          <button class="action" @click="openDialog('EmailDialog')">
+            <span class="label">{{ $t('personnalinformation.email') }}</span>
+            <span class="value">{{ userProfileStore.user.email }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+        </div>
+
+      </div>
+
+      <template v-if="creatorProfileStore.creator !== undefined">
+        <div class="card">
+          <div class="card-title">
+            {{ $t('creatorinfopage.informations') }}
+          </div>
+          <div class="content">
+
+            <!-- NAME -->
+            <button class="action">
+              <span class="label">{{ $t('creatorinfopage.name') }}</span>
+              <span class="value">{{ creatorProfileStore.creator.name }}</span>
+              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+            </button>
+
+            <!-- TITLE -->
+            <button class="action" @click="openDialog('ChangeTitleDialog')">
+              <span class="label">{{ $t('creatorinfopage.title') }}</span>
+              <span class="value">{{ creatorProfileStore.creator.title }}</span>
+              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+            </button>
+
+            <!-- STRIPE -->
+            <button class="action" @click="openDialog('ChangeStripeIdDialog')">
+              <span class="label">Stripe Account ID</span>
+              <span class="value">{{ creatorProfileStore.creator.stripeId }}</span>
+              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+            </button>
+
+          </div>
+        </div>
+
+        <div class="card">
+          <div class="card-title">
+            {{ $t('creatorinfopage.socialnetwork') }}
+          </div>
+
+          <div>
+
+            <button class="action" @click="openDialog('SocialsDialog')">
+              <span class="label">
+                <facebook class="social-icon"></facebook>
+              </span>
+              <span class="value">{{ creatorProfileStore.creator.socials?.facebookUrl }}</span>
+              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+            </button>
+
+            <button class="action" @click="openDialog('SocialsDialog')">
+              <span class="label">
+                <instagram class="social-icon"></instagram>
+              </span>
+              <span class="value">{{ creatorProfileStore.creator.socials?.instagramUrl }}</span>
+              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+            </button>
+
+            <button class="action" @click="openDialog('SocialsDialog')">
+              <span class="label">
+                <x class="social-icon"></x>
+              </span>
+              <span class="value">{{ creatorProfileStore.creator.socials?.xUrl }}</span>
+              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+            </button>
+
+            <button class="action" @click="openDialog('SocialsDialog')">
+              <span class="label">
+                <linkedin class="social-icon"></linkedin>
+              </span>
+              <span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
+              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+            </button>
+
+            <button class="action" @click="openDialog('SocialsDialog')">
+              <span class="label">
+                <tiktok class="social-icon"></tiktok>
+              </span>
+              <span class="value">{{ creatorProfileStore.creator.socials?.tikTokUrl }}</span>
+              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+            </button>
+
+            <button class="action" @click="openDialog('SocialsDialog')">
+              <span class="label">
+                <youtube class="social-icon"></youtube>
+              </span>
+              <span class="value">{{ creatorProfileStore.creator.socials?.youtubeUrl }}</span>
+              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+            </button>
+
+            <button class="action" @click="openDialog('SocialsDialog')">
+              <span class="label">
+                <reddit class="social-icon"></reddit>
+              </span>
+              <span class="value">{{ creatorProfileStore.creator.socials?.redditUrl }}</span>
+              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+            </button>
+
+            <button class="action" @click="openDialog('SocialsDialog')">
+              <span class="label">
+                <web class="social-icon"></web>
+              </span>
+              <span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
+              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+            </button>
+
+          </div>
+        </div>
+      </template>
+
+    </div>
+  </div>
+</template>
+
 <style scoped>
 
 .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;
+  @apply p-2 flex items-center w-full mb-2;
+  @apply rounded-md;
+  @apply transition duration-200 ease-in-out;
+  @apply hover:bg-hutopyPrimary active:bg-hutopySecondary;
 }
 
 .label {
-  @apply flex-none min-w-32 text-left;
+  @apply flex-none min-w-40 text-left;
 }
 
 .social-icon {
@@ -296,6 +295,7 @@ const closeDialog = () => {
 
 .value {
   @apply flex-auto text-left pr-6 capitalize;
+  @apply break-words overflow-auto;
 }
 
 .chevron {
diff --git a/frontend/src/views/profile/account/AliasDialog.vue b/frontend/src/views/profile/account/AliasDialog.vue
index 0c1b3ea..f152d31 100644
--- a/frontend/src/views/profile/account/AliasDialog.vue
+++ b/frontend/src/views/profile/account/AliasDialog.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="card">
+  <div class="card dialog">
 
     <div class="card-title">
       {{ $t('personnalinformation.alias') }}
diff --git a/frontend/src/views/profile/account/EmailDialog.vue b/frontend/src/views/profile/account/EmailDialog.vue
index af0e547..d4c920d 100644
--- a/frontend/src/views/profile/account/EmailDialog.vue
+++ b/frontend/src/views/profile/account/EmailDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="card">
+  <div class="card dialog">
     <div class="card-title">
       Courriel
     </div>
diff --git a/frontend/src/views/profile/account/FullnameDialog.vue b/frontend/src/views/profile/account/FullnameDialog.vue
index 42b847f..81bd0ae 100644
--- a/frontend/src/views/profile/account/FullnameDialog.vue
+++ b/frontend/src/views/profile/account/FullnameDialog.vue
@@ -1,7 +1,21 @@
-<template>
+<script setup>
+import {ref} from 'vue';
 
-  <div class="card">
-    <div class="card-title">
+const props = defineProps(['firstname', 'lastname'])
+const emit = defineEmits(['close', 'save'])
+
+const firstname = ref(props.firstname)
+const lastname = ref(props.lastname)
+
+const requestClose = () => emit('close')
+const requestSave = () => emit('save', firstname.value, lastname.value)
+</script>
+
+<template>
+
+  <div class="card dialog">
+
+  <div class="card-title">
       {{ $t('personnalinformation.fullname') }}
     </div>
 
@@ -36,19 +50,4 @@
     </div>
 
   </div>
-</template>
-
-<script setup>
-import {ref} from 'vue';
-
-const props = defineProps(['firstname', 'lastname'])
-const emit = defineEmits(['close', 'save'])
-
-const firstname = ref(props.firstname)
-const lastname = ref(props.lastname)
-
-const requestClose = () => emit('close')
-const requestSave = () => emit('save', firstname.value, lastname.value)
-</script>
-
-
+</template>
\ No newline at end of file
diff --git a/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue b/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
index a6f8579..7aa5367 100644
--- a/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
+++ b/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
@@ -33,7 +33,7 @@ const cancel = () => {
 </script>
 
 <template>
-  <div class="card">
+  <div class="card dialog">
     <div class="card-title">
       Modifier le Stripe ID
     </div>
diff --git a/frontend/src/views/profile/creators/ChangeTitleDialog.vue b/frontend/src/views/profile/creators/ChangeTitleDialog.vue
index b4e6e5b..73b739e 100644
--- a/frontend/src/views/profile/creators/ChangeTitleDialog.vue
+++ b/frontend/src/views/profile/creators/ChangeTitleDialog.vue
@@ -36,7 +36,7 @@ const cancel = () => {
 </script>
 
 <template>
-  <div class="card">
+  <div class="card dialog">
 
     <div class="card-title">
       Modifier le Titre
diff --git a/frontend/src/views/profile/creators/SocialsDialog.vue b/frontend/src/views/profile/creators/SocialsDialog.vue
index f23dfcf..6ac97ee 100644
--- a/frontend/src/views/profile/creators/SocialsDialog.vue
+++ b/frontend/src/views/profile/creators/SocialsDialog.vue
@@ -66,7 +66,7 @@ const cancel = () => {
 
 <template>
 
-  <div class="card">
+  <div class="card dialog">
 
     <div class="card-title">
       Reseaux Sociaux
@@ -184,31 +184,11 @@ const cancel = () => {
 }
 
 .input-field {
-  @apply border border-gray-400;
-  /* Persistent border */
-  @apply rounded-lg;
-  /* Rounded corners */
-  @apply p-3;
-  /* Padding inside the input */
-  @apply flex-1;
-  /* Make input take up available space */
-  @apply text-gray-900;
-  /* Ensure text is visible */
-  @apply bg-white;
-  /* Background similar to Vuetify */
-  transition: border-color 0.2s; /* Smooth border effect */
-}
-
-/* Border highlight effect similar to Vuetify */
-.input-field:focus {
-  border-width: 2px;
-  border-color: var(--hutopy-primary); /* Vuetify primary color (adjust if needed) */
-}
-
-/* Disable auto styles on input */
-.input-field::placeholder {
-  color: #9e9e9e; /* Light gray for placeholder */
-  opacity: 1;
+  @apply w-full p-4;
+  @apply rounded-sm;
+  @apply transition duration-200;
+  @apply ring-1 ring-[#6D6C70] focus:outline-none focus:ring-hutopySecondary;
+  @apply placeholder:text-[#6D6C70]
 }
 
 </style>