diff --git a/redisinsight/ui/src/styles/components/_buttons.scss b/redisinsight/ui/src/styles/components/_buttons.scss index bff0aa54ed..2047a4a9e9 100644 --- a/redisinsight/ui/src/styles/components/_buttons.scss +++ b/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); } } } diff --git a/redisinsight/ui/src/styles/components/_toasts.scss b/redisinsight/ui/src/styles/components/_toasts.scss index 41e82161c2..142023df1f 100644 --- a/redisinsight/ui/src/styles/components/_toasts.scss +++ b/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; } } 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 b20197f8ff..4bf083ec4b 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 @@ -107,6 +107,10 @@ --buttonSecondaryDisabledTextColor: #{$buttonSecondaryDisabledTextColor}; --buttonDangerHoverColor: #{$buttonDangerHoverColor}; --buttonIconPrimaryHover: #{$buttonIconPrimaryHover}; + --buttonWarningColor: #{$buttonWarningColor}; + --buttonWarningHoverColor: #{$buttonWarningHoverColor}; + --buttonDangerToastColor: #{$buttonDangerToastColor}; + --buttonDangerToastHoverColor: #{$buttonDangerToastHoverColor}; --cliOutputResponseColor: #{$cliOutputResponseColor}; --cliOutputResponseFailColor: #{$cliOutputResponseFailColor}; 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 f51423dd58..6694d5c080 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss +++ b/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; 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 17c7688fc0..6c41a2b34c 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 @@ -109,6 +109,10 @@ --buttonSecondaryDisabledTextColor: #{$buttonSecondaryDisabledTextColor}; --buttonDangerHoverColor: #{$buttonDangerHoverColor}; --buttonIconPrimaryHover: #{$buttonIconPrimaryHover}; + --buttonWarningColor: #{$buttonWarningColor}; + --buttonWarningHoverColor: #{$buttonWarningHoverColor}; + --buttonDangerToastColor: #{$buttonDangerToastColor}; + --buttonDangerToastHoverColor: #{$buttonDangerToastHoverColor}; --cliOutputResponseColor: #{$cliOutputResponseColor}; --cliOutputResponseFailColor: #{$cliOutputResponseFailColor}; 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 e90b514137..080f7c5793 100644 --- a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss +++ b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss @@ -8,7 +8,7 @@ $euiColorDanger: #b92733; $euiColorDangerText: #ad0017; $euiColorWarning: #9d6901; $euiColorWarningText: #9d6901; -$euiTextSubduedColor: #3f597d; +$euiTextSubduedColor: #415681; $euiTextSubduedColorHover: #173369; $euiPageBackgroundColor: #edf0f5; $euiTooltipBackgroundColor: #ffffff; @@ -16,7 +16,7 @@ $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;