From b092c5af6d0ec396f125694e6fa405d18685c263 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Mon, 26 Feb 2024 15:00:14 +0100
Subject: [PATCH] refs 6486 commit

---
 src/components/ui/CardDescriptor.vue     |   5 +-
 src/css/app.scss                         |  21 +---
 src/css/quasar.variables.scss            |  28 ++++-
 src/css/test.scss                        | 136 +++++++++++++++++++++++
 src/pages/Claim/Card/ClaimDescriptor.vue |   3 +
 5 files changed, 167 insertions(+), 26 deletions(-)
 create mode 100644 src/css/test.scss

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 241937a4e7..417f186d58 100644
--- 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;
@@ -207,6 +208,8 @@ const emit = defineEmits(['onFetch']);
 </style>
 
 <style lang="scss" scoped>
+.body {
+}
 .title {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -221,8 +224,6 @@ const emit = defineEmits(['onFetch']);
     margin-bottom: 15px;
 }
 .list-box {
-    background-color: var(--vn-gray);
-
     .q-item__label {
         color: var(--vn-label);
     }
diff --git a/src/css/app.scss b/src/css/app.scss
index 4fec9db08a..efd26edb29 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1,5 +1,6 @@
 // app global css in SCSS form
 @import './icons.scss';
+@import './quasar.variables.scss';
 
 a {
     text-decoration: none;
@@ -24,26 +25,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);
 }
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 6a37005617..7f5871ad28 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -13,15 +13,16 @@
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
 $primary: #ec8916;
-$secondary: #26a69a;
-$accent: #9c27b0;
+$secondary: $primary;
 $white: #fff;
 
 $positive: #21ba45;
 $negative: #c10015;
 $info: #31ccec;
 $warning: #f2c037;
+
 $vnColor: #8ebb27;
+$dark: #3c3b3b;
 
 // Pendiente de cuadrar con la base de datos
 $success: $positive;
@@ -40,11 +41,30 @@ $alert: $negative;
     background-color: $negative;
 }
 
+body.body--light {
+    background-color: white;
+    .q-header .q-toolbar {
+        color: black;
+    }
+    --vn-text: black;
+    --vn-gray: #eeeeee;
+    --vn-label: #5f5f5f;
+    --vn-dark: #eeeeee;
+    --vn-light-gray: #e7e3e3;
+}
+
+body.body--dark {
+    background-color: #222;
+    --vn-text: white;
+    --vn-gray: #3c3b3b;
+    --vn-label: #a8a8a8;
+    --vn-dark: #3c3b3b;
+    --vn-light-gray: #424242;
+}
 $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;
+$dark-shadow-color: black;
 $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;
diff --git a/src/css/test.scss b/src/css/test.scss
new file mode 100644
index 0000000000..45f1d68073
--- /dev/null
+++ b/src/css/test.scss
@@ -0,0 +1,136 @@
+$font-size: 11pt;
+$menu-width: 256px;
+$topbar-height: 56px;
+$mobile-width: 800px;
+$float-spacing: 20px;
+
+// Width
+
+$width-xs: 400px;
+$width-sm: 544px;
+$width-md: 800px;
+$width-lg: 1280px;
+$width-xl: 1600px;
+
+// Spacing
+
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 32px;
+$spacing-xl: 70px;
+
+// Light theme
+
+/* $color-primary: #f7931e;
+$color-secondary: $color-primary;
+
+$color-font: #222;
+$color-font-light: #555;
+$color-font-secondary: #9b9b9b;
+$color-font-dark: white;
+$color-font-link: #005a9a;
+$color-font-bg: rgba(0, 0, 0, .7);
+$color-font-bg-marginal: rgba(0, 0, 0, .4);
+$color-font-bg-dark: rgba(255, 255, 255, .7);
+$color-font-bg-dark-marginal: rgba(255, 255, 255, .4);
+
+$color-header: #3d3d3d;
+$color-menu-header: #3d3d3d;
+$color-bg: #e5e5e5;
+$color-bg-dark: #3d3d3d;
+$color-active: #3d3d3d;
+$color-active-font: $color-font-dark;
+$color-bg-panel: white;
+$color-main: $color-primary;
+$color-marginal: #ccc;
+$color-success: #a3d131;
+$color-notice: #32b1ce;
+$color-alert: #f42121;
+$color-button: $color-secondary;
+
+$color-spacer: rgba(0, 0, 0, .3);
+$color-spacer-light: rgba(0, 0, 0, .12);
+$color-input-underline: rgba(0, 0, 0, .12);
+$color-input-underline-hover: rgba(0, 0, 0, .6);
+$color-shadow: rgba(0, 0, 0, .2);
+$color-hightlight: rgba(0, 0, 0, .05);
+$color-hover-cd: rgba(0, 0, 0, .1);
+$color-hover-dc: .7;
+$color-disabled: .6;
+
+$color-primary-medium: lighten($color-primary, 20%);
+$color-primary-light: lighten($color-primary, 35%);
+$color-font-link-medium: lighten($color-font-link, 20%);
+$color-font-link-light: lighten($color-font-link, 35%);
+$color-main-medium: lighten($color-main, 20%);
+$color-main-light: lighten($color-main, 35%);
+$color-success-medium: lighten($color-success, 20%);
+$color-success-light: lighten($color-success, 35%);
+$color-notice-medium: lighten($color-notice, 20%);
+$color-notice-light: lighten($color-notice, 35%);
+$color-alert-medium: lighten($color-alert, 20%);
+$color-alert-light: lighten($color-alert, 35%); */
+/**/
+
+// Dark theme
+$color-primary: #ec8916;
+$color-secondary: $color-primary;
+
+$color-font: #eee;
+$color-font-light: #aaa;
+$color-font-secondary: #777;
+$color-font-dark: white;
+$color-font-link: #66bfff;
+$color-font-bg: rgba(0, 0, 0, 0.8);
+$color-font-bg-marginal: rgba(255, 255, 255, 0.4);
+$color-font-bg-dark: rgba(255, 255, 255, 0.7);
+$color-font-bg-dark-marginal: rgba(255, 255, 255, 0.4);
+
+$color-header: #3d3d3d;
+$color-menu-header: #3d3d3d;
+$color-bg: #222;
+$color-bg-dark: #222;
+$color-active: #666;
+$color-active-font: white;
+$color-bg-panel: #3c3b3b;
+$color-main: $color-primary;
+$color-marginal: #222;
+$color-success: #a3d131;
+$color-notice: #32b1ce;
+$color-alert: #fa3939;
+$color-pink: #ff99cc;
+$color-yellow: #ffff00;
+$color-button: $color-secondary;
+
+$color-spacer: rgba(255, 255, 255, 0.3);
+$color-spacer-light: rgba(255, 255, 255, 0.12);
+$color-input-underline: rgba(255, 255, 255, 0.12);
+$color-input-underline-hover: rgba(255, 255, 255, 0.6);
+$color-shadow: rgba(0, 0, 0, 0.2);
+$color-border: rgba(0, 0, 0, 0.3);
+$color-hightlight: rgba(255, 255, 255, 0.15);
+$color-hover-cd: rgba(255, 255, 255, 0.1);
+$color-hover-dc: 0.7;
+$color-disabled: 0.6;
+
+$color-primary-medium: lighten($color-primary, 20%);
+$color-primary-light: lighten($color-primary, 35%);
+$color-font-link-medium: lighten($color-font-link, 20%);
+$color-font-link-light: lighten($color-font-link, 35%);
+$color-main-medium: lighten($color-main, 20%);
+$color-main-light: lighten($color-main, 35%);
+$color-success-medium: lighten($color-success, 20%);
+$color-success-light: lighten($color-success, 35%);
+$color-notice-medium: lighten($color-notice, 20%);
+$color-notice-light: lighten($color-notice, 35%);
+$color-alert-medium: lighten($color-alert, 20%);
+$color-alert-light: lighten($color-alert, 35%);
+/**/
+
+// Border
+
+$border-thin: 1px solid $color-border;
+$border-thin-light: 1px solid $color-spacer-light;
+$border: 2px solid $color-border;
+$shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 3827a70d4a..54e0a02dca 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -189,6 +189,9 @@ onMounted(async () => {
     </CardDescriptor>
 </template>
 <style scoped>
+body {
+    background-color: var(--vn-gray);
+}
 .q-item__label {
     margin-top: 0;
 }