ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: [Spore] polish search (#7297)

Browse Source 
* Polish search bar styles

* fix hover state

* Change background to surface1

* update tests

* Update styles
This commit is contained in:
Callil Capuozzo 2023-09-16 10:22:38 -04:00 committed by GitHub
parent 22fd0cc7bb
commit 5414a7c7ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/NavBar/SearchBar.css.ts
View File

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

8
src/components/NavBar/SearchBar.tsx
View File

@ -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"
>

4
src/components/NavBar/__snapshots__/SearchBar.test.tsx.snap
View File

@ -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"

4
src/components/NavBar/__snapshots__/SearchBarDropdown.test.tsx.snap
View File

@ -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"

3
src/components/NavBar/style.css.ts
View File

@ -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([

2
src/nft/css/common.css.ts
View File

@ -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;',