@live-change/user-frontend 0.9.32 → 0.9.33

package/front/src/password/ResetPassword.vue

@@ -1,21 +1,23 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
-    <div class="surface-card p-4 shadow-2 border-round">
-      <div class="text-center mb-5">
-        <div class="text-900 text-3xl font-medium mb-3">Reset password</div>
+  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
+      <div class="text-center mb-8">
+        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Reset password</div>
       </div>
 
       <command-form service="passwordAuthentication" action="resetPasswordEmail" v-slot="{ data }"
                     @done="handleDone" keepOnDone v-if="isMounted">
 
-        <div class="p-field mb-3">
-          <label for="email" class="block text-900 font-medium mb-2">
+        <div class="p-field mb-4">
+          <label for="email" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
             Email address
           </label>
           <InputText id="email" type="text" class="w-full"
-                     v-model="data.email" :class="{ 'p-invalid': data.emailError }"
+                     v-model="data.email" :invalid="!!data.emailError"
                      aria-describedby="email-help" />
-          <small v-if="data.emailError" id="email-help" class="p-error">{{ t(`errors.${data.emailError}`) }}</small>
+          <Message v-if="data.emailError" severity="error" variant="simple" size="small">
+            {{ t(`errors.${data.emailError}`) }}
+          </Message>
         </div>
 
         <Button type="submit" label="Reset password" icon="pi pi-key" class="w-full"></Button>
@@ -28,6 +30,7 @@
 <script setup>
   import InputText from "primevue/inputtext"
   import Button from "primevue/button"
+  import Message from "primevue/message"
 
   import { onMounted, ref } from "vue"
   const isMounted = ref(false)

package/front/src/password/ResetPasswordFinished.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
-    <div class="surface-card border-round shadow-2 p-4">
-      <div class="text-900 font-medium mb-3 text-xl mb-4">Password changed</div>
-      <p class="mt-0 p-0 line-height-3">You have successfully changed your password.</p>
+  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6">
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl mb-6">Password changed</div>
+      <p class="mt-0 p-0 leading-normal">You have successfully changed your password.</p>
     </div>
   </div>
 </template>

package/front/src/password/ResetPasswordForm.vue

@@ -1,23 +1,23 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
-    <div class="surface-card border-round shadow-2 p-4" v-if="isUnknown">
-      <div class="text-900 font-medium mb-3 text-xl">Unknown link</div>
-      <p class="mt-0 mb-2 p-0 line-height-3">We can't find your secret link. Check if you copied the address correctly.</p>
+  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6" v-if="isUnknown">
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">Unknown link</div>
+      <p class="mt-0 mb-2 p-0 leading-normal">We can't find your secret link. Check if you copied the address correctly.</p>
     </div>
 
-    <div class="surface-card border-round shadow-2 p-4" v-if="isUsed">
-      <div class="text-900 font-medium mb-3 text-xl">Link used</div>
-      <p class="mt-0 mb-2 p-0 line-height-3">This link was already used.</p>
+    <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6" v-if="isUsed">
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">Link used</div>
+      <p class="mt-0 mb-2 p-0 leading-normal">This link was already used.</p>
     </div>
 
-    <div class="surface-card border-round shadow-2 p-4" v-if="isExpired && !isUsed">
-      <div class="text-900 font-medium mb-3 text-xl">Link expired</div>
-      <p class="mt-0 mb-4 p-0 line-height-3">Your password reset authentication already expired.</p>
+    <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6" v-if="isExpired && !isUsed">
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">Link expired</div>
+      <p class="mt-0 mb-6 p-0 leading-normal">Your password reset authentication already expired.</p>
     </div>
 
-    <div class="surface-card p-4 shadow-2 border-round" v-if="isReady">
-      <div class="text-center mb-5">
-        <div class="text-900 text-3xl font-medium mb-3">Reset password</div>
+    <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border" v-if="isReady">
+      <div class="text-center mb-8">
+        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Reset password</div>
       </div>
 
       <command-form service="passwordAuthentication" action="finishResetPassword" v-slot="{ data }"
@@ -25,10 +25,10 @@
                     @done="handleDone" keepOnDone>
 
         <template v-if="isMounted">
-          <div class="p-field mb-3">
-            <label for="newPassword" class="block text-900 font-medium mb-2">New password</label>
+          <div class="p-field mb-4">
+            <label for="newPassword" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">New password</label>
             <Password id="newPassword" class="w-full" inputClass="w-full" toggleMask
-                      :class="{ 'p-invalid': data.passwordHashError }"
+                      :invalid="!!data.passwordHashError"
                       v-model="data.passwordHash">
               <template #footer>
                 <Divider />
@@ -41,11 +41,13 @@
                 </ul>
               </template>
             </Password>
-            <small id="newPassword-help" class="p-error">{{ data.passwordHashError }}</small>
+            <Message v-if="data.passwordHashError" severity="error" variant="simple" size="small">
+              {{ t(`errors.${data.passwordHashError}`) }}
+            </Message>
           </div>
 
-          <div class="p-field mb-3">
-            <label for="reenterPassword" class="block text-900 font-medium mb-2">Re-enter password</label>
+          <div class="p-field mb-4">
+            <label for="reenterPassword" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Re-enter password</label>
             <Password id="reenterPassword" class="w-full" inputClass="w-full"
                       v-model="secondPassword"
                       :feedback="false" toggleMask />
@@ -66,6 +68,7 @@
   import Button from "primevue/button"
   import Divider from "primevue/divider"
   import Password from "primevue/password"
+  import Message from "primevue/message"
 
   const { resetKey } = defineProps({
     resetKey: {

package/front/src/phone/CountryInput.vue

@@ -1,19 +1,17 @@
 <template>
-  <div class="flex flex-row align-items-center">
-    <AutoComplete v-model="selectedCountry" dropdown optionLabel="name"
-                  :suggestions="filteredCountries" @complete="searchCountry"
-                  class="mr-2 w-14rem">
-      <template #option="slotProps">
-        <div class="flex align-items-center">
-          <img :alt="slotProps.option.name"
-               src="../../public/images/flag_placeholder.png"
-               :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`"
-               style="width: 18px; height: 12.27px" />
-          <div>{{ slotProps.option.name }}</div>
-        </div>
-      </template>
-    </AutoComplete>
-  </div>
+  <AutoComplete v-model="selectedCountry" dropdown optionLabel="name"
+                :suggestions="filteredCountries" @complete="searchCountry"
+                class="mr-2">
+    <template #option="slotProps">
+      <div class="flex items-center">
+        <img :alt="slotProps.option.name"
+             src="../../public/images/flag_placeholder.png"
+             :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`"
+             style="width: 18px; height: 12.27px" />
+        <div>{{ slotProps.option.name }}</div>
+      </div>
+    </template>
+  </AutoComplete>
 </template>
 
 <script setup>

package/front/src/phone/PhoneInput.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-row align-items-center">
+  <div class="flex flex-row items-center">
     <AutoComplete v-model="selectedCountry" dropdown optionLabel="dial_code" placeholder="+XX"
                   :suggestions="filteredCountries" @complete="searchCountry"
-                  class="mr-2 w-14rem">
+                  class="mr-2 w-56">
       <template #option="slotProps">
-        <div class="flex align-items-center">
+        <div class="flex items-center">
           <img :alt="slotProps.option.name"
                src="../../public/images/flag_placeholder.png"
                :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`"

package/front/src/settings/Settings.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="flex relative lg:static surface-ground" style="height: calc(100vh - 88px)">
-    <div id="settings-menu" class="surface-section hidden flex-shrink-0 absolute left-0 h-full
-       top-0 z-1 border-right-1 surface-border select-none md:static md:block" style="width:280px">
+  <div class="flex relative lg:static bg-surface-50 dark:bg-surface-950" style="height: calc(100vh - 88px)">
+    <div id="settings-menu" class="bg-surface-0 hidden flex-shrink-0 absolute left-0 h-full
+       top-0 z-1 border-r-1 border-r-surface-300 dark:border-r-surface-750 select-none md:static md:block" style="width:280px">
       <SettingsMenu />
     </div>
 
-    <div class="flex flex-column relative flex-auto">
-      <div v-if="viewType === 'simple'" class="p-5 flex flex-column flex-auto align-items-center">
+    <div class="flex flex-col relative flex-auto">
+      <div v-if="viewType === 'simple'" class="p-8 flex flex-col flex-auto items-center">
         <router-view></router-view>
       </div>
       <template v-if="viewType === 'wide'">

package/front/src/settings/SettingsIndex.vue

@@ -1,10 +1,10 @@
 <template>
 
-  <SettingsMenu class="h-full block md:hidden surface-section" />
+  <SettingsMenu class="h-full block md:hidden bg-surface-0 dark:bg-surface-950" />
 
-  <div class="flex-column flex-auto align-items-center p-5 hidden md:flex">
-<!--    <LocaleSettings class="mb-5" />-->
-    <Connected class="mb-5" />
+  <div class="flex-col flex-auto items-center p-8 hidden md:flex">
+<!--    <LocaleSettings class="mb-8" />-->
+    <Connected class="mb-8" />
     <ChangePassword />
   </div>
 

package/front/src/settings/SettingsMenu.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="flex flex-column h-full">
+  <div class="flex flex-col h-full">
     <div class="overflow-y-auto">
       <ul class="list-none p-2 m-0">
         <li>
-          <div class="p-3 text-500 font-medium">SETTINGS</div>
+          <div class="p-4 text-surface-500 dark:text-surface-300 font-medium">SETTINGS</div>
         </li>
 
         <SettingsMenuItem name="user:identification" icon="id-card" label="Identification" class="hidden md:block" />
@@ -16,9 +16,9 @@
 
       </ul>
 
-      <ul v-if="client.user"  class="list-none p-2 m-0 border-top-1 surface-border">
+      <ul v-if="client.user"  class="list-none p-2 m-0 border-t border-surface">
         <li>
-          <div class="p-3 text-500 font-medium">AUTHORIZATION</div>
+          <div class="p-4 text-surface-500 dark:text-surface-300 font-medium">AUTHORIZATION</div>
         </li>
 
         <SettingsMenuItem v-if="client.user" name="user:connected" icon="users" label="Connected Accounts" />
@@ -27,15 +27,15 @@
 
       </ul>
 
-      <ul v-if="client.user" class="list-none p-2 m-0 border-top-1 surface-border">
+      <ul v-if="client.user" class="list-none p-2 m-0 border-t border-surface">
 
         <SettingsMenuItem v-if="client.user" name="user:delete" icon="trash" label="Delete Account" />
 
       </ul>
     </div>
 
-    <!--        <div class="p-2 mt-auto border-top-1 surface-border">
-              <ul class="list-none p-2 m-0 hidden origin-bottom animation-duration-150">
+    <!--        <div class="p-2 mt-auto border-t border-surface">
+              <ul class="list-none p-2 m-0 hidden origin-bottom animate-duration-150">
                 <li>
                   <a v-ripple class="flex align-items-center cursor-pointer p-3 text-700 hover:surface-100
                       border-round transition-colors transition-duration-150 p-ripple">
@@ -60,9 +60,9 @@
               </ul>
               <a v-ripple class="p-3 flex align-items-center cursor-pointer text-700 hover:surface-100
                   border-round transition-colors transition-duration-150 p-ripple"
-                 v-styleclass="{ selector: '@prev', enterClass: 'hidden', enterActiveClass: 'scalein',
-                   leaveToClass: 'hidden', leaveActiveClass: 'fadeout' }">
-                <img src="/images/empty-user-photo.svg" class="mr-2 border-circle" style="width: 28px; height: 28px"/>
+                 v-styleclass="{ selector: '@prev', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein',
+                   leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout' }">
+                <img src="/images/empty-user-photo.svg" class="mr-2 rounded-full" style="width: 28px; height: 28px"/>
                 <span class="font-medium">Amy Elsner</span>
                 <i class="pi pi-chevron-up ml-auto"></i>
               </a>

package/front/src/sign/GoogleAuth.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
-    <div class="surface-card p-4 shadow-2 border-round">
+  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
 
-      <div class="text-center mb-5">
-        <div class="text-900 text-3xl font-medium mb-3">Google authentication</div>
+      <div class="text-center mb-8">
+        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Google authentication</div>
       </div>
 
       <div v-if="state === 'canceled'" class="text-center">

package/front/src/sign/GoogleAuthReturn.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
-    <div class="surface-card p-4 shadow-2 border-round">
+  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
 
-      <div class="text-center mb-5">
-        <div class="text-900 text-3xl font-medium mb-3">Google authentication</div>
+      <div class="text-center mb-8">
+        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Google authentication</div>
       </div>
 
       <div v-if="state === 'canceled'" class="text-center">

package/front/src/sign/LinkedinAuth.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
-    <div class="surface-card p-4 shadow-2 border-round">
+  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
 
-      <div class="text-center mb-5">
-        <div class="text-900 text-3xl font-medium mb-3">Linkedin authentication</div>
+      <div class="text-center mb-8">
+        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Linkedin authentication</div>
       </div>
 
       <div v-if="state === 'canceled'" class="text-center">

package/front/src/sign/LinkedinAuthReturn.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
-    <div class="surface-card p-4 shadow-2 border-round">
+  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
 
-      <div class="text-center mb-5">
-        <div class="text-900 text-3xl font-medium mb-3">Linkedin authentication</div>
+      <div class="text-center mb-8">
+        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Linkedin authentication</div>
       </div>
 
       <div v-if="state === 'canceled'" class="text-center">

package/front/src/sign/SignInEmail.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
-    <div class="surface-card p-4 shadow-2 border-round">
+  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
 
-      <div class="text-center mb-5">
-        <div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
-        <span class="text-600 font-medium line-height-3">Don't have an account?</span>
+      <div class="text-center mb-8">
+        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome Back</div>
+        <span class="text-surface-600 dark:text-surface-200 font-medium leading-normal">Don't have an account?</span>
         <router-link :to="{ name: 'user:signUpEmail' }"
                      class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">
           Create today!</router-link>
@@ -13,31 +13,31 @@
       <command-form service="passwordAuthentication" action="signInEmail" v-slot="{ data }"
                     @done="handleDone" keepOnDone v-if="isMounted">
 
-        <div class="p-field mb-3">
-          <label for="email" class="block text-900 font-medium mb-2">
+        <div class="p-field mb-4">
+          <label for="email" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
             Email address
           </label>
           <InputText id="email" type="text" class="w-full"
-                     aria-describedby="email-help" :class="{ 'p-invalid': data.emailError }"
-                     v-model="data.email" />
-          <small v-if="data.emailError" id="email-help" class="p-error">
+                     aria-describedby="email-help" :invalid="data.emailError" 
+                     v-model="data.email" />        
+          <Message v-if="data.emailError" severity="error" variant="simple" size="small">
             {{ t(`errors.${data.emailError}`) }}
-          </small>
+          </Message>
         </div>
 
-        <div class="p-field mb-3">
-          <label for="password" class="block text-900 font-medium mb-2">Password (optional)</label>
+        <div class="p-field mb-4">
+          <label for="password" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Password (optional)</label>
           <Password id="password" class="w-full" inputClass="w-full" toggleMask :feedback="false"
-                    aria-describedby="password-help" :class="{ 'p-invalid': data.passwordHashError }"
-                    v-model="data.passwordHash" />
-          <small v-if="data.passwordHashError" id="password-help" class="p-error">
+                    aria-describedby="password-help" :invalid="data.passwordHashError" 
+                    v-model="data.passwordHash" />        
+          <Message v-if="data.passwordHashError" severity="error" variant="simple" size="small">
             {{ t(`errors.${data.passwordHashError}`) }}
-          </small>
+          </Message>
         </div>
 
-        <div class="flex align-items-center justify-content-between mb-6">
+        <div class="flex items-center justify-between mb-12">
           <div></div>
-<!--          <div class="flex align-items-center">
+<!--          <div class="flex items-center">
             <Checkbox id="rememberme" :binary="true" class="mr-2" />
             <label for="rememberme">Remember me</label>
           </div>-->
@@ -51,8 +51,8 @@
 
       </command-form>
 
-      <Divider v-if="accountTypes.length > 0" align="center" class="my-4">
-        <span class="text-600 font-normal text-sm">OR</span>
+      <Divider v-if="accountTypes.length > 0" align="center" class="my-6">
+        <span class="text-surface-600 dark:text-surface-200 font-normal text-sm">OR</span>
       </Divider>
 
       <router-link v-for="accountType in accountTypes"
@@ -76,6 +76,7 @@
   import Button from "primevue/button"
   import Divider from "primevue/divider"
   import Password from "../password/Password.vue"
+  import Message from "primevue/message"
 
   import { onMounted, ref } from 'vue'
   const isMounted = ref(false)

package/front/src/sign/SignInFinished.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
-    <div class="surface-card border-round shadow-2 p-4">
-      <div class="text-900 font-medium mb-3 text-xl mb-4">Signed In</div>
-      <p class="mt-0 p-0 line-height-3">Congratulations! You have successfully logged in to your account.</p>
-      <div v-if="afterSignIn" class="flex flex-row justify-content-center align-items-center">
+  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6">
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl mb-6">Signed In</div>
+      <p class="mt-0 p-0 leading-normal">Congratulations! You have successfully logged in to your account.</p>
+      <div v-if="afterSignIn" class="flex flex-row justify-center items-center">
         <router-link :to="afterSignIn" class="no-underline">
           <Button label="Next" v-ripple />
         </router-link>
-        <p class="ml-4" v-if="isMounted && redirectTime">
+        <p class="ml-6" v-if="isMounted && redirectTime">
           Redirect in {{ pluralize('second', Math.ceil((redirectTime - currentTime) / 1000), true) }}...
         </p>
       </div>

package/front/src/sign/SignOut.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
-    <div class="surface-card border-round shadow-2 p-4">
-      <div class="text-900 font-medium mb-3 text-xl mb-4">Sign Out</div>
-      <p class="mt-0 p-0 line-height-3">Signing out</p>
-      <ProgressSpinner v-if="isMounted" class="m-3" />
+  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6">
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl mb-6">Sign Out</div>
+      <p class="mt-0 p-0 leading-normal">Signing out</p>
+      <ProgressSpinner v-if="isMounted" class="m-4" />
     </div>
   </div>
 </template>

package/front/src/sign/SignOutFinished.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
-    <div class="surface-card border-round shadow-2 p-4">
-      <div class="text-900 font-medium mb-3 text-xl mb-4">Signed Out</div>
-      <p class="mt-0 p-0 line-height-3">You have successfully signed from your account.</p>
+  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6">
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl mb-6">Signed Out</div>
+      <p class="mt-0 p-0 leading-normal">You have successfully signed from your account.</p>
     </div>
   </div>
 </template>

package/front/src/sign/SignUpEmail.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
-    <div class="surface-card p-4 shadow-2 border-round">
-      <div class="text-center mb-5">
-        <div class="text-900 text-3xl font-medium mb-3">Sign Up</div>
-        <span class="text-600 font-medium line-height-3">Already have an account?</span>
+  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
+      <div class="text-center mb-8">
+        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Sign Up</div>
+        <span class="text-surface-600 dark:text-surface-200 font-medium leading-normal">Already have an account?</span>
         <router-link :to="{ name: 'user:signInEmail' }"
                      class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">
           Sign in</router-link>
@@ -12,23 +12,23 @@
       <command-form service="messageAuthentication" action="signUpEmail" v-slot="{ data, submit }"
                     @done="handleSent" keepOnDone>
 
-        <div class="p-field mb-3">
-          <label for="email" class="block text-900 font-medium mb-2">
+        <div class="p-field mb-4">
+          <label for="email" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
             Email address
           </label>
           <InputText id="email" type="text" class="w-full"
-                     aria-describedby="email-help" :class="{ 'p-invalid': data.emailError}"
+                     aria-describedby="email-help" :invalid="!!data.emailError"
                      v-model="data.email" />
-          <small v-if="data.emailError" id="email-help" class="p-error">
+          <Message v-if="data.emailError" severity="error" variant="simple" size="small">
             {{ t(`errors.${data.emailError}`) }}
-          </small>
+          </Message>
         </div>
 
         <Button label="Sign Up with email" icon="pi pi-user" class="w-full" type="submit" />
       </command-form>
 
-      <Divider v-if="accountTypes.length > 0" align="center" class="my-4">
-        <span class="text-600 font-normal text-sm">OR</span>
+      <Divider v-if="accountTypes.length > 0" align="center" class="my-6">
+        <b>OR</b>
       </Divider>
 
       <router-link v-for="accountType in accountTypes"
@@ -41,7 +41,7 @@
         />
       </router-link>
 
-      <div class="mt-3">
+      <div class="mt-4">
         By providing your email address or google account, you consent to its processing solely
         for registration and account verification purposes, in accordance with our
         <router-link to="/privacy-policy">Privacy Policy</router-link>.
@@ -55,6 +55,7 @@
   import InputText from "primevue/inputtext"
   import Button from "primevue/button"
   import Divider from "primevue/divider"
+  import Message from "primevue/message"
 
   import { useRouter } from 'vue-router'
   const router = useRouter()