VnSmsDialog adapt style and add tooltip

src/components/common/VnSmsDialog.vue

@@ -105,15 +105,14 @@ async function send() {
                     map-options
                     :input-debounce="0"
                     rounded
-                    outlined
                     dense
                 />
             </QCardSection>
             <QCardSection class="q-pb-xs">
-                <VnInput :label="t('Phone')" v-model="phone" is-outlined />
+                <VnInput :label="t('Phone')" v-model="phone" />
             </QCardSection>
             <QCardSection class="q-pb-xs">
-                <VnInput v-model="subject" :label="t('Subject')" is-outlined />
+                <VnInput v-model="subject" :label="t('Subject')" />
             </QCardSection>
             <QCardSection class="q-mb-md" q-input>
                 <QInput
@@ -126,7 +125,6 @@ async function send() {
                     :bottom-slots="true"
                     :rules="[(value) => value.length < maxLength || 'Error!']"
                     stack-label
-                    outlined
                     autofocus
                 >
                     <template #append>
@@ -136,6 +134,11 @@ async function send() {
                             @click="message = ''"
                             class="cursor-pointer"
                         />
+                        <QIcon name="info" class="cursor-pointer">
+                            <QTooltip>
+                                {{ t('messageTooltip') }}
+                            </QTooltip>
+                        </QIcon>
                     </template>
                     <template #counter>
                         <QChip :color="color" dense>
@@ -185,12 +188,14 @@ en:
     es: Spanish
     fr: French
     pt: Portuguese
+    messageTooltip: Special characters like accents counts as multiple
 es:
     Send SMS: Enviar SMS
     Language: Idioma
     Phone: Móvil
     Subject: Asunto
     Message: Mensaje
+    messageTooltip: Carácteres especiales como acentos cuentan como varios
     templates:
         pendingPayment: 'Su pedido está pendiente de pago.
             Por favor, entre en la página web y efectue el pago con tarjeta. Muchas gracias.'
@@ -208,6 +213,7 @@ fr:
     Phone: Mobile
     Subject: Affaire
     Message: Message
+    messageTooltip: Les caractères spéciaux comme les accents comptent comme plusieurs
     templates:
         pendingPayment: 'Votre commande est en attente de paiement.
             Veuillez vous connecter sur le site web et effectuer le paiement par carte. Merci beaucoup.'
@@ -225,6 +231,7 @@ pt:
     Phone: Móvel
     Subject: Assunto
     Message: Mensagem
+    messageTooltip: Caracteres especiais como acentos contam como vários
     templates:
         pendingPayment: 'Seu pedido está pendente de pagamento.
             Por favor, acesse o site e faça o pagamento com cartão. Muito obrigado.'