Merge branch 'daita-info-button-spacing'

mullvad · Jan 17, 2025 · 5b3b433 · 5b3b433
2 parents 105d602 + d1c121e
commit 5b3b433
Show file tree

Hide file tree

Showing 13 changed files with 86 additions and 71 deletions.
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
@@ -31,14 +31,12 @@ import { NavigationContainer } from './NavigationContainer';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
 import { SmallButton, SmallButtonColor } from './SmallButton';
 
-const StyledContextMenuButton = styled(Cell.Icon)({
-  alignItems: 'center',
-  justifyContent: 'center',
-  marginRight: Spacings.spacing3,
+const StyledMethodInfoButton = styled(InfoButton)({
+  marginRight: Spacings.spacing1,
 });
 
-const StyledMethodInfoButton = styled(InfoButton).attrs({ size: 'small' })({
-  marginRight: Spacings.spacing4,
+const StyledMethodTriggerImage = styled(ImageView)({
+  marginRight: Spacings.spacing1,
 });
 
 const StyledNameLabel = styled(Cell.Label)({
@@ -300,10 +298,12 @@ function ApiAccessMethod(props: ApiAccessMethodProps) {
       )}
       <ContextMenuContainer>
         <ContextMenuTrigger>
-          <StyledContextMenuButton
+          <StyledMethodTriggerImage
             source="icon-more"
             tintColor={colors.white}
             tintHoverColor={colors.white80}
+            height={36}
+            width={36}
           />
         </ContextMenuTrigger>
         <ContextMenu items={menuItems} align="right" />

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
@@ -32,6 +32,10 @@ export const StyledIllustration = styled.img({
   padding: '8px 0 8px',
 });
 
+const StyledInfoButton = styled(InfoButton)({
+  marginRight: Spacings.spacing5,
+});
+
 export default function DaitaSettings() {
   const { pop } = useHistory();
 
@@ -177,9 +181,9 @@ function DaitaToggle() {
           <AriaLabel>
             <Cell.InputLabel>{directOnlyString}</Cell.InputLabel>
           </AriaLabel>
-          <InfoButton>
+          <StyledInfoButton>
             <DirectOnlyModalMessage />
-          </InfoButton>
+          </StyledInfoButton>
           <AriaInput>
             <Cell.Switch isOn={directOnly && !unavailable} onChange={setDirectOnly} />
           </AriaInput>

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
@@ -30,9 +30,7 @@ import { NavigationContainer } from './NavigationContainer';
 import { NavigationScrollbars } from './NavigationScrollbars';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
-const StyledInfoButton = styled(InfoButton).attrs({
-  size: 'small',
-})({
+const StyledInfoButton = styled(InfoButton)({
   marginRight: Spacings.spacing5,
 });
 

diff --git a/...rc/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx b/...rc/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx
@@ -23,7 +23,7 @@ export const AppNavigationHeaderBackButton = () => {
   return (
     <IconButton
       variant="secondary"
-      size="regular"
+      size="medium"
       icon={iconSource}
       aria-label={ariaLabel}
       onClick={parentBackAction}

diff --git a/...rc/renderer/components/app-navigation-header/components/AppNavigationHeaderInfoButton.tsx b/...rc/renderer/components/app-navigation-header/components/AppNavigationHeaderInfoButton.tsx
@@ -1,5 +1,5 @@
 import InfoButton, { InfoButtonProps } from '../../InfoButton';
 
 export const AppNavigationHeaderInfoButton = (props: InfoButtonProps) => {
-  return <InfoButton size="regular" variant="secondary" {...props} />;
+  return <InfoButton variant="secondary" {...props} />;
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
@@ -99,9 +99,7 @@ export default function Selector<T, U>(props: SelectorProps<T, U>) {
       </AriaLabel>
       {props.details && (
         <AriaDetails>
-          <StyledInfoButton title={props.infoTitle} size="small">
-            {props.details}
-          </StyledInfoButton>
+          <StyledInfoButton title={props.infoTitle}>{props.details}</StyledInfoButton>
         </AriaDetails>
       )}
     </>

diff --git 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/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/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}
         />

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];

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/IconButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/IconButton.tsx
@@ -8,7 +8,7 @@ import { buttonReset } from '../../styles';
 export interface IconButtonProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   variant?: 'primary' | 'secondary';
-  size?: 'small' | 'regular';
+  size?: 'small' | 'medium';
   icon: string;
 }
 
@@ -27,7 +27,13 @@ const variants = {
 
 const sizes = {
   small: 16,
-  regular: 24,
+  medium: 24,
+};
+
+// TODO: This should be removed when we have updated to the new icons from design system
+const iconSizes = {
+  small: 14,
+  medium: 20,
 };
 
 const StyledButton = styled.button({
@@ -36,17 +42,17 @@ const StyledButton = styled.button({
   background: 'transparent',
   height: 'var(--size)',
   width: 'var(--size)',
+  borderRadius: '100%',
   '&:focus-visible': {
     outline: `2px solid ${Colors.white}`,
-    outlineOffset: '2px',
-    borderRadius: '100%',
   },
 });
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, variant = 'primary', size: sizeProp = 'regular', disabled, style, ...props }, ref) => {
+  ({ icon, variant = 'primary', size: sizeProp = 'medium', disabled, style, ...props }, ref) => {
     const styles = variants[variant];
     const size = sizes[sizeProp];
+    const iconSize = iconSizes[sizeProp];
     return (
       <StyledButton
         ref={ref}
@@ -63,8 +69,8 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
           tintColor={styles.background}
           tintHoverColor={styles.hover}
           disabled={disabled}
-          height={size}
-          width={size}
+          height={iconSize}
+          width={iconSize}
         />
       </StyledButton>
     );