Move and rename common settings component

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 98753f3244..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,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 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/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
index f104b9235f..5114a8faef 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,25 +17,43 @@ 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,
+  },
 });
 
 export const Spacing = styled.div<{ height: string }>((props) => ({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
index 1d912952d0..5ac97d7284 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 4ca1c88fd1..f79b7944e1 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}`,
 });