Make all Button sizes responsive

mullvad · Jan 17, 2025 · f568e79 · f568e79
1 parent 6256fe6
commit f568e79
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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];