From 678f60823be79524e35e187c743ee293c1e84a49 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 3 Mar 2023 14:44:06 +0800
Subject: [PATCH] Inline search box

---
 packages/web/components/elements/Button.tsx   |  6 ++---
 .../templates/homeFeed/LibraryHeader.tsx      | 27 +++++++++++++++----
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index 121695bb3..4f4eadbfc 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -20,7 +20,7 @@ export const Button = styled('button', {
       },
       ctaDarkYellow: {
         border: '1px solid transparent',
-        fontSize: '10px',
+        fontSize: '13px',
         fontWeight: 500,
         fontFamily: 'Inter',
         borderRadius: '5px',
@@ -37,7 +37,7 @@ export const Button = styled('button', {
         },
       },
       cancelGeneric: {
-        fontSize: '10px',
+        fontSize: '13px',
         fontWeight: 500,
         fontFamily: 'Inter',
         cursor: 'pointer',
@@ -45,7 +45,7 @@ export const Button = styled('button', {
         borderRadius: '5px',
         border: '1px solid transparent',
         p: '10px 15px',
-        bg: '$grayBg',
+        bg: 'transparent',
         '&:hover': {
           bg: '#EBEBEB',
         },
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index e79ebe3af..ee4a88fdd 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -108,7 +108,18 @@ function SmallHeaderLayout(props: LibraryHeaderProps): JSX.Element {
       }}
     >
       {showInlineSearch ? (
-        <SearchBox {...props} compact={true} />
+        <HStack css={{ pl: '10px', pr: '0px', width: '100%' }}>
+          <SearchBox {...props} compact={true} />
+          <Button
+            style="cancelGeneric"
+            onClick={(event) => {
+              setShowInlineSearch(false)
+              event.preventDefault()
+            }}
+          >
+            Cancel
+          </Button>
+        </HStack>
       ) : (
         <>
           <MenuHeaderButton {...props} />
@@ -165,6 +176,14 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
   const [focused, setFocused] = useState(false)
   const [searchTerm, setSearchTerm] = useState(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) {
@@ -179,11 +198,9 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
         height: '38px',
         width: '100%',
         maxWidth: '521px',
-        bg: '$thBackground2',
+        bg: props.compact ? 'white' : '$thBackground2',
         borderRadius: '6px',
-        border: focused
-          ? '1px solid $omnivoreCtaYellow'
-          : '1px solid $thBorderColor',
+        border: border,
       }}
     >
       <HStack