From 90bfba02909a198a89e25e8cabeb8f87751bc78e Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 26 Feb 2024 08:45:02 -0300
Subject: [PATCH] Create global variable for table separation row

---
 src/css/app.scss                      |  5 +++++
 src/pages/Entry/Card/EntryBuys.vue    |  5 +----
 src/pages/Entry/Card/EntrySummary.vue | 13 ++-----------
 3 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index 4fec9db08..9a25d63e2 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -75,6 +75,11 @@ body.body--dark {
     background-color: var(--vn-light-gray);
 }
 
+.vn-table-separation-row {
+    height: 16px !important;
+    background-color: var(--vn-gray) !important;
+}
+
 /* Estilo para el asterisco en campos requeridos */
 .q-field.required .q-field__label:after {
     content: ' *';
diff --git a/src/pages/Entry/Card/EntryBuys.vue b/src/pages/Entry/Card/EntryBuys.vue
index c6647de50..06d1fcb4c 100644
--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@@ -420,7 +420,7 @@ const lockIconType = (groupingMode, mode) => {
                     </QTr>
                     <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
                     <QTr v-if="props.rowIndex !== rows.length - 1" class="separation-row">
-                        <QTd colspan="12" style="height: 16px" />
+                        <QTd colspan="12" class="vn-table-separation-row" />
                     </QTr>
                 </template>
                 <template #item="props">
@@ -471,9 +471,6 @@ const lockIconType = (groupingMode, mode) => {
 </template>
 
 <style lang="scss" scoped>
-.separation-row {
-    background-color: var(--vn-gray) !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 e6842a3f9..e2828a1ce 100644
--- a/src/pages/Entry/Card/EntrySummary.vue
+++ b/src/pages/Entry/Card/EntrySummary.vue
@@ -334,11 +334,8 @@ const fetchEntryBuys = async () => {
                             </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: 16px" />
+                        <QTr v-if="rowIndex !== entryBuys.length - 1">
+                            <QTd colspan="10" class="vn-table-separation-row" />
                         </QTr>
                     </template>
                 </QTable>
@@ -347,12 +344,6 @@ const fetchEntryBuys = async () => {
     </CardSummary>
 </template>
 
-<style lang="scss" scoped>
-.separation-row {
-    background-color: var(--vn-gray) !important;
-}
-</style>
-
 <i18n>
 es:
     Travel data: Datos envío