From fa82a09c2e71dc584a5cff656b0d8d0b4303bcab Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 13 Jun 2024 15:25:29 +0800
Subject: [PATCH] Padding an shadows for library grid

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

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 1f551fdd4..5c99cbed3 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -72,7 +72,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         borderStyle: 'none',
         overflow: 'hidden',
         cursor: 'pointer',
-        border: '1px solid black',
+        border: props.legacyLayout ? 'unset' : '1px solid black',
         '@media (max-width: 930px)': {
           width: 'calc(100% - 30px)',
         },
diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index 7f1eff037..189579786 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -1182,7 +1182,6 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element {
         width: '100%',
         gridAutoRows: 'auto',
         borderRadius: '6px',
-        border: props.layout == 'LIST_LAYOUT' ? 'unset' : '1px solid black',
         gridGap: props.layout == 'LIST_LAYOUT' ? '10px' : '20px',
         marginTop: '10px',
         marginBottom: '0px',
@@ -1190,7 +1189,7 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element {
         paddingBottom: '0px',
         overflow: 'visible',
         px: '70px',
-        '@lgDown': {
+        '@xlgDown': {
           px: '10px',
         },
         '@mdDown': {
@@ -1200,7 +1199,7 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element {
         gridTemplateColumns:
           props.layout == 'LIST_LAYOUT'
             ? 'none'
-            : `repeat( auto-fit, minmax(300px, 1fr) )`,
+            : `repeat( auto-fit, minmax(280px, 1fr) )`,
       }}
     >
       {props.items.map((linkedItem) => (
diff --git a/packages/web/components/templates/library/LibraryHeader.tsx b/packages/web/components/templates/library/LibraryHeader.tsx
index b982c45de..416c50107 100644
--- a/packages/web/components/templates/library/LibraryHeader.tsx
+++ b/packages/web/components/templates/library/LibraryHeader.tsx
@@ -88,7 +88,9 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
           px: '70px',
           left: LIBRARY_LEFT_MENU_WIDTH,
           transition: 'height 0.5s',
-          '@lgDown': { px: '20px' },
+          '@xlgDown': {
+            px: '10px',
+          },
           '@mdDown': {
             px: '10px',
             left: '0px',
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 0ef397081..9a513cd0b 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -105,7 +105,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
       borderStyles: {},
       shadows: {
         // cardBoxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.05);',
-        cardBoxShadow: '0px 4px 4px rgba(0, 0, 0, 0.10);',
+        cardBoxShadow: '0px 4px 4px rgba(0, 0, 0, 0.20);',
       },
       zIndices: {},
       transitions: {},
@@ -273,7 +273,7 @@ const darkThemeSpec = {
     colorScheme: 'dark',
   },
   shadows: {
-    cardBoxShadow: '0px 4px 8px rgba(0, 0, 0, 0.20);',
+    cardBoxShadow: '0px 4px 8px rgba(0, 0, 0, 0.35);',
   },
   colors: {
     grayBase: '#252525',