Merge pull request '6486-salixColors' (!219) from 6486-salixColors into dev

Reviewed-on: #219 Reviewed-by: Javi Gallego <jgallego@verdnatura.es> Reviewed-by: Alex Moreno <alexm@verdnatura.es>
2024-03-06 08:44:29 +00:00 · 2024-03-06 08:44:29 +00:00 · 759dbaa066
parent 8a964c7382 1aedb3c7da
commit 759dbaa066
19 changed files with 177 additions and 132 deletions
--- a/quasar.config.js
+++ b/quasar.config.js
@ -67,7 +67,7 @@ module.exports = configure(function (/* ctx */) {
            // analyze: true,
            // env: {},
            rawDefine: {
-                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
            },
            // ignorePublicFolder: true,
            // minify: false,
@ -92,7 +92,7 @@ module.exports = configure(function (/* ctx */) {
            vitePlugins: [
                [
                    VueI18nPlugin({
-                        runtimeOnly: false
+                        runtimeOnly: false,
                    }),
                    {
                        // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
@ -123,9 +123,6 @@ module.exports = configure(function (/* ctx */) {
        framework: {
            config: {
                config: {
-                    brand: {
-                        primary: 'orange',
-                    },
                    dark: 'auto',
                },
            },
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@ -171,6 +171,7 @@ const emit = defineEmits(['onFetch']);

 <style lang="scss">
 .body {
+    background-color: var(--vn-gray);
    .text-h5 {
        padding-top: 5px;
        padding-bottom: 5px;
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@ -81,8 +81,9 @@ onMounted(() => {
 });

 async function search() {
-    const staticParams = Object.entries(store.userParams)
-        .filter(([key, value]) => value && (props.staticParams || []).includes(key));
+    const staticParams = Object.entries(store.userParams).filter(
+        ([key, value]) => value && (props.staticParams || []).includes(key)
+    );
    await arrayData.applyFilter({
        params: {
            ...Object.fromEntries(staticParams),
@ -155,11 +156,9 @@ async function search() {
 .cursor-info {
    cursor: help;
 }
-
-.body--light #searchbar {
+#searchbar {
    .q-field--standout.q-field--highlighted .q-field__control {
-        background-color: $grey-7;
-        color: #333;
+        background-color: var(--vn-text);
    }
 }
 </style>
--- a/src/css/app.scss
+++ b/src/css/app.scss
@ -1,17 +1,58 @@
 // app global css in SCSS form
@import './icons.scss';

+body.body--light {
+    --fount-color: black;
+    --vn-sectionColor: #ffffff;
+    --vn-pageColor: #e0e0e0;
+    background-color: var(--vn-pageColor);
+    .q-header .q-toolbar {
+        color: var(--fount-color);
+    }
+    --vn-text: var(--fount-color);
+    --vn-gray: var(--vn-sectionColor);
+    --vn-label: #5f5f5f;
+    --vn-dark: var(--vn-sectionColor);
+    --vn-light-gray: #e7e3e3;
+}
+
+body.body--dark {
+    --vn-pageColor: #222;
+    --vn-SectionColor: #3c3b3b;
+    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;
+}
+
 a {
    text-decoration: none;
 }

 .link {
-    color: $primary;
+    color: $color-link;
    cursor: pointer;
 }

+.tx-color-link {
+    color: $color-link !important;
+}
+
+.header-link {
+    color: $color-link !important;
+    cursor: pointer;
+    border-bottom: solid $primary;
+    border-width: 2px;
+    width: 100%;
+    .q-icon {
+        float: right;
+    }
+}
+
 .link:hover {
-    color: $orange-4;
+    text-decoration: underline;
 }

 // Removes chrome autofill background
@ -24,26 +65,6 @@ select:-webkit-autofill {
    background-clip: text !important;
 }

-body.body--light {
-    .q-header .q-toolbar {
-        background-color: $white;
-        color: #555;
-    }
-    --vn-text: #000000;
-    --vn-gray: #f5f5f5;
-    --vn-label: #5f5f5f;
-    --vn-dark: white;
-    --vn-light-gray: #e7e3e3;
-}
-
-body.body--dark {
-    --vn-text: #ffffff;
-    --vn-gray: #313131;
-    --vn-label: #a8a8a8;
-    --vn-dark: #292929;
-    --vn-light-gray: #424242;
-}
-
 .bg-vn-dark {
    background-color: var(--vn-dark);
 }
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@ -11,26 +11,32 @@
 // It's highly recommended to change the default colors
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
-
+// Tip: to add new colors https://quasar.dev/style/color-palette/#adding-your-own-colors
 $primary: #ec8916;
-$primary-light: lighten($primary, 35%);
-$secondary: #26a69a;
-$accent: #9c27b0;
-$white: #fff;
-
+$secondary: $primary;
 $positive: #21ba45;
 $negative: #c10015;
 $info: #31ccec;
 $warning: #f2c037;
-$vnColor: #8ebb27;
-
 // Pendiente de cuadrar con la base de datos
 $success: $positive;
 $alert: $negative;
+$white: #fff;
+$dark: #3c3b3b;
+// custom
+$color-link: #66bfff;
+$color-spacer-light: #a3a3a31f;
+$color-spacer: #7979794d;
+$border-thin-light: 1px solid $color-spacer-light;
+
+$dark-shadow-color: black;
+$layout-shadow-dark: 0 0 10px 2px #00000033, 0 0px 10px #0000003d;
+$spacing-md: 16px;

 .bg-success {
    background-color: $positive;
 }
+
 .bg-notice {
    background-color: $info;
 }
@ -40,12 +46,3 @@ $alert: $negative;
 .bg-alert {
    background-color: $negative;
 }
-
-$color-spacer-light: rgba(255, 255, 255, 0.12);
-$color-spacer: rgba(255, 255, 255, 0.3);
-$border-thin-light: 1px solid $color-spacer-light;
-
-$dark-shadow-color: #000;
-$dark: #292929;
-$layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
-$spacing-md: 16px;
--- 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-dark">
+        <QHeader reveal class="bg-vn-dark">
            <QToolbar class="justify-end">
                <QBtn
                    id="switchLanguage"
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@ -179,9 +179,9 @@ function openDialog(dmsId) {
        </template>
        <template #body="{ entity: { claim, salesClaimed, developments } }">
            <QCard class="vn-one">
-                <a class="header" :href="`#/claim/${entityId}/basic-data`">
+                <a class="header header-link" :href="`#/claim/${entityId}/basic-data`">
                    {{ t('claim.pageTitles.basicData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <VnLv
                    :label="t('claim.summary.created')"
@ -226,16 +226,16 @@ function openDialog(dmsId) {
                />
            </QCard>
            <QCard class="vn-three claimVnNotes full-height">
-                <a class="header" :href="`#/claim/${entityId}/notes`">
+                <a class="header header-link" :href="`#/claim/${entityId}/notes`">
                    {{ t('claim.summary.notes') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <ClaimNotes :add-note="false" style="height: 350px" order="created ASC" />
            </QCard>
            <QCard class="vn-two" v-if="salesClaimed.length > 0">
-                <a class="header" :href="`#/claim/${entityId}/lines`">
+                <a class="header header-link" :href="`#/claim/${entityId}/lines`">
                    {{ t('claim.summary.details') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <QTable :columns="detailsColumns" :rows="salesClaimed" flat>
                    <template #header="props">
@ -268,9 +268,9 @@ function openDialog(dmsId) {
                </QTable>
            </QCard>
            <QCard class="vn-two" v-if="developments.length > 0">
-                <a class="header" :href="claimUrl + 'development'">
+                <a class="header header-link" :href="claimUrl + 'development'">
                    {{ t('claim.summary.development') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <QTable :columns="developmentColumns" :rows="developments" flat>
                    <template #header="props">
@ -283,9 +283,9 @@ function openDialog(dmsId) {
                </QTable>
            </QCard>
            <QCard class="vn-max" v-if="claimDms.length > 0">
-                <a class="header" :href="`#/claim/${entityId}/photos`">
+                <a class="header header-link" :href="`#/claim/${entityId}/photos`">
                    {{ t('claim.summary.photos') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <div class="container">
                    <div
@ -302,7 +302,7 @@ function openDialog(dmsId) {
                                v-if="media.isVideo"
                                @click.stop="openDialog(media.dmsFk)"
                            >
-                                <QTooltip>Video</QTooltip>
+                                <QTooltip>Video</QTooltip>header
                            </QIcon>
                            <QCard class="multimedia relative-position">
                                <QImg
@ -326,9 +326,9 @@ function openDialog(dmsId) {
            </QCard>

            <QCard class="vn-max">
-                <a class="header" :href="claimUrl + 'action'">
+                <a class="header header-link" :href="claimUrl + 'action'">
                    {{ t('claim.summary.actions') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" class="link" />
                </a>
                <div id="slider-container" class="q-px-xl q-py-md">
                    <QSlider
@ -336,7 +336,7 @@ function openDialog(dmsId) {
                        label
                        :label-value="t('claim.summary.responsibility')"
                        label-always
-                        color="primary"
+                        color="var()"
                        markers
                        :marker-labels="[
                            { value: 1, label: t('claim.summary.company') },
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@ -62,9 +62,9 @@ const creditWarning = computed(() => {
    <CardSummary ref="summary" :url="`Clients/${entityId}/summary`">
        <template #body="{ entity }">
            <QCard class="vn-one">
-                <a class="header" :href="`#/customer/${entityId}/basic-data`">
+                <a class="header header-link" :href="`#/customer/${entityId}/basic-data`">
                    {{ t('customer.summary.basicData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
                <VnLv :label="t('customer.summary.name')" :value="entity.name" />
@ -96,9 +96,12 @@ const creditWarning = computed(() => {
                />
            </QCard>
            <QCard class="vn-one">
-                <a class="header" :href="`#/customer/${entityId}/fiscal-data`">
+                <a
+                    class="header header-link"
+                    :href="`#/customer/${entityId}/fiscal-data`"
+                >
                    {{ t('customer.summary.fiscalAddress') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <VnLv
                    :label="t('customer.summary.socialName')"
@ -121,9 +124,13 @@ const creditWarning = computed(() => {
                <VnLv :label="t('customer.summary.street')" :value="entity.street" />
            </QCard>
            <QCard class="vn-one">
-                <a class="header link" :href="`#/customer/${entityId}/fiscal-data`" link>
+                <a
+                    class="header header-link"
+                    :href="`#/customer/${entityId}/fiscal-data`"
+                    link
+                >
                    {{ t('customer.summary.fiscalData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <QCheckbox
                    :label="t('customer.summary.isEqualizated')"
@ -162,9 +169,13 @@ const creditWarning = computed(() => {
                />
            </QCard>
            <QCard class="vn-one">
-                <a class="header link" :href="`#/customer/${entityId}/billing-data`" link>
+                <a
+                    class="header header-link"
+                    :href="`#/customer/${entityId}/billing-data`"
+                    link
+                >
                    {{ t('customer.summary.billingData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <VnLv
                    :label="t('customer.summary.payMethod')"
@ -191,9 +202,13 @@ const creditWarning = computed(() => {
                />
            </QCard>
            <QCard class="vn-one" v-if="entity.defaultAddress">
-                <a class="header link" :href="`#/customer/${entityId}/consignees`" link>
+                <a
+                    class="header header-link"
+                    :href="`#/customer/${entityId}/consignees`"
+                    link
+                >
                    {{ t('customer.summary.consignee') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <VnLv
                    :label="t('customer.summary.addressName')"
@ -209,9 +224,9 @@ const creditWarning = computed(() => {
                />
            </QCard>
            <QCard class="vn-one" v-if="entity.account">
-                <a class="header link" :href="`#/customer/${entityId}/web-access`">
+                <a class="header header-link" :href="`#/customer/${entityId}/web-access`">
                    {{ t('customer.summary.webAccess') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <VnLv
                    :label="t('customer.summary.username')"
@ -224,7 +239,7 @@ const creditWarning = computed(() => {
                />
            </QCard>
            <QCard class="vn-one" v-if="entity.account">
-                <div class="header">
+                <div class="header header-link">
                    {{ t('customer.summary.businessData') }}
                </div>
                <VnLv
@ -252,12 +267,12 @@ const creditWarning = computed(() => {
            </QCard>
            <QCard class="vn-one" v-if="entity.account">
                <a
-                    class="header link"
+                    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" color="primary" />
+                    <QIcon name="vn:grafana" />
                </a>
                <VnLv
                    :label="t('customer.summary.risk')"
--- a/src/pages/Department/Card/DepartmentSummary.vue
+++ b/src/pages/Department/Card/DepartmentSummary.vue
@ -37,11 +37,11 @@ onMounted(async () => {
        <template #body="{ entity: department }">
            <QCard class="column">
                <a
-                    class="header"
+                    class="header header-link"
                    :href="`#/department/department/${entityId}/basic-data`"
                >
                    {{ t('Basic data') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <div class="full-width row wrap justify-between content-between">
                    <div class="column" style="min-width: 50%">
--- a/src/pages/Entry/Card/EntrySummary.vue
+++ b/src/pages/Entry/Card/EntrySummary.vue
@ -164,15 +164,20 @@ const fetchEntryBuys = async () => {
        :url="`Entries/${entityId}/getEntry`"
        @on-fetch="(data) => setEntryData(data)"
    >
+        <template #header-left>
+            <a class="header-link" :href="entryUrl">
+                <QIcon name="open_in_new" color="white" size="sm" />
+            </a>
+        </template>
        <template #header>
            <span>{{ entry.id }} - {{ entry.supplier.nickname }}</span>
        </template>

        <template #body>
            <QCard class="vn-one">
-                <a class="header link" :href="`#/entry/${entityId}/basic-data`">
+                <a class="header header-link" :href="`#/entry/${entityId}/basic-data`">
                    {{ t('globals.summary.basicData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>

                <VnLv :label="t('entry.summary.commission')" :value="entry.commission" />
@ -214,8 +219,9 @@ const fetchEntryBuys = async () => {
                />
            </QCard>
            <QCard class="vn-one">
-                <a class="header">
+                <a class="header header-link" :href="entryUrl">
                    {{ t('Travel data') }}
+                    <QIcon name="open_in_new" />
                </a>

                <VnLv :label="t('entry.summary.travelReference')">
@ -264,8 +270,9 @@ const fetchEntryBuys = async () => {
                />
            </QCard>
            <QCard class="vn-two" style="min-width: 100%">
-                <a class="header">
+                <a class="header header-link">
                    {{ t('entry.summary.buys') }}
+                    <QIcon name="open_in_new" />
                </a>
                <QTable
                    :rows="entryBuys"
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@ -209,9 +209,9 @@ function getLink(param) {
            <!--Basic Data-->
            <QCard class="vn-one">
                <QCardSection class="q-pa-none">
-                    <a class="header" :href="getLink('basic-data')">
+                    <a class="header header-link" :href="getLink('basic-data')">
                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
+                        <QIcon name="open_in_new" />
                    </a>
                </QCardSection>
                <VnLv
@ -233,9 +233,9 @@ function getLink(param) {
            </QCard>
            <QCard class="vn-one">
                <QCardSection class="q-pa-none">
-                    <a class="header" :href="getLink('basic-data')">
+                    <a class="header header-link" :href="getLink('basic-data')">
                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
+                        <QIcon name="open_in_new" />
                    </a>
                </QCardSection>
                <VnLv
@ -258,9 +258,9 @@ function getLink(param) {
            </QCard>
            <QCard class="vn-one">
                <QCardSection class="q-pa-none">
-                    <a class="header" :href="getLink('basic-data')">
+                    <a class="header header-link" :href="getLink('basic-data')">
                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
+                        <QIcon name="open_in_new" />
                    </a>
                </QCardSection>
                <VnLv
@ -283,9 +283,9 @@ function getLink(param) {
            </QCard>
            <QCard class="vn-one">
                <QCardSection class="q-pa-none">
-                    <a class="header" :href="getLink('basic-data')">
+                    <a class="header header-link" :href="getLink('basic-data')">
                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
+                        <QIcon name="open_in_new" />
                    </a>
                </QCardSection>
                <QCardSection class="q-pa-none">
@ -319,9 +319,9 @@ function getLink(param) {
            </QCard>
            <!--Vat-->
            <QCard v-if="invoiceIn.invoiceInTax.length">
-                <a class="header" :href="getLink('vat')">
+                <a class="header header-link" :href="getLink('vat')">
                    {{ t('invoiceIn.card.vat') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <QTable
                    :columns="vatColumns"
@ -352,9 +352,9 @@ function getLink(param) {
            </QCard>
            <!--Due Day-->
            <QCard v-if="invoiceIn.invoiceInDueDay.length">
-                <a class="header" :href="getLink('due-day')">
+                <a class="header header-link" :href="getLink('due-day')">
                    {{ t('invoiceIn.card.dueDay') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <QTable
                    class="full-width"
@ -382,9 +382,9 @@ function getLink(param) {
            </QCard>
            <!--Intrastat-->
            <QCard v-if="invoiceIn.invoiceInIntrastat.length">
-                <a class="header" :href="getLink('intrastat')">
+                <a class="header header-link" :href="getLink('intrastat')">
                    {{ t('invoiceIn.card.intrastat') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <QTable
                    :columns="intrastatColumns"
--- a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
@ -101,9 +101,10 @@ const ticketsColumns = ref([
        </template>
        <template #body="{ entity: { invoiceOut } }">
            <QCard class="vn-one">
-                <div class="header">
+                <a class="header header-link">
                    {{ t('invoiceOut.pageTitles.basicData') }}
-                </div>
+                    <QIcon name="open_in_new" />
+                </a>
                <VnLv
                    :label="t('invoiceOut.summary.issued')"
                    :value="toDate(invoiceOut.issued)"
@ -126,9 +127,10 @@ const ticketsColumns = ref([
                />
            </QCard>
            <QCard class="vn-three">
-                <div class="header">
+                <a class="header header-link">
                    {{ t('invoiceOut.summary.taxBreakdown') }}
-                </div>
+                    <QIcon name="open_in_new" />
+                </a>
                <QTable :columns="taxColumns" :rows="invoiceOut.taxesBreakdown" flat>
                    <template #header="props">
                        <QTr :props="props">
@ -140,9 +142,10 @@ const ticketsColumns = ref([
                </QTable>
            </QCard>
            <QCard class="vn-three">
-                <div class="header">
+                <a class="header header-link">
                    {{ t('invoiceOut.summary.tickets') }}
-                </div>
+                    <QIcon name="open_in_new" />
+                </a>
                <QTable v-if="tickets" :columns="ticketsColumns" :rows="tickets" flat>
                    <template #header="props">
                        <QTr :props="props">
--- a/src/pages/Login/LoginMain.vue
+++ b/src/pages/Login/LoginMain.vue
@ -69,12 +69,12 @@ async function onSubmit() {
 <template>
    <QForm @submit="onSubmit" class="q-gutter-y-md q-pa-lg formCard">
        <VnLogo alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
-
        <VnInput
            v-model="username"
            :label="t('login.username')"
            lazy-rules
            :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
+            color="primary"
        />
        <VnInput
            type="password"
@ -82,9 +82,8 @@ async function onSubmit() {
            :label="t('login.password')"
            lazy-rules
            :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
+            class="red"
        />
-        <QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
-
        <div>
            <QBtn
                :label="t('login.submit')"
@ -95,6 +94,7 @@ async function onSubmit() {
                unelevated
            />
        </div>
+        <QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
    </QForm>
 </template>

@ -104,6 +104,9 @@ async function onSubmit() {
    min-width: 300px;
 }

+.q-input {
+    color: $primary;
+}
@media (max-width: $breakpoint-xs-max) {
    .formCard {
        min-width: 100%;
--- a/src/pages/Login/VerifyEmail.vue
+++ b/src/pages/Login/VerifyEmail.vue
@ -99,6 +99,8 @@ onMounted(async () => {
 </i18n>

 <style lang="scss">
+$vnColor: #8ebb27;
+
 .formCard {
    max-width: 1500px;
    min-width: 700px;
--- a/src/pages/Shelving/Card/ShelvingSummary.vue
+++ b/src/pages/Shelving/Card/ShelvingSummary.vue
@ -71,11 +71,11 @@ const filter = {
            <template #body="{ entity }">
                <QCard class="vn-one">
                    <RouterLink
-                        class="header"
+                        class="header header-link"
                        :to="{ name: 'ShelvingBasicData', params: { id: entityId } }"
                    >
                        {{ t('shelving.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
+                        <QIcon name="open_in_new" />
                    </RouterLink>
                    <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
                    <VnLv
--- a/src/pages/Supplier/Card/SupplierSummary.vue
+++ b/src/pages/Supplier/Card/SupplierSummary.vue
@ -52,7 +52,7 @@ const isAdministrative = computed(() => {
        @on-fetch="(data) => setData(data)"
    >
        <template #header-left>
-            <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+            <a v-if="isAdministrative" class="header header-link" :href="supplierUrl">
                <QIcon name="open_in_new" color="white" size="sm" />
            </a>
        </template>
@ -64,11 +64,11 @@ const isAdministrative = computed(() => {
            <QCard class="vn-one">
                <a
                    v-if="isAdministrative"
-                    class="header link"
+                    class="header header-link"
                    :href="`#/supplier/${entityId}/basic-data`"
                >
                    {{ t('globals.summary.basicData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <span v-else> {{ t('globals.summary.basicData') }}</span>
                <VnLv label="Id" :value="supplier.id" />
@ -100,11 +100,11 @@ const isAdministrative = computed(() => {
            <QCard class="vn-one">
                <a
                    v-if="isAdministrative"
-                    class="header link"
+                    class="header header-link"
                    :href="`#/supplier/${entityId}/billing-data`"
                >
                    {{ t('supplier.summary.billingData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <span v-else> {{ t('supplier.summary.billingData') }}</span>
                <VnLv
@ -123,11 +123,11 @@ const isAdministrative = computed(() => {
            <QCard class="vn-one">
                <a
                    v-if="isAdministrative"
-                    class="header link"
+                    class="header header-link"
                    :href="`#/supplier/${entityId}/fiscal-data`"
                >
                    {{ t('supplier.summary.fiscalData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <span v-else> {{ t('supplier.summary.fiscalData') }}</span>
                <VnLv
@ -158,11 +158,11 @@ const isAdministrative = computed(() => {
            <QCard class="vn-one">
                <a
                    v-if="isAdministrative"
-                    class="header link"
+                    class="header header-link"
                    :href="`#/supplier/${entityId}/fiscal-data`"
                >
                    {{ t('supplier.summary.fiscalAddress') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <span v-else> {{ t('supplier.summary.fiscalAddress') }}</span>
                <VnLv :label="t('supplier.summary.socialName')" :value="supplier.name" />
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@ -149,7 +149,7 @@ async function changeState(value) {
            <QCard class="vn-one">
                <a class="header link" :href="ticketUrl + 'basic-data/step-one'">
                    {{ t('globals.summary.basicData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <VnLv :label="t('ticket.summary.state')">
                    <template #value>
@ -195,7 +195,7 @@ async function changeState(value) {
            <QCard class="vn-one">
                <a class="header link" :href="ticketUrl + 'basic-data/step-one'">
                    {{ t('globals.summary.basicData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <VnLv
                    :label="t('ticket.summary.shipped')"
@ -238,7 +238,7 @@ async function changeState(value) {
            <QCard class="vn-one">
                <a class="header link" :href="ticketUrl + 'observation'">
                    {{ t('ticket.pageTitles.notes') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <VnLv
                    v-for="note in ticket.notes"
@ -260,7 +260,7 @@ async function changeState(value) {
            <QCard class="vn-max">
                <a class="header link" :href="ticketUrl + 'sale'">
                    {{ t('ticket.summary.saleLines') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <QTable :rows="ticket.sales">
                    <template #header="props">
@ -398,7 +398,7 @@ async function changeState(value) {
            >
                <a class="header link" :href="ticketUrl + 'package'">
                    {{ t('globals.packages') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <QTable :rows="ticket.packagings" flat>
                    <template #header="props">
@ -419,7 +419,7 @@ async function changeState(value) {

                <a class="header link q-mt-xl" :href="ticketUrl + 'service'">
                    {{ t('ticket.summary.service') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <QTable :rows="ticket.services" flat>
                    <template #header="props">
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@ -294,7 +294,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">
+                <span class="header header-link">
                    {{ t('travel.summary.entries') }}
                </span>
                <QTable
@ -353,14 +353,14 @@ async function setTravelData(travelData) {

            <QCard class="full-width" v-if="thermographs.length > 0">
                <RouterLink
-                    class="header"
+                    class="header header-link"
                    :to="{
                        name: 'TravelThermographsIndex',
                        params: { id: travel.id },
                    }"
                >
                    {{ t('travel.summary.thermographs') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </RouterLink>
                <QTable
                    :rows="thermographs"
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@ -71,9 +71,9 @@ const filter = {
        </template>
        <template #body="{ entity: worker }">
            <QCard class="vn-one">
-                <a class="header" :href="workerUrl + `basic-data`">
+                <a class="header header-link" :href="workerUrl + `basic-data`">
                    {{ t('worker.summary.basicData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                </a>
                <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
                <VnLv
@ -111,7 +111,7 @@ const filter = {
                <VnLv :label="t('worker.summary.locker')" :value="worker.locker" />
            </QCard>
            <QCard class="vn-one">
-                <div class="header">
+                <div class="header header-link">
                    {{ t('worker.summary.userData') }}
                </div>
                <VnLv :label="t('worker.summary.userId')" :value="worker.user.id" />