From 78abc6b5c44af3862cd2813c83b03c311243b9e8 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Wed, 24 Aug 2022 01:43:36 -0500
Subject: [PATCH 1/6] Feature 1079 -Updating list view to the latest design

---
 .../components/patterns/LibraryCards/LibraryGridCard.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 2fca52282..046b29f92 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -65,7 +65,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           }}
         >
           <CardTitle title={props.item.title} />
-          {/* <Box
+          <Box
             css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
             onClick={(e) => {
               // This is here to prevent menu click events from bubbling
@@ -85,9 +85,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={{ my: '0', mt: '-$2' }}>
             {props.item.author && (
               <SpanBox css={{ mr: '8px' }}>
@@ -98,7 +98,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
               {props.originText}
             </SpanBox>
           </StyledText>
-        </HStack> */}
+        </HStack>
       </VStack>
       <HStack
         alignment="start"

From fecaf5301e0678a7aaa12e23a2ea80354deb15fd Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Thu, 25 Aug 2022 19:51:09 -0500
Subject: [PATCH 2/6] Added some CSS to match the designs and enabled some
 layouts

---
 .../components/patterns/ArticleSubtitle.tsx   |  2 +-
 .../patterns/LibraryCards/LibraryGridCard.tsx | 39 ++++++++++++-------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/packages/web/components/patterns/ArticleSubtitle.tsx b/packages/web/components/patterns/ArticleSubtitle.tsx
index 96fe5e15e..007a3edf4 100644
--- a/packages/web/components/patterns/ArticleSubtitle.tsx
+++ b/packages/web/components/patterns/ArticleSubtitle.tsx
@@ -54,7 +54,7 @@ export function authoredByText(author: string): string {
   return `by ${removeHTMLTags(author)}`
 }
 
-function removeHTMLTags(str: string | null | undefined): string {
+export function removeHTMLTags(str: string | null | undefined): string {
   if (typeof str === 'string') {
     return str.replace(/(<([^>]+)>)/gi, '')
   } else {
diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 046b29f92..989283e4a 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -1,7 +1,7 @@
 import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { CoverImage } from '../../elements/CoverImage'
 import { StyledText } from '../../elements/StyledText'
-import { authoredByText } from '../ArticleSubtitle'
+import { removeHTMLTags } from '../ArticleSubtitle'
 import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
 import { theme } from '../../tokens/stitches.config'
 import { CardMenu } from '../CardMenu'
@@ -13,7 +13,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
   return (
     <VStack
       css={{
-        p: '12px', 
+        p: '12px',
         height: '100%',
         width: '100%',
         maxWidth: '100%',
@@ -88,14 +88,26 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           </Box>
         </HStack>
         <HStack alignment="start" distribution="between">
-          <StyledText style="caption" css={{ my: '0', mt: '-$2' }}>
+          <StyledText style="caption" css={{ mt: '-5px', fontWeight: '500' }}>
             {props.item.author && (
               <SpanBox css={{ mr: '8px' }}>
-                {authoredByText(props.item.author)}
+                {removeHTMLTags(props.item.author)} author
               </SpanBox>
             )}
-            <SpanBox css={{ textDecorationLine: 'underline' }}>
-              {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} origin
             </SpanBox>
           </StyledText>
         </HStack>
@@ -132,7 +144,6 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         >
           {props.item.description}
         </StyledText>
-
       </HStack>
       <Box css={{ display: 'block', py: '12px' }}>
         {props.item.labels?.map(({ name, color }, index) => (
@@ -140,13 +151,13 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         ))}
       </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'
-          }
-        />
+        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>
   )
 }

From 2a66829d247e7233c5b2295cefb5b845db54d893 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Thu, 25 Aug 2022 19:52:49 -0500
Subject: [PATCH 3/6] removed some hard coded testing text

---
 .../web/components/patterns/LibraryCards/LibraryGridCard.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 989283e4a..bf97f9d61 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -91,7 +91,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           <StyledText style="caption" css={{ mt: '-5px', fontWeight: '500' }}>
             {props.item.author && (
               <SpanBox css={{ mr: '8px' }}>
-                {removeHTMLTags(props.item.author)} author
+                {removeHTMLTags(props.item.author)}
               </SpanBox>
             )}
             <Box
@@ -107,7 +107,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             <SpanBox
               css={{ color: 'var(--colors-graySolid)' }}
             >
-              {props.originText} origin
+              {props.originText}
             </SpanBox>
           </StyledText>
         </HStack>

From 5e7b5868d8e765df9e32e39eb4728c88cd3b2a49 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Thu, 25 Aug 2022 19:55:58 -0500
Subject: [PATCH 4/6] added condition for the origin text

---
 .../patterns/LibraryCards/LibraryGridCard.tsx | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index bf97f9d61..bf8363047 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -94,21 +94,23 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
                 {removeHTMLTags(props.item.author)}
               </SpanBox>
             )}
-            <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>
+            {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>

From ffbcc9ed461f504085081d0617750c764ed8df1f Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Mon, 29 Aug 2022 21:28:20 -0500
Subject: [PATCH 5/6] Added condition for the image and increased font weight
 for the author

---
 .../web/components/patterns/LibraryCards/LibraryGridCard.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index bf8363047..96ab3b59c 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -30,7 +30,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         props.handleAction('showDetail')
       }}
     >
-      {props.item.image && (
+      {props.item.image && props.layout !== 'LIST_LAYOUT' && (
         <CoverImage
           src={props.item.image}
           alt="Link Preview Image"
@@ -88,7 +88,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           </Box>
         </HStack>
         <HStack alignment="start" distribution="between">
-          <StyledText style="caption" css={{ mt: '-5px', fontWeight: '500' }}>
+          <StyledText style="caption" css={{ mt: '-5px', fontWeight: '600' }}>
             {props.item.author && (
               <SpanBox css={{ mr: '8px' }}>
                 {removeHTMLTags(props.item.author)}

From ed5084eaf11a936fa53f7c02a3f078d54ed59427 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Mon, 29 Aug 2022 23:45:55 -0500
Subject: [PATCH 6/6] cleaning up layout for Author

---
 .../web/components/patterns/LibraryCards/LibraryGridCard.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 96ab3b59c..d42213806 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -88,9 +88,9 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           </Box>
         </HStack>
         <HStack alignment="start" distribution="between">
-          <StyledText style="caption" css={{ mt: '-5px', fontWeight: '600' }}>
+          <StyledText style="caption" css={{fontWeight: '600', margin: '5px 8px 5px 0' }}>
             {props.item.author && (
-              <SpanBox css={{ mr: '8px' }}>
+              <SpanBox>
                 {removeHTMLTags(props.item.author)}
               </SpanBox>
             )}