Grid shadow, label picker colours

packages/web/components/elements/EditLabelChip.tsx

@@ -14,8 +14,10 @@ type EditLabelChipProps = {
 export function EditLabelLabelChip(props: EditLabelChipProps): JSX.Element {
   const isDark = isDarkTheme()
 
-  const selectedBorder = '#FFEA9F'
-  const unSelectedBorder = 'transparent'
+  const selectedBorder = isDark ? '#FFEA9F' : '#D9D9D9'
+  const unSelectedBorder = isDark ? 'transparent' : '#DEDEDE'
+  const xUnselectedColor = isDark ? '#6A6968' : '#DEDEDE'
+
   return (
     <SpanBox
       css={{
@@ -33,7 +35,7 @@ export function EditLabelLabelChip(props: EditLabelChipProps): JSX.Element {
         borderStyle: 'solid',
         color: isDark ? '#EBEBEB' : '#2A2A2A',
         borderColor: props.isSelected ? selectedBorder : unSelectedBorder,
-        backgroundColor: isDark ? '#2A2A2A' : '#F5F5F5',
+        backgroundColor: isDark ? '#2A2A2A' : '#F9F9F9',
       }}
     >
       <HStack alignment="center" css={{ gap: '7px' }}>
@@ -49,11 +51,7 @@ export function EditLabelLabelChip(props: EditLabelChipProps): JSX.Element {
         >
           <X
             size={14}
-            color={
-              props.isSelected
-                ? '#FFEA9F'
-                : theme.colors.thBorderSubtle.toString()
-            }
+            color={props.isSelected ? '#FFEA9F' : xUnselectedColor}
           />
         </Button>
       </HStack>

packages/web/components/elements/LabelsPicker.tsx

@@ -104,7 +104,7 @@ export const LabelsPicker = (props: LabelsPickerProps): JSX.Element => {
     <Box
       css={{
         display: 'inline-block',
-        bg: '#3D3D3D',
+        bg: '$thBackground2', // '#3D3D3D' '#D9D9D9',
         border: '1px transparent solid',
         borderRadius: '6px',
         verticalAlign: 'center',
@@ -112,7 +112,7 @@ export const LabelsPicker = (props: LabelsPickerProps): JSX.Element => {
         lineHeight: '2',
         width: '100%',
         cursor: 'text',
-        color: '#EBEBEB',
+        color: '$thTextContrast2',
         fontSize: '12px',
         fontFamily: '$inter',
         input: {

packages/web/components/templates/article/NotebookModal.tsx

@@ -80,8 +80,9 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element {
 
   return (
     <ModalRoot defaultOpen onOpenChange={handleClose}>
-      <ModalOverlay tabIndex={-1} />
+      <ModalOverlay />
       <ModalContent
+        tabIndex={-1}
         onInteractOutside={(event) => {
           event.preventDefault()
         }}

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -1092,13 +1092,17 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element {
         display: 'grid',
         width: '100%',
         gridAutoRows: 'auto',
-        borderRadius: '5px',
+        borderRadius: '6px',
         gridGap: props.layout == 'LIST_LAYOUT' ? '0' : '20px',
         marginTop: '10px',
         marginBottom: '0px',
         paddingTop: '0',
         paddingBottom: '0px',
         overflow: 'hidden',
+        boxShadow:
+          props.layout == 'LIST_LAYOUT'
+            ? '0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);'
+            : 'unset',
         '@xlgDown': {
           border: 'unset',
           borderRadius: props.layout == 'LIST_LAYOUT' ? 0 : undefined,

packages/web/components/templates/homeFeed/LibraryHeader.tsx

@@ -83,7 +83,7 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
           zIndex: 5,
           position: 'fixed',
           height: HEADER_HEIGHT,
-          bg: showBackground ? '$thBackground' : 'transparent',
+          bg: '$thLibraryBackground',
           '@mdDown': {
             left: '0px',
             right: '0',
@@ -242,14 +242,6 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
     setSearchTerm(props.searchTerm ?? '')
   }, [props.searchTerm])
 
-  const border = props.compact
-    ? focused
-      ? '1px solid $omnivoreCtaYellow'
-      : '1px solid black'
-    : focused
-    ? '1px solid $omnivoreCtaYellow'
-    : '1px solid $thBorderColor'
-
   useKeyboardShortcuts(
     searchBarCommands((action) => {
       if (action === 'focusSearchBar' && inputRef.current) {
@@ -270,7 +262,12 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
         maxWidth: '521px',
         bg: '$thLibrarySearchbox',
         borderRadius: '6px',
-        border: border,
+        border: focused
+          ? '2px solid $omnivoreCtaYellow'
+          : '2px solid transparent',
+        boxShadow: focused
+          ? 'none'
+          : '0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);',
       }}
     >
       <HStack