From 0c3dc30b8c329273fdcc79969cea991ec9c22e06 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Tue, 12 Mar 2024 09:49:58 +0100
Subject: [PATCH 1/7] fix(styles): refs #7001 create VnTitle and correct
 background-page color

---
 src/components/common/VnTitle.vue     | 25 +++++++++++
 src/css/app.scss                      |  2 +-
 src/pages/Claim/Card/ClaimSummary.vue | 10 +++--
 src/pages/Entry/Card/EntrySummary.vue | 63 +--------------------------
 4 files changed, 34 insertions(+), 66 deletions(-)
 create mode 100644 src/components/common/VnTitle.vue

diff --git a/src/components/common/VnTitle.vue b/src/components/common/VnTitle.vue
new file mode 100644
index 000000000..1d53e47a1
--- /dev/null
+++ b/src/components/common/VnTitle.vue
@@ -0,0 +1,25 @@
+<script setup>
+const $props = defineProps({
+    url: { type: String, default: null },
+    text: { type: String, default: null },
+    icon: { type: String, default: null },
+});
+</script>
+<template>
+    <div class="titleBox">
+        <div class="header-link">
+            <a :href="$props.url" class="link">
+                {{ text }}
+                <QIcon :name="$props.icon" />
+            </a>
+        </div>
+    </div>
+</template>
+<style scoped>
+a {
+    font-size: large;
+}
+.titleBox {
+    padding-bottom: 2%;
+}
+</style>
diff --git a/src/css/app.scss b/src/css/app.scss
index 38dd642a3..459a7f2dc 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -18,7 +18,7 @@ body.body--light {
 
 body.body--dark {
     --vn-pageColor: #222;
-    --vn-SectionColor: #3c3b3b;
+    --vn-SectionColor: #403c3c;
     background-color: var(--vn-pageColor);
     --vn-text: white;
     --vn-gray: var(--vn-SectionColor);
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index bf6b57973..2d8592b6d 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -11,6 +11,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -179,10 +180,11 @@ function openDialog(dmsId) {
         </template>
         <template #body="{ entity: { claim, salesClaimed, developments } }">
             <QCard class="vn-one">
-                <a class="header header-link" :href="`#/claim/${entityId}/basic-data`">
-                    {{ t('claim.pageTitles.basicData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/claim/${entityId}/basic-data`"
+                    :text="t('claim.pageTitles.basicData')"
+                    icon="open_in_new"
+                />
                 <VnLv
                     :label="t('claim.summary.created')"
                     :value="toDate(claim.created)"
diff --git a/src/pages/Entry/Card/EntrySummary.vue b/src/pages/Entry/Card/EntrySummary.vue
index b6863f8f7..be30468d5 100644
--- a/src/pages/Entry/Card/EntrySummary.vue
+++ b/src/pages/Entry/Card/EntrySummary.vue
@@ -175,8 +175,8 @@ const fetchEntryBuys = async () => {
 
         <template #body>
             <QCard class="vn-one">
-                <a class="header header-link" :href="`#/entry/${entityId}/basic-data`">
-                    {{ t('globals.summary.basicData') }}
+                <a class="header link" :href="`#/entry/${entityId}/basic-data`">
+                    textos
                     <QIcon name="open_in_new" />
                 </a>
 
@@ -274,65 +274,6 @@ const fetchEntryBuys = async () => {
                     {{ t('entry.summary.buys') }}
                     <QIcon name="open_in_new" />
                 </a>
-                <QTable
-                    :rows="entryBuys"
-                    :columns="entriesTableColumns"
-                    hide-bottom
-                    row-key="index"
-                    class="full-width q-mt-md"
-                >
-                    <template #body="{ cols, row, rowIndex }">
-                        <QTr no-hover>
-                            <QTd v-for="col in cols" :key="col.name">
-                                <component
-                                    :is="tableColumnComponents[col.name].component(props)"
-                                    v-bind="tableColumnComponents[col.name].props(props)"
-                                    @click="tableColumnComponents[col.name].event(props)"
-                                    class="col-content"
-                                >
-                                    <template
-                                        v-if="
-                                            col.name !== 'observation' &&
-                                            col.name !== 'isConfirmed'
-                                        "
-                                        >{{ col.value }}</template
-                                    >
-                                    <QTooltip v-if="col.toolTip">{{
-                                        col.toolTip
-                                    }}</QTooltip>
-                                </component>
-                            </QTd>
-                        </QTr>
-                        <QTr no-hover>
-                            <QTd>
-                                <span>{{ row.item.itemType.code }}</span>
-                            </QTd>
-                            <QTd>
-                                <span>{{ row.item.id }}</span>
-                            </QTd>
-                            <QTd>
-                                <span>{{ row.item.size }}</span>
-                            </QTd>
-                            <QTd>
-                                <span>{{ toCurrency(row.item.minPrice) }}</span>
-                            </QTd>
-                            <QTd colspan="6">
-                                <span>{{ row.item.concept }}</span>
-                                <span v-if="row.item.subName" class="subName">
-                                    {{ row.item.subName }}
-                                </span>
-                                <fetched-tags :item="row.item" :max-length="5" />
-                            </QTd>
-                        </QTr>
-                        <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
-                        <QTr
-                            v-if="rowIndex !== entryBuys.length - 1"
-                            class="separation-row"
-                        >
-                            <QTd colspan="10" style="height: 24px" />
-                        </QTr>
-                    </template>
-                </QTable>
             </QCard>
         </template>
     </CardSummary>

From 00a47cd5b254ea73750a58176b7d275bf1e1b235 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Thu, 14 Mar 2024 15:06:06 +0100
Subject: [PATCH 2/7] refactor(style): refs #7001 add style font vnTitle vnChip

---
 src/components/NavBar.vue                     |  2 +-
 src/components/common/VnBreadcrumbs.vue       |  2 +-
 src/components/common/VnChip.vue              | 13 +++
 src/components/common/VnDmsList.vue           |  2 +-
 src/components/common/VnLog.vue               | 21 ++---
 src/components/common/VnSelectDialog.vue      |  2 +-
 src/components/common/VnSmsDialog.vue         |  5 +-
 src/components/common/VnTitle.vue             | 14 ++--
 src/components/ui/CardDescriptor.vue          | 10 +--
 src/components/ui/CardList.vue                | 16 ++--
 src/components/ui/CardSummary.vue             | 12 +--
 src/components/ui/VnSearchbar.vue             |  2 +-
 src/components/ui/VnSms.vue                   |  8 +-
 src/css/app.scss                              | 51 ++++++------
 src/css/quasar.variables.scss                 |  8 +-
 src/pages/Claim/Card/ClaimDescriptor.vue      |  6 +-
 src/pages/Claim/Card/ClaimLines.vue           | 13 +--
 src/pages/Claim/Card/ClaimSummary.vue         | 48 ++++++-----
 src/pages/Claim/ClaimList.vue                 |  6 +-
 .../Customer/Card/CustomerConsignees.vue      |  4 +-
 src/pages/Customer/Card/CustomerGreuges.vue   |  4 +-
 src/pages/Customer/Card/CustomerNotes.vue     |  4 +-
 .../Customer/Card/CustomerRecoveries.vue      |  4 +-
 src/pages/Customer/Card/CustomerSummary.vue   | 81 +++++++------------
 .../Defaulter/CustomerBalanceDueTotal.vue     |  6 +-
 .../Customer/Payments/CustomerPayments.vue    |  3 +-
 .../Department/Card/DepartmentSummary.vue     | 12 ++-
 src/pages/Entry/Card/EntryBuys.vue            |  2 +-
 src/pages/Entry/Card/EntrySummary.vue         | 25 +++---
 src/pages/Entry/EntryLatestBuysFilter.vue     |  2 +-
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue | 63 +++++++--------
 .../InvoiceOut/Card/InvoiceOutSummary.vue     | 16 +---
 src/pages/InvoiceOut/InvoiceOutGlobal.vue     |  4 +-
 src/pages/Login/VerifyEmail.vue               |  7 +-
 src/pages/Order/Card/OrderCatalogFilter.vue   |  2 +-
 src/pages/Order/Card/OrderCatalogItem.vue     |  6 +-
 src/pages/Order/Card/OrderSummary.vue         |  2 +-
 src/pages/Order/OrderCatalog.vue              |  2 +-
 src/pages/Order/OrderLines.vue                | 16 ++--
 src/pages/Order/OrderList.vue                 |  2 +-
 src/pages/Order/OrderVolume.vue               |  4 +-
 src/pages/Route/Cmr/CmrList.vue               |  1 +
 .../Supplier/Card/SupplierConsumption.vue     |  2 +-
 src/pages/Supplier/Card/SupplierContacts.vue  |  2 +-
 src/pages/Supplier/Card/SupplierSummary.vue   |  3 +-
 src/pages/Ticket/Card/TicketDescriptor.vue    |  5 +-
 src/pages/Ticket/Card/TicketSummary.vue       | 62 +++++++-------
 src/pages/Ticket/TicketList.vue               |  1 +
 src/pages/Travel/Card/TravelSummary.vue       |  5 +-
 src/pages/Travel/TravelList.vue               |  2 +
 src/pages/Worker/Card/WorkerSummary.vue       | 13 ++-
 51 files changed, 304 insertions(+), 304 deletions(-)
 create mode 100644 src/components/common/VnChip.vue

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 12366e174..c51ed3024 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -106,7 +106,7 @@ const pinnedModulesRef = ref();
     width: max-content;
 }
 .q-header {
-    background-color: var(--vn-dark);
+    background-color: var(--vn-section-color);
 }
 </style>
 <i18n>
diff --git a/src/components/common/VnBreadcrumbs.vue b/src/components/common/VnBreadcrumbs.vue
index 666f14c72..09bc198f7 100644
--- a/src/components/common/VnBreadcrumbs.vue
+++ b/src/components/common/VnBreadcrumbs.vue
@@ -71,7 +71,7 @@ function getBreadcrumb(param) {
     }
     &--last,
     &__separator {
-        color: var(--vn-label);
+        color: var(--vn-label-color);
     }
 }
 @media (max-width: $breakpoint-md) {
diff --git a/src/components/common/VnChip.vue b/src/components/common/VnChip.vue
new file mode 100644
index 000000000..dd2de2c64
--- /dev/null
+++ b/src/components/common/VnChip.vue
@@ -0,0 +1,13 @@
+<script setup>
+const $props = defineProps({
+    color: { type: String, default: null },
+    text: { type: String, default: null },
+    dense: { type: String, default: null },
+    textColor: { type: String, default: 'black' },
+});
+</script>
+<template>
+    <QChip :color="$props.color" :text-color="textColor" :dense="$props.dense">{{
+        text
+    }}</QChip>
+</template>
diff --git a/src/components/common/VnDmsList.vue b/src/components/common/VnDmsList.vue
index 5057c0790..07940274e 100644
--- a/src/components/common/VnDmsList.vue
+++ b/src/components/common/VnDmsList.vue
@@ -304,7 +304,7 @@ function parseDms(data) {
     row-gap: 20px;
 }
 .labelColor {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
 }
 </style>
 <i18n>
diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index eae391cc4..732f0e964 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -14,6 +14,7 @@ import VnJsonValue from '../common/VnJsonValue.vue';
 import FetchData from '../FetchData.vue';
 import VnSelectFilter from './VnSelectFilter.vue';
 import VnUserLink from '../ui/VnUserLink.vue';
+import VnChip from '../common/VnChip.vue';
 
 const stateStore = useStateStore();
 const validationsStore = useValidator();
@@ -443,10 +444,10 @@ setLogTree();
                 >
                     <QItemSection>
                         <QItemLabel class="model-info q-mb-xs" v-if="!byRecord">
-                            <QChip
-                                dense
+                            <VnChip
                                 size="md"
-                                class="model-name q-mr-xs text-white"
+                                text-color="white"
+                                class="model-name q-mr-xs"
                                 v-if="
                                     !(modelLog.changedModel && modelLog.changedModelId) &&
                                     modelLog.model
@@ -455,9 +456,9 @@ setLogTree();
                                     backgroundColor: useColor(modelLog.model),
                                 }"
                                 :title="modelLog.model"
-                            >
-                                {{ t(modelLog.modelI18n) }}
-                            </QChip>
+                                :text="t(modelLog.modelI18n)"
+                                dense="dense"
+                            />
                             <span class="model-id" v-if="modelLog.id"
                                 >#{{ modelLog.id }}</span
                             >
@@ -819,7 +820,7 @@ setLogTree();
 </template>
 <style lang="scss" scoped>
 .q-card {
-    background-color: var(--vn-gray);
+    background-color: var(--vn-section-color);
 }
 .q-item {
     min-height: 0px;
@@ -916,7 +917,7 @@ setLogTree();
             font-style: italic;
         }
         .model-id {
-            color: var(--vn-label);
+            color: var(--vn-label-color);
             font-size: 0.9rem;
         }
         .q-btn {
@@ -942,7 +943,7 @@ setLogTree();
     }
     .change-info {
         overflow: hidden;
-        background-color: var(--vn-dark);
+        background-color: var(--vn-section-color);
         & > .date {
             overflow: hidden;
             white-space: nowrap;
@@ -981,7 +982,7 @@ setLogTree();
         position: relative;
         overflow: hidden;
         text-overflow: ellipsis;
-        background-color: var(--vn-gray);
+        background-color: var(--vn-section-color);
         white-space: nowrap;
         box-sizing: border-box;
         & > .q-icon {
diff --git a/src/components/common/VnSelectDialog.vue b/src/components/common/VnSelectDialog.vue
index 355a25109..770173728 100644
--- a/src/components/common/VnSelectDialog.vue
+++ b/src/components/common/VnSelectDialog.vue
@@ -79,7 +79,7 @@ const toggleForm = () => {
     border-radius: 50px;
 
     &.--add-icon {
-        color: var(--vn-text);
+        color: var(--vn-text-color);
         background-color: $primary;
     }
 }
diff --git a/src/components/common/VnSmsDialog.vue b/src/components/common/VnSmsDialog.vue
index 59021cef4..3027b14c7 100644
--- a/src/components/common/VnSmsDialog.vue
+++ b/src/components/common/VnSmsDialog.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useDialogPluginComponent } from 'quasar';
 
 import VnInput from 'src/components/common/VnInput.vue';
+import VnChip from 'src/components/common/VnChip.vue';
 
 const { dialogRef, onDialogOK } = useDialogPluginComponent();
 const { t, availableLocales } = useI18n();
@@ -137,9 +138,7 @@ async function send() {
                         />
                     </template>
                     <template #counter>
-                        <QChip :color="color" dense>
-                            {{ totalLength }}/{{ maxLength }}
-                        </QChip>
+                        <VnChip :color="color" :text="totalLength + '/' + maxLength" />
                     </template>
                 </QInput>
             </QCardSection>
diff --git a/src/components/common/VnTitle.vue b/src/components/common/VnTitle.vue
index 1d53e47a1..8e994eb92 100644
--- a/src/components/common/VnTitle.vue
+++ b/src/components/common/VnTitle.vue
@@ -2,20 +2,24 @@
 const $props = defineProps({
     url: { type: String, default: null },
     text: { type: String, default: null },
-    icon: { type: String, default: null },
+    icon: { type: String, default: 'open_in_new' },
 });
 </script>
 <template>
     <div class="titleBox">
         <div class="header-link">
-            <a :href="$props.url" class="link">
-                {{ text }}
-                <QIcon :name="$props.icon" />
+            <a :href="$props.url" :class="$props.url ? 'link' : 'normalTitle'">
+                {{ $props.text }}
+                <QIcon v-if="url" :name="$props.icon" />
             </a>
         </div>
     </div>
 </template>
-<style scoped>
+<style scoped lang="scss">
+.normalTitle {
+    color: whitesmoke;
+    cursor: auto;
+}
 a {
     font-size: large;
 }
diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index c53193e6f..e5e4baae4 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -171,7 +171,7 @@ const emit = defineEmits(['onFetch']);
 
 <style lang="scss">
 .body {
-    background-color: var(--vn-gray);
+    background-color: var(--vn-section-color);
     .text-h5 {
         padding-top: 5px;
         padding-bottom: 5px;
@@ -187,7 +187,7 @@ const emit = defineEmits(['onFetch']);
         display: flex;
         padding: 2px 16px;
         .label {
-            color: var(--vn-label);
+            color: var(--vn-label-color);
             font-size: 12px;
 
             &:not(:has(a))::after {
@@ -195,7 +195,7 @@ const emit = defineEmits(['onFetch']);
             }
         }
         .value {
-            color: var(--vn-text);
+            color: var(--vn-text-color);
             font-size: 14px;
             margin-left: 12px;
             overflow: hidden;
@@ -220,13 +220,13 @@ const emit = defineEmits(['onFetch']);
     }
 }
 .subtitle {
-    color: var(--vn-text);
+    color: var(--vn-text-color);
     font-size: 16px;
     margin-bottom: 15px;
 }
 .list-box {
     .q-item__label {
-        color: var(--vn-label);
+        color: var(--vn-label-color);
     }
 }
 .descriptor {
diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue
index eba69a952..9779c58eb 100644
--- a/src/components/ui/CardList.vue
+++ b/src/components/ui/CardList.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
+import VnChip from 'src/components/common/VnChip.vue';
 
 const { t } = useI18n();
 
@@ -28,9 +29,12 @@ const toggleCardCheck = (item) => {
                         <div class="title text-primary text-weight-bold text-h5">
                             {{ $props.title }}
                         </div>
-                        <QChip class="q-chip-color" outline size="sm">
-                            {{ t('ID') }}: {{ $props.id }}
-                        </QChip>
+                        <VnChip
+                            :text="'ID:' + $props.id"
+                            class="q-chip-color"
+                            outline
+                            size="sm"
+                        />
                     </div>
                     <QCheckbox
                         v-if="showCheckbox"
@@ -61,7 +65,7 @@ const toggleCardCheck = (item) => {
 }
 
 .q-chip-color {
-    color: var(--vn-label);
+    color: var(--vn-label-color) !important;
 }
 
 .card-list-body {
@@ -75,7 +79,7 @@ const toggleCardCheck = (item) => {
         width: 50%;
         .label {
             width: 35%;
-            color: var(--vn-label);
+            color: var(--vn-label-color);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -117,7 +121,7 @@ const toggleCardCheck = (item) => {
     transition: background-color 0.2s;
 }
 .card:hover {
-    background-color: var(--vn-gray);
+    background-color: var(--vn-section-color);
 }
 .list-items {
     width: 75%;
diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index aeca84c80..226981408 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -87,7 +87,7 @@ watch(props, async () => {
         justify-content: space-evenly;
         gap: 10px;
         padding: 10px;
-        background-color: var(--vn-gray);
+        background-color: var(--vn-section-color);
 
         > .q-card.vn-one {
             flex: 1;
@@ -104,7 +104,7 @@ watch(props, async () => {
 
         > .q-card {
             width: 100%;
-            background-color: var(--vn-gray);
+            background-color: var(--vn-section-color);
             padding: 7px;
             font-size: 16px;
             min-width: 275px;
@@ -114,7 +114,7 @@ watch(props, async () => {
                 flex-direction: row;
                 margin-top: 2px;
                 .label {
-                    color: var(--vn-label);
+                    color: var(--vn-label-color);
                     width: 8em;
                     overflow: hidden;
                     white-space: nowrap;
@@ -124,7 +124,7 @@ watch(props, async () => {
                     flex-shrink: 0;
                 }
                 .value {
-                    color: var(--vn-text);
+                    color: var(--vn-text-color);
                     overflow: hidden;
                 }
             }
@@ -143,12 +143,12 @@ watch(props, async () => {
                 margin-bottom: 9px;
                 & .q-checkbox__label {
                     margin-left: 31px;
-                    color: var(--vn-text);
+                    color: var(--vn-text-color);
                 }
                 & .q-checkbox__inner {
                     position: absolute;
                     left: 0;
-                    color: var(--vn-label);
+                    color: var(--vn-label-color);
                 }
             }
         }
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index f06b44334..ee0313143 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -158,7 +158,7 @@ async function search() {
 }
 #searchbar {
     .q-field--standout.q-field--highlighted .q-field__control {
-        background-color: var(--vn-text);
+        background-color: var(--vn-text-color);
     }
 }
 </style>
diff --git a/src/components/ui/VnSms.vue b/src/components/ui/VnSms.vue
index ceb24b2bb..d45eef103 100644
--- a/src/components/ui/VnSms.vue
+++ b/src/components/ui/VnSms.vue
@@ -4,6 +4,7 @@ import { date } from 'quasar';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import VnChip from '../common/VnChip.vue';
 
 const $props = defineProps({
     url: { type: String, default: null },
@@ -89,15 +90,14 @@ function formatNumber(number) {
                                     )
                                 }}</QItemLabel>
                                 <QItemLabel class="row center">
-                                    <QChip
+                                    <VnChip
                                         :color="
                                             row.sms.status == 'OK'
                                                 ? 'positive'
                                                 : 'negative'
                                         "
-                                    >
-                                        {{ row.sms.status }}
-                                    </QChip>
+                                        :text="row.sms.status"
+                                    />
                                 </QItemLabel>
                             </QItemSection>
                         </QItem>
diff --git a/src/css/app.scss b/src/css/app.scss
index 459a7f2dc..7d8a29920 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -2,29 +2,24 @@
 @import './icons.scss';
 
 body.body--light {
-    --fount-color: black;
-    --vn-sectionColor: #ffffff;
-    --vn-pageColor: #e0e0e0;
-    background-color: var(--vn-pageColor);
+    --font-color: black;
+    --vn-section-color: #e0e0e0;
+    --vn-page-color: #ffffff;
+    background-color: #ffffff;
     .q-header .q-toolbar {
-        color: var(--fount-color);
+        color: var(--font-color);
     }
-    --vn-text: var(--fount-color);
-    --vn-gray: var(--vn-sectionColor);
-    --vn-label: #5f5f5f;
-    --vn-dark: var(--vn-sectionColor);
-    --vn-light-gray: #e7e3e3;
+    --vn-text-color: var(--font-color);
+    --vn-label-color: #5f5f5f;
+    --vn-accent-color: #e7e3e3;
 }
 
 body.body--dark {
-    --vn-pageColor: #222;
-    --vn-SectionColor: #403c3c;
-    background-color: var(--vn-pageColor);
-    --vn-text: white;
-    --vn-gray: var(--vn-SectionColor);
-    --vn-label: #a8a8a8;
-    --vn-dark: var(--vn-SectionColor);
-    --vn-light-gray: #424242;
+    --vn-section-color: #403c3c;
+    background-color: #222;
+    --vn-text-color: white;
+    --vn-label-color: #a8a8a8;
+    --vn-accent-color: #424242;
 }
 
 a {
@@ -59,19 +54,23 @@ a {
 // Removes chrome autofill background
 input:-webkit-autofill,
 select:-webkit-autofill {
-    color: var(--vn-text);
+    color: var(--vn-text-color);
     font-family: $typography-font-family;
-    -webkit-text-fill-color: var(--vn-text);
+    -webkit-text-fill-color: var(--vn-text-color);
     -webkit-background-clip: text !important;
     background-clip: text !important;
 }
 
 .bg-vn-dark {
-    background-color: var(--vn-dark);
+    background-color: var(--vn-section-color);
+}
+
+.bg-vn-dark {
+    background-color: var(--vn-section-color);
 }
 
 .color-vn-text {
-    color: var(--vn-text);
+    color: var(--vn-text-color);
 }
 
 .color-vn-white {
@@ -79,8 +78,8 @@ select:-webkit-autofill {
 }
 
 .vn-card {
-    background-color: var(--vn-gray);
-    color: var(--vn-text);
+    background-color: var(--vn-section-color);
+    color: var(--vn-text-color);
     border-radius: 8px;
 }
 
@@ -90,11 +89,11 @@ select:-webkit-autofill {
 }
 
 .bg-vn-primary-row {
-    background-color: var(--vn-dark);
+    background-color: var(--vn-section-color);
 }
 
 .bg-vn-secondary-row {
-    background-color: var(--vn-light-gray);
+    background-color: var(--vn-accent-color);
 }
 
 /* Estilo para el asterisco en campos requeridos */
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index b70e3e8d0..8423a9a35 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -14,10 +14,10 @@
 // Tip: to add new colors https://quasar.dev/style/color-palette/#adding-your-own-colors
 $primary: #ec8916;
 $secondary: $primary;
-$positive: #21ba45;
-$negative: #c10015;
-$info: #31ccec;
-$warning: #f2c037;
+$positive: #c8e484;
+$negative: #fb5252;
+$info: #84d0e2;
+$warning: #f4b974;
 // Pendiente de cuadrar con la base de datos
 $success: $positive;
 $alert: $negative;
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index b5b9aae99..968f1e294 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -107,7 +107,11 @@ onMounted(async () => {
         <template #body="{ entity }">
             <VnLv v-if="entity.claimState" :label="t('claim.card.state')">
                 <template #value>
-                    <QBadge :color="stateColor(entity.claimState.code)" dense>
+                    <QBadge
+                        :color="stateColor(entity.claimState.code)"
+                        text-color="black"
+                        dense
+                    >
                         {{ entity.claimState.description }}
                     </QBadge>
                 </template>
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index 90dd31199..248b5a69a 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -12,6 +12,7 @@ import FetchData from 'components/FetchData.vue';
 import VnDiscount from 'components/common/vnDiscount.vue';
 import ClaimLinesImport from './ClaimLinesImport.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import VnChip from 'src/components/common/VnChip.vue';
 
 const quasar = useQuasar();
 const route = useRoute();
@@ -161,16 +162,16 @@ function showImportDialog() {
         <div class="row q-gutter-md">
             <div>
                 {{ t('Amount') }}
-                <QChip :dense="$q.screen.lt.sm">
-                    {{ toCurrency(amount) }}
-                </QChip>
+                <VnChip :dense="$q.screen.lt.sm" :text="toCurrency(amount)" />
             </div>
             <QSeparator dark vertical />
             <div>
                 {{ t('Amount Claimed') }}
-                <QChip color="positive" :dense="$q.screen.lt.sm">
-                    {{ toCurrency(amountClaimed) }}
-                </QChip>
+                <VnChip
+                    color="positive"
+                    :dense="$q.screen.lt.sm"
+                    :text="toCurrency(amountClaimed)"
+                />
             </div>
         </div>
     </Teleport>
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 2d8592b6d..4e690526b 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -12,6 +12,7 @@ import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
+import VnChip from 'src/components/common/VnChip.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -183,7 +184,6 @@ function openDialog(dmsId) {
                 <VnTitle
                     :url="`#/claim/${entityId}/basic-data`"
                     :text="t('claim.pageTitles.basicData')"
-                    icon="open_in_new"
                 />
                 <VnLv
                     :label="t('claim.summary.created')"
@@ -191,9 +191,11 @@ function openDialog(dmsId) {
                 />
                 <VnLv :label="t('claim.summary.state')">
                     <template #value>
-                        <QChip :color="stateColor(claim.claimState.code)" dense>
-                            {{ claim.claimState.description }}
-                        </QChip>
+                        <VnChip
+                            :color="stateColor(claim.claimState.code)"
+                            :text="claim.claimState.description"
+                            dense="dense"
+                        />
                     </template>
                 </VnLv>
                 <VnLv :label="t('globals.salesPerson')">
@@ -227,10 +229,10 @@ function openDialog(dmsId) {
                 />
             </QCard>
             <QCard class="vn-three">
-                <a class="header header-link" :href="`#/claim/${entityId}/notes`">
-                    {{ t('claim.summary.notes') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/claim/${entityId}/notes`"
+                    :text="t('claim.summary.notes')"
+                />
                 <ClaimNotes
                     :id="entityId"
                     :add-note="false"
@@ -239,10 +241,10 @@ function openDialog(dmsId) {
                 />
             </QCard>
             <QCard class="vn-two" v-if="salesClaimed.length > 0">
-                <a class="header header-link" :href="`#/claim/${entityId}/lines`">
-                    {{ t('claim.summary.details') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/claim/${entityId}/lines`"
+                    :text="t('claim.summary.details')"
+                />
                 <QTable
                     :columns="detailsColumns"
                     :rows="salesClaimed"
@@ -281,11 +283,10 @@ function openDialog(dmsId) {
                 </QTable>
             </QCard>
             <QCard class="vn-two" v-if="developments.length > 0">
-                <a class="header header-link" :href="claimUrl + 'development'">
-                    {{ t('claim.summary.development') }}
-                    <QIcon name="open_in_new" />
-                </a>
-
+                <VnTitle
+                    :url="claimUrl + 'development'"
+                    :text="t('claim.summary.development')"
+                />
                 <QTable
                     :columns="developmentColumns"
                     :rows="developments"
@@ -304,10 +305,10 @@ function openDialog(dmsId) {
                 </QTable>
             </QCard>
             <QCard class="vn-max" v-if="claimDms.length > 0">
-                <a class="header header-link" :href="`#/claim/${entityId}/photos`">
-                    {{ t('claim.summary.photos') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/claim/${entityId}/photos`"
+                    :text="t('claim.summary.photos')"
+                />
                 <div class="container">
                     <div
                         class="multimedia-container"
@@ -347,10 +348,7 @@ function openDialog(dmsId) {
             </QCard>
 
             <QCard class="vn-max">
-                <a class="header header-link" :href="claimUrl + 'action'">
-                    {{ t('claim.summary.actions') }}
-                    <QIcon name="open_in_new" class="link" />
-                </a>
+                <VnTitle :url="claimUrl + 'action'" :text="t('claim.summary.actions')" />
                 <div id="slider-container" class="q-px-xl q-py-md">
                     <QSlider
                         v-model="claim.responsibility"
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 6a793314f..f8ba8d541 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -108,7 +108,11 @@ function navigate(event, id) {
                             />
                             <VnLv :label="t('claim.list.state')">
                                 <template #value>
-                                    <QBadge :color="stateColor(row.stateCode)" dense>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
                                         {{ row.stateDescription }}
                                     </QBadge>
                                 </template>
diff --git a/src/pages/Customer/Card/CustomerConsignees.vue b/src/pages/Customer/Card/CustomerConsignees.vue
index ad666ff32..6713d53a3 100644
--- a/src/pages/Customer/Card/CustomerConsignees.vue
+++ b/src/pages/Customer/Card/CustomerConsignees.vue
@@ -150,14 +150,14 @@ const toCustomerConsigneeEdit = (consigneeId) => {
 
 <style lang="scss" scoped>
 .consignees-card {
-    border: 2px solid var(--vn-light-gray);
+    border: 2px solid var(--vn-accent-color);
     border-radius: 10px;
     padding: 10px;
     display: flex;
     cursor: pointer;
 
     &:hover {
-        background-color: var(--vn-light-gray);
+        background-color: var(--vn-accent-color);
     }
 }
 </style>
diff --git a/src/pages/Customer/Card/CustomerGreuges.vue b/src/pages/Customer/Card/CustomerGreuges.vue
index d92d7b4ee..158f418ba 100644
--- a/src/pages/Customer/Card/CustomerGreuges.vue
+++ b/src/pages/Customer/Card/CustomerGreuges.vue
@@ -180,13 +180,13 @@ const toCustomerGreugeCreate = () => {
 
 <style lang="scss">
 .consignees-card {
-    border: 2px solid var(--vn-light-gray);
+    border: 2px solid var(--vn-accent-color);
     border-radius: 10px;
     padding: 10px;
 }
 
 .label-color {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
 }
 </style>
 
diff --git a/src/pages/Customer/Card/CustomerNotes.vue b/src/pages/Customer/Card/CustomerNotes.vue
index 781c57e50..9c1a07ca3 100644
--- a/src/pages/Customer/Card/CustomerNotes.vue
+++ b/src/pages/Customer/Card/CustomerNotes.vue
@@ -85,12 +85,12 @@ const toCustomerNoteCreate = () => {
 
 <style lang="scss">
 .custom-border {
-    border: 2px solid var(--vn-light-gray);
+    border: 2px solid var(--vn-accent-color);
     border-radius: 10px;
     padding: 10px;
 }
 
 .label-color {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
 }
 </style>
diff --git a/src/pages/Customer/Card/CustomerRecoveries.vue b/src/pages/Customer/Card/CustomerRecoveries.vue
index 7247145f2..886968290 100644
--- a/src/pages/Customer/Card/CustomerRecoveries.vue
+++ b/src/pages/Customer/Card/CustomerRecoveries.vue
@@ -137,13 +137,13 @@ const toCustomerRecoverieCreate = () => {
 
 <style lang="scss">
 .consignees-card {
-    border: 2px solid var(--vn-light-gray);
+    border: 2px solid var(--vn-accent-color);
     border-radius: 10px;
     padding: 10px;
 }
 
 .label-color {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
 }
 </style>
 
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 184b990b6..504404f5a 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -7,6 +7,7 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import { getUrl } from 'src/composables/getUrl';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -62,10 +63,10 @@ const creditWarning = computed(() => {
     <CardSummary ref="summary" :url="`Clients/${entityId}/summary`">
         <template #body="{ entity }">
             <QCard class="vn-one">
-                <a class="header header-link" :href="`#/customer/${entityId}/basic-data`">
-                    {{ t('customer.summary.basicData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/customer/${entityId}/basic-data`"
+                    :text="t('customer.summary.basicData')"
+                />
                 <VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
                 <VnLv :label="t('customer.summary.name')" :value="entity.name" />
                 <VnLv :label="t('customer.summary.contact')" :value="entity.contact" />
@@ -96,13 +97,10 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a
-                    class="header header-link"
-                    :href="`#/customer/${entityId}/fiscal-data`"
-                >
-                    {{ t('customer.summary.fiscalAddress') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/customer/${entityId}/fiscal-data`"
+                    :text="t('customer.summary.fiscalAddress')"
+                />
                 <VnLv
                     :label="t('customer.summary.socialName')"
                     :value="entity.socialName"
@@ -124,14 +122,10 @@ const creditWarning = computed(() => {
                 <VnLv :label="t('customer.summary.street')" :value="entity.street" />
             </QCard>
             <QCard class="vn-one">
-                <a
-                    class="header header-link"
-                    :href="`#/customer/${entityId}/fiscal-data`"
-                    link
-                >
-                    {{ t('customer.summary.fiscalData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/customer/${entityId}/fiscal-data`"
+                    :text="t('customer.summary.fiscalData')"
+                />
                 <QCheckbox
                     :label="t('customer.summary.isEqualizated')"
                     v-model="entity.isEqualizated"
@@ -169,14 +163,10 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a
-                    class="header header-link"
-                    :href="`#/customer/${entityId}/billing-data`"
-                    link
-                >
-                    {{ t('customer.summary.billingData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/customer/${entityId}/billing-data`"
+                    :text="t('customer.summary.billingData')"
+                />
                 <VnLv
                     :label="t('customer.summary.payMethod')"
                     :value="entity.payMethod.name"
@@ -202,14 +192,10 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one" v-if="entity.defaultAddress">
-                <a
-                    class="header header-link"
-                    :href="`#/customer/${entityId}/consignees`"
-                    link
-                >
-                    {{ t('customer.summary.consignee') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/customer/${entityId}/consignees`"
+                    :text="t('customer.summary.consignee')"
+                />
                 <VnLv
                     :label="t('customer.summary.addressName')"
                     :value="entity.defaultAddress.nickname"
@@ -224,10 +210,10 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one" v-if="entity.account">
-                <a class="header header-link" :href="`#/customer/${entityId}/web-access`">
-                    {{ t('customer.summary.webAccess') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/customer/${entityId}/web-access`"
+                    :text="t('customer.summary.webAccess')"
+                />
                 <VnLv
                     :label="t('customer.summary.username')"
                     :value="entity.account.name"
@@ -239,9 +225,7 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one" v-if="entity.account">
-                <div class="header header-link">
-                    {{ t('customer.summary.businessData') }}
-                </div>
+                <VnTitle :text="t('customer.summary.businessData')" />
                 <VnLv
                     :label="t('customer.summary.totalGreuge')"
                     :value="toCurrency(entity.totalGreuge)"
@@ -266,14 +250,11 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one" v-if="entity.account">
-                <a
-                    class="header header-link"
-                    :href="`https://grafana.verdnatura.es/d/40buzE4Vk/comportamiento-pagos-clientes?orgId=1&var-clientFk=${entityId}`"
-                    link
-                >
-                    {{ t('customer.summary.financialData') }}
-                    <QIcon name="vn:grafana" />
-                </a>
+                <VnTitle
+                    :url="`https://grafana.verdnatura.es/d/40buzE4Vk/comportamiento-pagos-clientes?orgId=1&var-clientFk=${entityId}`"
+                    :text="t('customer.summary.financialData')"
+                    icon="vn:grafana"
+                />
                 <VnLv
                     :label="t('customer.summary.risk')"
                     :value="toCurrency(entity?.debt?.debt)"
diff --git a/src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue b/src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue
index c4a50a10f..c49ed5e32 100644
--- a/src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue
+++ b/src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue
@@ -30,16 +30,16 @@ const { t } = useI18n();
     border: 1px solid black;
 }
 .title_balance {
-    color: var(--vn-text);
+    color: var(--vn-text-color);
     margin-top: 0;
     margin-bottom: 0;
 }
 .key_balance {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
     margin-bottom: 0;
 }
 .value_balance {
-    color: var(--vn-text);
+    color: var(--vn-text-color);
     margin-bottom: 0;
 }
 </style>
diff --git a/src/pages/Customer/Payments/CustomerPayments.vue b/src/pages/Customer/Payments/CustomerPayments.vue
index eedaaf137..5a0404eef 100644
--- a/src/pages/Customer/Payments/CustomerPayments.vue
+++ b/src/pages/Customer/Payments/CustomerPayments.vue
@@ -196,7 +196,7 @@ function stateColor(row) {
                         </template>
                         <template #body-cell-state="{ row }">
                             <QTd auto-width class="text-center">
-                                <QBadge :color="stateColor(row)">
+                                <QBadge text-color="black" :color="stateColor(row)">
                                     {{
                                         row.isConfirmed
                                             ? t('Confirmed')
@@ -227,6 +227,7 @@ function stateColor(row) {
                                                                 v-if="col.name == 'state'"
                                                             >
                                                                 <QBadge
+                                                                    text-color="black"
                                                                     :color="
                                                                         stateColor(row)
                                                                     "
diff --git a/src/pages/Department/Card/DepartmentSummary.vue b/src/pages/Department/Card/DepartmentSummary.vue
index d6fac56c6..1d42183c3 100644
--- a/src/pages/Department/Card/DepartmentSummary.vue
+++ b/src/pages/Department/Card/DepartmentSummary.vue
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
 import { getUrl } from 'src/composables/getUrl';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -36,13 +37,10 @@ onMounted(async () => {
         </template>
         <template #body="{ entity: department }">
             <QCard class="column">
-                <a
-                    class="header header-link"
-                    :href="`#/department/department/${entityId}/basic-data`"
-                >
-                    {{ t('Basic data') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/department/department/${entityId}/basic-data`"
+                    :text="t('Basic data')"
+                />
                 <div class="full-width row wrap justify-between content-between">
                     <div class="column" style="min-width: 50%">
                         <VnLv
diff --git a/src/pages/Entry/Card/EntryBuys.vue b/src/pages/Entry/Card/EntryBuys.vue
index 679afff1b..bd3bab78b 100644
--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@@ -449,7 +449,7 @@ const showLockIcon = (groupingMode, mode) => {
 
 <style lang="scss" scoped>
 .separation-row {
-    background-color: var(--vn-gray) !important;
+    background-color: var(--vn-section-color) !important;
 }
 .grid-style-transition {
     transition: transform 0.28s, background-color 0.28s;
diff --git a/src/pages/Entry/Card/EntrySummary.vue b/src/pages/Entry/Card/EntrySummary.vue
index be30468d5..d89d7cf87 100644
--- a/src/pages/Entry/Card/EntrySummary.vue
+++ b/src/pages/Entry/Card/EntrySummary.vue
@@ -5,9 +5,8 @@ import { useI18n } from 'vue-i18n';
 
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import VnRow from 'components/ui/VnRow.vue';
 import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
-import FetchedTags from 'components/ui/FetchedTags.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 import { toDate, toCurrency } from 'src/filters';
 import { getUrl } from 'src/composables/getUrl';
@@ -164,7 +163,7 @@ const fetchEntryBuys = async () => {
         :url="`Entries/${entityId}/getEntry`"
         @on-fetch="(data) => setEntryData(data)"
     >
-        <template #header-left>
+        <template>
             <a class="header-link" :href="entryUrl">
                 <QIcon name="open_in_new" color="white" size="sm" />
             </a>
@@ -175,10 +174,10 @@ const fetchEntryBuys = async () => {
 
         <template #body>
             <QCard class="vn-one">
-                <a class="header link" :href="`#/entry/${entityId}/basic-data`">
-                    textos
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/entry/${entityId}/basic-data`"
+                    :text="t('basic data')"
+                />
 
                 <VnLv :label="t('entry.summary.commission')" :value="entry.commission" />
 
@@ -219,10 +218,7 @@ const fetchEntryBuys = async () => {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a class="header header-link" :href="entryUrl">
-                    {{ t('Travel data') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle :url="entryUrl" :text="t('Travel data')" />
 
                 <VnLv :label="t('entry.summary.travelReference')">
                     <template #value>
@@ -270,10 +266,7 @@ const fetchEntryBuys = async () => {
                 />
             </QCard>
             <QCard class="vn-two" style="min-width: 100%">
-                <a class="header header-link">
-                    {{ t('entry.summary.buys') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle :text="t('entry.summary.buys')" />
             </QCard>
         </template>
     </CardSummary>
@@ -281,7 +274,7 @@ const fetchEntryBuys = async () => {
 
 <style lang="scss" scoped>
 .separation-row {
-    background-color: var(--vn-gray) !important;
+    background-color: var(--vn-section-color) !important;
 }
 </style>
 
diff --git a/src/pages/Entry/EntryLatestBuysFilter.vue b/src/pages/Entry/EntryLatestBuysFilter.vue
index 23361ffb3..5eaf001d8 100644
--- a/src/pages/Entry/EntryLatestBuysFilter.vue
+++ b/src/pages/Entry/EntryLatestBuysFilter.vue
@@ -412,7 +412,7 @@ const removeTag = (index, params, search) => {
         width: 60px;
         height: 60px;
         font-size: 1.4rem;
-        background-color: var(--vn-light-gray);
+        background-color: var(--vn-accent-color);
 
         &.active {
             background-color: $primary;
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index 6d2d11509..e30d9151c 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -6,6 +6,8 @@ import { toCurrency, toDate } from 'src/filters';
 import { getUrl } from 'src/composables/getUrl';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnChip from 'src/components/common/VnChip.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 onMounted(async () => {
     salixUrl.value = await getUrl('');
@@ -209,10 +211,10 @@ function getLink(param) {
             <!--Basic Data-->
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header header-link" :href="getLink('basic-data')">
-                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" />
-                    </a>
+                    <VnTitle
+                        :url="getLink('basic-data')"
+                        :text="t('invoiceIn.pageTitles.basicData')"
+                    />
                 </QCardSection>
                 <VnLv
                     :label="t('invoiceIn.summary.supplier')"
@@ -233,10 +235,10 @@ function getLink(param) {
             </QCard>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header header-link" :href="getLink('basic-data')">
-                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" />
-                    </a>
+                    <VnTitle
+                        :url="getLink('basic-data')"
+                        :text="t('invoiceIn.pageTitles.basicData')"
+                    />
                 </QCardSection>
                 <VnLv
                     :ellipsis-value="false"
@@ -258,10 +260,10 @@ function getLink(param) {
             </QCard>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header header-link" :href="getLink('basic-data')">
-                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" />
-                    </a>
+                    <VnTitle
+                        :url="getLink('basic-data')"
+                        :text="t('invoiceIn.pageTitles.basicData')"
+                    />
                 </QCardSection>
                 <VnLv
                     :label="t('invoiceIn.summary.sage')"
@@ -283,10 +285,10 @@ function getLink(param) {
             </QCard>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header header-link" :href="getLink('basic-data')">
-                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" />
-                    </a>
+                    <VnTitle
+                        :url="getLink('basic-data')"
+                        :text="t('invoiceIn.pageTitles.basicData')"
+                    />
                 </QCardSection>
                 <QCardSection class="q-pa-none">
                     <div class="bordered q-px-sm q-mx-auto">
@@ -300,7 +302,7 @@ function getLink(param) {
                         />
                         <VnLv :label="t('invoiceIn.summary.dueTotal')">
                             <template #value>
-                                <QChip
+                                <VnChip
                                     dense
                                     class="q-pa-xs"
                                     :color="amountsNotMatch ? 'negative' : 'transparent'"
@@ -309,9 +311,8 @@ function getLink(param) {
                                             ? t('invoiceIn.summary.noMatch')
                                             : t('invoiceIn.summary.dueTotal')
                                     "
-                                >
-                                    {{ toCurrency(invoiceIn.totals.totalDueDay) }}
-                                </QChip>
+                                    :text="toCurrency(invoiceIn.totals.totalDueDay)"
+                                />
                             </template>
                         </VnLv>
                     </div>
@@ -319,10 +320,7 @@ function getLink(param) {
             </QCard>
             <!--Vat-->
             <QCard v-if="invoiceIn.invoiceInTax.length">
-                <a class="header header-link" :href="getLink('vat')">
-                    {{ t('invoiceIn.card.vat') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle :url="getLink('vat')" :text="t('invoiceIn.card.vat')" />
                 <QTable
                     :columns="vatColumns"
                     :rows="invoiceIn.invoiceInTax"
@@ -352,10 +350,7 @@ function getLink(param) {
             </QCard>
             <!--Due Day-->
             <QCard v-if="invoiceIn.invoiceInDueDay.length">
-                <a class="header header-link" :href="getLink('due-day')">
-                    {{ t('invoiceIn.card.dueDay') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle :url="getLink('due-day')" :text="t('invoiceIn.card.dueDay')" />
                 <QTable
                     class="full-width"
                     :columns="dueDayColumns"
@@ -382,10 +377,10 @@ function getLink(param) {
             </QCard>
             <!--Intrastat-->
             <QCard v-if="invoiceIn.invoiceInIntrastat.length">
-                <a class="header header-link" :href="getLink('intrastat')">
-                    {{ t('invoiceIn.card.intrastat') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="getLink('intrastat')"
+                    :text="t('invoiceIn.card.intrastat')"
+                />
                 <QTable
                     :columns="intrastatColumns"
                     :rows="invoiceIn.invoiceInIntrastat"
@@ -415,10 +410,10 @@ function getLink(param) {
 </template>
 <style lang="scss" scoped>
 .bg {
-    background-color: var(--vn-light-gray);
+    background-color: var(--vn-accent-color);
 }
 .bordered {
-    border: 1px solid var(--vn-text);
+    border: 1px solid var(--vn-text-color);
     max-width: 18em;
 }
 </style>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
index 73acc0ad1..311b029ad 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
@@ -7,6 +7,7 @@ import { toCurrency, toDate } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { getUrl } from 'src/composables/getUrl';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 onMounted(async () => {
     fetch();
@@ -101,10 +102,7 @@ const ticketsColumns = ref([
         </template>
         <template #body="{ entity: { invoiceOut } }">
             <QCard class="vn-one">
-                <a class="header header-link">
-                    {{ t('invoiceOut.pageTitles.basicData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle :text="t('invoiceOut.pageTitles.basicData')" />
                 <VnLv
                     :label="t('invoiceOut.summary.issued')"
                     :value="toDate(invoiceOut.issued)"
@@ -127,10 +125,7 @@ const ticketsColumns = ref([
                 />
             </QCard>
             <QCard class="vn-three">
-                <a class="header header-link">
-                    {{ t('invoiceOut.summary.taxBreakdown') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle :text="t('invoiceOut.summary.taxBreakdown')" />
                 <QTable :columns="taxColumns" :rows="invoiceOut.taxesBreakdown" flat>
                     <template #header="props">
                         <QTr :props="props">
@@ -142,10 +137,7 @@ const ticketsColumns = ref([
                 </QTable>
             </QCard>
             <QCard class="vn-three">
-                <a class="header header-link">
-                    {{ t('invoiceOut.summary.tickets') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle :text="t('invoiceOut.summary.tickets')" />
                 <QTable v-if="tickets" :columns="ticketsColumns" :rows="tickets" flat>
                     <template #header="props">
                         <QTr :props="props">
diff --git a/src/pages/InvoiceOut/InvoiceOutGlobal.vue b/src/pages/InvoiceOut/InvoiceOutGlobal.vue
index 7e2b43a76..6378ff8e5 100644
--- a/src/pages/InvoiceOut/InvoiceOutGlobal.vue
+++ b/src/pages/InvoiceOut/InvoiceOutGlobal.vue
@@ -156,7 +156,7 @@ onUnmounted(() => {
     display: flex;
     justify-content: center;
     width: 100%;
-    background-color: var(--vn-dark);
+    background-color: var(--vn-section-color);
     padding: 16px;
 
     .card-section {
@@ -167,7 +167,7 @@ onUnmounted(() => {
 
     .text {
         font-size: 14px;
-        color: var(--vn-text);
+        color: var(--vn-text-color);
     }
 }
 
diff --git a/src/pages/Login/VerifyEmail.vue b/src/pages/Login/VerifyEmail.vue
index 4c02e5869..1febd0eaa 100644
--- a/src/pages/Login/VerifyEmail.vue
+++ b/src/pages/Login/VerifyEmail.vue
@@ -57,10 +57,13 @@ onMounted(async () => {
                 :href="button.url"
             >
                 <div class="row items-center no-wrap q-gutter-md">
-                    <div class="circle q-pa-sm" style="background-color: var(--vn-gray)">
+                    <div
+                        class="circle q-pa-sm"
+                        style="background-color: var(--vn-section-color)"
+                    >
                         <QImg :src="button.icon" class="q-pa-md" />
                     </div>
-                    <div class="text-h5" style="color: var(--vn-gray)">
+                    <div class="text-h5" style="color: var(--vn-section-color)">
                         {{ t(button.text) }}
                     </div>
                 </div>
diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
index 760c48726..402df1173 100644
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -420,7 +420,7 @@ const getCategoryClass = (category, params) => {
 
     .category-icon {
         border-radius: 50%;
-        background-color: var(--vn-light-gray);
+        background-color: var(--vn-accent-color);
         font-size: 2.6rem;
         padding: 8px;
         cursor: pointer;
diff --git a/src/pages/Order/Card/OrderCatalogItem.vue b/src/pages/Order/Card/OrderCatalogItem.vue
index ee73bcffb..8a949adad 100644
--- a/src/pages/Order/Card/OrderCatalogItem.vue
+++ b/src/pages/Order/Card/OrderCatalogItem.vue
@@ -88,11 +88,11 @@ const dialog = ref(null);
         font-size: 11px;
 
         .label {
-            color: var(--vn-label);
+            color: var(--vn-label-color);
         }
 
         .value {
-            color: var(--vn-text);
+            color: var(--vn-text-color);
         }
     }
 }
@@ -125,7 +125,7 @@ const dialog = ref(null);
     gap: 4px;
 
     .subName {
-        color: var(--vn-label);
+        color: var(--vn-label-color);
         text-transform: uppercase;
     }
 
diff --git a/src/pages/Order/Card/OrderSummary.vue b/src/pages/Order/Card/OrderSummary.vue
index f9704a480..cba4723e8 100644
--- a/src/pages/Order/Card/OrderSummary.vue
+++ b/src/pages/Order/Card/OrderSummary.vue
@@ -248,7 +248,7 @@ const detailsColumns = ref([
 
         .subName {
             text-transform: uppercase;
-            color: var(--vn-label);
+            color: var(--vn-label-color);
         }
     }
 }
diff --git a/src/pages/Order/OrderCatalog.vue b/src/pages/Order/OrderCatalog.vue
index 21442d10d..1ed03c47d 100644
--- a/src/pages/Order/OrderCatalog.vue
+++ b/src/pages/Order/OrderCatalog.vue
@@ -104,7 +104,7 @@ function extractTags(items) {
 .no-result {
     font-size: 24px;
     font-weight: bold;
-    color: var(--vn-label);
+    color: var(--vn-label-color);
     text-align: center;
 }
 </style>
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index a2ee42481..930230c7b 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -14,6 +14,7 @@ import VnConfirm from 'components/ui/VnConfirm.vue';
 import { toCurrency, toDate } from 'src/filters';
 import { useSession } from 'composables/useSession';
 import axios from 'axios';
+import VnChip from 'src/components/common/VnChip.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -150,9 +151,12 @@ async function confirmOrder() {
                                     >
                                         {{ row?.item?.name }}
                                     </div>
-                                    <QChip class="q-chip-color" outline size="sm">
-                                        {{ t('ID') }}: {{ row.id }}
-                                    </QChip>
+                                    <VnChip
+                                        class="q-chip-color"
+                                        outline
+                                        size="sm"
+                                        :text="t('ID') + ':' + row.id"
+                                    />
                                 </div>
                             </template>
                             <template #list-items>
@@ -213,7 +217,7 @@ async function confirmOrder() {
         gap: 2%;
 
         .label {
-            color: var(--vn-label);
+            color: var(--vn-label-color);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -246,13 +250,13 @@ async function confirmOrder() {
 }
 
 .subname {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
 }
 
 .no-result {
     font-size: 24px;
     font-weight: bold;
-    color: var(--vn-label);
+    color: var(--vn-label-color);
     text-align: center;
 }
 </style>
diff --git a/src/pages/Order/OrderList.vue b/src/pages/Order/OrderList.vue
index b7b233a64..203eaccd1 100644
--- a/src/pages/Order/OrderList.vue
+++ b/src/pages/Order/OrderList.vue
@@ -104,7 +104,7 @@ function navigate(id) {
                             />
                             <VnLv :label="t('order.field.landed')">
                                 <template #value>
-                                    <QBadge color="positive" dense>
+                                    <QBadge text-color="black" color="positive" dense>
                                         {{ toDate(row?.landed) }}
                                     </QBadge>
                                 </template>
diff --git a/src/pages/Order/OrderVolume.vue b/src/pages/Order/OrderVolume.vue
index 5bb106edc..67f409b45 100644
--- a/src/pages/Order/OrderVolume.vue
+++ b/src/pages/Order/OrderVolume.vue
@@ -106,7 +106,7 @@ const loadVolumes = async (rows) => {
         gap: 2%;
 
         .label {
-            color: var(--vn-label);
+            color: var(--vn-label-color);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -132,7 +132,7 @@ const loadVolumes = async (rows) => {
 .no-result {
     font-size: 24px;
     font-weight: bold;
-    color: var(--vn-label);
+    color: var(--vn-label-color);
     text-align: center;
 }
 </style>
diff --git a/src/pages/Route/Cmr/CmrList.vue b/src/pages/Route/Cmr/CmrList.vue
index dc5602c1c..1baf22c17 100644
--- a/src/pages/Route/Cmr/CmrList.vue
+++ b/src/pages/Route/Cmr/CmrList.vue
@@ -123,6 +123,7 @@ function downloadPdfs() {
                         <template #body-cell-hasCmrDms="{ value }">
                             <QTd align="center">
                                 <QBadge
+                                    text-color="black"
                                     :id="value ? 'true' : 'false'"
                                     :label="
                                         value
diff --git a/src/pages/Supplier/Card/SupplierConsumption.vue b/src/pages/Supplier/Card/SupplierConsumption.vue
index 59dd2281c..86c5e586b 100644
--- a/src/pages/Supplier/Card/SupplierConsumption.vue
+++ b/src/pages/Supplier/Card/SupplierConsumption.vue
@@ -195,7 +195,7 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 .label {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
 }
 </style>
 
diff --git a/src/pages/Supplier/Card/SupplierContacts.vue b/src/pages/Supplier/Card/SupplierContacts.vue
index d69b74a4c..ce65ecac6 100644
--- a/src/pages/Supplier/Card/SupplierContacts.vue
+++ b/src/pages/Supplier/Card/SupplierContacts.vue
@@ -107,7 +107,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .border {
     border-radius: 0px !important;
-    border: 1px solid var(--vn-text) !important;
+    border: 1px solid var(--vn-text-color) !important;
 }
 </style>
 
diff --git a/src/pages/Supplier/Card/SupplierSummary.vue b/src/pages/Supplier/Card/SupplierSummary.vue
index 2da9bcfdc..2b1131e5e 100644
--- a/src/pages/Supplier/Card/SupplierSummary.vue
+++ b/src/pages/Supplier/Card/SupplierSummary.vue
@@ -8,6 +8,7 @@ import { getUrl } from 'src/composables/getUrl';
 import { useRole } from 'src/composables/useRole';
 import { dashIfEmpty } from 'src/filters';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 onUpdated(() => summaryRef.value.fetch());
 
@@ -51,7 +52,7 @@ const isAdministrative = computed(() => {
         :url="`Suppliers/${entityId}/getSummary`"
         @on-fetch="(data) => setData(data)"
     >
-        <template #header-left>
+        <template>
             <a v-if="isAdministrative" class="header header-link" :href="supplierUrl">
                 <QIcon name="open_in_new" color="white" size="sm" />
             </a>
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index f0ded019b..dfbcfc106 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -98,7 +98,10 @@ const setData = (entity) =>
             </VnLv>
             <VnLv v-if="entity.ticketState" :label="t('ticket.card.state')">
                 <template #value>
-                    <QBadge :color="entity.ticketState.state.classColor">
+                    <QBadge
+                        text-color="black"
+                        :color="entity.ticketState.state.classColor"
+                    >
                         {{ entity.ticketState.state.name }}
                     </QBadge>
                 </template>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index fbca21086..a7608cae8 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -12,6 +12,8 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import { getUrl } from 'src/composables/getUrl';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import VnChip from 'src/components/common/VnChip.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 onUpdated(() => summaryRef.value.fetch());
 
@@ -74,7 +76,7 @@ async function changeState(value) {
         code: value,
     };
 
-    await axios.post(`TicketTrackings/changeState`, formData);
+    await axios.post(`Tickets/state`, formData);
     router.go(route.fullPath);
 }
 </script>
@@ -102,8 +104,8 @@ async function changeState(value) {
             <QBtnDropdown
                 side
                 top
-                color="orange-11"
-                text-color="black"
+                color="black"
+                text-color="white"
                 :label="t('ticket.summary.changeState')"
                 :disable="!isEditable()"
             >
@@ -147,15 +149,17 @@ async function changeState(value) {
                 </div>
             </QCard>
             <QCard class="vn-one">
-                <a class="header header-link" :href="ticketUrl + 'basic-data/step-one'">
-                    {{ t('globals.summary.basicData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="ticketUrl + 'basic-data/step-one'"
+                    :text="t('globals.summary.basicData')"
+                />
                 <VnLv :label="t('ticket.summary.state')">
                     <template #value>
-                        <QChip :color="ticket.ticketState?.state?.classColor ?? 'dark'">
-                            {{ ticket.ticketState?.state?.name }}
-                        </QChip>
+                        <VnChip
+                            :color="ticket.ticketState?.state?.classColor ?? 'dark'"
+                            dense="dense"
+                            :text="ticket.ticketState?.state?.name"
+                        />
                     </template>
                 </VnLv>
                 <VnLv :label="t('ticket.summary.salesPerson')">
@@ -193,10 +197,10 @@ async function changeState(value) {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a class="header header-link" :href="ticketUrl + 'basic-data/step-one'">
-                    {{ t('globals.summary.basicData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="ticketUrl + 'basic-data/step-one'"
+                    :text="t('globals.summary.basicData')"
+                />
                 <VnLv
                     :label="t('ticket.summary.shipped')"
                     :value="toDate(ticket.shipped)"
@@ -236,10 +240,10 @@ async function changeState(value) {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a class="header header-link" :href="ticketUrl + 'observation'">
-                    {{ t('ticket.pageTitles.notes') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="ticketUrl + 'observation'"
+                    :text="t('ticket.pageTitles.notes')"
+                />
                 <VnLv
                     v-for="note in ticket.notes"
                     :key="note.id"
@@ -258,10 +262,10 @@ async function changeState(value) {
                 </VnLv>
             </QCard>
             <QCard class="vn-max">
-                <a class="header header-link" :href="ticketUrl + 'sale'">
-                    {{ t('ticket.summary.saleLines') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="ticketUrl + 'sale'"
+                    :text="t('ticket.summary.saleLines')"
+                />
                 <QTable :rows="ticket.sales">
                     <template #header="props">
                         <QTr :props="props">
@@ -396,10 +400,7 @@ async function changeState(value) {
                 class="vn-max"
                 v-if="ticket.packagings.length > 0 || ticket.services.length > 0"
             >
-                <a class="header header-link" :href="ticketUrl + 'package'">
-                    {{ t('globals.packages') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle :url="ticketUrl + 'package'" :text="t('globals.packages')" />
                 <QTable :rows="ticket.packagings" flat>
                     <template #header="props">
                         <QTr :props="props">
@@ -416,11 +417,10 @@ async function changeState(value) {
                         </QTr>
                     </template>
                 </QTable>
-
-                <a class="header header-link q-mt-xl" :href="ticketUrl + 'service'">
-                    {{ t('ticket.summary.service') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="ticketUrl + 'service'"
+                    :text="t('ticket.summary.service')"
+                />
                 <QTable :rows="ticket.services" flat>
                     <template #header="props">
                         <QTr :props="props">
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 72c2da57c..c5d25fed2 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -89,6 +89,7 @@ function navigate(id) {
                             <VnLv :label="t('ticket.list.state')">
                                 <template #value>
                                     <QBadge
+                                        text-color="black"
                                         :color="row.classColor ?? 'orange'"
                                         class="q-ma-none"
                                         dense
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index 5a2c6bdb2..65050dfcd 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
 import FetchData from 'src/components/FetchData.vue';
 import TravelDescriptorMenuItems from './TravelDescriptorMenuItems.vue';
@@ -294,9 +295,7 @@ async function setTravelData(travelData) {
                 <VnLv :label="t('globals.totalEntries')" :value="travel.totalEntries" />
             </QCard>
             <QCard class="full-width" v-if="entriesTableRows.length > 0">
-                <span class="header header-link">
-                    {{ t('travel.summary.entries') }}
-                </span>
+                <VnTitle :text="t('travel.summary.entries')" />
                 <QTable
                     :rows="entriesTableRows"
                     :columns="entriesTableColumns"
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index edcfbac52..257586367 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -100,6 +100,7 @@ onMounted(async () => {
                             <VnLv :label="t('globals.shipped')">
                                 <template #value>
                                     <QBadge
+                                        text-color="black"
                                         v-if="getDateQBadgeColor(row.shipped)"
                                         :color="getDateQBadgeColor(row.shipped)"
                                         class="q-ma-none"
@@ -114,6 +115,7 @@ onMounted(async () => {
                             <VnLv :label="t('globals.landed')">
                                 <template #value>
                                     <QBadge
+                                        text-color="black"
                                         v-if="getDateQBadgeColor(row.landed)"
                                         :color="getDateQBadgeColor(row.landed)"
                                         class="q-ma-none"
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index 9d0e18b15..dad21cda5 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -8,6 +8,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -71,10 +72,10 @@ const filter = {
         </template>
         <template #body="{ entity: worker }">
             <QCard class="vn-one">
-                <a class="header header-link" :href="workerUrl + `basic-data`">
-                    {{ t('worker.summary.basicData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="workerUrl + `basic-data`"
+                    :text="t('worker.summary.basicData')"
+                />
                 <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
                 <VnLv
                     :label="t('worker.list.department')"
@@ -111,9 +112,7 @@ const filter = {
                 <VnLv :label="t('worker.summary.locker')" :value="worker.locker" />
             </QCard>
             <QCard class="vn-one">
-                <div class="header header-link">
-                    {{ t('worker.summary.userData') }}
-                </div>
+                <VnTitle :text="t('worker.summary.userData')" />
                 <VnLv :label="t('worker.summary.userId')" :value="worker.user.id" />
                 <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
                 <VnLv :label="t('worker.summary.role')" :value="worker.user.role.name" />

From 22eef14bb3fb4a976e3a76524ecbcb4979acda85 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Tue, 19 Mar 2024 11:15:54 +0100
Subject: [PATCH 3/7] feat(light theme): refs #7001 add light theme

---
 src/components/LeftMenu.vue                   |  2 +-
 src/components/UserPanel.vue                  |  2 +-
 src/components/common/VnLog.vue               |  2 +-
 src/components/common/VnTitle.vue             |  6 +---
 src/components/ui/VnSearchbar.vue             |  7 +++-
 src/components/ui/VnSubToolbar.vue            |  2 +-
 src/css/app.scss                              | 30 ++++++++++------
 src/layouts/MainLayout.vue                    |  2 --
 src/layouts/OutLayout.vue                     |  2 +-
 src/pages/Claim/ClaimList.vue                 |  1 -
 src/pages/Customer/CustomerList.vue           |  1 -
 .../Customer/Defaulter/CustomerDefaulter.vue  |  2 +-
 src/pages/Dashboard/DashboardMain.vue         |  6 +++-
 src/pages/Entry/EntryLatestBuys.vue           |  2 +-
 src/pages/InvoiceIn/InvoiceInList.vue         |  1 -
 src/pages/InvoiceOut/InvoiceOutList.vue       | 36 +------------------
 src/pages/Order/Card/OrderCatalogItem.vue     |  2 +-
 src/pages/Route/RouteList.vue                 |  2 +-
 src/pages/Route/RouteRoadmap.vue              | 17 +++++----
 src/pages/Route/RouteTickets.vue              |  6 ++--
 .../Shelving/Card/ShelvingDescriptorMenu.vue  | 17 +++++----
 src/pages/Travel/ExtraCommunity.vue           |  2 +-
 src/pages/Travel/TravelList.vue               |  2 --
 src/pages/Wagon/Type/WagonTypeList.vue        |  1 -
 src/pages/Wagon/WagonList.vue                 |  1 -
 src/pages/Worker/WorkerList.vue               |  1 -
 26 files changed, 64 insertions(+), 91 deletions(-)

diff --git a/src/components/LeftMenu.vue b/src/components/LeftMenu.vue
index 1721adfec..278a67129 100644
--- a/src/components/LeftMenu.vue
+++ b/src/components/LeftMenu.vue
@@ -234,6 +234,6 @@ async function togglePinned(item, event) {
     max-width: 256px;
 }
 .header {
-    color: #999999;
+    color: var(--vn-label-color);
 }
 </style>
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index a18dad79a..007d595cc 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -87,7 +87,7 @@ function copyUserToken() {
 </script>
 
 <template>
-    <QMenu anchor="bottom left">
+    <QMenu anchor="bottom left" class="bg-vn-section-color">
         <div class="row no-wrap q-pa-md">
             <div class="column panel">
                 <div class="text-h6 q-mb-md">
diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 732f0e964..0c8a70092 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -837,7 +837,7 @@ setLogTree();
         max-width: 400px;
 
         & > .header {
-            color: $dark;
+            color: var(--vn-section-color);
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
diff --git a/src/components/common/VnTitle.vue b/src/components/common/VnTitle.vue
index 8e994eb92..e772f3e37 100644
--- a/src/components/common/VnTitle.vue
+++ b/src/components/common/VnTitle.vue
@@ -8,7 +8,7 @@ const $props = defineProps({
 <template>
     <div class="titleBox">
         <div class="header-link">
-            <a :href="$props.url" :class="$props.url ? 'link' : 'normalTitle'">
+            <a :href="$props.url" :class="$props.url ? 'link' : 'color-vn-text'">
                 {{ $props.text }}
                 <QIcon v-if="url" :name="$props.icon" />
             </a>
@@ -16,10 +16,6 @@ const $props = defineProps({
     </div>
 </template>
 <style scoped lang="scss">
-.normalTitle {
-    color: whitesmoke;
-    cursor: auto;
-}
 a {
     font-size: large;
 }
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 371c12397..143efcd0f 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -163,7 +163,12 @@ async function search() {
 }
 #searchbar {
     .q-field--standout.q-field--highlighted .q-field__control {
-        background-color: var(--vn-text-color);
+        background-color: white;
+        color: black;
+        .q-field__native,
+        .q-icon {
+            color: black !important;
+        }
     }
 }
 </style>
diff --git a/src/components/ui/VnSubToolbar.vue b/src/components/ui/VnSubToolbar.vue
index 1a6549856..018447057 100644
--- a/src/components/ui/VnSubToolbar.vue
+++ b/src/components/ui/VnSubToolbar.vue
@@ -14,7 +14,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QToolbar class="bg-vn-dark justify-end sticky">
+    <QToolbar class="justify-end sticky">
         <slot name="st-data">
             <div id="st-data"></div>
         </slot>
diff --git a/src/css/app.scss b/src/css/app.scss
index 5692cacaf..34d7b0a42 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -5,21 +5,30 @@ body.body--light {
     --font-color: black;
     --vn-section-color: #e0e0e0;
     --vn-page-color: #ffffff;
-    background-color: #ffffff;
-    .q-header .q-toolbar {
-        color: var(--font-color);
-    }
     --vn-text-color: var(--font-color);
     --vn-label-color: #5f5f5f;
     --vn-accent-color: #e7e3e3;
+
+    background-color: var(--vn-page-color);
+
+    .q-header .q-toolbar {
+        color: var(--font-color);
+    }
+    .q-card,
+    .q-table,
+    .q-table__bottom,
+    .q-drawer {
+        background-color: var(--vn-section-color);
+    }
 }
 
 body.body--dark {
     --vn-section-color: #403c3c;
-    background-color: #222;
     --vn-text-color: white;
     --vn-label-color: #a8a8a8;
     --vn-accent-color: #424242;
+
+    background-color: #222;
 }
 
 a {
@@ -34,6 +43,9 @@ a {
 .tx-color-link {
     color: $color-link !important;
 }
+.tx-color-font {
+    color: $color-link !important;
+}
 
 .header-link {
     color: $color-link !important;
@@ -61,11 +73,7 @@ select:-webkit-autofill {
     background-clip: text !important;
 }
 
-.bg-vn-dark {
-    background-color: var(--vn-section-color);
-}
-
-.bg-vn-dark {
+.bg-vn-section-color {
     background-color: var(--vn-section-color);
 }
 
@@ -98,7 +106,7 @@ select:-webkit-autofill {
 
 .vn-table-separation-row {
     height: 16px !important;
-    background-color: var(--vn-gray) !important;
+    background-color: var(--vn-section-color) !important;
 }
 
 /* Estilo para el asterisco en campos requeridos */
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 021ee685a..88c5ee293 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -11,5 +11,3 @@ const quasar = useQuasar();
         <QFooter v-if="quasar.platform.is.mobile"></QFooter>
     </QLayout>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/src/layouts/OutLayout.vue b/src/layouts/OutLayout.vue
index f66fcff1f..0eb1329a4 100644
--- a/src/layouts/OutLayout.vue
+++ b/src/layouts/OutLayout.vue
@@ -40,7 +40,7 @@ const langs = ['en', 'es'];
 
 <template>
     <QLayout view="hHh LpR fFf">
-        <QHeader reveal class="bg-vn-dark">
+        <QHeader reveal class="bg-vn-section-color">
             <QToolbar class="justify-end">
                 <QBtn
                     id="switchLanguage"
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index f8ba8d541..6e0a08f2c 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -122,7 +122,6 @@ function navigate(event, id) {
                             <QBtn
                                 :label="t('globals.description')"
                                 @click.stop
-                                class="bg-vn-dark"
                                 outline
                                 style="margin-top: 15px"
                             >
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 56c3749d4..f4b4223fc 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -84,7 +84,6 @@ const redirectToCreateView = () => {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulter.vue b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
index 1dfd331e2..c685615c6 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
@@ -207,7 +207,7 @@ const refreshData = () => {
         </QScrollArea>
     </QDrawer>
 
-    <VnSubToolbar class="bg-vn-dark">
+    <VnSubToolbar>
         <template #st-data>
             <CustomerBalanceDueTotal :amount="balanceDueTotal" />
             <div class="flex items-center q-ml-lg">
diff --git a/src/pages/Dashboard/DashboardMain.vue b/src/pages/Dashboard/DashboardMain.vue
index da6a2cb7d..6da39ce25 100644
--- a/src/pages/Dashboard/DashboardMain.vue
+++ b/src/pages/Dashboard/DashboardMain.vue
@@ -21,7 +21,7 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
         :width="256"
         :breakpoint="1000"
     >
-        <QScrollArea class="fit text-grey-8">
+        <QScrollArea class="fit">
             <LeftMenu />
         </QScrollArea>
     </QDrawer>
@@ -67,6 +67,10 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
 </template>
 
 <style lang="scss" scoped>
+.left-menu {
+    color: var(--vn-font-color);
+}
+
 .flex-container {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/pages/Entry/EntryLatestBuys.vue b/src/pages/Entry/EntryLatestBuys.vue
index bbc4a16cf..876fe6a9e 100644
--- a/src/pages/Entry/EntryLatestBuys.vue
+++ b/src/pages/Entry/EntryLatestBuys.vue
@@ -636,7 +636,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         auto-load
         @on-fetch="(data) => (intrastatOptions = data)"
     />
-    <QToolbar class="bg-vn-dark justify-end">
+    <QToolbar class="justify-end">
         <div id="st-data">
             <TableVisibleColumns
                 :all-columns="allColumnNames"
diff --git a/src/pages/InvoiceIn/InvoiceInList.vue b/src/pages/InvoiceIn/InvoiceInList.vue
index 9508c669c..46c95c734 100644
--- a/src/pages/InvoiceIn/InvoiceInList.vue
+++ b/src/pages/InvoiceIn/InvoiceInList.vue
@@ -112,7 +112,6 @@ function navigate(id) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                class="bg-vn-dark"
                                 outline
                                 type="reset"
                             />
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 08f893db2..d2954d77d 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -123,7 +123,7 @@ const downloadCsv = () => {
             url="InvoiceOuts/filter"
         >
             <template #body="{ rows }">
-                <VnSubToolbar class="bg-vn-dark justify-end">
+                <VnSubToolbar class="justify-end">
                     <template #st-actions>
                         <QBtn
                             @click="downloadCsv()"
@@ -132,39 +132,6 @@ const downloadCsv = () => {
                             :disable="selectedCards.size === 0"
                             :label="t('globals.download')"
                         />
-                        <!-- <QBtnDropdown
-                            class="q-mr-xl"
-                            color="primary"
-                            :disable="!manageCheckboxes && arrayElements.length < 1"
-                            :label="t('globals.download')"
-                            v-else
-                        >
-                            <QList>
-                                <QItem clickable v-close-popup @click="downloadCsv(rows)">
-                                    <QItemSection>
-                                        <QItemLabel>
-                                            {{
-                                                t('globals.allRows', {
-                                                    numberRows: rows.length,
-                                                })
-                                            }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-
-                                <QItem clickable v-close-popup @click="downloadCsv(rows)">
-                                    <QItemSection>
-                                        <QItemLabel>
-                                            {{
-                                                t('globals.selectRows', {
-                                                    numberRows: rows.length,
-                                                })
-                                            }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </QList>
-                        </QBtnDropdown> -->
                         <QCheckbox
                             left-label
                             :label="t('globals.markAll')"
@@ -220,7 +187,6 @@ const downloadCsv = () => {
                                 <QBtn
                                     :label="t('components.smartCard.openCard')"
                                     @click.stop="navigate(row.id)"
-                                    class="bg-vn-dark"
                                     outline
                                     type="reset"
                                 />
diff --git a/src/pages/Order/Card/OrderCatalogItem.vue b/src/pages/Order/Card/OrderCatalogItem.vue
index 294a9fbc9..0e1005493 100644
--- a/src/pages/Order/Card/OrderCatalogItem.vue
+++ b/src/pages/Order/Card/OrderCatalogItem.vue
@@ -163,7 +163,7 @@ const dialog = ref(null);
     position: absolute;
     bottom: 12px;
     right: 12px;
-    background: linear-gradient($dark, $primary);
+    background: linear-gradient(var(--vn-section-color), $primary);
     border-radius: 50%;
     width: 40px;
     height: 40px;
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index d308696e1..94c05ad54 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -224,7 +224,7 @@ const openTicketsDialog = (id) => {
     <FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
     <FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
     <QPage class="column items-center">
-        <VnSubToolbar class="bg-vn-dark justify-end">
+        <VnSubToolbar class="justify-end">
             <template #st-actions>
                 <QBtn
                     icon="vn:clone"
diff --git a/src/pages/Route/RouteRoadmap.vue b/src/pages/Route/RouteRoadmap.vue
index 3dca18d66..b1d5d4159 100644
--- a/src/pages/Route/RouteRoadmap.vue
+++ b/src/pages/Route/RouteRoadmap.vue
@@ -13,9 +13,9 @@ import RoadmapFilter from 'pages/Route/Roadmap/RoadmapFilter.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import axios from 'axios';
 import VnInputDate from 'components/common/VnInputDate.vue';
-import {useSummaryDialog} from "composables/useSummaryDialog";
-import RoadmapSummary from "pages/Route/Roadmap/RoadmapSummary.vue";
-import {useRouter} from "vue-router";
+import { useSummaryDialog } from 'composables/useSummaryDialog';
+import RoadmapSummary from 'pages/Route/Roadmap/RoadmapSummary.vue';
+import { useRouter } from 'vue-router';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -128,7 +128,7 @@ function confirmRemove() {
 }
 
 function navigateToRoadmapSummary(event, row) {
-    router.push({ name: 'RoadmapSummary', params: { id: row.id } })
+    router.push({ name: 'RoadmapSummary', params: { id: row.id } });
 }
 </script>
 
@@ -182,7 +182,7 @@ function navigateToRoadmapSummary(event, row) {
         </QCard>
     </QDialog>
     <QPage class="column items-center">
-        <VnSubToolbar class="bg-vn-dark justify-end">
+        <VnSubToolbar class="justify-end">
             <template #st-actions>
                 <QBtn
                     icon="vn:clone"
@@ -244,7 +244,12 @@ function navigateToRoadmapSummary(event, row) {
                                             name="preview"
                                             size="xs"
                                             color="primary"
-                                            @click.stop="viewSummary(props?.row?.id, RoadmapSummary)"
+                                            @click.stop="
+                                                viewSummary(
+                                                    props?.row?.id,
+                                                    RoadmapSummary
+                                                )
+                                            "
                                             class="cursor-pointer"
                                         >
                                             <QTooltip>{{ t('Preview') }}</QTooltip>
diff --git a/src/pages/Route/RouteTickets.vue b/src/pages/Route/RouteTickets.vue
index 8410232c5..c1ca5507e 100644
--- a/src/pages/Route/RouteTickets.vue
+++ b/src/pages/Route/RouteTickets.vue
@@ -15,8 +15,8 @@ import VnConfirm from 'components/ui/VnConfirm.vue';
 import FetchData from 'components/FetchData.vue';
 import { openBuscaman } from 'src/utils/buscaman';
 import SendSmsDialog from 'components/common/SendSmsDialog.vue';
-import RouteSearchbar from "pages/Route/Card/RouteSearchbar.vue";
-import {useStateStore} from "stores/useStateStore";
+import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
+import { useStateStore } from 'stores/useStateStore';
 
 const { t } = useI18n();
 const quasar = useQuasar();
@@ -257,7 +257,7 @@ const openSmsDialog = async () => {
         </QCard>
     </QDialog>
     <QPage class="column items-center">
-        <QToolbar class="bg-vn-dark justify-end">
+        <QToolbar class="justify-end">
             <div id="st-actions" class="q-pa-sm">
                 <QBtn icon="vn:wand" color="primary" class="q-mr-sm" @click="sortRoutes">
                     <QTooltip>{{ t('Sort routes') }}</QTooltip>
diff --git a/src/pages/Shelving/Card/ShelvingDescriptorMenu.vue b/src/pages/Shelving/Card/ShelvingDescriptorMenu.vue
index 684a46807..16351fdd4 100644
--- a/src/pages/Shelving/Card/ShelvingDescriptorMenu.vue
+++ b/src/pages/Shelving/Card/ShelvingDescriptorMenu.vue
@@ -17,15 +17,14 @@ const quasar = useQuasar();
 const { t } = useI18n();
 
 function confirmRemove() {
-    quasar
-        .dialog({
-            component: VnConfirm,
-            componentProps: {
-                title: t('Confirm deletion'),
-                message: t('Are you sure you want to delete this shelving?'),
-                promise: remove
-            },
-        })
+    quasar.dialog({
+        component: VnConfirm,
+        componentProps: {
+            title: t('Confirm deletion'),
+            message: t('Are you sure you want to delete this shelving?'),
+            promise: remove,
+        },
+    });
 }
 
 async function remove() {
diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index e7805a7ed..443a10451 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -430,7 +430,7 @@ const handleDragScroll = (event) => {
             />
         </Teleport>
     </template>
-    <VnSubToolbar class="bg-vn-dark justify-end">
+    <VnSubToolbar class="justify-end">
         <template #st-actions>
             <QBtn
                 color="primary"
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index 257586367..77fb34697 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -141,13 +141,11 @@ onMounted(async () => {
                             <QBtn
                                 :label="t('components.smartCard.clone')"
                                 @click.stop="cloneTravel(row)"
-                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
                                 :label="t('addEntry')"
                                 @click.stop="redirectCreateEntryView(row)"
-                                class="bg-vn-dark"
                                 outline
                                 style="margin-top: 15px"
                             />
diff --git a/src/pages/Wagon/Type/WagonTypeList.vue b/src/pages/Wagon/Type/WagonTypeList.vue
index a7c713039..23f56e4c3 100644
--- a/src/pages/Wagon/Type/WagonTypeList.vue
+++ b/src/pages/Wagon/Type/WagonTypeList.vue
@@ -61,7 +61,6 @@ async function remove(row) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
diff --git a/src/pages/Wagon/WagonList.vue b/src/pages/Wagon/WagonList.vue
index 18417f433..a8b6728c3 100644
--- a/src/pages/Wagon/WagonList.vue
+++ b/src/pages/Wagon/WagonList.vue
@@ -80,7 +80,6 @@ async function remove(row) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 5214a9066..b11d531dd 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -82,7 +82,6 @@ const redirectToCreateView = () => {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn

From 25aea39bfcb9200793183b14f135fd8f5777884d Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 20 Mar 2024 08:03:25 +0100
Subject: [PATCH 4/7] fix(spec): refs #7001 fix som e2e spec

---
 test/cypress/integration/invoiceIn/invoiceInList.spec.js | 4 ++--
 test/cypress/integration/worker/workerList.spec.js       | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/test/cypress/integration/invoiceIn/invoiceInList.spec.js b/test/cypress/integration/invoiceIn/invoiceInList.spec.js
index ce79dc976..5e2a5aa4c 100644
--- a/test/cypress/integration/invoiceIn/invoiceInList.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInList.spec.js
@@ -4,7 +4,7 @@ describe('InvoiceInList', () => {
     const firstChipId =
         ':nth-child(1) > :nth-child(1) > .justify-between > .flex > .q-chip > .q-chip__content';
     const firstDetailBtn = '.q-card:nth-child(1) .q-btn:nth-child(2)';
-    const summaryHeaders = '.summaryBody .header';
+    const summaryHeaders = '.summaryBody .header-link';
     const screen = '.q-page-container > .q-drawer-container > .fullscreen';
 
     beforeEach(() => {
@@ -17,7 +17,7 @@ describe('InvoiceInList', () => {
         cy.get(firstChipId)
             .invoke('text')
             .then((content) => {
-                const id = content.substring(4);
+                const id = content.replace(/\D/g, '');
                 cy.get(firstCard).click();
                 cy.url().should('include', `/invoice-in/${id}/summary`);
             });
diff --git a/test/cypress/integration/worker/workerList.spec.js b/test/cypress/integration/worker/workerList.spec.js
index bc4b2383e..c950f9fed 100644
--- a/test/cypress/integration/worker/workerList.spec.js
+++ b/test/cypress/integration/worker/workerList.spec.js
@@ -16,7 +16,10 @@ describe('WorkerList', () => {
     it('should open the worker summary', () => {
         cy.openListSummary(0);
         cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones');
-        cy.get('.summary .header-link').eq(0).invoke('text').should('include', 'Basic data');
-        cy.get('.summary .header-link').eq(1).should('have.text', 'User data');
+        cy.get('.summary .header-link')
+            .eq(0)
+            .invoke('text')
+            .should('include', 'Basic data');
+        cy.get('.summary .header-link').eq(1).should('have.text', 'User data ');
     });
 });

From 2fa5b1303da385ee7bb1e136e6a24b8cab31c61a Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 20 Mar 2024 11:28:50 +0100
Subject: [PATCH 5/7] remove(vnChip): refs #7001 remove component

---
 src/components/common/VnChip.vue              | 10 ++++------
 src/components/common/VnLog.vue               | 13 ++++++-------
 src/components/common/VnSmsDialog.vue         |  5 +++--
 src/components/ui/CardList.vue                | 10 +++-------
 src/components/ui/VnSms.vue                   |  8 ++++----
 src/css/app.scss                              | 12 +++++++++++-
 src/pages/Claim/Card/ClaimLines.vue           | 13 ++++++-------
 src/pages/Claim/Card/ClaimSummary.vue         |  9 +++------
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue |  8 ++++----
 src/pages/Order/OrderLines.vue                | 10 +++-------
 src/pages/Ticket/Card/TicketSummary.vue       |  9 +++------
 11 files changed, 50 insertions(+), 57 deletions(-)

diff --git a/src/components/common/VnChip.vue b/src/components/common/VnChip.vue
index dd2de2c64..bb9b46e71 100644
--- a/src/components/common/VnChip.vue
+++ b/src/components/common/VnChip.vue
@@ -1,13 +1,11 @@
 <script setup>
-const $props = defineProps({
-    color: { type: String, default: null },
+defineProps({
     text: { type: String, default: null },
-    dense: { type: String, default: null },
     textColor: { type: String, default: 'black' },
 });
 </script>
 <template>
-    <QChip :color="$props.color" :text-color="textColor" :dense="$props.dense">{{
-        text
-    }}</QChip>
+    <QChip v-bind="$attrs">
+        <slot>{{ text }}</slot>
+    </QChip>
 </template>
diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 0c8a70092..5c70b900d 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -14,7 +14,6 @@ import VnJsonValue from '../common/VnJsonValue.vue';
 import FetchData from '../FetchData.vue';
 import VnSelectFilter from './VnSelectFilter.vue';
 import VnUserLink from '../ui/VnUserLink.vue';
-import VnChip from '../common/VnChip.vue';
 
 const stateStore = useStateStore();
 const validationsStore = useValidator();
@@ -444,10 +443,10 @@ setLogTree();
                 >
                     <QItemSection>
                         <QItemLabel class="model-info q-mb-xs" v-if="!byRecord">
-                            <VnChip
+                            <QChip
+                                dense
                                 size="md"
-                                text-color="white"
-                                class="model-name q-mr-xs"
+                                class="model-name q-mr-xs text-white"
                                 v-if="
                                     !(modelLog.changedModel && modelLog.changedModelId) &&
                                     modelLog.model
@@ -456,9 +455,9 @@ setLogTree();
                                     backgroundColor: useColor(modelLog.model),
                                 }"
                                 :title="modelLog.model"
-                                :text="t(modelLog.modelI18n)"
-                                dense="dense"
-                            />
+                            >
+                                {{ t(modelLog.modelI18n) }}
+                            </QChip>
                             <span class="model-id" v-if="modelLog.id"
                                 >#{{ modelLog.id }}</span
                             >
diff --git a/src/components/common/VnSmsDialog.vue b/src/components/common/VnSmsDialog.vue
index 3027b14c7..59021cef4 100644
--- a/src/components/common/VnSmsDialog.vue
+++ b/src/components/common/VnSmsDialog.vue
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { useDialogPluginComponent } from 'quasar';
 
 import VnInput from 'src/components/common/VnInput.vue';
-import VnChip from 'src/components/common/VnChip.vue';
 
 const { dialogRef, onDialogOK } = useDialogPluginComponent();
 const { t, availableLocales } = useI18n();
@@ -138,7 +137,9 @@ async function send() {
                         />
                     </template>
                     <template #counter>
-                        <VnChip :color="color" :text="totalLength + '/' + maxLength" />
+                        <QChip :color="color" dense>
+                            {{ totalLength }}/{{ maxLength }}
+                        </QChip>
                     </template>
                 </QInput>
             </QCardSection>
diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue
index 9779c58eb..e8392b13e 100644
--- a/src/components/ui/CardList.vue
+++ b/src/components/ui/CardList.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import VnChip from 'src/components/common/VnChip.vue';
 
 const { t } = useI18n();
 
@@ -29,12 +28,9 @@ const toggleCardCheck = (item) => {
                         <div class="title text-primary text-weight-bold text-h5">
                             {{ $props.title }}
                         </div>
-                        <VnChip
-                            :text="'ID:' + $props.id"
-                            class="q-chip-color"
-                            outline
-                            size="sm"
-                        />
+                        <QChip class="q-chip-color" outline size="sm">
+                            {{ t('ID') }}: {{ $props.id }}
+                        </QChip>
                     </div>
                     <QCheckbox
                         v-if="showCheckbox"
diff --git a/src/components/ui/VnSms.vue b/src/components/ui/VnSms.vue
index d45eef103..ceb24b2bb 100644
--- a/src/components/ui/VnSms.vue
+++ b/src/components/ui/VnSms.vue
@@ -4,7 +4,6 @@ import { date } from 'quasar';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import VnChip from '../common/VnChip.vue';
 
 const $props = defineProps({
     url: { type: String, default: null },
@@ -90,14 +89,15 @@ function formatNumber(number) {
                                     )
                                 }}</QItemLabel>
                                 <QItemLabel class="row center">
-                                    <VnChip
+                                    <QChip
                                         :color="
                                             row.sms.status == 'OK'
                                                 ? 'positive'
                                                 : 'negative'
                                         "
-                                        :text="row.sms.status"
-                                    />
+                                    >
+                                        {{ row.sms.status }}
+                                    </QChip>
                                 </QItemLabel>
                             </QItemSection>
                         </QItem>
diff --git a/src/css/app.scss b/src/css/app.scss
index 34d7b0a42..f1fc22527 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1,5 +1,10 @@
 // app global css in SCSS form
 @import './icons.scss';
+body {
+    .q-chip__content {
+        color: 'red';
+    }
+}
 
 body.body--light {
     --font-color: black;
@@ -11,7 +16,8 @@ body.body--light {
 
     background-color: var(--vn-page-color);
 
-    .q-header .q-toolbar {
+    .q-header .q-toolbar,
+    .q-chip {
         color: var(--font-color);
     }
     .q-card,
@@ -29,6 +35,10 @@ body.body--dark {
     --vn-accent-color: #424242;
 
     background-color: #222;
+
+    .q-chip {
+        color: black;
+    }
 }
 
 a {
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index 248b5a69a..90dd31199 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -12,7 +12,6 @@ import FetchData from 'components/FetchData.vue';
 import VnDiscount from 'components/common/vnDiscount.vue';
 import ClaimLinesImport from './ClaimLinesImport.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
-import VnChip from 'src/components/common/VnChip.vue';
 
 const quasar = useQuasar();
 const route = useRoute();
@@ -162,16 +161,16 @@ function showImportDialog() {
         <div class="row q-gutter-md">
             <div>
                 {{ t('Amount') }}
-                <VnChip :dense="$q.screen.lt.sm" :text="toCurrency(amount)" />
+                <QChip :dense="$q.screen.lt.sm">
+                    {{ toCurrency(amount) }}
+                </QChip>
             </div>
             <QSeparator dark vertical />
             <div>
                 {{ t('Amount Claimed') }}
-                <VnChip
-                    color="positive"
-                    :dense="$q.screen.lt.sm"
-                    :text="toCurrency(amountClaimed)"
-                />
+                <QChip color="positive" :dense="$q.screen.lt.sm">
+                    {{ toCurrency(amountClaimed) }}
+                </QChip>
             </div>
         </div>
     </Teleport>
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 12b650dcf..2d4d5603c 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -12,7 +12,6 @@ import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
-import VnChip from 'src/components/common/VnChip.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -192,11 +191,9 @@ function openDialog(dmsId) {
                 />
                 <VnLv :label="t('claim.summary.state')">
                     <template #value>
-                        <VnChip
-                            :color="stateColor(claim.claimState.code)"
-                            :text="claim.claimState.description"
-                            dense="dense"
-                        />
+                        <QChip color="stateColor(claim.claimState.code)" dense>
+                            {{ claim.claimState.description }}</QChip
+                        >
                     </template>
                 </VnLv>
                 <VnLv :label="t('globals.salesPerson')">
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index e30d9151c..fc15d3bd9 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -6,7 +6,6 @@ import { toCurrency, toDate } from 'src/filters';
 import { getUrl } from 'src/composables/getUrl';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import VnChip from 'src/components/common/VnChip.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 
 onMounted(async () => {
@@ -302,7 +301,7 @@ function getLink(param) {
                         />
                         <VnLv :label="t('invoiceIn.summary.dueTotal')">
                             <template #value>
-                                <VnChip
+                                <QChip
                                     dense
                                     class="q-pa-xs"
                                     :color="amountsNotMatch ? 'negative' : 'transparent'"
@@ -311,8 +310,9 @@ function getLink(param) {
                                             ? t('invoiceIn.summary.noMatch')
                                             : t('invoiceIn.summary.dueTotal')
                                     "
-                                    :text="toCurrency(invoiceIn.totals.totalDueDay)"
-                                />
+                                >
+                                    {{ toCurrency(invoiceIn.totals.totalDueDay) }}
+                                </QChip>
                             </template>
                         </VnLv>
                     </div>
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index 053615fb4..5a31598e1 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -14,7 +14,6 @@ import VnConfirm from 'components/ui/VnConfirm.vue';
 import { toCurrency, toDate } from 'src/filters';
 import { useSession } from 'composables/useSession';
 import axios from 'axios';
-import VnChip from 'src/components/common/VnChip.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -151,12 +150,9 @@ async function confirmOrder() {
                                     >
                                         {{ row?.item?.name }}
                                     </div>
-                                    <VnChip
-                                        class="q-chip-color"
-                                        outline
-                                        size="sm"
-                                        :text="t('ID') + ':' + row.id"
-                                    />
+                                    <QChip class="q-chip-color" outline size="sm">
+                                        {{ t('ID') }}: {{ row.id }}
+                                    </QChip>
                                 </div>
                             </template>
                             <template #list-items>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index a7608cae8..85d98f353 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -12,7 +12,6 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import { getUrl } from 'src/composables/getUrl';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import VnChip from 'src/components/common/VnChip.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 
 onUpdated(() => summaryRef.value.fetch());
@@ -155,11 +154,9 @@ async function changeState(value) {
                 />
                 <VnLv :label="t('ticket.summary.state')">
                     <template #value>
-                        <VnChip
-                            :color="ticket.ticketState?.state?.classColor ?? 'dark'"
-                            dense="dense"
-                            :text="ticket.ticketState?.state?.name"
-                        />
+                        <QChip :color="ticket.ticketState?.state?.classColor ?? 'dark'">
+                            {{ ticket.ticketState?.state?.name }}
+                        </QChip>
                     </template>
                 </VnLv>
                 <VnLv :label="t('ticket.summary.salesPerson')">

From 5580d1560689d6daf9c53b8e32304ef1dcc63041 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 20 Mar 2024 11:30:43 +0100
Subject: [PATCH 6/7] remove: refs #7001 custom chip

---
 src/components/common/VnChip.vue      | 11 -----------
 src/pages/Claim/Card/ClaimSummary.vue |  6 +++---
 2 files changed, 3 insertions(+), 14 deletions(-)
 delete mode 100644 src/components/common/VnChip.vue

diff --git a/src/components/common/VnChip.vue b/src/components/common/VnChip.vue
deleted file mode 100644
index bb9b46e71..000000000
--- a/src/components/common/VnChip.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup>
-defineProps({
-    text: { type: String, default: null },
-    textColor: { type: String, default: 'black' },
-});
-</script>
-<template>
-    <QChip v-bind="$attrs">
-        <slot>{{ text }}</slot>
-    </QChip>
-</template>
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 2d4d5603c..612e0d755 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -191,9 +191,9 @@ function openDialog(dmsId) {
                 />
                 <VnLv :label="t('claim.summary.state')">
                     <template #value>
-                        <QChip color="stateColor(claim.claimState.code)" dense>
-                            {{ claim.claimState.description }}</QChip
-                        >
+                        <QChip :color="stateColor(claim.claimState.code)" dense>
+                            {{ claim.claimState.description }}
+                        </QChip>
                     </template>
                 </VnLv>
                 <VnLv :label="t('globals.salesPerson')">

From 1da314e425611b1b34bd4c1c62775522d4ad8c26 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 20 Mar 2024 11:41:16 +0100
Subject: [PATCH 7/7] fix(claimLines): refs #7001 add style to clear qchip

---
 src/css/app.scss                    | 16 +++++-----------
 src/pages/Claim/Card/ClaimLines.vue |  2 +-
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index f1fc22527..c9b489043 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1,10 +1,5 @@
 // app global css in SCSS form
 @import './icons.scss';
-body {
-    .q-chip__content {
-        color: 'red';
-    }
-}
 
 body.body--light {
     --font-color: black;
@@ -16,8 +11,7 @@ body.body--light {
 
     background-color: var(--vn-page-color);
 
-    .q-header .q-toolbar,
-    .q-chip {
+    .q-header .q-toolbar {
         color: var(--font-color);
     }
     .q-card,
@@ -35,10 +29,6 @@ body.body--dark {
     --vn-accent-color: #424242;
 
     background-color: #222;
-
-    .q-chip {
-        color: black;
-    }
 }
 
 a {
@@ -124,6 +114,10 @@ select:-webkit-autofill {
     content: ' *';
 }
 
+.q-chip {
+    color: black;
+}
+
 input[type='number'] {
     -moz-appearance: textfield;
 }
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index 90dd31199..70c257c69 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -161,7 +161,7 @@ function showImportDialog() {
         <div class="row q-gutter-md">
             <div>
                 {{ t('Amount') }}
-                <QChip :dense="$q.screen.lt.sm">
+                <QChip :dense="$q.screen.lt.sm" text-color="white">
                     {{ toCurrency(amount) }}
                 </QChip>
             </div>