feat: token selector design update (#4333)

* init

* selected base currency button

* add check icon

* theme background module change

* hover changes

* theme none

* additional padding

* hover default color from phil + feature flag

* checkmark style fixes

src/components/SearchModal/CommonBases.tsx

@@ -6,6 +6,7 @@ import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { AutoRow } from 'components/Row'
 import { COMMON_BASES } from 'constants/routing'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
@@ -17,21 +18,32 @@ const MobileWrapper = styled(AutoColumn)`
   `};
 `
 
-const BaseWrapper = styled.div<{ disable?: boolean }>`
-  border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.deprecated_bg3)};
-  border-radius: 10px;
+const BaseWrapper = styled.div<{ disable?: boolean; phase0Flag?: boolean }>`
+  border: 1px solid
+    ${({ theme, disable, phase0Flag }) =>
+      disable
+        ? phase0Flag
+          ? theme.accentAction
+          : theme.none
+        : phase0Flag
+        ? theme.backgroundOutline
+        : theme.deprecated_bg3};
+  border-radius: ${({ phase0Flag }) => (phase0Flag ? '16px' : '10px')};
   display: flex;
   padding: 6px;
+  padding-right: 12px;
 
   align-items: center;
   :hover {
     cursor: ${({ disable }) => !disable && 'pointer'};
-    background-color: ${({ theme, disable }) => !disable && theme.deprecated_bg2};
+    background-color: ${({ theme, disable, phase0Flag }) =>
+      (phase0Flag && theme.hoverDefault) || (!disable && theme.deprecated_bg2)};
   }
 
-  color: ${({ theme, disable }) => disable && theme.deprecated_text3};
-  background-color: ${({ theme, disable }) => disable && theme.deprecated_bg3};
-  filter: ${({ disable }) => disable && 'grayscale(1)'};
+  color: ${({ theme, disable, phase0Flag }) => disable && (phase0Flag ? theme.accentAction : theme.deprecated_text3)};
+  background-color: ${({ theme, disable, phase0Flag }) =>
+    disable && (phase0Flag ? theme.accentActionSoft : theme.deprecated_bg3)};
+  filter: ${({ disable, phase0Flag }) => disable && !phase0Flag && 'grayscale(1)'};
 `
 
 const formatAnalyticsEventProperties = (currency: Currency, searchQuery: string, isAddressSearch: string | false) => ({
@@ -60,6 +72,8 @@ export default function CommonBases({
   isAddressSearch: string | false
 }) {
   const bases = typeof chainId !== 'undefined' ? COMMON_BASES[chainId] ?? [] : []
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   return bases.length > 0 ? (
     <MobileWrapper gap="md">
@@ -80,6 +94,7 @@ export default function CommonBases({
                 onKeyPress={(e) => !isSelected && e.key === 'Enter' && onSelect(currency)}
                 onClick={() => !isSelected && onSelect(currency)}
                 disable={isSelected}
+                phase0Flag={phase0FlagEnabled}
                 key={currencyId(currency)}
               >
                 <CurrencyLogoFromList currency={currency} />

src/components/SearchModal/CurrencyList/index.tsx

@@ -10,6 +10,7 @@ import { checkWarning } from 'constants/tokenSafety'
 import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import useTheme from 'hooks/useTheme'
 import { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
+import { Check } from 'react-feather'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
@@ -33,6 +34,13 @@ function currencyKey(currency: Currency): string {
   return currency.isToken ? currency.address : 'ETHER'
 }
 
+const CheckIcon = styled(Check)`
+  height: 20px;
+  width: 20px;
+  margin-left: 4px;
+  color: ${({ theme }) => theme.accentAction};
+`
+
 const StyledBalanceText = styled(Text)`
   white-space: nowrap;
   overflow: hidden;
@@ -135,6 +143,7 @@ function CurrencyRow({
   const balance = useCurrencyBalance(account ?? undefined, currency)
   const warning = currency.isNative ? null : checkWarning(currency.address)
   const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   // only show add or remove buttons if not on selected list
   return (
@@ -146,6 +155,7 @@ function CurrencyRow({
     >
       <MenuItem
         tabIndex={0}
+        phase0Flag={phase0FlagEnabled}
         style={style}
         className={`token-item-${key}`}
         onKeyPress={(e) => (!isSelected && e.key === 'Enter' ? onSelect() : null)}
@@ -160,7 +170,7 @@ function CurrencyRow({
           <Row>
             <CurrencyName title={currency.name}>{currency.name}</CurrencyName>
 
-            {phase0Flag === Phase0Variant.Enabled && <TokenSafetyIcon warning={warning} />}
+            {phase0FlagEnabled && <TokenSafetyIcon warning={warning} />}
           </Row>
           <ThemedText.DeprecatedDarkGray ml="0px" fontSize={'12px'} fontWeight={300}>
             {!currency.isNative && !isOnSelectedList && customAdded ? (
@@ -175,10 +185,18 @@ function CurrencyRow({
             <TokenTags currency={currency} />
           </RowFixed>
         </Column>
-        {showCurrencyAmount && (
+        {showCurrencyAmount ? (
           <RowFixed style={{ justifySelf: 'flex-end' }}>
             {balance ? <Balance balance={balance} /> : account ? <Loader /> : null}
+            {phase0FlagEnabled && isSelected && <CheckIcon />}
           </RowFixed>
+        ) : (
+          phase0FlagEnabled &&
+          isSelected && (
+            <RowFixed style={{ justifySelf: 'flex-end' }}>
+              <CheckIcon />
+            </RowFixed>
+          )
         )}
       </MenuItem>
     </TraceEvent>

src/components/SearchModal/CurrencySearch.tsx

@@ -5,6 +5,7 @@ import { useWeb3React } from '@web3-react/core'
 import { EventName, ModalName } from 'components/AmplitudeAnalytics/constants'
 import { Trace } from 'components/AmplitudeAnalytics/Trace'
 import { sendEvent } from 'components/analytics'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import useDebounce from 'hooks/useDebounce'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'
@@ -30,7 +31,8 @@ import CurrencyList from './CurrencyList'
 import ImportRow from './ImportRow'
 import { PaddedColumn, SearchInput, Separator } from './styleds'
 
-const ContentWrapper = styled(Column)`
+const ContentWrapper = styled(Column)<{ phase0Flag?: boolean }>`
+  background-color: ${({ theme, phase0Flag }) => phase0Flag && theme.backgroundSurface};
   width: 100%;
   flex: 1 1;
   position: relative;
@@ -73,6 +75,9 @@ export function CurrencySearch({
   showImportView,
   setImportToken,
 }: CurrencySearchProps) {
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+
   const { chainId } = useWeb3React()
   const theme = useTheme()
 
@@ -191,7 +196,7 @@ export function CurrencySearch({
   }, [])
 
   return (
-    <ContentWrapper>
+    <ContentWrapper phase0Flag={phase0FlagEnabled}>
       <Trace name={EventName.TOKEN_SELECTOR_OPENED} modal={ModalName.TOKEN_SELECTOR} shouldLogImpression>
         <PaddedColumn gap="16px">
           <RowBetween>
@@ -206,6 +211,7 @@ export function CurrencySearch({
               id="token-search-input"
               placeholder={t`Search name or paste address`}
               autoComplete="off"
+              phase0Flag={phase0FlagEnabled}
               value={searchQuery}
               ref={inputRef as RefObject<HTMLInputElement>}
               onChange={handleInput}
@@ -222,7 +228,7 @@ export function CurrencySearch({
             />
           )}
         </PaddedColumn>
-        <Separator />
+        <Separator phase0Flag={phase0FlagEnabled} />
         {searchToken && !searchTokenIsAdded ? (
           <Column style={{ padding: '20px 0', height: '100%' }}>
             <ImportRow token={searchToken} showImportView={showImportView} setImportToken={setImportToken} />
@@ -256,9 +262,14 @@ export function CurrencySearch({
             </ThemedText.DeprecatedMain>
           </Column>
         )}
+        {!phase0FlagEnabled && (
           <Footer>
             <Row justify="center">
-            <ButtonText onClick={showManageView} color={theme.deprecated_primary1} className="list-token-manage-button">
+              <ButtonText
+                onClick={showManageView}
+                color={theme.deprecated_primary1}
+                className="list-token-manage-button"
+              >
                 <RowFixed>
                   <IconWrapper size="16px" marginRight="6px" stroke={theme.deprecated_primaryText1}>
                     <Edit />
@@ -270,6 +281,7 @@ export function CurrencySearch({
               </ButtonText>
             </Row>
           </Footer>
+        )}
       </Trace>
     </ContentWrapper>
   )

src/components/SearchModal/styleds.tsx

@@ -21,7 +21,7 @@ export const PaddedColumn = styled(AutoColumn)`
   padding: 20px;
 `
 
-export const MenuItem = styled(RowBetween)`
+export const MenuItem = styled(RowBetween)<{ phase0Flag?: boolean }>`
   padding: 4px 20px;
   height: 56px;
   display: grid;
@@ -30,42 +30,47 @@ export const MenuItem = styled(RowBetween)`
   cursor: ${({ disabled }) => !disabled && 'pointer'};
   pointer-events: ${({ disabled }) => disabled && 'none'};
   :hover {
-    background-color: ${({ theme, disabled }) => !disabled && theme.deprecated_bg2};
+    background-color: ${({ theme, disabled, phase0Flag }) =>
+      (phase0Flag && theme.hoverDefault) || (!disabled && theme.deprecated_bg2)};
   }
   opacity: ${({ disabled, selected }) => (disabled || selected ? 0.5 : 1)};
 `
 
-export const SearchInput = styled.input`
+export const SearchInput = styled.input<{ phase0Flag?: boolean }>`
   position: relative;
   display: flex;
   padding: 16px;
+  height: ${({ phase0Flag }) => phase0Flag && '40px'};
   align-items: center;
   width: 100%;
   white-space: nowrap;
   background: none;
+  background-color: ${({ theme, phase0Flag }) => phase0Flag && theme.backgroundModule};
   border: none;
   outline: none;
-  border-radius: 20px;
+  border-radius: ${({ phase0Flag }) => (phase0Flag ? '12px' : '20px')};
   color: ${({ theme }) => theme.deprecated_text1};
   border-style: solid;
-  border: 1px solid ${({ theme }) => theme.deprecated_bg3};
+  border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.deprecated_bg3)};
   -webkit-appearance: none;
 
-  font-size: 18px;
+  font-size: ${({ phase0Flag }) => (phase0Flag ? '16px' : '18px')};
 
   ::placeholder {
-    color: ${({ theme }) => theme.deprecated_text3};
+    color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.textTertiary : theme.deprecated_text3)};
+    font-size: ${({ phase0Flag }) => phase0Flag && '16px'};
   }
   transition: border 100ms;
   :focus {
-    border: 1px solid ${({ theme }) => theme.deprecated_primary1};
+    border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? 'transparent' : theme.deprecated_primary1)};
+    background-color: ${({ theme, phase0Flag }) => phase0Flag && theme.accentActionSoft};
     outline: none;
   }
 `
-export const Separator = styled.div`
+export const Separator = styled.div<{ phase0Flag?: boolean }>`
   width: 100%;
   height: 1px;
-  background-color: ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.deprecated_bg2)};
 `
 
 export const SeparatorDark = styled.div`

src/theme/index.tsx

@@ -113,6 +113,7 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors {
     flyoutDropShadow:
       '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.12)',
     hoverState: opacify(24, ColorsPalette.blue200),
+    hoverDefault: opacify(8, ColorsPalette.gray200),
   }
 }
 

src/theme/styled.d.ts

@@ -54,6 +54,7 @@ export interface ThemeColors {
   blue200: Color
   flyoutDropShadow: Color
   hoverState: Color
+  hoverDefault: Color
 }
 
 export interface Colors {