From 4fcb37995040720ea9dd01b6ea4cdad7ade76a9d Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 27 Sep 2022 10:20:14 +0800
Subject: [PATCH] A couple small font/color tweaks

---
 .../components/patterns/LibraryCards/LibraryGridCard.tsx   | 7 ++++---
 packages/web/components/tokens/stitches.config.ts          | 4 ++++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index e0d616270..88b11e166 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -33,14 +33,14 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           display: 'grid',
           gridTemplateColumns: '0.01fr 1fr 2fr 150px',
           gridTemplateRows: '1fr',
-          borderBottom: '1px solid $graySolid',
+          borderBottom: '1px solid $graySeparator',
           height: '45px',
         }}
       >
         <ProgressBarVertical
           fillPercentage={props.item.readingProgressPercent}
           fillColor={theme.colors.highlight.toString()}
-          backgroundColor={theme.colors.lightBorder.toString()}
+          backgroundColor={theme.colors.grayProgressBackground.toString()}
           borderRadius={
             props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
           }
@@ -86,7 +86,8 @@ function CardTitle(props: CardTitleProps): JSX.Element {
       data-testid="listTitle"
       css={{
         ...ellipsisText,
-        fontSize: '18px',
+        fontSize: '14px',
+        fontWeight: '600',
         textAlign: 'left',
       }}
     >
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 5694c0bcf..2fcf45ce5 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -125,6 +125,8 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         grayLine: 'hsl(0 0% 88.7%)',
         grayBorderHover: 'hsl(0 0% 78.0%)',
         grayText: '#3B3938',
+        graySeparator: '#DADADA',
+        grayProgressBackground: '#FFFFFF',
 
         // Semantic Colors
         highlightBackground: 'rgba(255, 210, 52, 0.65)',
@@ -196,6 +198,8 @@ const darkThemeSpec = {
     grayLine: 'hsl(0 0% 19.9%)',
     grayBorderHover: 'hsl(0 0% 31.2%)',
     grayText: '#CDCDCD',
+    graySeparator: '#323232',
+    grayProgressBackground: '#616161',
 
     // Semantic Colors
     highlightBackground: '#867740',