Fix spacing in proxy form

mullvad · Dec 18, 2024 · 8ce81ea · 8ce81ea
1 parent c6bdff0
commit 8ce81ea
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 33 deletions.
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/EditApiAccessMethod.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/EditApiAccessMethod.tsx
@@ -16,13 +16,7 @@ import { useLastDefinedValue } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
 import { SettingsForm } from './cell/SettingsForm';
 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, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
 import { NamedProxyForm } from './ProxyForm';
@@ -114,13 +108,11 @@ function AccessMethodForm() {
                   <HeaderSubTitle>{subtitle}</HeaderSubTitle>
                 </SettingsHeader>
 
-                <SettingsStack>
-                  {id !== undefined && method === undefined ? (
-                    <span>Failed to open method</span>
-                  ) : (
-                    <NamedProxyForm proxy={method} onSave={onSave} onCancel={pop} />
-                  )}
-                </SettingsStack>
+                {id !== undefined && method === undefined ? (
+                  <span>Failed to open method</span>
+                ) : (
+                  <NamedProxyForm proxy={method} onSave={onSave} onCancel={pop} />
+                )}
 
                 <TestingDialog
                   name={updatedMethod?.name ?? ''}

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/EditCustomBridge.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/EditCustomBridge.tsx
@@ -8,13 +8,7 @@ import { useBoolean } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
 import { SettingsForm } from './cell/SettingsForm';
 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, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
 import { ProxyForm } from './ProxyForm';
@@ -84,14 +78,12 @@ function CustomBridgeForm() {
                   <HeaderTitle>{title}</HeaderTitle>
                 </SettingsHeader>
 
-                <SettingsStack>
-                  <ProxyForm
-                    proxy={bridgeSettings.custom}
-                    onSave={onSave}
-                    onCancel={pop}
-                    onDelete={bridgeSettings.custom === undefined ? undefined : showDeleteDialog}
-                  />
-                </SettingsStack>
+                <ProxyForm
+                  proxy={bridgeSettings.custom}
+                  onSave={onSave}
+                  onCancel={pop}
+                  onDelete={bridgeSettings.custom === undefined ? undefined : showDeleteDialog}
+                />
 
                 <ModalAlert
                   isOpen={deleteDialogVisible}

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ProxyForm.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ProxyForm.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import React from 'react';
+import styled from 'styled-components';
 
 import {
   CustomProxy,
@@ -156,6 +157,12 @@ interface ProxyFormButtonsProps {
   new: boolean;
 }
 
+// TODO: Temporary fix, should be replaced with a flex or shared component
+const ActionGroup = styled.div({
+  display: 'flex',
+  gap: '12px',
+});
+
 export function ProxyFormButtons(props: ProxyFormButtonsProps) {
   const { onSave, onCancel, onDelete } = useContext(proxyFormContext);
 
@@ -171,10 +178,12 @@ export function ProxyFormButtons(props: ProxyFormButtonsProps) {
           </SmallButton>
         </SmallButtonGroupStart>
       )}
-      <SmallButton onClick={onCancel}>{messages.gettext('Cancel')}</SmallButton>
-      <SmallButton onClick={onSave} disabled={!formSubmittable}>
-        {props.new ? messages.gettext('Add') : messages.gettext('Save')}
-      </SmallButton>
+      <ActionGroup>
+        <SmallButton onClick={onCancel}>{messages.gettext('Cancel')}</SmallButton>
+        <SmallButton onClick={onSave} disabled={!formSubmittable}>
+          {props.new ? messages.gettext('Add') : messages.gettext('Save')}
+        </SmallButton>
+      </ActionGroup>
     </SmallButtonGroup>
   );
 }