From 06a7273445a19767bbb75847b5e8af2666781fc0 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@mohlin.dev>
Date: Tue, 19 Nov 2024 15:11:24 +0100
Subject: [PATCH 1/4] Add spacing tokens to common styles

---
 .../src/renderer/components/common-styles.ts  | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
index dbfb720e44b5..50ad994996e9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
@@ -63,9 +63,25 @@ export const hugeText = {
   color: colors.white,
 };
 
+export const spacings = {
+  spacing1: '4px',
+  spacing2: '6px',
+  spacing3: '8px',
+  spacing4: '12px',
+  spacing5: '16px',
+  spacing6: '24px',
+  spacing7: '32px',
+  spacing8: '40px',
+  spacing9: '48px',
+  spacing10: '56px',
+  spacing11: '64px',
+  spacing12: '72px',
+  spacing13: '80px',
+};
+
 export const measurements = {
-  rowMinHeight: '44px',
-  viewMargin: '22px',
-  rowVerticalMargin: '20px',
-  buttonVerticalMargin: '18px',
+  rowMinHeight: spacings.spacing9,
+  viewMargin: spacings.spacing6,
+  rowVerticalMargin: spacings.spacing6,
+  buttonVerticalMargin: spacings.spacing5,
 };

From 397c674b81656e9a1b53005c5d9a10d407011c61 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@mohlin.dev>
Date: Tue, 19 Nov 2024 15:15:20 +0100
Subject: [PATCH 2/4] Use spacing tokens in settings

---
 .../renderer/components/ApiAccessMethods.tsx  |  2 +-
 .../src/renderer/components/Settings.tsx      | 98 +++++++++----------
 .../renderer/components/SettingsHeader.tsx    |  7 +-
 .../renderer/components/SettingsStyles.tsx    | 15 ++-
 .../renderer/components/cell/CellButton.tsx   | 31 +++++-
 .../src/renderer/components/cell/Footer.tsx   |  4 +-
 .../src/renderer/components/cell/Label.tsx    |  7 +-
 7 files changed, 93 insertions(+), 71 deletions(-)

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
index 68b873bd643f..98753f32449e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
@@ -127,7 +127,7 @@ export default function ApiAccessMethods() {
                 </SettingsHeader>
 
                 <StyledSettingsContent>
-                  <Cell.Group>
+                  <Cell.Group $noMarginBottom>
                     <ApiAccessMethod
                       method={methods.direct}
                       inUse={methods.direct.id === currentMethod?.id}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
index 0a691d340f5d..1d912952d0e3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
@@ -7,7 +7,6 @@ import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { useSelector } from '../redux/store';
-import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
 import * as Cell from './cell';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
@@ -19,6 +18,7 @@ import {
   StyledNavigationScrollbars,
   StyledQuitButton,
   StyledSettingsContent,
+  StyledSettingsGroups,
 } from './SettingsStyles';
 
 export default function Support() {
@@ -54,45 +54,47 @@ export default function Support() {
                 </SettingsHeader>
 
                 <StyledSettingsContent>
-                  {showSubSettings ? (
-                    <>
-                      <Cell.Group>
+                  <StyledSettingsGroups>
+                    {showSubSettings ? (
+                      <>
+                        <Cell.Group $noMarginBottom>
+                          <UserInterfaceSettingsButton />
+                          <MultihopButton />
+                          <DaitaButton />
+                          <VpnSettingsButton />
+                        </Cell.Group>
+
+                        {showSplitTunneling && (
+                          <Cell.Group $noMarginBottom>
+                            <SplitTunnelingButton />
+                          </Cell.Group>
+                        )}
+                      </>
+                    ) : (
+                      <Cell.Group $noMarginBottom>
                         <UserInterfaceSettingsButton />
-                        <MultihopButton />
-                        <DaitaButton />
-                        <VpnSettingsButton />
                       </Cell.Group>
+                    )}
 
-                      {showSplitTunneling && (
-                        <Cell.Group>
-                          <SplitTunnelingButton />
-                        </Cell.Group>
-                      )}
-                    </>
-                  ) : (
-                    <Cell.Group>
-                      <UserInterfaceSettingsButton />
+                    <Cell.Group $noMarginBottom>
+                      <ApiAccessMethodsButton />
                     </Cell.Group>
-                  )}
 
-                  <Cell.Group>
-                    <ApiAccessMethodsButton />
-                  </Cell.Group>
+                    <Cell.Group $noMarginBottom>
+                      <SupportButton />
+                      <AppVersionButton />
+                    </Cell.Group>
 
-                  <Cell.Group>
-                    <SupportButton />
-                    <AppVersionButton />
-                  </Cell.Group>
+                    {window.env.development && (
+                      <Cell.Group $noMarginBottom>
+                        <DebugButton />
+                      </Cell.Group>
+                    )}
+                  </StyledSettingsGroups>
 
-                  {window.env.development && (
-                    <Cell.Group>
-                      <DebugButton />
-                    </Cell.Group>
-                  )}
+                  <QuitButton />
                 </StyledSettingsContent>
               </StyledContent>
-
-              <QuitButton />
             </StyledNavigationScrollbars>
           </NavigationContainer>
         </SettingsContainer>
@@ -209,7 +211,7 @@ function AppVersionButton() {
     [openUrl, suggestedIsBeta],
   );
 
-  let icon;
+  let alertIcon;
   let footer;
   if (!consistentVersion || !upToDateVersion) {
     const inconsistentVersionMessage = messages.pgettext(
@@ -224,7 +226,7 @@ function AppVersionButton() {
 
     const message = !consistentVersion ? inconsistentVersionMessage : updateAvailableMessage;
 
-    icon = <StyledCellIcon source="icon-alert" width={18} tintColor={colors.red} />;
+    alertIcon = <StyledCellIcon source="icon-alert" width={18} tintColor={colors.red} />;
     footer = (
       <Cell.CellFooter>
         <Cell.CellFooterText>{message}</Cell.CellFooterText>
@@ -233,24 +235,20 @@ function AppVersionButton() {
   }
 
   return (
-    <AriaDescriptionGroup>
-      <AriaDescribed>
-        <Cell.CellButton disabled={isOffline} onClick={openDownloadLink}>
-          {icon}
-          <Cell.Label>{messages.pgettext('settings-view', 'App version')}</Cell.Label>
-          <Cell.SubText>{appVersion}</Cell.SubText>
-          <AriaDescription>
-            <Cell.Icon
-              height={16}
-              width={16}
-              source="icon-extLink"
-              aria-label={messages.pgettext('accessibility', 'Opens externally')}
-            />
-          </AriaDescription>
-        </Cell.CellButton>
-      </AriaDescribed>
+    <>
+      <Cell.CellNavigationButton
+        disabled={isOffline}
+        onClick={openDownloadLink}
+        icon={{
+          source: 'icon-extLink',
+          'aria-label': messages.pgettext('accessibility', 'Opens externally'),
+        }}>
+        {alertIcon}
+        <Cell.Label>{messages.pgettext('settings-view', 'App version')}</Cell.Label>
+        <Cell.SubText>{appVersion}</Cell.SubText>
+      </Cell.CellNavigationButton>
       {footer}
-    </AriaDescriptionGroup>
+    </>
   );
 }
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
index 47e1f47f7b08..1d1a1f4e7111 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
@@ -2,14 +2,11 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { colors } from '../../config.json';
-import { hugeText, measurements, tinyText } from './common-styles';
+import { hugeText, spacings, tinyText } from './common-styles';
 
 export const Container = styled.div({
   flex: 0,
-  paddingTop: '2px',
-  paddingLeft: measurements.viewMargin,
-  paddingRight: measurements.viewMargin,
-  paddingBottom: measurements.rowVerticalMargin,
+  margin: `${spacings.spacing3} ${spacings.spacing5} ${spacings.spacing4}`,
 });
 
 export const ContentWrapper = styled.div({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx
index 7a3d2c04aed8..4ca1c88fd179 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx
@@ -2,11 +2,11 @@ import styled from 'styled-components';
 
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { measurements } from './common-styles';
+import { measurements, spacings } from './common-styles';
 import { NavigationScrollbars } from './NavigationBar';
 
 export const StyledCellIcon = styled(Cell.UntintedIcon)({
-  marginRight: '8px',
+  marginRight: spacings.spacing3,
 });
 
 export const StyledNavigationScrollbars = styled(NavigationScrollbars)({
@@ -18,14 +18,21 @@ export const StyledContent = styled.div({
   flexDirection: 'column',
   flex: 1,
   overflow: 'visible',
+  marginBottom: measurements.viewMargin,
 });
 
 export const StyledSettingsContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
+  gap: spacings.spacing6,
+});
+
+export const StyledSettingsGroups = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacings.spacing5,
 });
 
 export const StyledQuitButton = styled(AppButton.RedButton)({
-  margin: measurements.viewMargin,
-  marginTop: measurements.rowVerticalMargin,
+  margin: `0 ${measurements.viewMargin}`,
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
index cc7a6e101534..83f73be146d1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
@@ -2,6 +2,8 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import { colors } from '../../../config.json';
+import { spacings } from '../common-styles';
+import { IImageViewProps } from '../ImageView';
 import { CellDisabledContext } from './Container';
 import { Icon } from './Label';
 import { Row } from './Row';
@@ -21,7 +23,8 @@ const StyledCellButton = styled(Row)<IStyledCellButtonProps>((props) => {
   const backgroundColorHover = props.$selected ? colors.green : colors.blue80;
 
   return {
-    paddingRight: '16px',
+    paddingRight: spacings.spacing5,
+    paddingLeft: spacings.spacing5,
     flex: 1,
     alignContent: 'center',
     cursor: 'default',
@@ -55,13 +58,31 @@ export const CellButton = styled(
   }),
 )({});
 
-export function CellNavigationButton(props: ICellButtonProps) {
-  const { children, ...otherProps } = props;
+const StyledNavigationButtonIcon = styled('div')({
+  display: 'grid',
+  placeItems: 'center',
+  width: '24px',
+  height: '24px',
+});
+
+interface ICellNavigationButtonProps extends ICellButtonProps {
+  isAriaDescription?: boolean;
+  icon?: IImageViewProps;
+}
 
+export function CellNavigationButton({
+  children,
+  icon = {
+    source: 'icon-chevron',
+  },
+  ...props
+}: ICellNavigationButtonProps) {
   return (
-    <CellButton {...otherProps}>
+    <CellButton {...props}>
       {children}
-      <Icon height={12} width={7} source="icon-chevron" />
+      <StyledNavigationButtonIcon>
+        <Icon {...icon} />
+      </StyledNavigationButtonIcon>
     </CellButton>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
index 86487c676c5f..3a32029445d4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 
 import { colors } from '../../../config.json';
-import { measurements, tinyText } from '../common-styles';
+import { measurements, spacings, tinyText } from '../common-styles';
 
 export const CellFooter = styled.div({
-  padding: `6px ${measurements.viewMargin} 0px`,
+  margin: `${spacings.spacing1} ${measurements.viewMargin} 0px`,
 });
 
 export const CellFooterText = styled.span(tinyText, {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
index b2b37c1e4ce3..556481e50ee1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import { colors } from '../../../config.json';
-import { buttonText, normalText, tinyText } from '../common-styles';
+import { buttonText, normalText, spacings, tinyText } from '../common-styles';
 import ImageView, { IImageViewProps } from '../ImageView';
 import { CellButton } from './CellButton';
 import { CellDisabledContext } from './Container';
@@ -30,8 +30,7 @@ const StyledSubText = styled.span<{ disabled: boolean }>(tinyText, (props) => ({
   color: props.disabled ? colors.white20 : colors.white60,
   flex: -1,
   textAlign: 'right',
-  marginLeft: '8px',
-  marginRight: '8px',
+  margin: `0 ${spacings.spacing3}`,
 }));
 
 const StyledIconContainer = styled.div<{ disabled: boolean }>((props) => ({
@@ -39,7 +38,7 @@ const StyledIconContainer = styled.div<{ disabled: boolean }>((props) => ({
 }));
 
 const StyledTintedIcon = styled(ImageView).attrs((props: IImageViewProps) => ({
-  tintColor: props.tintColor ?? colors.white60,
+  tintColor: props.tintColor ?? colors.white,
   tintHoverColor: props.tintHoverColor ?? props.tintColor ?? colors.white60,
 }))((props: IImageViewProps) => ({
   '&&:hover': {

From c7244bc8d5a4cfcbf67ef560f7781efbb28e8d77 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@mohlin.dev>
Date: Wed, 20 Nov 2024 09:20:43 +0100
Subject: [PATCH 3/4] Move and rename common settings component

---
 .../renderer/components/ApiAccessMethods.tsx  | 21 +++--
 .../components/EditApiAccessMethod.tsx        | 21 +++--
 .../renderer/components/EditCustomBridge.tsx  | 21 +++--
 .../src/renderer/components/Layout.tsx        | 33 +++++--
 .../src/renderer/components/Settings.tsx      | 87 +++++++++----------
 .../renderer/components/SettingsStyles.tsx    | 25 ------
 6 files changed, 108 insertions(+), 100 deletions(-)

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
index 98753f32449e..419be998ba77 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
@@ -22,7 +22,13 @@ import {
 import ImageView from './ImageView';
 import InfoButton from './InfoButton';
 import { BackAction } from './KeyboardNavigation';
-import { Layout, SettingsContainer } from './Layout';
+import {
+  Layout,
+  SettingsContainer,
+  SettingsContent,
+  SettingsNavigationScrollbars,
+  SettingsStack,
+} from './Layout';
 import { ModalAlert, ModalAlertType } from './Modal';
 import {
   NavigationBar,
@@ -32,7 +38,6 @@ import {
   TitleBarItem,
 } from './NavigationBar';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
-import { StyledContent, StyledNavigationScrollbars, StyledSettingsContent } from './SettingsStyles';
 import { SmallButton, SmallButtonColor, SmallButtonGroup } from './SmallButton';
 
 const StyledContextMenuButton = styled(Cell.Icon)({
@@ -114,8 +119,8 @@ export default function ApiAccessMethods() {
               </NavigationItems>
             </NavigationBar>
 
-            <StyledNavigationScrollbars fillContainer>
-              <StyledContent>
+            <SettingsNavigationScrollbars fillContainer>
+              <SettingsContent>
                 <SettingsHeader>
                   <HeaderTitle>{messages.pgettext('navigation-bar', 'API access')}</HeaderTitle>
                   <HeaderSubTitle>
@@ -126,7 +131,7 @@ export default function ApiAccessMethods() {
                   </HeaderSubTitle>
                 </SettingsHeader>
 
-                <StyledSettingsContent>
+                <SettingsStack>
                   <Cell.Group $noMarginBottom>
                     <ApiAccessMethod
                       method={methods.direct}
@@ -153,9 +158,9 @@ export default function ApiAccessMethods() {
                   <SmallButtonGroup $noMarginTop>
                     <SmallButton onClick={navigateToNew}>{messages.gettext('Add')}</SmallButton>
                   </SmallButtonGroup>
-                </StyledSettingsContent>
-              </StyledContent>
-            </StyledNavigationScrollbars>
+                </SettingsStack>
+              </SettingsContent>
+            </SettingsNavigationScrollbars>
           </NavigationContainer>
         </SettingsContainer>
       </Layout>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/EditApiAccessMethod.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/EditApiAccessMethod.tsx
index 8a11404b1c95..ad6d154443f6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/EditApiAccessMethod.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/EditApiAccessMethod.tsx
@@ -16,12 +16,17 @@ import { useLastDefinedValue } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
 import { SettingsForm } from './cell/SettingsForm';
 import { BackAction } from './KeyboardNavigation';
-import { Layout, SettingsContainer } from './Layout';
+import {
+  Layout,
+  SettingsContainer,
+  SettingsContent,
+  SettingsNavigationScrollbars,
+  SettingsStack,
+} from './Layout';
 import { ModalAlert, ModalAlertType } from './Modal';
 import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
 import { NamedProxyForm } from './ProxyForm';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
-import { StyledContent, StyledNavigationScrollbars, StyledSettingsContent } from './SettingsStyles';
 import { SmallButton } from './SmallButton';
 
 export function EditApiAccessMethod() {
@@ -102,20 +107,20 @@ function AccessMethodForm() {
               </NavigationItems>
             </NavigationBar>
 
-            <StyledNavigationScrollbars fillContainer>
-              <StyledContent>
+            <SettingsNavigationScrollbars fillContainer>
+              <SettingsContent>
                 <SettingsHeader>
                   <HeaderTitle>{title}</HeaderTitle>
                   <HeaderSubTitle>{subtitle}</HeaderSubTitle>
                 </SettingsHeader>
 
-                <StyledSettingsContent>
+                <SettingsStack>
                   {id !== undefined && method === undefined ? (
                     <span>Failed to open method</span>
                   ) : (
                     <NamedProxyForm proxy={method} onSave={onSave} onCancel={pop} />
                   )}
-                </StyledSettingsContent>
+                </SettingsStack>
 
                 <TestingDialog
                   name={updatedMethod?.name ?? ''}
@@ -125,8 +130,8 @@ function AccessMethodForm() {
                   cancel={resetTestResult}
                   save={handleDialogSave}
                 />
-              </StyledContent>
-            </StyledNavigationScrollbars>
+              </SettingsContent>
+            </SettingsNavigationScrollbars>
           </NavigationContainer>
         </SettingsContainer>
       </Layout>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/EditCustomBridge.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/EditCustomBridge.tsx
index 7a0ad6f8d82e..5b98251c2bfd 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/EditCustomBridge.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/EditCustomBridge.tsx
@@ -8,12 +8,17 @@ import { useBoolean } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
 import { SettingsForm } from './cell/SettingsForm';
 import { BackAction } from './KeyboardNavigation';
-import { Layout, SettingsContainer } from './Layout';
+import {
+  Layout,
+  SettingsContainer,
+  SettingsContent,
+  SettingsNavigationScrollbars,
+  SettingsStack,
+} from './Layout';
 import { ModalAlert, ModalAlertType } from './Modal';
 import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
 import { ProxyForm } from './ProxyForm';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
-import { StyledContent, StyledNavigationScrollbars, StyledSettingsContent } from './SettingsStyles';
 import { SmallButton, SmallButtonColor } from './SmallButton';
 
 export function EditCustomBridge() {
@@ -73,20 +78,20 @@ function CustomBridgeForm() {
               </NavigationItems>
             </NavigationBar>
 
-            <StyledNavigationScrollbars fillContainer>
-              <StyledContent>
+            <SettingsNavigationScrollbars fillContainer>
+              <SettingsContent>
                 <SettingsHeader>
                   <HeaderTitle>{title}</HeaderTitle>
                 </SettingsHeader>
 
-                <StyledSettingsContent>
+                <SettingsStack>
                   <ProxyForm
                     proxy={bridgeSettings.custom}
                     onSave={onSave}
                     onCancel={pop}
                     onDelete={bridgeSettings.custom === undefined ? undefined : showDeleteDialog}
                   />
-                </StyledSettingsContent>
+                </SettingsStack>
 
                 <ModalAlert
                   isOpen={deleteDialogVisible}
@@ -110,8 +115,8 @@ function CustomBridgeForm() {
                     'Deleting the custom bridge will take you back to the select location view and the Automatic option will be selected instead.',
                   )}
                 />
-              </StyledContent>
-            </StyledNavigationScrollbars>
+              </SettingsContent>
+            </SettingsNavigationScrollbars>
           </NavigationContainer>
         </SettingsContainer>
       </Layout>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
index b74cfd929f65..3f11f080ef1f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
@@ -1,8 +1,9 @@
 import styled from 'styled-components';
 
 import { colors } from '../../config.json';
-import { measurements } from './common-styles';
+import { measurements, spacings } from './common-styles';
 import HeaderBar from './HeaderBar';
+import { NavigationScrollbars } from './NavigationBar';
 
 export const Header = styled(HeaderBar)({
   flex: 0,
@@ -16,23 +17,41 @@ export const Container = styled.div({
   overflow: 'hidden',
 });
 
+export const Layout = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  height: '100vh',
+});
+
 export const SettingsContainer = styled(Container)({
   backgroundColor: colors.darkBlue,
 });
 
-export const Layout = styled.div({
+export const SettingsNavigationScrollbars = styled(NavigationScrollbars)({
+  flex: 1,
+});
+
+export const SettingsContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  height: '100vh',
+  overflow: 'visible',
+  marginBottom: measurements.viewMargin,
+});
+
+export const SettingsStack = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacings.spacing5,
 });
 
 export const Footer = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 0,
-  paddingTop: '18px',
-  paddingLeft: measurements.viewMargin,
-  paddingRight: measurements.viewMargin,
-  paddingBottom: measurements.viewMargin,
+  padding: measurements.viewMargin,
+  [`${SettingsContent} &&`]: {
+    paddingBottom: 0,
+  },
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
index 1d912952d0e3..5ac97d72842c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
@@ -9,17 +9,17 @@ import { RoutePath } from '../lib/routes';
 import { useSelector } from '../redux/store';
 import * as Cell from './cell';
 import { BackAction } from './KeyboardNavigation';
-import { Layout, SettingsContainer } from './Layout';
+import {
+  Footer,
+  Layout,
+  SettingsContainer,
+  SettingsContent,
+  SettingsNavigationScrollbars,
+  SettingsStack,
+} from './Layout';
 import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
-import {
-  StyledCellIcon,
-  StyledContent,
-  StyledNavigationScrollbars,
-  StyledQuitButton,
-  StyledSettingsContent,
-  StyledSettingsGroups,
-} from './SettingsStyles';
+import { StyledCellIcon, StyledQuitButton } from './SettingsStyles';
 
 export default function Support() {
   const history = useHistory();
@@ -47,55 +47,54 @@ export default function Support() {
               </NavigationItems>
             </NavigationBar>
 
-            <StyledNavigationScrollbars fillContainer>
-              <StyledContent>
+            <SettingsNavigationScrollbars fillContainer>
+              <SettingsContent>
                 <SettingsHeader>
                   <HeaderTitle>{messages.pgettext('navigation-bar', 'Settings')}</HeaderTitle>
                 </SettingsHeader>
 
-                <StyledSettingsContent>
-                  <StyledSettingsGroups>
-                    {showSubSettings ? (
-                      <>
-                        <Cell.Group $noMarginBottom>
-                          <UserInterfaceSettingsButton />
-                          <MultihopButton />
-                          <DaitaButton />
-                          <VpnSettingsButton />
-                        </Cell.Group>
-
-                        {showSplitTunneling && (
-                          <Cell.Group $noMarginBottom>
-                            <SplitTunnelingButton />
-                          </Cell.Group>
-                        )}
-                      </>
-                    ) : (
+                <SettingsStack>
+                  {showSubSettings ? (
+                    <>
                       <Cell.Group $noMarginBottom>
                         <UserInterfaceSettingsButton />
+                        <MultihopButton />
+                        <DaitaButton />
+                        <VpnSettingsButton />
                       </Cell.Group>
-                    )}
 
+                      {showSplitTunneling && (
+                        <Cell.Group $noMarginBottom>
+                          <SplitTunnelingButton />
+                        </Cell.Group>
+                      )}
+                    </>
+                  ) : (
                     <Cell.Group $noMarginBottom>
-                      <ApiAccessMethodsButton />
+                      <UserInterfaceSettingsButton />
                     </Cell.Group>
+                  )}
 
-                    <Cell.Group $noMarginBottom>
-                      <SupportButton />
-                      <AppVersionButton />
-                    </Cell.Group>
+                  <Cell.Group $noMarginBottom>
+                    <ApiAccessMethodsButton />
+                  </Cell.Group>
 
-                    {window.env.development && (
-                      <Cell.Group $noMarginBottom>
-                        <DebugButton />
-                      </Cell.Group>
-                    )}
-                  </StyledSettingsGroups>
+                  <Cell.Group $noMarginBottom>
+                    <SupportButton />
+                    <AppVersionButton />
+                  </Cell.Group>
 
+                  {window.env.development && (
+                    <Cell.Group $noMarginBottom>
+                      <DebugButton />
+                    </Cell.Group>
+                  )}
+                </SettingsStack>
+                <Footer>
                   <QuitButton />
-                </StyledSettingsContent>
-              </StyledContent>
-            </StyledNavigationScrollbars>
+                </Footer>
+              </SettingsContent>
+            </SettingsNavigationScrollbars>
           </NavigationContainer>
         </SettingsContainer>
       </Layout>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx
index 4ca1c88fd179..f79b7944e11a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx
@@ -3,36 +3,11 @@ import styled from 'styled-components';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
 import { measurements, spacings } from './common-styles';
-import { NavigationScrollbars } from './NavigationBar';
 
 export const StyledCellIcon = styled(Cell.UntintedIcon)({
   marginRight: spacings.spacing3,
 });
 
-export const StyledNavigationScrollbars = styled(NavigationScrollbars)({
-  flex: 1,
-});
-
-export const StyledContent = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-  overflow: 'visible',
-  marginBottom: measurements.viewMargin,
-});
-
-export const StyledSettingsContent = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: spacings.spacing6,
-});
-
-export const StyledSettingsGroups = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: spacings.spacing5,
-});
-
 export const StyledQuitButton = styled(AppButton.RedButton)({
   margin: `0 ${measurements.viewMargin}`,
 });

From cefb9c4d8c08f160da13c907484208147400cfb0 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@mohlin.dev>
Date: Thu, 21 Nov 2024 09:47:28 +0100
Subject: [PATCH 4/4] Split view margin spacing into vertical and horizontal
 variant

---
 .../src/renderer/components/AccountStyles.tsx    |  2 +-
 .../src/renderer/components/Debug.tsx            |  4 ++--
 .../renderer/components/DeviceRevokedView.tsx    |  2 +-
 .../src/renderer/components/ErrorView.tsx        |  2 +-
 .../components/ExpiredAccountAddTime.tsx         |  2 +-
 .../components/ExpiredAccountErrorViewStyles.tsx |  2 +-
 .../src/renderer/components/Launch.tsx           |  4 ++--
 .../src/renderer/components/Layout.tsx           | 16 +++++++++++++---
 .../src/renderer/components/LoginStyles.tsx      |  2 +-
 .../renderer/components/ProblemReportStyles.tsx  |  2 +-
 .../src/renderer/components/Settings.tsx         | 12 ++++++++----
 .../src/renderer/components/SettingsImport.tsx   |  4 ++--
 .../src/renderer/components/SettingsStyles.tsx   |  7 +------
 .../components/SplitTunnelingSettingsStyles.tsx  |  6 +++---
 .../src/renderer/components/TooManyDevices.tsx   |  4 ++--
 .../src/renderer/components/cell/Footer.tsx      |  4 ++--
 .../src/renderer/components/cell/Row.tsx         |  4 ++--
 .../renderer/components/cell/SettingsGroup.tsx   |  2 +-
 .../src/renderer/components/cell/SettingsRow.tsx |  4 ++--
 .../src/renderer/components/cell/SideButton.tsx  |  4 ++--
 .../src/renderer/components/common-styles.ts     |  3 ++-
 .../components/select-location/CustomLists.tsx   |  4 ++--
 22 files changed, 53 insertions(+), 43 deletions(-)

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx
index f3ba25c86a11..228dd179dc93 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx
@@ -16,7 +16,7 @@ export const AccountRows = styled.div({
 });
 
 export const AccountRow = styled.div({
-  padding: `0 ${measurements.viewMargin}`,
+  padding: `0 ${measurements.horizontalViewMargin}`,
   marginBottom: measurements.rowVerticalMargin,
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
index 58e446be4765..0b4d24cbfbe5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { useHistory } from '../lib/history';
 import { useBoolean } from '../lib/utility-hooks';
 import * as AppButton from './AppButton';
-import { measurements } from './common-styles';
+import { measurements, spacings } from './common-styles';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
 import {
@@ -24,7 +24,7 @@ const StyledContent = styled.div({
 });
 
 const StyledButtonGroup = styled.div({
-  margin: measurements.viewMargin,
+  margin: `${spacings.spacing6} ${measurements.horizontalViewMargin}`,
 });
 
 export default function Debug() {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
index dd6abbf37649..c591c816f48e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
@@ -30,7 +30,7 @@ export const StyledBody = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  padding: `0 ${measurements.viewMargin}`,
+  padding: `0 ${measurements.horizontalViewMargin}`,
 });
 
 export const StyledStatusIcon = styled.div({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
index fead788c2491..08ed7b09622f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
@@ -35,7 +35,7 @@ const Subtitle = styled.span({
   fontFamily: 'Open Sans',
   fontSize: '14px',
   lineHeight: '20px',
-  margin: `0 ${measurements.viewMargin}`,
+  margin: `0 ${measurements.horizontalViewMargin}`,
   color: colors.white40,
   textAlign: 'center',
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
index 8dd48d44d0cc..2433a29644d8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -46,7 +46,7 @@ export const StyledBody = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  padding: `0 ${measurements.viewMargin}`,
+  padding: `0 ${measurements.horizontalViewMargin}`,
   paddingBottom: 'auto',
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
index 53450a41ee7c..f41178a62760 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
@@ -40,7 +40,7 @@ export const StyledBody = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  padding: `0 ${measurements.viewMargin}`,
+  padding: `0 ${measurements.horizontalViewMargin}`,
 });
 
 export const StyledTitle = styled.span(hugeText, {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx
index 7a8f75bc9c6c..716998e6d064 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx
@@ -9,7 +9,7 @@ import { RoutePath } from '../lib/routes';
 import { useBoolean } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
 import * as AppButton from './AppButton';
-import { measurements, tinyText } from './common-styles';
+import { measurements, spacings, tinyText } from './common-styles';
 import ErrorView from './ErrorView';
 import { Footer } from './Layout';
 import { ModalAlert, ModalMessage, ModalMessageList } from './Modal';
@@ -28,7 +28,7 @@ export default function Launch() {
 
 const StyledFooter = styled(Footer)({
   backgroundColor: colors.blue,
-  padding: `0 14px ${measurements.viewMargin}`,
+  padding: `0 14px ${spacings.spacing6}`,
   transition: 'opacity 250ms ease-in-out',
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
index 3f11f080ef1f..fa82833e692a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
@@ -37,7 +37,7 @@ export const SettingsContent = styled.div({
   flexDirection: 'column',
   flex: 1,
   overflow: 'visible',
-  marginBottom: measurements.viewMargin,
+  marginBottom: measurements.verticalViewMargin,
 });
 
 export const SettingsStack = styled.div({
@@ -50,8 +50,18 @@ export const Footer = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 0,
-  padding: measurements.viewMargin,
+  padding: `${spacings.spacing6} ${measurements.horizontalViewMargin} ${measurements.verticalViewMargin}`,
   [`${SettingsContent} &&`]: {
-    paddingBottom: 0,
+    marginBottom: 0,
+  },
+});
+
+export const ButtonStack = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacings.spacing5,
+  margin: `0 ${spacings.spacing6}`,
+  [`${Footer} &&`]: {
+    margin: `0 ${spacings.spacing3}`,
   },
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
index 4a597b07b336..1312b1d33314 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
@@ -99,7 +99,7 @@ export const StyledLoginForm = styled.div({
   flex: '0 1 225px',
   flexDirection: 'column',
   overflow: 'visible',
-  padding: `0 ${measurements.viewMargin}`,
+  padding: `0 ${measurements.horizontalViewMargin}`,
 });
 
 interface IStyledAccountInputGroupProps {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx
index 4b32c3fd5353..26a70fe242fc 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx
@@ -20,7 +20,7 @@ export const StyledForm = styled.div({
   display: 'flex',
   flex: 1,
   flexDirection: 'column',
-  margin: `0 ${measurements.viewMargin}`,
+  margin: `0 ${measurements.horizontalViewMargin}`,
 });
 
 export const StyledFormEmailRow = styled.div({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
index 5ac97d72842c..4c79f0225cc7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
@@ -7,9 +7,11 @@ import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { useSelector } from '../redux/store';
+import { RedButton } from './AppButton';
 import * as Cell from './cell';
 import { BackAction } from './KeyboardNavigation';
 import {
+  ButtonStack,
   Footer,
   Layout,
   SettingsContainer,
@@ -19,7 +21,7 @@ import {
 } from './Layout';
 import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
-import { StyledCellIcon, StyledQuitButton } from './SettingsStyles';
+import { StyledCellIcon } from './SettingsStyles';
 
 export default function Support() {
   const history = useHistory();
@@ -91,7 +93,9 @@ export default function Support() {
                   )}
                 </SettingsStack>
                 <Footer>
-                  <QuitButton />
+                  <ButtonStack>
+                    <QuitButton />
+                  </ButtonStack>
                 </Footer>
               </SettingsContent>
             </SettingsNavigationScrollbars>
@@ -278,10 +282,10 @@ function QuitButton() {
   const tunnelState = useSelector((state) => state.connection.status);
 
   return (
-    <StyledQuitButton onClick={quit}>
+    <RedButton onClick={quit}>
       {tunnelState.state === 'disconnected'
         ? messages.gettext('Quit')
         : messages.gettext('Disconnect & quit')}
-    </StyledQuitButton>
+    </RedButton>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
index 8fefbedf20e8..a9777defafb9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
@@ -41,7 +41,7 @@ const Content = styled.div({
 });
 
 const StyledSmallButtonGrid = styled(SmallButtonGrid)({
-  margin: `0 ${measurements.viewMargin}`,
+  margin: `0 ${measurements.horizontalViewMargin}`,
 });
 
 type ImportStatus = { successful: boolean } & ({ type: 'file'; name: string } | { type: 'text' });
@@ -221,7 +221,7 @@ export default function SettingsImport() {
 const StyledStatusContainer = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  margin: `18px ${measurements.viewMargin}`,
+  margin: `18px ${measurements.horizontalViewMargin}`,
 });
 
 const StyledStatusTitle = styled.div(normalText, {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx
index f79b7944e11a..55915945f45c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx
@@ -1,13 +1,8 @@
 import styled from 'styled-components';
 
-import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { measurements, spacings } from './common-styles';
+import { spacings } from './common-styles';
 
 export const StyledCellIcon = styled(Cell.UntintedIcon)({
   marginRight: spacings.spacing3,
 });
-
-export const StyledQuitButton = styled(AppButton.RedButton)({
-  margin: `0 ${measurements.viewMargin}`,
-});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index a2019fba8dcc..0f7d4b616694 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -90,7 +90,7 @@ export const StyledListContainer = styled.div({
 });
 
 export const StyledBrowseButton = styled(AppButton.BlueButton)({
-  margin: `0 ${measurements.viewMargin} ${measurements.viewMargin}`,
+  margin: `0 ${measurements.horizontalViewMargin} ${measurements.verticalViewMargin}`,
 });
 
 export const StyledCellContainer = styled(Cell.Container)({
@@ -119,8 +119,8 @@ export const StyledHeaderTitle = styled(HeaderTitle)({
 });
 
 export const StyledSearchBar = styled(SearchBar)({
-  marginLeft: measurements.viewMargin,
-  marginRight: measurements.viewMargin,
+  marginLeft: measurements.horizontalViewMargin,
+  marginRight: measurements.horizontalViewMargin,
   marginBottom: measurements.buttonVerticalMargin,
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
index 3e636bcb444e..42c5a61373d2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
@@ -48,7 +48,7 @@ const StyledStatusIcon = styled.div({
 
 const StyledTitle = styled.span(bigText, {
   lineHeight: '38px',
-  margin: `0 ${measurements.viewMargin} 8px`,
+  margin: `0 ${measurements.horizontalViewMargin} 8px`,
   color: colors.white,
 });
 
@@ -58,7 +58,7 @@ const StyledLabel = styled.span({
   fontWeight: 600,
   lineHeight: '20px',
   color: colors.white,
-  margin: `0 ${measurements.viewMargin} 18px`,
+  margin: `0 ${measurements.horizontalViewMargin} 18px`,
 });
 
 const StyledSpacer = styled.div({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
index 3a32029445d4..8d5391c0023a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 
 import { colors } from '../../../config.json';
-import { measurements, spacings, tinyText } from '../common-styles';
+import { spacings, tinyText } from '../common-styles';
 
 export const CellFooter = styled.div({
-  margin: `${spacings.spacing1} ${measurements.viewMargin} 0px`,
+  margin: `${spacings.spacing1} ${spacings.spacing6} 0px`,
 });
 
 export const CellFooterText = styled.span(tinyText, {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx
index 9aca25d3a003..16807bee46b5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx
@@ -16,8 +16,8 @@ export const Row = styled.div.withConfig({
   alignItems: 'center',
   backgroundColor: colors.blue,
   minHeight: measurements.rowMinHeight,
-  paddingLeft: measurements.viewMargin,
-  paddingRight: measurements.viewMargin,
+  paddingLeft: measurements.horizontalViewMargin,
+  paddingRight: measurements.horizontalViewMargin,
   marginBottom: '1px',
   [`${Group} > &&:last-child`]: {
     marginBottom: props.includeMarginBottomOnLast ? '1px' : '0px',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx
index 7ca8d0dff1c8..c1b9ac80d1a9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx
@@ -16,7 +16,7 @@ const StyledTitle = styled.h2(tinyText, {
   display: 'flex',
   alignItems: 'center',
   color: colors.white80,
-  margin: `0 ${measurements.viewMargin} 8px`,
+  margin: `0 ${measurements.horizontalViewMargin} 8px`,
   lineHeight: '17px',
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx
index f242106c9237..04f809a14490 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx
@@ -11,7 +11,7 @@ const StyledSettingsRow = styled.label<{ $invalid: boolean }>((props) => ({
   display: 'flex',
   alignItems: 'center',
 
-  margin: `0 ${measurements.viewMargin} ${measurements.rowVerticalMargin}`,
+  margin: `0 ${measurements.horizontalViewMargin} ${measurements.rowVerticalMargin}`,
   padding: '0 8px',
   minHeight: '36px',
   backgroundColor: colors.blue60,
@@ -59,7 +59,7 @@ const StyledInputContainer = styled.div({
 const StyledSettingsRowErrorMessage = styled.div(tinyText, {
   display: 'flex',
   alignItems: 'center',
-  marginLeft: measurements.viewMargin,
+  marginLeft: measurements.horizontalViewMargin,
   marginTop: '5px',
   color: colors.white60,
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx
index 6c30922b5f94..aa87af11b600 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx
@@ -7,8 +7,8 @@ import { buttonColor, ButtonColors } from './styles';
 export const SideButton = styled.button<ButtonColors>(buttonColor, {
   position: 'relative',
   alignSelf: 'stretch',
-  paddingLeft: measurements.viewMargin,
-  paddingRight: measurements.viewMargin,
+  paddingLeft: measurements.horizontalViewMargin,
+  paddingRight: measurements.horizontalViewMargin,
   border: 0,
 
   '&&::before': {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
index 50ad994996e9..f6757f14faa3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
@@ -81,7 +81,8 @@ export const spacings = {
 
 export const measurements = {
   rowMinHeight: spacings.spacing9,
-  viewMargin: spacings.spacing6,
+  horizontalViewMargin: spacings.spacing5,
+  verticalViewMargin: spacings.spacing6,
   rowVerticalMargin: spacings.spacing6,
   buttonVerticalMargin: spacings.spacing5,
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx
index 1f4c77ed6bb3..56e263586672 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx
@@ -27,7 +27,7 @@ const StyledInputContainer = styled.div({
   alignItems: 'center',
   flex: 1,
   backgroundColor: colors.blue,
-  paddingLeft: measurements.viewMargin,
+  paddingLeft: measurements.horizontalViewMargin,
   height: measurements.rowMinHeight,
 });
 
@@ -35,7 +35,7 @@ const StyledHeaderLabel = styled(Cell.Label)({
   display: 'block',
   flex: 1,
   backgroundColor: colors.blue,
-  paddingLeft: measurements.viewMargin,
+  paddingLeft: measurements.horizontalViewMargin,
   margin: 0,
   height: measurements.rowMinHeight,
   lineHeight: measurements.rowMinHeight,