From 8bb25c657d146d215f2b74e892c42fa59bf2498d Mon Sep 17 00:00:00 2001
From: Aleksey Hoffman <61761672+aleksey-hoffman@users.noreply.github.com>
Date: Sat, 20 Nov 2021 17:48:36 +0300
Subject: [PATCH] UI / dev: improve accent color consistency

---
 src/components/Dialogs.vue         |  4 ++--
 src/components/DirItem.vue         |  2 +-
 src/components/InfoPanel.vue       |  2 +-
 src/components/NavigationPanel.vue |  2 +-
 src/styles/globalVariables.css     | 11 +++++------
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/Dialogs.vue b/src/components/Dialogs.vue
index acb0ed36..b2b92380 100644
--- a/src/components/Dialogs.vue
+++ b/src/components/Dialogs.vue
@@ -2723,7 +2723,7 @@ export default {
 .program-icon-set__container
   .v-btn[isSelected] {
     background-color: var(--highlight-color-3);
-    border: 1px solid var(--icon-color-3);
+    border: 1px solid var(--icon-color-1);
     border-radius: 4px;
   }
 
@@ -2736,6 +2736,6 @@ export default {
 .program-icon-set__container
   .v-btn[isSelected]
     .v-icon {
-      color: var(--icon-color-3) !important;
+      color: var(--icon-color-1) !important;
     }
 </style>
diff --git a/src/components/DirItem.vue b/src/components/DirItem.vue
index 5f7710b1..f0115587 100644
--- a/src/components/DirItem.vue
+++ b/src/components/DirItem.vue
@@ -1216,7 +1216,7 @@ export default {
   .dir-item-card__thumb-container {
     width: 48px;
     height: 48px;
-    background-color: rgb(159, 168, 218, 0.1);
+    background-color: rgb(var(--key-color-1-value), 0.3);
   }
 
 #app:not([display-accent-color-backgrounds])
diff --git a/src/components/InfoPanel.vue b/src/components/InfoPanel.vue
index 899cc111..25829590 100644
--- a/src/components/InfoPanel.vue
+++ b/src/components/InfoPanel.vue
@@ -601,7 +601,7 @@ export default {
   position: relative;
   width: 280px;
   height: 158px;
-  background-color: var(--info-panel-preview-container-bg-color);
+  background-color: rgb(var(--key-color-1-value), 0.5);
 }
 
 #app:not([display-accent-color-backgrounds])
diff --git a/src/components/NavigationPanel.vue b/src/components/NavigationPanel.vue
index 1c3347c0..30bdda03 100644
--- a/src/components/NavigationPanel.vue
+++ b/src/components/NavigationPanel.vue
@@ -315,7 +315,7 @@ export default {
 }
 
 .nav-panel__item.active-route .nav-panel__item__icon {
-  color: var(--icon-color-3) !important;
+  color: var(--icon-color-1) !important;
 }
 
 .nav-panel__item.active-route .nav-panel__item__title {
diff --git a/src/styles/globalVariables.css b/src/styles/globalVariables.css
index 612877e1..93c56f44 100644
--- a/src/styles/globalVariables.css
+++ b/src/styles/globalVariables.css
@@ -1,7 +1,7 @@
 #app {
   --nav-panel-width: 48px;
   --nav-panel-width-expanded: 278px;
-  --nav-panel-active-indicator-width: 4px;
+  --nav-panel-active-indicator-width: 2px;
   --nav-panel-icon-width: calc(
     var(--nav-panel-width) -
     (var(--nav-panel-active-indicator-width) * 2)
@@ -28,7 +28,8 @@
 #app[data-theme-type="dark"],
 #app[data-theme-type="light-filter"] {
   --main-color-1: rgba(47, 52, 68);
-  --key-color-1: #607d8b;
+  --key-color-1: rgb(79, 104, 115);
+  --key-color-1-value: 79, 104, 115;
   --key-color-1-darker-1: rgb(55, 68, 88);
   --highlight-color-1: rgba(255, 255, 255, 0.3);
   --highlight-color-2: rgba(255, 255, 255, 0.2);
@@ -52,9 +53,8 @@
   --color-1-alt-1: rgb(96, 125, 139, 0.5);
   --code-bg-color: rgb(0, 0, 0, 0.1);
   --table-color: #616161;
-  --icon-color-1: #546e7a;
+  --icon-color-1: rgb(var(--key-color-1-value), 1);
   --icon-color-2: #9e9e9e;
-  --icon-color-3: #607d8b;
   --icon_active-color-1: rgb(96, 125, 139, 0.2);
   --title-color-1: #9e9e9e;
   --sub-title-color-1: #757575;
@@ -87,12 +87,11 @@
   --shadow-x4_hover: -16px 20px 48px rgb(0,0,0,0.3);
   --scrollbar-color: rgb(56, 58, 64, 0.5);
   --app-content-bg-color: var(--bg-color-2);
-  --info-panel-preview-container-bg-color: #37474f;
   --info-panel-preview-container-color: #607d8b;
   --nav-panel-color-1: #9e9e9e;
   --nav-panel-color_hover: rgb(120, 144, 156, 0.15);
   --nav-panel-icon-color-1: #78909c;
-  --nav-panel-indicator-color: #455a64;
+  --nav-panel-indicator-color: rgb(var(--key-color-1-value), 0.8);
   --nav-panel-item-bg-color_active:rgb(120, 144, 156, 0.05);
   --nav-panel-drive-overlay-bg-color: var(--bg-color-1);
   --nav-panel-drive-overlay-color: #bdbdbd;