fix: [Spore] polish search (#7297)

* Polish search bar styles

* fix hover state

* Change background to surface1

* update tests

* Update styles

src/components/NavBar/SearchBar.css.ts

@@ -11,7 +11,7 @@ const DESKTOP_NAVBAR_WIDTH_XXL = 640
 
 const baseSearchStyle = style([
   sprinkles({
-    paddingY: '12',
+    paddingY: '8',
     width: { sm: 'viewWidth' },
     borderStyle: 'solid',
     borderWidth: '1px',
@@ -61,7 +61,7 @@ export const searchBarContainerNft = style([
   }),
   {
     backdropFilter: 'blur(60px)',
-    borderRadius: '12px',
+    borderRadius: '16px',
   },
 ])
 
@@ -73,7 +73,7 @@ export const searchBar = style([
   baseSearchStyle,
   sprinkles({
     color: 'neutral2',
-    paddingX: '16',
+    paddingX: '12',
   }),
 ])
 
@@ -81,7 +81,7 @@ export const nftSearchBar = style([
   baseSearchNftStyle,
   sprinkles({
     color: 'neutral2',
-    paddingX: '16',
+    paddingX: '12',
   }),
   {
     backdropFilter: 'blur(60px)',
@@ -104,8 +104,8 @@ export const searchBarInput = style([
 export const searchBarDropdownNft = style([
   baseSearchNftStyle,
   sprinkles({
-    borderBottomLeftRadius: '12',
-    borderBottomRightRadius: '12',
+    borderBottomLeftRadius: '16',
+    borderBottomRightRadius: '16',
     height: { sm: 'viewHeight', md: 'auto' },
     backgroundColor: 'surface1',
   }),

src/components/NavBar/SearchBar.tsx

@@ -163,11 +163,11 @@ export const SearchBar = () => {
             !isOpen && !isMobile && magicalGradientOnHover,
             isMobileOrTablet && (isOpen ? styles.visible : styles.hidden)
           )}
-          borderRadius={isOpen || isMobileOrTablet ? undefined : '12'}
-          borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
-          borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
+          borderRadius={isOpen || isMobileOrTablet ? undefined : '16'}
+          borderTopRightRadius={isOpen && !isMobile ? '16' : undefined}
+          borderTopLeftRadius={isOpen && !isMobile ? '16' : undefined}
           borderBottomWidth={isOpen || isMobileOrTablet ? '0px' : '1px'}
-          backgroundColor={isOpen ? 'surface1' : 'surface2'}
+          backgroundColor={isOpen ? 'surface1' : 'surface1'}
           onClick={() => !isOpen && toggleOpen()}
           gap="12"
         >

src/components/NavBar/__snapshots__/SearchBar.test.tsx.snap

@@ -30,7 +30,7 @@ exports[`disable nft on searchbar should render text with nfts 1`] = `
     data-cy="search-bar"
   >
     <div
-      class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44r sprinkles_flexDirection_row_sm__rgw6ez46x sprinkles_alignItems_center_sm__rgw6ez3x sprinkles_borderRadius_12_default__rgw6ez80x sprinkles_borderBottomWidth_1px_default__rgw6ez89x sprinkles_backgroundColor_surface2_default__rgw6ez6rx sprinkles_gap_12_sm__rgw6ez3tf SearchBar_nftSearchBar__1fbf9sz9 SearchBar_baseSearchNftStyle__1fbf9sz2 SearchBar_baseSearchStyle__1fbf9sz1 SearchBar__1fbf9sz0 sprinkles_paddingTop_12_sm__rgw6ez2or sprinkles_paddingBottom_12_sm__rgw6ez289 sprinkles_width_viewWidth_sm__rgw6ez17l sprinkles_borderStyle_solid_default__rgw6ez7zp sprinkles_borderWidth_1px_default__rgw6ez895 sprinkles_borderColor_surface3_default__rgw6ez55f SearchBar__1fbf9sz8 sprinkles_paddingLeft_16_sm__rgw6ez2e3 sprinkles_paddingRight_16_sm__rgw6ez2jl sprinkles_color_neutral2_default__rgw6ez4bf common_magicalGradientOnHover__127l8hdb common_magicalGradient__127l8hda"
+      class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44r sprinkles_flexDirection_row_sm__rgw6ez46x sprinkles_alignItems_center_sm__rgw6ez3x sprinkles_borderRadius_16_default__rgw6ez815 sprinkles_borderBottomWidth_1px_default__rgw6ez89x sprinkles_backgroundColor_surface1_default__rgw6ez6rr sprinkles_gap_12_sm__rgw6ez3tf SearchBar_nftSearchBar__1fbf9sz9 SearchBar_baseSearchNftStyle__1fbf9sz2 SearchBar_baseSearchStyle__1fbf9sz1 SearchBar__1fbf9sz0 sprinkles_paddingTop_8_sm__rgw6ez2of sprinkles_paddingBottom_8_sm__rgw6ez27x sprinkles_width_viewWidth_sm__rgw6ez17l sprinkles_borderStyle_solid_default__rgw6ez7zp sprinkles_borderWidth_1px_default__rgw6ez895 sprinkles_borderColor_surface3_default__rgw6ez55f SearchBar__1fbf9sz8 sprinkles_paddingLeft_12_sm__rgw6ez2dr sprinkles_paddingRight_12_sm__rgw6ez2j9 sprinkles_color_neutral2_default__rgw6ez4bf common_magicalGradientOnHover__127l8hdb common_magicalGradient__127l8hda"
     >
       <div
         class="reset_base__1klryar0 SearchBar_searchContentLeftAlign__1fbf9sz10"
@@ -120,7 +120,7 @@ exports[`disable nft on searchbar should render text without nfts 1`] = `
     data-cy="search-bar"
   >
     <div
-      class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44r sprinkles_flexDirection_row_sm__rgw6ez46x sprinkles_alignItems_center_sm__rgw6ez3x sprinkles_borderRadius_12_default__rgw6ez80x sprinkles_borderBottomWidth_1px_default__rgw6ez89x sprinkles_backgroundColor_surface2_default__rgw6ez6rx sprinkles_gap_12_sm__rgw6ez3tf SearchBar_nftSearchBar__1fbf9sz9 SearchBar_baseSearchNftStyle__1fbf9sz2 SearchBar_baseSearchStyle__1fbf9sz1 SearchBar__1fbf9sz0 sprinkles_paddingTop_12_sm__rgw6ez2or sprinkles_paddingBottom_12_sm__rgw6ez289 sprinkles_width_viewWidth_sm__rgw6ez17l sprinkles_borderStyle_solid_default__rgw6ez7zp sprinkles_borderWidth_1px_default__rgw6ez895 sprinkles_borderColor_surface3_default__rgw6ez55f SearchBar__1fbf9sz8 sprinkles_paddingLeft_16_sm__rgw6ez2e3 sprinkles_paddingRight_16_sm__rgw6ez2jl sprinkles_color_neutral2_default__rgw6ez4bf common_magicalGradientOnHover__127l8hdb common_magicalGradient__127l8hda"
+      class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44r sprinkles_flexDirection_row_sm__rgw6ez46x sprinkles_alignItems_center_sm__rgw6ez3x sprinkles_borderRadius_16_default__rgw6ez815 sprinkles_borderBottomWidth_1px_default__rgw6ez89x sprinkles_backgroundColor_surface1_default__rgw6ez6rr sprinkles_gap_12_sm__rgw6ez3tf SearchBar_nftSearchBar__1fbf9sz9 SearchBar_baseSearchNftStyle__1fbf9sz2 SearchBar_baseSearchStyle__1fbf9sz1 SearchBar__1fbf9sz0 sprinkles_paddingTop_8_sm__rgw6ez2of sprinkles_paddingBottom_8_sm__rgw6ez27x sprinkles_width_viewWidth_sm__rgw6ez17l sprinkles_borderStyle_solid_default__rgw6ez7zp sprinkles_borderWidth_1px_default__rgw6ez895 sprinkles_borderColor_surface3_default__rgw6ez55f SearchBar__1fbf9sz8 sprinkles_paddingLeft_12_sm__rgw6ez2dr sprinkles_paddingRight_12_sm__rgw6ez2j9 sprinkles_color_neutral2_default__rgw6ez4bf common_magicalGradientOnHover__127l8hdb common_magicalGradient__127l8hda"
     >
       <div
         class="reset_base__1klryar0 SearchBar_searchContentLeftAlign__1fbf9sz10"

src/components/NavBar/__snapshots__/SearchBarDropdown.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`disable nft on searchbar dropdown should not render popular nft collections 1`] = `
 <div>
   <div
-    class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44r sprinkles_flexDirection_column_sm__rgw6ez473 sprinkles_overflow_hidden_default__rgw6ez8bh SearchBar_searchBarDropdownNft__1fbf9szd SearchBar_baseSearchNftStyle__1fbf9sz2 SearchBar_baseSearchStyle__1fbf9sz1 SearchBar__1fbf9sz0 sprinkles_paddingTop_12_sm__rgw6ez2or sprinkles_paddingBottom_12_sm__rgw6ez289 sprinkles_width_viewWidth_sm__rgw6ez17l sprinkles_borderStyle_solid_default__rgw6ez7zp sprinkles_borderWidth_1px_default__rgw6ez895 sprinkles_borderColor_surface3_default__rgw6ez55f SearchBar__1fbf9szc sprinkles_borderBottomLeftRadius_12_default__rgw6ez85l sprinkles_borderBottomRightRadius_12_default__rgw6ez875 sprinkles_height_viewHeight_sm__rgw6ez1ef sprinkles_height_auto_md__rgw6ez1es sprinkles_backgroundColor_surface1_default__rgw6ez6rr SearchBar__1fbf9sze sprinkles_overflowY_auto_default__rgw6ez8d1"
+    class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44r sprinkles_flexDirection_column_sm__rgw6ez473 sprinkles_overflow_hidden_default__rgw6ez8bh SearchBar_searchBarDropdownNft__1fbf9szd SearchBar_baseSearchNftStyle__1fbf9sz2 SearchBar_baseSearchStyle__1fbf9sz1 SearchBar__1fbf9sz0 sprinkles_paddingTop_8_sm__rgw6ez2of sprinkles_paddingBottom_8_sm__rgw6ez27x sprinkles_width_viewWidth_sm__rgw6ez17l sprinkles_borderStyle_solid_default__rgw6ez7zp sprinkles_borderWidth_1px_default__rgw6ez895 sprinkles_borderColor_surface3_default__rgw6ez55f SearchBar__1fbf9szc sprinkles_borderBottomLeftRadius_16_default__rgw6ez85t sprinkles_borderBottomRightRadius_16_default__rgw6ez87d sprinkles_height_viewHeight_sm__rgw6ez1ef sprinkles_height_auto_md__rgw6ez1es sprinkles_backgroundColor_surface1_default__rgw6ez6rr SearchBar__1fbf9sze sprinkles_overflowY_auto_default__rgw6ez8d1"
   >
     <div
       class="reset_base__1klryar0 sprinkles_opacity_1_sm__rgw6ez4b3 sprinkles_transition_125_default__rgw6ez8dx"
@@ -123,7 +123,7 @@ exports[`disable nft on searchbar dropdown should not render popular nft collect
 exports[`disable nft on searchbar dropdown should render popular nft collections 1`] = `
 <div>
   <div
-    class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44r sprinkles_flexDirection_column_sm__rgw6ez473 sprinkles_overflow_hidden_default__rgw6ez8bh SearchBar_searchBarDropdownNft__1fbf9szd SearchBar_baseSearchNftStyle__1fbf9sz2 SearchBar_baseSearchStyle__1fbf9sz1 SearchBar__1fbf9sz0 sprinkles_paddingTop_12_sm__rgw6ez2or sprinkles_paddingBottom_12_sm__rgw6ez289 sprinkles_width_viewWidth_sm__rgw6ez17l sprinkles_borderStyle_solid_default__rgw6ez7zp sprinkles_borderWidth_1px_default__rgw6ez895 sprinkles_borderColor_surface3_default__rgw6ez55f SearchBar__1fbf9szc sprinkles_borderBottomLeftRadius_12_default__rgw6ez85l sprinkles_borderBottomRightRadius_12_default__rgw6ez875 sprinkles_height_viewHeight_sm__rgw6ez1ef sprinkles_height_auto_md__rgw6ez1es sprinkles_backgroundColor_surface1_default__rgw6ez6rr SearchBar__1fbf9sze sprinkles_overflowY_auto_default__rgw6ez8d1"
+    class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44r sprinkles_flexDirection_column_sm__rgw6ez473 sprinkles_overflow_hidden_default__rgw6ez8bh SearchBar_searchBarDropdownNft__1fbf9szd SearchBar_baseSearchNftStyle__1fbf9sz2 SearchBar_baseSearchStyle__1fbf9sz1 SearchBar__1fbf9sz0 sprinkles_paddingTop_8_sm__rgw6ez2of sprinkles_paddingBottom_8_sm__rgw6ez27x sprinkles_width_viewWidth_sm__rgw6ez17l sprinkles_borderStyle_solid_default__rgw6ez7zp sprinkles_borderWidth_1px_default__rgw6ez895 sprinkles_borderColor_surface3_default__rgw6ez55f SearchBar__1fbf9szc sprinkles_borderBottomLeftRadius_16_default__rgw6ez85t sprinkles_borderBottomRightRadius_16_default__rgw6ez87d sprinkles_height_viewHeight_sm__rgw6ez1ef sprinkles_height_auto_md__rgw6ez1es sprinkles_backgroundColor_surface1_default__rgw6ez6rr SearchBar__1fbf9sze sprinkles_overflowY_auto_default__rgw6ez8d1"
   >
     <div
       class="reset_base__1klryar0 sprinkles_opacity_1_sm__rgw6ez4b3 sprinkles_transition_125_default__rgw6ez8dx"

src/components/NavBar/style.css.ts

@@ -43,9 +43,10 @@ export const searchContainer = style([
     justifyContent: { lg: 'flex-end', xl: 'center' },
     display: { sm: 'none' },
     alignSelf: 'center',
-    height: '48',
+
     alignItems: 'flex-start',
   }),
+  { height: '42px' },
 ])
 
 export const rightSideContainer = style([

src/nft/css/common.css.ts

@@ -28,7 +28,7 @@ const magicalGradient = style({
       content: '',
       position: 'absolute',
       inset: '-1px',
-      background: 'linear-gradient(91.46deg, #4673FA 0%, #9646FA 100.13%) border-box',
+      background: 'linear-gradient(45deg, #FC72FF80 0%, #FC72FF80 100.13%) border-box',
       borderColor: 'transparent',
       WebkitMask: 'linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);',
       WebkitMaskComposite: 'xor;',