RI-4764: Fix insights bulb highlight style (#5018)

Author: dantovska

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

@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react'
-import cx from 'classnames'
-
 import { useDispatch, useSelector } from 'react-redux'
 import { useLocation, useParams } from 'react-router-dom'
+
 import {
   changeSelectedTab,
   changeSidePanel,
@@ -23,10 +22,14 @@ import {
 } from 'uiSrc/telemetry'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 
-import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { LightBulbIcon } from 'uiSrc/components/base/icons'
 import { RiTooltip } from 'uiSrc/components'
-import styles from './styles.module.scss'
+
+import {
+  BulbHighlighting,
+  BulbIconButton,
+  BulbWrapper,
+} from './insights-trigger.styles'
 
 export interface Props {
   source?: string
@@ -79,29 +82,26 @@ const InsightsTrigger = (props: Props) => {
   }
 
   return (
-    <div className={cx(styles.container, { [styles.isOpen]: isInsightsOpen })}>
-      <RiTooltip
-        title={isHighlighted && instanceId ? undefined : 'Insights'}
-        content={
-          isHighlighted && instanceId
-            ? 'New tips are available'
-            : 'Open interactive tutorials to learn more about Redis or Redis Stack capabilities, or use tips to improve your database.'
-        }
-      >
-        <IconButton
+    <RiTooltip
+      title={isHighlighted && instanceId ? undefined : 'Insights'}
+      content={
+        isHighlighted && instanceId
+          ? 'New tips are available'
+          : 'Open interactive tutorials to learn more about Redis or Redis Stack capabilities, or use tips to improve your database.'
+      }
+    >
+      <BulbWrapper>
+        <BulbIconButton
           size="S"
-          className={styles.btn}
           role="button"
           icon={LightBulbIcon}
           onClick={handleClickTrigger}
           data-testid="insights-trigger"
-        >
-          {isHighlighted && instanceId && (
-            <span className={styles.highlighting} />
-          )}
-        </IconButton>
-      </RiTooltip>
-    </div>
+          isOpen={isInsightsOpen}
+        />
+        {isHighlighted && instanceId && <BulbHighlighting />}
+      </BulbWrapper>
+    </RiTooltip>
   )
 }
 

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

@@ -0,0 +1,40 @@
+import styled, { css } from "styled-components"
+
+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 
+  // from the pallete to use for both light and dark themes.
+  background-color: #ffaf2b;
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 1px solid ${({ theme }) => theme.color.gray100};
+`
+
+export const BulbIconButton = 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;
+  }
+
+  ${({ isOpen }) =>
+    isOpen &&
+    css`
+      background-color: ${({ theme }) =>
+        theme.semantic.color.background.primary200} !important;
+    `}
+`