diff options
8 files changed, 93 insertions, 113 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/Account.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/Account.tsx index 2f51616f40..b62961c9e6 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/Account.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/Account.tsx @@ -1,21 +1,27 @@ import { useCallback, useEffect } from 'react'; +import styled from 'styled-components'; import { urls } from '../../../../shared/constants'; import { messages } from '../../../../shared/gettext'; import { useAppContext } from '../../../context'; -import { Button } from '../../../lib/components'; +import { Button, Text } from '../../../lib/components'; import { FlexColumn } from '../../../lib/components/flex-column'; +import { View } from '../../../lib/components/view'; 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 '../..'; import { BackAction } from '../../KeyboardNavigation'; -import { Footer, Layout, SettingsContainer } from '../../Layout'; +import { SettingsContainer } from '../../Layout'; import { RedeemVoucherButton } from '../../RedeemVoucher'; -import SettingsHeader, { HeaderTitle } from '../../SettingsHeader'; -import { AccountContainer, AccountRow, AccountRowLabel, AccountRows } from './AccountStyles'; -import { AccountExpiryRow, AccountNumberRow, DeviceNameRow } from './components'; +import { HeaderTitle } from '../../SettingsHeader'; +import { AccountExpiryRow, AccountNumberRow, DeviceNameRow, LabelledRow } from './components'; + +const StyledViewContainer = styled(View.Container)` + height: 100%; + justify-content: space-between; +`; export function Account() { const history = useHistory(); @@ -42,7 +48,7 @@ export function Account() { return ( <BackAction action={history.pop}> - <Layout> + <View> <SettingsContainer> <AppNavigationHeader title={ @@ -51,58 +57,51 @@ export function Account() { } /> - <AccountContainer> - <SettingsHeader> - <HeaderTitle>{messages.pgettext('account-view', 'Account')}</HeaderTitle> - </SettingsHeader> + <StyledViewContainer> + <FlexColumn $gap="medium"> + <Text variant="titleBig"> + <HeaderTitle>{messages.pgettext('account-view', 'Account')}</HeaderTitle> + </Text> - <AccountRows> - <AccountRow> - <AccountRowLabel> - {messages.pgettext('device-management', 'Device name')} - </AccountRowLabel> - <DeviceNameRow /> - </AccountRow> + <FlexColumn $gap="large"> + <LabelledRow label={messages.pgettext('device-management', 'Device name')}> + <DeviceNameRow /> + </LabelledRow> - <AccountRow> - <AccountRowLabel> - {messages.pgettext('account-view', 'Account number')} - </AccountRowLabel> - <AccountNumberRow /> - </AccountRow> + <LabelledRow label={messages.pgettext('account-view', 'Account number')}> + <AccountNumberRow /> + </LabelledRow> - <AccountRow> - <AccountRowLabel>{messages.pgettext('account-view', 'Paid until')}</AccountRowLabel> - <AccountExpiryRow /> - </AccountRow> - </AccountRows> + <LabelledRow $gap="tiny" label={messages.pgettext('account-view', 'Paid until')}> + <AccountExpiryRow /> + </LabelledRow> + </FlexColumn> + </FlexColumn> - <Footer> - <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> + <FlexColumn $gap="medium" $padding={{ bottom: 'large' }}> + <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 /> + <RedeemVoucherButton /> - <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> + <Button variant="destructive" onClick={doLogout}> + <Button.Text> + { + // TRANSLATORS: Button label for logging out. + messages.pgettext('account-view', 'Log out') + } + </Button.Text> + </Button> + </FlexColumn> + </StyledViewContainer> </SettingsContainer> - </Layout> + </View> </BackAction> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/AccountStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/AccountStyles.tsx deleted file mode 100644 index d968fb14b7..0000000000 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/AccountStyles.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import styled from 'styled-components'; - -import { colors } from '../../../lib/foundations'; -import { measurements, normalText, tinyText } from '../../common-styles'; - -export const AccountContainer = styled.div({ - display: 'flex', - flexDirection: 'column', - flex: 1, -}); - -export const AccountRows = styled.div({ - display: 'flex', - flexDirection: 'column', - flex: 1, -}); - -export const AccountRow = styled.div({ - padding: `0 ${measurements.horizontalViewMargin}`, - marginBottom: measurements.rowVerticalMargin, -}); - -const AccountRowText = styled.span({ - display: 'block', - fontFamily: 'Open Sans', -}); - -export const AccountRowLabel = styled(AccountRowText)(tinyText, { - lineHeight: '20px', - marginBottom: '5px', - color: colors.whiteAlpha60, -}); - -export const AccountRowValue = styled(AccountRowText)(normalText, { - fontWeight: 600, - color: colors.white, -}); - -export const DeviceRowValue = styled(AccountRowValue)({ - textTransform: 'capitalize', -}); - -export const AccountOutOfTime = styled(AccountRowValue)({ - color: colors.red, -}); - -export const StyledDeviceNameRow = styled.div({ - display: 'flex', - flexDirection: 'row', -}); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-number-row/AccountNumberRow.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-number-row/AccountNumberRow.tsx index 8e097a0694..a19b45d8df 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-number-row/AccountNumberRow.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-number-row/AccountNumberRow.tsx @@ -1,8 +1,10 @@ +import { Text } from '../../../../../lib/components'; import { useSelector } from '../../../../../redux/store'; import AccountNumberLabel from '../../../../AccountNumberLabel'; -import { AccountRowValue } from '../../AccountStyles'; export function AccountNumberRow() { const accountNumber = useSelector((state) => state.account.accountNumber); - return <AccountRowValue as={AccountNumberLabel} accountNumber={accountNumber || ''} />; + return ( + <Text variant="bodySmallSemibold" as={AccountNumberLabel} accountNumber={accountNumber || ''} /> + ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/device-name-row/DeviceNameRow.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/device-name-row/DeviceNameRow.tsx index 4873689992..1687fe0473 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/device-name-row/DeviceNameRow.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/device-name-row/DeviceNameRow.tsx @@ -1,14 +1,22 @@ -import { Flex } from '../../../../../lib/components'; +import styled from 'styled-components'; + +import { Flex, Text } from '../../../../../lib/components'; import { useSelector } from '../../../../../redux/store'; import DeviceInfoButton from '../../../../DeviceInfoButton'; -import { DeviceRowValue } from '../../AccountStyles'; + +const StyledText = styled(Text)` + text-transform: capitalize; +`; export function DeviceNameRow() { const deviceName = useSelector((state) => state.account.deviceName); + return ( - <Flex $gap="small" $alignItems="center"> - <DeviceRowValue>{deviceName}</DeviceRowValue> - <DeviceInfoButton /> + <Flex $justifyContent="space-between"> + <Flex $gap="small" $alignItems="center"> + <StyledText variant="bodySmallSemibold">{deviceName}</StyledText> + <DeviceInfoButton /> + </Flex> </Flex> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/formatted-account-expiry/FormattedAccountExpiry.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/formatted-account-expiry/FormattedAccountExpiry.tsx index 782643c5ba..cac89eb581 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/formatted-account-expiry/FormattedAccountExpiry.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/formatted-account-expiry/FormattedAccountExpiry.tsx @@ -1,21 +1,23 @@ import { formatDate, hasExpired } from '../../../../../../shared/account-expiry'; import { messages } from '../../../../../../shared/gettext'; -import { AccountOutOfTime, AccountRowValue } from '../../AccountStyles'; +import { Text } from '../../../../../lib/components'; export function FormattedAccountExpiry(props: { expiry?: string; locale: string }) { if (props.expiry) { if (hasExpired(props.expiry)) { return ( - <AccountOutOfTime>{messages.pgettext('account-view', 'OUT OF TIME')}</AccountOutOfTime> + <Text variant="bodySmallSemibold" color="red"> + {messages.pgettext('account-view', 'OUT OF TIME')} + </Text> ); } else { - return <AccountRowValue>{formatDate(props.expiry, props.locale)}</AccountRowValue>; + return <Text variant="bodySmallSemibold">{formatDate(props.expiry, props.locale)}</Text>; } } else { return ( - <AccountRowValue> + <Text variant="bodySmallSemibold"> {messages.pgettext('account-view', 'Currently unavailable')} - </AccountRowValue> + </Text> ); } } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/index.ts index 053c0cbbf7..bf346ef735 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/index.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/index.ts @@ -2,3 +2,4 @@ export * from './account-expiry-row'; export * from './account-number-row'; export * from './device-name-row'; export * from './formatted-account-expiry'; +export * from './labelled-row'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/labelled-row/LabelledRow.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/labelled-row/LabelledRow.tsx new file mode 100644 index 0000000000..0e60bf8872 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/labelled-row/LabelledRow.tsx @@ -0,0 +1,17 @@ +import { Text } from '../../../../../lib/components'; +import { FlexColumn, FlexColumnProps } from '../../../../../lib/components/flex-column'; + +type LabelledRowProps = FlexColumnProps & { + label?: string; +}; + +export function LabelledRow({ label, children, ...props }: LabelledRowProps) { + return ( + <FlexColumn $gap="tiny" {...props}> + <Text variant="labelTiny" color="whiteAlpha60"> + {label} + </Text> + {children} + </FlexColumn> + ); +} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/labelled-row/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/labelled-row/index.ts new file mode 100644 index 0000000000..c430a7aa77 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/labelled-row/index.ts @@ -0,0 +1 @@ +export * from './LabelledRow'; |