Use Button component in connection panel

3 files changed, 30 insertions, 50 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx
index 3129abcbb2..ef002c023d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx
@@ -1,42 +1,39 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const SIDE_BUTTON_WIDTH = 44;
+import { ButtonProps } from './common/molecules';
 
 const ButtonRow = styled.div({
   display: 'flex',
-  flexDirection: 'row',
+  gap: '1px',
 });
 
 const MainButton = styled.button({
-  display: 'flex',
-  flex: 1,
   borderTopRightRadius: 0,
   borderBottomRightRadius: 0,
+  paddingLeft: '44px',
+  '&:focus-visible': {
+    zIndex: 10,
+  },
 });
 
 const SideButton = styled.button({
-  display: 'flex',
   borderTopLeftRadius: 0,
   borderBottomLeftRadius: 0,
-  width: SIDE_BUTTON_WIDTH,
-  marginLeft: '1px !important',
+  '&:focus-visible': {
+    zIndex: 10,
+  },
 });
 
-export interface MultiButtonCompatibleProps {
-  className?: string;
-  textOffset?: number;
-}
-
-interface IMultiButtonProps {
-  mainButton: React.ComponentType<MultiButtonCompatibleProps>;
-  sideButton: React.ComponentType<MultiButtonCompatibleProps>;
+interface MultiButtonProps {
+  mainButton: React.ComponentType<ButtonProps>;
+  sideButton: React.ComponentType<ButtonProps>;
 }
 
-export function MultiButton(props: IMultiButtonProps) {
+export function MultiButton(props: MultiButtonProps) {
   return (
     <ButtonRow>
-      <MainButton as={props.mainButton} textOffset={SIDE_BUTTON_WIDTH + 1} />
+      <MainButton as={props.mainButton} />
       <SideButton as={props.sideButton} />
     </ButtonRow>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx
index 437fa93321..b0466d0d07 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx
@@ -1,15 +1,10 @@
 import { useCallback } from 'react';
-import styled from 'styled-components';
 
 import { messages } from '../../../shared/gettext';
 import log from '../../../shared/logging';
 import { useAppContext } from '../../context';
 import { useSelector } from '../../redux/store';
-import { SmallButton, SmallButtonColor } from '../SmallButton';
-
-const StyledConnectionButton = styled(SmallButton)({
-  margin: 0,
-});
+import { Button } from '../common/molecules/Button';
 
 export default function ConnectionActionButton() {
   const tunnelState = useSelector((state) => state.connection.status.state);
@@ -21,7 +16,7 @@ export default function ConnectionActionButton() {
   }
 }
 
-function ConnectButton(props: Partial<Parameters<typeof SmallButton>[0]>) {
+function ConnectButton(props: Partial<Parameters<typeof Button>[0]>) {
   const { connectTunnel } = useAppContext();
 
   const onConnect = useCallback(async () => {
@@ -34,9 +29,9 @@ function ConnectButton(props: Partial<Parameters<typeof SmallButton>[0]>) {
   }, [connectTunnel]);
 
   return (
-    <StyledConnectionButton color={SmallButtonColor.green} onClick={onConnect} {...props}>
+    <Button variant="success" size="full" onClick={onConnect} {...props}>
       {messages.pgettext('tunnel-control', 'Connect')}
-    </StyledConnectionButton>
+    </Button>
   );
 }
 
@@ -56,8 +51,8 @@ function DisconnectButton() {
   const displayAsCancel = tunnelState !== 'connected';
 
   return (
-    <StyledConnectionButton color={SmallButtonColor.red} onClick={onDisconnect}>
+    <Button variant="destructive" size="full" onClick={onDisconnect}>
       {displayAsCancel ? messages.gettext('Cancel') : messages.gettext('Disconnect')}
-    </StyledConnectionButton>
+    </Button>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx
index 50508a3192..7a6ab7d968 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useMemo } from 'react';
 import { sprintf } from 'sprintf-js';
-import styled from 'styled-components';
 
 import { ICustomList } from '../../../shared/daemon-rpc-types';
 import { messages, relayLocations } from '../../../shared/gettext';
@@ -10,17 +9,9 @@ import { transitions, useHistory } from '../../lib/history';
 import { RoutePath } from '../../lib/routes';
 import { IRelayLocationCountryRedux, RelaySettingsRedux } from '../../redux/settings/reducers';
 import { useSelector } from '../../redux/store';
+import { Button, ButtonProps } from '../common/molecules';
 import ImageView from '../ImageView';
-import { MultiButton, MultiButtonCompatibleProps } from '../MultiButton';
-import { SmallButton, SmallButtonColor } from '../SmallButton';
-
-const StyledSmallButton = styled(SmallButton)({
-  margin: 0,
-});
-
-const StyledReconnectButton = styled(StyledSmallButton)({
-  padding: '4px 8px 4px 8px',
-});
+import { MultiButton } from '../MultiButton';
 
 export default function SelectLocationButtons() {
   const tunnelState = useSelector((state) => state.connection.status.state);
@@ -32,7 +23,7 @@ export default function SelectLocationButtons() {
   }
 }
 
-function SelectLocationButton(props: MultiButtonCompatibleProps) {
+function SelectLocationButton(props: ButtonProps) {
   const { push } = useHistory();
 
   const tunnelState = useSelector((state) => state.connection.status.state);
@@ -50,8 +41,9 @@ function SelectLocationButton(props: MultiButtonCompatibleProps) {
   }, [push]);
 
   return (
-    <StyledSmallButton
-      color={SmallButtonColor.blue}
+    <Button
+      variant="primary"
+      size="full"
       onClick={onSelectLocation}
       aria-label={sprintf(
         messages.pgettext('accessibility', 'Select location. Current location is %(location)s'),
@@ -61,7 +53,7 @@ function SelectLocationButton(props: MultiButtonCompatibleProps) {
       {tunnelState === 'disconnected'
         ? selectedRelayName
         : messages.pgettext('tunnel-control', 'Switch location')}
-    </StyledSmallButton>
+    </Button>
   );
 }
 
@@ -119,7 +111,7 @@ function getRelayName(
   }
 }
 
-function ReconnectButton(props: MultiButtonCompatibleProps) {
+function ReconnectButton(props: ButtonProps) {
   const { reconnectTunnel } = useAppContext();
 
   const onReconnect = useCallback(async () => {
@@ -132,12 +124,8 @@ function ReconnectButton(props: MultiButtonCompatibleProps) {
   }, [reconnectTunnel]);
 
   return (
-    <StyledReconnectButton
-      color={SmallButtonColor.blue}
-      onClick={onReconnect}
-      aria-label={messages.gettext('Reconnect')}
-      {...props}>
+    <Button onClick={onReconnect} size="tiny" aria-label={messages.gettext('Reconnect')} {...props}>
       <ImageView height={24} width={24} source="icon-reload" tintColor="white" />
-    </StyledReconnectButton>
+    </Button>
   );
 }