Split view margin spacing into vertical and horizontal variant

22 files changed, 51 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 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/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/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 5114a8faef..865fc790f6 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,7 +50,7 @@ export const Footer = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 0,
-  padding: measurements.viewMargin,
+  padding: `${spacings.spacing6} ${measurements.horizontalViewMargin} ${measurements.verticalViewMargin}`,
   [`${SettingsContent} &&`]: {
     paddingBottom: 0,
   },
@@ -59,3 +59,13 @@ export const Footer = styled.div({
 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 5ac97d7284..4c79f0225c 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 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 f79b7944e1..55915945f4 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 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/Footer.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
index 3a32029445..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, 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 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 a4e335ca64..18c5237843 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
@@ -88,7 +88,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 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,