Merge branch 'change-to-new-spacings-in-remaining-settings-views-des-1457'

10 files changed, 115 insertions, 164 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
index 419be998ba..99f405b2a8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
@@ -12,7 +12,9 @@ import { generateRoutePath } from '../lib/routeHelpers';
 import { RoutePath } from '../lib/routes';
 import { useBoolean } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
+import { Spacings } from '../tokens';
 import * as Cell from './cell';
+import { Flex } from './common/layout';
 import {
   ContextMenu,
   ContextMenuContainer,
@@ -43,17 +45,11 @@ import { SmallButton, SmallButtonColor, SmallButtonGroup } from './SmallButton';
 const StyledContextMenuButton = styled(Cell.Icon)({
   alignItems: 'center',
   justifyContent: 'center',
-  marginRight: '8px',
+  marginRight: Spacings.spacing3,
 });
 
 const StyledMethodInfoButton = styled(InfoButton)({
-  marginRight: '11px',
-});
-
-const StyledSpinner = styled(ImageView)({
-  height: '10px',
-  width: '10px',
-  marginRight: '6px',
+  marginRight: Spacings.spacing4,
 });
 
 const StyledNameLabel = styled(Cell.Label)({
@@ -68,7 +64,7 @@ const StyledTestResultCircle = styled.div<{ $result: boolean }>((props) => ({
   height: '10px',
   borderRadius: '50%',
   backgroundColor: props.$result ? colors.green : colors.red,
-  marginRight: '6px',
+  marginRight: Spacings.spacing2,
 }));
 
 // This component is the topmost component in the API access methods view.
@@ -258,8 +254,10 @@ function ApiAccessMethod(props: ApiAccessMethodProps) {
         <StyledNameLabel>{props.method.name}</StyledNameLabel>
         {testing && (
           <Cell.SubLabel>
-            <StyledSpinner source="icon-spinner" />
-            {messages.pgettext('api-access-methods-view', 'Testing...')}
+            <Flex $gap={Spacings.spacing2}>
+              <ImageView source="icon-spinner" width={10} />
+              {messages.pgettext('api-access-methods-view', 'Testing...')}
+            </Flex>
           </Cell.SubLabel>
         )}
         {!testing && testResult !== undefined && (
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
index bcfca03316..336761d823 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
@@ -8,8 +8,10 @@ import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
 import { useBoolean } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
+import { Spacings } from '../tokens';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
+import { Flex } from './common/layout';
 import InfoButton from './InfoButton';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
@@ -25,20 +27,8 @@ import PageSlider from './PageSlider';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
 import { SmallButton, SmallButtonColor } from './SmallButton';
 
-const StyledContent = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-  marginBottom: '2px',
-});
-
 const StyledHeaderSubTitle = styled(HeaderSubTitle)({
   display: 'inline-block',
-  fontWeight: 400,
-
-  '&&:not(:last-child)': {
-    paddingBottom: '18px',
-  },
 });
 
 export const StyledIllustration = styled.img({
@@ -67,70 +57,73 @@ export default function DaitaSettings() {
                   content={[
                     <React.Fragment key="without-daita">
                       <StyledIllustration src="../../assets/images/daita-off-illustration.svg" />
-                      <StyledHeaderSubTitle>
-                        {sprintf(
-                          messages.pgettext(
-                            'wireguard-settings-view',
-                            '%(daita)s (%(daitaFull)s) hides patterns in your encrypted VPN traffic.',
-                          ),
-                          { daita: strings.daita, daitaFull: strings.daitaFull },
-                        )}
-                      </StyledHeaderSubTitle>
-                      <StyledHeaderSubTitle>
-                        {messages.pgettext(
-                          'wireguard-settings-view',
-                          'By using sophisticated AI it’s possible to analyze the traffic of data packets going in and out of your device (even if the traffic is encrypted).',
-                        )}
-                      </StyledHeaderSubTitle>
-                      <StyledHeaderSubTitle>
-                        {sprintf(
-                          messages.pgettext(
+                      <Flex $flexDirection="column" $gap={Spacings.spacing5}>
+                        <StyledHeaderSubTitle>
+                          {sprintf(
+                            messages.pgettext(
+                              'wireguard-settings-view',
+                              '%(daita)s (%(daitaFull)s) hides patterns in your encrypted VPN traffic.',
+                            ),
+                            { daita: strings.daita, daitaFull: strings.daitaFull },
+                          )}
+                        </StyledHeaderSubTitle>
+                        <StyledHeaderSubTitle>
+                          {messages.pgettext(
                             'wireguard-settings-view',
-                            'If an observer monitors these data packets, %(daita)s makes it significantly harder for them to identify which websites you are visiting or with whom you are communicating.',
-                          ),
-                          { daita: strings.daita },
-                        )}
-                      </StyledHeaderSubTitle>
+                            'By using sophisticated AI it’s possible to analyze the traffic of data packets going in and out of your device (even if the traffic is encrypted).',
+                          )}
+                        </StyledHeaderSubTitle>
+                        <StyledHeaderSubTitle>
+                          {sprintf(
+                            messages.pgettext(
+                              'wireguard-settings-view',
+                              'If an observer monitors these data packets, %(daita)s makes it significantly harder for them to identify which websites you are visiting or with whom you are communicating.',
+                            ),
+                            { daita: strings.daita },
+                          )}
+                        </StyledHeaderSubTitle>
+                      </Flex>
                     </React.Fragment>,
                     <React.Fragment key="with-daita">
                       <StyledIllustration src="../../assets/images/daita-on-illustration.svg" />
-                      <StyledHeaderSubTitle>
-                        {sprintf(
-                          messages.pgettext(
-                            'wireguard-settings-view',
-                            '%(daita)s does this by carefully adding network noise and making all network packets the same size.',
-                          ),
-                          { daita: strings.daita },
-                        )}
-                      </StyledHeaderSubTitle>
-                      <StyledHeaderSubTitle>
-                        {sprintf(
-                          messages.pgettext(
-                            'wireguard-settings-view',
-                            'Not all our servers are %(daita)s-enabled. Therefore, we use multihop automatically to enable %(daita)s with any server.',
-                          ),
-                          { daita: strings.daita },
-                        )}
-                      </StyledHeaderSubTitle>
-                      <StyledHeaderSubTitle>
-                        {sprintf(
-                          messages.pgettext(
-                            'wireguard-settings-view',
-                            'Attention: Be cautious if you have a limited data plan as this feature will increase your network traffic. This feature can only be used with %(wireguard)s.',
-                          ),
-                          { wireguard: strings.wireguard },
-                        )}
-                      </StyledHeaderSubTitle>
+                      <Flex $flexDirection="column" $gap={Spacings.spacing5}>
+                        <StyledHeaderSubTitle>
+                          {sprintf(
+                            messages.pgettext(
+                              'wireguard-settings-view',
+                              '%(daita)s does this by carefully adding network noise and making all network packets the same size.',
+                            ),
+                            { daita: strings.daita },
+                          )}
+                        </StyledHeaderSubTitle>
+                        <StyledHeaderSubTitle>
+                          {sprintf(
+                            messages.pgettext(
+                              'wireguard-settings-view',
+                              'Not all our servers are %(daita)s-enabled. Therefore, we use multihop automatically to enable %(daita)s with any server.',
+                            ),
+                            { daita: strings.daita },
+                          )}
+                        </StyledHeaderSubTitle>
+                        <StyledHeaderSubTitle>
+                          {sprintf(
+                            messages.pgettext(
+                              'wireguard-settings-view',
+                              'Attention: Be cautious if you have a limited data plan as this feature will increase your network traffic. This feature can only be used with %(wireguard)s.',
+                            ),
+                            { wireguard: strings.wireguard },
+                          )}
+                        </StyledHeaderSubTitle>
+                      </Flex>
                     </React.Fragment>,
                   ]}
                 />
               </SettingsHeader>
-
-              <StyledContent>
+              <SettingsContainer>
                 <Cell.Group>
                   <DaitaToggle />
                 </Cell.Group>
-              </StyledContent>
+              </SettingsContainer>
             </NavigationScrollbars>
           </NavigationContainer>
         </SettingsContainer>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
index 8ff848cb12..a7ece12a7d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import { Colors, Spacings } from '../tokens';
-import { Flex } from './common/layout/Flex';
+import { Flex } from './common/layout';
 import { measurements } from './common-styles';
 import HeaderBar from './HeaderBar';
 import { NavigationScrollbars } from './NavigationBar';
@@ -61,19 +61,18 @@ export const SettingsGroup = styled(Flex).attrs({
   $flexDirection: 'column',
 })({});
 
-export const ButtonStack = styled(Flex).attrs(() => ({
+export const ButtonStack = styled(Flex).attrs({
   $flexDirection: 'column',
   $gap: Spacings.spacing5,
-  $margin: `0 ${Spacings.spacing6}`,
-}))({
+})({
   [`${Footer} &&`]: {
     margin: `0 ${Spacings.spacing3}`,
   },
 });
 
-export const LabelStack = styled(Flex).attrs(() => ({
+export const LabelStack = styled(Flex).attrs({
   $flexGrow: 1,
   $flexDirection: 'row',
   $alignItems: 'center',
   $gap: Spacings.spacing3,
-}))({});
+})({});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx
index 3075e1d4ed..68e2451b41 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx
@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
 import { sprintf } from 'sprintf-js';
-import styled from 'styled-components';
 
 import { strings } from '../../config.json';
 import { messages } from '../../shared/gettext';
@@ -10,6 +9,7 @@ import { useHistory } from '../lib/history';
 import { useSelector } from '../redux/store';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
+import { Flex } from './common/layout';
 import { StyledIllustration } from './DaitaSettings';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
@@ -22,13 +22,6 @@ import {
 } from './NavigationBar';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
 
-const StyledContent = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-  marginBottom: '2px',
-});
-
 export default function MultihopSettings() {
   const { pop } = useHistory();
 
@@ -59,11 +52,11 @@ export default function MultihopSettings() {
                 </HeaderSubTitle>
               </SettingsHeader>
 
-              <StyledContent>
+              <Flex $flexDirection="column" $flex={1}>
                 <Cell.Group>
                   <MultihopSetting />
                 </Cell.Group>
-              </StyledContent>
+              </Flex>
             </NavigationScrollbars>
           </NavigationContainer>
         </SettingsContainer>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
index 8b78264a9a..deac04b26b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
@@ -2,19 +2,9 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { Colors, Spacings } from '../tokens';
+import { Flex } from './common/layout';
 import { LabelTiny, TitleBig } from './common/text';
 
-export const Container = styled.div({
-  flex: 0,
-  margin: `${Spacings.spacing3} ${Spacings.spacing5} ${Spacings.spacing4}`,
-});
-
-export const ContentWrapper = styled.div({
-  '&&:not(:first-child)': {
-    paddingTop: '8px',
-  },
-});
-
 export const HeaderTitle = styled(TitleBig)({
   wordWrap: 'break-word',
   hyphens: 'auto',
@@ -24,18 +14,25 @@ export const HeaderSubTitle = styled(LabelTiny).attrs({
   $color: Colors.white60,
 })({});
 
-interface ISettingsHeaderProps {
+interface SettingsHeaderProps {
   children?: React.ReactNode;
   className?: string;
 }
 
-function SettingsHeader(props: ISettingsHeaderProps, forwardRef: React.Ref<HTMLDivElement>) {
+function SettingsHeader(props: SettingsHeaderProps, forwardRef: React.Ref<HTMLDivElement>) {
   return (
-    <Container ref={forwardRef} className={props.className}>
-      {React.Children.map(props.children, (child) => {
-        return React.isValidElement(child) ? <ContentWrapper>{child}</ContentWrapper> : undefined;
-      })}
-    </Container>
+    <Flex
+      ref={forwardRef}
+      $flexDirection="column"
+      $gap={Spacings.spacing3}
+      $margin={{
+        top: Spacings.spacing3,
+        horizontal: Spacings.spacing5,
+        bottom: Spacings.spacing4,
+      }}
+      className={props.className}>
+      {props.children}
+    </Flex>
   );
 }
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
index 5dad65219f..b2e25c9e63 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
@@ -18,8 +18,8 @@ import { Colors, Spacings } from '../tokens';
 import Accordion from './Accordion';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { Flex } from './common/layout';
-import { FootnoteMini } from './common/text';
+import { Flex } from './common/layout/Flex';
+import { FootnoteMini } from './common/text/FootnoteMini';
 import { CustomScrollbarsRef } from './CustomScrollbars';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
@@ -34,12 +34,8 @@ import {
   StyledCellButton,
   StyledCellLabel,
   StyledCellWarningIcon,
-  StyledContent,
-  StyledHeaderTitle,
-  StyledHeaderTitleContainer,
   StyledIcon,
   StyledIconPlaceholder,
-  StyledListContainer,
   StyledNavigationScrollbars,
   StyledNoResult,
   StyledNoResultText,
@@ -71,12 +67,12 @@ export default function SplitTunneling() {
               </NavigationBar>
 
               <StyledNavigationScrollbars ref={scrollbarsRef}>
-                <StyledContent>
+                <Flex $flexDirection="column" $flex={1}>
                   <PlatformSpecificSplitTunnelingSettings
                     setBrowsing={setBrowsing}
                     scrollToTop={scrollToTop}
                   />
-                </StyledContent>
+                </Flex>
               </StyledNavigationScrollbars>
             </NavigationContainer>
           </SettingsContainer>
@@ -463,14 +459,14 @@ export function SplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsPro
   return (
     <>
       <SettingsHeader>
-        <StyledHeaderTitleContainer>
-          <StyledHeaderTitle>{strings.splitTunneling}</StyledHeaderTitle>
+        <Flex $justifyContent="space-between" $alignItems="center">
+          <HeaderTitle>{strings.splitTunneling}</HeaderTitle>
           <Switch
             isOn={splitTunnelingEnabled}
             disabled={!splitTunnelingAvailable}
             onChange={setSplitTunnelingState}
           />
-        </StyledHeaderTitleContainer>
+        </Flex>
         <MacOsSplitTunnelingAvailability
           needFullDiskPermissions={
             window.env.platform === 'darwin' && splitTunnelingAvailable === false
@@ -585,14 +581,17 @@ function ApplicationList<T extends IApplication>(props: IApplicationListProps<T>
     );
   } else {
     return (
-      <StyledListContainer data-testid={props['data-testid']}>
+      <Flex
+        $flexDirection="column"
+        $margin={{ bottom: Spacings.spacing5 }}
+        data-testid={props['data-testid']}>
         <List
           data-testid={props['data-testid']}
           items={props.applications.sort((a, b) => a.name.localeCompare(b.name))}
           getKey={applicationGetKey}>
           {props.rowRenderer}
         </List>
-      </StyledListContainer>
+      </Flex>
     );
   }
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index 01eb73ec50..84764439ef 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 
 import { colors } from '../../config.json';
+import { Spacings } from '../tokens';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
 import { measurements, normalText } from './common-styles';
 import ImageView from './ImageView';
 import { NavigationScrollbars } from './NavigationBar';
 import SearchBar from './SearchBar';
-import { HeaderTitle } from './SettingsHeader';
 import { SmallButton } from './SmallButton';
 
 export const StyledPageCover = styled.div<{ $show: boolean }>((props) => ({
@@ -17,7 +17,6 @@ export const StyledPageCover = styled.div<{ $show: boolean }>((props) => ({
   left: 0,
   right: 0,
   bottom: 0,
-  backgroundColor: colors.black,
   opacity: 0.5,
   display: props.$show ? 'block' : 'none',
 }));
@@ -26,12 +25,6 @@ export const StyledNavigationScrollbars = styled(NavigationScrollbars)({
   flex: 1,
 });
 
-export const StyledContent = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-});
-
 export const StyledCellButton = styled(Cell.CellButton)<{ $lookDisabled?: boolean }>((props) => ({
   '&&:not(:disabled):hover': {
     backgroundColor: props.$lookDisabled ? colors.blue : undefined,
@@ -47,16 +40,16 @@ const disabledApplication = (props: DisabledApplicationProps) => ({
 });
 
 export const StyledIcon = styled(Cell.UntintedIcon)<DisabledApplicationProps>(disabledApplication, {
-  marginRight: '12px',
+  marginRight: Spacings.spacing4,
 });
 
 export const StyledActionIcon = styled(ImageView)({
-  marginLeft: '8px',
+  marginLeft: Spacings.spacing3,
 });
 
 export const StyledCellWarningIcon = styled(Cell.Icon)({
-  marginLeft: '9px',
-  marginRight: '3px',
+  marginLeft: Spacings.spacing3,
+  marginRight: Spacings.spacing1,
 });
 
 export const StyledCellLabel = styled(Cell.Label)<DisabledApplicationProps>(
@@ -71,53 +64,34 @@ export const StyledCellLabel = styled(Cell.Label)<DisabledApplicationProps>(
 
 export const StyledIconPlaceholder = styled.div({
   width: '35px',
-  marginRight: '12px',
+  marginRight: Spacings.spacing4,
 });
 
 export const StyledSpinnerRow = styled(Cell.CellButton)({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  padding: '8px 0',
+  padding: `${Spacings.spacing3} 0`,
   marginBottom: measurements.rowVerticalMargin,
   background: colors.blue40,
 });
 
-export const StyledListContainer = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  marginBottom: measurements.rowVerticalMargin,
-});
-
 export const StyledBrowseButton = styled(AppButton.BlueButton)({
   margin: `0 ${measurements.horizontalViewMargin} ${measurements.verticalViewMargin}`,
 });
 
-export const StyledCellContainer = styled(Cell.Container)({
-  marginBottom: measurements.rowVerticalMargin,
-});
-
 export const StyledNoResult = styled(Cell.CellFooter)({
   display: 'flex',
   flexDirection: 'column',
   paddingTop: 0,
   marginTop: 0,
-  marginBottom: '69px',
+  marginBottom: Spacings.spacing12,
 });
 
 export const StyledNoResultText = styled(Cell.CellFooterText)({
   textAlign: 'center',
 });
 
-export const StyledHeaderTitleContainer = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-export const StyledHeaderTitle = styled(HeaderTitle)({
-  flex: 1,
-});
-
 export const StyledSearchBar = styled(SearchBar)({
   marginLeft: measurements.horizontalViewMargin,
   marginRight: measurements.horizontalViewMargin,
@@ -127,7 +101,3 @@ export const StyledSearchBar = styled(SearchBar)({
 export const WideSmallButton = styled(SmallButton)({
   width: '100%',
 });
-
-export const Spacing = styled.div<{ height: string }>((props) => ({
-  height: props.height,
-}));
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
index f8db1c45e6..12de226915 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
@@ -6,6 +6,7 @@ import { Row } from './Row';
 
 const StyledContainer = styled(Row)({
   padding: `0 ${Spacings.spacing5}`,
+  gap: Spacings.spacing5,
 });
 
 export const CellDisabledContext = React.createContext<boolean>(false);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx
index 1b73d69f4c..ede836194b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Spacings } from '../../../tokens';
+import { Layout, LayoutProps } from './Layout';
 
-export interface FlexProps {
+export interface FlexProps extends LayoutProps {
   $gap?: Spacings;
   $flex?: React.CSSProperties['flex'];
   $flexDirection?: React.CSSProperties['flexDirection'];
@@ -14,7 +15,7 @@ export interface FlexProps {
   children?: React.ReactNode;
 }
 
-export const Flex = styled.div<FlexProps>(
+export const Flex = styled(Layout)<FlexProps>(
   ({ $gap, $flex, $flexDirection, $alignItems, $justifyContent, $flexGrow, $flexShrink }) => ({
     display: 'flex',
     gap: $gap,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx
index 5afb47169d..fe1dfbb94e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx
@@ -5,7 +5,7 @@ import { margin } from './margin';
 import { padding } from './padding';
 import { LayoutSpacings } from './types';
 
-interface LayoutProps {
+export interface LayoutProps {
   $margin?: Spacings | LayoutSpacings;
   $padding?: Spacings | LayoutSpacings;
 }