RI-7740: update instances navigation styles

Author: KrumTy

redisinsight/ui/src/components/instance-header/InstanceHeader.tsx

@@ -44,6 +44,7 @@ import { EditIcon } from 'uiSrc/components/base/icons'
 import { Text } from 'uiSrc/components/base/text'
 import { NumericInput } from 'uiSrc/components/base/inputs'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
+import { Link } from 'uiSrc/components/base/link/Link'
 import InstancesNavigationPopover from './components/instances-navigation-popover'
 import styles from './styles.module.scss'
 
@@ -159,19 +160,20 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => {
                       : 'Redis Databases'
                   }
                 >
-                  <Text
-                    className={styles.breadCrumbLink}
+                  <Link
+                    color="subdued"
+                    underline
+                    variant="inline"
                     aria-label={
                       server?.buildType === BuildType.RedisStack
                         ? 'Edit database'
                         : 'Redis Databases'
                     }
                     data-testid="my-redis-db-btn"
                     onClick={goHome}
-                    onKeyDown={goHome}
                   >
                     Databases
-                  </Text>
+                  </Link>
                 </RiTooltip>
               </FeatureFlagComponent>
             </div>

redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.styles.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+import { Row } from 'uiSrc/components/base/layout/flex'
+
+export const ButtonWrapper = styled(Row)`
+  cursor: pointer;
+`

redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx

@@ -13,10 +13,11 @@ import { localStorageService } from 'uiSrc/services'
 import { filterAndSort } from 'uiSrc/utils'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { Text } from 'uiSrc/components/base/text'
-import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import Tabs, { TabInfo } from 'uiSrc/components/base/layout/tabs'
 import { RiPopover } from 'uiSrc/components/base'
 import InstancesList from './components/instances-list'
+import { ChevronDownIcon } from 'uiSrc/components/base/icons'
+import { ButtonWrapper } from './InstancesNavigationPopover.styles'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -117,16 +118,15 @@ const InstancesNavigationPopover = ({ name }: Props) => {
       isOpen={isPopoverOpen}
       closePopover={() => showPopover()}
       button={
-        <Text
-          className={styles.showPopoverBtn}
+        <ButtonWrapper
+          align="center"
+          gap="s"
           onClick={() => showPopover()}
           data-testid="nav-instance-popover-btn"
         >
-          <b className={styles.breadCrumbLink}>{name}</b>
-          <span>
-            <RiIcon color="primary500" type="CaretDownIcon" />
-          </span>
-        </Text>
+          <Text color="primary">{name}</Text>
+          <ChevronDownIcon size="S" />
+        </ButtonWrapper>
       }
     >
       <div className={styles.wrapper}>

redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/styles.module.scss

@@ -1,11 +1,3 @@
-.showPopoverBtn {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-}
-
 .breadCrumbLink {
   cursor: pointer;
   text-decoration: underline;

redisinsight/ui/src/components/rdi-instance-header/RdiInstanceHeader.tsx

@@ -15,6 +15,7 @@ import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 import { isAnyFeatureEnabled } from 'uiSrc/utils/features'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Text } from 'uiSrc/components/base/text'
+import { Link } from 'uiSrc/components/base/link/Link'
 import InstancesNavigationPopover from '../instance-header/components/instances-navigation-popover'
 import styles from './styles.module.scss'
 
@@ -43,22 +44,23 @@ const RdiInstanceHeader = () => {
         >
           <div>
             <RiTooltip position="bottom" content="My RDI instances">
-              <Text
-                className={styles.breadCrumbLink}
+              <Link
+                color="subdued"
+                underline
+                variant="inline"
                 aria-label="My RDI instances"
                 data-testid="my-rdi-instances-btn"
                 onClick={goHome}
-                onKeyDown={goHome}
               >
-                RDI instances
-              </Text>
+                Data integration
+              </Link>
             </RiTooltip>
           </div>
           <div style={{ flex: 1, overflow: 'hidden' }}>
             <div style={{ maxWidth: '100%' }}>
               <Row align="center">
                 <FlexItem>
-                  <Text className={styles.divider}>&#62;</Text>
+                  <Text className={styles.divider}>/</Text>
                 </FlexItem>
                 <FlexItem grow style={{ overflow: 'hidden' }}>
                   <InstancesNavigationPopover name={name} />

redisinsight/ui/src/components/rdi-instance-header/styles.module.scss

@@ -10,19 +10,6 @@
   & > div {
     display: flex;
   }
-
-  .breadCrumbLink {
-    color: var(--euiColorPrimary) !important;
-    font-size: 14px !important;
-    line-height: 20px;
-    font-weight: 400;
-    cursor: pointer;
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
 }
 
 .rdiName {