Add liquidity styles (#98)

* Start styles * Add liquidity styles & consistency * clean up styles * remove un-used element * New styles * fix errors
2021-05-04 14:57:57 -04:00 · 2021-05-04 14:57:57 -04:00 · 9a326fa023
commit 9a326fa023
parent 06d6c711dd
20 changed files with 302 additions and 267 deletions
--- a/src/assets/svg/logo_white.svg
+++ b/src/assets/svg/logo_white.svg
--- a/src/components/Card/index.tsx
+++ b/src/components/Card/index.tsx
@ -4,7 +4,7 @@ import { Box } from 'rebass/styled-components'
 const Card = styled(Box)<{ width?: string; padding?: string; border?: string; borderRadius?: string }>`
  width: ${({ width }) => width ?? '100%'};
  border-radius: 16px;
-  padding: 1.25rem;
+  padding: 1rem;
  padding: ${({ padding }) => padding};
  border: ${({ border }) => border};
  border-radius: ${({ borderRadius }) => borderRadius};
--- a/src/components/CurrencyInputPanel/index.tsx
+++ b/src/components/CurrencyInputPanel/index.tsx
@ -22,8 +22,8 @@ import { FiatValue } from './FiatValue'
 const InputPanel = styled.div<{ hideInput?: boolean }>`
  ${({ theme }) => theme.flexColumnNoWrap}
  position: relative;
-  border-radius: ${({ hideInput }) => (hideInput ? '12px' : '20px')};
-  background-color: ${({ theme }) => theme.bg2};
+  border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
+  background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.bg2)};
  z-index: 1;
  width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
 `
@ -42,13 +42,13 @@ const FixedContainer = styled.div`
 `

 const Container = styled.div<{ hideInput: boolean }>`
-  border-radius: ${({ hideInput }) => (hideInput ? '12px' : '20px')};
-  border: 1px solid ${({ theme }) => theme.bg2};
+  border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
+  border: 1px solid ${({ theme, hideInput }) => (hideInput ? ' transparent' : theme.bg2)};
  background-color: ${({ theme }) => theme.bg1};
  width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
  :focus,
  :hover {
-    border: 1px solid ${({ theme }) => theme.bg3};
+    border: 1px solid ${({ theme, hideInput }) => (hideInput ? ' transparent' : theme.bg3)};
  }
 `

@ -65,11 +65,11 @@ const CurrencySelect = styled(ButtonGray)<{ selected: boolean; hideInput?: boole
  cursor: pointer;
  user-select: none;
  border: none;
-  height: ${({ hideInput }) => (hideInput ? '2.4rem' : '2.4rem')};
+  height: ${({ hideInput }) => (hideInput ? '2.8rem' : '2.4rem')};
  width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
  padding: 0 8px;
  justify-content: space-between;
-  margin-right: 12px;
+  margin-right: ${({ hideInput }) => (hideInput ? '0' : '12px')};
  :focus,
  :hover {
    background-color: ${({ selected, theme }) => (selected ? theme.bg3 : darken(0.05, theme.primary1))};
@ -103,6 +103,7 @@ const Aligner = styled.span`
  display: flex;
  align-items: center;
  justify-content: space-between;
+  width: 100%;
 `

 const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
--- a/src/components/FeeSelector/index.tsx
+++ b/src/components/FeeSelector/index.tsx
@ -29,6 +29,9 @@ export default function FeeSelector({
    <AutoColumn gap="16px">
      <DynamicSection gap="md" disabled={disabled}>
        <TYPE.label>{t('selectPool')}</TYPE.label>
+        <TYPE.main fontSize={14} fontWeight={400} style={{ marginBottom: '.5rem', lineHeight: '125%' }}>
+          Select a pool type based on your preferred liquidity provider fee.
+        </TYPE.main>
        <RowBetween>
          <ButtonRadioChecked
            width="32%"
--- a/src/components/InputStepCounter/InputStepCounter.tsx
+++ b/src/components/InputStepCounter/InputStepCounter.tsx
@ -1,11 +1,11 @@
 import React, { useState, useCallback, useEffect } from 'react'
-import { OutlineCard } from 'components/Card'
+import { LightCard } from 'components/Card'
 import { RowBetween } from 'components/Row'
 import { Input as NumericalInput } from '../NumericalInput'
 import styled, { keyframes } from 'styled-components'
 import { TYPE } from 'theme'
 import { AutoColumn } from 'components/Column'
-import { ButtonSecondary } from 'components/Button'
+import { ButtonPrimary } from 'components/Button'
 import { FeeAmount } from '@uniswap/v3-sdk'
 import { formattedFeeAmount } from 'utils'

@ -23,28 +23,31 @@ const pulse = (color: string) => keyframes`
  }
 `

-const SmallButton = styled(ButtonSecondary)`
-  background-color: ${({ theme }) => theme.bg2};
+const SmallButton = styled(ButtonPrimary)`
+  /* background-color: ${({ theme }) => theme.bg2}; */
  border-radius: 8px;
-  padding: 4px;
+  padding: 4px 6px;
  width: 48%;
 `

-const FocusedOutlineCard = styled(OutlineCard)<{ active?: boolean; pulsing?: boolean }>`
+const FocusedOutlineCard = styled(LightCard)<{ active?: boolean; pulsing?: boolean }>`
  border-color: ${({ active, theme }) => active && theme.blue1};
  padding: 12px;
-
  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.blue1)} 0.8s linear;
 `

 const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
-  background-color: transparent;
-  text-align: left;
-  margin-right: 2px;
+  /* background-color: ${({ theme }) => theme.bg0}; */
+  text-align: center;
+  margin-right: 12px;
+  width: 100%;
+  font-weight: 500;
 `

-const ContentWrapper = styled(RowBetween)`
-  width: 92%;
+const InputTitle = styled(TYPE.small)`
+  color: ${({ theme }) => theme.text2};
+  font-size: 12px;
+  font-weight: 500;
 `

 interface StepCounterProps {
@ -56,6 +59,9 @@ interface StepCounterProps {
  label?: string
  width?: string
  locked?: boolean // disable input
+  title: string
+  tokenA: string | undefined
+  tokenB: string | undefined
 }

 const StepCounter = ({
@ -63,10 +69,12 @@ const StepCounter = ({
  decrement,
  increment,
  feeAmount,
-  label,
  width,
  locked,
  onUserInput,
+  title,
+  tokenA,
+  tokenB,
 }: StepCounterProps) => {
  //  for focus state, styled components doesnt let you select input parent container
  const [active, setActive] = useState(false)
@ -117,30 +125,33 @@ const StepCounter = ({

  return (
    <FocusedOutlineCard pulsing={pulsing} active={active} onFocus={handleOnFocus} onBlur={handleOnBlur} width={width}>
-      <AutoColumn gap="md">
-        <ContentWrapper>
-          <StyledInput
-            className="rate-input-0"
-            value={localValue}
-            fontSize="18px"
-            disabled={locked}
-            onUserInput={(val) => {
-              setLocalValue(val)
-            }}
-          />
-        </ContentWrapper>
-        {label && <TYPE.label fontSize="12px">{label}</TYPE.label>}
-        {!locked ? (
-          <RowBetween>
-            <SmallButton onClick={handleDecrement}>
-              <TYPE.main fontSize="12px">-{feeAmountFormatted}%</TYPE.main>
-            </SmallButton>
-            <SmallButton onClick={handleIncrement}>
-              <TYPE.main fontSize="12px">+{feeAmountFormatted}%</TYPE.main>
-            </SmallButton>
-          </RowBetween>
-        ) : null}
+      <AutoColumn gap="6px" style={{ marginBottom: '12px' }}>
+        <InputTitle fontSize={12} textAlign="center">
+          {title}
+        </InputTitle>
+        <StyledInput
+          className="rate-input-0"
+          value={localValue}
+          fontSize="20px"
+          disabled={locked}
+          onUserInput={(val) => {
+            setLocalValue(val)
+          }}
+        />
+        <InputTitle fontSize={12} textAlign="center">
+          {tokenB + ' / ' + tokenA}
+        </InputTitle>
      </AutoColumn>
+      {!locked ? (
+        <RowBetween>
+          <SmallButton onClick={handleDecrement}>
+            <TYPE.black fontSize="12px">-{feeAmountFormatted}%</TYPE.black>
+          </SmallButton>
+          <SmallButton onClick={handleIncrement}>
+            <TYPE.black fontSize="12px">+{feeAmountFormatted}%</TYPE.black>
+          </SmallButton>
+        </RowBetween>
+      ) : null}
    </FocusedOutlineCard>
  )
 }
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@ -35,7 +35,8 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...r

  &[data-reach-dialog-content] {
    margin: 0 0 2rem 0;
-    background-color: ${({ theme }) => theme.bg1};
+    background-color: ${({ theme }) => theme.bg0};
+    border: 1px solid ${({ theme }) => theme.bg1};
    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadow1)};
    padding: 0px;
    width: 50vw;
--- a/src/components/NavigationTabs/index.tsx
+++ b/src/components/NavigationTabs/index.tsx
@ -101,11 +101,11 @@ export function AddRemoveTabs({ adding, creating }: { adding: boolean; creating:
            adding && dispatch(resetMintState())
          }}
        >
-          <StyledArrowLeft stroke={theme.text2} opacity="0.6" />
+          <StyledArrowLeft stroke={theme.text2} />
        </HistoryLink>
-        <TYPE.black fontWeight={500} fontSize={16} style={{ opacity: '0.6' }}>
+        <TYPE.mediumHeader fontWeight={500} fontSize={20}>
          {creating ? 'Create a pair' : adding ? 'Add Liquidity' : 'Remove Liquidity'}
-        </TYPE.black>
+        </TYPE.mediumHeader>
        <Settings />
      </RowBetween>
    </Tabs>
--- a/src/components/PositionListItem/index.tsx
+++ b/src/components/PositionListItem/index.tsx
@ -95,7 +95,7 @@ const DoubleArrow = styled.span`
 `

 const RangeText = styled.span`
-  background-color: ${({ theme }) => theme.bg2};
+  /* background-color: ${({ theme }) => theme.bg2}; */
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
 `
--- a/src/components/PositionPreview/index.tsx
+++ b/src/components/PositionPreview/index.tsx
@ -1,6 +1,6 @@
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useContext } from 'react'
 import { Position } from '@uniswap/v3-sdk'
-import { DarkCard, DarkGreyCard } from 'components/Card'
+import { LightCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'
 import { TYPE } from 'theme'
 import { RowBetween, RowFixed } from 'components/Row'
@ -10,18 +10,25 @@ import { Break } from 'components/earn/styled'
 import { useTranslation } from 'react-i18next'
 import { Currency } from '@uniswap/sdk-core'
 import RateToggle from 'components/RateToggle'
+import DoubleCurrencyLogo from 'components/DoubleLogo'
+import RangeBadge from 'components/Badge/RangeBadge'
+import { ThemeContext } from 'styled-components'

 export const PositionPreview = ({
  position,
  title,
+  inRange,
  baseCurrencyDefault,
 }: {
  position: Position
  title?: string
+  inRange: boolean
  baseCurrencyDefault?: Currency | undefined
 }) => {
  const { t } = useTranslation()

+  const theme = useContext(ThemeContext)
+
  const currency0 = unwrappedToken(position.pool.token0)
  const currency1 = unwrappedToken(position.pool.token1)

@ -48,7 +55,50 @@ export const PositionPreview = ({
  }, [quoteCurrency])

  return (
-    <DarkGreyCard>
+    <AutoColumn gap="md" style={{ marginTop: '0.5rem' }}>
+      <RowBetween style={{ marginBottom: '0.5rem' }}>
+        <RowFixed>
+          <DoubleCurrencyLogo
+            currency0={currency0 ?? undefined}
+            currency1={currency1 ?? undefined}
+            size={24}
+            margin={true}
+          />
+          <TYPE.label ml="10px" fontSize="24px">
+            {currency0?.symbol} / {currency1?.symbol}
+          </TYPE.label>
+        </RowFixed>
+        <RangeBadge inRange={inRange} />
+      </RowBetween>
+
+      <LightCard>
+        <AutoColumn gap="md">
+          <RowBetween>
+            <RowFixed>
+              <CurrencyLogo currency={currency0} />
+              <TYPE.label ml="8px">{currency0?.symbol}</TYPE.label>
+            </RowFixed>
+            <RowFixed>
+              <TYPE.label mr="8px">{position.amount0.toSignificant(4)}</TYPE.label>
+            </RowFixed>
+          </RowBetween>
+          <RowBetween>
+            <RowFixed>
+              <CurrencyLogo currency={currency1} />
+              <TYPE.label ml="8px">{currency1?.symbol}</TYPE.label>
+            </RowFixed>
+            <RowFixed>
+              <TYPE.label mr="8px">{position.amount1.toSignificant(4)}</TYPE.label>
+            </RowFixed>
+          </RowBetween>
+          <Break />
+          <RowBetween>
+            <TYPE.label>{t('feeTier')}</TYPE.label>
+            <TYPE.label>{position?.pool?.fee / 10000}%</TYPE.label>
+          </RowBetween>
+        </AutoColumn>
+      </LightCard>
+
      <AutoColumn gap="md">
        <RowBetween>
          {title ? <TYPE.main>{title}</TYPE.main> : <div />}
@ -58,59 +108,48 @@ export const PositionPreview = ({
            handleRateToggle={handleRateChange}
          />
        </RowBetween>
+
        <RowBetween>
-          <RowFixed>
-            <CurrencyLogo currency={currency0} />
-            <TYPE.label ml="8px">{currency0?.symbol}</TYPE.label>
-          </RowFixed>
-          <RowFixed>
-            <TYPE.label mr="8px">{position.amount0.toSignificant(4)}</TYPE.label>
-          </RowFixed>
-        </RowBetween>
-        <RowBetween>
-          <RowFixed>
-            <CurrencyLogo currency={currency1} />
-            <TYPE.label ml="8px">{currency1?.symbol}</TYPE.label>
-          </RowFixed>
-          <RowFixed>
-            <TYPE.label mr="8px">{position.amount1.toSignificant(4)}</TYPE.label>
-          </RowFixed>
-        </RowBetween>
-        <Break />
-        <RowBetween>
-          <TYPE.label>{t('feeTier')}</TYPE.label>
-          <TYPE.label>{position?.pool?.fee / 10000}%</TYPE.label>
-        </RowBetween>
-        <RowBetween>
-          <TYPE.label>Current {baseCurrency?.symbol} Price</TYPE.label>
-          <TYPE.label>{`${price.toSignificant(6)} ${quoteCurrency?.symbol}`}</TYPE.label>
-        </RowBetween>
-        <RowBetween>
-          <DarkCard width="46%" padding="8px">
+          <LightCard width="48%" padding="8px">
            <AutoColumn gap="4px" justify="center">
-              <TYPE.main fontSize="12px">Lower</TYPE.main>
-              <TYPE.label textAlign="center">{`${priceLower.toSignificant(4)}`}</TYPE.label>
+              <TYPE.main fontSize="12px">Min price</TYPE.main>
+              <TYPE.mediumHeader textAlign="center">{`${priceLower.toSignificant(4)}`}</TYPE.mediumHeader>
              <TYPE.main
                textAlign="center"
                fontSize="12px"
              >{` ${quoteCurrency.symbol}/${baseCurrency.symbol}`}</TYPE.main>
+              <TYPE.small textAlign="center" color={theme.text3} style={{ marginTop: '4px' }}>
+                {'Position will be'} <CurrencyLogo currency={baseCurrency} size="10px" /> {' 100% at this price.'}
+              </TYPE.small>
            </AutoColumn>
-          </DarkCard>
-          <TYPE.main ml="4px" mr="4px">
-            ⟷
-          </TYPE.main>
-          <DarkCard width="46%" padding="8px">
+          </LightCard>
+
+          <LightCard width="48%" padding="8px">
            <AutoColumn gap="4px" justify="center">
-              <TYPE.main fontSize="12px">Upper</TYPE.main>
-              <TYPE.label textAlign="center">{`${priceUpper.toSignificant(4)}`}</TYPE.label>
+              <TYPE.main fontSize="12px">Max price</TYPE.main>
+              <TYPE.mediumHeader textAlign="center">{`${priceUpper.toSignificant(4)}`}</TYPE.mediumHeader>
              <TYPE.main
                textAlign="center"
                fontSize="12px"
              >{` ${quoteCurrency.symbol}/${baseCurrency.symbol}`}</TYPE.main>
+              <TYPE.small textAlign="center" color={theme.text3} style={{ marginTop: '4px' }}>
+                {' Position will be 100% '}
+                {quoteCurrency?.symbol} {' at this price.'}
+              </TYPE.small>
            </AutoColumn>
-          </DarkCard>
+          </LightCard>
        </RowBetween>
+        <LightCard padding="12px ">
+          <AutoColumn gap="4px" justify="center">
+            <TYPE.main fontSize="12px">Current price</TYPE.main>
+            <TYPE.mediumHeader>{`${price.toSignificant(6)} `}</TYPE.mediumHeader>
+            <TYPE.main
+              textAlign="center"
+              fontSize="12px"
+            >{` ${quoteCurrency.symbol}/${baseCurrency.symbol}`}</TYPE.main>
+          </AutoColumn>
+        </LightCard>
      </AutoColumn>
-    </DarkGreyCard>
+    </AutoColumn>
  )
 }
--- a/src/components/RangeSelector/index.tsx
+++ b/src/components/RangeSelector/index.tsx
@ -48,7 +48,10 @@ export default function RangeSelector({
        decrement={isSorted ? getDecrementLower : getIncrementUpper}
        increment={isSorted ? getIncrementLower : getDecrementUpper}
        feeAmount={feeAmount}
-        label={leftPrice ? `${leftPrice.toSignificant(5)} ${currencyB?.symbol}/${currencyA?.symbol}` : '-'}
+        label={leftPrice ? `${currencyB?.symbol}` : '-'}
+        title={'Min price'}
+        tokenA={currencyA?.symbol}
+        tokenB={currencyB?.symbol}
      />
      <StepCounter
        value={rightPrice?.toSignificant(5) ?? ''}
@ -57,7 +60,10 @@ export default function RangeSelector({
        decrement={isSorted ? getDecrementUpper : getIncrementLower}
        increment={isSorted ? getIncrementUpper : getDecrementLower}
        feeAmount={feeAmount}
-        label={rightPrice ? `${rightPrice.toSignificant(5)} ${currencyB?.symbol}/${currencyA?.symbol}` : '-'}
+        label={rightPrice ? `${currencyB?.symbol}` : '-'}
+        tokenA={currencyA?.symbol}
+        tokenB={currencyB?.symbol}
+        title={'Max price'}
      />
    </RowBetween>
  )
--- a/src/components/RateToggle/index.tsx
+++ b/src/components/RateToggle/index.tsx
@ -3,15 +3,6 @@ import { Currency } from '@uniswap/sdk-core'
 import { ToggleElement, ToggleWrapper } from 'components/Toggle/MultiToggle'
 import { useActiveWeb3React } from 'hooks'
 import { wrappedCurrency } from 'utils/wrappedCurrency'
-import Switch from '../../assets/svg/switch.svg'
-import { useDarkModeManager } from '../../state/user/hooks'
-import styled from 'styled-components'
-
-const StyledSwitchIcon = styled.img<{ darkMode: boolean }>`
-  margin: 0 4px;
-  opacity: 0.4;
-  filter: ${({ darkMode }) => (darkMode ? 'invert(0)' : 'invert(1)')};
-`

 // the order of displayed base currencies from left to right is always in sort order
 // currencyA is treated as the preferred base currency
@ -31,19 +22,14 @@ export default function RateToggle({

  const isSorted = tokenA && tokenB && tokenA.sortsBefore(tokenB)

-  const [darkMode] = useDarkModeManager()
-
  return tokenA && tokenB ? (
    <div style={{ width: 'fit-content', display: 'flex', alignItems: 'center' }}>
      <ToggleWrapper width="fit-content">
        <ToggleElement isActive={isSorted} fontSize="12px" onClick={handleRateToggle}>
-          {isSorted ? currencyA.symbol : currencyB.symbol} {' price'}
+          {isSorted ? currencyB.symbol + ' / ' + currencyA.symbol : currencyA.symbol + ' / ' + currencyB.symbol}{' '}
        </ToggleElement>
-        <StyledSwitchIcon onClick={handleRateToggle} width={'16px'} src={Switch} alt="logo" darkMode={darkMode} />
-
        <ToggleElement isActive={!isSorted} fontSize="12px" onClick={handleRateToggle}>
-          {isSorted ? currencyB.symbol : currencyA.symbol}
-          {' price'}
+          {isSorted ? currencyA.symbol + ' / ' + currencyB.symbol : currencyB.symbol + ' / ' + currencyA.symbol}
        </ToggleElement>
      </ToggleWrapper>
    </div>
--- a/src/components/Toggle/MultiToggle.tsx
+++ b/src/components/Toggle/MultiToggle.tsx
@ -5,10 +5,10 @@ export const ToggleWrapper = styled.button<{ width?: string }>`
  display: flex;
  align-items: center;
  width: ${({ width }) => width ?? '100%'};
-  padding: 2px;
+  padding: 1px;
  background: ${({ theme }) => theme.bg1};
  border-radius: 8px;
-  border: ${({ theme }) => '1px solid ' + theme.bg1};
+  border: ${({ theme }) => '1px solid ' + theme.bg2};
  cursor: pointer;
  outline: none;
 `
--- a/src/pages/AddLiquidity/Review.tsx
+++ b/src/pages/AddLiquidity/Review.tsx
@ -1,18 +1,14 @@
 import React from 'react'
-import { RowBetween, RowFixed } from '../../components/Row'
 import { Field } from '../../state/mint/actions'
-import { TYPE } from '../../theme'
 import { AutoColumn } from 'components/Column'
 import Card from 'components/Card'
 import styled from 'styled-components'
-import { Currency, CurrencyAmount, Price } from '@uniswap/sdk-core'
+import { CurrencyAmount, Price } from '@uniswap/sdk-core'
 import { Position } from '@uniswap/v3-sdk'
-import DoubleCurrencyLogo from 'components/DoubleLogo'
 import { PositionPreview } from 'components/PositionPreview'
-import { RangeBadge } from './styled'

 const Wrapper = styled.div`
-  padding-top: 20px;
+  padding-top: 12px;
 `

 export const Badge = styled(Card)<{ inRange?: boolean }>`
@ -26,37 +22,19 @@ export const Badge = styled(Card)<{ inRange?: boolean }>`

 export function Review({
  position,
-  currencies,
  outOfRange,
-  baseCurrency,
 }: {
  position?: Position
  existingPosition?: Position
-  currencies: { [field in Field]?: Currency }
  parsedAmounts: { [field in Field]?: CurrencyAmount }
  priceLower?: Price
  priceUpper?: Price
  outOfRange: boolean
-  baseCurrency?: Currency
 }) {
-  const currencyA: Currency | undefined = currencies[Field.CURRENCY_A]
-  const currencyB: Currency | undefined = currencies[Field.CURRENCY_B]
-
  return (
    <Wrapper>
      <AutoColumn gap="lg">
-        <RowBetween>
-          <RowFixed>
-            <DoubleCurrencyLogo currency0={currencyA} currency1={currencyB} size={24} margin={true} />
-            <TYPE.label ml="10px" fontSize="24px">
-              {currencyA?.symbol} / {currencyB?.symbol}
-            </TYPE.label>
-          </RowFixed>
-          <RangeBadge inRange={!outOfRange}>{outOfRange ? 'Out of range' : 'In Range'}</RangeBadge>
-        </RowBetween>
-        {position ? (
-          <PositionPreview position={position} title={'Tokens To Add'} baseCurrencyDefault={baseCurrency} />
-        ) : null}
+        {position ? <PositionPreview position={position} inRange={!outOfRange} title={'Selected Range'} /> : null}
      </AutoColumn>
    </Wrapper>
  )
--- a/src/pages/AddLiquidity/index.tsx
+++ b/src/pages/AddLiquidity/index.tsx
@ -2,18 +2,18 @@ import React, { useCallback, useContext, useMemo, useState } from 'react'
 import { TransactionResponse } from '@ethersproject/providers'
 import { Currency, TokenAmount, ETHER, currencyEquals } from '@uniswap/sdk-core'
 import { WETH9 } from '@uniswap/sdk-core'
-import { Link2, AlertTriangle } from 'react-feather'
+import { AlertTriangle } from 'react-feather'
 import ReactGA from 'react-ga'
 import { useV3NFTPositionManagerContract } from '../../hooks/useContract'
 import { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components'
 import { ButtonError, ButtonLight, ButtonPrimary, ButtonText } from '../../components/Button'
-import { YellowCard, OutlineCard, BlueCard } from '../../components/Card'
-import { AutoColumn, ColumnCenter } from '../../components/Column'
+import { YellowCard, OutlineCard, BlueCard, LightCard } from '../../components/Card'
+import { AutoColumn } from '../../components/Column'
 import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
-import { RowBetween, RowFixed } from '../../components/Row'
+import { RowBetween } from '../../components/Row'
 import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported'
 import Review from './Review'
 import { useActiveWeb3React } from '../../hooks'
@ -25,13 +25,13 @@ import { Field, Bound } from '../../state/mint/actions'

 import { useTransactionAdder } from '../../state/transactions/hooks'
 import { useIsExpertMode, useUserSlippageTolerance } from '../../state/user/hooks'
-import { TYPE } from '../../theme'
+import { TYPE, ExternalLink } from '../../theme'
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import AppBody from '../AppBody'
 import { Dots } from '../Pool/styleds'
 import { currencyId } from '../../utils/currencyId'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
-import { DynamicSection, CurrencyDropdown, StyledInput, Wrapper, RangeBadge, ScrollablePage } from './styled'
+import { DynamicSection, CurrencyDropdown, StyledInput, Wrapper, ScrollablePage } from './styled'
 import { useTranslation } from 'react-i18next'
 import { useMintState, useMintActionHandlers, useDerivedMintInfo, useRangeHopCallbacks } from 'state/mint/hooks'
 import { FeeAmount, NonfungiblePositionManager } from '@uniswap/v3-sdk'
@ -39,7 +39,6 @@ import { NONFUNGIBLE_POSITION_MANAGER_ADDRESSES } from 'constants/v3'
 import { useV3PositionFromTokenId } from 'hooks/useV3Positions'
 import { useDerivedPositionInfo } from 'hooks/useDerivedPositionInfo'
 import { PositionPreview } from 'components/PositionPreview'
-import DoubleCurrencyLogo from 'components/DoubleLogo'
 import FeeSelector from 'components/FeeSelector'
 import RangeSelector from 'components/RangeSelector'
 import RateToggle from 'components/RateToggle'
@ -352,18 +351,16 @@ export default function AddLiquidity({
            onDismiss={handleDismissConfirmation}
            topContent={() => (
              <Review
-                currencies={currencies}
                parsedAmounts={parsedAmounts}
                position={position}
                existingPosition={existingPosition}
                priceLower={priceLower}
                priceUpper={priceUpper}
                outOfRange={outOfRange}
-                baseCurrency={baseCurrency ?? undefined}
              />
            )}
            bottomContent={() => (
-              <ButtonPrimary onClick={onAdd} mt="16px">
+              <ButtonPrimary style={{ marginTop: '1rem' }} onClick={onAdd}>
                <Text fontWeight={500} fontSize={20}>
                  Add
                </Text>
@ -376,8 +373,8 @@ export default function AddLiquidity({
      <AppBody>
        <AddRemoveTabs creating={false} adding={true} />
        <Wrapper>
-          <AutoColumn gap="lg">
-            {!hasExistingPosition ? (
+          <AutoColumn gap="32px">
+            {!hasExistingPosition && (
              <>
                <AutoColumn gap="md">
                  <RowBetween paddingBottom="20px">
@ -401,6 +398,7 @@ export default function AddLiquidity({
                      id="add-liquidity-input-tokena"
                      showCommonBases
                    />
+                    <div style={{ width: '12px' }}></div>

                    <CurrencyDropdown
                      value={formattedAmounts[Field.CURRENCY_B]}
@ -418,25 +416,10 @@ export default function AddLiquidity({
                  </RowBetween>
                </AutoColumn>{' '}
              </>
-            ) : (
-              <RowBetween>
-                <RowFixed>
-                  <DoubleCurrencyLogo
-                    currency0={currencyA ?? undefined}
-                    currency1={currencyB ?? undefined}
-                    size={24}
-                    margin={true}
-                  />
-                  <TYPE.label ml="10px" fontSize="24px">
-                    {currencyA?.symbol} / {currencyB?.symbol}
-                  </TYPE.label>
-                </RowFixed>
-                <RangeBadge inRange={!outOfRange}>{outOfRange ? 'Out of range' : 'In Range'}</RangeBadge>
-              </RowBetween>
            )}

            {hasExistingPosition && existingPosition ? (
-              <PositionPreview position={existingPosition} title={'Current Position'} />
+              <PositionPreview position={existingPosition} title={'Selected Range'} inRange={!outOfRange} />
            ) : (
              <>
                <FeeSelector
@ -493,6 +476,7 @@ export default function AddLiquidity({
                <DynamicSection gap="md" disabled={!feeAmount || invalidPool || (noLiquidity && !startPriceTypedValue)}>
                  <RowBetween>
                    <TYPE.label>{t('selectLiquidityRange')}</TYPE.label>
+
                    {baseCurrency && quoteCurrency ? (
                      <RateToggle
                        currencyA={baseCurrency}
@ -505,16 +489,13 @@ export default function AddLiquidity({
                      />
                    ) : null}
                  </RowBetween>
-
-                  {price && baseCurrency && quoteCurrency && !noLiquidity && (
-                    <RowBetween style={{ backgroundColor: theme.bg6, padding: '12px', borderRadius: '12px' }}>
-                      <TYPE.main>Current Price</TYPE.main>
-                      <TYPE.main>
-                        {invertPrice ? price.invert().toSignificant(3) : price.toSignificant(3)} {quoteCurrency?.symbol}{' '}
-                        = 1 {baseCurrency.symbol}
-                      </TYPE.main>
-                    </RowBetween>
-                  )}
+                  <TYPE.main fontSize={14} fontWeight={400} style={{ marginBottom: '.5rem', lineHeight: '125%' }}>
+                    Your liquidity will only be active and earning fees when the price of the pool is within this price
+                    range.{' '}
+                    <ExternalLink href={''} style={{ fontSize: '14px' }}>
+                      Need help picking a range?
+                    </ExternalLink>
+                  </TYPE.main>

                  <RangeSelector
                    priceLower={priceLower}
@ -530,6 +511,23 @@ export default function AddLiquidity({
                    feeAmount={feeAmount}
                  />

+                  {price && baseCurrency && quoteCurrency && !noLiquidity && (
+                    <LightCard style={{ padding: '12px' }}>
+                      <AutoColumn gap="4px">
+                        <TYPE.main fontWeight={500} textAlign="center" fontSize={12}>
+                          Current Price
+                        </TYPE.main>
+                        <TYPE.body fontWeight={500} textAlign="center" fontSize={20}>
+                          {invertPrice ? price.invert().toSignificant(3) : price.toSignificant(3)}{' '}
+                        </TYPE.body>
+                        <TYPE.main fontWeight={500} textAlign="center" fontSize={12}>
+                          {quoteCurrency?.symbol} {' / '}
+                          {baseCurrency.symbol}
+                        </TYPE.main>
+                      </AutoColumn>
+                    </LightCard>
+                  )}
+
                  {outOfRange ? (
                    <YellowCard padding="8px 12px" borderRadius="12px">
                      <RowBetween>
@ -575,10 +573,6 @@ export default function AddLiquidity({
                  locked={depositADisabled}
                />

-                <ColumnCenter>
-                  <Link2 stroke={theme.text2} size={'24px'} />
-                </ColumnCenter>
-
                <CurrencyInputPanel
                  value={formattedAmounts[Field.CURRENCY_B]}
                  onUserInput={onFieldBInput}
@ -662,7 +656,6 @@ export default function AddLiquidity({
          </AutoColumn>
        </Wrapper>
      </AppBody>
-      {/* )} */}
      {addIsUnsupported && (
        <UnsupportedCurrencyFooter
          show={addIsUnsupported}
--- a/src/pages/AddLiquidity/styled.tsx
+++ b/src/pages/AddLiquidity/styled.tsx
@ -7,7 +7,7 @@ import Input from 'components/NumericalInput'
 export const Wrapper = styled.div`
  position: relative;
  padding: 20px;
-  min-width: 460px;
+  min-width: 480px;

  ${({ theme }) => theme.mediaWidth.upToSmall`
    min-width: 400px;
@ -45,7 +45,7 @@ export const FixedPreview = styled.div`
    0px 24px 32px rgba(0, 0, 0, 0.01);
  border-radius: 12px;
  position: sticky;
-  top: 90px;
+  top: 64px;
 `

 export const DynamicSection = styled(AutoColumn)<{ disabled?: boolean }>`
--- a/src/pages/AppBody.tsx
+++ b/src/pages/AppBody.tsx
@ -4,7 +4,7 @@ import styled from 'styled-components'
 export const BodyWrapper = styled.div<{ margin?: string }>`
  position: relative;
  margin-top: ${({ margin }) => margin ?? '0px'};
-  max-width: 460px;
+  max-width: 480px;
  width: 100%;
  background: ${({ theme }) => theme.bg0};
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
--- a/src/pages/Pool/PositionPage.tsx
+++ b/src/pages/Pool/PositionPage.tsx
@ -16,7 +16,7 @@ import { HideExtraSmall, TYPE } from 'theme'
 import Badge from 'components/Badge'
 import { calculateGasMargin } from 'utils'
 import { ButtonConfirmed, ButtonPrimary, ButtonGray } from 'components/Button'
-import { DarkCard, LightCard } from 'components/Card'
+import { DarkCard, DarkGreyCard, LightCard } from 'components/Card'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { useTranslation } from 'react-i18next'
 import { currencyId } from 'utils/currencyId'
@ -33,7 +33,6 @@ import { TransactionResponse } from '@ethersproject/providers'
 import { Dots } from 'components/swap/styleds'
 import { getPriceOrderingFromPositionForUI } from '../../components/PositionListItem'
 import useTheme from '../../hooks/useTheme'
-import { MinusCircle, PlusCircle } from 'react-feather'
 import RateToggle from '../../components/RateToggle'
 import { useSingleCallResult } from 'state/multicall/hooks'
 import RangeBadge from '../../components/Badge/RangeBadge'
@ -88,10 +87,11 @@ export const DarkBadge = styled.div`
 `

 const ExtentsText = styled.span`
-  color: ${({ theme }) => theme.text3};
+  color: ${({ theme }) => theme.text2};
  font-size: 14px;
  text-align: center;
  margin-right: 4px;
+  font-weight: 500;
 `

 const HoverText = styled(TYPE.main)`
@ -139,6 +139,8 @@ function CurrentPriceCard({
  currencyBase?: Currency
  ratio?: number
 }) {
+  const theme = useTheme()
+
  const { t } = useTranslation()
  if (!pool || !currencyQuote || !currencyBase) {
    return null
@ -146,18 +148,19 @@ function CurrentPriceCard({

  return (
    <LightCard padding="12px ">
-      <AutoColumn gap="md" justify="center">
+      <AutoColumn gap="8px" justify="center">
        <ExtentsText>{t('Current price')}</ExtentsText>
-        <TYPE.label textAlign="center">
-          {(inverted ? pool.token1Price : pool.token0Price).toSignificant(4)} {currencyQuote?.symbol}
-        </TYPE.label>
-        {typeof ratio === 'number' && (
-          <TYPE.label textAlign="center">
-            Your position is <CurrencyLogo currency={currencyBase} size="12px" /> {ratio}% {currencyBase?.symbol} and{' '}
-            <CurrencyLogo currency={currencyQuote} size="12px" /> {100 - ratio}% {currencyQuote?.symbol}
-          </TYPE.label>
-        )}
+        <TYPE.mediumHeader textAlign="center">
+          {(inverted ? pool.token1Price : pool.token0Price).toSignificant(4)}{' '}
+        </TYPE.mediumHeader>
+        <ExtentsText>{currencyQuote?.symbol + ' / ' + currencyBase?.symbol}</ExtentsText>
      </AutoColumn>
+
+      {typeof ratio === 'number' && (
+        <TYPE.small color={theme.text3} textAlign="center" style={{ marginTop: '8px' }}>
+          Your position is currently {ratio}% {currencyBase?.symbol} and {100 - ratio}% {currencyQuote?.symbol}
+        </TYPE.small>
+      )}
    </LightCard>
  )
 }
@ -418,8 +421,7 @@ export function PositionPage({
                    borderRadius="12px"
                    style={{ marginRight: '8px' }}
                  >
-                    <PlusCircle size={16} style={{ marginRight: '8px' }} />{' '}
-                    <TYPE.body color={theme.text1}>{t('Add Liquidity')}</TYPE.body>
+                    {t('Add Liquidity')}
                  </ButtonGray>
                ) : null}
                {tokenId && (
@ -430,7 +432,7 @@ export function PositionPage({
                    padding="6px 8px"
                    borderRadius="12px"
                  >
-                    <MinusCircle size={16} style={{ marginRight: '8px' }} /> {t('Remove Liquidity')}
+                    {t('Remove Liquidity')}
                  </ResponsiveButtonPrimary>
                )}
              </RowFixed>
@ -471,11 +473,15 @@ export function PositionPage({
            <DarkCard>
              <AutoColumn gap="md" style={{ width: '100%' }}>
                <AutoColumn gap="md">
-                  <Label>Position liquidity</Label>
-                  {fiatValueOfLiquidity?.greaterThan(new Fraction(1, 100)) && (
+                  <Label>Liquidity</Label>
+                  {fiatValueOfLiquidity?.greaterThan(new Fraction(1, 100)) ? (
                    <TYPE.largeHeader fontSize="36px" fontWeight={500}>
                      ${fiatValueOfLiquidity.toFixed(2)}
                    </TYPE.largeHeader>
+                  ) : (
+                    <TYPE.largeHeader color={theme.text1} fontSize="36px" fontWeight={500}>
+                      $-
+                    </TYPE.largeHeader>
                  )}
                </AutoColumn>
                <LightCard padding="12px 16px">
@ -483,20 +489,38 @@ export function PositionPage({
                    <RowBetween>
                      <RowFixed>
                        <CurrencyLogo currency={currencyQuote} size={'20px'} style={{ marginRight: '0.5rem' }} />
-                        <TYPE.main>
-                          {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)}
-                        </TYPE.main>
+                        <TYPE.main>{currencyQuote?.symbol}</TYPE.main>
+                      </RowFixed>
+                      <RowFixed>
+                        <TYPE.main>
+                          {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)} (
+                        </TYPE.main>
+                        {typeof ratio === 'number' && (
+                          <DarkGreyCard padding="4px 6px" style={{ width: 'fit-content', marginLeft: '8px' }}>
+                            <TYPE.main color={theme.text2} fontSize={11}>
+                              {100 - ratio}%
+                            </TYPE.main>
+                          </DarkGreyCard>
+                        )}
                      </RowFixed>
-                      <TYPE.main>{currencyQuote?.symbol}</TYPE.main>
                    </RowBetween>
                    <RowBetween>
                      <RowFixed>
                        <CurrencyLogo currency={currencyBase} size={'20px'} style={{ marginRight: '0.5rem' }} />
-                        <TYPE.main>
-                          {inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)}
-                        </TYPE.main>
+                        <TYPE.main>{currencyBase?.symbol}</TYPE.main>
+                      </RowFixed>
+                      <RowFixed>
+                        <TYPE.main>
+                          {inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)} (
+                        </TYPE.main>
+                        {typeof ratio === 'number' && (
+                          <DarkGreyCard padding="4px 6px" style={{ width: 'fit-content', marginLeft: '8px' }}>
+                            <TYPE.main color={theme.text2} fontSize={11}>
+                              {ratio}%
+                            </TYPE.main>
+                          </DarkGreyCard>
+                        )}
                      </RowFixed>
-                      <TYPE.main>{currencyBase?.symbol}</TYPE.main>
                    </RowBetween>
                  </AutoColumn>
                </LightCard>
@ -508,10 +532,14 @@ export function PositionPage({
                  <RowBetween style={{ alignItems: 'flex-start' }}>
                    <AutoColumn gap="md">
                      <Label>Fees Earned</Label>
-                      {fiatValueOfFees?.greaterThan(new Fraction(1, 100)) && (
+                      {fiatValueOfFees?.greaterThan(new Fraction(1, 100)) ? (
                        <TYPE.largeHeader color={theme.green1} fontSize="36px" fontWeight={500}>
                          ${fiatValueOfFees.toFixed(2)}
                        </TYPE.largeHeader>
+                      ) : (
+                        <TYPE.largeHeader color={theme.text1} fontSize="36px" fontWeight={500}>
+                          $-
+                        </TYPE.largeHeader>
                      )}
                    </AutoColumn>
                    {feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) || !!collectMigrationHash ? (
@ -544,6 +572,9 @@ export function PositionPage({
                    <RowBetween>
                      <RowFixed>
                        <CurrencyLogo currency={currencyQuote} size={'20px'} style={{ marginRight: '0.5rem' }} />
+                        <TYPE.main>{currencyQuote?.symbol}</TYPE.main>
+                      </RowFixed>
+                      <RowFixed>
                        <TYPE.main>
                          {inverted
                            ? feeValue0
@ -554,11 +585,13 @@ export function PositionPage({
                            : '-'}
                        </TYPE.main>
                      </RowFixed>
-                      <TYPE.main>{currencyQuote?.symbol}</TYPE.main>
                    </RowBetween>
                    <RowBetween>
                      <RowFixed>
                        <CurrencyLogo currency={currencyBase} size={'20px'} style={{ marginRight: '0.5rem' }} />
+                        <TYPE.main>{currencyBase?.symbol}</TYPE.main>
+                      </RowFixed>
+                      <RowFixed>
                        <TYPE.main>
                          {inverted
                            ? feeValue0
@ -569,7 +602,6 @@ export function PositionPage({
                            : '-'}
                        </TYPE.main>
                      </RowFixed>
-                      <TYPE.main>{currencyBase?.symbol}</TYPE.main>
                    </RowBetween>
                  </AutoColumn>
                </LightCard>
@ -604,47 +636,27 @@ export function PositionPage({

            <RowBetween>
              <LightCard padding="12px" width="100%">
-                <AutoColumn gap="12px" justify="center">
-                  <ExtentsText>Min</ExtentsText>
-                  <RowFixed>
-                    <TYPE.label textAlign="center">
-                      {priceLower?.toSignificant(4)} {currencyQuote?.symbol}
-                    </TYPE.label>
-                  </RowFixed>
-                  {(inverted ? below : above) ? (
-                    <TYPE.subHeader color={theme.text3} textAlign="center">
-                      Your position will be <CurrencyLogo currency={inverted ? currency1 : currency0} size="12px" />{' '}
-                      100% {inverted ? currency1?.symbol : currency0?.symbol} at this price
-                    </TYPE.subHeader>
-                  ) : (
-                    <TYPE.label textAlign="center">
-                      Your position is <CurrencyLogo currency={inverted ? currency1 : currency0} size="12px" /> 100%{' '}
-                      {inverted ? currency1?.symbol : currency0?.symbol}
-                    </TYPE.label>
-                  )}
+                <AutoColumn gap="8px" justify="center">
+                  <ExtentsText>Min price</ExtentsText>
+                  <TYPE.mediumHeader textAlign="center">{priceLower?.toSignificant(4)}</TYPE.mediumHeader>
+                  <ExtentsText> {currencyQuote?.symbol + ' / ' + currencyBase?.symbol}</ExtentsText>
+                  <TYPE.small color={theme.text3}>
+                    {' Your position is will be 100% '}
+                    {currencyBase?.symbol} {' at this price.'}
+                  </TYPE.small>
                </AutoColumn>
              </LightCard>

              <DoubleArrow>⟷</DoubleArrow>
              <LightCard padding="12px" width="100%">
-                <AutoColumn gap="12px" justify="center">
-                  <ExtentsText>Max</ExtentsText>
-                  <RowFixed>
-                    <TYPE.label textAlign="center">
-                      {priceUpper?.toSignificant(4)} {currencyQuote?.symbol}
-                    </TYPE.label>
-                  </RowFixed>
-                  {(inverted ? above : below) ? (
-                    <TYPE.subHeader color={theme.text3} textAlign="center">
-                      Your position will be <CurrencyLogo currency={inverted ? currency0 : currency1} size="12px" />{' '}
-                      100% {inverted ? currency0?.symbol : currency1?.symbol} at this price
-                    </TYPE.subHeader>
-                  ) : (
-                    <TYPE.label textAlign="center">
-                      Your position is <CurrencyLogo currency={inverted ? currency0 : currency1} size="12px" /> 100%{' '}
-                      {inverted ? currency0?.symbol : currency1?.symbol}
-                    </TYPE.label>
-                  )}
+                <AutoColumn gap="8px" justify="center">
+                  <ExtentsText>Max price</ExtentsText>
+                  <TYPE.mediumHeader textAlign="center">{priceUpper?.toSignificant(4)}</TYPE.mediumHeader>
+                  <ExtentsText> {currencyQuote?.symbol + ' / ' + currencyBase?.symbol}</ExtentsText>
+                  <TYPE.small color={theme.text3}>
+                    {' Your position is will be 100% '}
+                    {currencyQuote?.symbol} {' at this price.'}
+                  </TYPE.small>
                </AutoColumn>
              </LightCard>
            </RowBetween>
--- a/src/pages/Pool/index.tsx
+++ b/src/pages/Pool/index.tsx
@ -115,7 +115,17 @@ export default function Pool() {
      content: (
        <MenuItem>
          <Download size={16} style={{ marginRight: '8px' }} />
-          {t('Migrate V2 Liquidity')}
+          {t('Migrate')}
+        </MenuItem>
+      ),
+      link: '/migrate/v2',
+      external: false,
+    },
+    {
+      content: (
+        <MenuItem>
+          <Download size={16} style={{ marginRight: '8px' }} />
+          {t('V2 liquidity')}
        </MenuItem>
      ),
      link: '/migrate/v2',
@ -209,7 +219,7 @@ export default function Pool() {
            <RowFixed justify="center" style={{ width: '100%' }}>
              <ButtonGray
                as={Link}
-                to="/migrate/v2"
+                to="/pool/v2"
                id="import-pool-link"
                style={{ padding: '8px 16px', borderRadius: '12px', width: 'fit-content' }}
              >
--- a/src/pages/Pool/v2.tsx
+++ b/src/pages/Pool/v2.tsx
@ -155,7 +155,7 @@ export default function Pool() {
            <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
              <HideSmall>
                <TYPE.mediumHeader style={{ marginTop: '0.5rem', justifySelf: 'flex-start' }}>
-                  Your liquidity
+                  Your V2 liquidity
                </TYPE.mediumHeader>
              </HideSmall>
              <ButtonRow>
--- a/src/theme/index.tsx
+++ b/src/theme/index.tsx
@ -143,7 +143,7 @@ export const TYPE = {
    return <TextWrapper fontWeight={500} color={'primary1'} {...props} />
  },
  label(props: TextProps) {
-    return <TextWrapper fontWeight={500} color={'text1'} {...props} />
+    return <TextWrapper fontWeight={600} color={'text1'} {...props} />
  },
  black(props: TextProps) {
    return <TextWrapper fontWeight={500} color={'text1'} {...props} />
@ -221,7 +221,7 @@ html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  font-feature-settings: 'ss01' on,  'cv01' on, 'cv03' on;
+  font-feature-settings: 'ss01' on, 'ss02' on,  'cv01' on, 'cv03' on;
  
 }
 `