Use new Button in account view

2 files changed, 34 insertions, 33 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
index 5a231f1495..f932139a2b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
@@ -4,8 +4,10 @@ import { formatDate, hasExpired } from '../../shared/account-expiry';
 import { urls } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
-import { Flex, Icon } from '../lib/components';
+import { Button, Flex } from '../lib/components';
+import { FlexColumn } from '../lib/components/flex-column';
 import { useHistory } from '../lib/history';
+import { useExclusiveTask } from '../lib/hooks/use-exclusive-task';
 import { useEffectEvent } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
 import { AppNavigationHeader } from './';
@@ -19,8 +21,6 @@ import {
   AccountRowValue,
   DeviceRowValue,
 } from './AccountStyles';
-import * as AppButton from './AppButton';
-import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
 import DeviceInfoButton from './DeviceInfoButton';
 import { BackAction } from './KeyboardNavigation';
 import { Footer, Layout, SettingsContainer } from './Layout';
@@ -32,9 +32,9 @@ export default function Account() {
   const isOffline = useSelector((state) => state.connection.isBlocked);
   const { updateAccountData, openUrlWithAuth, logout } = useAppContext();
 
-  const onBuyMore = useCallback(async () => {
+  const [buyMore] = useExclusiveTask(async () => {
     await openUrlWithAuth(urls.purchase);
-  }, [openUrlWithAuth]);
+  });
 
   const onMount = useEffectEvent(() => updateAccountData());
   useEffect(() => onMount(), []);
@@ -83,29 +83,27 @@ export default function Account() {
             </AccountRows>
 
             <Footer>
-              <AppButton.ButtonGroup>
-                <AppButton.BlockingButton disabled={isOffline} onClick={onBuyMore}>
-                  <AriaDescriptionGroup>
-                    <AriaDescribed>
-                      <AppButton.GreenButton>
-                        <AppButton.Label>{messages.gettext('Buy more credit')}</AppButton.Label>
-                        <AriaDescription>
-                          <Icon
-                            icon="external"
-                            aria-label={messages.pgettext('accessibility', 'Opens externally')}
-                          />
-                        </AriaDescription>
-                      </AppButton.GreenButton>
-                    </AriaDescribed>
-                  </AriaDescriptionGroup>
-                </AppButton.BlockingButton>
+              <FlexColumn $gap="medium">
+                <Button
+                  variant="success"
+                  disabled={isOffline}
+                  onClick={buyMore}
+                  aria-description={messages.pgettext('accessibility', 'Opens externally')}>
+                  <Button.Text>{messages.gettext('Buy more credit')}</Button.Text>
+                  <Button.Icon icon="external" />
+                </Button>
 
                 <RedeemVoucherButton />
 
-                <AppButton.RedButton onClick={doLogout}>
-                  {messages.pgettext('account-view', 'Log out')}
-                </AppButton.RedButton>
-              </AppButton.ButtonGroup>
+                <Button variant="destructive" onClick={doLogout}>
+                  <Button.Text>
+                    {
+                      // TRANSLATORS: Button label for logging out.
+                      messages.pgettext('account-view', 'Log out')
+                    }
+                  </Button.Text>
+                </Button>
+              </FlexColumn>
             </Footer>
           </AccountContainer>
         </SettingsContainer>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucher.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucher.tsx
index b0d35343fa..7535b60769 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucher.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucher.tsx
@@ -6,7 +6,7 @@ import { VoucherResponse } from '../../shared/daemon-rpc-types';
 import { formatRelativeDate } from '../../shared/date-helper';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
-import { Flex, Spinner } from '../lib/components';
+import { Button, ButtonProps, Flex, Spinner } from '../lib/components';
 import { IconBadge } from '../lib/icon-badge';
 import { useSelector } from '../redux/store';
 import * as AppButton from './AppButton';
@@ -258,11 +258,9 @@ export function RedeemVoucherAlert(props: IRedeemVoucherAlertProps) {
   }
 }
 
-interface IRedeemVoucherButtonProps {
-  className?: string;
-}
+type RedeemVoucherButtonProps = ButtonProps;
 
-export function RedeemVoucherButton(props: IRedeemVoucherButtonProps) {
+export function RedeemVoucherButton(props: RedeemVoucherButtonProps) {
   const [showAlert, setShowAlert] = useState(false);
 
   const onClick = useCallback(() => setShowAlert(true), []);
@@ -270,9 +268,14 @@ export function RedeemVoucherButton(props: IRedeemVoucherButtonProps) {
 
   return (
     <>
-      <AppButton.GreenButton onClick={onClick} className={props.className}>
-        {messages.pgettext('redeem-voucher-alert', 'Redeem voucher')}
-      </AppButton.GreenButton>
+      <Button variant="success" onClick={onClick} {...props}>
+        <Button.Text>
+          {
+            // TRANSLATORS: Button label for redeeming a voucher.
+            messages.pgettext('redeem-voucher-alert', 'Redeem voucher')
+          }
+        </Button.Text>
+      </Button>
       <RedeemVoucherContainer>
         <RedeemVoucherAlert show={showAlert} onClose={onClose} />
       </RedeemVoucherContainer>