#RI-2456-update colors (#560)

* #RI-2456-update colors

Author: AmirAllayarovSofteq

redisinsight/ui/src/styles/components/_buttons.scss

@@ -102,11 +102,14 @@
 
 .euiButton {
   &.euiButton--warning.euiButton--fill:not([class*='isDisabled']) {
+    background-color: var(--buttonWarningColor);
+    border-color: var(--buttonWarningColor);
+
     &:hover,
     &:focus,
     &:focus-within {
-      background-color: var(--buttonDangerHoverColor);
-      border-color: var(--buttonDangerHoverColor);
+      background-color: var(--buttonWarningHoverColor);
+      border-color: var(--buttonWarningHoverColor);
     }
   }
 }

redisinsight/ui/src/styles/components/_toasts.scss

@@ -45,8 +45,12 @@
     color: white !important;
   }
   &.euiButton--fill {
-    border-color: var(--euiColorColorWarning) !important;
-    background-color: var(--euiToastDangerBtnColor) !important;
+    border: 1px solid var(--buttonDangerToastColor) !important;
+    background-color: transparent !important;
+  }
+  &.euiButton--fill:hover {
+    border: 1px solid var(--buttonDangerToastHoverColor) !important;
+    background-color: var(--buttonDangerToastHoverColor) !important;
   }
 }
 

redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss

@@ -107,6 +107,10 @@
   --buttonSecondaryDisabledTextColor: #{$buttonSecondaryDisabledTextColor};
   --buttonDangerHoverColor: #{$buttonDangerHoverColor};
   --buttonIconPrimaryHover: #{$buttonIconPrimaryHover};
+  --buttonWarningColor: #{$buttonWarningColor};
+  --buttonWarningHoverColor: #{$buttonWarningHoverColor};
+  --buttonDangerToastColor: #{$buttonDangerToastColor};
+  --buttonDangerToastHoverColor: #{$buttonDangerToastHoverColor};
 
   --cliOutputResponseColor: #{$cliOutputResponseColor};
   --cliOutputResponseFailColor: #{$cliOutputResponseFailColor};

redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss

@@ -66,6 +66,10 @@ $buttonSecondaryTextColor: #dfe5ef;
 $buttonSecondaryDisabledTextColor: #8b90a3;
 $buttonDangerHoverColor: #e8524a;
 $buttonIconPrimaryHover: #364da8;
+$buttonWarningColor: #9e2f29;
+$buttonWarningHoverColor: #b00c03;
+$buttonDangerToastColor: #e8524a;
+$buttonDangerToastHoverColor: #bf3932;
 
 $hoverInListColor: #070707;
 $hoverInListColorLight: #465282;

redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss

@@ -109,6 +109,10 @@
   --buttonSecondaryDisabledTextColor: #{$buttonSecondaryDisabledTextColor};
   --buttonDangerHoverColor: #{$buttonDangerHoverColor};
   --buttonIconPrimaryHover: #{$buttonIconPrimaryHover};
+  --buttonWarningColor: #{$buttonWarningColor};
+  --buttonWarningHoverColor: #{$buttonWarningHoverColor};
+  --buttonDangerToastColor: #{$buttonDangerToastColor};
+  --buttonDangerToastHoverColor: #{$buttonDangerToastHoverColor};
 
   --cliOutputResponseColor: #{$cliOutputResponseColor};
   --cliOutputResponseFailColor: #{$cliOutputResponseFailColor};

redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss

@@ -8,15 +8,15 @@ $euiColorDanger: #b92733;
 $euiColorDangerText: #ad0017;
 $euiColorWarning: #9d6901;
 $euiColorWarningText: #9d6901;
-$euiTextSubduedColor: #3f597d;
+$euiTextSubduedColor: #415681;
 $euiTextSubduedColorHover: #173369;
 $euiPageBackgroundColor: #edf0f5;
 $euiTooltipBackgroundColor: #ffffff;
 $euiTooltipTextColor: #173369;
 $euiTooltipTextSecondColor: #395b88;
 $euiTooltipTitleTextColor: #395984;
 $euiColorLightShade: #cdd7e6;
-$euiColorLightestShade: #f6f8fd;
+$euiColorLightestShade: #e4eaf2;
 $euiColorEmptyShade: #ffffff;
 $euiBreadcrumbActive: #395984;
 $euiToastBackgroundColor: #243dac;
@@ -35,7 +35,7 @@ $externalLinkColor: #3163d8;
 $externalLinkTooltipColor: #3163d8;
 
 $tableRowHoverColor: #fafbfd;
-$tableRowSelectedColor: #e9edfa;
+$tableRowSelectedColor: #e4eaf2;
 $tableLightestBorderColor: #c1cbd9;
 $tableLightBorderColor: #e4eaf2;
 $tableDarkestBorderColor: #e9edf3;
@@ -49,12 +49,12 @@ $inputTextColor: #173369;
 $inputPlaceholderColor: #395984;
 $inputDisabledBackgroundColor: #f6f8fd;
 $controlsBoxShadowColor: #c1cbd9;
-$controlsBorderColor: #c1cbd9;
+$controlsBorderColor: #8992b3;
 $controlsLabelColor: #385985;
 $controlsLabelHoverColor: #173369;
 $iconsDefaultColor: #728baf;
 $iconsDefaultHoverColor: #173369;
-$separatorColor: #8992b3;
+$separatorColor: #cdd7e6;
 $separatorNavigationColor: #465282;
 $separatorDropdownColor: #8b90a3;
 
@@ -63,12 +63,16 @@ $buttonSecondaryTextColor: #243dac;
 $buttonSecondaryDisabledTextColor: #dfe4fb;
 $buttonDangerHoverColor: #cb3844;
 $buttonIconPrimaryHover: #dfe4fb;
+$buttonWarningColor: #9e2f29;
+$buttonWarningHoverColor: #b00c03;
+$buttonDangerToastColor: #e8524a;
+$buttonDangerToastHoverColor: #bf3932;
 
 $hoverInListColor: #e9edfa;
 $hoverInListColorLight: #d7e3fa;
-$textColorShade: #3f597d;
+$textColorShade: #415681;
 $cliOutputResponseColor: #395b88;
-$cliOutputResponseFailColor: #aa131f;
+$cliOutputResponseFailColor: #ad0017;
 
 $badgeBackgroundColor: #e8efff;
 $commandGroupBadgeColor: #b8c5db;