update connect icon

src/library/Tabs/ConectionIcon.tsx

@@ -0,0 +1,16 @@
+// Copyright 2024 @rossbulat/console authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import type { ApiStatus } from 'model/Api/types';
+import DisconnectSVG from 'svg/Disconnect.svg?react';
+import ConnectSVG from 'svg/Connect.svg?react';
+
+export const ConnectionIcon = ({ status }: { status: ApiStatus }) => (
+  <div className={`connection ${status}`}>
+    {['ready', 'connected', 'connecting'].includes(status) ? (
+      <ConnectSVG />
+    ) : (
+      <DisconnectSVG />
+    )}
+  </div>
+);

src/library/Tabs/Tab.tsx

@@ -1,6 +1,5 @@
 // Copyright 2024 @rossbulat/console authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
-/* eslint-disable react/display-name */
 
 import { useRef, useState } from 'react';
 import { TabWrapper } from './Wrappers';
@@ -17,9 +16,8 @@ import {
   DEFAULT_TAB_WIDTH_PX,
   TAB_TRANSITION_DURATION_MS,
 } from 'contexts/Tabs/defaults';
-import DisconnectSVG from 'svg/Disconnect.svg?react';
-import ConnectSVG from 'svg/Connect.svg?react';
 import { useApi } from 'contexts/Api';
+import { ConnectionIcon } from './ConectionIcon';
 
 export const Tab = ({ index, id, name, initial = false }: TabProps) => {
   const {
@@ -137,14 +135,8 @@ export const Tab = ({ index, id, name, initial = false }: TabProps) => {
         {...attributes}
         {...listeners}
       />
-      <div className={`connection`}>
-        {['ready', 'connected', 'connecting'].includes(apiStatus) ? (
-          <ConnectSVG />
-        ) : (
-          <DisconnectSVG />
-        )}
-      </div>
-      <div className="name">{name}</div>
+      <ConnectionIcon status={apiStatus} />
+      <div className={`name ${apiStatus}`}>{name}</div>
       <div className="fade" />
 
       {tabs.length > 1 && (

src/library/Tabs/TabOverlay.tsx

@@ -7,21 +7,25 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faClose } from '@fortawesome/free-solid-svg-icons';
 import type { TabProps } from './types';
 import { DEFAULT_TAB_WIDTH_PX } from 'contexts/Tabs/defaults';
-import DisconnectSVG from 'svg/Disconnect.svg?react';
+import { useApi } from 'contexts/Api';
+import { ConnectionIcon } from './ConectionIcon';
 
-export const TabOverlay = ({ name }: TabProps) => (
-  <TabWrapper
-    className={`active hide-border`}
-    style={{ width: DEFAULT_TAB_WIDTH_PX }}
-  >
-    <div className="fade" />
-    <div className="connection">
-      <DisconnectSVG />
-    </div>
-    <div className="name">{name}</div>
+export const TabOverlay = ({ id, name }: TabProps) => {
+  const { getApiStatus } = useApi();
+  const apiStatus = getApiStatus(id);
 
-    <button className="close">
-      <FontAwesomeIcon icon={faClose} transform="shrink-1" />
-    </button>
-  </TabWrapper>
-);
+  return (
+    <TabWrapper
+      className={`active hide-border`}
+      style={{ width: DEFAULT_TAB_WIDTH_PX }}
+    >
+      <div className="fade" />
+      <ConnectionIcon status={apiStatus} />
+      <div className="name">{name}</div>
+
+      <button className="close">
+        <FontAwesomeIcon icon={faClose} transform="shrink-1" />
+      </button>
+    </TabWrapper>
+  );
+};

src/library/Tabs/Wrappers.ts

@@ -102,6 +102,13 @@ export const TabWrapper = styled(motion.div)`
     display: flex;
     align-items: center;
 
+    &.connected,
+    &.ready {
+      > svg {
+        fill: var(--accent-color-secondary);
+      }
+    }
+
     > svg {
       width: var(--connection-icon-size);
       height: var(--connection-icon-size);
@@ -120,7 +127,7 @@ export const TabWrapper = styled(motion.div)`
     top: 0;
     left: 0;
     width: 100%;
-    padding: 0 0.75rem 0 1.5rem;
+    padding: 0 0.75rem 0 1.6rem;
     display: flex;
     align-items: center;
     /* Handle text overflow */