Move account button to headerbar in main view

5 files changed, 35 insertions, 41 deletions

diff --git a/gui/src/renderer/components/AppRouter.tsx b/gui/src/renderer/components/AppRouter.tsx
index cd6e07fbbd..59cace598d 100644
--- a/gui/src/renderer/components/AppRouter.tsx
+++ b/gui/src/renderer/components/AppRouter.tsx
@@ -70,9 +70,9 @@ export default function AppRouter() {
             <Route exact path={RoutePath.voucherSuccess} component={VoucherVerificationSuccess} />
             <Route exact path={RoutePath.timeAdded} component={TimeAdded} />
             <Route exact path={RoutePath.setupFinished} component={SetupFinished} />
+            <Route exact path={RoutePath.account} component={Account} />
             <Route exact path={RoutePath.settings} component={Settings} />
             <Route exact path={RoutePath.selectLanguage} component={SelectLanguage} />
-            <Route exact path={RoutePath.accountSettings} component={Account} />
             <Route exact path={RoutePath.userInterfaceSettings} component={UserInterfaceSettings} />
             <Route exact path={RoutePath.vpnSettings} component={VpnSettings} />
             <Route exact path={RoutePath.wireguardSettings} component={WireguardSettings} />
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index 7c436e3c16..c1cda7369c 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback } from 'react';
-import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 import { colors } from '../../config.json';
@@ -7,7 +6,7 @@ import { TunnelState } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { transitions, useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
-import { IReduxState } from '../redux/store';
+import { useSelector } from '../redux/store';
 import { FocusFallback } from './Focus';
 import ImageView from './ImageView';
 
@@ -50,9 +49,7 @@ interface IHeaderBarProps {
 }
 
 export default function HeaderBar(props: IHeaderBarProps) {
-  const unpinnedWindow = useSelector(
-    (state: IReduxState) => state.settings.guiSettings.unpinnedWindow,
-  );
+  const unpinnedWindow = useSelector((state) => state.settings.guiSettings.unpinnedWindow);
 
   return (
     <HeaderBarContainer
@@ -78,8 +75,8 @@ const Title = styled(ImageView)({
 export function Brand(props: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <BrandContainer {...props}>
-      <ImageView width={44} height={44} source="logo-icon" />
-      <Title height={18} source="logo-text" />
+      <ImageView width={38} height={38} source="logo-icon" />
+      <Title height={15.4} source="logo-text" />
     </BrandContainer>
   );
 }
@@ -92,6 +89,10 @@ const HeaderBarSettingsButtonContainer = styled.button({
   border: 'none',
 });
 
+const HeaderBarAccountButtonContainer = styled(HeaderBarSettingsButtonContainer)({
+  marginRight: '16px',
+});
+
 interface IHeaderBarSettingsButtonProps {
   disabled?: boolean;
 }
@@ -120,12 +121,37 @@ export function HeaderBarSettingsButton(props: IHeaderBarSettingsButtonProps) {
   );
 }
 
+export function HeaderBarAccountButton() {
+  const history = useHistory();
+  const openAccount = useCallback(
+    () => history.push(RoutePath.account, { transition: transitions.show }),
+    [history],
+  );
+
+  return (
+    <HeaderBarAccountButtonContainer
+      onClick={openAccount}
+      aria-label={messages.gettext('Account settings')}>
+      <ImageView
+        height={24}
+        width={24}
+        source="icon-account"
+        tintColor={colors.white60}
+        tintHoverColor={colors.white80}
+      />
+    </HeaderBarAccountButtonContainer>
+  );
+}
+
 export function DefaultHeaderBar(props: IHeaderBarProps) {
+  const loggedIn = useSelector((state) => state.account.status.type === 'ok');
+
   return (
     <HeaderBar {...props}>
       <FocusFallback>
         <Brand />
       </FocusFallback>
+      {loggedIn && <HeaderBarAccountButton />}
       <HeaderBarSettingsButton />
     </HeaderBar>
   );
diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx
index 1a316f81bd..ce84ae1661 100644
--- a/gui/src/renderer/components/Settings.tsx
+++ b/gui/src/renderer/components/Settings.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useEffect } from 'react';
 
 import { colors, links } from '../../config.json';
-import { formatRemainingTime, hasExpired } from '../../shared/account-expiry';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
@@ -17,7 +16,6 @@ import {
   StyledCellIcon,
   StyledContent,
   StyledNavigationScrollbars,
-  StyledOutOfTimeSubText,
   StyledQuitButton,
   StyledSettingsContent,
 } from './SettingsStyles';
@@ -63,7 +61,6 @@ export default function Support() {
                   {showSubSettings ? (
                     <>
                       <Cell.Group>
-                        <AccountButton />
                         <UserInterfaceSettingsButton />
                         <VpnSettingsButton />
                       </Cell.Group>
@@ -102,30 +99,6 @@ export default function Support() {
   );
 }
 
-function AccountButton() {
-  const history = useHistory();
-  const navigate = useCallback(() => history.push(RoutePath.accountSettings), [history]);
-
-  const accountExpiry = useSelector((state) => state.account.expiry);
-  const isOutOfTime = accountExpiry ? hasExpired(accountExpiry) : false;
-  const formattedExpiry = accountExpiry ? formatRemainingTime(accountExpiry).toUpperCase() : '';
-  const outOfTimeMessage = messages.pgettext('settings-view', 'OUT OF TIME');
-
-  return (
-    <Cell.CellNavigationButton onClick={navigate}>
-      <Cell.Label>
-        {
-          // TRANSLATORS: Navigation button to the 'Account' view
-          messages.pgettext('settings-view', 'Account')
-        }
-      </Cell.Label>
-      <StyledOutOfTimeSubText isOutOfTime={isOutOfTime}>
-        {isOutOfTime ? outOfTimeMessage : formattedExpiry}
-      </StyledOutOfTimeSubText>
-    </Cell.CellNavigationButton>
-  );
-}
-
 function UserInterfaceSettingsButton() {
   const history = useHistory();
   const navigate = useCallback(() => history.push(RoutePath.userInterfaceSettings), [history]);
diff --git a/gui/src/renderer/components/SettingsStyles.tsx b/gui/src/renderer/components/SettingsStyles.tsx
index 57e7ecc7ad..7a3d2c04ae 100644
--- a/gui/src/renderer/components/SettingsStyles.tsx
+++ b/gui/src/renderer/components/SettingsStyles.tsx
@@ -1,15 +1,10 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
 import { measurements } from './common-styles';
 import { NavigationScrollbars } from './NavigationBar';
 
-export const StyledOutOfTimeSubText = styled(Cell.SubText)((props: { isOutOfTime: boolean }) => ({
-  color: props.isOutOfTime ? colors.red : undefined,
-}));
-
 export const StyledCellIcon = styled(Cell.UntintedIcon)({
   marginRight: '8px',
 });
diff --git a/gui/src/renderer/lib/routes.ts b/gui/src/renderer/lib/routes.ts
index a0248d940e..0be9983769 100644
--- a/gui/src/renderer/lib/routes.ts
+++ b/gui/src/renderer/lib/routes.ts
@@ -10,7 +10,7 @@ export enum RoutePath {
   setupFinished = '/main/setup-finished',
   settings = '/settings',
   selectLanguage = '/settings/language',
-  accountSettings = '/settings/account',
+  account = '/account',
   userInterfaceSettings = '/settings/interface',
   vpnSettings = '/settings/vpn',
   wireguardSettings = '/settings/advanced/wireguard',