RI-7607,7609: fix colors in wb (#5048)

* RI-7609: replace custom action buttons with ToggleButton
RI-7607: replace purple border with colors we use in keys list onnhover

* RI-7607: remove QABtn

Author: ArtemHoruzhenko

redisinsight/ui/src/components/query/query-actions/QueryActions.styles.ts

@@ -1,40 +1,5 @@
 import styled from 'styled-components'
-import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
 import Divider from 'uiSrc/components/divider/Divider'
 export const QADivider = styled(Divider)`
   height: 20px;
 `
-export const QABtn = styled(EmptyButton)<{ $active: boolean }>`
-  height: 24px;
-  min-width: auto;
-  min-height: auto;
-  border-radius: 4px;
-  background: ${({ $active }) =>
-    $active ? 'var(--browserComponentActive)' : 'transparent'};
-  box-shadow: none;
-
-  border: 1px solid
-    ${({ $active }) => ($active ? 'var(--euiColorPrimary)' : 'transparent')};
-
-  :global(.RI-flex-row) {
-    padding: 0 6px;
-    font:
-      normal normal 400 14px/17px Graphik,
-      sans-serif;
-  }
-
-  &:focus,
-  &:active {
-    outline: 0;
-  }
-
-  svg {
-    margin-top: 1px;
-    width: 14px;
-    height: 14px;
-  }
-
-  svg path {
-    fill: var(--euiTextSubduedColor);
-  }
-`

redisinsight/ui/src/components/query/query-actions/QueryActions.tsx

@@ -5,16 +5,14 @@ import { KEYBOARD_SHORTCUTS } from 'uiSrc/constants'
 import { KeyboardShortcut, RiTooltip } from 'uiSrc/components'
 import { isGroupMode } from 'uiSrc/utils'
 
-import { GroupModeIcon, RawModeIcon } from 'uiSrc/components/base/icons'
+import { RiIcon } from 'uiSrc/components/base/icons'
 
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { Text } from 'uiSrc/components/base/text'
 import RunButton from 'uiSrc/components/query/components/RunButton'
 import { Row } from 'uiSrc/components/base/layout/flex'
-import {
-  QABtn,
-  QADivider,
-} from 'uiSrc/components/query/query-actions/QueryActions.styles'
+import { QADivider } from 'uiSrc/components/query/query-actions/QueryActions.styles'
+import { ToggleButton } from 'uiSrc/components/base/forms/buttons'
 
 export interface Props {
   onChangeMode?: () => void
@@ -53,15 +51,15 @@ const QueryActions = (props: Props) => {
           content="Enables the raw output mode"
           data-testid="change-mode-tooltip"
         >
-          <QABtn
-            onClick={() => onChangeMode()}
-            icon={RawModeIcon}
+          <ToggleButton
+            onPressedChange={() => onChangeMode()}
             disabled={isLoading}
-            $active={activeMode === RunQueryMode.Raw}
+            pressed={activeMode === RunQueryMode.Raw}
             data-testid="btn-change-mode"
           >
-            Raw mode
-          </QABtn>
+            <RiIcon size="m" type="RawModeIcon" />
+            <Text size="s">Raw mode</Text>
+          </ToggleButton>
         </RiTooltip>
       )}
       {onChangeGroupMode && (
@@ -77,15 +75,15 @@ const QueryActions = (props: Props) => {
           }
           data-testid="group-results-tooltip"
         >
-          <QABtn
-            onClick={() => onChangeGroupMode()}
+          <ToggleButton
+            onPressedChange={() => onChangeGroupMode()}
             disabled={isLoading}
-            icon={GroupModeIcon}
-            $active={isGroupMode(resultsMode)}
+            pressed={isGroupMode(resultsMode)}
             data-testid="btn-change-group-mode"
           >
-            Group results
-          </QABtn>
+            <RiIcon size="m" type="GroupModeIcon" />
+            <Text size="s">Group results</Text>
+          </ToggleButton>
         </RiTooltip>
       )}
       <QADivider orientation="vertical" colorVariable="separatorColor" />

redisinsight/ui/src/components/query/query-card/styles.module.scss

@@ -18,7 +18,7 @@ $breakpoint-m: 1050px;
   }
 
   &.isOpen .container {
-    border-color: var(--euiColorPrimary);
+    border-color: var(--browserComponentActive);
   }
 
   &:global(.fullscreen) {