diff options
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx | 39 | ||||
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/components/select-location/SpecialLocationList.tsx | 24 |
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} /> |