Padding an shadows for library grid

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)',
         },

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) => (

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',

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',