fix: clean up logic around showing logo on homepage

leather-io · Aug 19, 2024 · bdad076 · bdad076
1 parent 5b86572
commit bdad076
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -82,7 +82,7 @@ function useAppRoutes() {
           <Route
             element={
               <>
-                <MainHeader hideBackButton />
+                <MainHeader isHomePage hideBackButton />
                 <Content>
                   <SwitchAccountLayout />
                 </Content>