fix: signal indicator border issue

PolkaGate · Nov 16, 2024 · 1499c25 · 1499c25
1 parent 537d208
commit 1499c25
Showing 1 changed file with 4 additions and 7 deletions.
diff --git 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' }}