Merge branch 'change-to-new-spacings-in-settings-view-des-1454'

28 files changed, 203 insertions, 149 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx
index f3ba25c86a..228dd179dc 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/ApiAccessMethods.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
index 68b873bd64..419be998ba 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,8 +131,8 @@ export default function ApiAccessMethods() {
                   </HeaderSubTitle>
                 </SettingsHeader>
 
-                <StyledSettingsContent>
-                  <Cell.Group>
+                <SettingsStack>
+                  <Cell.Group $noMarginBottom>
                     <ApiAccessMethod
                       method={methods.direct}
                       inUse={methods.direct.id === currentMethod?.id}
@@ -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/Debug.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
index 58e446be47..0b4d24cbfb 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 dd6abbf376..c591c816f4 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/EditApiAccessMethod.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/EditApiAccessMethod.tsx
index 8a11404b1c..ad6d154443 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 7a0ad6f8d8..5b98251c2b 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/ErrorView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
index fead788c24..08ed7b0962 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 8dd48d44d0..2433a29644 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 53450a41ee..f41178a627 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 7a8f75bc9c..f5e996d71c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx
@@ -12,8 +12,7 @@ import * as AppButton from './AppButton';
 import { measurements, tinyText } from './common-styles';
 import ErrorView from './ErrorView';
 import { Footer } from './Layout';
-import { ModalAlert, ModalMessage, ModalMessageList } from './Modal';
-import { ModalAlertType } from './Modal';
+import { ModalAlert, ModalAlertType, ModalMessage, ModalMessageList } from './Modal';
 
 export default function Launch() {
   const daemonAllowed = useSelector((state) => state.userInterface.daemonAllowed);
@@ -28,7 +27,6 @@ export default function Launch() {
 
 const StyledFooter = styled(Footer)({
   backgroundColor: colors.blue,
-  padding: `0 14px ${measurements.viewMargin}`,
   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 f104b9235f..865fc790f6 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,27 +17,55 @@ 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.verticalViewMargin,
+});
+
+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: `${spacings.spacing6} ${measurements.horizontalViewMargin} ${measurements.verticalViewMargin}`,
+  [`${SettingsContent} &&`]: {
+    paddingBottom: 0,
+  },
 });
 
 export const Spacing = styled.div<{ height: string }>((props) => ({
   height: props.height,
 }));
+
+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 4a597b07b3..1312b1d333 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 4b32c3fd53..26a70fe242 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 0a691d340f..4c79f0225c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
@@ -7,19 +7,21 @@ 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 { RedButton } from './AppButton';
 import * as Cell from './cell';
 import { BackAction } from './KeyboardNavigation';
-import { Layout, SettingsContainer } from './Layout';
+import {
+  ButtonStack,
+  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,
-} from './SettingsStyles';
+import { StyledCellIcon } from './SettingsStyles';
 
 export default function Support() {
   const history = useHistory();
@@ -47,16 +49,16 @@ export default function Support() {
               </NavigationItems>
             </NavigationBar>
 
-            <StyledNavigationScrollbars fillContainer>
-              <StyledContent>
+            <SettingsNavigationScrollbars fillContainer>
+              <SettingsContent>
                 <SettingsHeader>
                   <HeaderTitle>{messages.pgettext('navigation-bar', 'Settings')}</HeaderTitle>
                 </SettingsHeader>
 
-                <StyledSettingsContent>
+                <SettingsStack>
                   {showSubSettings ? (
                     <>
-                      <Cell.Group>
+                      <Cell.Group $noMarginBottom>
                         <UserInterfaceSettingsButton />
                         <MultihopButton />
                         <DaitaButton />
@@ -64,36 +66,39 @@ export default function Support() {
                       </Cell.Group>
 
                       {showSplitTunneling && (
-                        <Cell.Group>
+                        <Cell.Group $noMarginBottom>
                           <SplitTunnelingButton />
                         </Cell.Group>
                       )}
                     </>
                   ) : (
-                    <Cell.Group>
+                    <Cell.Group $noMarginBottom>
                       <UserInterfaceSettingsButton />
                     </Cell.Group>
                   )}
 
-                  <Cell.Group>
+                  <Cell.Group $noMarginBottom>
                     <ApiAccessMethodsButton />
                   </Cell.Group>
 
-                  <Cell.Group>
+                  <Cell.Group $noMarginBottom>
                     <SupportButton />
                     <AppVersionButton />
                   </Cell.Group>
 
                   {window.env.development && (
-                    <Cell.Group>
+                    <Cell.Group $noMarginBottom>
                       <DebugButton />
                     </Cell.Group>
                   )}
-                </StyledSettingsContent>
-              </StyledContent>
-
-              <QuitButton />
-            </StyledNavigationScrollbars>
+                </SettingsStack>
+                <Footer>
+                  <ButtonStack>
+                    <QuitButton />
+                  </ButtonStack>
+                </Footer>
+              </SettingsContent>
+            </SettingsNavigationScrollbars>
           </NavigationContainer>
         </SettingsContainer>
       </Layout>
@@ -209,7 +214,7 @@ function AppVersionButton() {
     [openUrl, suggestedIsBeta],
   );
 
-  let icon;
+  let alertIcon;
   let footer;
   if (!consistentVersion || !upToDateVersion) {
     const inconsistentVersionMessage = messages.pgettext(
@@ -224,7 +229,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 +238,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>
+    </>
   );
 }
 
@@ -281,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/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
index 47e1f47f7b..1d1a1f4e71 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/SettingsImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
index 8fefbedf20..a9777defaf 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 7a3d2c04ae..55915945f4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx
@@ -1,31 +1,8 @@
 import styled from 'styled-components';
 
-import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { measurements } from './common-styles';
-import { NavigationScrollbars } from './NavigationBar';
+import { spacings } from './common-styles';
 
 export const StyledCellIcon = styled(Cell.UntintedIcon)({
-  marginRight: '8px',
-});
-
-export const StyledNavigationScrollbars = styled(NavigationScrollbars)({
-  flex: 1,
-});
-
-export const StyledContent = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-  overflow: 'visible',
-});
-
-export const StyledSettingsContent = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-export const StyledQuitButton = styled(AppButton.RedButton)({
-  margin: measurements.viewMargin,
-  marginTop: measurements.rowVerticalMargin,
+  marginRight: spacings.spacing3,
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index 8bd7067440..a2046e61c9 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)({
@@ -124,8 +124,8 @@ export const StyledMiniTitle = styled.span({
 });
 
 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 3e636bcb44..42c5a61373 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/CellButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
index cc7a6e1015..83f73be146 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 86487c676c..8d5391c002 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 { spacings, tinyText } from '../common-styles';
 
 export const CellFooter = styled.div({
-  padding: `6px ${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/Label.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
index b2b37c1e4c..556481e50e 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': {
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 9aca25d3a0..16807bee46 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 7ca8d0dff1..c1b9ac80d1 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 f242106c92..04f809a144 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 6c30922b5f..aa87af11b6 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 98f4d803c7..18c5237843 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
@@ -70,9 +70,26 @@ 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,
+  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 1f4c77ed6b..56e2635866 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,