Simplify header sizes, background color on reader, start handling PDF article actions

packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx

@@ -9,7 +9,7 @@ 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 { LIBRARY_HEADER_MOBILE_HEIGHT } from './LibraryHeader'
+import { HEADER_MOBILE_HEIGHT } from './HeaderSpacer'
 
 export const LIBRARY_LEFT_MENU_WIDTH = '300px'
 
@@ -42,7 +42,7 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
           },
           '@mdDown': {
             visibility: props.showFilterMenu ? 'visible' : 'hidden',
-            top: props.showFilterMenu ? LIBRARY_HEADER_MOBILE_HEIGHT : '100%',
+            top: props.showFilterMenu ? HEADER_MOBILE_HEIGHT : '100%',
             width: '100%',
             transition: 'visibility 0s, top 150ms',
           },

packages/web/components/templates/homeFeed/LibraryHeader.tsx

@@ -12,6 +12,11 @@ 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'
 
 type LibraryHeaderProps = {
   layout: LayoutType
@@ -24,9 +29,6 @@ type LibraryHeaderProps = {
   setShowFilterMenu: (show: boolean) => void
 }
 
-const HEADER_HEIGHT = '105px'
-export const LIBRARY_HEADER_MOBILE_HEIGHT = '70px'
-
 export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
   return (
     <>
@@ -44,7 +46,7 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
           pt: '35px',
           borderBottom: '1px solid $thBorderColor',
           '@mdDown': {
-            height: LIBRARY_HEADER_MOBILE_HEIGHT,
+            height: MOBILE_HEADER_HEIGHT,
             pt: '0px',
           },
         }}
@@ -56,15 +58,7 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
 
       {/* This spacer is put in to push library content down 
       below the fixed header height. */}
-      <Box
-        css={{
-          height: HEADER_HEIGHT,
-          bg: '$grayBase',
-          '@mdDown': {
-            height: LIBRARY_HEADER_MOBILE_HEIGHT,
-          },
-        }}
-      ></Box>
+      <HeaderSpacer />
     </>
   )
 }

packages/web/components/templates/reader/ReaderHeader.tsx

@@ -1,16 +1,15 @@
-import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { DotsThreeOutline, TextAa } from 'phosphor-react'
 import { PrimaryDropdown } from '../PrimaryDropdown'
 import { TooltipWrapped } from '../../elements/Tooltip'
 import { LogoBox } from '../../elements/LogoBox'
 import { ReactNode } from 'react'
-import { LIBRARY_HEADER_MOBILE_HEIGHT } from '../homeFeed/LibraryHeader'
+import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
 import { theme } from '../../tokens/stitches.config'
 
-const HEADER_HEIGHT = '105px'
-
 type ReaderHeaderProps = {
+  alwaysDisplayToolbar: boolean
   showDisplaySettingsModal: (show: boolean) => void
   children?: ReactNode
 }
@@ -28,11 +27,13 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
           position: 'fixed',
           width: '100%',
           height: HEADER_HEIGHT,
-          bg: 'transparent',
+          display: props.alwaysDisplayToolbar ? 'flex' : 'transparent',
           pt: '35px',
-          borderBottom: '1px solid transparent',
+          borderBottom: props.alwaysDisplayToolbar
+            ? '1px solid $thBorderColor'
+            : '1px solid transparent',
           '@xlgDown': {
-            height: LIBRARY_HEADER_MOBILE_HEIGHT,
+            height: MOBILE_HEADER_HEIGHT,
             pt: '0px',
             bg: '$thBackground3',
             borderBottom: '1px solid $thBorderColor',
@@ -52,7 +53,9 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
             css={{
               width: '100%',
               px: '25px',
-              '@lg': { display: 'none' },
+              '@lg': {
+                display: props.alwaysDisplayToolbar ? 'flex' : 'none',
+              },
               '@mdDown': { px: '15px' },
             }}
           >
@@ -62,7 +65,7 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
             css={{
               width: '100%',
               '@lgDown': {
-                display: 'none',
+                display: props.alwaysDisplayToolbar ? 'flex' : 'none',
               },
             }}
           >

packages/web/components/tokens/stitches.config.ts

@@ -338,7 +338,7 @@ export const lighterTheme = createTheme(ThemeId.Lighter, {})
 export const globalStyles = globalCss({
   body: {
     colorScheme: 'var(--colorScheme-colorScheme)',
-    backgroundColor: '$thBackground2',
+    backgroundColor: '$thBackground',
   },
   '*': {
     '&:focus': {

packages/web/pages/[username]/[slug]/index.tsx

@@ -6,7 +6,7 @@ import {
   useGetArticleQuery,
 } from '../../../lib/networking/queries/useGetArticleQuery'
 import { useRouter } from 'next/router'
-import { VStack } from './../../../components/elements/LayoutPrimitives'
+import { Box, VStack } from './../../../components/elements/LayoutPrimitives'
 import { ArticleContainer } from './../../../components/templates/article/ArticleContainer'
 import { PdfArticleContainerProps } from './../../../components/templates/article/PdfArticleContainer'
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -39,11 +39,9 @@ import { deleteLinkMutation } from '../../../lib/networking/mutations/deleteLink
 import { ConfirmationModal } from '../../../components/patterns/ConfirmationModal'
 import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
 import { ReaderHeader } from '../../../components/templates/reader/ReaderHeader'
-import {
-  EditArticleModal,
-  EditLibraryItemModal,
-} from '../../../components/templates/homeFeed/EditItemModals'
+import { EditArticleModal } from '../../../components/templates/homeFeed/EditItemModals'
 import { VerticalArticleActionsMenu } from '../../../components/templates/article/VerticalArticleActions'
+import { HeaderSpacer } from '../../../components/templates/homeFeed/HeaderSpacer'
 
 const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
   () => import('./../../../components/templates/article/PdfArticleContainer'),
@@ -313,6 +311,7 @@ export default function Home(): JSX.Element {
         showDisplaySettingsModal={
           readerSettings.setShowEditDisplaySettingsModal
         }
+        alwaysDisplayToolbar={article?.contentReader == 'PDF'}
       >
         <VerticalArticleActionsMenu
           article={article}
@@ -322,6 +321,8 @@ export default function Home(): JSX.Element {
         />
       </ReaderHeader>
 
+      {article?.contentReader == 'PDF' && <HeaderSpacer />}
+
       <VStack
         distribution="between"
         alignment="center"
@@ -355,13 +356,13 @@ export default function Home(): JSX.Element {
       ) : (
         <VStack
           alignment="center"
-          distribution="center"
+          distribution="start"
           ref={scrollRef}
           className="disable-webkit-callout"
           css={{
-            '@smDown': {
-              background: theme.colors.grayBg.toString(),
-            },
+            width: '100%',
+            height: '100%',
+            background: '$thBackground',
           }}
         >
           {article && viewerData?.me ? (

packages/web/pages/home.tsx

@@ -15,7 +15,11 @@ function LoadedContent(): JSX.Element {
       }}
       pageTestId="home-page-tag"
     >
-      <VStack alignment="center" distribution="center">
+      <VStack
+        alignment="center"
+        distribution="center"
+        css={{ backgroundColor: '$thBackground2' }}
+      >
         <HomeFeedContainer />
       </VStack>
     </PrimaryLayout>