Add and use new header components

desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx

@@ -7,6 +7,7 @@ import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
 import { useEffectEvent } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
+import { AppNavigationHeader } from './';
 import AccountNumberLabel from './AccountNumberLabel';
 import {
   AccountContainer,
@@ -23,7 +24,6 @@ import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGrou
 import DeviceInfoButton from './DeviceInfoButton';
 import { BackAction } from './KeyboardNavigation';
 import { Footer, Layout, SettingsContainer } from './Layout';
-import { NavigationBar, NavigationItems, TitleBarItem } from './NavigationBar';
 import { RedeemVoucherButton } from './RedeemVoucher';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
@@ -49,16 +49,12 @@ export default function Account() {
     <BackAction action={history.pop}>
       <Layout>
         <SettingsContainer>
-          <NavigationBar>
-            <NavigationItems>
-              <TitleBarItem>
-                {
-                  // TRANSLATORS: Title label in navigation bar
-                  messages.pgettext('account-view', 'Account')
-                }
-              </TitleBarItem>
-            </NavigationItems>
-          </NavigationBar>
+          <AppNavigationHeader
+            title={
+              // TRANSLATORS: Title label in navigation bar
+              messages.pgettext('account-view', 'Account')
+            }
+          />
 
           <AccountContainer>
             <SettingsHeader>

desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx

@@ -14,6 +14,7 @@ import { generateRoutePath } from '../lib/routeHelpers';
 import { RoutePath } from '../lib/routes';
 import { useBoolean } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
+import { AppNavigationHeader } from './';
 import * as Cell from './cell';
 import {
   ContextMenu,
@@ -26,13 +27,7 @@ import InfoButton from './InfoButton';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer, SettingsContent, SettingsNavigationScrollbars } from './Layout';
 import { ModalAlert, ModalAlertType } from './Modal';
-import {
-  NavigationBar,
-  NavigationContainer,
-  NavigationInfoButton,
-  NavigationItems,
-  TitleBarItem,
-} from './NavigationBar';
+import { NavigationContainer } from './NavigationContainer';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
 import { SmallButton, SmallButtonColor } from './SmallButton';
 
@@ -42,7 +37,7 @@ const StyledContextMenuButton = styled(Cell.Icon)({
   marginRight: Spacings.spacing3,
 });
 
-const StyledMethodInfoButton = styled(InfoButton)({
+const StyledMethodInfoButton = styled(InfoButton).attrs({ size: 'small' })({
   marginRight: Spacings.spacing4,
 });
 
@@ -82,32 +77,28 @@ export default function ApiAccessMethods() {
       <Layout>
         <SettingsContainer>
           <NavigationContainer>
-            <NavigationBar>
-              <NavigationItems>
-                <TitleBarItem>
-                  {
-                    // TRANSLATORS: Title label in navigation bar
-                    messages.pgettext('navigation-bar', 'API access')
-                  }
-                </TitleBarItem>
-                <NavigationInfoButton
-                  message={[
-                    messages.pgettext(
-                      'api-access-methods-view',
-                      'The app needs to communicate with a Mullvad API server to log you in, fetch server lists, and other critical operations.',
-                    ),
-                    messages.pgettext(
-                      'api-access-methods-view',
-                      'On some networks, where various types of censorship are being used, the API servers might not be directly reachable.',
-                    ),
-                    messages.pgettext(
-                      'api-access-methods-view',
-                      'This feature allows you to circumvent that censorship by adding custom ways to access the API via proxies and similar methods.',
-                    ),
-                  ]}
-                />
-              </NavigationItems>
-            </NavigationBar>
+            <AppNavigationHeader
+              title={
+                // TRANSLATORS: Title label in navigation bar
+                messages.pgettext('navigation-bar', 'API access')
+              }>
+              <AppNavigationHeader.InfoButton
+                message={[
+                  messages.pgettext(
+                    'api-access-methods-view',
+                    'The app needs to communicate with a Mullvad API server to log you in, fetch server lists, and other critical operations.',
+                  ),
+                  messages.pgettext(
+                    'api-access-methods-view',
+                    'On some networks, where various types of censorship are being used, the API servers might not be directly reachable.',
+                  ),
+                  messages.pgettext(
+                    'api-access-methods-view',
+                    'This feature allows you to circumvent that censorship by adding custom ways to access the API via proxies and similar methods.',
+                  ),
+                ]}
+              />
+            </AppNavigationHeader>
 
             <SettingsNavigationScrollbars fillContainer>
               <SettingsContent>

desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx

@@ -10,19 +10,15 @@ import { Spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { useBoolean } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
+import { AppNavigationHeader } from './';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
 import InfoButton from './InfoButton';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
 import { ModalAlert, ModalAlertType, ModalMessage } from './Modal';
-import {
-  NavigationBar,
-  NavigationContainer,
-  NavigationItems,
-  NavigationScrollbars,
-  TitleBarItem,
-} from './NavigationBar';
+import { NavigationContainer } from './NavigationContainer';
+import { NavigationScrollbars } from './NavigationScrollbars';
 import PageSlider from './PageSlider';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
 import { SmallButton, SmallButtonColor } from './SmallButton';
@@ -44,11 +40,7 @@ export default function DaitaSettings() {
       <Layout>
         <SettingsContainer>
           <NavigationContainer>
-            <NavigationBar>
-              <NavigationItems>
-                <TitleBarItem>{strings.daita}</TitleBarItem>
-              </NavigationItems>
-            </NavigationBar>
+            <AppNavigationHeader title={strings.daita} />
 
             <NavigationScrollbars>
               <SettingsHeader>

desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx

@@ -4,17 +4,13 @@ import styled from 'styled-components';
 import { Spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { useBoolean } from '../lib/utility-hooks';
+import { AppNavigationHeader } from './';
 import * as AppButton from './AppButton';
 import { measurements } from './common-styles';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
-import {
-  NavigationBar,
-  NavigationContainer,
-  NavigationItems,
-  NavigationScrollbars,
-  TitleBarItem,
-} from './NavigationBar';
+import { NavigationContainer } from './NavigationContainer';
+import { NavigationScrollbars } from './NavigationScrollbars';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
 const StyledContent = styled.div({
@@ -36,11 +32,7 @@ export default function Debug() {
       <Layout>
         <SettingsContainer>
           <NavigationContainer>
-            <NavigationBar>
-              <NavigationItems>
-                <TitleBarItem>Developer tools</TitleBarItem>
-              </NavigationItems>
-            </NavigationBar>
+            <AppNavigationHeader title="Developer tools" />
 
             <NavigationScrollbars>
               <SettingsHeader>

desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx

@@ -4,17 +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 { calculateHeaderBarStyle, DefaultHeaderBar } from './HeaderBar';
 import ImageView from './ImageView';
-import { Container, Footer } from './Layout';
-import { Layout } from './Layout';
-
-export const StyledHeader = styled(DefaultHeaderBar)({
-  flex: 0,
-});
+import { Container, Footer, Layout } from './Layout';
 
 export const StyledCustomScrollbars = styled(CustomScrollbars)({
   flex: 1,
@@ -59,7 +54,10 @@ export function DeviceRevokedView() {
 
   return (
     <Layout>
-      <StyledHeader barStyle={calculateHeaderBarStyle(tunnelState)} />
+      <AppMainHeader variant="basedOnConnectionStatus" size="basedOnLoginStatus">
+        <AppMainHeader.AccountButton />
+        <AppMainHeader.SettingsButton />
+      </AppMainHeader>
       <StyledCustomScrollbars fillContainer>
         <StyledContainer>
           <StyledBody>

desktop/packages/mullvad-vpn/src/renderer/components/EditApiAccessMethod.tsx

@@ -14,11 +14,12 @@ import { useApiAccessMethodTest } from '../lib/api-access-methods';
 import { useHistory } from '../lib/history';
 import { useLastDefinedValue } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
+import { AppNavigationHeader } from './';
 import { SettingsForm } from './cell/SettingsForm';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer, SettingsContent, SettingsNavigationScrollbars } from './Layout';
 import { ModalAlert, ModalAlertType } from './Modal';
-import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
+import { NavigationContainer } from './NavigationContainer';
 import { NamedProxyForm } from './ProxyForm';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
 import { SmallButton } from './SmallButton';
@@ -95,11 +96,7 @@ function AccessMethodForm() {
       <Layout>
         <SettingsContainer>
           <NavigationContainer>
-            <NavigationBar>
-              <NavigationItems>
-                <TitleBarItem>{title}</TitleBarItem>
-              </NavigationItems>
-            </NavigationBar>
+            <AppNavigationHeader title={title} />
 
             <SettingsNavigationScrollbars fillContainer>
               <SettingsContent>

desktop/packages/mullvad-vpn/src/renderer/components/EditCustomBridge.tsx

@@ -6,11 +6,12 @@ import { useBridgeSettingsUpdater } from '../lib/constraint-updater';
 import { useHistory } from '../lib/history';
 import { useBoolean } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
+import { AppNavigationHeader } from './';
 import { SettingsForm } from './cell/SettingsForm';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer, SettingsContent, SettingsNavigationScrollbars } from './Layout';
 import { ModalAlert, ModalAlertType } from './Modal';
-import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
+import { NavigationContainer } from './NavigationContainer';
 import { ProxyForm } from './ProxyForm';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 import { SmallButton, SmallButtonColor } from './SmallButton';
@@ -66,11 +67,7 @@ function CustomBridgeForm() {
       <Layout>
         <SettingsContainer>
           <NavigationContainer>
-            <NavigationBar>
-              <NavigationItems>
-                <TitleBarItem>{title}</TitleBarItem>
-              </NavigationItems>
-            </NavigationBar>
+            <AppNavigationHeader title={title} />
 
             <SettingsNavigationScrollbars fillContainer>
               <SettingsContent>

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 { HeaderBarSettingsButton } from './HeaderBar';
 import ImageView from './ImageView';
-import { Container, Header, Layout } from './Layout';
+import { Container, Layout } from './Layout';
 
 const StyledContainer = styled(Container)({
   flex: 1,
@@ -56,7 +56,9 @@ interface ErrorViewProps {
 export default function ErrorView(props: ErrorViewProps) {
   return (
     <Layout>
-      <Header>{!props.settingsUnavailable && <HeaderBarSettingsButton />}</Header>
+      <AppMainHeader logoVariant="none">
+        {!props.settingsUnavailable && <AppMainHeader.SettingsButton />}
+      </AppMainHeader>
       <StyledContainer>
         <StyledContent>
           <Logo height={106} width={106} source="logo-icon" />

desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx

@@ -14,11 +14,11 @@ 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 { calculateHeaderBarStyle, DefaultHeaderBar, HeaderBarStyle } from './HeaderBar';
 import ImageView from './ImageView';
 import { Container, Footer, Layout } from './Layout';
 import {
@@ -28,10 +28,6 @@ import {
   RedeemVoucherSubmitButton,
 } from './RedeemVoucher';
 
-export const StyledHeader = styled(DefaultHeaderBar)({
-  flex: 0,
-});
-
 export const StyledCustomScrollbars = styled(CustomScrollbars)({
   flex: 1,
 });
@@ -261,12 +257,15 @@ function HeaderBar() {
   const isNewAccount = useSelector(
     (state) => state.account.status.type === 'ok' && state.account.status.method === 'new_account',
   );
-  const tunnelState = useSelector((state) => state.connection.status);
-  const headerBarStyle = isNewAccount
-    ? HeaderBarStyle.default
-    : calculateHeaderBarStyle(tunnelState);
 
-  return <StyledHeader barStyle={headerBarStyle} />;
+  return (
+    <AppMainHeader
+      variant={isNewAccount ? 'default' : 'basedOnConnectionStatus'}
+      size="basedOnLoginStatus">
+      <AppMainHeader.AccountButton />
+      <AppMainHeader.SettingsButton />
+    </AppMainHeader>
+  );
 }
 
 function useFinishedCallback() {