feat: update search icon (#4459)

* feat: update search icon

* re add chevron on mobile

* icon uses currentColor

* icon uses currentColor
Co-authored-by: Charlie <charlie@uniswap.org>

src/components/NavBar/SearchBar.css.ts

@@ -134,14 +134,6 @@ export const suggestionIcon = sprinkles({
   flexShrink: '0',
 })
 
-export const magnifyingGlassIcon = style([
-  sprinkles({
-    width: '20',
-    height: '20',
-    marginRight: '12',
-  }),
-])
-
 export const sectionHeader = style([
   subheadSmall,
   sprinkles({

src/components/NavBar/SearchBar.tsx

@@ -339,12 +339,13 @@ export const SearchBar = () => {
           justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
           onFocus={() => !isOpen && toggleOpen()}
           onClick={() => !isOpen && toggleOpen()}
+          gap="12"
         >
           <Box display={{ mobile: 'none', tabletSm: 'flex' }}>
-            <MagnifyingGlassIcon className={styles.magnifyingGlassIcon} />
+            <MagnifyingGlassIcon />
           </Box>
-          <Box display={{ mobile: 'flex', tabletSm: 'none' }} color="blackBlue" onClick={toggleOpen}>
-            <ChevronLeftIcon className={styles.magnifyingGlassIcon} />
+          <Box display={{ mobile: 'flex', tabletSm: 'none' }} color="placeholder" onClick={toggleOpen}>
+            <ChevronLeftIcon />
           </Box>
           <Box
             as="input"

src/nft/components/icons.tsx

@@ -961,18 +961,11 @@ export const FilterIcon = (props: SVGProps) => (
 )
 
 export const MagnifyingGlassIcon = (props: SVGProps) => (
-  <svg {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      d="M20.9984 21.0004L16.6484 16.6504"
+      d="M15 15L11.2439 11.2439M12.3821 6.69106C12.3821 9.83414 9.83414 12.3821 6.69106 12.3821C3.54797 12.3821 1 9.83414 1 6.69106C1 3.54797 3.54797 1 6.69106 1C9.83414 1 12.3821 3.54797 12.3821 6.69106Z"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
@@ -1299,8 +1292,8 @@ export const PlusIconLarge = (props: SVGProps) => (
 )
 
 export const ChevronLeftIcon = (props: SVGProps) => (
-  <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M15 6L9 12L15 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  <svg width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M7 1L1 7L7 13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 )