Add spacing tokens and use in settings view

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,
 });
 

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>

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() {

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({

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>

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>

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',
 });

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',
 });
 

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, {

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',
 });
 

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,51 @@ 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} &&`]: {
+    marginBottom: 0,
+  },
+});
+
+export const ButtonStack = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacings.spacing5,
+  margin: `0 ${spacings.spacing6}`,
+  [`${Footer} &&`]: {
+    margin: `0 ${spacings.spacing3}`,
+  },
 });

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 {

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({