From ed0af7e1b767c6b03127c0e810cf0256f9553748 Mon Sep 17 00:00:00 2001
From: Pavel Angelov <pavel.angelov@redis.com>
Date: Wed, 12 Nov 2025 13:35:50 +0200
Subject: [PATCH] support semantic colors in indicator

---
 .../src/components/base/text/text.styles.ts   | 22 +++++++------------
 .../target-connections/TargetConnections.tsx  |  4 ++--
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/redisinsight/ui/src/components/base/text/text.styles.ts b/redisinsight/ui/src/components/base/text/text.styles.ts
index a76db36366..0d6f4c9e1e 100644
--- a/redisinsight/ui/src/components/base/text/text.styles.ts
+++ b/redisinsight/ui/src/components/base/text/text.styles.ts
@@ -92,20 +92,11 @@ 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()
@@ -113,6 +104,8 @@ const useStatusColorStyles = ({ $color }: MapProps = {}) => {
 
   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'
diff --git a/redisinsight/ui/src/pages/rdi/statistics/target-connections/TargetConnections.tsx b/redisinsight/ui/src/pages/rdi/statistics/target-connections/TargetConnections.tsx
index eb8db2e4b5..81cea5b46b 100644
--- a/redisinsight/ui/src/pages/rdi/statistics/target-connections/TargetConnections.tsx
+++ b/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>
     ),