refactor(ui): refactor ClusterDetailsHeader to use styled-components

- Introduced a new styled-components file for ClusterDetailsHeader, replacing the previous SCSS styles.
- Updated the ClusterDetailsHeader component to utilize the new styled components for improved styling and maintainability.
- Removed the old styles module to streamline the codebase.

References: #RI-7785

Author: valkirilov

redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/ClusterDetailsHeader.styles.ts

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components'
+import { Row, Col } from 'uiSrc/components/base/layout/flex'
+
+export const Container = styled(Col)`
+  background-color: ${({ theme }) =>
+    theme.semantic.color.background.neutral100};
+`
+
+export const Content = styled(Row)`
+  padding-top: ${({ theme }) => theme.core.space.space150};
+  padding-bottom: ${({ theme }) => theme.core.space.space250};
+`
+
+export const Item = styled(Col)<{ $borderLeft?: boolean }>`
+  padding-right: ${({ theme }) => theme.core.space.space150};
+
+  ${({ $borderLeft, theme }) =>
+    $borderLeft &&
+    css`
+      border-left: 2px solid ${theme.semantic.color.border.neutral500};
+      padding-left: ${theme.core.space.space150};
+    `}
+`
+
+export const Loading = styled.div`
+  width: 422px;
+  padding-top: ${({ theme }) => theme.core.space.space200};
+`

redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/ClusterDetailsHeader.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
-import cx from 'classnames'
-import { capitalize } from 'lodash'
 
 import { LoadingContent } from 'uiSrc/components/base/layout'
 import {
@@ -20,7 +18,12 @@ import { Text } from 'uiSrc/components/base/text'
 import { RiTooltip } from 'uiSrc/components'
 import { AnalyticsPageHeader } from 'uiSrc/pages/database-analysis/components/analytics-page-header'
 
-import styles from './styles.module.scss'
+import {
+  Container,
+  Content,
+  Item,
+  Loading,
+} from './ClusterDetailsHeader.styles'
 
 interface IMetrics {
   label: string
@@ -55,7 +58,6 @@ const ClusterDetailsHeader = () => {
           username || DEFAULT_USERNAME
         ) : (
           <RiTooltip
-            className={styles.tooltip}
             anchorClassName="truncateText"
             position="bottom"
             content={<>{formatLongName(username || DEFAULT_USERNAME)}</>}
@@ -71,7 +73,6 @@ const ClusterDetailsHeader = () => {
       border: 'left',
       value: (
         <RiTooltip
-          className={styles.tooltip}
           position="top"
           content={
             <>
@@ -90,33 +91,28 @@ const ClusterDetailsHeader = () => {
   ]
 
   return (
-    <div className={styles.container} data-testid="cluster-details-header">
+    <Container data-testid="cluster-details-header">
       <AnalyticsPageHeader />
       {loading && !data && (
-        <div className={styles.loading} data-testid="cluster-details-loading">
+        <Loading as="div" data-testid="cluster-details-loading">
           <LoadingContent lines={2} />
-        </div>
+        </Loading>
       )}
       {data && (
-        <div
-          className={cx(styles.content)}
-          data-testid="cluster-details-content"
-        >
+        <Content data-testid="cluster-details-content">
           {metrics.map(({ value, label, border }) => (
-            <div
-              className={cx(styles.item, styles[`border${capitalize(border)}`])}
+            <Item
               key={label}
+              $borderLeft={border === 'left'}
               data-testid={`cluster-details-item-${label}`}
             >
-              <Text color="subdued" className={styles.value}>
-                {value}
-              </Text>
-              <Text className={styles.label}>{label}</Text>
-            </div>
+              <Text color="subdued">{value}</Text>
+              <Text>{label}</Text>
+            </Item>
           ))}
-        </div>
+        </Content>
       )}
-    </div>
+    </Container>
   )
 }
 

redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/styles.module.scss

@@ -1,14 +1,12 @@
 import styled from 'styled-components'
 import { Row } from 'uiSrc/components/base/layout/flex'
-import { Theme } from 'uiSrc/components/base/theme/types'
-
-const getBorderColor = (theme: Theme) =>
-  theme.name === 'dark' ? theme.color.dark600 : theme.color.dusk150
 
 export const HeaderContainer = styled.div`
   width: 100%;
-  border-bottom: 4px solid
-    ${({ theme }: { theme: Theme }) => getBorderColor(theme)}; /* Mimic the tabs border width and color */
+  border-bottom: ${({ theme }) => {
+    const { tabsLine } = theme.components.tabs.variants.default
+    return `${tabsLine.size} solid ${tabsLine.color}`
+  }};
 `
 
 export const HeaderContent = styled(Row).attrs({