diff options
3 files changed, 30 insertions, 50 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx index 3129abcbb2..ef002c023d 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx @@ -1,42 +1,39 @@ import React from 'react'; import styled from 'styled-components'; -const SIDE_BUTTON_WIDTH = 44; +import { ButtonProps } from './common/molecules'; const ButtonRow = styled.div({ display: 'flex', - flexDirection: 'row', + gap: '1px', }); const MainButton = styled.button({ - display: 'flex', - flex: 1, borderTopRightRadius: 0, borderBottomRightRadius: 0, + paddingLeft: '44px', + '&:focus-visible': { + zIndex: 10, + }, }); const SideButton = styled.button({ - display: 'flex', borderTopLeftRadius: 0, borderBottomLeftRadius: 0, - width: SIDE_BUTTON_WIDTH, - marginLeft: '1px !important', + '&:focus-visible': { + zIndex: 10, + }, }); -export interface MultiButtonCompatibleProps { - className?: string; - textOffset?: number; -} - -interface IMultiButtonProps { - mainButton: React.ComponentType<MultiButtonCompatibleProps>; - sideButton: React.ComponentType<MultiButtonCompatibleProps>; +interface MultiButtonProps { + mainButton: React.ComponentType<ButtonProps>; + sideButton: React.ComponentType<ButtonProps>; } -export function MultiButton(props: IMultiButtonProps) { +export function MultiButton(props: MultiButtonProps) { return ( <ButtonRow> - <MainButton as={props.mainButton} textOffset={SIDE_BUTTON_WIDTH + 1} /> + <MainButton as={props.mainButton} /> <SideButton as={props.sideButton} /> </ButtonRow> ); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx index 437fa93321..b0466d0d07 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx @@ -1,15 +1,10 @@ import { useCallback } from 'react'; -import styled from 'styled-components'; import { messages } from '../../../shared/gettext'; import log from '../../../shared/logging'; import { useAppContext } from '../../context'; import { useSelector } from '../../redux/store'; -import { SmallButton, SmallButtonColor } from '../SmallButton'; - -const StyledConnectionButton = styled(SmallButton)({ - margin: 0, -}); +import { Button } from '../common/molecules/Button'; export default function ConnectionActionButton() { const tunnelState = useSelector((state) => state.connection.status.state); @@ -21,7 +16,7 @@ export default function ConnectionActionButton() { } } -function ConnectButton(props: Partial<Parameters<typeof SmallButton>[0]>) { +function ConnectButton(props: Partial<Parameters<typeof Button>[0]>) { const { connectTunnel } = useAppContext(); const onConnect = useCallback(async () => { @@ -34,9 +29,9 @@ function ConnectButton(props: Partial<Parameters<typeof SmallButton>[0]>) { }, [connectTunnel]); return ( - <StyledConnectionButton color={SmallButtonColor.green} onClick={onConnect} {...props}> + <Button variant="success" size="full" onClick={onConnect} {...props}> {messages.pgettext('tunnel-control', 'Connect')} - </StyledConnectionButton> + </Button> ); } @@ -56,8 +51,8 @@ function DisconnectButton() { const displayAsCancel = tunnelState !== 'connected'; return ( - <StyledConnectionButton color={SmallButtonColor.red} onClick={onDisconnect}> + <Button variant="destructive" size="full" onClick={onDisconnect}> {displayAsCancel ? messages.gettext('Cancel') : messages.gettext('Disconnect')} - </StyledConnectionButton> + </Button> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx index 50508a3192..7a6ab7d968 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx @@ -1,6 +1,5 @@ import { useCallback, useMemo } from 'react'; import { sprintf } from 'sprintf-js'; -import styled from 'styled-components'; import { ICustomList } from '../../../shared/daemon-rpc-types'; import { messages, relayLocations } from '../../../shared/gettext'; @@ -10,17 +9,9 @@ import { transitions, useHistory } from '../../lib/history'; import { RoutePath } from '../../lib/routes'; import { IRelayLocationCountryRedux, RelaySettingsRedux } from '../../redux/settings/reducers'; import { useSelector } from '../../redux/store'; +import { Button, ButtonProps } from '../common/molecules'; import ImageView from '../ImageView'; -import { MultiButton, MultiButtonCompatibleProps } from '../MultiButton'; -import { SmallButton, SmallButtonColor } from '../SmallButton'; - -const StyledSmallButton = styled(SmallButton)({ - margin: 0, -}); - -const StyledReconnectButton = styled(StyledSmallButton)({ - padding: '4px 8px 4px 8px', -}); +import { MultiButton } from '../MultiButton'; export default function SelectLocationButtons() { const tunnelState = useSelector((state) => state.connection.status.state); @@ -32,7 +23,7 @@ export default function SelectLocationButtons() { } } -function SelectLocationButton(props: MultiButtonCompatibleProps) { +function SelectLocationButton(props: ButtonProps) { const { push } = useHistory(); const tunnelState = useSelector((state) => state.connection.status.state); @@ -50,8 +41,9 @@ function SelectLocationButton(props: MultiButtonCompatibleProps) { }, [push]); return ( - <StyledSmallButton - color={SmallButtonColor.blue} + <Button + variant="primary" + size="full" onClick={onSelectLocation} aria-label={sprintf( messages.pgettext('accessibility', 'Select location. Current location is %(location)s'), @@ -61,7 +53,7 @@ function SelectLocationButton(props: MultiButtonCompatibleProps) { {tunnelState === 'disconnected' ? selectedRelayName : messages.pgettext('tunnel-control', 'Switch location')} - </StyledSmallButton> + </Button> ); } @@ -119,7 +111,7 @@ function getRelayName( } } -function ReconnectButton(props: MultiButtonCompatibleProps) { +function ReconnectButton(props: ButtonProps) { const { reconnectTunnel } = useAppContext(); const onReconnect = useCallback(async () => { @@ -132,12 +124,8 @@ function ReconnectButton(props: MultiButtonCompatibleProps) { }, [reconnectTunnel]); return ( - <StyledReconnectButton - color={SmallButtonColor.blue} - onClick={onReconnect} - aria-label={messages.gettext('Reconnect')} - {...props}> + <Button onClick={onReconnect} size="tiny" aria-label={messages.gettext('Reconnect')} {...props}> <ImageView height={24} width={24} source="icon-reload" tintColor="white" /> - </StyledReconnectButton> + </Button> ); } |