Rename MainHeader to AppMainHeader

mullvad · Jan 10, 2025 · 6615529 · 6615529
1 parent 69b6f95
commit 6615529
Show file tree

Hide file tree

Showing 15 changed files with 63 additions and 65 deletions.
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
@@ -9,7 +9,7 @@ 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';
+import { AppMainHeader } from './app-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
@@ -5,7 +5,7 @@ import { colors } from '../../config.json';
 import { measurements } from './common-styles';
 import ImageView from './ImageView';
 import { Container, Layout } from './Layout';
-import { MainHeader } from './main-header';
+import { AppMainHeader } from './app-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
@@ -20,7 +20,7 @@ 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 { AppMainHeader } from './app-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
@@ -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
@@ -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
@@ -13,14 +13,14 @@ 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';
 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/...rer/components/main-header/MainHeader.tsx → ...ponents/app-main-header/AppMainHeader.tsx b/...rer/components/main-header/MainHeader.tsx → ...ponents/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/...er/components/MainHeaderAccountButton.tsx → ...components/AppMainHeaderAccountButton.tsx b/...er/components/MainHeaderAccountButton.tsx → ...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/...eader/components/MainHeaderDeviceInfo.tsx → ...er/components/AppMainHeaderDeviceInfo.tsx b/...eader/components/MainHeaderDeviceInfo.tsx → ...er/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/...r/components/MainHeaderSettingsButton.tsx → ...omponents/AppMainHeaderSettingsButton.tsx b/...r/components/MainHeaderSettingsButton.tsx → ...omponents/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
@@ -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
@@ -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
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
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
@@ -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>