Refactor ManualDownload from Button to Link

- Convert from button to link
- Update copy

4 files changed, 28 insertions, 33 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/ManualDownloadLink.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/ManualDownloadLink.tsx
index 49fffaadad..d690393938 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/ManualDownloadLink.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/ManualDownloadLink.tsx
@@ -1,21 +1,24 @@
 import { messages } from '../../../../../../../../../../shared/gettext';
-import { Button } from '../../../../../../../../../lib/components';
-import { useHandleClick } from './hooks';
+import { ExternalLink } from '../../../../../../../../../components/ExternalLink';
+import { useDownloadUrl } from './hooks';
 
 export function ManualDownloadLink() {
-  const handleClick = useHandleClick();
+  const downloadUrl = useDownloadUrl();
 
   return (
-    <Button
-      aria-description={messages.pgettext('accessibility', 'Opens externally')}
-      onClick={handleClick}>
-      <Button.Text>
-        {
-          // TRANSLATORS: Button text to manually download the update
-          messages.pgettext('app-upgrade-view', 'Manual download')
-        }
-      </Button.Text>
-      <Button.Icon icon="external" />
-    </Button>
+    <ExternalLink variant="labelTiny" to={downloadUrl}>
+      {
+        // TRANSLATORS: Link shown to optionally manually download the update
+        // TRANSLATORS: due to repeated errors in the upgrade process.
+        messages.pgettext(
+          'app-upgrade-view',
+          'Having problems? Try downloading the app from our website',
+        )
+      }
+      <ExternalLink.Icon
+        aria-description={messages.pgettext('accessibility', 'Opens externally')}
+        icon="external"
+      />
+    </ExternalLink>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/hooks/index.ts
index ea402d648a..0da77deb69 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/hooks/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/hooks/index.ts
@@ -1 +1 @@
-export * from './useHandleClick';
+export * from './useDownloadUrl';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/hooks/useDownloadUrl.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/hooks/useDownloadUrl.ts
new file mode 100644
index 0000000000..899cec66f4
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/hooks/useDownloadUrl.ts
@@ -0,0 +1,10 @@
+import { getDownloadUrl } from '../../../../../../../../../../../shared/version';
+import { useVersionSuggestedIsBeta } from '../../../../../../../../../../redux/hooks';
+
+export const useDownloadUrl = () => {
+  const { suggestedIsBeta } = useVersionSuggestedIsBeta();
+
+  const downloadUrl = getDownloadUrl(suggestedIsBeta);
+
+  return downloadUrl;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/hooks/useHandleClick.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/hooks/useHandleClick.ts
deleted file mode 100644
index 8fd9d4e27e..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/hooks/useHandleClick.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useCallback } from 'react';
-
-import { getDownloadUrl } from '../../../../../../../../../../../shared/version';
-import { useAppContext } from '../../../../../../../../../../context';
-import { useVersionSuggestedIsBeta } from '../../../../../../../../../../redux/hooks';
-
-export const useHandleClick = () => {
-  const { suggestedIsBeta } = useVersionSuggestedIsBeta();
-  const { openUrl } = useAppContext();
-
-  const downloadUrl = getDownloadUrl(suggestedIsBeta);
-
-  const handleClick = useCallback(async () => {
-    await openUrl(downloadUrl);
-  }, [downloadUrl, openUrl]);
-
-  return handleClick;
-};