From 1499c256af5033e3c04dd26c711f0be3ecefa3e1 Mon Sep 17 00:00:00 2001
From: Nick <ekbatanifard@gmail.com>
Date: Sat, 16 Nov 2024 15:00:56 +0330
Subject: [PATCH] fix: signal indicator border issue

---
 .../src/partials/RemoteNodeSelectorWithSignals.tsx    | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/extension-polkagate/src/partials/RemoteNodeSelectorWithSignals.tsx b/packages/extension-polkagate/src/partials/RemoteNodeSelectorWithSignals.tsx
index dc9d206d4..19a4ee27a 100644
--- a/packages/extension-polkagate/src/partials/RemoteNodeSelectorWithSignals.tsx
+++ b/packages/extension-polkagate/src/partials/RemoteNodeSelectorWithSignals.tsx
@@ -39,7 +39,6 @@ interface ListIndicatorProps {
   endpointUrl: string | undefined;
   iconSize: number;
   isDark: boolean;
-  id: 'simple-popover' | undefined;
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   setCurrentDelay: React.Dispatch<React.SetStateAction<number | undefined>>;
 }
@@ -233,9 +232,11 @@ const NodesList = ({ address, defaultColor, endpointsDelay, setCurrentDelay, set
   );
 };
 
-const ListIndicator = ({ currentDelay, defaultColor, endpointUrl, iconSize, id, isDark, onClick, setCurrentDelay }: ListIndicatorProps) => {
+const ListIndicator = ({ currentDelay, defaultColor, endpointUrl, iconSize, onClick, setCurrentDelay }: ListIndicatorProps) => {
   const isLightClient = endpointUrl?.startsWith('light');
   const onExtension = useIsExtensionPopup();
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
 
   useEffect(() => {
     // to reset signal bar on chain change
@@ -251,7 +252,7 @@ const ListIndicator = ({ currentDelay, defaultColor, endpointUrl, iconSize, id,
   }, [onExtension]);
 
   return (
-    <Grid aria-describedby={id} component='button' container item onClick={onClick} sx={{ bgcolor: bgcolorOnAccountDetail, border: isDark ? 2 : 1, borderColor: 'divider', borderRadius: '5px', cursor: 'pointer', height: `${iconSize + 7}px`, position: 'relative', width: `${iconSize + 7}px`, zIndex: 10 }}>
+    <Grid container item onClick={onClick} sx={{ bgcolor: bgcolorOnAccountDetail, border: isDark && !onExtension ? 2 : 1, borderColor: onExtension ? theme.palette.secondary.light : 'divider', borderRadius: '5px', cursor: 'pointer', height: `${iconSize + 7}px`, position: 'relative', width: `${iconSize + 7}px`, zIndex: 10 }}>
       {isLightClient
         ? <LightClientEndpointIcon sx={{ bottom: '2px', color: SIGNAL_COLORS.orange, fontSize: `${iconSize}px`, left: '2px', position: 'absolute' }} />
         : <NodeStatusIcon
@@ -331,7 +332,6 @@ function RemoteNodeSelectorWithSignals ({ address, iconSize = 35 }: Props): Reac
   }, []);
 
   const open = Boolean(anchorEl);
-  const id = open ? 'simple-popover' : undefined;
 
   return (
     <>
@@ -340,8 +340,6 @@ function RemoteNodeSelectorWithSignals ({ address, iconSize = 35 }: Props): Reac
         defaultColor={DEFAULT_GREY}
         endpointUrl={endpoint}
         iconSize={iconSize}
-        id={id}
-        isDark
         onClick={onClick}
         setCurrentDelay={setCurrentDelay}
       />
@@ -354,7 +352,6 @@ function RemoteNodeSelectorWithSignals ({ address, iconSize = 35 }: Props): Reac
           horizontal: 'right',
           vertical: 'bottom'
         }}
-        id={id}
         onClose={handleClose}
         open={open}
         sx={{ mt: '5px' }}