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] 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