From 84dbc45bc5e9615abe5f151d5a43a7efd0c51eb5 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Sat, 24 Sep 2022 18:12:45 -0500
Subject: [PATCH 1/4] Compact List view Creation

---
 .../patterns/LibraryCards/LibraryGridCard.tsx | 94 ++++++++++---------
 1 file changed, 48 insertions(+), 46 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index d42213806..7c781ad27 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -1,10 +1,10 @@
 import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
-import { CoverImage } from '../../elements/CoverImage'
+// import { CoverImage } from '../../elements/CoverImage'
 import { StyledText } from '../../elements/StyledText'
 import { removeHTMLTags } from '../ArticleSubtitle'
-import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
+// import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
 import { theme } from '../../tokens/stitches.config'
-import { CardMenu } from '../CardMenu'
+// import { CardMenu } from '../CardMenu'
 import { LabelChip } from '../../elements/LabelChip'
 import { ProgressBar } from '../../elements/ProgressBar'
 import type { LinkedItemCardProps } from './CardTypes'
@@ -13,7 +13,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
   return (
     <VStack
       css={{
-        p: '12px',
+        // p: '12px',
         height: '100%',
         width: '100%',
         maxWidth: '100%',
@@ -30,7 +30,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         props.handleAction('showDetail')
       }}
     >
-      {props.item.image && props.layout !== 'LIST_LAYOUT' && (
+      {/* {props.item.image && props.layout !== 'LIST_LAYOUT' && (
         <CoverImage
           src={props.item.image}
           alt="Link Preview Image"
@@ -41,7 +41,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             ;(e.target as HTMLElement).style.display = 'none'
           }}
         />
-      )}
+      )} */}
       <VStack
         distribution="start"
         alignment="start"
@@ -56,16 +56,40 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           distribution="between"
           css={{
             width: '100%',
-            p: '0px',
-            mr: '-12px',
-            mt: '15px',
             display: 'grid',
-            gridTemplateColumns: '1fr 24px',
+            gridTemplateColumns: '1fr 2fr 150px',
             gridTemplateRows: '1fr',
           }}
         >
           <CardTitle title={props.item.title} />
-          <Box
+          <StyledText
+            css={{
+              color: '$grayTextContrast',
+              overflow: 'hidden',
+              display: '-webkit-box',
+              WebkitLineClamp: 1,
+              WebkitBoxOrient: 'vertical',
+              p: '0 10px 0 0',
+            }}
+            data-testid="listDesc"
+          >
+            {/* <Box css={{ display: 'block', py: '12px' }}> */}
+              {props.item.labels?.map(({ name, color }, index) => (
+                <LabelChip key={index} text={name || ''} color={color} />
+              ))}
+            {/* </Box> */}
+            {props.item.description}
+          </StyledText>
+
+          <StyledText
+            style="caption"
+            css={{ fontWeight: '600', margin: '5px 8px 5px 0' }}
+          >
+            {props.item.author && (
+              <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
+            )}
+          </StyledText>
+          {/* <Box
             css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
             onClick={(e) => {
               // This is here to prevent menu click events from bubbling
@@ -85,9 +109,9 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
               }
               actionHandler={props.handleAction}
             />
-          </Box>
+          </Box> */}
         </HStack>
-        <HStack alignment="start" distribution="between">
+        {/* <HStack alignment="start" distribution="between">
           <StyledText style="caption" css={{fontWeight: '600', margin: '5px 8px 5px 0' }}>
             {props.item.author && (
               <SpanBox>
@@ -112,7 +136,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
               </>
             )}
           </StyledText>
-        </HStack>
+        </HStack> */}
       </VStack>
       <HStack
         alignment="start"
@@ -122,36 +146,15 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           pt: '$2',
           px: '$1',
           pr: '12px',
-          mt: '7px',
+          // mt: '7px',
           flexGrow: '1',
         }}
-      >
-        <StyledText
-          css={{
-            m: 0,
-            py: '0px',
-            mr: '$2',
-            fontStyle: 'normal',
-            fontWeight: '400',
-            fontSize: '14px',
-            lineHeight: '125%',
-            color: '$grayTextContrast',
-            flexGrow: '4',
-            overflow: 'hidden',
-            display: '-webkit-box',
-            WebkitLineClamp: 5,
-            WebkitBoxOrient: 'vertical',
-          }}
-          data-testid="listDesc"
-        >
-          {props.item.description}
-        </StyledText>
-      </HStack>
-      <Box css={{ display: 'block', py: '12px' }}>
+      ></HStack>
+      {/* <Box css={{ display: 'block', py: '12px' }}>
         {props.item.labels?.map(({ name, color }, index) => (
           <LabelChip key={index} text={name || ''} color={color} />
         ))}
-      </Box>
+      </Box> */}
       <ProgressBar
         fillPercentage={props.item.readingProgressPercent}
         fillColor={theme.colors.highlight.toString()}
@@ -174,15 +177,14 @@ function CardTitle(props: CardTitleProps): JSX.Element {
       style="listTitle"
       data-testid="listTitle"
       css={{
-        mt: '0',
-        mb: '0',
         fontSize: '18px',
         textAlign: 'left',
-        lineHeight: '1.25',
-        // whiteSpace: 'nowrap',
-        // textOverflow: 'ellipsis',
-        width: '100%',
-        // overflow: 'hidden',
+        // lineHeight: '1.25',
+        overflow: 'hidden',
+        display: '-webkit-box',
+        WebkitLineClamp: 1,
+        WebkitBoxOrient: 'vertical',
+        p: '0 15px 0 0',
       }}
     >
       {props.title}

From efcfc1afdbb1b1cb1807f94c2b55d43a7bcf4481 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Mon, 26 Sep 2022 13:57:18 -0500
Subject: [PATCH 2/4] Compact list view completion

---
 .../elements/ProgressBarVertical.tsx          |  32 +++++
 .../patterns/LibraryCards/LibraryGridCard.tsx | 112 ++++++++++++------
 packages/web/styles/globals.css               |   6 +-
 3 files changed, 110 insertions(+), 40 deletions(-)
 create mode 100644 packages/web/components/elements/ProgressBarVertical.tsx

diff --git a/packages/web/components/elements/ProgressBarVertical.tsx b/packages/web/components/elements/ProgressBarVertical.tsx
new file mode 100644
index 000000000..9f87d789d
--- /dev/null
+++ b/packages/web/components/elements/ProgressBarVertical.tsx
@@ -0,0 +1,32 @@
+import { Box } from './../elements/LayoutPrimitives'
+
+type ProgressBarVProps = {
+  fillPercentage: number
+  fillColor: string
+  backgroundColor: string
+  borderRadius: string
+  height?: string
+}
+
+export function ProgressBarVertical(props: ProgressBarVProps): JSX.Element {
+  return (
+    <Box
+      css={{
+        height: props.height ?? '100%',
+        width: '2px',
+        borderRadius: '$1',
+        overflow: 'hidden',
+        backgroundColor: props.backgroundColor,
+      }}
+    >
+      <Box
+        css={{
+          height: `${props.fillPercentage}%`,
+          width: '100%',
+          backgroundColor: props.fillColor,
+          borderRadius: props.borderRadius,
+        }}
+      />
+    </Box>
+  )
+}
diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 7c781ad27..0219ebb60 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -6,18 +6,30 @@ import { removeHTMLTags } from '../ArticleSubtitle'
 import { theme } from '../../tokens/stitches.config'
 // import { CardMenu } from '../CardMenu'
 import { LabelChip } from '../../elements/LabelChip'
-import { ProgressBar } from '../../elements/ProgressBar'
+// import { ProgressBar } from '../../elements/ProgressBar'
 import type { LinkedItemCardProps } from './CardTypes'
+import { ProgressBarVertical } from '../../elements/ProgressBarVertical'
+
+//Styles
+const ellipsisText = {
+  overflow: 'hidden',
+  display: '-webkit-box',
+  WebkitLineClamp: 1,
+  WebkitBoxOrient: 'vertical',
+  pl: '10px',
+  margin: 'auto 0',
+}
 
 export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
   return (
-    <VStack
+    <>
+      {/* <VStack
       css={{
         // p: '12px',
-        height: '100%',
-        width: '100%',
-        maxWidth: '100%',
-        borderRadius: '8px',
+        // height: '100%',
+        // width: '100%',
+        // maxWidth: '100%',
+        borderRadius: '5px',
         cursor: 'pointer',
         wordBreak: 'break-word',
         overflow: 'clip',
@@ -29,7 +41,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
       onClick={() => {
         props.handleAction('showDetail')
       }}
-    >
+    > */}
       {/* {props.item.image && props.layout !== 'LIST_LAYOUT' && (
         <CoverImage
           src={props.item.image}
@@ -46,49 +58,71 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         distribution="start"
         alignment="start"
         css={{
-          px: '0px',
+          // px: '0px',
           width: '100%',
-          pl: '$1',
+          // pl: '$1',
         }}
       >
+        {/* <ProgressBar
+        fillPercentage={props.item.readingProgressPercent}
+        fillColor={theme.colors.highlight.toString()}
+        backgroundColor={theme.colors.lightBorder.toString()}
+        borderRadius={
+          props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
+        }
+      /> */}
         <HStack
           alignment="start"
           distribution="between"
           css={{
             width: '100%',
             display: 'grid',
-            gridTemplateColumns: '1fr 2fr 150px',
+            gridTemplateColumns: '0.01fr 1fr 2fr 150px',
             gridTemplateRows: '1fr',
+            borderBottom: '1px solid $graySolid',
+            height: '45px',
           }}
         >
+          <ProgressBarVertical
+            fillPercentage={props.item.readingProgressPercent}
+            fillColor={theme.colors.highlight.toString()}
+            backgroundColor={theme.colors.lightBorder.toString()}
+            borderRadius={
+              props.item.readingProgressPercent === 100
+                ? '0'
+                : '0px 8px 8px 0px'
+            }
+            height={'45px'}
+          />
           <CardTitle title={props.item.title} />
           <StyledText
             css={{
+              ...ellipsisText,
               color: '$grayTextContrast',
-              overflow: 'hidden',
-              display: '-webkit-box',
-              WebkitLineClamp: 1,
-              WebkitBoxOrient: 'vertical',
-              p: '0 10px 0 0',
+              // overflow: 'hidden',
+              // display: '-webkit-box',
+              // WebkitLineClamp: 1,
+              // WebkitBoxOrient: 'vertical',
             }}
             data-testid="listDesc"
           >
             {/* <Box css={{ display: 'block', py: '12px' }}> */}
-              {props.item.labels?.map(({ name, color }, index) => (
-                <LabelChip key={index} text={name || ''} color={color} />
-              ))}
+            {props.item.labels?.map(({ name, color }, index) => (
+              <LabelChip key={index} text={name || ''} color={color} />
+            ))}
             {/* </Box> */}
             {props.item.description}
           </StyledText>
 
           <StyledText
             style="caption"
-            css={{ fontWeight: '600', margin: '5px 8px 5px 0' }}
+            css={{ ...ellipsisText, fontWeight: '400' }}
           >
             {props.item.author && (
               <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
             )}
           </StyledText>
+
           {/* <Box
             css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
             onClick={(e) => {
@@ -111,6 +145,14 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             />
           </Box> */}
         </HStack>
+        {/* <ProgressBar
+        fillPercentage={props.item.readingProgressPercent}
+        fillColor={theme.colors.highlight.toString()}
+        backgroundColor={theme.colors.lightBorder.toString()}
+        borderRadius={
+          props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
+        }
+      /> */}
         {/* <HStack alignment="start" distribution="between">
           <StyledText style="caption" css={{fontWeight: '600', margin: '5px 8px 5px 0' }}>
             {props.item.author && (
@@ -138,32 +180,26 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           </StyledText>
         </HStack> */}
       </VStack>
-      <HStack
+      {/* <HStack
         alignment="start"
         distribution="between"
         css={{
           width: '100%',
-          pt: '$2',
-          px: '$1',
+          // pt: '$2',
+          // px: '$1',
           pr: '12px',
           // mt: '7px',
           flexGrow: '1',
         }}
-      ></HStack>
+      ></HStack> */}
       {/* <Box css={{ display: 'block', py: '12px' }}>
         {props.item.labels?.map(({ name, color }, index) => (
           <LabelChip key={index} text={name || ''} color={color} />
         ))}
       </Box> */}
-      <ProgressBar
-        fillPercentage={props.item.readingProgressPercent}
-        fillColor={theme.colors.highlight.toString()}
-        backgroundColor={theme.colors.lightBorder.toString()}
-        borderRadius={
-          props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
-        }
-      />
-    </VStack>
+
+      {/* </VStack> */}
+    </>
   )
 }
 
@@ -177,14 +213,16 @@ function CardTitle(props: CardTitleProps): JSX.Element {
       style="listTitle"
       data-testid="listTitle"
       css={{
+        ...ellipsisText,
         fontSize: '18px',
         textAlign: 'left',
         // lineHeight: '1.25',
-        overflow: 'hidden',
-        display: '-webkit-box',
-        WebkitLineClamp: 1,
-        WebkitBoxOrient: 'vertical',
-        p: '0 15px 0 0',
+        //overflow: 'hidden',
+        // display: '-webkit-box',
+        // WebkitLineClamp: 1,
+        // WebkitBoxOrient: 'vertical',
+        // // p: '0 15px 0 0',
+        // margin: 'auto',
       }}
     >
       {props.title}
diff --git a/packages/web/styles/globals.css b/packages/web/styles/globals.css
index f8da27b56..a74cbeeac 100644
--- a/packages/web/styles/globals.css
+++ b/packages/web/styles/globals.css
@@ -310,7 +310,7 @@ button {
   background-clip: padding-box;
 }
 
-.omnivore-masonry-grid_column > div {
-  /* background: grey; */
+/* .omnivore-masonry-grid_column > div {
+  background: grey;
   margin-bottom: 16px;
-}
\ No newline at end of file
+} */
\ No newline at end of file

From e805c5fade5e49346ed048df1ea6c3f4c0e1799d Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Mon, 26 Sep 2022 14:01:18 -0500
Subject: [PATCH 3/4] Removing commented out code and polish/clean up

---
 .../patterns/LibraryCards/LibraryGridCard.tsx | 229 ++++--------------
 1 file changed, 47 insertions(+), 182 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 0219ebb60..e0d616270 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -1,12 +1,8 @@
-import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
-// import { CoverImage } from '../../elements/CoverImage'
+import { VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
 import { removeHTMLTags } from '../ArticleSubtitle'
-// import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
 import { theme } from '../../tokens/stitches.config'
-// import { CardMenu } from '../CardMenu'
 import { LabelChip } from '../../elements/LabelChip'
-// import { ProgressBar } from '../../elements/ProgressBar'
 import type { LinkedItemCardProps } from './CardTypes'
 import { ProgressBarVertical } from '../../elements/ProgressBarVertical'
 
@@ -22,184 +18,60 @@ const ellipsisText = {
 
 export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
   return (
-    <>
-      {/* <VStack
-      css={{
-        // p: '12px',
-        // height: '100%',
-        // width: '100%',
-        // maxWidth: '100%',
-        borderRadius: '5px',
-        cursor: 'pointer',
-        wordBreak: 'break-word',
-        overflow: 'clip',
-        border: '1px solid $libraryActiveMenuItem',
-        position: 'relative',
-      }}
-      alignment="start"
+    <VStack
       distribution="start"
-      onClick={() => {
-        props.handleAction('showDetail')
+      alignment="start"
+      css={{
+        width: '100%',
       }}
-    > */}
-      {/* {props.item.image && props.layout !== 'LIST_LAYOUT' && (
-        <CoverImage
-          src={props.item.image}
-          alt="Link Preview Image"
-          width="100%"
-          height={160}
-          css={{ borderRadius: '8px' }}
-          onError={(e) => {
-            ;(e.target as HTMLElement).style.display = 'none'
-          }}
-        />
-      )} */}
-      <VStack
-        distribution="start"
-        alignment="start"
-        css={{
-          // px: '0px',
-          width: '100%',
-          // pl: '$1',
-        }}
-      >
-        {/* <ProgressBar
-        fillPercentage={props.item.readingProgressPercent}
-        fillColor={theme.colors.highlight.toString()}
-        backgroundColor={theme.colors.lightBorder.toString()}
-        borderRadius={
-          props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
-        }
-      /> */}
-        <HStack
-          alignment="start"
-          distribution="between"
-          css={{
-            width: '100%',
-            display: 'grid',
-            gridTemplateColumns: '0.01fr 1fr 2fr 150px',
-            gridTemplateRows: '1fr',
-            borderBottom: '1px solid $graySolid',
-            height: '45px',
-          }}
-        >
-          <ProgressBarVertical
-            fillPercentage={props.item.readingProgressPercent}
-            fillColor={theme.colors.highlight.toString()}
-            backgroundColor={theme.colors.lightBorder.toString()}
-            borderRadius={
-              props.item.readingProgressPercent === 100
-                ? '0'
-                : '0px 8px 8px 0px'
-            }
-            height={'45px'}
-          />
-          <CardTitle title={props.item.title} />
-          <StyledText
-            css={{
-              ...ellipsisText,
-              color: '$grayTextContrast',
-              // overflow: 'hidden',
-              // display: '-webkit-box',
-              // WebkitLineClamp: 1,
-              // WebkitBoxOrient: 'vertical',
-            }}
-            data-testid="listDesc"
-          >
-            {/* <Box css={{ display: 'block', py: '12px' }}> */}
-            {props.item.labels?.map(({ name, color }, index) => (
-              <LabelChip key={index} text={name || ''} color={color} />
-            ))}
-            {/* </Box> */}
-            {props.item.description}
-          </StyledText>
-
-          <StyledText
-            style="caption"
-            css={{ ...ellipsisText, fontWeight: '400' }}
-          >
-            {props.item.author && (
-              <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
-            )}
-          </StyledText>
-
-          {/* <Box
-            css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
-            onClick={(e) => {
-              // This is here to prevent menu click events from bubbling
-              // up and causing us to "click" on the link item.
-              e.stopPropagation()
-            }}
-          >
-            <CardMenu
-              item={props.item}
-              viewer={props.viewer}
-              triggerElement={
-                <MoreOptionsIcon
-                  size={24}
-                  strokeColor={theme.colors.grayTextContrast.toString()}
-                  orientation="horizontal"
-                />
-              }
-              actionHandler={props.handleAction}
-            />
-          </Box> */}
-        </HStack>
-        {/* <ProgressBar
-        fillPercentage={props.item.readingProgressPercent}
-        fillColor={theme.colors.highlight.toString()}
-        backgroundColor={theme.colors.lightBorder.toString()}
-        borderRadius={
-          props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
-        }
-      /> */}
-        {/* <HStack alignment="start" distribution="between">
-          <StyledText style="caption" css={{fontWeight: '600', margin: '5px 8px 5px 0' }}>
-            {props.item.author && (
-              <SpanBox>
-                {removeHTMLTags(props.item.author)}
-              </SpanBox>
-            )}
-            {props.originText && (
-              <>
-                <Box
-                  css={{
-                    height: '4px',
-                    width: '4px',
-                    borderRadius: '50%',
-                    display: 'inline-block',
-                    background: 'var(--colors-graySolid)',
-                    margin: '1px',
-                  }}
-                ></Box>
-                <SpanBox css={{ color: 'var(--colors-graySolid)' }}>
-                  {props.originText}
-                </SpanBox>
-              </>
-            )}
-          </StyledText>
-        </HStack> */}
-      </VStack>
-      {/* <HStack
+    >
+      <HStack
         alignment="start"
         distribution="between"
         css={{
           width: '100%',
-          // pt: '$2',
-          // px: '$1',
-          pr: '12px',
-          // mt: '7px',
-          flexGrow: '1',
+          display: 'grid',
+          gridTemplateColumns: '0.01fr 1fr 2fr 150px',
+          gridTemplateRows: '1fr',
+          borderBottom: '1px solid $graySolid',
+          height: '45px',
         }}
-      ></HStack> */}
-      {/* <Box css={{ display: 'block', py: '12px' }}>
-        {props.item.labels?.map(({ name, color }, index) => (
-          <LabelChip key={index} text={name || ''} color={color} />
-        ))}
-      </Box> */}
+      >
+        <ProgressBarVertical
+          fillPercentage={props.item.readingProgressPercent}
+          fillColor={theme.colors.highlight.toString()}
+          backgroundColor={theme.colors.lightBorder.toString()}
+          borderRadius={
+            props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
+          }
+          height={'45px'}
+        />
+        <CardTitle title={props.item.title} />
+        <StyledText
+          css={{
+            ...ellipsisText,
+            color: '$grayTextContrast',
+          }}
+          data-testid="listDesc"
+        >
+          {/* <Box css={{ display: 'block', py: '12px' }}> */}
+          {props.item.labels?.map(({ name, color }, index) => (
+            <LabelChip key={index} text={name || ''} color={color} />
+          ))}
+          {/* </Box> */}
+          {props.item.description}
+        </StyledText>
 
-      {/* </VStack> */}
-    </>
+        <StyledText
+          style="caption"
+          css={{ ...ellipsisText, fontWeight: '400' }}
+        >
+          {props.item.author && (
+            <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
+          )}
+        </StyledText>
+      </HStack>
+    </VStack>
   )
 }
 
@@ -216,13 +88,6 @@ function CardTitle(props: CardTitleProps): JSX.Element {
         ...ellipsisText,
         fontSize: '18px',
         textAlign: 'left',
-        // lineHeight: '1.25',
-        //overflow: 'hidden',
-        // display: '-webkit-box',
-        // WebkitLineClamp: 1,
-        // WebkitBoxOrient: 'vertical',
-        // // p: '0 15px 0 0',
-        // margin: 'auto',
       }}
     >
       {props.title}

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 4/4] 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',