feat: vertical LP (#7000)

* Re-organize add liquidity page

* fix title alignment

* Update styles

* Update logic for disable/enable input on creation

* lint and clean up a couple small things

* lint and clean up a couple small things

* Tweak UI

* clean up code

* add back range selector

* remove inline styles

---------
Co-authored-by: Callil Capuozzo <callil@uniswap.org>

src/components/InputStepCounter/InputStepCounter.tsx

@@ -25,9 +25,7 @@ const pulse = (color: string) => keyframes`
 `
 
 const InputRow = styled.div`
-  display: grid;
-
-  grid-template-columns: 30px 1fr 30px;
+  display: flex;
 `
 
 const SmallButton = styled(ButtonGray)`
@@ -43,18 +41,17 @@ const FocusedOutlineCard = styled(OutlineCard)<{ active?: boolean; pulsing?: boo
 
 const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
   background-color: transparent;
-  text-align: center;
-  width: 100%;
   font-weight: 500;
-  padding: 0 10px;
+  text-align: left;
+  width: 100%;
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     font-size: 16px;
   `};
+`
 
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToExtraSmall`
-    font-size: 12px;
-  `};
+const InputColumn = styled(AutoColumn)`
+  width: 100%;
 `
 
 const InputTitle = styled(ThemedText.DeprecatedSmall)`
@@ -142,20 +139,11 @@ const StepCounter = ({
 
   return (
     <FocusedOutlineCard pulsing={pulsing} active={active} onFocus={handleOnFocus} onBlur={handleOnBlur} width={width}>
-      <AutoColumn gap="6px">
-        <InputTitle fontSize={12} textAlign="center">
-          {title}
-        </InputTitle>
-
-        <InputRow>
-          {!locked && (
-            <SmallButton data-testid="decrement-price-range" onClick={handleDecrement} disabled={decrementDisabled}>
-              <ButtonLabel disabled={decrementDisabled} fontSize="12px">
-                <Minus size={18} />
-              </ButtonLabel>
-            </SmallButton>
-          )}
-
+      <InputRow>
+        <InputColumn justify="flex-start">
+          <InputTitle fontSize={12} textAlign="center">
+            {title}
+          </InputTitle>
           <StyledInput
             className="rate-input-0"
             value={localValue}
@@ -165,7 +153,14 @@ const StepCounter = ({
               setLocalValue(val)
             }}
           />
-
+          <InputTitle fontSize={12} textAlign="left">
+            <Trans>
+              {tokenB} per {tokenA}
+            </Trans>
+          </InputTitle>
+        </InputColumn>
+
+        <AutoColumn gap="8px">
           {!locked && (
             <SmallButton data-testid="increment-price-range" onClick={handleIncrement} disabled={incrementDisabled}>
               <ButtonLabel disabled={incrementDisabled} fontSize="12px">
@@ -173,14 +168,15 @@ const StepCounter = ({
               </ButtonLabel>
             </SmallButton>
           )}
-        </InputRow>
-
-        <InputTitle fontSize={12} textAlign="center">
-          <Trans>
-            {tokenB} per {tokenA}
-          </Trans>
-        </InputTitle>
-      </AutoColumn>
+          {!locked && (
+            <SmallButton data-testid="decrement-price-range" onClick={handleDecrement} disabled={decrementDisabled}>
+              <ButtonLabel disabled={decrementDisabled} fontSize="12px">
+                <Minus size={18} />
+              </ButtonLabel>
+            </SmallButton>
+          )}
+        </AutoColumn>
+      </InputRow>
     </FocusedOutlineCard>
   )
 }

src/components/LiquidityChartRangeInput/Zoom.tsx

@@ -12,7 +12,7 @@ const Wrapper = styled.div<{ count: number }>`
   grid-gap: 6px;
 
   position: absolute;
-  top: -75px;
+  top: -32px;
   right: 0;
 `
 

src/components/LiquidityChartRangeInput/index.tsx

@@ -6,7 +6,7 @@ import Loader from 'components/Icons/LoadingSpinner'
 import { format } from 'd3'
 import { useColor } from 'hooks/useColor'
 import { saturate } from 'polished'
-import React, { ReactNode, useCallback, useMemo } from 'react'
+import { ReactNode, useCallback, useMemo } from 'react'
 import { BarChart2, CloudOff, Inbox } from 'react-feather'
 import { batch } from 'react-redux'
 import { Bound } from 'state/mint/v3/actions'
@@ -46,7 +46,8 @@ const ZOOM_LEVELS: Record<FeeAmount, ZoomLevels> = {
 
 const ChartWrapper = styled.div`
   position: relative;
-
+  width: 100%;
+  max-height: 200px;
   justify-content: center;
   align-content: center;
 `
@@ -180,7 +181,7 @@ export default function LiquidityChartRangeInput({
         <ChartWrapper>
           <Chart
             data={{ series: formattedData, current: price }}
-            dimensions={{ width: 400, height: 200 }}
+            dimensions={{ width: 560, height: 200 }}
             margins={{ top: 10, right: 2, bottom: 20, left: 0 }}
             styles={{
               area: {

src/components/NavigationTabs/index.tsx

@@ -3,7 +3,7 @@ import { Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { ReactNode } from 'react'
 import { ArrowLeft } from 'react-feather'
-import { Link as HistoryLink, useLocation } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 import { Box } from 'rebass'
 import { useAppDispatch } from 'state/hooks'
 import { resetMintState } from 'state/mint/actions'
@@ -12,7 +12,7 @@ import styled, { useTheme } from 'styled-components/macro'
 import { ThemedText } from 'theme'
 import { flexRowNoWrap } from 'theme/styles'
 
-import Row, { RowBetween } from '../Row'
+import { RowBetween } from '../Row'
 import SettingsTab from '../Settings'
 
 const Tabs = styled.div`
@@ -22,7 +22,7 @@ const Tabs = styled.div`
   justify-content: space-evenly;
 `
 
-const StyledHistoryLink = styled(HistoryLink)<{ flex?: string }>`
+const StyledLink = styled(Link)<{ flex?: string }>`
   flex: ${({ flex }) => flex ?? 'none'};
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
@@ -31,9 +31,10 @@ const StyledHistoryLink = styled(HistoryLink)<{ flex?: string }>`
   `};
 `
 
-const ActiveText = styled.div`
-  font-weight: 500;
-  font-size: 20px;
+const FindPoolTabsText = styled(ThemedText.SubHeaderLarge)`
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 `
 
 const StyledArrowLeft = styled(ArrowLeft)`
@@ -44,17 +45,22 @@ export function FindPoolTabs({ origin }: { origin: string }) {
   return (
     <Tabs>
       <RowBetween style={{ padding: '1rem 1rem 0 1rem', position: 'relative' }}>
-        <HistoryLink to={origin}>
+        <Link to={origin}>
           <StyledArrowLeft />
-        </HistoryLink>
-        <ActiveText style={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)' }}>
+        </Link>
+        <FindPoolTabsText>
           <Trans>Import V2 Pool</Trans>
-        </ActiveText>
+        </FindPoolTabsText>
       </RowBetween>
     </Tabs>
   )
 }
 
+const AddRemoveTitleText = styled(ThemedText.SubHeaderLarge)`
+  flex: 1;
+  margin: auto;
+`
+
 export function AddRemoveTabs({
   adding,
   creating,
@@ -83,7 +89,7 @@ export function AddRemoveTabs({
   return (
     <Tabs>
       <RowBetween style={{ padding: '1rem 1rem 0 1rem' }}>
-        <StyledHistoryLink
+        <StyledLink
           to={poolLink}
           onClick={() => {
             if (adding) {
@@ -95,12 +101,8 @@ export function AddRemoveTabs({
           flex={children ? '1' : undefined}
         >
           <StyledArrowLeft stroke={theme.textSecondary} />
-        </StyledHistoryLink>
-        <ThemedText.DeprecatedMediumHeader
-          fontWeight={500}
-          fontSize={20}
-          style={{ flex: '1', margin: 'auto', textAlign: children ? 'start' : 'center' }}
-        >
+        </StyledLink>
+        <AddRemoveTitleText textAlign={children ? 'start' : 'center'}>
           {creating ? (
             <Trans>Create a pair</Trans>
           ) : adding ? (
@@ -108,23 +110,10 @@ export function AddRemoveTabs({
           ) : (
             <Trans>Remove Liquidity</Trans>
           )}
-        </ThemedText.DeprecatedMediumHeader>
-        <Box style={{ marginRight: '.5rem' }}>{children}</Box>
+        </AddRemoveTitleText>
+        {children && <Box style={{ marginRight: '.5rem' }}>{children}</Box>}
         <SettingsTab autoSlippage={autoSlippage} chainId={chainId} />
       </RowBetween>
     </Tabs>
   )
 }
-
-export function CreateProposalTabs() {
-  return (
-    <Tabs>
-      <Row style={{ padding: '1rem 1rem 0 1rem' }}>
-        <HistoryLink to="/vote">
-          <StyledArrowLeft />
-        </HistoryLink>
-        <ActiveText style={{ marginLeft: 'auto', marginRight: 'auto' }}>Create Proposal</ActiveText>
-      </Row>
-    </Tabs>
-  )
-}

src/components/RangeSelector/PresetsButtons.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
 const Button = styled(ButtonOutlined).attrs(() => ({
-  padding: '8px',
+  padding: '6px',
   $borderRadius: '8px',
 }))`
   color: ${({ theme }) => theme.textPrimary};

src/components/RangeSelector/index.tsx

 import { Trans } from '@lingui/macro'
 import { Currency, Price, Token } from '@uniswap/sdk-core'
-import { AutoColumn } from 'components/Column'
 import StepCounter from 'components/InputStepCounter/InputStepCounter'
-import { RowBetween } from 'components/Row'
+import { AutoRow } from 'components/Row'
 import { Bound } from 'state/mint/v3/actions'
 
 // currencyA is the base token
@@ -41,37 +40,33 @@ export default function RangeSelector({
   const rightPrice = isSorted ? priceUpper : priceLower?.invert()
 
   return (
-    <AutoColumn gap="md">
-      <RowBetween>
-        <StepCounter
-          value={ticksAtLimit[isSorted ? Bound.LOWER : Bound.UPPER] ? '0' : leftPrice?.toSignificant(5) ?? ''}
-          onUserInput={onLeftRangeInput}
-          width="48%"
-          decrement={isSorted ? getDecrementLower : getIncrementUpper}
-          increment={isSorted ? getIncrementLower : getDecrementUpper}
-          decrementDisabled={leftPrice === undefined || ticksAtLimit[isSorted ? Bound.LOWER : Bound.UPPER]}
-          incrementDisabled={leftPrice === undefined || ticksAtLimit[isSorted ? Bound.LOWER : Bound.UPPER]}
-          feeAmount={feeAmount}
-          label={leftPrice ? `${currencyB?.symbol}` : '-'}
-          title={<Trans>Min Price</Trans>}
-          tokenA={currencyA?.symbol}
-          tokenB={currencyB?.symbol}
-        />
-        <StepCounter
-          value={ticksAtLimit[isSorted ? Bound.UPPER : Bound.LOWER] ? '∞' : rightPrice?.toSignificant(5) ?? ''}
-          onUserInput={onRightRangeInput}
-          width="48%"
-          decrement={isSorted ? getDecrementUpper : getIncrementLower}
-          increment={isSorted ? getIncrementUpper : getDecrementLower}
-          incrementDisabled={rightPrice === undefined || ticksAtLimit[isSorted ? Bound.UPPER : Bound.LOWER]}
-          decrementDisabled={rightPrice === undefined || ticksAtLimit[isSorted ? Bound.UPPER : Bound.LOWER]}
-          feeAmount={feeAmount}
-          label={rightPrice ? `${currencyB?.symbol}` : '-'}
-          tokenA={currencyA?.symbol}
-          tokenB={currencyB?.symbol}
-          title={<Trans>Max Price</Trans>}
-        />
-      </RowBetween>
-    </AutoColumn>
+    <AutoRow gap="md">
+      <StepCounter
+        value={ticksAtLimit[isSorted ? Bound.LOWER : Bound.UPPER] ? '0' : leftPrice?.toSignificant(8) ?? ''}
+        onUserInput={onLeftRangeInput}
+        decrement={isSorted ? getDecrementLower : getIncrementUpper}
+        increment={isSorted ? getIncrementLower : getDecrementUpper}
+        decrementDisabled={leftPrice === undefined || ticksAtLimit[isSorted ? Bound.LOWER : Bound.UPPER]}
+        incrementDisabled={leftPrice === undefined || ticksAtLimit[isSorted ? Bound.LOWER : Bound.UPPER]}
+        feeAmount={feeAmount}
+        label={leftPrice ? `${currencyB?.symbol}` : '-'}
+        title={<Trans>Low price</Trans>}
+        tokenA={currencyA?.symbol}
+        tokenB={currencyB?.symbol}
+      />
+      <StepCounter
+        value={ticksAtLimit[isSorted ? Bound.UPPER : Bound.LOWER] ? '∞' : rightPrice?.toSignificant(8) ?? ''}
+        onUserInput={onRightRangeInput}
+        decrement={isSorted ? getDecrementUpper : getIncrementLower}
+        increment={isSorted ? getIncrementUpper : getDecrementLower}
+        incrementDisabled={rightPrice === undefined || ticksAtLimit[isSorted ? Bound.UPPER : Bound.LOWER]}
+        decrementDisabled={rightPrice === undefined || ticksAtLimit[isSorted ? Bound.UPPER : Bound.LOWER]}
+        feeAmount={feeAmount}
+        label={rightPrice ? `${currencyB?.symbol}` : '-'}
+        tokenA={currencyA?.symbol}
+        tokenB={currencyB?.symbol}
+        title={<Trans>High price</Trans>}
+      />
+    </AutoRow>
   )
 }

src/pages/AddLiquidity/styled.tsx

 import { AutoColumn } from 'components/Column'
 import CurrencyInputPanel from 'components/CurrencyInputPanel'
 import Input from 'components/NumericalInput'
-import { BodyWrapper } from 'pages/AppBody'
 import styled from 'styled-components/macro'
 
-export const PageWrapper = styled(BodyWrapper)<{ wide: boolean }>`
-  max-width: ${({ wide }) => (wide ? '880px' : '480px')};
-  width: 100%;
-
-  padding: ${({ wide }) => (wide ? '10px' : '0')};
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
-    max-width: 480px;
-  `};
-`
-
 export const Wrapper = styled.div`
   position: relative;
   padding: 26px 16px;
-  min-width: 480px;
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
-    min-width: 400px;
-  `};
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToExtraSmall`
-  min-width: 340px;
-`};
 `
 
 export const ScrollablePage = styled.div`
-  padding: 68px 8px 0px;
+  padding: 20px 8px 0px;
   position: relative;
   display: flex;
   flex-direction: column;
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
-    max-width: 480px;
     margin: 0 auto;
   `};
 
@@ -67,56 +45,19 @@ export const StyledInput = styled(Input)`
 
 /* two-column layout where DepositAmount is moved at the very end on mobile. */
 export const ResponsiveTwoColumns = styled.div<{ wide: boolean }>`
-  display: grid;
-  grid-column-gap: 50px;
-  grid-row-gap: 15px;
-  grid-template-columns: ${({ wide }) => (wide ? '1fr 1fr' : '1fr')};
-  grid-template-rows: max-content;
-  grid-auto-flow: row;
-
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
   padding-top: 20px;
-
   border-top: 1px solid ${({ theme }) => theme.backgroundInteractive};
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
-    grid-template-columns: 1fr;
-
     margin-top: 0;
   `};
 `
 
-export const RightContainer = styled(AutoColumn)`
-  grid-row: 1 / 3;
-  grid-column: 2;
-  height: fit-content;
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
-  grid-row: 2 / 3;
-  grid-column: 1;
-  `};
-`
-
-export const StackedContainer = styled.div`
-  display: grid;
-`
-
-export const StackedItem = styled.div<{ zIndex?: number }>`
-  grid-column: 1;
-  grid-row: 1;
-  height: 100%;
-  z-index: ${({ zIndex }) => zIndex};
-`
-
 export const MediumOnly = styled.div`
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     display: none;
   `};
 `
-
-export const HideMedium = styled.div`
-  display: none;
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
-    display: block;
-  `};
-`

src/pages/AppBody.tsx

-import React, { PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 import styled from 'styled-components/macro'
 import { Z_INDEX } from 'theme/zIndex'
 

src/pages/CreateProposal/index.tsx

@@ -12,6 +12,8 @@ import JSBI from 'jsbi'
 import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
 import { Wrapper } from 'pages/Pool/styleds'
 import { useCallback, useMemo, useState } from 'react'
+import { ArrowLeft } from 'react-feather'
+import { Link } from 'react-router-dom'
 import {
   CreateProposalData,
   ProposalState,
@@ -24,7 +26,6 @@ import {
 import styled from 'styled-components/macro'
 import { ExternalLink, ThemedText } from 'theme'
 
-import { CreateProposalTabs } from '../../components/NavigationTabs'
 import { LATEST_GOVERNOR_INDEX } from '../../constants/governance'
 import { UNI } from '../../constants/tokens'
 import AppBody from '../AppBody'
@@ -45,6 +46,19 @@ const PageWrapper = styled(AutoColumn)`
   }
 `
 
+const BackArrow = styled(ArrowLeft)`
+  cursor: pointer;
+  color: ${({ theme }) => theme.textPrimary};
+`
+const Nav = styled(Link)`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  margin: 1em 0 0 1em;
+  text-decoration: none;
+`
+
 const CreateProposalButton = ({
   proposalThreshold,
   hasActiveOrPendingProposal,
@@ -242,7 +256,10 @@ ${bodyValue}
     <Trace page={InterfacePageName.VOTE_PAGE} shouldLogImpression>
       <PageWrapper>
         <AppBody $maxWidth="800px">
-          <CreateProposalTabs />
+          <Nav to="/vote">
+            <BackArrow />
+            <ThemedText.SubHeaderLarge>Create Proposal</ThemedText.SubHeaderLarge>
+          </Nav>
           <CreateProposalWrapper>
             <BlueCard>
               <AutoColumn gap="10px">