From 448090b5341add7834ac8dd6e60b3b71c020638e Mon Sep 17 00:00:00 2001 From: Callil Capuozzo Date: Mon, 28 Nov 2022 09:35:05 -0500 Subject: [PATCH] style: Phase1 search polish (#5350) * Polish search bar * Additional search bar polish * Polish styles and breakpoints * Address comments * Address comments * Add useMemo * Remove transitions --- src/components/NavBar/SearchBar.css.ts | 92 +++++-------- src/components/NavBar/SearchBar.tsx | 182 ++++++++++++++++--------- src/components/NavBar/index.tsx | 6 +- src/components/NavBar/style.css.ts | 11 +- src/nft/css/sprinkles.css.ts | 3 + src/nft/themes/darkTheme.ts | 2 + src/nft/themes/lightTheme.ts | 2 + src/theme/colors.ts | 6 + 8 files changed, 167 insertions(+), 137 deletions(-) diff --git a/src/components/NavBar/SearchBar.css.ts b/src/components/NavBar/SearchBar.css.ts index 849e1d9802..e761c8268c 100644 --- a/src/components/NavBar/SearchBar.css.ts +++ b/src/components/NavBar/SearchBar.css.ts @@ -3,11 +3,11 @@ import { buttonTextSmall, subhead, subheadSmall } from 'nft/css/common.css' import { breakpoints, sprinkles, vars } from '../../nft/css/sprinkles.css' -const DESKTOP_NAVBAR_WIDTH = 360 -const DESKTOP_NAVBAR_WIDTH_L = 440 -const DESKTOP_NAVBAR_WIDTH_XL = 540 +const DESKTOP_NAVBAR_WIDTH = 330 +const DESKTOP_NAVBAR_WIDTH_MD = 360 +const DESKTOP_NAVBAR_WIDTH_L = 480 +const DESKTOP_NAVBAR_WIDTH_XL = 520 const DESKTOP_NAVBAR_WIDTH_XXL = 640 -const MAGNIFYING_GLASS_ICON_WIDTH = 28 const baseSearchStyle = style([ sprinkles({ @@ -15,12 +15,13 @@ const baseSearchStyle = style([ width: { sm: 'viewWidth' }, borderStyle: 'solid', borderWidth: '1px', - borderColor: 'backgroundOutline', + borderColor: 'searchOutline', }), { + backdropFilter: 'blur(60px)', '@media': { [`screen and (min-width: ${breakpoints.sm}px)`]: { - width: `${DESKTOP_NAVBAR_WIDTH}px`, + width: `${DESKTOP_NAVBAR_WIDTH_MD}px`, }, }, }, @@ -29,18 +30,20 @@ const baseSearchStyle = style([ const baseSearchNftStyle = style([ baseSearchStyle, { - borderWidth: '2px', '@media': { - [`screen and (min-width: 1024px) and (max-width: 1080px)`]: { - width: `${330}px`, + [`screen and (min-width: ${breakpoints.md}px)`]: { + width: `${DESKTOP_NAVBAR_WIDTH}px`, }, - [`screen and (min-width: 1190px) and (max-width: 1380px)`]: { + [`screen and (min-width: ${breakpoints.lg}px)`]: { + width: `${DESKTOP_NAVBAR_WIDTH_MD}px`, + }, + [`screen and (min-width: ${breakpoints.xl}px)`]: { width: `${DESKTOP_NAVBAR_WIDTH_L}px`, }, - [`screen and (min-width: 1380px) and (max-width: 1479px)`]: { + [`screen and (min-width: ${breakpoints.xxl}px)`]: { width: `${DESKTOP_NAVBAR_WIDTH_XL}px`, }, - [`screen and (min-width: ${1480}px)`]: { + [`screen and (min-width: ${breakpoints.xxxl}px)`]: { width: `${DESKTOP_NAVBAR_WIDTH_XXL}px`, }, }, @@ -54,14 +57,6 @@ export const searchBarContainer = style([ zIndex: '3', display: 'inline-block', }), - { - '@media': { - [`screen and (min-width: ${breakpoints.lg}px)`]: { - right: `-${DESKTOP_NAVBAR_WIDTH / 2 - MAGNIFYING_GLASS_ICON_WIDTH}px`, - top: '-3px', - }, - }, - }, ]) export const searchBarContainerNft = style([ @@ -72,43 +67,35 @@ export const searchBarContainerNft = style([ display: 'inline-block', }), { - '@media': { - [`screen and (min-width: ${breakpoints.lg}px)`]: { - right: `-${DESKTOP_NAVBAR_WIDTH / 2}px`, - top: '-6px', - }, - [`screen and (min-width: 1024px) and (max-width: 1080px)`]: { - right: `-${300 / 2}px`, - }, - [`screen and (min-width: 1190px) and (max-width: 1380px)`]: { - right: `-${DESKTOP_NAVBAR_WIDTH_L / 2}px`, - }, - [`screen and (min-width: 1380px) and (max-width: 1479px)`]: { - right: `-${DESKTOP_NAVBAR_WIDTH_XL / 2}px`, - }, - [`screen and (min-width: ${1480}px)`]: { - right: `-${DESKTOP_NAVBAR_WIDTH_XXL / 2}px`, - }, - }, + backdropFilter: 'blur(60px)', + borderRadius: '12px', + }, +]) + +export const searchBarContainerNftOpen = style([ + searchBarContainerNft, + { + boxShadow: vars.color.cardDropShadow, }, ]) export const searchBar = style([ baseSearchStyle, sprinkles({ - color: 'textTertiary', + color: 'textSecondary', paddingX: '16', - background: 'backgroundSurface', }), ]) export const nftSearchBar = style([ baseSearchNftStyle, sprinkles({ - color: 'textTertiary', + color: 'textSecondary', paddingX: '16', - background: 'backgroundSurface', }), + { + backdropFilter: 'blur(60px)', + }, ]) export const searchBarInput = style([ @@ -116,7 +103,7 @@ export const searchBarInput = style([ padding: '0', fontWeight: 'normal', fontSize: '16', - color: { default: 'textPrimary', placeholder: 'textTertiary' }, + color: { default: 'textPrimary', placeholder: 'textSecondary' }, border: 'none', background: 'none', lineHeight: '24', @@ -129,12 +116,9 @@ export const searchBarDropdown = style([ sprinkles({ borderBottomLeftRadius: '12', borderBottomRightRadius: '12', - background: 'backgroundSurface', height: { sm: 'viewHeight', md: 'auto' }, - }), - { borderTop: 'none', - }, + }), ]) export const searchBarDropdownNft = style([ @@ -142,10 +126,11 @@ export const searchBarDropdownNft = style([ sprinkles({ borderBottomLeftRadius: '12', borderBottomRightRadius: '12', - background: 'backgroundSurface', height: { sm: 'viewHeight', md: 'auto' }, + backgroundColor: 'backgroundSurface', }), { + backdropFilter: 'blur(60px)', borderTop: 'none', }, ]) @@ -243,9 +228,6 @@ export const notFoundContainer = style([ }), ]) -const visibilityTransition = `visibility ${vars.time[125]}, opacity ${vars.time[125]}` -const delayedTransitionProperties = `padding 0s ${vars.time[125]}, height 0s ${vars.time[125]}` - export const hidden = style([ sprinkles({ visibility: 'hidden', @@ -253,10 +235,6 @@ export const hidden = style([ padding: '0', height: '0', }), - { - transition: `${visibilityTransition}, ${delayedTransitionProperties}`, - transitionTimingFunction: 'ease-in', - }, ]) export const visible = style([ sprinkles({ @@ -264,10 +242,6 @@ export const visible = style([ opacity: '1', height: 'full', }), - { - transition: `${visibilityTransition}`, - transitionTimingFunction: 'ease-out', - }, ]) export const searchContentCentered = style({ diff --git a/src/components/NavBar/SearchBar.tsx b/src/components/NavBar/SearchBar.tsx index 016fda9301..a9308303a8 100644 --- a/src/components/NavBar/SearchBar.tsx +++ b/src/components/NavBar/SearchBar.tsx @@ -14,15 +14,32 @@ import { magicalGradientOnHover } from 'nft/css/common.css' import { useIsMobile, useIsTablet } from 'nft/hooks' import { fetchSearchCollections } from 'nft/queries' import { fetchSearchTokens } from 'nft/queries/genie/SearchTokensFetcher' -import { ChangeEvent, useEffect, useReducer, useRef, useState } from 'react' +import { ChangeEvent, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react' import { useQuery } from 'react-query' import { useLocation } from 'react-router-dom' +import styled from 'styled-components/macro' import { ChevronLeftIcon, MagnifyingGlassIcon, NavMagnifyingGlassIcon } from '../../nft/components/icons' import { NavIcon } from './NavIcon' import * as styles from './SearchBar.css' import { SearchBarDropdown } from './SearchBarDropdown' +const KeyShortCut = styled.div` + background-color: ${({ theme }) => theme.searchOutline}; + color: ${({ theme }) => theme.textSecondary}; + padding: 0px 8px; + width: 20px; + height: 20px; + border-radius: 4px; + font-size: 12px; + font-weight: 800; + line-height: 16px; + display: flex; + align-items: center; + opacity: 0.6; + backdrop-filter: blur(60px); +` + export const SearchBar = () => { const [isOpen, toggleOpen] = useReducer((state: boolean) => !state, false) const [searchValue, setSearchValue] = useState('') @@ -93,7 +110,6 @@ export const SearchBar = () => { } }, [isOpen]) - const placeholderText = phase1Flag === NftVariant.Enabled ? t`Search tokens and NFT collections` : t`Search tokens` const isMobileOrTablet = isMobile || isTablet const showCenteredSearchContent = !isOpen && phase1Flag !== NftVariant.Enabled && !isMobileOrTablet && searchValue.length === 0 @@ -105,78 +121,112 @@ export const SearchBar = () => { hasInput: debouncedSearchValue && debouncedSearchValue.length > 0, ...trace, } + const placeholderText = useMemo(() => { + return phase1Flag === NftVariant.Enabled + ? isMobileOrTablet + ? t`Search` + : t`Search tokens and NFT collections` + : t`Search tokens` + }, [phase1Flag, isMobileOrTablet]) + + const handleKeyPress = useCallback( + (event: any) => { + if (event.key === '/') { + event.preventDefault() + !isOpen && toggleOpen() + } + }, + [isOpen] + ) + + useEffect(() => { + const innerRef = inputRef.current + + if (innerRef !== null) { + //only mount the listener when input available as ref + document.addEventListener('keydown', handleKeyPress) + } + + return () => { + if (innerRef !== null) { + document.removeEventListener('keydown', handleKeyPress) + } + } + }, [handleKeyPress, inputRef]) return ( - - - + + !isOpen && toggleOpen()} + gap="12" > - !isOpen && toggleOpen()} - gap="12" - > - - - - - - - + + + + + + - - ) => { - !isOpen && toggleOpen() - setSearchValue(event.target.value) - }} - onBlur={() => sendAnalyticsEvent(EventName.NAVBAR_SEARCH_EXITED, navbarSearchEventProperties)} - className={`${styles.searchBarInput} ${ - showCenteredSearchContent ? styles.searchContentCentered : styles.searchContentLeftAlign - }`} - value={searchValue} - ref={inputRef} - width={phase1Flag === NftVariant.Enabled || isOpen ? 'full' : '160'} - /> - - - - {isOpen && ( - 0} - isLoading={tokensAreLoading || (collectionsAreLoading && phase1Flag === NftVariant.Enabled)} - /> - )} + + ) => { + !isOpen && toggleOpen() + setSearchValue(event.target.value) + }} + onBlur={() => sendAnalyticsEvent(EventName.NAVBAR_SEARCH_EXITED, navbarSearchEventProperties)} + className={`${styles.searchBarInput} ${ + showCenteredSearchContent ? styles.searchContentCentered : styles.searchContentLeftAlign + }`} + value={searchValue} + ref={inputRef} + width={phase1Flag === NftVariant.Enabled || isOpen ? 'full' : '160'} + /> + + {!isOpen && isPhase1 && /} + + + {isOpen && ( + 0} + isLoading={tokensAreLoading || (collectionsAreLoading && phase1Flag === NftVariant.Enabled)} + /> + )} + + {isMobileOrTablet && ( - - + )} + ) } diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx index 1d29a3eb1e..1688fcb94b 100644 --- a/src/components/NavBar/index.tsx +++ b/src/components/NavBar/index.tsx @@ -87,16 +87,16 @@ const Navbar = () => { )} - + - + - + diff --git a/src/components/NavBar/style.css.ts b/src/components/NavBar/style.css.ts index 3c34df4736..86a51270a7 100644 --- a/src/components/NavBar/style.css.ts +++ b/src/components/NavBar/style.css.ts @@ -29,14 +29,7 @@ export const logo = style([ }), ]) -export const baseContainer = style([ - sprinkles({ - alignItems: 'center', - }), -]) - export const baseSideContainer = style([ - baseContainer, sprinkles({ display: 'flex', width: 'full', @@ -53,12 +46,12 @@ export const leftSideContainer = style([ ]) export const middleContainer = style([ - baseContainer, sprinkles({ flex: '1', flexShrink: '1', - justifyContent: 'center', + justifyContent: { lg: 'flex-end', xl: 'center' }, display: { sm: 'none', xl: 'flex' }, + alignItems: 'flex-start', }), ]) diff --git a/src/nft/css/sprinkles.css.ts b/src/nft/css/sprinkles.css.ts index d1ee387897..ceece3e8e8 100644 --- a/src/nft/css/sprinkles.css.ts +++ b/src/nft/css/sprinkles.css.ts @@ -23,6 +23,9 @@ const themeContractValues = { modalBackdrop: '', + searchBackground: '', + searchOutline: '', + stateOverlayHover: '', textPrimary: '', diff --git a/src/nft/themes/darkTheme.ts b/src/nft/themes/darkTheme.ts index e5363199ce..2e8dc9efe1 100644 --- a/src/nft/themes/darkTheme.ts +++ b/src/nft/themes/darkTheme.ts @@ -22,6 +22,8 @@ export const darkTheme: Theme = { modalBackdrop: 'linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7))', + searchBackground: `rgba(255,255,255,0.07)`, + searchOutline: `rgba(255,255,255,0.07)`, stateOverlayHover: `rgba(153,161,189,0.08)`, textPrimary: '#FFFFFF', diff --git a/src/nft/themes/lightTheme.ts b/src/nft/themes/lightTheme.ts index 686500a4d2..6fd7d0b2da 100644 --- a/src/nft/themes/lightTheme.ts +++ b/src/nft/themes/lightTheme.ts @@ -19,6 +19,8 @@ export const lightTheme: Theme = { modalBackdrop: 'rgba(0, 0, 0, 0.3)', + searchBackground: `rgba(255,255,255,0.4)`, + searchOutline: `rgba(0,0,0,0.1)`, stateOverlayHover: `rgba(153,161,189,0.08)`, green: vars.color.green400, gold: vars.color.gold400, diff --git a/src/theme/colors.ts b/src/theme/colors.ts index c5f9b31bca..29392a6097 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -167,6 +167,9 @@ export const darkTheme = { stateOverlayHover: opacify(8, colors.gray300), stateOverlayPressed: opacify(24, colors.gray200), + + searchBackground: `rgba(255,255,255,0.07)`, + searchOutline: `rgba(255,255,255,0.07)`, } export const lightTheme: Theme = { @@ -218,4 +221,7 @@ export const lightTheme: Theme = { stateOverlayHover: opacify(8, colors.gray300), stateOverlayPressed: opacify(24, colors.gray200), + + searchBackground: opacify(4, colors.white), + searchOutline: opacify(1, colors.black), }