RI-7687: adjust RDI pipeline statuses (#5157)

Author: ArtemHoruzhenko

redisinsight/ui/src/pages/rdi/instance/components/header/components/current-pipeline-status/CurrentPipelineStatus.tsx

@@ -1,13 +1,19 @@
 import React from 'react'
 import { PipelineState } from 'uiSrc/slices/interfaces'
 import { formatLongName, Maybe } from 'uiSrc/utils'
-import { AllIconsType, RiIcon } from 'uiSrc/components/base/icons/RiIcon'
-import { IconProps } from 'uiSrc/components/base/icons'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { Loader } from 'uiSrc/components/base/display'
 import { RiTooltip } from 'uiSrc/components'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Text } from 'uiSrc/components/base/text'
+import {
+  IndicatorSyncingIcon,
+  IndicatorSyncedIcon,
+  IndicatorSyncstoppedIcon,
+  IndicatorSyncerrorIcon,
+} from '@redis-ui/icons'
+import { IconType } from 'uiSrc/components/base/forms/buttons'
 
 export interface Props {
   pipelineState?: PipelineState
@@ -24,31 +30,31 @@ const CurrentPipelineStatus = ({
     pipelineState: Maybe<PipelineState>,
   ): {
     label: string
-    icon: AllIconsType
+    icon: IconType
     iconColor: IconProps['color']
   } => {
     switch (pipelineState) {
       case PipelineState.InitialSync:
         return {
-          icon: 'IndicatorSyncingIcon',
+          icon: IndicatorSyncingIcon,
           iconColor: 'success300',
           label: 'Initial sync',
         }
       case PipelineState.CDC:
         return {
-          icon: 'IndicatorSyncedIcon',
-          iconColor: 'success300',
+          icon: IndicatorSyncedIcon,
+          iconColor: 'success500',
           label: 'Streaming',
         }
       case PipelineState.NotRunning:
         return {
-          icon: 'IndicatorXIcon',
+          icon: IndicatorSyncstoppedIcon,
           iconColor: 'attention500',
           label: 'Not running',
         }
       default:
         return {
-          icon: 'IndicatorErrorIcon',
+          icon: IndicatorSyncerrorIcon,
           iconColor: 'danger500',
           label: 'Error',
         }
@@ -60,7 +66,9 @@ const CurrentPipelineStatus = ({
   return (
     <Row align="center" gap="m">
       <FlexItem>
-        <Title size="XS">Pipeline state:</Title>
+        <Title size="XS" color="primary">
+          Pipeline state
+        </Title>
       </FlexItem>
       <FlexItem>
         {headerLoading ? (
@@ -70,13 +78,9 @@ const CurrentPipelineStatus = ({
             content={errorTooltipContent}
             anchorClassName={statusError}
           >
-            <Row data-testid="pipeline-state-badge" gap="s">
-              <RiIcon
-                type={stateInfo.icon}
-                color={stateInfo.iconColor}
-                size="m"
-              />
-              <Text size="s">{stateInfo.label}</Text>
+            <Row data-testid="pipeline-state-badge" gap="s" align="center">
+              <Icon icon={stateInfo.icon} color={stateInfo.iconColor} />
+              <Text>{stateInfo.label}</Text>
             </Row>
           </RiTooltip>
         )}