From bdad076b482590cd2e600e6c74f3141080eb13e3 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Mon, 19 Aug 2024 14:48:51 +0100
Subject: [PATCH] fix: clean up logic around showing logo on homepage

---
 .../components/layout/headers/logo-box.tsx    | 21 +++++++++----------
 .../container/headers/main.header.tsx         |  8 ++++---
 .../container/headers/page.header.tsx         |  4 ++--
 src/app/routes/app-routes.tsx                 |  2 +-
 4 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/app/components/layout/headers/logo-box.tsx b/src/app/components/layout/headers/logo-box.tsx
index cc33a7d529b..e2e8e461e69 100644
--- a/src/app/components/layout/headers/logo-box.tsx
+++ b/src/app/components/layout/headers/logo-box.tsx
@@ -1,4 +1,4 @@
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { Box } from 'leather-styles/jsx';
@@ -7,23 +7,22 @@ import { Logo } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 
-export function LogoBox({ isSessionLocked }: { isSessionLocked?: boolean | undefined }) {
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  const shouldShowLogo =
-    location.pathname === RouteUrls.Home || location.pathname === RouteUrls.Activity;
+interface LogoBoxProps {
+  isHomePage?: boolean;
+  isSessionLocked?: boolean;
+}
 
-  const hideBelow = shouldShowLogo ? undefined : isSessionLocked ? undefined : 'sm';
-  const hideFrom = shouldShowLogo ? undefined : isSessionLocked ? 'sm' : undefined;
+export function LogoBox({ isHomePage = false, isSessionLocked = false }: LogoBoxProps) {
+  const navigate = useNavigate();
 
   return (
     <Box
       height="headerContainerHeight"
       margin="auto"
       px="space.02"
-      hideBelow={hideBelow}
-      hideFrom={hideFrom}
+      // Logo must always appear on Home but disappear on ROUTE_URLS.UNLOCK large view
+      hideBelow={isHomePage || isSessionLocked ? undefined : 'sm'}
+      hideFrom={!isHomePage && isSessionLocked ? 'sm' : undefined}
     >
       <Logo
         data-testid={OnboardingSelectors.LogoRouteToHome}
diff --git a/src/app/features/container/headers/main.header.tsx b/src/app/features/container/headers/main.header.tsx
index 181f54031c7..9b68200c88d 100644
--- a/src/app/features/container/headers/main.header.tsx
+++ b/src/app/features/container/headers/main.header.tsx
@@ -14,28 +14,30 @@ import { LogoBox } from '@app/components/layout/headers/logo-box';
 import { Settings } from '@app/features/settings/settings';
 
 interface MainHeaderProps {
+  isHomePage?: boolean;
   hideBackButton?: boolean;
   hideLogo?: boolean;
 }
 
-export function MainHeader({ hideBackButton = false, hideLogo = false }: MainHeaderProps) {
+export function MainHeader({ isHomePage = false, hideLogo = false }: MainHeaderProps) {
   const { isShowingSwitchAccount, setIsShowingSwitchAccount } =
     useOutletContext<SwitchAccountOutletContext>();
   const navigate = useNavigate();
+
   return (
     <>
       <Header paddingLeft={{ base: undefined, sm: 0 }}>
         <HeaderGrid
           leftCol={
             <>
-              {!hideBackButton && (
+              {!isHomePage && (
                 <HeaderActionButton
                   icon={<ArrowLeftIcon />}
                   onAction={() => navigate(-1)}
                   dataTestId={SharedComponentsSelectors.HeaderBackBtn}
                 />
               )}
-              {!hideLogo && <LogoBox />}
+              {!hideLogo && <LogoBox isHomePage={isHomePage} />}
             </>
           }
           rightCol={
diff --git a/src/app/features/container/headers/page.header.tsx b/src/app/features/container/headers/page.header.tsx
index 1e574c30b8c..82ff33415a0 100644
--- a/src/app/features/container/headers/page.header.tsx
+++ b/src/app/features/container/headers/page.header.tsx
@@ -26,8 +26,8 @@ interface PageHeaderProps {
 
 export function PageHeader({
   title,
-  isSummaryPage,
-  isSessionLocked,
+  isSummaryPage = false,
+  isSessionLocked = false,
   isSettingsVisibleOnSm = true,
   onBackLocation,
 }: PageHeaderProps) {
diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx
index 6392f92875c..0c7f1d3653c 100644
--- a/src/app/routes/app-routes.tsx
+++ b/src/app/routes/app-routes.tsx
@@ -82,7 +82,7 @@ function useAppRoutes() {
           <Route
             element={
               <>
-                <MainHeader hideBackButton />
+                <MainHeader isHomePage hideBackButton />
                 <Content>
                   <SwitchAccountLayout />
                 </Content>