#RI-2544 - Selector in the list of keys is not according to the mockups

Author: egor-zalenski

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;

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;

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;

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};

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;

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};

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;