Add liquidity styles (#98)

* Start styles

* Add liquidity styles & consistency

* clean up styles

* remove un-used element

* New styles

* fix errors

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};

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 }>`

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

src/components/InputStepCounter/InputStepCounter.tsx

 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>
   )
 }

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;

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>

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;
 `

src/components/PositionPreview/index.tsx

-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>
   )
 }

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>
   )

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>

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;
 `

src/pages/AddLiquidity/Review.tsx

 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>
   )

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}

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 }>`

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),

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' }}
               >

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>

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;
   
 }
 `