diff options
5 files changed, 22 insertions, 20 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx index d2ae19c111..8243e5b3be 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx @@ -47,7 +47,7 @@ export default function InfoButton({ title, message, children, ...props }: InfoB message={message} type={ModalAlertType.info} buttons={[ - <Button key="back" size="full" onClick={hide}> + <Button key="back" onClick={hide}> {messages.gettext('Got it!')} </Button>, ]} 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 63eb062f1b..c403ddb849 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 @@ -29,7 +29,7 @@ function ConnectButton(props: Partial<Parameters<typeof Button>[0]>) { }, [connectTunnel]); return ( - <Button variant="success" size="full" onClick={onConnect} {...props}> + <Button variant="success" onClick={onConnect} {...props}> {messages.pgettext('tunnel-control', 'Connect')} </Button> ); @@ -51,7 +51,7 @@ function DisconnectButton() { const displayAsCancel = tunnelState !== 'connected'; return ( - <Button variant="destructive" size="full" onClick={onDisconnect}> + <Button variant="destructive" onClick={onDisconnect}> {displayAsCancel ? messages.gettext('Cancel') : messages.gettext('Disconnect')} </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 07ad034e98..045fc65f58 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,5 +1,6 @@ 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'; @@ -111,6 +112,10 @@ function getRelayName( } } +const StyledReconnectButton = styled(Button)({ + minWidth: '40px', +}); + function ReconnectButton(props: ButtonProps) { const { reconnectTunnel } = useAppContext(); @@ -124,8 +129,12 @@ function ReconnectButton(props: ButtonProps) { }, [reconnectTunnel]); return ( - <Button onClick={onReconnect} size="tiny" aria-label={messages.gettext('Reconnect')} {...props}> + <StyledReconnectButton + onClick={onReconnect} + size="auto" + aria-label={messages.gettext('Reconnect')} + {...props}> <ImageView height={24} width={24} source="icon-reload" tintColor="white" /> - </Button> + </StyledReconnectButton> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx index 19a499a34d..9fe23132d7 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx @@ -76,7 +76,10 @@ export const ChangelogView = () => { </NavigationScrollbars> </NavigationContainer> </SettingsContainer> - <StyledFooter $alignItems="center" $justifyContent="center"> + <StyledFooter + $padding={{ horizontal: Spacings.spacing6 }} + $alignItems="center" + $justifyContent="center"> <Button onClick={openDownloadLink} trailing={ diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/Button.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/Button.tsx index 858ecee82b..ef783c12ec 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/Button.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/Button.tsx @@ -8,7 +8,7 @@ import { BodySmallSemiBold } from '../typography'; export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { variant?: 'primary' | 'success' | 'destructive'; - size?: 'tiny' | 'small' | 'regular' | 'full' | '1/2'; + size?: 'auto' | 'full' | '1/2'; leading?: React.ReactNode; trailing?: React.ReactNode; } @@ -32,9 +32,7 @@ const variants = { } as const; const sizes = { - tiny: '44px', - small: '60px', - regular: '272px', + auto: 'auto', full: '100%', '1/2': '50%', }; @@ -44,6 +42,7 @@ const StyledButton = styled.button({ minHeight: '32px', borderRadius: Radius.radius4, + minWidth: '60px', width: 'var(--size)', background: 'var(--background)', '&:not(:disabled):hover': { @@ -60,16 +59,7 @@ const StyledButton = styled.button({ export const Button = forwardRef<HTMLButtonElement, ButtonProps>( ( - { - variant = 'primary', - size = 'regular', - leading, - trailing, - children, - disabled, - style, - ...props - }, + { variant = 'primary', size = 'full', leading, trailing, children, disabled, style, ...props }, ref, ) => { const styles = variants[variant]; |