From 5e50315489a304789132fd3185201db82fb602e6 Mon Sep 17 00:00:00 2001
From: Zalenski Egor <63463140+zalenskiSofteq@users.noreply.github.com>
Date: Thu, 17 Mar 2022 12:12:07 +0300
Subject: [PATCH] #RI-2544 - Selector in the list of keys is not according to
 the mockups

---
 .../ui/src/components/virtual-table/styles.module.scss   | 9 +++++++--
 .../virtual-tree/components/Node/styles.module.scss      | 4 ++--
 .../browser/components/keys-header/styles.module.scss    | 2 +-
 .../src/styles/themes/dark_theme/_dark_theme.lazy.scss   | 2 +-
 .../ui/src/styles/themes/dark_theme/_theme_color.scss    | 2 +-
 .../src/styles/themes/light_theme/_light_theme.lazy.scss | 2 +-
 .../ui/src/styles/themes/light_theme/_theme_color.scss   | 2 +-
 7 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/redisinsight/ui/src/components/virtual-table/styles.module.scss b/redisinsight/ui/src/components/virtual-table/styles.module.scss
index bc80d59435..57a55b3bf2 100644
--- a/redisinsight/ui/src/components/virtual-table/styles.module.scss
+++ b/redisinsight/ui/src/components/virtual-table/styles.module.scss
@@ -36,7 +36,7 @@ $footerHeight: 38px;
     }
     .ReactVirtualized__Grid__innerScrollContainer {
       & > div:hover {
-        background: var(--tableRowHoverColor);
+        background: var(--browserComponentActive);
       }
     }
   }
@@ -67,7 +67,12 @@ $footerHeight: 38px;
   }
 
   :global(.table-row-selected) {
-    background: var(--browserViewTypeActive) !important;
+    background: var(--browserComponentActive) !important;
+
+    * {
+      color: var(--euiColorFullShade) !important;
+    }
+
     & > div:first-of-type {
       border-left: 3px solid transparent;
       border-left-color: var(--euiColorPrimary) !important;
diff --git a/redisinsight/ui/src/components/virtual-tree/components/Node/styles.module.scss b/redisinsight/ui/src/components/virtual-tree/components/Node/styles.module.scss
index c774f56705..38e9aabe51 100644
--- a/redisinsight/ui/src/components/virtual-tree/components/Node/styles.module.scss
+++ b/redisinsight/ui/src/components/virtual-tree/components/Node/styles.module.scss
@@ -8,7 +8,7 @@
   border-left: 3px solid transparent;
 
   &:hover {
-    background-color: var(--browserTreeNodeOpen);
+    background-color: var(--browserComponentActive);
   }
 }
 
@@ -29,7 +29,7 @@
 
 .nodeSelected {
   border-left-color: var(--euiColorPrimary) !important;
-  background-color: var(--browserTreeNodeOpen);
+  background-color: var(--browserComponentActive);
 
   .nodeContent {
     color: var(--euiColorFullShade) !important;
diff --git a/redisinsight/ui/src/pages/browser/components/keys-header/styles.module.scss b/redisinsight/ui/src/pages/browser/components/keys-header/styles.module.scss
index 69fa59f74e..b4a033e825 100644
--- a/redisinsight/ui/src/pages/browser/components/keys-header/styles.module.scss
+++ b/redisinsight/ui/src/pages/browser/components/keys-header/styles.module.scss
@@ -74,7 +74,7 @@
   }
 
   &.active {
-    background-color: var(--browserViewTypeActive) !important;
+    background-color: var(--browserComponentActive) !important;
 
     svg {
       color: var(--euiColorPrimary) !important;
diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss
index c2513044b8..6b64d724b5 100644
--- a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss
+++ b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss
@@ -90,7 +90,7 @@
   --externalLinkColor: #{$externalLinkColor};
   --externalLinkTooltipColor: #{$externalLinkTooltipColor};
   --browserViewTypePassive: #{$browserViewTypePassive};
-  --browserViewTypeActive: #{$browserViewTypeActive};
+  --browserComponentActive: #{$browserComponentActive};
   --browserTreeNodeOpen: #{$browserTreeNodeOpen};
 
   --iconsDefaultColor: #{$iconsDefaultColor};
diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss
index ba14a42160..d8ed707132 100644
--- a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss
+++ b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss
@@ -44,7 +44,7 @@ $tableDarkestBorderColor: #2c2c2c;
 
 $browserTableRowEven: #171717;
 $browserViewTypePassive: #171717;
-$browserViewTypeActive: #212536;
+$browserComponentActive: #292F47;
 $browserTreeNodeOpen: #2B2F40;
 
 $inputTextColor: #DFE5EF;
diff --git a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss
index 84449421bf..13744fafa4 100644
--- a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss
+++ b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss
@@ -92,7 +92,7 @@
   --externalLinkColor: #{$externalLinkColor};
   --externalLinkTooltipColor: #{$externalLinkTooltipColor};
   --browserViewTypePassive: #{$browserViewTypePassive};
-  --browserViewTypeActive: #{$browserViewTypeActive};
+  --browserComponentActive: #{$browserComponentActive};
   --browserTreeNodeOpen: #{$browserTreeNodeOpen};
 
   --iconsDefaultColor: #{$iconsDefaultColor};
diff --git a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss
index 6438a48ab3..24d2273e60 100644
--- a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss
+++ b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss
@@ -40,7 +40,7 @@ $tableDarkestBorderColor: #E9EDF3;
 
 $browserTableRowEven: #F6F8FD;
 $browserViewTypePassive: #f6f7f9;
-$browserViewTypeActive: #d7e3fa;
+$browserComponentActive: #d7e3fa;
 $browserTreeNodeOpen: #d7e3fa;
 
 $inputTextColor: #173369;