From e705ad96965e7985c0bc0116d7bb6af95e585223 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@mohlin.dev>
Date: Fri, 17 Jan 2025 14:37:43 +0100
Subject: [PATCH 1/2] Update button styles

---
 .../mullvad-vpn/src/renderer/components/InfoButton.tsx      | 6 +++---
 .../mullvad-vpn/src/renderer/components/Settings.tsx        | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx
index 7f77f115e74d..88ec8c6fce9a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx
@@ -2,8 +2,8 @@ import styled from 'styled-components';
 
 import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
+import { Button } from '../lib/components';
 import { useBoolean } from '../lib/utility-hooks';
-import * as AppButton from './AppButton';
 import ImageView from './ImageView';
 import { ModalAlert, ModalAlertType } from './Modal';
 
@@ -61,9 +61,9 @@ export default function InfoButton(props: IInfoButtonProps) {
         message={props.message}
         type={ModalAlertType.info}
         buttons={[
-          <AppButton.BlueButton key="back" onClick={hide}>
+          <Button size="full" key="back" onClick={hide}>
             {messages.gettext('Got it!')}
-          </AppButton.BlueButton>,
+          </Button>,
         ]}
         close={hide}>
         {props.children}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
index 6002a7765c66..84f9b28ebebb 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
@@ -240,7 +240,7 @@ function QuitButton() {
   const tunnelState = useSelector((state) => state.connection.status);
 
   return (
-    <Button variant="destructive" onClick={quit}>
+    <Button size="full" variant="destructive" onClick={quit}>
       {tunnelState.state === 'disconnected'
         ? messages.gettext('Quit')
         : messages.gettext('Disconnect & quit')}

From 520a533f7e2908f788f447e69f3a8e38b16dc42e Mon Sep 17 00:00:00 2001
From: Oliver <oliver@mohlin.dev>
Date: Fri, 17 Jan 2025 14:39:04 +0100
Subject: [PATCH 2/2] Change daita info button spacing

---
 .../mullvad-vpn/src/renderer/components/DaitaSettings.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
index 264b389f8407..ca4afc34c412 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
@@ -27,6 +27,10 @@ import PageSlider from './PageSlider';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
 import { SmallButton, SmallButtonColor } from './SmallButton';
 
+const StyledInfoButton = styled(InfoButton)({
+  marginRight: Spacings.spacing5,
+});
+
 const StyledHeaderSubTitle = styled(HeaderSubTitle)({
   display: 'inline-block',
 });
@@ -185,9 +189,9 @@ function DaitaToggle() {
           <AriaLabel>
             <Cell.InputLabel>{directOnlyString}</Cell.InputLabel>
           </AriaLabel>
-          <InfoButton>
+          <StyledInfoButton>
             <DirectOnlyModalMessage />
-          </InfoButton>
+          </StyledInfoButton>
           <AriaInput>
             <Cell.Switch isOn={directOnly && !unavailable} onChange={setDirectOnly} />
           </AriaInput>