UI improvements (#1505)

* Change price ratio using slash to "per"

* Fix header, toggle copy and increase copy

* Add clearer V2 and migrate buttons

* Fix link

* fix account modal background color

* tweak sig figs
Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>

src/components/AccountDetails/index.tsx

@@ -76,7 +76,6 @@ const AccountGroupingRow = styled.div`
 `
 
 const AccountSection = styled.div`
-  background-color: ${({ theme }) => theme.bg1};
   padding: 0rem 1rem;
   ${({ theme }) => theme.mediaWidth.upToMedium`padding: 0rem 1rem 1.5rem 1rem;`};
 `

src/components/Badge/RangeBadge.tsx

@@ -46,7 +46,7 @@ export default function RangeBadge({
     <BadgeWrapper>
       {removed ? (
         <MouseoverTooltip text={`Your position has 0 liquidity, and is not earning fees.`}>
-          <Badge variant={BadgeVariant.WARNING_OUTLINE}>
+          <Badge variant={BadgeVariant.DEFAULT}>
             <AlertCircle width={14} height={14} />
             &nbsp;
             <BadgeText>{t('Inactive')}</BadgeText>

src/components/Header/index.tsx

@@ -90,7 +90,7 @@ const HeaderElement = styled.div`
   }
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
-   flex-direction: row-reverse;
+    flex-direction: row-reverse;
     align-items: center;
   `};
 `
@@ -116,6 +116,9 @@ const HeaderLinks = styled(Row)`
   grid-auto-flow: column;
   grid-gap: 10px;
   overflow: auto;
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    justify-self: flex-end;
+  `};
 `
 
 const AccountElement = styled.div<{ active: boolean }>`

src/components/InputStepCounter/InputStepCounter.tsx

@@ -139,7 +139,7 @@ const StepCounter = ({
           }}
         />
         <InputTitle fontSize={12} textAlign="center">
-          {tokenB + ' / ' + tokenA}
+          {tokenB + ' per ' + tokenA}
         </InputTitle>
       </AutoColumn>
       {!locked ? (

src/components/PositionCard/index.tsx

@@ -198,28 +198,23 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
       <CardNoise />
       <AutoColumn gap="12px">
         <FixedHeightRow>
-          <AutoRow gap="8px">
+          <AutoRow gap="8px" style={{ marginLeft: '8px' }}>
             <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={20} />
             <Text fontWeight={500} fontSize={20}>
               {!currency0 || !currency1 ? <Dots>Loading</Dots> : `${currency0.symbol}/${currency1.symbol}`}
             </Text>
           </AutoRow>
-          <RowFixed gap="8px">
-            <ButtonEmpty
-              padding="6px 8px"
-              borderRadius="12px"
-              width="fit-content"
-              onClick={() => setShowMore(!showMore)}
-            >
+          <RowFixed gap="8px" style={{ marginRight: '4px' }}>
+            <ButtonEmpty padding="6px 8px" borderRadius="12px" width="100%" onClick={() => setShowMore(!showMore)}>
               {showMore ? (
                 <>
                   Manage
-                  <ChevronUp size="20" style={{ marginLeft: '10px' }} />
+                  <ChevronUp size="20" style={{ marginLeft: '8px', height: '20px', minWidth: '20px' }} />
                 </>
               ) : (
                 <>
                   Manage
-                  <ChevronDown size="20" style={{ marginLeft: '10px' }} />
+                  <ChevronDown size="20" style={{ marginLeft: '8px', height: '20px', minWidth: '20px' }} />
                 </>
               )}
             </ButtonEmpty>

src/components/PositionListItem/index.tsx

@@ -244,7 +244,7 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
           >
             <RangeText>
               <ExtentsText>Min: </ExtentsText>
-              {formatPrice(priceLower, 4)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' / '}{' '}
+              {formatPrice(priceLower, 5)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' per '}{' '}
               {manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol}
             </RangeText>{' '}
             <HideSmall>
@@ -255,7 +255,7 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
             </SmallOnly>
             <RangeText>
               <ExtentsText>Max:</ExtentsText>
-              {formatPrice(priceUpper, 4)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' / '}{' '}
+              {formatPrice(priceUpper, 5)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' per '}{' '}
               {manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol}
             </RangeText>{' '}
           </RangeLineItem>

src/components/PositionPreview/index.tsx

@@ -135,7 +135,7 @@ export const PositionPreview = ({
               <TYPE.main
                 textAlign="center"
                 fontSize="12px"
-              >{` ${quoteCurrency.symbol}/${baseCurrency.symbol}`}</TYPE.main>
+              >{` ${quoteCurrency.symbol} per ${baseCurrency.symbol}`}</TYPE.main>
               <TYPE.small textAlign="center" color={theme.text3} style={{ marginTop: '4px' }}>
                 Your position will be 100% composed of {quoteCurrency?.symbol} at this price
               </TYPE.small>
@@ -149,7 +149,7 @@ export const PositionPreview = ({
             <TYPE.main
               textAlign="center"
               fontSize="12px"
-            >{` ${quoteCurrency.symbol}/${baseCurrency.symbol}`}</TYPE.main>
+            >{` ${quoteCurrency.symbol} per ${baseCurrency.symbol}`}</TYPE.main>
           </AutoColumn>
         </LightCard>
       </AutoColumn>

src/components/RateToggle/index.tsx

@@ -26,10 +26,10 @@ export default function RateToggle({
     <div style={{ width: 'fit-content', display: 'flex', alignItems: 'center' }}>
       <ToggleWrapper width="fit-content">
         <ToggleElement isActive={isSorted} fontSize="12px" onClick={handleRateToggle}>
-          {isSorted ? currencyB.symbol + ' / ' + currencyA.symbol : currencyA.symbol + ' / ' + currencyB.symbol}{' '}
+          {isSorted ? currencyA.symbol + ' price ' : currencyB.symbol + ' price '}
         </ToggleElement>
         <ToggleElement isActive={!isSorted} fontSize="12px" onClick={handleRateToggle}>
-          {isSorted ? currencyA.symbol + ' / ' + currencyB.symbol : currencyB.symbol + ' / ' + currencyA.symbol}
+          {isSorted ? currencyB.symbol + ' price ' : currencyA.symbol + ' price '}
         </ToggleElement>
       </ToggleWrapper>
     </div>

src/pages/AddLiquidity/index.tsx

@@ -552,7 +552,7 @@ export default function AddLiquidity({
                   <TYPE.main fontSize={14} fontWeight={400} style={{ marginBottom: '.5rem', lineHeight: '125%' }}>
                     Your liquidity will only earn fees when the market price of the pair is within your range.{' '}
                     <ExternalLink
-                      href={'https://docs.uniswap.org/concepts/introduction/liquidity-user-guide'}
+                      href={'https://docs.uniswap.org/concepts/introduction/liquidity-user-guide#4-set-price-range'}
                       style={{ fontSize: '14px' }}
                     >
                       Need help picking a range?
@@ -583,7 +583,7 @@ export default function AddLiquidity({
                           {invertPrice ? price.invert().toSignificant(5) : price.toSignificant(5)}{' '}
                         </TYPE.body>
                         <TYPE.main fontWeight={500} textAlign="center" fontSize={12}>
-                          {quoteCurrency?.symbol} {' / '}
+                          {quoteCurrency?.symbol} {' per '}
                           {baseCurrency.symbol}
                         </TYPE.main>
                       </AutoColumn>

src/pages/Pool/PositionPage.tsx

@@ -149,7 +149,7 @@ function CurrentPriceCard({
         <TYPE.mediumHeader textAlign="center">
           {(inverted ? pool.token1Price : pool.token0Price).toSignificant(5)}{' '}
         </TYPE.mediumHeader>
-        <ExtentsText>{currencyQuote?.symbol + ' / ' + currencyBase?.symbol}</ExtentsText>
+        <ExtentsText>{currencyQuote?.symbol + ' per ' + currencyBase?.symbol}</ExtentsText>
       </AutoColumn>
     </LightCard>
   )
@@ -420,7 +420,7 @@ export function PositionPage({
                     borderRadius="12px"
                     style={{ marginRight: '8px' }}
                   >
-                    {t('Add Liquidity')}
+                    {t('Increase Liquidity')}
                   </ButtonGray>
                 ) : null}
                 {tokenId && !removed ? (
@@ -641,7 +641,7 @@ export function PositionPage({
                 <AutoColumn gap="8px" justify="center">
                   <ExtentsText>Min price</ExtentsText>
                   <TYPE.mediumHeader textAlign="center">{priceLower?.toSignificant(5)}</TYPE.mediumHeader>
-                  <ExtentsText> {currencyQuote?.symbol + ' / ' + currencyBase?.symbol}</ExtentsText>
+                  <ExtentsText> {currencyQuote?.symbol + ' per ' + currencyBase?.symbol}</ExtentsText>
 
                   {inRange && (
                     <TYPE.small color={theme.text3}>
@@ -656,7 +656,7 @@ export function PositionPage({
                 <AutoColumn gap="8px" justify="center">
                   <ExtentsText>Max price</ExtentsText>
                   <TYPE.mediumHeader textAlign="center">{priceUpper?.toSignificant(5)}</TYPE.mediumHeader>
-                  <ExtentsText> {currencyQuote?.symbol + ' / ' + currencyBase?.symbol}</ExtentsText>
+                  <ExtentsText> {currencyQuote?.symbol + ' per ' + currencyBase?.symbol}</ExtentsText>
 
                   {inRange && (
                     <TYPE.small color={theme.text3}>

src/pages/Pool/index.tsx

 import React, { useContext } from 'react'
-import { ButtonGray, ButtonPrimary } from 'components/Button'
+import { ButtonGray, ButtonOutlined, ButtonPrimary } from 'components/Button'
 import { AutoColumn } from 'components/Column'
 import { FlyoutAlignment, NewMenu } from 'components/Menu'
 import { SwapPoolTabs } from 'components/NavigationTabs'
@@ -217,14 +217,40 @@ export default function Pool() {
               )}
             </MainContentWrapper>
             <RowFixed justify="center" style={{ width: '100%' }}>
-              <ButtonGray
+              <ButtonOutlined
                 as={Link}
                 to="/pool/v2"
                 id="import-pool-link"
-                style={{ padding: '8px 16px', borderRadius: '12px', width: 'fit-content' }}
+                style={{
+                  padding: '8px 16px',
+                  margin: '0 4px',
+                  borderRadius: '12px',
+                  width: 'fit-content',
+                  fontSize: '14px',
+                }}
               >
-                <TYPE.subHeader>{t('Looking for your V2 Liquidity')}?</TYPE.subHeader>
-              </ButtonGray>
+                <Layers size={14} style={{ marginRight: '8px' }} />
+
+                {t('View V2 Liquidity')}
+              </ButtonOutlined>
+              {positions && positions.length > 0 && (
+                <ButtonOutlined
+                  as={Link}
+                  to="/migrate/v2"
+                  id="import-pool-link"
+                  style={{
+                    padding: '8px 16px',
+                    margin: '0 4px',
+                    borderRadius: '12px',
+                    width: 'fit-content',
+                    fontSize: '14px',
+                  }}
+                >
+                  <ChevronsRight size={16} style={{ marginRight: '8px' }} />
+
+                  {t('Migrate Liquidity')}
+                </ButtonOutlined>
+              )}
             </RowFixed>
           </AutoColumn>
         </AutoColumn>

src/pages/Pool/v2.tsx

@@ -9,7 +9,9 @@ import { ExternalLink, TYPE, HideSmall } from '../../theme'
 import { Text } from 'rebass'
 import Card from '../../components/Card'
 import { RowBetween, RowFixed } from '../../components/Row'
-import { ButtonPrimary, ButtonSecondary } from '../../components/Button'
+import { ButtonPrimary, ButtonSecondary, ButtonOutlined } from '../../components/Button'
+import { ChevronsRight } from 'react-feather'
+
 import { AutoColumn } from '../../components/Column'
 
 import { useActiveWeb3React } from '../../hooks'
@@ -151,7 +153,7 @@ export default function Pool() {
         </VoteCard>
 
         <AutoColumn gap="lg" justify="center">
-          <AutoColumn gap="lg" style={{ width: '100%' }}>
+          <AutoColumn gap="md" style={{ width: '100%' }}>
             <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
               <HideSmall>
                 <TYPE.mediumHeader style={{ marginTop: '0.5rem', justifySelf: 'flex-start' }}>
@@ -170,7 +172,7 @@ export default function Pool() {
                   to="/add/v2/ETH"
                 >
                   <Text fontWeight={500} fontSize={16}>
-                    Add Liquidity
+                    Add V2 Liquidity
                   </Text>
                 </ResponsiveButtonPrimary>
               </ButtonRow>
@@ -211,6 +213,23 @@ export default function Pool() {
                       />
                     )
                 )}
+                <RowFixed justify="center" style={{ width: '100%' }}>
+                  <ButtonOutlined
+                    as={Link}
+                    to="/migrate/v2"
+                    id="import-pool-link"
+                    style={{
+                      padding: '8px 16px',
+                      margin: '0 4px',
+                      borderRadius: '12px',
+                      width: 'fit-content',
+                      fontSize: '14px',
+                    }}
+                  >
+                    <ChevronsRight size={16} style={{ marginRight: '8px' }} />
+                    Migrate Liquidity to V3
+                  </ButtonOutlined>
+                </RowFixed>
               </>
             ) : (
               <EmptyProposals>