From 030af76a42fd10a75106d8fb91e7a5979915a795 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 2 May 2023 11:01:06 +0800
Subject: [PATCH 1/4] Reduce the title font size

---
 packages/web/components/elements/StyledText.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx
index 84d74de37..e0b023572 100644
--- a/packages/web/components/elements/StyledText.tsx
+++ b/packages/web/components/elements/StyledText.tsx
@@ -60,10 +60,7 @@ const textVariants = {
     },
     articleTitle: {
       fontWeight: 'bold',
-      fontSize: '32px',
-      '@md': {
-        fontSize: '47px',
-      },
+      fontSize: '28px',
       margin: 0,
     },
     boldHeadline: {

From c7a735b2d05c6f33abe438fa14863fb7a21c215a Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 2 May 2023 11:55:33 +0800
Subject: [PATCH 2/4] Better font sizes for article titles

---
 packages/web/components/elements/StyledText.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx
index e0b023572..0d480266b 100644
--- a/packages/web/components/elements/StyledText.tsx
+++ b/packages/web/components/elements/StyledText.tsx
@@ -60,7 +60,10 @@ const textVariants = {
     },
     articleTitle: {
       fontWeight: 'bold',
-      fontSize: '28px',
+      fontSize: '35px',
+      '@mdDown': {
+        fontSize: '25px',
+      },
       margin: 0,
     },
     boldHeadline: {

From 2698bb0a246e7b3f7b5c92527776c79365247011 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 2 May 2023 11:56:09 +0800
Subject: [PATCH 3/4] Display read time on the reader view

---
 .../components/patterns/ArticleSubtitle.tsx   | 16 +++++++++++-
 .../templates/article/ArticleContainer.tsx    | 26 ++++++++-----------
 .../networking/fragments/articleFragment.ts   |  1 +
 .../networking/queries/useGetArticleQuery.tsx |  1 +
 4 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/packages/web/components/patterns/ArticleSubtitle.tsx b/packages/web/components/patterns/ArticleSubtitle.tsx
index afc6c949f..dbda5b69c 100644
--- a/packages/web/components/patterns/ArticleSubtitle.tsx
+++ b/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>
   )
diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx
index d258836c3..2155c136e 100644
--- a/packages/web/components/templates/article/ArticleContainer.tsx
+++ b/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"
diff --git a/packages/web/lib/networking/fragments/articleFragment.ts b/packages/web/lib/networking/fragments/articleFragment.ts
index 47e093d50..a56740b65 100644
--- a/packages/web/lib/networking/fragments/articleFragment.ts
+++ b/packages/web/lib/networking/fragments/articleFragment.ts
@@ -20,6 +20,7 @@ export const articleFragment = gql`
     description
     linkId
     state
+    wordsCount
   }
 `
 
diff --git a/packages/web/lib/networking/queries/useGetArticleQuery.tsx b/packages/web/lib/networking/queries/useGetArticleQuery.tsx
index df8bc08cc..0924f6e74 100644
--- a/packages/web/lib/networking/queries/useGetArticleQuery.tsx
+++ b/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

From e4776085ab6e52186621e7737baab24c120a992e Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 2 May 2023 13:30:11 +0800
Subject: [PATCH 4/4] Update progress bar colour for dark mode

---
 packages/web/components/tokens/stitches.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index fff708c39..e874edbe7 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -270,7 +270,7 @@ const darkThemeSpec = {
     thBorderColor: '#4F4F4F',
     thBorderSubtle: '#6A6968',
 
-    thProgressFg: '#FFEA9F',
+    thProgressFg: '#FFD234',
 
     thHighContrast: '#D9D9D9',
   },