From 94286c66764d8fd32579399ccf1430de0905a097 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 27 Jun 2023 13:14:13 +0800
Subject: [PATCH] clean up highlights layout to work with new highlight items

---
 .../web/components/patterns/HighlightView.tsx |  5 ++--
 .../templates/homeFeed/HighlightsLayout.tsx   | 27 ++++++-------------
 2 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx
index 6d7bc5777..fef8a662d 100644
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@@ -115,10 +115,9 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
                 m: '0px',
                 display: 'inline',
                 padding: '2px',
-                backgroundColor:
-                  'rgba(var(--colors-highlightBackground), 0.35)',
+                backgroundColor: 'rgba(var(--colors-highlightBackground), 1)',
                 boxShadow:
-                  '1px 0 0 rgba(var(--colors-highlightBackground), 0.35), -1px 0 0 rgba(var(--colors-highlightBackground), 0.35)',
+                  '1px 0 0 rgba(var(--colors-highlightBackground), 1), -1px 0 0 rgba(var(--colors-highlightBackground),1)',
                 boxDecorationBreak: 'clone',
                 borderRadius: '2px',
               },
diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
index 8184f40da..d1c0dbd17 100644
--- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
+++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
@@ -34,9 +34,8 @@ type HighlightItemsLayoutProps = {
 export function HighlightItemsLayout(
   props: HighlightItemsLayoutProps
 ): JSX.Element {
-  const [currentItem, setCurrentItem] = useState<LibraryItem | undefined>(
-    undefined
-  )
+  const [currentItem, setCurrentItem] =
+    useState<LibraryItem | undefined>(undefined)
 
   const listReducer = (
     state: LibraryItem[],
@@ -183,6 +182,7 @@ export function HighlightItemsLayout(
                 flexGrow: '1',
                 justifyContent: 'center',
                 overflowY: 'scroll',
+                bg: '$thLibrarySearchbox',
                 '@lgDown': {
                   display: 'none',
                   flexGrow: 'unset',
@@ -415,24 +415,11 @@ function HighlightList(props: HighlightListProps): JSX.Element {
       <HStack
         css={{
           width: '100%',
-          borderBottom: '1px solid $thBorderColor',
+          height: '100%',
         }}
         alignment="start"
-        distribution="center"
+        distribution="end"
       >
-        <StyledText
-          css={{
-            fontWeight: '600',
-            fontSize: '15px',
-            fontFamily: '$display',
-            width: '100%',
-            color: 'thTextContrast2',
-            m: '0px',
-            pb: '5px',
-          }}
-        >
-          NOTEBOOK
-        </StyledText>
         <Dropdown triggerElement={<MenuTrigger />}>
           <DropdownOption
             onSelect={() => {
@@ -442,7 +429,9 @@ function HighlightList(props: HighlightListProps): JSX.Element {
           />
         </Dropdown>
       </HStack>
-      <HStack css={{ width: '100%', height: '100%' }}>
+      <HStack
+        css={{ width: '100%', height: '100%', bg: '$thLibrarySearchbox' }}
+      >
         {props.viewer && (
           <NotebookContent
             viewer={props.viewer}