From 33bebc8ccab8bfff54353ce23bf6d66256e04d3e Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 2 Mar 2023 13:24:18 +0800
Subject: [PATCH] Remove duplicated code, add invisible border at bottom of
 reader header so its the same size as the library header

---
 .../templates/homeFeed/LibraryHeader.tsx      | 33 +----------------
 .../templates/reader/ReaderHeader.tsx         | 36 ++-----------------
 2 files changed, 4 insertions(+), 65 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 175ebce64..028046e7f 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -13,6 +13,7 @@ import { GridSelectorIcon } from '../../elements/images/GridSelectorIcon'
 import { LayoutType } from './HomeFeedContainer'
 import { PrimaryDropdown } from '../PrimaryDropdown'
 import { LIBRARY_LEFT_MENU_WIDTH } from './LibraryFilterMenu'
+import { LogoBox } from '../../elements/LogoBox'
 
 type LibraryHeaderProps = {
   layout: LayoutType
@@ -209,38 +210,6 @@ function SearchBox(props: SearchBoxProps): JSX.Element {
   )
 }
 
-// Displays the full logo on larger screens, small logo on mobile
-function LogoBox(): JSX.Element {
-  return (
-    <>
-      <SpanBox
-        css={{
-          pl: '25px',
-          height: '24px',
-          width: LIBRARY_LEFT_MENU_WIDTH,
-          minWidth: LIBRARY_LEFT_MENU_WIDTH,
-          '@mdDown': {
-            display: 'none',
-          },
-        }}
-      >
-        <OmnivoreFullLogo showTitle={true} />
-      </SpanBox>
-      <SpanBox
-        css={{
-          ml: '20px',
-          mr: '20px',
-          '@md': {
-            display: 'none',
-          },
-        }}
-      >
-        <OmnivoreNameLogo />
-      </SpanBox>
-    </>
-  )
-}
-
 type ControlButtonBoxProps = {
   layout: LayoutType
   updateLayout: (layout: LayoutType) => void
diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx
index fe208040a..f036d7fa2 100644
--- a/packages/web/components/templates/reader/ReaderHeader.tsx
+++ b/packages/web/components/templates/reader/ReaderHeader.tsx
@@ -5,7 +5,8 @@ import { OmnivoreNameLogo } from '../../elements/images/OmnivoreNameLogo'
 import { OmnivoreFullLogo } from '../../elements/images/OmnivoreFullLogo'
 import { PrimaryDropdown } from '../PrimaryDropdown'
 import { TooltipWrapped } from '../../elements/Tooltip'
-import { ReaderSettings } from '../../../lib/hooks/useReaderSettings'
+import { LIBRARY_LEFT_MENU_WIDTH } from '../homeFeed/LibraryFilterMenu'
+import { LogoBox } from '../../elements/LogoBox'
 
 const HEADER_HEIGHT = '105px'
 const MOBILE_HEIGHT = '48px'
@@ -29,6 +30,7 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
           height: HEADER_HEIGHT,
           bg: 'transparent',
           pt: '35px',
+          borderBottom: '1px solid transparent',
           '@mdDown': {
             height: MOBILE_HEIGHT,
             pt: '0px',
@@ -51,38 +53,6 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
   )
 }
 
-// Displays the full logo on larger screens, small logo on mobile
-function LogoBox(): JSX.Element {
-  return (
-    <>
-      <SpanBox
-        css={{
-          ml: '25px',
-          height: '24px',
-          width: '232px',
-          minWidth: '232px',
-          '@mdDown': {
-            display: 'none',
-          },
-        }}
-      >
-        <OmnivoreFullLogo showTitle={true} />
-      </SpanBox>
-      <SpanBox
-        css={{
-          ml: '20px',
-          mr: '20px',
-          '@md': {
-            display: 'none',
-          },
-        }}
-      >
-        <OmnivoreNameLogo />
-      </SpanBox>
-    </>
-  )
-}
-
 function ControlButtonBox(props: ReaderHeaderProps): JSX.Element {
   return (
     <>