Traduction and ui modifications

src/locales/en.json

@@ -1,5 +1,5 @@
 {
-  "language":{
+  "language": {
     "language": "En"
   },
   "general": {
@@ -10,7 +10,14 @@
     "subscription": "Subscriptions"
   },
   "footer": {
-    "allRightsReserved": "All rights reserved"
+    "allRightsReserved": "All rights reserved",
+    "helpandcontact": "Help and contact",
+    "faq": "FAQ",
+    "creatorguide": "Creator guide",
+    "termsandconditions": "Terms and conditions",
+    "contentpolicy": "Content policy",
+    "about": "About",
+    "pricing": "Pricing"
   },
   "sidebar": {
     "subscriptionTitle": "Subscription",
@@ -111,6 +118,11 @@
     "password": "Password",
     "recoverybyemail": "Recovery by Email",
     "recoverybymobile": "Recovery by Mobile"
+  },
+  "isupportbtn": {
+    "isupport": "I support",
+    "amount": "amount",
+    "message": "Message (optional)",
+    "send": "send"
   }
-
 }

src/locales/fr.json

@@ -1,8 +1,7 @@
 {
- "language":{
+  "language": {
-   "language": "Fr"
+    "language": "Fr"
- }, 
+  },
-  
   "general": {
     "yes": "oui",
     "no": "non"
@@ -11,7 +10,14 @@
     "subscription": "Abonnés"
   },
   "footer": {
-    "allRightsReserved": "Tout droits réservés"
+    "allRightsReserved": "Tout droits réservés",
+    "helpandcontact": "Aide & Contact",
+    "faq": "FAQ",
+    "creatorguide": "Guide pour les créateurs",
+    "termsandconditions": "Termes et conditions",
+    "contentpolicy": "Politique de contenu",
+    "about": "À propos",
+    "pricing": "Frais"
   },
   "sidebar": {
     "subscriptionTitle": "Abonnements",
@@ -100,7 +106,7 @@
     "socialnetwork": "Réseaux sociaux"
   },
   "accountmanagement": {
-    "accounts" : "comptes",
+    "accounts": "comptes",
     "accountmanagement": "Gestion des comptes",
     "pageid": "ID de la page",
     "addaccount": "Ajouter un compte",
@@ -112,7 +118,11 @@
     "password": "Mot de passe",
     "recoverybyemail": "Récupération par email",
     "recoverybymobile": "Récupération par mobile"
+  },
+  "isupportbtn": {
+    "isupport": "Je soutiens",
+    "amount": "Montant",
+    "message": "Message (facultatif)",
+    "send": "Envoyez"
   }
-
-
 }

src/views/creators/DonationButton.vue

@@ -1,4 +1,4 @@
-<template>
+<template> 
   <v-btn class="hover:scale-125" variant="text" icon @click="openDonationDialog()">
     <v-icon :class="['text-2xl', iconColorClass]">mdi-gift-outline</v-icon>
   </v-btn>

src/views/creators/DonationButtonBanner.vue

@@ -5,7 +5,7 @@
     block
     @click="openDonationDialog()"
   >
-    Je Soutiens
+    {{ $t('isupportbtn.isupport') }}
   </v-btn>
 
   <v-dialog v-model="donationModal" max-width="500">
@@ -14,7 +14,7 @@
         class="text-center rounded-xl"
         :style="{ border: `3px solid ${brandingStore.colors.primary}` }"
       >
-        <div class="py-4 text-2xl font-bold border-b mb-2">Je Soutiens</div>
+        <div class="py-4 text-2xl font-bold border-b mb-2"> {{ $t('isupportbtn.isupport') }}</div>
 
         <div class="flex flex-row align-center px-3">
           <img
@@ -46,7 +46,7 @@
             placeholder="0"
             :min="0"
             class="p-2"
-            label="Montant"
+            :label="`${$t('isupportbtn.amount')}`"
             density="comfortable"
             variant="outlined"
             hide-details
@@ -58,7 +58,7 @@
 
           <v-textarea
             v-model="tipMessage"
-            label="Message (facultatif)"
+            :label="`${$t('isupportbtn.message')}`"
             class="p-2"
             density="comfortable"
             variant="outlined"
@@ -76,7 +76,7 @@
             @click="goPay()"
             class="w-full mt-5"
           >
-            Envoyez
+            {{ $t('isupportbtn.send') }}
           </v-btn>
         </v-card-text>
       </v-card>

src/views/main/Footer.vue

@@ -29,25 +29,25 @@ const brandingStore = useBrandingStore()
 
     <div class="flex flex-row flex-wrap justify-center gap-4 px-4 "  >
       <router-link to="/documents/helpandcontact"  :style="{color: brandingStore.colors.onBackground}">
-        Aide & Contact
+        {{ $t('footer.helpandcontact') }}
       </router-link>
       <router-link to="/documents/faq"  :style="{color: brandingStore.colors.onBackground}">
-        FAQ
+        {{ $t('footer.faq') }}
       </router-link>
       <router-link to="/documents/guideforcreators"  :style="{color: brandingStore.colors.onBackground}">
-        Guide pour les créateurs
+        {{ $t('footer.creatorguide') }}
       </router-link>
       <router-link to="/documents/termsandconditions"  :style="{color: brandingStore.colors.onBackground}">
-        Termes et Conditions
+        {{ $t('footer.termsandconditions') }}
       </router-link>
       <router-link to="/documents/contentpolicy"  :style="{color: brandingStore.colors.onBackground}">
-        Politique de Contenu
+        {{ $t('footer.contentpolicy') }}
       </router-link>
       <router-link to="/documents/about"  :style="{color: brandingStore.colors.onBackground}">
-        À Propos
+        {{ $t('footer.about') }}
       </router-link>
       <router-link to="/documents/pricing"  :style="{color: brandingStore.colors.onBackground}">
-        Frais
+        {{ $t('footer.pricing') }}
       </router-link>
     </div>
 

src/views/profile/creators/CreateCreator.vue

@@ -31,13 +31,6 @@ function requestAccept() {
         outlined
     ></v-text-field>
 
-    <v-text-field
-        variant="outlined"
-        v-model="creatorName"
-        label="Compte stripe"
-        outlined
-    ></v-text-field>
-
     <div class="flex flex-row justify-end gap-2">
       <v-btn
           variant="flat"

src/views/profile/creators/CreatorPage.vue

@@ -94,7 +94,7 @@ const closeDialog = () => {
     </h1>
 
     <div v-if="creatorProfileStore.hasCreator" class="w-full max-w-[800px]">
-      <div class="my-10 border rounded-2xl">
+      <div class="my-10 border rounded bg-white">
         <div class="py-5 uppercase ml-4">
           {{ $t('creatorinfopage.informations') }}
         </div>
@@ -132,7 +132,7 @@ const closeDialog = () => {
         <div class="flex flex-col w-full">
           <button
             @click="openDialog('ChangeStripeID')"
-            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b"
           >
             <span class="flex-none pa-2 min-w-32 text-left"
               >Stripe Account ID</span
@@ -148,7 +148,7 @@ const closeDialog = () => {
         </div>
       </div>
 
-      <div class="border rounded-2xl">
+      <div class="border rounded bg-white">
         <div class="py-5 uppercase ml-4">
           {{ $t('creatorinfopage.banner&profile') }}
         </div>
@@ -185,12 +185,12 @@ const closeDialog = () => {
         </div>
       </div>
 
-      <div class="mt-10 border rounded-2xl">
+      <div class="mt-10 border rounded bg-white">
         <div class="py-5 uppercase ml-4">
           {{ $t('creatorinfopage.socialnetwork') }}
         </div>
 
-        <div class="flex flex-col w-full">
+        <div class="flex flex-col w-full ">
           <button
             @click="openDialog('Socials')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
@@ -298,7 +298,7 @@ const closeDialog = () => {
 
           <button
             @click="openDialog('Socials')"
-            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b"
           >
             <span class="pa-2 min-w-32 text-left"
               ><v-icon>mdi-web</v-icon></span
@@ -315,63 +315,27 @@ const closeDialog = () => {
     </div>
 
     <div v-else class="w-full max-w-[800px]">
-      <div class="my-10 border rounded-2xl">
+      <div class="my-10 border rounded bg-white shadow">
         <div class="py-5 uppercase ml-4 px-4">
           Informations pour pour votre page
         </div>
-        <div class="flex flex-col w-full">
+        <div class="flex flex-col w-full ">
           <button
             @click="openDialog('CreateCreator')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out"
           >
-            <span class="flex-none pa-2 min-w-32 text-left">Nom (Unique) </span>
+            <span class="flex-none pa-2 min-w-32 text-left">Nom</span>
             <span class="flex-auto text-left pr-6"
-              >Vous devez vous assurer de choisir un nom unique ou d'utiliser
+              >Choisissez le nom de votre page. Cela peut être un nom de personne, d'organisation ou de projet.</span
-              votre propre nom. Cela est important car c'est votre nom de
-              marque, celui que vous allez présenter aux gens. Par exemple,
-              notre projet s'appelle Hutopy, nous avons donc utilisé ce nom pour
-              notre page officielle sur la plateforme.</span
             >
             <span class="flex-none">
               <v-icon>mdi-chevron-right</v-icon>
             </span>
           </button>
 
-          <button
+    
-            @click="openDialog('CreateCreator')"
-            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out"
-          >
-            <span class="flex-none pa-2 min-w-32 text-left">Titre</span>
-            <span class="flex-auto text-left pr-6"
-              >Le titre doit refléter ce que vous souhaitez mettre en avant sur
-              la plateforme, ce que vous voulez présenter comme contenu ou la
-              raison de votre présence sur la plateforme. Par exemple, des
-              artistes pourraient écrire chanteur, danseur, peintre ou autre.
-              Une entreprise pourrait indiquer son activité. Dans notre cas,
-              pour Hutopy, c'est 'Créer un monde meilleur'.
-            </span>
-            <span class="flex-none">
-              <v-icon>mdi-chevron-right</v-icon>
-            </span>
-          </button>
 
-          <button
+  
-            @click="openDialog('CreateCreator')"
-            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
-          >
-            <span class="pa-2 min-w-32 text-left">Description</span>
-            <span class="flex-auto text-left pr-6"
-              >Pour la description, c'est un espace où vous pouvez écrire ce que
-              vous souhaitez : décrire votre page, le service que vous offrez,
-              la raison de votre présence sur la plateforme, votre historique...
-              Vous choisissez ! Dans notre cas, pour Hutopy, nous sommes ici
-              afin de créer une plateforme sur laquelle les gens pourront
-              s'exprimer et créer, tout en étant respectés et non exploités.
-            </span>
-            <span class="flex-none">
-              <v-icon>mdi-chevron-right</v-icon>
-            </span>
-          </button>
         </div>
       </div>
     </div>
@@ -382,7 +346,8 @@ const closeDialog = () => {
 .HoverBtn:hover {
   @apply bg-[#A6147D] text-white;
   @apply hover:opacity-90;
-  /* Réduire l'opacité au survol */
+
+  
 }
 
 .custom-border {