Fix icon buttons in select location entry view

2 files changed, 35 insertions, 28 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx
index aa87af11b6..7e271e4306 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx
@@ -4,22 +4,25 @@ import { colors } from '../../../config.json';
 import { measurements } from '../common-styles';
 import { buttonColor, ButtonColors } from './styles';
 
-export const SideButton = styled.button<ButtonColors>(buttonColor, {
-  position: 'relative',
-  alignSelf: 'stretch',
-  paddingLeft: measurements.horizontalViewMargin,
-  paddingRight: measurements.horizontalViewMargin,
-  border: 0,
+export const SideButton = styled.button<ButtonColors & { $noSeparator?: boolean }>(
+  buttonColor,
+  (props) => ({
+    position: 'relative',
+    alignSelf: 'stretch',
+    paddingLeft: measurements.horizontalViewMargin,
+    paddingRight: measurements.horizontalViewMargin,
+    border: 0,
 
-  '&&::before': {
-    content: '""',
-    position: 'absolute',
-    margin: 'auto',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    height: '50%',
-    width: '1px',
-    backgroundColor: colors.darkBlue,
-  },
-});
+    '&&::before': {
+      content: props.$noSeparator ? 'none' : '""',
+      position: 'absolute',
+      margin: 'auto',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      height: '50%',
+      width: '1px',
+      backgroundColor: colors.darkBlue,
+    },
+  }),
+);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SpecialLocationList.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SpecialLocationList.tsx
index 552f86d9fc..b64da30573 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SpecialLocationList.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SpecialLocationList.tsx
@@ -12,7 +12,6 @@ import InfoButton from '../InfoButton';
 import { SpecialLocationIndicator } from '../RelayStatusIndicator';
 import {
   getButtonColor,
-  StyledHoverInfoButton,
   StyledLocationRowButton,
   StyledLocationRowContainerWithMargin,
   StyledLocationRowLabel,
@@ -35,9 +34,15 @@ export default function SpecialLocationList<T>({ source, ...props }: SpecialLoca
   );
 }
 
-const StyledSpecialLocationInfoButton = styled(InfoButton).attrs({
-  size: 'small',
-})({ width: '56px', height: '48px' });
+const StyledSpecialLocationInfoButton = styled(InfoButton)({
+  width: '56px',
+  height: '48px',
+  borderRadius: 0,
+  '&:focus-visible': {
+    zIndex: 10,
+  },
+});
+
 const StyledSpecialLocationSideButton = styled(ImageView)({ padding: '0 3px' });
 
 interface SpecialLocationRowProps<T> {
@@ -103,8 +108,6 @@ export function CustomExitLocationRow(props: SpecialLocationRowInnerProps<undefi
   );
 }
 
-const StyledInfoButton = styled(StyledHoverInfoButton)({ display: 'block' });
-
 export function CustomBridgeLocationRow(
   props: SpecialLocationRowInnerProps<SpecialBridgeLocationType>,
 ) {
@@ -130,14 +133,15 @@ export function CustomBridgeLocationRow(
         <SpecialLocationIndicator />
         <StyledLocationRowLabel>{props.source.label}</StyledLocationRowLabel>
       </StyledLocationRowButton>
-      <StyledInfoButton
-        {...background}
-        $isLast
+      <Cell.SideButton
+        as={StyledSpecialLocationInfoButton}
         title={messages.pgettext('select-location-view', 'Custom bridge')}
         message={messages.pgettext(
           'select-location-view',
           'A custom bridge server can be used to circumvent censorship when regular Mullvad bridge servers don’t work.',
         )}
+        $noSeparator
+        {...background}
       />
       <Cell.SideButton
         {...background}
@@ -149,7 +153,7 @@ export function CustomBridgeLocationRow(
         onClick={navigate}>
         <StyledSpecialLocationSideButton
           source={icon}
-          width={18}
+          width={20}
           tintColor={colors.white}
           tintHoverColor={colors.white80}
         />