From c74f26a2f014c30a6c77c1fc136efe952c12706f Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 6 Mar 2023 15:39:03 +0800
Subject: [PATCH] Styling on the search button

---
 packages/web/components/elements/Button.tsx       | 14 ++++++++++++++
 .../templates/homeFeed/LibraryHeader.tsx          | 15 ++-------------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index 4f4eadbfc..a666c247b 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -259,6 +259,20 @@ export const IconButton = styled(Button, {
         width: 40,
         height: 40,
       },
+      searchButton: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        p: '0px',
+        mr: '5px',
+        width: '28px',
+        height: '28px',
+        color: '#898989',
+        border: 'unset',
+        background: '$thBackground',
+        boxSizing: 'border-box',
+        borderRadius: 6,
+      },
     },
   },
 })
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 1daae8f0c..f2da7f8cf 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -276,13 +276,7 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
             }}
           >
             <IconButton
-              css={{
-                p: '0px',
-                mr: '5px',
-                width: '28px',
-                height: '28px',
-                color: '#898989',
-              }}
+              style="searchButton"
               onClick={(event) => {
                 event.preventDefault()
                 setSearchTerm('')
@@ -306,12 +300,7 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
             }}
           >
             <IconButton
-              css={{
-                mr: '5px',
-                width: '28px',
-                height: '28px',
-                color: '#898989',
-              }}
+              style="searchButton"
               onClick={() =>
                 requestAnimationFrame(() => inputRef?.current?.focus())
               }