diff --git a/.circleci/config.yml b/.circleci/config.yml index 9db2ebeb82..a1b6a153d2 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -654,7 +654,7 @@ jobs: macosx: macos: xcode: 14.2.0 - resource_class: macos.m1.medium.gen1 + resource_class: macos.x86.medium.gen2 parameters: env: description: Build environment (stage || prod) diff --git a/redisinsight/ui/src/styles/base/_base.scss b/redisinsight/ui/src/styles/base/_base.scss index f0c68f44ae..af1806cfee 100644 --- a/redisinsight/ui/src/styles/base/_base.scss +++ b/redisinsight/ui/src/styles/base/_base.scss @@ -8,7 +8,7 @@ html { // sass-lint:disable-block no-misspelled-properties scrollbar-width: thin; - scrollbar-color: transparent(var(--euiColorDarkShade), 0.5) transparent; // Firefox support + scrollbar-color: var(--scrollBackgroundColor) transparent; } body { diff --git a/redisinsight/ui/src/styles/components/_popover.scss b/redisinsight/ui/src/styles/components/_popover.scss index 7b6d4b3d4e..5e3df7aceb 100644 --- a/redisinsight/ui/src/styles/components/_popover.scss +++ b/redisinsight/ui/src/styles/components/_popover.scss @@ -2,11 +2,42 @@ box-shadow: 0 3px 15px var(--controlsBoxShadowColor) !important; } +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow { + border-color: transparent !important; + + &--left:before { + border-left-color: var(--euiColorLightShade) !important; + } + &--left:after { + border-left-color: var(--euiColorEmptyShade) !important; + } + + &--right:before { + border-right-color: var(--euiColorLightShade) !important; + } + &--right:after { + border-right-color: var(--euiColorEmptyShade) !important; + } + + &--bottom:before { + border-bottom-color: var(--euiColorLightShade) !important; + } + &--bottom:after { + border-bottom-color: var(--euiColorEmptyShade) !important; + } + + &--top:before { + border-top-color: var(--euiColorLightShade) !important; + } + &--top:after { + border-top-color: var(--euiColorEmptyShade) !important; + } +} + .popoverLikeTooltip { border: none; max-width: 267px !important; background-color: var(--euiTooltipBackgroundColor) !important; - .euiPopover__panelArrow.euiPopover__panelArrow--bottom:after { border-bottom-color: var(--euiTooltipBackgroundColor) !important; } diff --git a/redisinsight/ui/src/styles/mixins/_eui.scss b/redisinsight/ui/src/styles/mixins/_eui.scss index ff7aba3d60..de9148b9a5 100644 --- a/redisinsight/ui/src/styles/mixins/_eui.scss +++ b/redisinsight/ui/src/styles/mixins/_eui.scss @@ -1,5 +1,3 @@ -$trackBackgroundColor: transparent; - $euiBreakpoints: ( "xs": 0, "s": 575px, @@ -23,14 +21,14 @@ $euiBreakpointKeys: map-keys($euiBreakpoints); } &::-webkit-scrollbar-thumb { - background-color: transparent(var(--euiColorDarkShade), .5); - border: 16px Corner solid $trackBackgroundColor; + background-color: var(--scrollBackgroundColor); + border: 6px solid transparent; background-clip: content-box; } &::-webkit-scrollbar-corner, &::-webkit-scrollbar-track { - background-color: $trackBackgroundColor; + background-color: transparent; } @content; 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 1e7851935f..14122e6b49 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss +++ b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss @@ -73,6 +73,7 @@ $externalLinkTooltipColor: $externalLinkColor; $linkToastColor: $externalLinkColor; $defaultGreenColor: #608b4e; $insightsTriggerBgColor: #292f47; +$scrollBackgroundColor: rgba(105, 112, 125, 0.5); $tableRowHoverColor: #070707; $tableRowSelectedColor: #212536; diff --git a/redisinsight/ui/src/styles/themes/dark_theme/darkTheme.scss b/redisinsight/ui/src/styles/themes/dark_theme/darkTheme.scss index 5a1ba76d88..237702a637 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/darkTheme.scss +++ b/redisinsight/ui/src/styles/themes/dark_theme/darkTheme.scss @@ -42,6 +42,7 @@ --euiTextSubduedColorHover: #{$euiTextSubduedColorHover}; --euiTitleColor: #{$euiTitleColor}; --euiBreadcrumbActive: #{$euiBreadcrumbActive}; + --scrollBackgroundColor: #{$scrollBackgroundColor}; // Contrasty text variants --euiColorPrimaryText: #{$euiColorPrimaryText}; 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 ab0ae8ce84..53351f66af 100644 --- a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss +++ b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss @@ -37,6 +37,7 @@ $externalLinkTooltipColor: #3163d8; $linkToastColor: #adbeff; $defaultGreenColor: #008000; $insightsTriggerBgColor: #D7E3FA; +$scrollBackgroundColor: rgba(105, 112, 125, 0.5); $tableRowHoverColor: #fafbfd; $tableRowSelectedColor: #ebeffa; diff --git a/redisinsight/ui/src/styles/themes/light_theme/lightTheme.scss b/redisinsight/ui/src/styles/themes/light_theme/lightTheme.scss index cdaa67426d..10a7f88631 100644 --- a/redisinsight/ui/src/styles/themes/light_theme/lightTheme.scss +++ b/redisinsight/ui/src/styles/themes/light_theme/lightTheme.scss @@ -38,6 +38,7 @@ --euiTextSubduedColorHover: #{$euiTextSubduedColorHover}; // --euiTitleColor: #{$euiTitleColor}; --euiBreadcrumbActive: #{$euiBreadcrumbActive}; + --scrollBackgroundColor: #{$scrollBackgroundColor}; // Contrasty text variants --euiColorPrimaryText: #{$euiColorPrimaryText};