RI:7728: Support semantic colors in Indicator (#5180)

Author: pawelangelow

redisinsight/ui/src/components/base/text/text.styles.ts

@@ -92,27 +92,20 @@ const getAlignValue = (align?: MapProps['$align']) => {
 export const StyledColorText = styled(Typography.Body)<MapProps>`
   ${useColorTextStyles}
 `
+
 export const StyledText = styled(Typography.Body)<MapProps>`
   ${useColorTextStyles};
   ${({ $align }) => getAlignValue($align)};
 `
-export const Indicator = styled.div<
-  {
-    $color: ColorType
-  } & CommonProps
->`
-  width: 0.8rem;
-  height: 0.8rem;
-  border-radius: 50%;
-  background-color: ${({ $color }) => $color || 'inherit'};
-`
 
 const useStatusColorStyles = ({ $color }: MapProps = {}) => {
   const theme = useTheme()
   const colors = theme.semantic.color
 
   const getColorValue = (color?: ColorType) => {
     switch (color) {
+      case 'informative':
+        return colors.text.informative400
       case 'danger':
         return colors.text.danger500
       case 'warning':
@@ -129,16 +122,17 @@ const useStatusColorStyles = ({ $color }: MapProps = {}) => {
   `
 }
 
-export const StatusIndicator = styled.div<
+export const Indicator = styled.div<
   {
     $color: ColorType
   } & CommonProps
 >`
-  ${useStatusColorStyles};
-  width: 1rem;
-  height: 1rem;
+  width: 0.8rem;
+  height: 0.8rem;
   border-radius: 50%;
+  ${useStatusColorStyles};
 `
+
 export const mapSize = (size: TextSizeType): BodyProps['size'] => {
   if (size === 'm') {
     return 'M'

redisinsight/ui/src/pages/rdi/statistics/target-connections/TargetConnections.tsx

@@ -12,7 +12,7 @@ import {
   StyledRdiAnalyticsTable,
   StyledRdiStatisticsSectionBody,
 } from 'uiSrc/pages/rdi/statistics/styles'
-import { StatusIndicator } from 'uiSrc/components/base/text/text.styles'
+import { Indicator } from 'uiSrc/components/base/text/text.styles'
 import { Row } from 'uiSrc/components/base/layout/flex'
 
 type ConnectionData = {
@@ -49,7 +49,7 @@ const columns: ColumnDefinition<ConnectionData>[] = [
     }) => (
       <Row align="center" justify="center">
         <RiTooltip content={status}>
-          <StatusIndicator $color={getStatusColor(status)} />
+          <Indicator $color={getStatusColor(status)} />
         </RiTooltip>
       </Row>
     ),