From 6cfd424922a2844b2ed6f8b485fe2f031cf6a868 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 25 May 2023 12:56:58 +0800
Subject: [PATCH] Modify the sizes of the left menu and the header

---
 .../web/components/elements/DropdownElements.tsx |  4 +++-
 .../web/components/patterns/SettingsHeader.tsx   |  7 ++-----
 .../web/components/templates/PrimaryDropdown.tsx |  2 ++
 .../web/components/templates/SettingsLayout.tsx  |  4 ++--
 .../templates/article/EpubContainer.tsx          |  3 +--
 .../templates/article/PdfArticleContainer.tsx    |  5 +----
 .../templates/article/PdfHeaderSpacer.tsx        |  6 +-----
 .../templates/homeFeed/EmptyHighlights.tsx       |  2 +-
 .../templates/homeFeed/HeaderSpacer.tsx          |  6 +-----
 .../templates/homeFeed/HighlightsLayout.tsx      | 16 ++++------------
 .../templates/homeFeed/LibraryFilterMenu.tsx     |  7 +++----
 .../templates/homeFeed/LibraryHeader.tsx         | 12 ++----------
 .../components/templates/reader/ReaderHeader.tsx |  7 +++----
 13 files changed, 26 insertions(+), 55 deletions(-)

diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx
index 66dd5aa8f..b14f3f9a3 100644
--- a/packages/web/components/elements/DropdownElements.tsx
+++ b/packages/web/components/elements/DropdownElements.tsx
@@ -169,7 +169,9 @@ export function Dropdown(
   } = props
   return (
     <Root modal={modal} onOpenChange={props.onOpenChange}>
-      <DropdownTrigger disabled={disabled}>{triggerElement}</DropdownTrigger>
+      <DropdownTrigger disabled={disabled} css={{ cursor: 'pointer' }}>
+        {triggerElement}
+      </DropdownTrigger>
       <DropdownContent
         css={css}
         onInteractOutside={() => {
diff --git a/packages/web/components/patterns/SettingsHeader.tsx b/packages/web/components/patterns/SettingsHeader.tsx
index 7dbb96f53..03b603470 100644
--- a/packages/web/components/patterns/SettingsHeader.tsx
+++ b/packages/web/components/patterns/SettingsHeader.tsx
@@ -2,10 +2,7 @@ import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
 import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
 import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
 import { PrimaryDropdown } from '../templates/PrimaryDropdown'
-import {
-  HEADER_HEIGHT,
-  MOBILE_HEADER_HEIGHT,
-} from '../templates/homeFeed/HeaderSpacer'
+import { HEADER_HEIGHT } from '../templates/homeFeed/HeaderSpacer'
 
 type HeaderProps = {
   user?: UserBasicData
@@ -25,7 +22,7 @@ export function SettingsHeader(props: HeaderProps): JSX.Element {
           position: 'fixed',
           width: '100%',
           px: '25px',
-          height: MOBILE_HEADER_HEIGHT,
+          height: HEADER_HEIGHT,
           bg: '$thBackground3',
           borderBottom: '1px solid $thBorderColor',
           '@mdDown': {
diff --git a/packages/web/components/templates/PrimaryDropdown.tsx b/packages/web/components/templates/PrimaryDropdown.tsx
index b4cda53c8..5bddf16d4 100644
--- a/packages/web/components/templates/PrimaryDropdown.tsx
+++ b/packages/web/components/templates/PrimaryDropdown.tsx
@@ -93,6 +93,8 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
           height: '64px',
           p: '15px',
           gap: '15px',
+          cursor: 'pointer',
+          mouseEvents: 'all',
         }}
       >
         <Avatar
diff --git a/packages/web/components/templates/SettingsLayout.tsx b/packages/web/components/templates/SettingsLayout.tsx
index 84a898ced..7ec179af3 100644
--- a/packages/web/components/templates/SettingsLayout.tsx
+++ b/packages/web/components/templates/SettingsLayout.tsx
@@ -10,7 +10,7 @@ import { useState } from 'react'
 import { ConfirmationModal } from '../patterns/ConfirmationModal'
 import { KeyboardShortcutListModal } from './KeyboardShortcutListModal'
 import { PageMetaData } from '../patterns/PageMetaData'
-import { HeaderSpacer, MOBILE_HEADER_HEIGHT } from './homeFeed/HeaderSpacer'
+import { HEADER_HEIGHT } from './homeFeed/HeaderSpacer'
 
 type SettingsLayoutProps = {
   title?: string
@@ -48,7 +48,7 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element {
       <VStack css={{ width: '100%', height: '100%' }}>
         <Box
           css={{
-            height: MOBILE_HEADER_HEIGHT,
+            height: HEADER_HEIGHT,
             bg: '$grayBase',
           }}
         ></Box>
diff --git a/packages/web/components/templates/article/EpubContainer.tsx b/packages/web/components/templates/article/EpubContainer.tsx
index 6d8d19278..e59e0a5aa 100644
--- a/packages/web/components/templates/article/EpubContainer.tsx
+++ b/packages/web/components/templates/article/EpubContainer.tsx
@@ -16,7 +16,7 @@ import { pspdfKitKey } from '../../../lib/appConfig'
 import { NotebookModal } from './NotebookModal'
 import { HighlightNoteModal } from './HighlightNoteModal'
 import { showErrorToast } from '../../../lib/toastHelpers'
-import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
+import { HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
 import Epub, { EpubCFI } from 'epubjs'
 import { Rendition, Contents } from 'epubjs/types'
@@ -292,7 +292,6 @@ export default function EpubContainer(props: EpubContainerProps): JSX.Element {
         '@mdDown': {
           padding: '0px',
           paddingBottom: '0px',
-          height: `calc(100vh - ${MOBILE_HEADER_HEIGHT})`,
         },
         width: '100%',
         height: `calc(100vh - ${HEADER_HEIGHT})`,
diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx
index c1d3c0fb7..cb4809a32 100644
--- a/packages/web/components/templates/article/PdfArticleContainer.tsx
+++ b/packages/web/components/templates/article/PdfArticleContainer.tsx
@@ -16,7 +16,7 @@ import { pspdfKitKey } from '../../../lib/appConfig'
 import { NotebookModal } from './NotebookModal'
 import { HighlightNoteModal } from './HighlightNoteModal'
 import { showErrorToast } from '../../../lib/toastHelpers'
-import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
+import { HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
 
 export type PdfArticleContainerProps = {
@@ -481,9 +481,6 @@ export default function PdfArticleContainer(
       css={{
         width: '100%',
         height: `calc(100vh - ${HEADER_HEIGHT})`,
-        '@xlgDown': {
-          height: `calc(100vh - ${MOBILE_HEADER_HEIGHT})`,
-        },
       }}
     >
       <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
diff --git a/packages/web/components/templates/article/PdfHeaderSpacer.tsx b/packages/web/components/templates/article/PdfHeaderSpacer.tsx
index c4eea6da1..1b1b675d3 100644
--- a/packages/web/components/templates/article/PdfHeaderSpacer.tsx
+++ b/packages/web/components/templates/article/PdfHeaderSpacer.tsx
@@ -1,7 +1,6 @@
 import { Box } from '../../elements/LayoutPrimitives'
 
-export const HEADER_HEIGHT = '105px'
-export const MOBILE_HEADER_HEIGHT = '70px'
+export const HEADER_HEIGHT = '70px'
 
 export function PdfHeaderSpacer(): JSX.Element {
   return (
@@ -9,9 +8,6 @@ export function PdfHeaderSpacer(): JSX.Element {
       css={{
         height: HEADER_HEIGHT,
         bg: '$grayBase',
-        '@xlgDown': {
-          height: MOBILE_HEADER_HEIGHT,
-        },
       }}
     ></Box>
   )
diff --git a/packages/web/components/templates/homeFeed/EmptyHighlights.tsx b/packages/web/components/templates/homeFeed/EmptyHighlights.tsx
index 204904acc..030444c09 100644
--- a/packages/web/components/templates/homeFeed/EmptyHighlights.tsx
+++ b/packages/web/components/templates/homeFeed/EmptyHighlights.tsx
@@ -11,7 +11,7 @@ export function EmptyHighlights(): JSX.Element {
       css={{
         color: '$grayTextContrast',
         textAlign: 'center',
-        marginTop: '105px',
+        marginTop: '70px',
       }}
     >
       <Book size={44} color={theme.colors.grayTextContrast.toString()} />
diff --git a/packages/web/components/templates/homeFeed/HeaderSpacer.tsx b/packages/web/components/templates/homeFeed/HeaderSpacer.tsx
index 51d47210c..080a5f43c 100644
--- a/packages/web/components/templates/homeFeed/HeaderSpacer.tsx
+++ b/packages/web/components/templates/homeFeed/HeaderSpacer.tsx
@@ -1,7 +1,6 @@
 import { Box } from '../../elements/LayoutPrimitives'
 
-export const HEADER_HEIGHT = '105px'
-export const MOBILE_HEADER_HEIGHT = '70px'
+export const HEADER_HEIGHT = '70px'
 
 export function HeaderSpacer(): JSX.Element {
   return (
@@ -9,9 +8,6 @@ export function HeaderSpacer(): JSX.Element {
       css={{
         height: HEADER_HEIGHT,
         bg: '$grayBase',
-        '@mdDown': {
-          height: MOBILE_HEADER_HEIGHT,
-        },
       }}
     ></Box>
   )
diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
index f0519a710..6df02906b 100644
--- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
+++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
@@ -21,7 +21,7 @@ import {
 import { LibraryHighlightGridCard } from '../../patterns/LibraryCards/LibraryHighlightGridCard'
 import { Notebook } from '../article/Notebook'
 import { EmptyHighlights } from './EmptyHighlights'
-import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from './HeaderSpacer'
+import { HEADER_HEIGHT } from './HeaderSpacer'
 import { highlightsAsMarkdown } from './HighlightItem'
 
 type HighlightItemsLayoutProps = {
@@ -34,8 +34,9 @@ type HighlightItemsLayoutProps = {
 export function HighlightItemsLayout(
   props: HighlightItemsLayoutProps
 ): JSX.Element {
-  const [currentItem, setCurrentItem] =
-    useState<LibraryItem | undefined>(undefined)
+  const [currentItem, setCurrentItem] = useState<LibraryItem | undefined>(
+    undefined
+  )
 
   const listReducer = (
     state: LibraryItem[],
@@ -106,9 +107,6 @@ export function HighlightItemsLayout(
         css={{
           width: '100%',
           height: `calc(100vh - ${HEADER_HEIGHT})`,
-          '@xlgDown': {
-            height: `calc(100vh - ${MOBILE_HEADER_HEIGHT})`,
-          },
         }}
       >
         <EmptyHighlights />
@@ -122,9 +120,6 @@ export function HighlightItemsLayout(
         css={{
           width: '100%',
           height: `calc(100vh - ${HEADER_HEIGHT})`,
-          '@xlgDown': {
-            height: `calc(100vh - ${MOBILE_HEADER_HEIGHT})`,
-          },
           '@lgDown': {
             overflowY: 'scroll',
           },
@@ -153,9 +148,6 @@ export function HighlightItemsLayout(
           <VStack
             css={{
               minHeight: `calc(100vh - ${HEADER_HEIGHT})`,
-              '@xlgDown': {
-                minHeight: `calc(100vh - ${MOBILE_HEADER_HEIGHT})`,
-              },
               bg: '$thBackground',
             }}
             distribution="start"
diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index d6dc48581..2b38a4826 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -9,10 +9,10 @@ import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQ
 import { Label } from '../../../lib/networking/fragments/labelFragment'
 import { theme } from '../../tokens/stitches.config'
 import { currentThemeName } from '../../../lib/themeUpdater'
-import { MOBILE_HEADER_HEIGHT } from './HeaderSpacer'
 import { useRegisterActions } from 'kbar'
+import { HEADER_HEIGHT } from './HeaderSpacer'
 
-export const LIBRARY_LEFT_MENU_WIDTH = '300px'
+export const LIBRARY_LEFT_MENU_WIDTH = '233px'
 
 type LibraryFilterMenuProps = {
   setShowAddLinkModal: (show: boolean) => void
@@ -30,7 +30,7 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
       <Box
         css={{
           left: '0px',
-          top: '105px',
+          top: HEADER_HEIGHT,
           position: 'fixed',
           bg: '$thBackground',
           height: '100%',
@@ -43,7 +43,6 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
           },
           '@mdDown': {
             visibility: props.showFilterMenu ? 'visible' : 'hidden',
-            top: props.showFilterMenu ? MOBILE_HEADER_HEIGHT : '100%',
             width: '100%',
             transition: 'visibility 0s, top 150ms',
           },
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index b569ab809..0bb757279 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -12,11 +12,7 @@ import { LayoutType } from './HomeFeedContainer'
 import { PrimaryDropdown } from '../PrimaryDropdown'
 import { LogoBox } from '../../elements/LogoBox'
 import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo'
-import {
-  HeaderSpacer,
-  HEADER_HEIGHT,
-  MOBILE_HEADER_HEIGHT,
-} from './HeaderSpacer'
+import { HeaderSpacer, HEADER_HEIGHT } from './HeaderSpacer'
 
 type LibraryHeaderProps = {
   layout: LayoutType
@@ -43,12 +39,8 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
           width: '100%',
           height: HEADER_HEIGHT,
           bg: '$thBackground',
-          pt: '35px',
+          pt: '0px',
           borderBottom: '1px solid $thBorderColor',
-          '@mdDown': {
-            height: MOBILE_HEADER_HEIGHT,
-            pt: '0px',
-          },
         }}
       >
         {/* These will display/hide depending on breakpoints */}
diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx
index 3ea4db7e2..afa3eefa4 100644
--- a/packages/web/components/templates/reader/ReaderHeader.tsx
+++ b/packages/web/components/templates/reader/ReaderHeader.tsx
@@ -5,7 +5,7 @@ import { PrimaryDropdown } from '../PrimaryDropdown'
 import { TooltipWrapped } from '../../elements/Tooltip'
 import { LogoBox } from '../../elements/LogoBox'
 import { ReactNode } from 'react'
-import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
+import { HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
 import { theme } from '../../tokens/stitches.config'
 
 type ReaderHeaderProps = {
@@ -24,19 +24,17 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
           top: '0',
           left: '0',
           zIndex: 1,
+          pt: '0px',
           position: 'fixed',
           width: '100%',
           height: HEADER_HEIGHT,
           display: props.alwaysDisplayToolbar ? 'flex' : 'transparent',
-          pt: '35px',
           pointerEvents: 'none',
           cursor: 'default',
           borderBottom: props.alwaysDisplayToolbar
             ? '1px solid $thBorderColor'
             : '1px solid transparent',
           '@xlgDown': {
-            height: MOBILE_HEADER_HEIGHT,
-            pt: '0px',
             bg: '$readerMargin',
             pointerEvents: 'unset',
             cursor: 'unset',
@@ -55,6 +53,7 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
           css={{
             width: '100%',
             height: '100%',
+            pointerEvents: 'all',
           }}
         >
           <LogoBox />