Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use new Button component instead of AppButton #7842

Draft
wants to merge 29 commits into
base: main
Choose a base branch
from
Draft

Use new Button component instead of AppButton #7842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
57ea884
Add Column component
olmoh Mar 17, 2025
1620b20
Add Row component
olmoh Mar 17, 2025
3cffd00
Add Id component
olmoh Mar 18, 2025
b444084
Add use exclusive task hook
olmoh Mar 18, 2025
827b415
Set ButtonIcon aria-hidden default to true
olmoh Mar 17, 2025
23b2138
Change ButtonIcon color when disabled
olmoh Mar 21, 2025
14d8af1
Replace buttons in account view with new components
olmoh Mar 17, 2025
9ce9086
Replace buttons in debug view with new components
olmoh Mar 17, 2025
450b3e3
Replace buttons in launch view with new components
olmoh Mar 17, 2025
844b95e
Replace buttons in login view with new components
olmoh Mar 17, 2025
8aae091
Replace buttons in too many devices view with new components
olmoh Mar 17, 2025
65987db
Replace buttons in device revoked view view with new components
olmoh Mar 17, 2025
f074b37
Replace buttons in voucher input view with new components
olmoh Mar 18, 2025
69e91c9
Replace buttons in time added view with new components
olmoh Mar 18, 2025
6e48318
Replace buttons in setup finished view with new components
olmoh Mar 18, 2025
8933053
Replace buttons in split tunneling settings view with new components
olmoh Mar 18, 2025
a5dde75
Replace buttons in problem report view with new components
olmoh Mar 18, 2025
51632d3
Replace buttons in filter view with new components
olmoh Mar 18, 2025
577e5c4
Replace buttons in modal component with new components
olmoh Mar 18, 2025
98f671d
Replace buttons in custom dns settings with new components
olmoh Mar 18, 2025
a2fd593
Replace buttons in notification area with new components
olmoh Mar 18, 2025
024c262
Replace buttons in custom lists with new components
olmoh Mar 18, 2025
5cfa273
Replace buttons in DeviceInfoButton with new components
olmoh Mar 18, 2025
d2925bb
Replace buttons in expired account view with new components
olmoh Mar 18, 2025
a112079
Replace buttons in NotificationBanner with new components
olmoh Mar 18, 2025
4377a20
Replace buttons in vpn settings view with new components
olmoh Mar 18, 2025
3b23afb
Replace buttons in redeem voucher view with new components
olmoh Mar 18, 2025
18535ce
Remove AppButton and related components
olmoh Mar 18, 2025
4df524c
Update translations
olmoh Mar 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion desktop/packages/mullvad-vpn/locales/messages.pot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@ msgstr ""
msgid "Filter"
msgstr ""

#. Button label for system settings.
msgid "Go to System Settings"
msgstr ""

Expand Down Expand Up @@ -365,6 +366,7 @@ msgctxt "accessibility"
msgid "New version installed, click here to see the changelog"
msgstr ""

#. Accessibility label for the button that opens the browser to buy credit.
msgctxt "accessibility"
msgid "Opens externally"
msgstr ""
Expand Down Expand Up @@ -412,6 +414,7 @@ msgctxt "account-view"
msgid "Currently unavailable"
msgstr ""

#. Button label for logging out.
msgctxt "account-view"
msgid "Log out"
msgstr ""
Expand Down Expand Up @@ -662,6 +665,7 @@ msgctxt "connect-view"
msgid "Connection details"
msgstr ""

#. Button label for disconnecting from the VPN.
msgctxt "connect-view"
msgid "Disconnect"
msgstr ""
Expand All @@ -682,6 +686,7 @@ msgctxt "connect-view"
msgid "Here’s your account number. Save it!"
msgstr ""

#. Button label for opening privacy information link.
msgctxt "connect-view"
msgid "Learn about privacy"
msgstr ""
Expand All @@ -690,6 +695,7 @@ msgctxt "connect-view"
msgid "Out of time"
msgstr ""

#. Button label for navigating to the voucher redemption view.
msgctxt "connect-view"
msgid "Redeem voucher"
msgstr ""
Expand All @@ -698,6 +704,7 @@ msgctxt "connect-view"
msgid "Remember, turning it off will allow network traffic while the VPN is disconnected until you turn it back on under Advanced settings."
msgstr ""

#. Button label for starting the app.
msgctxt "connect-view"
msgid "Start using the app"
msgstr ""
Expand Down Expand Up @@ -810,6 +817,7 @@ msgctxt "device-management"
msgid "Failed to remove device"
msgstr ""

#. Button label for navigating to login.
msgctxt "device-management"
msgid "Go to login"
msgstr ""
Expand Down Expand Up @@ -846,7 +854,7 @@ msgctxt "device-management"
msgid "Too many devices"
msgstr ""

#. Confirmation button when logging out other device.
#. Button label for confirming logout of another device.
msgctxt "device-management"
msgid "Yes, log out device"
msgstr ""
Expand Down Expand Up @@ -1010,6 +1018,7 @@ msgctxt "in-app-notifications"
msgid "Read more"
msgstr ""

#. Button label to send a problem report.
msgctxt "in-app-notifications"
msgid "Send problem report"
msgstr ""
Expand Down Expand Up @@ -1058,6 +1067,7 @@ msgctxt "launch-view"
msgid "Restarting your computer."
msgstr ""

#. Button label for problem report view.
msgctxt "launch-view"
msgid "Send problem report"
msgstr ""
Expand Down Expand Up @@ -1412,14 +1422,17 @@ msgctxt "openvpn-settings-view"
msgid "Transport protocol"
msgstr ""

#. Cancel button label for voucher redemption.
msgctxt "redeem-voucher-alert"
msgid "Cancel"
msgstr ""

#. Input field label for voucher code.
msgctxt "redeem-voucher-alert"
msgid "Enter voucher code"
msgstr ""

#. Button label for redeeming a voucher.
msgctxt "redeem-voucher-alert"
msgid "Redeem voucher"
msgstr ""
Expand All @@ -1428,6 +1441,7 @@ msgctxt "redeem-voucher-view"
msgid "An error occurred."
msgstr ""

#. Button label for voucher redemption.
msgctxt "redeem-voucher-view"
msgid "Redeem"
msgstr ""
Expand Down Expand Up @@ -1684,6 +1698,7 @@ msgctxt "split-tunneling-view"
msgid "Excluded apps"
msgstr ""

#. Button label for browsing applications with split tunneling.
msgctxt "split-tunneling-view"
msgid "Find another app"
msgstr ""
Expand All @@ -1692,6 +1707,7 @@ msgctxt "split-tunneling-view"
msgid "If it’s already running, close %(applicationName)s before launching it from here. Otherwise it might not be excluded from the VPN tunnel."
msgstr ""

#. Button label for launching an application with split tunneling.
msgctxt "split-tunneling-view"
msgid "Launch"
msgstr ""
Expand Down Expand Up @@ -1730,10 +1746,12 @@ msgctxt "support-view"
msgid "Beta program"
msgstr ""

#. Button label for continuing problem report submission with an outdated app version.
msgctxt "support-view"
msgid "Continue anyway"
msgstr ""

#. Button text to edit the message after a failed attempt to send the problem report.
msgctxt "support-view"
msgid "Edit message"
msgstr ""
Expand Down Expand Up @@ -1768,10 +1786,12 @@ msgctxt "support-view"
msgid "Report a problem"
msgstr ""

#. Button label for sending the problem report.
msgctxt "support-view"
msgid "Send"
msgstr ""

#. Button label for sending the problem report without an email address.
msgctxt "support-view"
msgid "Send anyway"
msgstr ""
Expand Down Expand Up @@ -1805,14 +1825,17 @@ msgctxt "support-view"
msgid "To help you more effectively, your app’s log file will be attached to this message. Your data will remain secure and private, as it is anonymised before being sent over an encrypted channel."
msgstr ""

#. Button label for retrying problem report submission after a failure.
msgctxt "support-view"
msgid "Try again"
msgstr ""

#. Button label for upgrading the app to the latest version.
msgctxt "support-view"
msgid "Upgrade app"
msgstr ""

#. Button label for opening app logs.
msgctxt "support-view"
msgid "View app logs"
msgstr ""
Expand Down Expand Up @@ -1993,6 +2016,7 @@ msgctxt "vpn-settings-view"
msgid "Add a server"
msgstr ""

#. Button label to add a private IP DNS server despite warning.
msgctxt "vpn-settings-view"
msgid "Add anyway"
msgstr ""
Expand Down
57 changes: 32 additions & 25 deletions desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 { Column } from '../lib/components/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 './';
Expand All @@ -19,9 +21,8 @@ import {
AccountRowValue,
DeviceRowValue,
} from './AccountStyles';
import * as AppButton from './AppButton';
import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
import DeviceInfoButton from './DeviceInfoButton';
import { Id } from './Id';
import { BackAction } from './KeyboardNavigation';
import { Footer, Layout, SettingsContainer } from './Layout';
import { RedeemVoucherButton } from './RedeemVoucher';
Expand All @@ -32,9 +33,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(), []);
Expand Down Expand Up @@ -83,29 +84,35 @@ 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>
<Column $gap="medium">
<Id>
{(iconId) => (
<Button
variant="success"
aria-describedby={iconId}
disabled={isOffline}
onClick={buyMore}>
<Button.Text>{messages.gettext('Buy more credit')}</Button.Text>
<Button.Icon
id={iconId}
icon="external"
aria-label={messages.pgettext('accessibility', 'Opens externally')}
/>
</Button>
)}
</Id>

<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>
</Column>
</Footer>
</AccountContainer>
</SettingsContainer>
Expand Down
Loading