From b4f3974a395fb96c8eb3ada7a03b752c003a6e42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Odini?= <raphodn@users.noreply.github.com>
Date: Wed, 15 Jan 2025 16:35:04 +0100
Subject: [PATCH] feat(Theme): match primary color with OFF colors (#1268)

---
 src/components/Header.vue |  7 +++----
 src/plugins/vuetify.js    | 13 +++++++++++--
 src/router.js             |  4 ++--
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index ebada306470..0028c201961 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -12,8 +12,8 @@
     <v-btn v-else prepend-icon="mdi-magnify" to="/search" :aria-label="$t('Common.Search')">
       {{ $t('Common.Search') }}
     </v-btn>
-    <v-btn v-if="!$vuetify.display.smAndUp" color="primary" icon="mdi-tag-plus-outline" to="/prices/add/multiple" :aria-label="$t('Common.AddPrices')" />
-    <v-btn v-else color="primary" prepend-icon="mdi-tag-plus-outline" to="/prices/add/multiple" :aria-label="$t('Common.AddPrices')">
+    <v-btn v-if="!$vuetify.display.smAndUp" icon="mdi-tag-plus-outline" to="/prices/add/multiple" :aria-label="$t('Common.AddPrices')" />
+    <v-btn v-else prepend-icon="mdi-tag-plus-outline" to="/prices/add/multiple" :aria-label="$t('Common.AddPrices')">
       {{ $t('Common.AddPrices') }}
     </v-btn>
     <template v-if="!username" #append>
@@ -38,7 +38,6 @@
         :slim="true"
         :title="item.title"
         :prepend-icon="item.props['prepend-icon']"
-        :base-color="item.props['base-color']"
         :to="item.props.to"
       />
     </v-list>
@@ -74,7 +73,7 @@ export default {
         .filter(r => r.meta && r.meta.drawerMenu)
         .filter(r => this.username ? r.meta.requiresAuth !== false : !r.meta.requiresAuth)
         .filter(r => !r.meta.drawerMenuConditionalDisplay || this.appStore.user[r.meta.drawerMenuConditionalDisplay])
-        .map((r => ({ title: this.$t(`Router.${r.meta.title}.Title`), props: { 'prepend-icon': r.meta.icon, 'base-color': r.meta.color, to: r.path }})))
+        .map((r => ({ title: this.$t(`Router.${r.meta.title}.Title`), props: { 'prepend-icon': r.meta.icon, to: r.path }})))
     }
   },
   methods: {
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index d4bd5f3a860..0a469f6f139 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -15,18 +15,27 @@ export const vuetify = createVuetify({
       mdi,
     },
   },
+  // https://vuetifyjs.com/en/features/theme
   theme: {
     themes: {
       light: {
         colors: {
-          header: "rgb(242, 233, 228)",
+          primary: '#341100',
+          header: '#f2e9e4',
           footer: '#bdbdbd'
+        },
+        variables: {
+          'border-color': '#201A17'
         }
       },
       dark: {
         colors: {
-          header: "#0d161b",
+          primary: '#A08D84',
+          header: '#201A17',
           footer: '#424242'
+        },
+        variables: {
+          'border-color': '#85746C'
         }
       },
     },
diff --git a/src/router.js b/src/router.js
index 1deeac96f90..0beb0eb4bba 100644
--- a/src/router.js
+++ b/src/router.js
@@ -12,11 +12,11 @@ const routes = [
   { path: '/dashboard/settings', name: 'dashboard-settings', component: () => import('./views/UserSettings.vue'), meta: { title: 'Settings', requiresAuth: true, breadcrumbs: [{title: 'Settings', disabled: true }] } },  // not used anymore
   { path: '/prices/add', name: 'add-price', component: () => import('./views/PriceAddHome.vue'), meta: { title: 'AddPrice', requiresAuth: true, breadcrumbs: [{title: 'AddPrice', disabled: true }] }},  // not used anymore
   { path: '/prices/add/single', name: 'price-add-single', component: () => import('./views/PriceAddSingle.vue'), meta: { title: 'Add a single price (price tag)', icon: 'mdi-tag-plus-outline', requiresAuth: true, breadcrumbs: [{title: 'Experiments', disabled: false, to: '/experiments' }, {title: 'PriceAddSingle', disabled: true }] }},
-  { path: '/prices/add/multiple', name: 'price-add-multiple', component: () => import('./views/PriceAddMultiple.vue'), meta: { title: 'AddPrices', icon: 'mdi-tag-plus-outline', drawerMenu: true, color: 'primary', requiresAuth: true, breadcrumbs: [{title: 'AddPrices', disabled: true }] }},
+  { path: '/prices/add/multiple', name: 'price-add-multiple', component: () => import('./views/PriceAddMultiple.vue'), meta: { title: 'AddPrices', icon: 'mdi-tag-plus-outline', drawerMenu: true, requiresAuth: true, breadcrumbs: [{title: 'AddPrices', disabled: true }] }},
   { path: '/prices/add/multiple/price-tag', name: 'price-add-multiple-price-tag', redirect: () => { return { path: '/prices/add/multiple' }}},
   { path: '/prices/add/multiple/receipt', name: 'price-add-multiple-receipt', redirect: () => { return { path: '/prices/add/multiple' }}},
   { path: '/proofs/add/single', name: 'proof-add-single', component: () => import('./views/ProofAddSingle.vue'), meta: { title: 'AddProofSingle', icon: 'mdi-image-plus', requiresAuth: true, breadcrumbs: [{title: 'Experiments', disabled: false, to: '/experiments' }, {title: 'AddProofSingle', disabled: true }] }},
-  { path: '/proofs/add/multiple', name: 'proof-add-multiple', component: () => import('./views/ProofAddMultiple.vue'), meta: { title: 'AddProofs', icon: 'mdi-image-plus', drawerMenu: true, color: 'primary', requiresAuth: true, breadcrumbs: [{title: 'AddProofs', disabled: true }] }},
+  { path: '/proofs/add/multiple', name: 'proof-add-multiple', component: () => import('./views/ProofAddMultiple.vue'), meta: { title: 'AddProofs', icon: 'mdi-image-plus', drawerMenu: true, requiresAuth: true, breadcrumbs: [{title: 'AddProofs', disabled: true }] }},
   { path: '/search', name: 'search', component: () => import('./views/Search.vue'), meta: { title: 'Search', icon: 'mdi-magnify', drawerMenu: true, breadcrumbs: [{title: 'Search', disabled: true }] }},
   { path: '/prices/:id', name: 'prices-detail', component: () => import('./views/PriceDetail.vue'), meta: { title: 'Price detail' }},
   { path: '/prices', name: 'prices', component: () => import('./views/PriceList.vue'), meta: { title: 'LatestPrices', icon: 'mdi-tag-multiple-outline', drawerMenu: true, breadcrumbs: [{title: 'LatestPrices', disabled: true }] }},