Merge branch 'change-space-between-list-items-and-buttons-des-72'

3 files changed, 56 insertions, 53 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
index af194e5ea8..bf1a2025df 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
@@ -7,7 +7,7 @@ import { AccessMethodSetting } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useApiAccessMethodTest } from '../lib/api-access-methods';
-import { Flex } from '../lib/components';
+import { Container, Flex } from '../lib/components';
 import { Spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { generateRoutePath } from '../lib/routeHelpers';
@@ -24,13 +24,7 @@ import {
 import ImageView from './ImageView';
 import InfoButton from './InfoButton';
 import { BackAction } from './KeyboardNavigation';
-import {
-  Layout,
-  SettingsContainer,
-  SettingsContent,
-  SettingsNavigationScrollbars,
-  SettingsStack,
-} from './Layout';
+import { Layout, SettingsContainer, SettingsContent, SettingsNavigationScrollbars } from './Layout';
 import { ModalAlert, ModalAlertType } from './Modal';
 import {
   NavigationBar,
@@ -40,7 +34,7 @@ import {
   TitleBarItem,
 } from './NavigationBar';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
-import { SmallButton, SmallButtonColor, SmallButtonGroup } from './SmallButton';
+import { SmallButton, SmallButtonColor } from './SmallButton';
 
 const StyledContextMenuButton = styled(Cell.Icon)({
   alignItems: 'center',
@@ -127,7 +121,7 @@ export default function ApiAccessMethods() {
                   </HeaderSubTitle>
                 </SettingsHeader>
 
-                <SettingsStack>
+                <Flex $flexDirection="column" $gap={Spacings.spacing6}>
                   <Cell.Group $noMarginBottom>
                     <ApiAccessMethod
                       method={methods.direct}
@@ -150,11 +144,10 @@ export default function ApiAccessMethods() {
                       />
                     ))}
                   </Cell.Group>
-
-                  <SmallButtonGroup $noMarginTop>
+                  <Container size="4" $flex={1} $justifyContent="flex-end">
                     <SmallButton onClick={navigateToNew}>{messages.gettext('Add')}</SmallButton>
-                  </SmallButtonGroup>
-                </SettingsStack>
+                  </Container>
+                </Flex>
               </SettingsContent>
             </SettingsNavigationScrollbars>
           </NavigationContainer>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
index a24790e66a..cab859b8c9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
@@ -10,7 +10,7 @@ import {
 } from '../../shared/application-types';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
-import { Flex, FootnoteMini } from '../lib/components';
+import { Button, Container, Flex, FootnoteMini } from '../lib/components';
 import { Colors, Spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
@@ -19,6 +19,7 @@ import { IReduxState } from '../redux/store';
 import Accordion from './Accordion';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
+import { measurements } from './common-styles';
 import { CustomScrollbarsRef } from './CustomScrollbars';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
@@ -495,42 +496,54 @@ export function SplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsPro
         <StyledSearchBar searchTerm={searchTerm} onSearch={setSearchTerm} />
       )}
 
-      <Accordion expanded={showSplitSection}>
-        <Cell.Section sectionTitle={excludedTitle}>
-          <ApplicationList
-            data-testid="split-applications"
-            applications={filteredSplitApplications}
-            rowRenderer={excludedRowRenderer}
-          />
-        </Cell.Section>
-      </Accordion>
+      <Flex
+        $flexDirection="column"
+        $gap={Spacings.spacing6}
+        $margin={{ bottom: measurements.verticalViewMargin }}>
+        <Flex $flexDirection="column" $gap={Spacings.spacing5}>
+          <Accordion expanded={showSplitSection}>
+            <Cell.Section sectionTitle={excludedTitle}>
+              <ApplicationList
+                data-testid="split-applications"
+                applications={filteredSplitApplications}
+                rowRenderer={excludedRowRenderer}
+              />
+            </Cell.Section>
+          </Accordion>
 
-      <Accordion expanded={showNonSplitSection}>
-        <Cell.Section sectionTitle={allTitle}>
-          <ApplicationList
-            data-testid="non-split-applications"
-            applications={filteredNonSplitApplications}
-            rowRenderer={includedRowRenderer}
-          />
-        </Cell.Section>
-      </Accordion>
+          <Accordion expanded={showNonSplitSection}>
+            <Cell.Section sectionTitle={allTitle}>
+              <ApplicationList
+                data-testid="non-split-applications"
+                applications={filteredNonSplitApplications}
+                rowRenderer={includedRowRenderer}
+              />
+            </Cell.Section>
+          </Accordion>
+        </Flex>
 
-      {canEditSplitTunneling && searchTerm !== '' && !showSplitSection && !showNonSplitSection && (
-        <StyledNoResult>
-          <StyledNoResultText>
-            {formatHtml(
-              sprintf(messages.gettext('No result for <b>%(searchTerm)s</b>.'), { searchTerm }),
-            )}
-          </StyledNoResultText>
-          <StyledNoResultText>{messages.gettext('Try a different search.')}</StyledNoResultText>
-        </StyledNoResult>
-      )}
+        {canEditSplitTunneling &&
+          searchTerm !== '' &&
+          !showSplitSection &&
+          !showNonSplitSection && (
+            <StyledNoResult>
+              <StyledNoResultText>
+                {formatHtml(
+                  sprintf(messages.gettext('No result for <b>%(searchTerm)s</b>.'), { searchTerm }),
+                )}
+              </StyledNoResultText>
+              <StyledNoResultText>{messages.gettext('Try a different search.')}</StyledNoResultText>
+            </StyledNoResult>
+          )}
 
-      {canEditSplitTunneling && (
-        <StyledBrowseButton onClick={addWithFilePicker}>
-          {messages.pgettext('split-tunneling-view', 'Find another app')}
-        </StyledBrowseButton>
-      )}
+        {canEditSplitTunneling && (
+          <Container size="3">
+            <Button onClick={addWithFilePicker}>
+              {messages.pgettext('split-tunneling-view', 'Find another app')}
+            </Button>
+          </Container>
+        )}
+      </Flex>
     </>
   );
 }
@@ -590,10 +603,7 @@ function ApplicationList<T extends IApplication>(props: IApplicationListProps<T>
     );
   } else {
     return (
-      <Flex
-        $flexDirection="column"
-        $margin={{ bottom: Spacings.spacing5 }}
-        data-testid={props['data-testid']}>
+      <Flex $flexDirection="column" data-testid={props['data-testid']}>
         <List
           data-testid={props['data-testid']}
           items={props.applications.sort((a, b) => a.name.localeCompare(b.name))}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index 0d6fba2591..554f2a2a11 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -85,7 +85,7 @@ export const StyledNoResult = styled(Cell.CellFooter)({
   flexDirection: 'column',
   paddingTop: 0,
   marginTop: 0,
-  marginBottom: Spacings.spacing12,
+  marginBottom: Spacings.spacing9,
 });
 
 export const StyledNoResultText = styled(Cell.CellFooterText)({