RI-7774 Fix Copilot button styles

redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+
+import { FlexGroup } from 'uiSrc/components/base/layout/flex'
+import { IconButton } from 'uiSrc/components/base/forms/buttons'
+import { IconButtonProps } from 'uiSrc/components/base/forms/buttons/IconButton'
+
+export const CopilotWrapper = styled(FlexGroup)`
+  user-select: none;
+`
+
+export const CopilotIconButton = styled(IconButton)<
+  { isOpen: boolean } & IconButtonProps
+>`
+  padding: ${({ theme }) => theme.core.space.space200};
+
+  // TODO: Remove this once size property is enabled for IconButton
+  svg {
+    width: 21px;
+    height: 21px;
+    color: ${({ theme }) => theme.semantic.color.text.attention600};
+  }
+
+  ${({ isOpen, theme }) =>
+    isOpen
+      ? `background-color: ${theme.semantic.color.background.primary200};`
+      : ''}
+`

redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx

@@ -1,6 +1,4 @@
 import React from 'react'
-import cx from 'classnames'
-
 import { useDispatch, useSelector } from 'react-redux'
 import {
   sidePanelsSelector,
@@ -10,35 +8,33 @@
 import { RiTooltip } from 'uiSrc/components'
 import { CopilotIcon } from 'uiSrc/components/base/icons'
 import { SidePanels } from 'uiSrc/slices/interfaces/insights'
-import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
-import styles from './styles.module.scss'
+import { CopilotWrapper, CopilotIconButton } from './CopilotTrigger.styles'
 
 const CopilotTrigger = () => {
   const { openedPanel } = useSelector(sidePanelsSelector)
-
   const dispatch = useDispatch()
 
   const handleClickTrigger = () => {
     dispatch(toggleSidePanel(SidePanels.AiAssistant))
   }
 
+  const isCopilotOpen = openedPanel === SidePanels.AiAssistant
+
   return (
-    <div
-      className={cx(styles.container, {
-        [styles.isOpen]: openedPanel === SidePanels.AiAssistant,
-      })}
-    >
+    <CopilotWrapper align="center" justify="end">
       <RiTooltip content="Redis Copilot">
-        <EmptyButton
-          className={styles.btn}
+        <CopilotIconButton
+          size="S"
           role="button"
           icon={CopilotIcon}
           onClick={handleClickTrigger}
           data-testid="copilot-trigger"
+          isOpen={isCopilotOpen}
+          aria-label="Copilot-trigger"
         />
       </RiTooltip>
-    </div>
+    </CopilotWrapper>
   )
 }
 
 export default CopilotTrigger

redisinsight/ui/src/components/triggers/insights-trigger/insights-trigger.styles.ts → redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.styles.ts

@@ -1,16 +1,16 @@
-import styled, { css } from "styled-components"
+import styled from 'styled-components'
 
-import { IconButton } from "uiSrc/components/base/forms/buttons"
-import { IconButtonProps } from "uiSrc/components/base/forms/buttons/IconButton"
+import { IconButton } from 'uiSrc/components/base/forms/buttons'
+import { IconButtonProps } from 'uiSrc/components/base/forms/buttons/IconButton'
 
 export const BulbWrapper = styled.div`
   position: relative;
 `
 
 export const BulbHighlighting = styled.span`
-  // TODO: Using the background color from the previous value until there is an appropriate color 
+  // TODO: Using the background color from the previous value until there is an appropriate color
   // from the pallete to use for both light and dark themes.
-  background-color: #ffaf2b;
+  background-color: ${({ theme }) => theme.semantic.color.text.attention600};
   position: absolute;
   left: 5px;
   top: 5px;
@@ -31,10 +31,8 @@ export const BulbIconButton = styled(IconButton)<
     height: 21px;
   }
 
-  ${({ isOpen }) =>
-    isOpen &&
-    css`
-      background-color: ${({ theme }) =>
-        theme.semantic.color.background.primary200} !important;
-    `}
+  ${({ isOpen, theme }) =>
+    isOpen
+      ? `background-color: ${theme.semantic.color.background.primary200} !important;`
+      : ''}
 `

redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx

@@ -29,7 +29,7 @@ import {
   BulbHighlighting,
   BulbIconButton,
   BulbWrapper,
-} from './insights-trigger.styles'
+} from './InsightsTrigger.styles'
 
 export interface Props {
   source?: string