Inline search box

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

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