Merge pull request #2154 from omnivore-app/fix/title-size

Reduce the title font size

packages/web/components/elements/StyledText.tsx

@@ -60,9 +60,9 @@ const textVariants = {
     },
     articleTitle: {
       fontWeight: 'bold',
-      fontSize: '32px',
-      '@md': {
-        fontSize: '47px',
+      fontSize: '35px',
+      '@mdDown': {
+        fontSize: '25px',
       },
       margin: 0,
     },

packages/web/components/patterns/ArticleSubtitle.tsx

@@ -40,14 +40,28 @@ export function ArticleSubtitle(props: ArticleSubtitleProps): JSX.Element {
 }
 
 type ReaderSavedInfoProps = {
+  wordsCount?: number
   rawDisplayDate: string
 }
 
 export function ReaderSavedInfo(props: ReaderSavedInfoProps): JSX.Element {
   return (
     <Box>
-      <StyledText css={{ wordBreak: 'break-word', fontSize: '15' }}>
+      <StyledText
+        css={{
+          wordBreak: 'break-word',
+          fontSize: '15',
+          color: '$thTextSubtle2',
+          fontFamily: '$inter',
+        }}
+      >
         {formattedLongDate(props.rawDisplayDate)}{' '}
+        {props.wordsCount ?? 0 > 0
+          ? `  • ${Math.max(
+              1,
+              Math.round((props.wordsCount ?? 0) / 235)
+            )} min read`
+          : null}
       </StyledText>
     </Box>
   )

packages/web/components/templates/article/ArticleContainer.tsx

@@ -118,21 +118,16 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     props.highlightOnRelease
   )
   // iOS app embed can overide the original margin and line height
-  const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] = useState<
-    number | null
-  >(null)
-  const [lineHeightOverride, setLineHeightOverride] = useState<number | null>(
-    null
-  )
-  const [fontFamilyOverride, setFontFamilyOverride] = useState<string | null>(
-    null
-  )
-  const [highContrastTextOverride, setHighContrastTextOverride] = useState<
-    boolean | undefined
-  >(undefined)
-  const [justifyTextOverride, setJustifyTextOverride] = useState<
-    boolean | undefined
-  >(undefined)
+  const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] =
+    useState<number | null>(null)
+  const [lineHeightOverride, setLineHeightOverride] =
+    useState<number | null>(null)
+  const [fontFamilyOverride, setFontFamilyOverride] =
+    useState<string | null>(null)
+  const [highContrastTextOverride, setHighContrastTextOverride] =
+    useState<boolean | undefined>(undefined)
+  const [justifyTextOverride, setJustifyTextOverride] =
+    useState<boolean | undefined>(undefined)
   const highlightHref = useRef(
     window.location.hash ? window.location.hash.split('#')[1] : null
   )
@@ -403,6 +398,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
             rawDisplayDate={
               props.article.publishedAt ?? props.article.createdAt
             }
+            wordsCount={props.article.wordsCount}
           />
           <StyledText
             style="articleTitle"

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

@@ -270,7 +270,7 @@ const darkThemeSpec = {
     thBorderColor: '#4F4F4F',
     thBorderSubtle: '#6A6968',
 
-    thProgressFg: '#FFEA9F',
+    thProgressFg: '#FFD234',
 
     thHighContrast: '#D9D9D9',
   },

packages/web/lib/networking/fragments/articleFragment.ts

@@ -20,6 +20,7 @@ export const articleFragment = gql`
     description
     linkId
     state
+    wordsCount
   }
 `
 

packages/web/lib/networking/queries/useGetArticleQuery.tsx

@@ -48,6 +48,7 @@ export type ArticleAttributes = {
   createdAt: string
   publishedAt?: string
   description?: string
+  wordsCount?: number
   contentReader: ContentReader
   readingProgressPercent: number
   readingProgressTopPercent?: number