@live-change/user-frontend 0.9.32 → 0.9.33

package/front/locales/en.json

@@ -3,7 +3,9 @@
     "emailTaken": "Email is already registered, try to sign-in.",
     "phoneTaken": "Phone is already registered, try to sign-in.",
     "codeNotFound": "Secret code not recognized.",
-    "codeExpired": "Secret code expired."
+    "codeExpired": "Secret code expired.",
+    "wrongPassword": "Wrong password.",
+    "emailNotFound": "Email not found."
   },
   "app": {
     "updateAvailable": "Update available!",

package/front/src/App.vue

@@ -7,7 +7,6 @@
 </template>
 
 <script setup>
-  import 'primevue/resources/themes/lara-light-blue/theme.css'
 
   import { useLocale } from '@live-change/vue3-components'
   const locale = useLocale()
@@ -48,3 +47,35 @@
   api.validators.password = passwordValidator
 
 </script>
+
+<style>
+  @import "tailwindcss";
+  @plugin "tailwindcss-primeui";
+
+  @custom-variant dark (&:where(.app-dark-mode, .app-dark-mode *));
+
+  :root { font-family: 'Verdana', sans-serif; }
+  @supports (font-variation-settings: normal) {
+    :root { font-family: 'Verdana var', sans-serif; }
+  }
+  html,body
+  {
+    min-height:100%;
+    font-family: 'Verdana var', 'Verdana', sans-serif;
+  }
+
+  @layer base {
+    a {
+      color: var(--p-blue-700);
+      text-decoration: underline;
+    }
+    a:hover {
+      color: var(--p-blue-900);
+      text-decoration: none;
+    }
+    a:visited {
+      color: var(--p-purple-800);
+    }
+  }
+
+</style>

package/front/src/Index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9">
-    <div class="surface-card border-round shadow-2 p-4">
-      <div class="text-900 font-medium mb-3 text-xl">Test Index</div>
+  <div class="w-full lg:w-6/12 md:w-9/12">
+    <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6">
+      <div class="text-surface-900 dark:text-surface-0 text-red-500 font-medium mb-4 text-xl">Test Index</div>
       <div>
         <Button @click="testNotification" label="Add test notification" />
       </div>

package/front/src/NavBar.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="surface-overlay py-3 px-6 shadow-2 flex align-items-center justify-content-between
+  <div class="bg-surface-0 dark:bg-surface-900 py-1 px-6 shadow flex items-center justify-content-between
               relative md:sticky top-0 z-5"
        style="min-height: 80px" key="navbar">
 
     <router-link :to="{ name: 'index' }" class="no-underline text-gray-700 text-2xl font-medium">
-      <div class="flex align-items-center">
-        <img src="/images/logo.svg" class="w-3rem mr-4">
-        <span>
+      <div class="flex items-center">
+        <img src="/images/logo.svg" class="w-12 mr-6">
+        <span class="text-surface-700 dark:text-surface-400">
           User
         </span>
       </div>
@@ -14,7 +14,7 @@
 
     <div class="align-items-center flex-grow-1 justify-content-between hidden lg:block absolute lg:static w-full
                 surface-overlay left-0 top-100 z-1 shadow-2 lg:shadow-none top-menu">
-<!--      <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row-reverse">
+<!--      <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row-reverse">
         <li>
           <router-link :to="{ name: 'xml:search' }" v-ripple
                        class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900
@@ -36,14 +36,14 @@
       </ul>-->
     </div>
 
-    <div class="flex flex-grow-1"></div>
+    <div class="flex grow"></div>
 
     <NotificationsIcon />
 
     <UserIcon />
 
-    <a v-ripple class="cursor-pointer block lg:hidden text-700 p-ripple ml-2 hover:surface-100 p-2"
-       v-styleclass="{ selector: '.top-menu', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
+    <a v-ripple class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple ml-2 hover:bg-surface-100 dark:hover:bg-surface-700 p-2"
+       v-styleclass="{ selector: '.top-menu', enterFromClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
       <i class="pi pi-bars text-4xl"></i>
     </a>
 

package/front/src/SettingsTabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="surface-card p-0 m-0 list-none flex overflow-x-auto select-none">
+  <ul class="bg-surface-0 dark:bg-surface-900 p-0 m-0 list-none flex overflow-x-auto select-none">
     <li v-for="tab in tabs">
       <router-link v-ripple :to="{ name: tab.route }"
          class="cursor-pointer px-4 py-3 flex align-items-center border-bottom-2 hover:border-500

package/front/src/config.js

@@ -3,8 +3,27 @@ import deepmerge from 'deepmerge';
 import * as en from "../locales/en.js"
 import { locales as autoFormLocales } from "@live-change/frontend-auto-form"
 
+import Aura from '@primevue/themes/aura'
+
 export default {
   defaultLocale: 'en',
+
+  primeVue: {
+    theme: {
+      preset: Aura,
+      options: {
+        prefix: 'p',
+        darkModeSelector: '.app-dark-mode, .app-dark-mode *',
+        //cssLayer: false
+        cssLayer: {
+          name: "primevue",
+          order: "base, primevue",
+        },
+      }
+    },
+    ripple: true
+  },
+
   i18n: {
     messages: {
       en: deepmerge.all([

package/front/src/connected/ConnectEmail.vue

@@ -1,27 +1,29 @@
 <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">Add email</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">Add email</div>
       </div>
 
       <command-form service="messageAuthentication" action="connectEmail" v-slot="{ data }"
                     @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">{{ t(`errors.${data.emailError}`) }}</small>
+          <Message v-if="data.emailError" severity="error" variant="simple" size="small">
+            {{ t(`errors.${data.emailError}`) }}
+          </Message>
         </div>
 
         <Button label="Add Email" icon="pi pi-envelope" class="w-full" type="submit" />
 
-        <Divider align="center" class="my-4">
-          <span class="text-600 font-normal text-sm">OR</span>
+        <Divider align="center" class="my-6">
+          <span class="text-surface-600 dark:text-surface-200 font-normal text-sm">OR</span>
         </Divider>
 
         <router-link :to="{ name: 'user:connect-phone' }">
@@ -41,6 +43,7 @@
   import Checkbox from "primevue/checkbox"
   import Button from "primevue/button"
   import Divider from "primevue/divider"
+  import Message from "primevue/message"
 
   import { useRouter } from 'vue-router'
   const router = useRouter()

package/front/src/connected/ConnectFinished.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-4 text-xl">Account connected</div>
-      <div class="mt-0 p-0 line-height-3">Congratulations! You have successfully connected accounts.</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 rounded-border shadow p-6">
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-6 text-xl">Account connected</div>
+      <div class="mt-0 p-0 leading-normal">Congratulations! You have successfully connected accounts.</div>
     </div>
   </div>
 </template>

package/front/src/connected/ConnectPhone.vue

@@ -1,27 +1,29 @@
 <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">Add phone number</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">Add phone number</div>
       </div>
 
       <command-form service="messageAuthentication" action="connectPhone" v-slot="{ data }"
                     @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">
             Phone number
           </label>
           <PhoneInput id="phone" class="w-full"
                      aria-describedby="phone-help" :class="{ 'p-invalid': data.phoneError }"
                      v-model="data.phone" />
-          <small v-if="data.phoneError" id="phone-help" class="p-error">{{ t(`errors.${data.phoneError}`) }}</small>
+          <Message v-if="data.phoneError" severity="error" variant="simple" size="small">
+            {{ t(`errors.${data.phoneError}`) }}
+          </Message>
         </div>
 
         <Button label="Add Phone" icon="pi pi-mobile" class="w-full" type="submit" />
 
-        <Divider align="center" class="my-4">
-          <span class="text-600 font-normal text-sm">OR</span>
+        <Divider align="center" class="my-6">
+          <span class="text-surface-600 dark:text-surface-200 font-normal text-sm">OR</span>
         </Divider>
 
         <router-link :to="{ name: 'user:connect-email' }">
@@ -41,6 +43,8 @@
   import Checkbox from "primevue/checkbox"
   import Button from "primevue/button"
   import Divider from "primevue/divider"
+  import Message from "primevue/message"
+  
   import PhoneInput from "../phone/PhoneInput.vue"
 
   import { useI18n } from 'vue-i18n'

package/front/src/connected/Connected.vue

@@ -1,39 +1,39 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9">
+  <div class="w-full lg:w-6/12 md:w-9/12">
 
     <ConfirmPopup v-if="isMounted" />
     <Toast v-if="isMounted" />
 
-    <div class="surface-card border-round shadow-2 p-4">
-      <div class="text-900 font-medium mb-3 text-xl">Connected accounts</div>
+    <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">Connected accounts</div>
 
-      <ul class="list-none p-0 m-0 mt-5 mb-4">
+      <ul class="list-none p-0 m-0 mt-8 mb-6">
 
         <li v-for="contact in contacts"
-            class="flex flex-row align-items-center justify-content-between mb-2">
-          <div class="flex flex-row align-items-center">
+            class="flex flex-row items-center justify-between mb-2">
+          <div class="flex flex-row items-center">
             <i v-if="contact.contactType.contactType === 'email'" class="pi pi-envelope mr-2"></i>
             <i v-if="contact.contactType.contactType === 'phone'" class="pi pi-mobile mr-2"></i>
             <span v-if="contact.contactType.contactType === 'phone'"
-                  class="block text-900 font-medium text-lg">{{ formatPhoneNumber(contact.id) }}</span>
+                  class="block text-surface-900 dark:text-surface-0 font-medium text-lg">{{ formatPhoneNumber(contact.id) }}</span>
             <span v-else
-                  class="block text-900 font-medium text-lg">{{ contact.id }}</span>
+                  class="block text-surface-900 dark:text-surface-0 font-medium text-lg">{{ contact.id }}</span>
           </div>
           <Button class="p-button-text p-button-plain p-button-rounded mr-1" icon="pi pi-times"
                   v-if="canDelete"
                   @click="event => disconnectContact(event, contact)" />
         </li>
         <li v-for="account in accounts"
-            class="flex flex-row align-items-center justify-content-between mb-2">
+            class="flex flex-row items-center justify-between mb-2">
           <div v-if="account.accountType.accountType === 'google'"
-               class="flex flex-row align-items-center">
+               class="flex flex-row items-center">
             <i  class="pi pi-google mr-2"></i>
-            <span class="block text-900 font-medium text-lg">{{ account.email }}</span>
+            <span class="block text-surface-900 dark:text-surface-0 font-medium text-lg">{{ account.email }}</span>
           </div>
           <div v-else-if="account.accountType.accountType === 'linkedin'"
-               class="flex flex-row align-items-center">
+               class="flex flex-row items-center">
             <i  class="pi pi-linkedin mr-2"></i>
-            <span class="block text-900 font-medium text-lg">{{ account.name }}</span>
+            <span class="block text-surface-900 dark:text-surface-0 font-medium text-lg">{{ account.name }}</span>
           </div>
           <pre v-else>{{ account }}</pre>
           <Button class="p-button-text p-button-plain p-button-rounded mr-1" icon="pi pi-times"

package/front/src/delete/Delete.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="w-full lg:w-6/12 md:w-9/12" 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">Delete account</div>
+    <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">Delete account</div>
       </div>
 
       <div v-if="client.user">
@@ -11,7 +11,7 @@
           Account deletion is irreversible, check the box below only if you are
           100% sure that you want to delete your account.
         </p>
-        <div class="p-field-checkbox mb-3">
+        <div class="p-field-checkbox mb-4">
           <Checkbox id="deleteCheckbox" v-model="wantDelete" :binary="true" />
           <label for="deleteCheckbox" class="ml-2">I want to delete my account.</label>
         </div>

package/front/src/delete/DeleteFeedbackSent.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">Feedback sent</div>
-      <p class="mt-0 p-0 line-height-3">Thank you for your feedback.</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">Feedback sent</div>
+      <p class="mt-0 p-0 leading-normal">Thank you for your feedback.</p>
     </div>
   </div>
 </template>

package/front/src/delete/DeleteFinished.vue

@@ -1,16 +1,16 @@
 <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">Account deleted</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">Account deleted</div>
       </div>
 
-      <div class="mb-3">
+      <div class="mb-4">
         Account has been deleted, please leave feedback why you are leaving us.
       </div>
 
       <Textarea class="w-full" :autoResize="true" rows="4" cols="30" />
-      <div class="flex flex-row align-items-end">
+      <div class="flex flex-row items-end">
         <Button label="Send" icon="pi pi-send" class="ml-auto p-button-lg"></Button>
       </div>
 

package/front/src/google-access/GoogleAccess.vue

@@ -1,9 +1,9 @@
 <template>
-  <div v-if="additionalScopes.length > 0" class="w-full flex flex-row justify-content-center">
-    <div class="surface-card border-round shadow-2 p-4 w-30rem">
-      <div class="text-900 font-medium mb-3 text-xl mb-4">Google API Access</div>
+  <div v-if="additionalScopes.length > 0" class="w-full flex flex-row justify-center">
+    <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6 w-[30rem]">
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl mb-6">Google API Access</div>
       <div v-if="currentAccess.length > 0">
-        <p class="mt-0 p-0 line-height-3">
+        <p class="mt-0 p-0 leading-normal">
           You are currently granting us access to the following Google API features:
         </p>
         <ul>

package/front/src/google-access/GoogleAccessGained.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 In</div>
-      <p class="mt-0 p-0 line-height-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">Signed In</div>
+      <p class="mt-0 p-0 leading-normal">
         Congratulations! You added offline access to your account. Now your account have access to:
         <ul>
           <li v-for="access in accessList">
@@ -11,11 +11,11 @@
         </ul>
 <!--        <pre>{{ offlineAccess }}</pre>-->
       </p>
-      <div v-if="afterGoogleAccessGained" class="flex flex-row align-items-center">
+      <div v-if="afterGoogleAccessGained" class="flex flex-row items-center">
         <router-link :to="afterGoogleAccessGained" 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/identification/IdentificationSettings.vue

@@ -1,30 +1,32 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9">
-    <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">
+  <div class="w-full lg:w-6/12 md:w-9/12">
+    <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">
           Profile
         </div>
       </div>
 
-      <div class="flex flex-wrap align-items-center justify-content-center" v-if="userData !== undefined">
-        <div class="relative mb-3" @click="openImageEditor">
-          <Image v-if="userData?.image" :image="userData.image" class="mr-2 border-circle profile-image"
+      <div class="flex flex-wrap items-center justify-center" v-if="userData !== undefined">
+        <div class="relative mb-4" @click="openImageEditor">
+          <Image v-if="userData?.image" :image="userData.image" class="mr-2 rounded-full profile-image"
                  domResize width="200" height="200" />
-          <img v-else :src="identiconUrl" class="mr-2 border-circle profile-image">
+          <img v-else :src="identiconUrl" class="mr-2 rounded-full profile-image">
         </div>
         <command-form service="userIdentification" :action="updateMethod"
                       :initialValues="{ name: userData?.name }"
                       :parameters="{ image: userData?.image }" v-slot="{ data }"
                       keepOnDone @done="handleNameSaved"
-                      class="ml-3 mb-3 flex flex-column">
-          <div class="p-field flex flex-column">
+                      class="ml-4 mb-4 flex flex-col">
+          <div class="p-field flex flex-col">
             <InputText type="text" v-model="data.name"
-                       :class="{ 'p-invalid': data.nameError }"
+                       :invalid="!!data.nameError"
                        class="p-inputtext-lg" placeholder="Your name" />
-            <small v-if="data.nameError" id="currentPassword-help" class="p-error">{{ t(`errors.${data.nameError}`) }}</small>
+            <Message v-if="data.nameError" severity="error" variant="simple" size="small">
+              {{ t(`errors.${data.nameError}`) }}
+            </Message>
           </div>
-          <Button type="submit" label="Save name" class="mt-3" icon="pi pi-save" />
+          <Button type="submit" label="Save name" class="mt-4" icon="pi pi-save" />
         </command-form>
       </div>
 
@@ -39,6 +41,7 @@
   import { useDialog } from 'primevue/usedialog'
   import InputText from 'primevue/inputtext'
   import Button from 'primevue/button'
+  import Message from "primevue/message"
   const dialog = useDialog()
 
   import { shallowRef, ref, inject, computed } from 'vue'

package/front/src/identification/UserIdentification.vue

@@ -4,10 +4,10 @@
                  :to="{ name: 'user:profile', params: { user: owner } }"
                  v-ripple
                  :class="inline ? inlineClass : blockClass">
-      <Image v-if="userData?.image" :image="userData.image" class="mr-2 border-circle"
+      <Image v-if="userData?.image" :image="userData.image" class="mr-2 rounded-full"
              :style="imageStyle"/>
-      <img v-else :src="identiconUrl" class="mr-2 border-circle" :style="imageStyle" domResize />
-      <span class="text-overflow-ellipsis white-space-nowrap overflow-hidden"
+      <img v-else :src="identiconUrl" class="mr-2 rounded-full" :style="imageStyle" domResize />
+      <span class="text-ellipsis whitespace-nowrap overflow-hidden"
             :class="[ ownerType === 'user_User' ? 'font-medium' : 'font-italic' ]">
         {{ name }}
       </span>
@@ -15,15 +15,15 @@
     <span v-else-if="ownerType === 'email_Email'">
       <i class="pi pi-envelope mr-2 ml-1"
          style="font-size: 1.3rem; margin-right: 0.7rem !important; position: relative; top: 3px;" />
-      <span class="text-overflow-ellipsis white-space-nowrap overflow-hidden">
+      <span class="text-ellipsis whitespace-nowrap overflow-hidden">
         {{ owner }}
       </span>
     </span>
     <span v-else :class="inline ? inlineClass : blockClass">
-      <Image v-if="userData?.image" :image="userData.image" class="mr-2 border-circle"
+      <Image v-if="userData?.image" :image="userData.image" class="mr-2 rounded-full"
              :style="imageStyle"/>
-      <img v-else :src="identiconUrl" class="mr-2 border-circle" :style="imageStyle" domResize />
-      <span class="text-overflow-ellipsis white-space-nowrap overflow-hidden"
+      <img v-else :src="identiconUrl" class="mr-2 rounded-full" :style="imageStyle" domResize />
+      <span class="text-ellipsis whitespace-nowrap overflow-hidden"
             :class="[ ownerType === 'user_User' ? 'font-medium' : 'font-italic' ]">
         {{ name }}
       </span>
@@ -60,7 +60,7 @@
   })
 
   const inlineClass = ""
-  const blockClass = "flex align-items-center cursor-pointer text-700 hover:surface-100 border-round p-ripple"
+  const blockClass = "flex items-center cursor-pointer text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 rounded-border p-ripple"
   const inlineImageSize = '1em'
   const blockImageSize = '28px'
 

package/front/src/locale/LocaleSettings.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9">
+  <div class="w-full lg:w-6/12 md:w-9/12">
 
-    <div class="surface-card border-round shadow-2 p-4">
-      <div class="text-900 font-medium mb-3 text-xl">Locale settings</div>
+    <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">Locale settings</div>
 
       <command-form service="localeSettings" action="setOrUpdateMyLocaleSettings"
                     :initialValues="{
@@ -15,8 +15,8 @@
                     }"
                     v-slot="{ data }" keepOnDone @done="handleSettingsUpdated">
 
-        <div class="p-field mb-3">
-          <label for="title" class="block text-900 font-medium mb-2">
+        <div class="p-field mb-4">
+          <label for="title" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
             Language
           </label>
           <Dropdown v-model="data.language" :options="availableLocales"
@@ -24,9 +24,9 @@
                     :filter="availableLocales.length > 10"
                     placeholder="Auto-detect"
                     class="w-full" />
-          <small v-if="data.languageError" id="language-help" class="p-error">
+          <Message v-if="data.languageError" severity="error" variant="simple" size="small">
             {{ t(`errors.${data.languageError}`) }}
-          </small>
+          </Message>
         </div>
 
         <Button type="submit" label="Apply" class="mt-1" icon="pi pi-save" />
@@ -42,6 +42,8 @@
 </template>
 
 <script setup>
+  import Message from "primevue/message"
+
   import { usePath, live, useApi } from '@live-change/vue3-ssr'
   const api = useApi()
   const path = usePath()

package/front/src/message-auth/MessageLink.vue

@@ -1,24 +1,24 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <div class="w-full lg:w-6/12 md:w-9/12" 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="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 secret link already expired. To send another link click button below.</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 secret link already expired. To send another link click button below.</p>
       <Button label="Resend" class="p-button-lg" @click="resend"></Button>
     </div>
 
-    <div class="surface-card border-round shadow-2 p-4 flex justify-content-center" v-if="isReady">
-      <ProgressSpinner class="m-3" />
+    <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6 flex justify-center" v-if="isReady">
+      <ProgressSpinner class="m-4" />
     </div>
   </div>
 </template>