diff options
15 files changed, 63 insertions, 65 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx index 0036876bb4..cf1c413f6b 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx @@ -4,12 +4,12 @@ import { colors } from '../../config.json'; import { messages } from '../../shared/gettext'; import { useAppContext } from '../context'; import { useSelector } from '../redux/store'; +import { AppMainHeader } from './app-main-header'; import * as AppButton from './AppButton'; import { bigText, measurements, smallText } from './common-styles'; import CustomScrollbars from './CustomScrollbars'; import ImageView from './ImageView'; import { Container, Footer, Layout } from './Layout'; -import { MainHeader } from './main-header'; export const StyledCustomScrollbars = styled(CustomScrollbars)({ flex: 1, @@ -54,10 +54,10 @@ export function DeviceRevokedView() { return ( <Layout> - <MainHeader variant="basedOnConnectionStatus" size="basedOnLoginStatus"> - <MainHeader.AccountButton /> - <MainHeader.SettingsButton /> - </MainHeader> + <AppMainHeader variant="basedOnConnectionStatus" size="basedOnLoginStatus"> + <AppMainHeader.AccountButton /> + <AppMainHeader.SettingsButton /> + </AppMainHeader> <StyledCustomScrollbars fillContainer> <StyledContainer> <StyledBody> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx index edd4f78c7a..647dc78b4a 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx @@ -2,10 +2,10 @@ import React from 'react'; import styled from 'styled-components'; import { colors } from '../../config.json'; +import { AppMainHeader } from './app-main-header'; import { measurements } from './common-styles'; import ImageView from './ImageView'; import { Container, Layout } from './Layout'; -import { MainHeader } from './main-header'; const StyledContainer = styled(Container)({ flex: 1, @@ -56,9 +56,9 @@ interface ErrorViewProps { export default function ErrorView(props: ErrorViewProps) { return ( <Layout> - <MainHeader logoVariant="none"> - {!props.settingsUnavailable && <MainHeader.SettingsButton />} - </MainHeader> + <AppMainHeader logoVariant="none"> + {!props.settingsUnavailable && <AppMainHeader.SettingsButton />} + </AppMainHeader> <StyledContainer> <StyledContent> <Logo height={106} width={106} source="logo-icon" /> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx index e15709275f..df154e628b 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx @@ -14,13 +14,13 @@ import { generateRoutePath } from '../lib/routeHelpers'; import { RoutePath } from '../lib/routes'; import account from '../redux/account/actions'; import { useSelector } from '../redux/store'; +import { AppMainHeader } from './app-main-header'; import * as AppButton from './AppButton'; import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup'; import { hugeText, measurements, tinyText } from './common-styles'; import CustomScrollbars from './CustomScrollbars'; import ImageView from './ImageView'; import { Container, Footer, Layout } from './Layout'; -import { MainHeader } from './main-header'; import { RedeemVoucherContainer, RedeemVoucherInput, @@ -259,12 +259,12 @@ function HeaderBar() { ); return ( - <MainHeader + <AppMainHeader variant={isNewAccount ? 'default' : 'basedOnConnectionStatus'} size="basedOnLoginStatus"> - <MainHeader.AccountButton /> - <MainHeader.SettingsButton /> - </MainHeader> + <AppMainHeader.AccountButton /> + <AppMainHeader.SettingsButton /> + </AppMainHeader> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx index 2c95936a4d..744632c6ed 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx @@ -9,6 +9,7 @@ import { useAppContext } from '../context'; import { useHistory } from '../lib/history'; import { RoutePath } from '../lib/routes'; import { useSelector } from '../redux/store'; +import { AppMainHeader } from './app-main-header'; import * as AppButton from './AppButton'; import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup'; import * as Cell from './cell'; @@ -28,7 +29,6 @@ import { } from './ExpiredAccountErrorViewStyles'; import ImageView from './ImageView'; import { Footer, Layout } from './Layout'; -import { MainHeader } from './main-header'; import { ModalAlert, ModalAlertType, ModalMessage } from './Modal'; enum RecoveryAction { @@ -67,12 +67,12 @@ function ExpiredAccountErrorViewComponent() { return ( <Layout> - <MainHeader + <AppMainHeader variant={isNewAccount ? 'default' : 'basedOnConnectionStatus'} size="basedOnLoginStatus"> - <MainHeader.AccountButton /> - <MainHeader.SettingsButton /> - </MainHeader> + <AppMainHeader.AccountButton /> + <AppMainHeader.SettingsButton /> + </AppMainHeader> <StyledCustomScrollbars fillContainer> <StyledContainer> <StyledBody>{isNewAccount ? <WelcomeView /> : <Content />}</StyledBody> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx index 37f8cc9d48..08e11b7628 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx @@ -12,6 +12,7 @@ import accountActions from '../redux/account/actions'; import { LoginState } from '../redux/account/reducers'; import { useSelector } from '../redux/store'; import Accordion from './Accordion'; +import { AppMainHeader } from './app-main-header'; import * as AppButton from './AppButton'; import { AriaControlGroup, AriaControlled, AriaControls } from './AriaGroup'; import ImageView from './ImageView'; @@ -40,7 +41,6 @@ import { StyledTitle, StyledTopInfo, } from './LoginStyles'; -import { MainHeader } from './main-header'; export default function LoginContainer() { const { openUrl, login, clearAccountHistory, createNewAccount } = useAppContext(); @@ -126,9 +126,9 @@ class Login extends React.Component<IProps, IState> { return ( <Layout> - <MainHeader> - <MainHeader.SettingsButton disabled={!allowInteraction} /> - </MainHeader> + <AppMainHeader> + <AppMainHeader.SettingsButton disabled={!allowInteraction} /> + </AppMainHeader> <Container> <StyledTopInfo> {this.props.showBlockMessage ? <BlockMessage /> : this.getStatusIcon()} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx index 17adb8c0f2..23a5d68b34 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx @@ -13,6 +13,7 @@ import { formatHtml } from '../lib/html-formatter'; import { RoutePath } from '../lib/routes'; import { useBoolean } from '../lib/utility-hooks'; import { useSelector } from '../redux/store'; +import { AppMainHeader } from './app-main-header'; import * as AppButton from './AppButton'; import * as Cell from './cell'; import { bigText, measurements, normalText, tinyText } from './common-styles'; @@ -20,7 +21,6 @@ import CustomScrollbars from './CustomScrollbars'; import ImageView from './ImageView'; import { Footer, Layout, SettingsContainer } from './Layout'; import List from './List'; -import { MainHeader } from './main-header'; import { ModalAlert, ModalAlertType, ModalContainer, ModalMessage } from './Modal'; const StyledCustomScrollbars = styled(CustomScrollbars)({ @@ -124,9 +124,9 @@ export default function TooManyDevices() { return ( <ModalContainer> <Layout> - <MainHeader> - <MainHeader.SettingsButton /> - </MainHeader> + <AppMainHeader> + <AppMainHeader.SettingsButton /> + </AppMainHeader> <StyledCustomScrollbars fillContainer> <StyledContainer> <StyledBody> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-header/MainHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/AppMainHeader.tsx index b3d2d7f676..cae1bf4336 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-header/MainHeader.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/AppMainHeader.tsx @@ -1,12 +1,12 @@ import { TunnelState } from '../../../shared/daemon-rpc-types'; -import { Flex, Header, HeaderProps, Logo, LogoProps } from '../../lib/components'; +import { Flex, HeaderProps, Logo, LogoProps, MainHeader } from '../../lib/components'; import { Spacings } from '../../lib/foundations'; import { useSelector } from '../../redux/store'; import { FocusFallback } from '../Focus'; import { - MainHeaderBarAccountButton, - MainHeaderDeviceInfo, - MainHeaderSettingsButton, + AppMainHeaderBarAccountButton, + AppMainHeaderDeviceInfo, + AppMainHeaderSettingsButton, } from './components'; export interface MainHeaderProps extends Omit<HeaderProps, 'variant' | 'size'> { @@ -16,7 +16,7 @@ export interface MainHeaderProps extends Omit<HeaderProps, 'variant' | 'size'> { children?: React.ReactNode; } -const MainHeader = ({ +const AppMainHeader = ({ logoVariant = 'both', variant: variantProp, size: sizeProp, @@ -34,30 +34,30 @@ const MainHeader = ({ const size = sizeProp === 'basedOnLoginStatus' ? (loggedIn ? '2' : '1') : sizeProp; return ( - <Header variant={variant} size={size} {...props}> - <Header.MainRow> + <MainHeader variant={variant} size={size} {...props}> + <Flex $justifyContent="space-between"> <FocusFallback> {logoVariant !== 'none' ? <Logo variant={logoVariant} /> : <div />} </FocusFallback> <Flex $gap={Spacings.spacing5} $alignItems="center"> {children} </Flex> - </Header.MainRow> + </Flex> {size == '2' && ( - <Header.SubRow> - <MainHeaderDeviceInfo /> - </Header.SubRow> + <Flex $alignItems="flex-end"> + <AppMainHeaderDeviceInfo /> + </Flex> )} - </Header> + </MainHeader> ); }; -const MainHeaderNamespace = Object.assign(MainHeader, { - AccountButton: MainHeaderBarAccountButton, - SettingsButton: MainHeaderSettingsButton, +const AppMainHeaderNamespace = Object.assign(AppMainHeader, { + AccountButton: AppMainHeaderBarAccountButton, + SettingsButton: AppMainHeaderSettingsButton, }); -export { MainHeaderNamespace as MainHeader }; +export { AppMainHeaderNamespace as AppMainHeader }; const getVariantByTunnelState = (tunnelState: TunnelState): HeaderProps['variant'] => { switch (tunnelState.state) { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-header/components/MainHeaderAccountButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderAccountButton.tsx index b7a440a9d4..f66ba6d17f 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-header/components/MainHeaderAccountButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderAccountButton.tsx @@ -1,14 +1,14 @@ import { useCallback } from 'react'; import { messages } from '../../../../shared/gettext'; -import { IconButton, IconButtonProps } from '../../../lib/components'; +import { IconButtonProps, MainHeader } from '../../../lib/components'; import { transitions, useHistory } from '../../../lib/history'; import { RoutePath } from '../../../lib/routes'; import { useSelector } from '../../../redux/store'; export type MainHeaderBarAccountButtonProps = Omit<IconButtonProps, 'icon'>; -export const MainHeaderBarAccountButton = (props: MainHeaderBarAccountButtonProps) => { +export const AppMainHeaderBarAccountButton = (props: MainHeaderBarAccountButtonProps) => { const history = useHistory(); const openAccount = useCallback( () => history.push(RoutePath.account, { transition: transitions.show }), @@ -21,9 +21,8 @@ export const MainHeaderBarAccountButton = (props: MainHeaderBarAccountButtonProp } return ( - <IconButton + <MainHeader.IconButton icon="icon-account" - variant="secondary" onClick={openAccount} data-testid="account-button" aria-label={messages.gettext('Account settings')} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-header/components/MainHeaderDeviceInfo.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx index 4bf2b6a142..d13e486455 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-header/components/MainHeaderDeviceInfo.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx @@ -4,8 +4,8 @@ import styled from 'styled-components'; import { closeToExpiry, formatRemainingTime, hasExpired } from '../../../../shared/account-expiry'; import { messages } from '../../../../shared/gettext'; import { capitalizeEveryWord } from '../../../../shared/string-helpers'; -import { FootnoteMini } from '../../../lib/components'; -import { Colors } from '../../../lib/foundations'; +import { Flex, FootnoteMini } from '../../../lib/components'; +import { Colors, Spacings } from '../../../lib/foundations'; import { useSelector } from '../../../redux/store'; const StyledTimeLeftLabel = styled(FootnoteMini)({ @@ -18,7 +18,7 @@ const StyledDeviceLabel = styled(FootnoteMini)({ textOverflow: 'ellipsis', }); -export const MainHeaderDeviceInfo = () => { +export const AppMainHeaderDeviceInfo = () => { const deviceName = useSelector((state) => state.account.deviceName); const accountExpiry = useSelector((state) => state.account.expiry); const isOutOfTime = accountExpiry ? hasExpired(accountExpiry) : false; @@ -29,7 +29,7 @@ export const MainHeaderDeviceInfo = () => { : ''; return ( - <> + <Flex $gap={Spacings.spacing6} $margin={{ top: Spacings.spacing1 }}> <StyledDeviceLabel color={Colors.white80}> {sprintf( // TRANSLATORS: A label that will display the newly created device name to inform the user @@ -49,6 +49,6 @@ export const MainHeaderDeviceInfo = () => { })} </StyledTimeLeftLabel> )} - </> + </Flex> ); }; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-header/components/MainHeaderSettingsButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx index fa2b1f1c5f..d738f502a3 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-header/components/MainHeaderSettingsButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx @@ -1,13 +1,13 @@ import { useCallback } from 'react'; import { messages } from '../../../../shared/gettext'; -import { IconButton, IconButtonProps } from '../../../lib/components'; +import { IconButtonProps, MainHeader } from '../../../lib/components'; import { transitions, useHistory } from '../../../lib/history'; import { RoutePath } from '../../../lib/routes'; export type MainHeaderSettingsButtonProps = Omit<IconButtonProps, 'icon'>; -export function MainHeaderSettingsButton(props: MainHeaderSettingsButtonProps) { +export function AppMainHeaderSettingsButton(props: MainHeaderSettingsButtonProps) { const history = useHistory(); const openSettings = useCallback(() => { @@ -17,9 +17,8 @@ export function MainHeaderSettingsButton(props: MainHeaderSettingsButtonProps) { }, [history, props.disabled]); return ( - <IconButton + <MainHeader.IconButton icon="icon-settings" - variant="secondary" onClick={openSettings} aria-label={messages.gettext('Settings')} /> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/index.ts new file mode 100644 index 0000000000..2ad145e283 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/index.ts @@ -0,0 +1,3 @@ +export * from './AppMainHeaderDeviceInfo'; +export * from './AppMainHeaderAccountButton'; +export * from './AppMainHeaderSettingsButton'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/index.ts new file mode 100644 index 0000000000..a4b73cc7c3 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/index.ts @@ -0,0 +1 @@ +export * from './AppMainHeader'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-header/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/main-header/components/index.ts deleted file mode 100644 index 9ff843a82c..0000000000 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-header/components/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './MainHeaderDeviceInfo'; -export * from './MainHeaderAccountButton'; -export * from './MainHeaderSettingsButton'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-header/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/main-header/index.ts deleted file mode 100644 index 3d8a1927af..0000000000 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-header/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './MainHeader'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/MainView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/MainView.tsx index f658f37bb4..06a4ec8e69 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/MainView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/MainView.tsx @@ -1,9 +1,9 @@ import styled from 'styled-components'; import { useSelector } from '../../redux/store'; +import { AppMainHeader } from '../app-main-header'; import ImageView from '../ImageView'; import { Container, Layout } from '../Layout'; -import { MainHeader } from '../main-header'; import Map from '../Map'; import NotificationArea from '../NotificationArea'; import ConnectionPanel from './ConnectionPanel'; @@ -49,10 +49,10 @@ export default function MainView() { return ( <Layout> - <MainHeader size="basedOnLoginStatus" variant="basedOnConnectionStatus"> - <MainHeader.AccountButton /> - <MainHeader.SettingsButton /> - </MainHeader> + <AppMainHeader size="basedOnLoginStatus" variant="basedOnConnectionStatus"> + <AppMainHeader.AccountButton /> + <AppMainHeader.SettingsButton /> + </AppMainHeader> <StyledContainer> <Map /> <Content> |