From 2b633bba898483a53d0468c3e59d56bfc7c6fb71 Mon Sep 17 00:00:00 2001
From: Ross Bulat <ross@parity.io>
Date: Wed, 6 Mar 2024 10:14:56 +0700
Subject: [PATCH] update connect icon

---
 src/library/Tabs/ConectionIcon.tsx | 16 +++++++++++++
 src/library/Tabs/Tab.tsx           | 14 +++---------
 src/library/Tabs/TabOverlay.tsx    | 36 +++++++++++++++++-------------
 src/library/Tabs/Wrappers.ts       |  9 +++++++-
 src/svg/Connect.svg                |  2 +-
 5 files changed, 48 insertions(+), 29 deletions(-)
 create mode 100644 src/library/Tabs/ConectionIcon.tsx

diff --git a/src/library/Tabs/ConectionIcon.tsx b/src/library/Tabs/ConectionIcon.tsx
new file mode 100644
index 00000000..66ff6f58
--- /dev/null
+++ b/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>
+);
diff --git a/src/library/Tabs/Tab.tsx b/src/library/Tabs/Tab.tsx
index 46eb45d3..d3e15143 100644
--- a/src/library/Tabs/Tab.tsx
+++ b/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 && (
diff --git a/src/library/Tabs/TabOverlay.tsx b/src/library/Tabs/TabOverlay.tsx
index 131f45b4..1dce0373 100644
--- a/src/library/Tabs/TabOverlay.tsx
+++ b/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>
+  );
+};
diff --git a/src/library/Tabs/Wrappers.ts b/src/library/Tabs/Wrappers.ts
index 8eb6b653..62160a13 100644
--- a/src/library/Tabs/Wrappers.ts
+++ b/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 */
diff --git a/src/svg/Connect.svg b/src/svg/Connect.svg
index ac36c3d2..16ac9944 100644
--- a/src/svg/Connect.svg
+++ b/src/svg/Connect.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><path d="M733.9 66.1C645.8-22 503.2-22 415.2 66.1L314.3 167l53.1 53.1 100.9-100.9c56-56 150.6-62 212.5 0 62 62 56 156.4 0 212.5L579.9 432.6l53.2 53.2L734 384.9c88-88.1 88-230.7-.1-318.8zM331.8 680.8c-56 56-150.6 62-212.5 0-62-62-56-156.4 0-212.5l100.9-100.9-53.2-53.2L66.1 415.1c-88.1 88.1-88.1 230.7 0 318.7s230.7 88.1 318.7 0l100.9-100.9-53.1-53.1-100.8 101z"/><path d="M561.5 292.7c3.2-3.3 3.2-8.5.1-11.8l-41-41.4a8.55 8.55 0 00-11.8-.1L238.5 507.3c-3.2 3.2-3.2 8.5-.1 11.8l41 41.4c3.2 3.2 8.5 3.2 11.8.1l270.3-267.9z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.438 20.438"><path d="M19 0l-2.656 2.656-.438-.469c-.972-.972-2.25-1.469-3.531-1.469s-2.559.497-3.531 1.469l-.719.688-.906.906L6.438 3 5 4.438l11 11L17.438 14l-.781-.781 1.594-1.625a5.005 5.005 0 000-7.062l-.469-.438 2.656-2.656L19 0zm-6.625 2.719c.768 0 1.535.285 2.125.875l2.344 2.344a2.994 2.994 0 010 4.25l-1.625 1.594L8.657 5.22l1.594-1.625a2.984 2.984 0 012.125-.875zM4.438 5L3 6.438l.781.781-.906.906-.688.719a5.005 5.005 0 000 7.062l.438.469L0 19l1.438 1.438 2.625-2.625.469.438a5.005 5.005 0 007.062 0l1.625-1.594.781.781L15.438 16l-11-11zm.781 3.656l6.562 6.562-1.594 1.625a2.994 2.994 0 01-4.25 0l-2.344-2.344a2.994 2.994 0 010-4.25l1.625-1.594z"/></svg>
\ No newline at end of file