From 30090e0320fd7f9aae583f28bc11c125ef68a19c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sat, 25 Feb 2023 09:49:18 +0800
Subject: [PATCH] Article container fixes to new design, more header work

---
 .../components/patterns/ArticleSubtitle.tsx   | 23 +++++++++++++++----
 .../templates/article/ArticleActionsMenu.tsx  | 18 ---------------
 .../templates/article/ArticleContainer.tsx    | 17 ++++++++++----
 .../article/SkeletonArticleContainer.tsx      | 12 ++++++----
 .../templates/homeFeed/LibraryHeader.tsx      |  2 +-
 .../web/pages/[username]/[slug]/index.tsx     |  3 +++
 packages/web/styles/articleInnerStyling.css   |  2 +-
 7 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/packages/web/components/patterns/ArticleSubtitle.tsx b/packages/web/components/patterns/ArticleSubtitle.tsx
index c789dd68f..f0933cabe 100644
--- a/packages/web/components/patterns/ArticleSubtitle.tsx
+++ b/packages/web/components/patterns/ArticleSubtitle.tsx
@@ -5,14 +5,13 @@ import { formattedLongDate } from './../../lib/dateFormatting'
 type SubtitleStyle = 'footnote' | 'shareSubtitle'
 
 type ArticleSubtitleProps = {
-  rawDisplayDate: string
   href: string
   author?: string
   style?: SubtitleStyle
   hideButton?: boolean
 }
 
-export function ArticleSubtitle(props: ArticleSubtitleProps): JSX.Element {  
+export function ArticleSubtitle(props: ArticleSubtitleProps): JSX.Element {
   const textStyle = props.style || 'footnote'
   const subtitle = articleSubtitle(props.href, props.author)
 
@@ -20,11 +19,11 @@ export function ArticleSubtitle(props: ArticleSubtitleProps): JSX.Element {
     <Box>
       <StyledText style={textStyle} css={{ wordBreak: 'break-word' }}>
         {subtitle}{' '}
-        {subtitle && (<span style={{ position: 'relative', bottom: 1 }}>• </span>)}{' '}
-        {formattedLongDate(props.rawDisplayDate)}{' '}
+        {subtitle && (
+          <span style={{ position: 'relative', bottom: 1 }}>• </span>
+        )}{' '}
         {!props.hideButton && !shouldHideUrl(props.href) && (
           <>
-            <span style={{ position: 'relative', bottom: 1 }}>• </span>{' '}
             <StyledLink
               href={props.href}
               target="_blank"
@@ -43,6 +42,20 @@ export function ArticleSubtitle(props: ArticleSubtitleProps): JSX.Element {
   )
 }
 
+type ReaderSavedInfoProps = {
+  rawDisplayDate: string
+}
+
+export function ReaderSavedInfo(props: ReaderSavedInfoProps): JSX.Element {
+  return (
+    <Box>
+      <StyledText css={{ wordBreak: 'break-word', fontSize: '15' }}>
+        {formattedLongDate(props.rawDisplayDate)}{' '}
+      </StyledText>
+    </Box>
+  )
+}
+
 function shouldHideUrl(url: string): boolean {
   const origin = new URL(url).origin
   const hideHosts = ['https://storage.googleapis.com', 'https://omnivore.app']
diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx
index 21ca539e9..df715a9ac 100644
--- a/packages/web/components/templates/article/ArticleActionsMenu.tsx
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@@ -91,24 +91,6 @@ export function ArticleActionsMenu(
           paddingTop: '6px',
         }}
       >
-        {props.showReaderDisplaySettings && (
-          <>
-            <Button
-              style="articleActionIcon"
-              onClick={() =>
-                readerSettings.setShowEditDisplaySettingsModal(true)
-              }
-            >
-              <TooltipWrapped
-                tooltipContent="Adjust Display Settings"
-                tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
-              >
-                <TextAa size={24} color={theme.colors.readerFont.toString()} />
-              </TooltipWrapped>
-            </Button>
-            <MenuSeparator layout={props.layout} />
-          </>
-        )}
         <SpanBox
           css={{
             display: 'flex',
diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx
index 33d488b72..cc086a232 100644
--- a/packages/web/components/templates/article/ArticleContainer.tsx
+++ b/packages/web/components/templates/article/ArticleContainer.tsx
@@ -2,7 +2,11 @@ import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticle
 import { Article } from './../../../components/templates/article/Article'
 import { Box, HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives'
 import { StyledText } from './../../elements/StyledText'
-import { ArticleSubtitle } from './../../patterns/ArticleSubtitle'
+import {
+  ArticleSavedInfo,
+  ArticleSubtitle,
+  ReaderSavedInfo,
+} from './../../patterns/ArticleSubtitle'
 import { theme, ThemeId } from './../../tokens/stitches.config'
 import { HighlightsLayer } from '../../templates/article/HighlightsLayer'
 import { Button } from '../../elements/Button'
@@ -277,6 +281,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         id="article-container"
         css={{
           padding: '16px',
+          paddingTop: '52px',
           maxWidth: `${styles.maxWidthPercentage ?? 100}%`,
           background: props.isAppleAppEmbed
             ? 'unset'
@@ -296,7 +301,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
             '--blockquote-icon-font-size': '1.7rem',
             '--figure-margin': '2.6875rem auto',
             '--hr-margin': '2em',
-            margin: `30px 0px`,
+            margin: `0px 0px`,
           },
           '@md': {
             maxWidth: styles.maxWidthPercentage
@@ -306,6 +311,11 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         }}
       >
         <VStack alignment="start" distribution="start">
+          <ReaderSavedInfo
+            rawDisplayDate={
+              props.article.publishedAt ?? props.article.createdAt
+            }
+          />
           <StyledText
             style="boldHeadline"
             data-testid="article-headline"
@@ -318,9 +328,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
             {props.article.title}
           </StyledText>
           <ArticleSubtitle
-            rawDisplayDate={
-              props.article.publishedAt ?? props.article.createdAt
-            }
             author={props.article.author}
             href={props.article.url}
           />
diff --git a/packages/web/components/templates/article/SkeletonArticleContainer.tsx b/packages/web/components/templates/article/SkeletonArticleContainer.tsx
index d7ef809e7..5a47ec5a9 100644
--- a/packages/web/components/templates/article/SkeletonArticleContainer.tsx
+++ b/packages/web/components/templates/article/SkeletonArticleContainer.tsx
@@ -10,7 +10,9 @@ type SkeletonArticleContainerProps = {
   children?: React.ReactNode
 }
 
-export function SkeletonArticleContainer(props: SkeletonArticleContainerProps): JSX.Element {
+export function SkeletonArticleContainer(
+  props: SkeletonArticleContainerProps
+): JSX.Element {
   const styles = {
     margin: props.margin ?? 360,
     fontSize: props.fontSize ?? 20,
@@ -46,14 +48,14 @@ export function SkeletonArticleContainer(props: SkeletonArticleContainerProps):
             '--blockquote-icon-font-size': '1.7rem',
             '--figure-margin': '2.6875rem auto',
             '--hr-margin': '2em',
-            margin: `30px 0px`,
+            margin: `0px`,
           },
           '@md': {
-            maxWidth: 1024 - (styles.margin),
+            maxWidth: 1024 - styles.margin,
           },
           '@lg': {
-            margin: `30px 0`,
-            maxWidth: 1024 - (styles.margin),
+            margin: `0`,
+            maxWidth: 1024 - styles.margin,
           },
         }}
       >
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 9d8e3c555..f9162147c 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -319,7 +319,7 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
           },
         }}
       >
-        <AvatarDropdown userInitials="JH" />
+        <PrimaryDropdown />
       </HStack>
     </>
   )
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index eb9647df4..8029ff71f 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -38,6 +38,7 @@ import { useRegisterActions } from 'kbar'
 import { deleteLinkMutation } from '../../../lib/networking/mutations/deleteLinkMutation'
 import { ConfirmationModal } from '../../../components/patterns/ConfirmationModal'
 import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
+import { ReaderHeader } from '../../../components/templates/reader/ReaderHeader'
 
 const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
   () => import('./../../../components/templates/article/PdfArticleContainer'),
@@ -291,6 +292,8 @@ export default function Home(): JSX.Element {
       />
       <Toaster />
 
+      <ReaderHeader />
+
       <VStack
         distribution="between"
         alignment="center"
diff --git a/packages/web/styles/articleInnerStyling.css b/packages/web/styles/articleInnerStyling.css
index 9fe007613..1b9b26c7f 100644
--- a/packages/web/styles/articleInnerStyling.css
+++ b/packages/web/styles/articleInnerStyling.css
@@ -142,7 +142,7 @@ on smaller screens we display the note icon
     color: var(--font-color-transparent);
   }
 
-  margin: 30px 0;
+  margin: 0;
   font-size: 0.75em;
   line-height: 1.5em;