From 61e27603769f4361546042568520b4dfe1c16ba1 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 30 Aug 2023 19:08:24 +0800
Subject: [PATCH 1/2] Improve the layout of grid cards in the library

---
 .../patterns/LibraryCards/LibraryGridCard.tsx  | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index c67705c52..0ba2db164 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -142,7 +142,7 @@ const GridImage = (props: GridImageProps): JSX.Element => {
       {props.isLoading && (
         <LoadingBarOverlay
           width="100%"
-          top={95}
+          top={145}
           bottomRadius={'0px'}
           fillColor={'rgba(60, 179, 113, 1)'}
         />
@@ -150,7 +150,7 @@ const GridImage = (props: GridImageProps): JSX.Element => {
       {(props.readingProgress ?? 0) > 0 && !props.isLoading && (
         <ProgressBarOverlay
           width="100%"
-          top={95}
+          top={145}
           value={props.readingProgress ?? 0}
           bottomRadius={'0px'}
         />
@@ -159,14 +159,14 @@ const GridImage = (props: GridImageProps): JSX.Element => {
         <FallbackImage
           title={props.title ?? 'Omnivore Fallback'}
           width="100%"
-          height="100px"
+          height="150px"
           fontSize="128px"
         />
       ) : (
         <CoverImage
           src={props.src}
           width="100%"
-          height={100}
+          height="150px"
           css={{
             bg: '$thBackground',
           }}
@@ -191,7 +191,7 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
 
   return (
     <VStack css={{ p: '0px', m: '0px', width: '100%' }}>
-      <Box css={{ position: 'relative', width: '100%', height: '100px' }}>
+      <Box css={{ position: 'relative', width: '100%', height: '150px' }}>
         <GridImage
           src={props.item.image}
           title={props.item.title}
@@ -256,7 +256,7 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
         <Box
           css={{
             ...TitleStyle,
-            mt: '10px',
+            mt: '5px',
           }}
         >
           {props.item.title}
@@ -265,7 +265,7 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
           css={{
             ...AuthorInfoStyle,
             mt: '5px',
-            mb: '20px',
+            mb: '15px',
           }}
         >
           {props.item.author}
@@ -276,13 +276,13 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
         <HStack
           distribution="start"
           alignment="start"
-          css={{ width: '100%', minHeight: '50px', pb: '10px' }}
+          css={{ width: '100%', minHeight: '50px', pb: '15px' }}
         >
           <HStack
             css={{
               display: 'block',
               minHeight: '35px',
-              marginLeft: '-2px', // offset because the chips have margin
+              marginLeft: '-4px', // offset because the chips have margin
             }}
           >
             {sortedLabels(props.item.labels).map(({ name, color }, index) => (

From 879a9510ae7ebe4b48cc3ccaccc110bdc3ca9cba Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 30 Aug 2023 19:51:03 +0800
Subject: [PATCH 2/2] Increase padding on empty library messages

---
 packages/web/components/templates/homeFeed/EmptyLibrary.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/templates/homeFeed/EmptyLibrary.tsx b/packages/web/components/templates/homeFeed/EmptyLibrary.tsx
index 92e04e1da..7e342ef24 100644
--- a/packages/web/components/templates/homeFeed/EmptyLibrary.tsx
+++ b/packages/web/components/templates/homeFeed/EmptyLibrary.tsx
@@ -101,7 +101,8 @@ export const ErrorBox = (props: HelpMessageProps) => {
         fontFamily: '$inter',
         fontWeight: '500',
         color: '$thTextContrast',
-        padding: '10px',
+        py: '10px',
+        px: '15px',
         '@smDown': {
           width: '100%',
         },