Article container fixes to new design, more header work

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']

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',

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}
           />

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,
           },
         }}
       >

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

@@ -319,7 +319,7 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
           },
         }}
       >
-        <AvatarDropdown userInitials="JH" />
+        <PrimaryDropdown />
       </HStack>
     </>
   )

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"

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;