From ab17b9f2da1337f04bb15d79b1ff37f354092b9d Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Tue, 4 Oct 2022 13:03:55 -0500
Subject: [PATCH 1/3] Fix - Grid and List Layout

---
 .../patterns/LibraryCards/LibraryGridCard.tsx | 370 +++++++++++++++---
 .../templates/library/LibraryList.tsx         |   3 +-
 2 files changed, 312 insertions(+), 61 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 88b11e166..b52ebb69e 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -1,8 +1,11 @@
-import { VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
+import { Box, 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'
 
@@ -16,62 +19,244 @@ const ellipsisText = {
   margin: 'auto 0',
 }
 
+const cardTitleGridStyle = {
+  mt: '0',
+  mb: '0',
+  fontSize: '18px',
+  textAlign: 'left',
+  lineHeight: '1.25',
+  // whiteSpace: 'nowrap',
+  // textOverflow: 'ellipsis',
+  width: '100%',
+  // overflow: 'hidden',
+}
+
+const cardTitleListStyle = {
+  ...ellipsisText,
+  fontSize: '14px',
+  fontWeight: '600',
+  textAlign: 'left',
+}
+
 export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
   return (
-    <VStack
-      distribution="start"
-      alignment="start"
-      css={{
-        width: '100%',
-      }}
-    >
-      <HStack
-        alignment="start"
-        distribution="between"
-        css={{
-          width: '100%',
-          display: 'grid',
-          gridTemplateColumns: '0.01fr 1fr 2fr 150px',
-          gridTemplateRows: '1fr',
-          borderBottom: '1px solid $graySeparator',
-          height: '45px',
-        }}
-      >
-        <ProgressBarVertical
-          fillPercentage={props.item.readingProgressPercent}
-          fillColor={theme.colors.highlight.toString()}
-          backgroundColor={theme.colors.grayProgressBackground.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>
+    <>
+      {props.layout !== 'GRID_LAYOUT' ? (
+        //   <VStack
+        //     css={{
+        //       p: '12px',
+        //       height: '100%',
+        //       // width: '100%',
+        //       // maxWidth: '100%',
+        //       borderRadius: '8px',
+        //       cursor: 'pointer',
+        //       // wordBreak: 'break-word',
+        //       // overflow: 'clip',
+        //       border: '1px solid $libraryActiveMenuItem',
+        //       // position: 'relative',
+        //     }}
+        //     alignment="start"
+        //     distribution="start"
+        //     onClick={() => {
+        //       props.handleAction('showDetail')
+        //     }}
+        //   >
+        //     {/* {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',
+        //       }}
+        //     >
+        //       <HStack
+        //         alignment="start"
+        //         distribution="between"
+        //         css={{
+        //           width: '100%',
+        //           //p: '0px',
+        //           //mr: '-12px',
+        //           mt: '15px',
+        //           display: 'grid',
+        //           gridTemplateColumns: '1fr 24px',
+        //           gridTemplateRows: '1fr',
+        //         }}
+        //       >
+        //         <CardTitle title={props.item.title} />
+        //         <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>
+        //       <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)',
+        //                 }}
+        //               ></Box>
+        //               <SpanBox css={{ color: 'var(--colors-graySolid)' }}>
+        //                 {props.originText}
+        //               </SpanBox>
+        //             </>
+        //           )}
+        //         </StyledText>
+        //       </HStack>
+        //     </VStack>
+        //     <HStack
+        //       alignment="start"
+        //       distribution="between"
+        //       css={{
+        //         width: '100%',
+        //         pt: '$2',
+        //         px: '$1',
+        //         pr: '12px',
+        //         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' }}>
+        //       {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>
+        'jjjjjjjjjjjj'
+      ) : (
+        // )}
 
-        <StyledText
-          style="caption"
-          css={{ ...ellipsisText, fontWeight: '400' }}
+        // {props.layout === 'LIST_LAYOUT' && (
+        <VStack
+          distribution="start"
+          alignment="start"
+          css={{
+            width: '100%',
+          }}
         >
-          {props.item.author && (
-            <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
-          )}
-        </StyledText>
-      </HStack>
-    </VStack>
+          <HStack
+            alignment="start"
+            distribution="between"
+            css={{
+              width: '100%',
+              display: 'grid',
+              gridTemplateColumns: '0.01fr 1fr 2fr 150px',
+              gridTemplateRows: '1fr',
+              borderBottom: '1px solid $graySeparator',
+              height: '45px',
+            }}
+          >
+            <ProgressBarVertical
+              fillPercentage={props.item.readingProgressPercent}
+              fillColor={theme.colors.highlight.toString()}
+              backgroundColor={theme.colors.grayProgressBackground.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>
+
+            <StyledText
+              style="caption"
+              css={{ ...ellipsisText, fontWeight: '400' }}
+            >
+              {props.item.author && (
+                <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
+              )}
+            </StyledText>
+          </HStack>
+        </VStack>
+      )}
+    </>
   )
 }
 
@@ -79,19 +264,84 @@ type CardTitleProps = {
   title: string
 }
 
-function CardTitle(props: CardTitleProps): JSX.Element {
+function CardTitle(
+  props: CardTitleProps,
+  cardProps: LinkedItemCardProps
+): JSX.Element {
   return (
     <StyledText
       style="listTitle"
       data-testid="listTitle"
-      css={{
-        ...ellipsisText,
-        fontSize: '14px',
-        fontWeight: '600',
-        textAlign: 'left',
-      }}
+      css={
+        cardProps.layout === 'GRID_LAYOUT'
+          ? cardTitleGridStyle
+          : cardTitleListStyle
+      }
     >
       {props.title}
     </StyledText>
   )
 }
+
+// export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
+//   return (
+//     <VStack
+//       distribution="start"
+//       alignment="start"
+//       css={{
+//         width: '100%',
+//       }}
+//     >
+//       <HStack
+//         alignment="start"
+//         distribution="between"
+//         css={{
+//           width: '100%',
+//           display: 'grid',
+//           gridTemplateColumns: '0.01fr 1fr 2fr 150px',
+//           gridTemplateRows: '1fr',
+//           borderBottom: '1px solid $graySeparator',
+//           height: '45px',
+//         }}
+//       >
+//         <ProgressBarVertical
+//           fillPercentage={props.item.readingProgressPercent}
+//           fillColor={theme.colors.highlight.toString()}
+//           backgroundColor={theme.colors.grayProgressBackground.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>
+
+//         <StyledText
+//           style="caption"
+//           css={{ ...ellipsisText, fontWeight: '400' }}
+//         >
+//           {props.item.author && (
+//             <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
+//           )}
+//         </StyledText>
+//       </HStack>
+//     </VStack>
+//   )
+// }
+
+// type CardTitleProps = {
+//   title: string
+// }
diff --git a/packages/web/components/templates/library/LibraryList.tsx b/packages/web/components/templates/library/LibraryList.tsx
index d7ad55f3c..71c276e98 100644
--- a/packages/web/components/templates/library/LibraryList.tsx
+++ b/packages/web/components/templates/library/LibraryList.tsx
@@ -83,7 +83,8 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
           >
             {viewerData?.me && (
               <LibraryGridCard
-                layout={props.layoutCoordinator.layout}
+                //layout={props.layoutCoordinator.layout}
+                layout={'LIST_LAYOUT'}
                 item={linkedItem.node}
                 viewer={viewerData.me}
                 handleAction={(action: LinkedItemCardAction) => {

From b6173cdc2d230e96e1c093303eb34e736e152c33 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Thu, 6 Oct 2022 11:47:02 -0500
Subject: [PATCH 2/3] Fixed the problem about the layouts - Fresh look helps

---
 .../patterns/LibraryCards/LibraryGridCard.tsx | 424 ++++++++----------
 .../templates/library/LibraryList.tsx         |   3 +-
 2 files changed, 180 insertions(+), 247 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index b52ebb69e..ccc70ff39 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -38,167 +38,189 @@ const cardTitleListStyle = {
   textAlign: 'left',
 }
 
+// Props
+type CardTitleProps = {
+  title: string
+}
+
+// Functions
+function CardTitle(
+  props: CardTitleProps,
+  cardProps: LinkedItemCardProps
+): JSX.Element {
+  return (
+    <StyledText
+      style="listTitle"
+      data-testid="listTitle"
+      css={
+        cardProps.layout === 'GRID_LAYOUT'
+          ? cardTitleGridStyle
+          : cardTitleListStyle
+      }
+    >
+      {props.title}
+    </StyledText>
+  )
+}
+
+// Component
 export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
   return (
     <>
-      {props.layout !== 'GRID_LAYOUT' ? (
-        //   <VStack
-        //     css={{
-        //       p: '12px',
-        //       height: '100%',
-        //       // width: '100%',
-        //       // maxWidth: '100%',
-        //       borderRadius: '8px',
-        //       cursor: 'pointer',
-        //       // wordBreak: 'break-word',
-        //       // overflow: 'clip',
-        //       border: '1px solid $libraryActiveMenuItem',
-        //       // position: 'relative',
-        //     }}
-        //     alignment="start"
-        //     distribution="start"
-        //     onClick={() => {
-        //       props.handleAction('showDetail')
-        //     }}
-        //   >
-        //     {/* {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',
-        //       }}
-        //     >
-        //       <HStack
-        //         alignment="start"
-        //         distribution="between"
-        //         css={{
-        //           width: '100%',
-        //           //p: '0px',
-        //           //mr: '-12px',
-        //           mt: '15px',
-        //           display: 'grid',
-        //           gridTemplateColumns: '1fr 24px',
-        //           gridTemplateRows: '1fr',
-        //         }}
-        //       >
-        //         <CardTitle title={props.item.title} />
-        //         <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>
-        //       <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)',
-        //                 }}
-        //               ></Box>
-        //               <SpanBox css={{ color: 'var(--colors-graySolid)' }}>
-        //                 {props.originText}
-        //               </SpanBox>
-        //             </>
-        //           )}
-        //         </StyledText>
-        //       </HStack>
-        //     </VStack>
-        //     <HStack
-        //       alignment="start"
-        //       distribution="between"
-        //       css={{
-        //         width: '100%',
-        //         pt: '$2',
-        //         px: '$1',
-        //         pr: '12px',
-        //         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' }}>
-        //       {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>
-        'jjjjjjjjjjjj'
+      {props.layout === 'GRID_LAYOUT' ? (
+        <VStack
+          css={{
+            p: '12px',
+            height: '100%',
+            // width: '100%',
+            // maxWidth: '100%',
+            borderRadius: '8px',
+            cursor: 'pointer',
+            // wordBreak: 'break-word',
+            // overflow: 'clip',
+            border: '1px solid $libraryActiveMenuItem',
+            // position: 'relative',
+          }}
+          alignment="start"
+          distribution="start"
+          onClick={() => {
+            props.handleAction('showDetail')
+          }}
+        >
+          {/* {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',
+            }}
+          >
+            <HStack
+              alignment="start"
+              distribution="between"
+              css={{
+                width: '100%',
+                //p: '0px',
+                //mr: '-12px',
+                mt: '15px',
+                display: 'grid',
+                gridTemplateColumns: '1fr 24px',
+                gridTemplateRows: '1fr',
+              }}
+            >
+              <CardTitle title={props.item.title} />
+              <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>
+            <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)',
+                      }}
+                    ></Box>
+                    <SpanBox css={{ color: 'var(--colors-graySolid)' }}>
+                      {props.originText}
+                    </SpanBox>
+                  </>
+                )}
+              </StyledText>
+            </HStack>
+          </VStack>
+          <HStack
+            alignment="start"
+            distribution="between"
+            css={{
+              width: '100%',
+              pt: '$2',
+              px: '$1',
+              pr: '12px',
+              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' }}>
+            {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>
       ) : (
-        // )}
-
-        // {props.layout === 'LIST_LAYOUT' && (
         <VStack
           distribution="start"
           alignment="start"
@@ -237,11 +259,9 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
               }}
               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>
 
@@ -259,89 +279,3 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
     </>
   )
 }
-
-type CardTitleProps = {
-  title: string
-}
-
-function CardTitle(
-  props: CardTitleProps,
-  cardProps: LinkedItemCardProps
-): JSX.Element {
-  return (
-    <StyledText
-      style="listTitle"
-      data-testid="listTitle"
-      css={
-        cardProps.layout === 'GRID_LAYOUT'
-          ? cardTitleGridStyle
-          : cardTitleListStyle
-      }
-    >
-      {props.title}
-    </StyledText>
-  )
-}
-
-// export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
-//   return (
-//     <VStack
-//       distribution="start"
-//       alignment="start"
-//       css={{
-//         width: '100%',
-//       }}
-//     >
-//       <HStack
-//         alignment="start"
-//         distribution="between"
-//         css={{
-//           width: '100%',
-//           display: 'grid',
-//           gridTemplateColumns: '0.01fr 1fr 2fr 150px',
-//           gridTemplateRows: '1fr',
-//           borderBottom: '1px solid $graySeparator',
-//           height: '45px',
-//         }}
-//       >
-//         <ProgressBarVertical
-//           fillPercentage={props.item.readingProgressPercent}
-//           fillColor={theme.colors.highlight.toString()}
-//           backgroundColor={theme.colors.grayProgressBackground.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>
-
-//         <StyledText
-//           style="caption"
-//           css={{ ...ellipsisText, fontWeight: '400' }}
-//         >
-//           {props.item.author && (
-//             <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
-//           )}
-//         </StyledText>
-//       </HStack>
-//     </VStack>
-//   )
-// }
-
-// type CardTitleProps = {
-//   title: string
-// }
diff --git a/packages/web/components/templates/library/LibraryList.tsx b/packages/web/components/templates/library/LibraryList.tsx
index 71c276e98..d7ad55f3c 100644
--- a/packages/web/components/templates/library/LibraryList.tsx
+++ b/packages/web/components/templates/library/LibraryList.tsx
@@ -83,8 +83,7 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
           >
             {viewerData?.me && (
               <LibraryGridCard
-                //layout={props.layoutCoordinator.layout}
-                layout={'LIST_LAYOUT'}
+                layout={props.layoutCoordinator.layout}
                 item={linkedItem.node}
                 viewer={viewerData.me}
                 handleAction={(action: LinkedItemCardAction) => {

From 5bc3dec953ecc5a8d18de5da2077ffba89e01860 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Thu, 6 Oct 2022 12:45:43 -0500
Subject: [PATCH 3/3] Fixed all the layouts and cleaned up CSS for grid

---
 .../elements/ProgressBarVertical.tsx          |  1 +
 .../patterns/LibraryCards/LibraryGridCard.tsx | 78 ++++---------------
 2 files changed, 14 insertions(+), 65 deletions(-)

diff --git a/packages/web/components/elements/ProgressBarVertical.tsx b/packages/web/components/elements/ProgressBarVertical.tsx
index 9f87d789d..aaa451de7 100644
--- a/packages/web/components/elements/ProgressBarVertical.tsx
+++ b/packages/web/components/elements/ProgressBarVertical.tsx
@@ -17,6 +17,7 @@ export function ProgressBarVertical(props: ProgressBarVProps): JSX.Element {
         borderRadius: '$1',
         overflow: 'hidden',
         backgroundColor: props.backgroundColor,
+        mr: '12px',
       }}
     >
       <Box
diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index ccc70ff39..1d7962527 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -15,24 +15,13 @@ const ellipsisText = {
   display: '-webkit-box',
   WebkitLineClamp: 1,
   WebkitBoxOrient: 'vertical',
-  pl: '10px',
   margin: 'auto 0',
+  pr:'10px',
 }
 
-const cardTitleGridStyle = {
-  mt: '0',
-  mb: '0',
-  fontSize: '18px',
-  textAlign: 'left',
-  lineHeight: '1.25',
-  // whiteSpace: 'nowrap',
-  // textOverflow: 'ellipsis',
-  width: '100%',
-  // overflow: 'hidden',
-}
-
-const cardTitleListStyle = {
+const cardTitleStyle = {
   ...ellipsisText,
+  width:'100%',
   fontSize: '14px',
   fontWeight: '600',
   textAlign: 'left',
@@ -46,18 +35,9 @@ type CardTitleProps = {
 // Functions
 function CardTitle(
   props: CardTitleProps,
-  cardProps: LinkedItemCardProps
 ): JSX.Element {
   return (
-    <StyledText
-      style="listTitle"
-      data-testid="listTitle"
-      css={
-        cardProps.layout === 'GRID_LAYOUT'
-          ? cardTitleGridStyle
-          : cardTitleListStyle
-      }
-    >
+    <StyledText style="listTitle" data-testid="listTitle" css={cardTitleStyle}>
       {props.title}
     </StyledText>
   )
@@ -72,14 +52,10 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           css={{
             p: '12px',
             height: '100%',
-            // width: '100%',
-            // maxWidth: '100%',
             borderRadius: '8px',
             cursor: 'pointer',
-            // wordBreak: 'break-word',
-            // overflow: 'clip',
             border: '1px solid $libraryActiveMenuItem',
-            // position: 'relative',
+            mb: '15px',
           }}
           alignment="start"
           distribution="start"
@@ -87,43 +63,26 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             props.handleAction('showDetail')
           }}
         >
-          {/* {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',
+              width: '100%'
             }}
           >
             <HStack
               alignment="start"
               distribution="between"
               css={{
-                width: '100%',
-                //p: '0px',
-                //mr: '-12px',
-                mt: '15px',
                 display: 'grid',
                 gridTemplateColumns: '1fr 24px',
                 gridTemplateRows: '1fr',
+                width:'100%',
               }}
             >
               <CardTitle title={props.item.title} />
               <Box
-                css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
+                css={{ alignSelf: 'end', alignItems: 'end', height: '100%' }}
                 onClick={(e) => {
                   // This is here to prevent menu click events from bubbling
                   // up and causing us to "click" on the link item.
@@ -147,7 +106,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             <HStack alignment="start" distribution="between">
               <StyledText
                 style="caption"
-                css={{ fontWeight: '600', margin: '5px 8px 5px 0' }}
+                css={{ fontWeight: '600'}}
               >
                 {props.item.author && (
                   <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
@@ -176,28 +135,15 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             distribution="between"
             css={{
               width: '100%',
-              pt: '$2',
-              px: '$1',
-              pr: '12px',
-              mt: '7px',
-              flexGrow: '1',
+               pr: '12px',
+               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"
             >
@@ -220,7 +166,9 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             }
           />
         </VStack>
+
       ) : (
+        //  ELSE display List Layout
         <VStack
           distribution="start"
           alignment="start"