Mobile styles (#100)

* mobile styles

* remove unused local

* update react imports

* fix imports
Co-authored-by: Callil Capuozzo <callil.capuozzo@gmail.com>

src/components/Button/index.tsx

@@ -399,6 +399,10 @@ const CheckboxWrapper = styled.div`
   right: 10px;
 `
 
+const ResponsiveCheck = styled(Check)`
+  size: 13px;
+`
+
 export function ButtonRadioChecked({ active = false, children, ...rest }: { active?: boolean } & ButtonProps) {
   const theme = useTheme()
 
@@ -416,7 +420,7 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
             {children}
             <CheckboxWrapper>
               <Circle>
-                <Check size={13} stroke={theme.white} />
+                <ResponsiveCheck size={13} stroke={theme.white} />
               </Circle>
             </CheckboxWrapper>
           </RowBetween>

src/components/CurrencyInputPanel/index.tsx

@@ -246,7 +246,6 @@ export default function CurrencyInputPanel({
           </CurrencySelect>
           {!hideInput && (
             <>
-              {' '}
               <NumericalInput
                 className="token-amount-input"
                 value={value}

src/components/FeeSelector/index.tsx

@@ -6,6 +6,13 @@ import { DynamicSection } from 'pages/AddLiquidity/styled'
 import { TYPE } from 'theme'
 import { RowBetween } from 'components/Row'
 import { ButtonRadioChecked } from 'components/Button'
+import styled from 'styled-components'
+
+const ResponsiveText = styled(TYPE.label)`
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    font-size: 12px;
+  `};
+`
 
 export default function FeeSelector({
   disabled = false,
@@ -29,7 +36,7 @@ export default function FeeSelector({
             onClick={() => handleFeePoolSelect(FeeAmount.LOW)}
           >
             <AutoColumn gap="sm" justify="flex-start">
-              <TYPE.label>0.05% {t('fee')}</TYPE.label>
+              <ResponsiveText>0.05% {t('fee')}</ResponsiveText>
               <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
                 Optimized for stable assets.
               </TYPE.main>
@@ -41,7 +48,7 @@ export default function FeeSelector({
             onClick={() => handleFeePoolSelect(FeeAmount.MEDIUM)}
           >
             <AutoColumn gap="sm" justify="flex-start">
-              <TYPE.label>0.3% {t('fee')}</TYPE.label>
+              <ResponsiveText>0.3% {t('fee')}</ResponsiveText>
               <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
                 The classic Uniswap pool fee.
               </TYPE.main>
@@ -53,7 +60,7 @@ export default function FeeSelector({
             onClick={() => handleFeePoolSelect(FeeAmount.HIGH)}
           >
             <AutoColumn gap="sm" justify="flex-start">
-              <TYPE.label>1% {t('fee')}</TYPE.label>
+              <ResponsiveText>1% {t('fee')}</ResponsiveText>
               <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
                 Best for volatile assets.
               </TYPE.main>

src/components/PositionList/index.tsx

@@ -9,7 +9,7 @@ const DesktopHeader = styled.div`
   display: none;
   font-size: 14px;
   font-weight: 500;
-  padding: 8px 8px 8px 8px;
+  padding: 8px;
 
   @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
     align-items: center;
@@ -27,7 +27,8 @@ const DesktopHeader = styled.div`
 const MobileHeader = styled.div`
   font-weight: medium;
   font-size: 16px;
-  margin-bottom: 16px;
+  font-weight: 500;
+  padding: 8px;
   @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
     display: none;
   }

src/components/PositionListItem/index.tsx

@@ -8,7 +8,7 @@ import { AlertCircle } from 'react-feather'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
-import { MEDIA_WIDTHS } from 'theme'
+import { HideSmall, MEDIA_WIDTHS, SmallOnly } from 'theme'
 import { PositionDetails } from 'types/position'
 import { WETH9, Price, Token, Percent } from '@uniswap/sdk-core'
 import { formatPrice } from 'utils/formatTokenAmount'
@@ -52,10 +52,18 @@ const Row = styled(Link)`
   @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
     flex-direction: row;
   }
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    flex-direction: column;
+    row-gap: 24px;
+  `};
 `
 const BadgeText = styled.div`
   font-weight: 500;
   font-size: 14px;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    font-size: 12px;
+  `};
 `
 const BadgeWrapper = styled.div`
   font-size: 14px;
@@ -66,13 +74,24 @@ const DataLineItem = styled.div`
 
 const RangeLineItem = styled(DataLineItem)`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   cursor: pointer;
+  align-items: center;
   justify-self: flex-end;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+  flex-direction: column;
+  row-gap: 4px;
+`};
 `
 
 const DoubleArrow = styled.span`
+  margin: 0 2px;
   color: ${({ theme }) => theme.text3};
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    margin: 4px;
+    padding: 20px;
+  `};
 `
 
 const RangeText = styled.span`
@@ -99,6 +118,10 @@ const PrimaryPositionIdData = styled.div`
 const DataText = styled.div`
   font-weight: 600;
   font-size: 18px;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    font-size: 14px;
+  `};
 `
 
 export interface PositionListItemProps {
@@ -258,26 +281,28 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
 
       {priceLower && priceUpper ? (
         <>
-          {' '}
           <RangeLineItem
             onClick={(e) => {
               e.stopPropagation()
               setManuallyInverted(!manuallyInverted)
             }}
           >
-            <span>
-              <RangeText>
-                <ExtentsText>Min: </ExtentsText>
-                {formatPrice(priceLower, 4)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' / '}{' '}
-                {manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol}
-              </RangeText>{' '}
+            <RangeText>
+              <ExtentsText>Min: </ExtentsText>
+              {formatPrice(priceLower, 4)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' / '}{' '}
+              {manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol}
+            </RangeText>{' '}
+            <HideSmall>
               <DoubleArrow>⟷</DoubleArrow>{' '}
-              <RangeText>
-                <ExtentsText>Max:</ExtentsText>
-                {formatPrice(priceUpper, 4)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' / '}{' '}
-                {manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol}
-              </RangeText>{' '}
-            </span>
+            </HideSmall>
+            <SmallOnly>
+              <DoubleArrow>↕</DoubleArrow>{' '}
+            </SmallOnly>
+            <RangeText>
+              <ExtentsText>Max:</ExtentsText>
+              {formatPrice(priceUpper, 4)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' / '}{' '}
+              {manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol}
+            </RangeText>{' '}
           </RangeLineItem>
         </>
       ) : (

src/components/Row/index.tsx

@@ -43,4 +43,12 @@ export const RowFixed = styled(Row)<{ gap?: string; justify?: string }>`
   margin: ${({ gap }) => gap && `-${gap}`};
 `
 
+export const RowResponsive = styled(Row)`
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+      flex-direction: column;
+      justify-content: flext-start;
+      align-items: flex-start;
+  `}
+`
+
 export default Row

src/components/TransactionConfirmationModal/index.tsx

@@ -156,7 +156,7 @@ export function ConfirmationModalContent({
   bottomContent?: () => React.ReactNode | undefined
 }) {
   return (
-    <Wrapper style={{ padding: 0 }}>
+    <Wrapper>
       <Section>
         <RowBetween>
           <Text fontWeight={500} fontSize={16}>

src/components/earn/styled.ts

@@ -35,7 +35,6 @@ export const CardBGImage = styled.span<{ desaturate?: boolean }>`
   left: -100px;
   transform: rotate(-15deg);
   user-select: none;
-
   ${({ desaturate }) => desaturate && `filter: saturate(0)`}
 `
 

src/components/swap/BetterTradeLink.tsx

@@ -5,11 +5,23 @@ import { Link } from 'react-router-dom'
 
 import useParsedQueryString from '../../hooks/useParsedQueryString'
 import useToggledVersion, { DEFAULT_VERSION, Version } from '../../hooks/useToggledVersion'
-import { TYPE } from '../../theme'
+import { HideSmall, TYPE, SmallOnly } from '../../theme'
 import { ButtonPrimary } from '../Button'
-
+import styled from 'styled-components'
 import { Zap } from 'react-feather'
 
+const ResponsiveButton = styled(ButtonPrimary)`
+  width: fit-content;
+  padding: 0.2rem 0.5rem;
+  wordbreak: keep-all;
+  height: 24px;
+  marginleft: 0.25rem;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+     padding: 4px;
+    border-radius: 8px;
+  `};
+`
+
 export default function BetterTradeLink({
   version,
   otherTradeNonexistent = false,
@@ -31,24 +43,23 @@ export default function BetterTradeLink({
   }, [location, search, version])
 
   return (
-    <ButtonPrimary
-      as={Link}
-      to={linkDestination}
-      style={{
-        width: 'fit-content',
-        padding: '.2rem .5rem',
-        wordBreak: 'keep-all',
-        height: '24px',
-        marginLeft: '.25rem',
-      }}
-    >
+    <ResponsiveButton as={Link} to={linkDestination}>
       <Zap size={12} style={{ marginRight: '0.25rem' }} />
-      <TYPE.small style={{ lineHeight: '120%' }} fontSize={12}>
-        {otherTradeNonexistent
-          ? `No liquidity! Click to trade with ${version.toUpperCase()}`
-          : `Get a better price on ${version.toUpperCase()}`}
-      </TYPE.small>
-    </ButtonPrimary>
+      <HideSmall>
+        <TYPE.small style={{ lineHeight: '120%' }} fontSize={12}>
+          {otherTradeNonexistent
+            ? `No liquidity! Click to trade with ${version.toUpperCase()}`
+            : `Get a better price on ${version.toUpperCase()}`}
+        </TYPE.small>
+      </HideSmall>
+      <SmallOnly>
+        <TYPE.small style={{ lineHeight: '120%' }} fontSize={12}>
+          {otherTradeNonexistent
+            ? `No liquidity! Click to trade with ${version.toUpperCase()}`
+            : `Better ${version.toUpperCase()} price`}
+        </TYPE.small>
+      </SmallOnly>
+    </ResponsiveButton>
   )
 }
 

src/components/swap/TradePrice.tsx

@@ -24,6 +24,11 @@ const StyledPriceContainer = styled.button`
   margin-left: 1rem;
   height: 24px;
   cursor: pointer;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    margin-left: 0;
+    margin-top: 8px;
+  `}
 `
 
 export default function TradePrice({ price, showInverted, setShowInverted }: TradePriceProps) {

src/pages/AddLiquidity/index.tsx

@@ -31,15 +31,7 @@ import AppBody from '../AppBody'
 import { Dots } from '../Pool/styleds'
 import { currencyId } from '../../utils/currencyId'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
-import {
-  DynamicSection,
-  CurrencyDropdown,
-  ScrollableContent,
-  StyledInput,
-  Wrapper,
-  RangeBadge,
-  ScrollablePage,
-} from './styled'
+import { DynamicSection, CurrencyDropdown, StyledInput, Wrapper, RangeBadge, ScrollablePage } from './styled'
 import { useTranslation } from 'react-i18next'
 import { useMintState, useMintActionHandlers, useDerivedMintInfo, useRangeHopCallbacks } from 'state/mint/hooks'
 import { FeeAmount, NonfungiblePositionManager } from '@uniswap/v3-sdk'
@@ -329,332 +321,327 @@ export default function AddLiquidity({
 
   return (
     <ScrollablePage>
-      <ScrollableContent>
-        <TransactionConfirmationModal
-          isOpen={showConfirm}
-          onDismiss={handleDismissConfirmation}
-          attemptingTxn={attemptingTxn}
-          hash={txHash}
-          content={() => (
-            <ConfirmationModalContent
-              title={'Add Liquidity'}
-              onDismiss={handleDismissConfirmation}
-              topContent={() => (
-                <Review
-                  currencies={currencies}
-                  parsedAmounts={parsedAmounts}
-                  position={position}
-                  existingPosition={existingPosition}
-                  priceLower={priceLower}
-                  priceUpper={priceUpper}
-                  outOfRange={outOfRange}
-                />
-              )}
-              bottomContent={() => (
-                <ButtonPrimary onClick={onAdd}>
-                  <Text fontWeight={500} fontSize={20}>
-                    Add
-                  </Text>
-                </ButtonPrimary>
-              )}
-            />
-          )}
-          pendingText={pendingText}
-        />
-        <AppBody>
-          <AddRemoveTabs creating={false} adding={true} />
-          <Wrapper>
-            <AutoColumn gap="lg">
-              {!hasExistingPosition ? (
-                <>
-                  <AutoColumn gap="md">
-                    <RowBetween paddingBottom="20px">
-                      <TYPE.label>Select a pair</TYPE.label>
-                      <ButtonText onClick={clearAll}>
-                        <TYPE.blue fontSize="12px">Clear All</TYPE.blue>
-                      </ButtonText>
-                    </RowBetween>
-
-                    <RowBetween>
-                      <CurrencyDropdown
-                        value={formattedAmounts[Field.CURRENCY_A]}
-                        onUserInput={onFieldAInput}
-                        hideInput={true}
-                        onMax={() => {
-                          onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
-                        }}
-                        onCurrencySelect={handleCurrencyASelect}
-                        showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
-                        currency={currencies[Field.CURRENCY_A]}
-                        id="add-liquidity-input-tokena"
-                        showCommonBases
-                      />
-
-                      <CurrencyDropdown
-                        value={formattedAmounts[Field.CURRENCY_B]}
-                        hideInput={true}
-                        onUserInput={onFieldBInput}
-                        onCurrencySelect={handleCurrencyBSelect}
-                        onMax={() => {
-                          onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
-                        }}
-                        showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
-                        currency={currencies[Field.CURRENCY_B]}
-                        id="add-liquidity-input-tokenb"
-                        showCommonBases
-                      />
-                    </RowBetween>
-                  </AutoColumn>{' '}
-                </>
-              ) : (
-                <RowBetween>
-                  <RowFixed>
-                    <DoubleCurrencyLogo
-                      currency0={currencyA ?? undefined}
-                      currency1={currencyB ?? undefined}
-                      size={24}
-                      margin={true}
+      <TransactionConfirmationModal
+        isOpen={showConfirm}
+        onDismiss={handleDismissConfirmation}
+        attemptingTxn={attemptingTxn}
+        hash={txHash}
+        content={() => (
+          <ConfirmationModalContent
+            title={'Add Liquidity'}
+            onDismiss={handleDismissConfirmation}
+            topContent={() => (
+              <Review
+                currencies={currencies}
+                parsedAmounts={parsedAmounts}
+                position={position}
+                existingPosition={existingPosition}
+                priceLower={priceLower}
+                priceUpper={priceUpper}
+                outOfRange={outOfRange}
+              />
+            )}
+            bottomContent={() => (
+              <ButtonPrimary onClick={onAdd} mt="16px">
+                <Text fontWeight={500} fontSize={20}>
+                  Add
+                </Text>
+              </ButtonPrimary>
+            )}
+          />
+        )}
+        pendingText={pendingText}
+      />
+      <AppBody>
+        <AddRemoveTabs creating={false} adding={true} />
+        <Wrapper>
+          <AutoColumn gap="lg">
+            {!hasExistingPosition ? (
+              <>
+                <AutoColumn gap="md">
+                  <RowBetween paddingBottom="20px">
+                    <TYPE.label>Select a pair</TYPE.label>
+                    <ButtonText onClick={clearAll}>
+                      <TYPE.blue fontSize="12px">Clear All</TYPE.blue>
+                    </ButtonText>
+                  </RowBetween>
+
+                  <RowBetween>
+                    <CurrencyDropdown
+                      value={formattedAmounts[Field.CURRENCY_A]}
+                      onUserInput={onFieldAInput}
+                      hideInput={true}
+                      onMax={() => {
+                        onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
+                      }}
+                      onCurrencySelect={handleCurrencyASelect}
+                      showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
+                      currency={currencies[Field.CURRENCY_A]}
+                      id="add-liquidity-input-tokena"
+                      showCommonBases
                     />
-                    <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'} />
-              ) : (
-                <>
-                  <FeeSelector
-                    disabled={!currencyB || !currencyA}
-                    feeAmount={feeAmount}
-                    handleFeePoolSelect={handleFeePoolSelect}
+                    <CurrencyDropdown
+                      value={formattedAmounts[Field.CURRENCY_B]}
+                      hideInput={true}
+                      onUserInput={onFieldBInput}
+                      onCurrencySelect={handleCurrencyBSelect}
+                      onMax={() => {
+                        onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
+                      }}
+                      showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
+                      currency={currencies[Field.CURRENCY_B]}
+                      id="add-liquidity-input-tokenb"
+                      showCommonBases
+                    />
+                  </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'} />
+            ) : (
+              <>
+                <FeeSelector
+                  disabled={!currencyB || !currencyA}
+                  feeAmount={feeAmount}
+                  handleFeePoolSelect={handleFeePoolSelect}
+                />
 
-                  {noLiquidity && (
-                    <DynamicSection disabled={!currencyA || !currencyB}>
-                      <AutoColumn gap="md">
-                        <BlueCard width="100%" padding="1rem">
-                          You are the first to provide liquidity to this pool.
-                        </BlueCard>
-                        <RowBetween>
-                          <TYPE.label>{t('selectStartingPrice')}</TYPE.label>
-                          {baseCurrency && quoteCurrency ? (
-                            <RateToggle
-                              currencyA={baseCurrency}
-                              currencyB={quoteCurrency}
-                              handleRateToggle={() => {
-                                onLeftRangeInput('')
-                                onRightRangeInput('')
-                                setBaseCurrency(quoteCurrency)
-                              }}
-                            />
-                          ) : null}
-                        </RowBetween>
-
-                        <OutlineCard padding="12px">
-                          <StyledInput
-                            className="start-price-input"
-                            value={startPriceTypedValue}
-                            onUserInput={onStartPriceInput}
+                {noLiquidity && (
+                  <DynamicSection disabled={!currencyA || !currencyB}>
+                    <AutoColumn gap="md">
+                      <BlueCard width="100%" padding="1rem">
+                        You are the first to provide liquidity to this pool.
+                      </BlueCard>
+                      <RowBetween>
+                        <TYPE.label>{t('selectStartingPrice')}</TYPE.label>
+                        {baseCurrency && quoteCurrency ? (
+                          <RateToggle
+                            currencyA={baseCurrency}
+                            currencyB={quoteCurrency}
+                            handleRateToggle={() => {
+                              onLeftRangeInput('')
+                              onRightRangeInput('')
+                              setBaseCurrency(quoteCurrency)
+                            }}
                           />
-                        </OutlineCard>
-                        <RowBetween style={{ backgroundColor: theme.bg6, padding: '12px', borderRadius: '12px' }}>
-                          <TYPE.main>Current {baseCurrency?.symbol} Price:</TYPE.main>
-                          <TYPE.main>
-                            {price ? (
-                              <TYPE.main>
-                                {invertPrice ? price?.invert()?.toSignificant(8) : price?.toSignificant(8)}{' '}
-                                {quoteCurrency?.symbol}
-                              </TYPE.main>
-                            ) : (
-                              '-'
-                            )}
-                          </TYPE.main>
-                        </RowBetween>
-                      </AutoColumn>
-                    </DynamicSection>
-                  )}
+                        ) : null}
+                      </RowBetween>
 
-                  <DynamicSection
-                    gap="md"
-                    disabled={!feeAmount || invalidPool || (noLiquidity && !startPriceTypedValue)}
-                  >
-                    <RowBetween>
-                      <TYPE.label>{t('selectLiquidityRange')}</TYPE.label>
-                      {baseCurrency && quoteCurrency ? (
-                        <RateToggle
-                          currencyA={baseCurrency}
-                          currencyB={quoteCurrency}
-                          handleRateToggle={() => {
-                            onLeftRangeInput('')
-                            onRightRangeInput('')
-                            setBaseCurrency(quoteCurrency)
-                          }}
+                      <OutlineCard padding="12px">
+                        <StyledInput
+                          className="start-price-input"
+                          value={startPriceTypedValue}
+                          onUserInput={onStartPriceInput}
                         />
-                      ) : null}
-                    </RowBetween>
-
-                    {price && baseCurrency && quoteCurrency && !noLiquidity && (
+                      </OutlineCard>
                       <RowBetween style={{ backgroundColor: theme.bg6, padding: '12px', borderRadius: '12px' }}>
-                        <TYPE.main>Current Price</TYPE.main>
+                        <TYPE.main>Current {baseCurrency?.symbol} Price:</TYPE.main>
                         <TYPE.main>
-                          {invertPrice ? price.invert().toSignificant(3) : price.toSignificant(3)}{' '}
-                          {quoteCurrency?.symbol} = 1 {baseCurrency.symbol}
+                          {price ? (
+                            <TYPE.main>
+                              {invertPrice ? price?.invert()?.toSignificant(8) : price?.toSignificant(8)}{' '}
+                              {quoteCurrency?.symbol}
+                            </TYPE.main>
+                          ) : (
+                            '-'
+                          )}
                         </TYPE.main>
                       </RowBetween>
-                    )}
-
-                    <RangeSelector
-                      priceLower={priceLower}
-                      priceUpper={priceUpper}
-                      getDecrementLower={getDecrementLower}
-                      getIncrementLower={getIncrementLower}
-                      getDecrementUpper={getDecrementUpper}
-                      getIncrementUpper={getIncrementUpper}
-                      onLeftRangeInput={onLeftRangeInput}
-                      onRightRangeInput={onRightRangeInput}
-                      currencyA={baseCurrency}
-                      currencyB={quoteCurrency}
-                      feeAmount={feeAmount}
-                    />
-
-                    {outOfRange ? (
-                      <YellowCard padding="8px 12px" borderRadius="12px">
-                        <RowBetween>
-                          <AlertTriangle stroke={theme.yellow3} size="16px" />
-                          <TYPE.yellow ml="12px" fontSize="12px">
-                            {t('inactiveRangeWarning')}
-                          </TYPE.yellow>
-                        </RowBetween>
-                      </YellowCard>
-                    ) : null}
-
-                    {invalidRange ? (
-                      <YellowCard padding="8px 12px" borderRadius="12px">
-                        <RowBetween>
-                          <AlertTriangle stroke={theme.yellow3} size="16px" />
-                          <TYPE.yellow ml="12px" fontSize="12px">
-                            {t('invalidRangeWarning')}
-                          </TYPE.yellow>
-                        </RowBetween>
-                      </YellowCard>
-                    ) : null}
+                    </AutoColumn>
                   </DynamicSection>
-                </>
-              )}
+                )}
 
-              <DynamicSection
-                disabled={tickLower === undefined || tickUpper === undefined || invalidPool || invalidRange}
-              >
-                <AutoColumn gap="md">
-                  <TYPE.label>{hasExistingPosition ? 'Add more liquidity' : t('depositAmounts')}</TYPE.label>
+                <DynamicSection gap="md" disabled={!feeAmount || invalidPool || (noLiquidity && !startPriceTypedValue)}>
+                  <RowBetween>
+                    <TYPE.label>{t('selectLiquidityRange')}</TYPE.label>
+                    {baseCurrency && quoteCurrency ? (
+                      <RateToggle
+                        currencyA={baseCurrency}
+                        currencyB={quoteCurrency}
+                        handleRateToggle={() => {
+                          onLeftRangeInput('')
+                          onRightRangeInput('')
+                          setBaseCurrency(quoteCurrency)
+                        }}
+                      />
+                    ) : 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>
+                  )}
 
-                  <CurrencyInputPanel
-                    value={formattedAmounts[Field.CURRENCY_A]}
-                    onUserInput={onFieldAInput}
-                    onMax={() => {
-                      onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
-                    }}
-                    onCurrencySelect={handleCurrencyASelect}
-                    showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
-                    currency={currencies[Field.CURRENCY_A]}
-                    id="add-liquidity-input-tokena"
-                    showCommonBases
-                    locked={depositADisabled}
+                  <RangeSelector
+                    priceLower={priceLower}
+                    priceUpper={priceUpper}
+                    getDecrementLower={getDecrementLower}
+                    getIncrementLower={getIncrementLower}
+                    getDecrementUpper={getDecrementUpper}
+                    getIncrementUpper={getIncrementUpper}
+                    onLeftRangeInput={onLeftRangeInput}
+                    onRightRangeInput={onRightRangeInput}
+                    currencyA={baseCurrency}
+                    currencyB={quoteCurrency}
+                    feeAmount={feeAmount}
                   />
 
-                  <ColumnCenter>
-                    <Link2 stroke={theme.text2} size={'24px'} />
-                  </ColumnCenter>
+                  {outOfRange ? (
+                    <YellowCard padding="8px 12px" borderRadius="12px">
+                      <RowBetween>
+                        <AlertTriangle stroke={theme.yellow3} size="16px" />
+                        <TYPE.yellow ml="12px" fontSize="12px">
+                          {t('inactiveRangeWarning')}
+                        </TYPE.yellow>
+                      </RowBetween>
+                    </YellowCard>
+                  ) : null}
+
+                  {invalidRange ? (
+                    <YellowCard padding="8px 12px" borderRadius="12px">
+                      <RowBetween>
+                        <AlertTriangle stroke={theme.yellow3} size="16px" />
+                        <TYPE.yellow ml="12px" fontSize="12px">
+                          {t('invalidRangeWarning')}
+                        </TYPE.yellow>
+                      </RowBetween>
+                    </YellowCard>
+                  ) : null}
+                </DynamicSection>
+              </>
+            )}
+
+            <DynamicSection
+              disabled={tickLower === undefined || tickUpper === undefined || invalidPool || invalidRange}
+            >
+              <AutoColumn gap="md">
+                <TYPE.label>{hasExistingPosition ? 'Add more liquidity' : t('depositAmounts')}</TYPE.label>
+
+                <CurrencyInputPanel
+                  value={formattedAmounts[Field.CURRENCY_A]}
+                  onUserInput={onFieldAInput}
+                  onMax={() => {
+                    onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
+                  }}
+                  onCurrencySelect={handleCurrencyASelect}
+                  showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
+                  currency={currencies[Field.CURRENCY_A]}
+                  id="add-liquidity-input-tokena"
+                  showCommonBases
+                  locked={depositADisabled}
+                />
 
-                  <CurrencyInputPanel
-                    value={formattedAmounts[Field.CURRENCY_B]}
-                    onUserInput={onFieldBInput}
-                    onCurrencySelect={handleCurrencyBSelect}
-                    onMax={() => {
-                      onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
+                <ColumnCenter>
+                  <Link2 stroke={theme.text2} size={'24px'} />
+                </ColumnCenter>
+
+                <CurrencyInputPanel
+                  value={formattedAmounts[Field.CURRENCY_B]}
+                  onUserInput={onFieldBInput}
+                  onCurrencySelect={handleCurrencyBSelect}
+                  onMax={() => {
+                    onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
+                  }}
+                  showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
+                  currency={currencies[Field.CURRENCY_B]}
+                  id="add-liquidity-input-tokenb"
+                  showCommonBases
+                  locked={depositBDisabled}
+                />
+              </AutoColumn>
+            </DynamicSection>
+            <div>
+              {addIsUnsupported ? (
+                <ButtonPrimary disabled={true} borderRadius="12px" padding={'12px'}>
+                  <TYPE.main mb="4px">{t('unsupportedAsset')}</TYPE.main>
+                </ButtonPrimary>
+              ) : !account ? (
+                <ButtonLight onClick={toggleWalletModal} borderRadius="12px" padding={'12px'}>
+                  {t('connectWallet')}
+                </ButtonLight>
+              ) : (
+                <AutoColumn gap={'md'}>
+                  {(approvalA === ApprovalState.NOT_APPROVED ||
+                    approvalA === ApprovalState.PENDING ||
+                    approvalB === ApprovalState.NOT_APPROVED ||
+                    approvalB === ApprovalState.PENDING) &&
+                    isValid && (
+                      <RowBetween>
+                        {approvalA !== ApprovalState.APPROVED && (
+                          <ButtonPrimary
+                            borderRadius="12px"
+                            padding={'12px'}
+                            onClick={approveACallback}
+                            disabled={approvalA === ApprovalState.PENDING}
+                            width={approvalB !== ApprovalState.APPROVED ? '48%' : '100%'}
+                          >
+                            {approvalA === ApprovalState.PENDING ? (
+                              <Dots>Approving {currencies[Field.CURRENCY_A]?.symbol}</Dots>
+                            ) : (
+                              'Approve ' + currencies[Field.CURRENCY_A]?.symbol
+                            )}
+                          </ButtonPrimary>
+                        )}
+                        {approvalB !== ApprovalState.APPROVED && (
+                          <ButtonPrimary
+                            borderRadius="12px"
+                            padding={'12px'}
+                            onClick={approveBCallback}
+                            disabled={approvalB === ApprovalState.PENDING}
+                            width={approvalA !== ApprovalState.APPROVED ? '48%' : '100%'}
+                          >
+                            {approvalB === ApprovalState.PENDING ? (
+                              <Dots>Approving {currencies[Field.CURRENCY_B]?.symbol}</Dots>
+                            ) : (
+                              'Approve ' + currencies[Field.CURRENCY_B]?.symbol
+                            )}
+                          </ButtonPrimary>
+                        )}
+                      </RowBetween>
+                    )}
+                  <ButtonError
+                    onClick={() => {
+                      expertMode ? onAdd() : setShowConfirm(true)
                     }}
-                    showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
-                    currency={currencies[Field.CURRENCY_B]}
-                    id="add-liquidity-input-tokenb"
-                    showCommonBases
-                    locked={depositBDisabled}
-                  />
+                    disabled={
+                      !isValid ||
+                      (approvalA !== ApprovalState.APPROVED && !depositADisabled) ||
+                      (approvalB !== ApprovalState.APPROVED && !depositBDisabled)
+                    }
+                    error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]}
+                  >
+                    <Text fontWeight={500}>{errorMessage ? errorMessage : 'Add'}</Text>
+                  </ButtonError>
                 </AutoColumn>
-              </DynamicSection>
-              <div>
-                {addIsUnsupported ? (
-                  <ButtonPrimary disabled={true} borderRadius="12px" padding={'12px'}>
-                    <TYPE.main mb="4px">{t('unsupportedAsset')}</TYPE.main>
-                  </ButtonPrimary>
-                ) : !account ? (
-                  <ButtonLight onClick={toggleWalletModal} borderRadius="12px" padding={'12px'}>
-                    {t('connectWallet')}
-                  </ButtonLight>
-                ) : (
-                  <AutoColumn gap={'md'}>
-                    {(approvalA === ApprovalState.NOT_APPROVED ||
-                      approvalA === ApprovalState.PENDING ||
-                      approvalB === ApprovalState.NOT_APPROVED ||
-                      approvalB === ApprovalState.PENDING) &&
-                      isValid && (
-                        <RowBetween>
-                          {approvalA !== ApprovalState.APPROVED && (
-                            <ButtonPrimary
-                              borderRadius="12px"
-                              padding={'12px'}
-                              onClick={approveACallback}
-                              disabled={approvalA === ApprovalState.PENDING}
-                              width={approvalB !== ApprovalState.APPROVED ? '48%' : '100%'}
-                            >
-                              {approvalA === ApprovalState.PENDING ? (
-                                <Dots>Approving {currencies[Field.CURRENCY_A]?.symbol}</Dots>
-                              ) : (
-                                'Approve ' + currencies[Field.CURRENCY_A]?.symbol
-                              )}
-                            </ButtonPrimary>
-                          )}
-                          {approvalB !== ApprovalState.APPROVED && (
-                            <ButtonPrimary
-                              borderRadius="12px"
-                              padding={'12px'}
-                              onClick={approveBCallback}
-                              disabled={approvalB === ApprovalState.PENDING}
-                              width={approvalA !== ApprovalState.APPROVED ? '48%' : '100%'}
-                            >
-                              {approvalB === ApprovalState.PENDING ? (
-                                <Dots>Approving {currencies[Field.CURRENCY_B]?.symbol}</Dots>
-                              ) : (
-                                'Approve ' + currencies[Field.CURRENCY_B]?.symbol
-                              )}
-                            </ButtonPrimary>
-                          )}
-                        </RowBetween>
-                      )}
-                    <ButtonError
-                      onClick={() => {
-                        expertMode ? onAdd() : setShowConfirm(true)
-                      }}
-                      disabled={
-                        !isValid ||
-                        (approvalA !== ApprovalState.APPROVED && !depositADisabled) ||
-                        (approvalB !== ApprovalState.APPROVED && !depositBDisabled)
-                      }
-                      error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]}
-                    >
-                      <Text fontWeight={500}>{errorMessage ? errorMessage : 'Add'}</Text>
-                    </ButtonError>
-                  </AutoColumn>
-                )}
-              </div>
-            </AutoColumn>
-          </Wrapper>
-        </AppBody>
-        {/* )} */}
-      </ScrollableContent>
+              )}
+            </div>
+          </AutoColumn>
+        </Wrapper>
+      </AppBody>
+      {/* )} */}
       {addIsUnsupported && (
         <UnsupportedCurrencyFooter
           show={addIsUnsupported}

src/pages/AddLiquidity/styled.tsx

@@ -8,6 +8,14 @@ export const Wrapper = styled.div`
   position: relative;
   padding: 20px;
   min-width: 460px;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    min-width: 400px;
+  `};
+
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+  min-width: 340px;
+`};
 `
 
 export const ScrollablePage = styled.div`
@@ -16,10 +24,6 @@ export const ScrollablePage = styled.div`
   flex-direction: row;
 `
 
-export const ScrollableContent = styled.div`
-  margin-right: 16px;
-`
-
 export const RangeBadge = styled(Card)<{ inRange?: boolean }>`
   width: fit-content;
   font-size: 14px;

src/pages/App.tsx

@@ -33,19 +33,15 @@ const AppWrapper = styled.div`
   display: flex;
   flex-flow: column;
   align-items: flex-start;
-  /* overflow-x: hidden; */
 `
 
 const BodyWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding-top: 160px;
+  padding-top: 120px;
   align-items: center;
   flex: 1;
-  /* overflow-y: auto; */
-  /* overflow-x: hidden; */
-
   z-index: 1;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`

src/pages/Pool/CTACards.tsx

@@ -3,21 +3,32 @@ import styled from 'styled-components'
 import { TYPE } from 'theme'
 import { useTranslation } from 'react-i18next'
 import { ExternalLink } from '../../theme'
+import { AutoColumn } from 'components/Column'
+import Squiggle from '../../assets/images/squiggle.png'
+import Texture from '../../assets/images/sandtexture.png'
+import { RowBetween } from 'components/Row'
 
 const CTASection = styled.section`
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 8px;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    grid-template-columns: auto;
+    grid-template-rows: auto;
+  `};
 `
 
 const CTA1 = styled(ExternalLink)`
+  background-size: 40px 40px;
+  background-image: linear-gradient(to right, #2d2d2d 1px, transparent 1px),
+    linear-gradient(to bottom, #2d2d2d 1px, transparent 1px);
   background-color: ${({ theme }) => theme.bg1};
   padding: 32px;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 220px;
   border: 1px solid ${({ theme }) => theme.bg4};
 
   * {
@@ -33,6 +44,73 @@ const CTA1 = styled(ExternalLink)`
       text-decoration: none !important;
     }
   }
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+   padding: 1rem;
+  `};
+`
+
+const CTA2 = styled(ExternalLink)`
+  position: relative;
+  overflow: hidden;
+  padding: 32px;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border: 1px solid ${({ theme }) => theme.bg4};
+
+  * {
+    color: ${({ theme }) => theme.text1};
+    text-decoration: none !important;
+  }
+
+  :hover {
+    border: 1px solid ${({ theme }) => theme.bg5};
+    opacity: 0.7;
+    text-decoration: none !important;
+    * {
+      text-decoration: none !important;
+    }
+  }
+
+  :before {
+    content: '';
+    position: absolute;
+    width: 340%;
+    height: 280%;
+    top: -130%;
+    left: -134%;
+    z-index: -1;
+    background: url(${Texture}) 0 0 repeat;
+    transform: rotate(-4deg);
+  }
+`
+
+const HeaderText = styled(TYPE.label)`
+  align-items: center;
+  display: flex;
+  margin-bottom: 24px;
+  font-weight: 400;
+  font-size: 20px;
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    font-size: 20px;
+  `};
+`
+
+const ResponsiveColumn = styled(AutoColumn)`
+  gap: 12px;
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    gap: 8px;
+  `};
+`
+
+const StyledImage = styled.img`
+  margin-top: -28px;
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    height: 80px;
+    padding-right: 1rem;
+  `};
 `
 
 export default function CTACards() {
@@ -41,33 +119,29 @@ export default function CTACards() {
   return (
     <CTASection>
       <CTA1 href={''}>
-        <span>
-          <TYPE.largeHeader fontWeight={400} style={{ alignItems: 'center', display: 'flex', marginBottom: '24px' }}>
-            {t('What’s new in V3 Liquidity Pools?')}
-          </TYPE.largeHeader>
-          <TYPE.body fontWeight={300} style={{ alignItems: 'center', display: 'flex' }}>
+        <ResponsiveColumn>
+          <HeaderText>{t('What’s new in V3 Liquidity Pools?')}</HeaderText>
+          <TYPE.body fontWeight={300} style={{ alignItems: 'center', display: 'flex', maxWidth: '80%' }}>
             {t(
               'Learn all about concentrated liquidity and get informed about how to choose ranges that make sense for you.'
             )}
           </TYPE.body>
-        </span>
-        <TYPE.largeHeader fontWeight={400} style={{ alignItems: 'center', display: 'flex' }}>
-          {t('↗')}
-        </TYPE.largeHeader>
+          <RowBetween align="flex-end">
+            <HeaderText>{t('↗')}</HeaderText>
+            <StyledImage src={Squiggle} />
+          </RowBetween>
+        </ResponsiveColumn>
       </CTA1>
-      <CTA1 href={''}>
-        <span>
-          <TYPE.largeHeader fontWeight={400} style={{ alignItems: 'center', display: 'flex', marginBottom: '24px' }}>
-            {t('Top pools')}
-          </TYPE.largeHeader>
+      <CTA2 href={''}>
+        {/* <TextureBG /> */}
+        <ResponsiveColumn>
+          <HeaderText>{t('Top pools')}</HeaderText>
           <TYPE.body fontWeight={300} style={{ alignItems: 'center', display: 'flex' }}>
             {t('Explore the top pools with Uniswap Analytics.')}
           </TYPE.body>
-        </span>
-        <TYPE.largeHeader fontWeight={400} style={{ alignItems: 'center', display: 'flex' }}>
-          {t('↗')}
-        </TYPE.largeHeader>
-      </CTA1>
+          <HeaderText>{t('↗')}</HeaderText>
+        </ResponsiveColumn>
+      </CTA2>
     </CTASection>
   )
 }

src/pages/Pool/PositionPage.tsx

@@ -12,7 +12,7 @@ import styled from 'styled-components'
 import { AutoColumn } from 'components/Column'
 import { RowBetween, RowFixed } from 'components/Row'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
-import { TYPE } from 'theme'
+import { HideExtraSmall, TYPE } from 'theme'
 import Badge from 'components/Badge'
 import { calculateGasMargin } from 'utils'
 import { ButtonConfirmed, ButtonPrimary, ButtonGray } from 'components/Button'
@@ -31,19 +31,37 @@ import ReactGA from 'react-ga'
 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'
 import useUSDCPrice from 'hooks/useUSDCPrice'
+import Loader from 'components/Loader'
 
 const PageWrapper = styled.div`
   min-width: 800px;
   max-width: 960px;
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    min-width: 680px;
+    max-width: 680px;
+  `};
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    min-width: 600px;
+    max-width: 600px;
+  `};
+
+  @media only screen and (max-width: 620px) {
+    min-width: 500px;
+    max-width: 500px;
+  }
+
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+    min-width: 340px;
+    max-width: 340px;
+  `};
 `
 
 const BadgeText = styled.div`
@@ -88,6 +106,14 @@ const DoubleArrow = styled.span`
   color: ${({ theme }) => theme.text3};
   margin: 0 1rem;
 `
+const ResponsiveRow = styled(RowBetween)`
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 16px;
+    width: 100%:
+  `};
+`
 
 const ResponsiveButtonPrimary = styled(ButtonPrimary)`
   border-radius: 12px;
@@ -315,7 +341,7 @@ export function PositionPage({
           <Link style={{ textDecoration: 'none', width: 'fit-content', marginBottom: '0.5rem' }} to="/pool">
             <HoverText>{'← Back to overview'}</HoverText>
           </Link>
-          <RowBetween>
+          <ResponsiveRow>
             <RowFixed>
               <DoubleCurrencyLogo currency0={currencyBase} currency1={currencyQuote} size={24} margin={true} />
               <TYPE.label fontSize={'24px'} mr="10px">
@@ -326,7 +352,6 @@ export function PositionPage({
               </Badge>
               <RangeBadge inRange={inRange} />
             </RowFixed>
-
             {ownsNFT && (
               <RowFixed>
                 {currency0 && currency1 && feeAmount && tokenId ? (
@@ -355,10 +380,10 @@ export function PositionPage({
                 )}
               </RowFixed>
             )}
-          </RowBetween>
+          </ResponsiveRow>
           <RowBetween></RowBetween>
         </AutoColumn>
-        <RowBetween align="flex-start">
+        <ResponsiveRow align="flex-start">
           {'result' in metadata ? (
             <DarkCard
               width="100%"
@@ -369,17 +394,27 @@ export function PositionPage({
                 flexDirection: 'column',
                 justifyContent: 'space-around',
                 marginRight: '12px',
-                maxWidth: '360px',
               }}
             >
               <div style={{ marginRight: 12 }}>
                 <img height="400px" src={metadata.result.image} />
               </div>
             </DarkCard>
-          ) : null}
-          <AutoColumn gap="sm" style={{ width: '100%' }}>
+          ) : (
+            <DarkCard
+              width="100%"
+              height="100%"
+              style={{
+                marginRight: '12px',
+                minWidth: '340px',
+              }}
+            >
+              <Loader />
+            </DarkCard>
+          )}
+          <AutoColumn gap="sm" style={{ width: '100%', height: '100%' }}>
             <DarkCard>
-              <AutoColumn gap="lg" style={{ width: '100%' }}>
+              <AutoColumn gap="md" style={{ width: '100%' }}>
                 <AutoColumn gap="md">
                   <Label>Position liquidity</Label>
                   {fiatValueOfLiquidity?.greaterThan(new Fraction(1, 100)) && (
@@ -388,7 +423,6 @@ export function PositionPage({
                     </TYPE.largeHeader>
                   )}
                 </AutoColumn>
-
                 <LightCard padding="12px 16px">
                   <AutoColumn gap="md">
                     <RowBetween>
@@ -413,9 +447,8 @@ export function PositionPage({
                 </LightCard>
               </AutoColumn>
             </DarkCard>
-            <span style={{ width: '24px' }}></span>
             <DarkCard>
-              <AutoColumn gap="lg" style={{ width: '100%' }}>
+              <AutoColumn gap="md" style={{ width: '100%' }}>
                 <AutoColumn gap="md">
                   <RowBetween style={{ alignItems: 'flex-start' }}>
                     <AutoColumn gap="md">
@@ -451,7 +484,6 @@ export function PositionPage({
                     ) : null}
                   </RowBetween>
                 </AutoColumn>
-
                 <LightCard padding="12px 16px">
                   <AutoColumn gap="md">
                     <RowBetween>
@@ -489,17 +521,22 @@ export function PositionPage({
               </AutoColumn>
             </DarkCard>
           </AutoColumn>
-        </RowBetween>
+        </ResponsiveRow>
         <DarkCard>
           <AutoColumn gap="md">
             <RowBetween>
-              <Label display="flex" style={{ marginRight: '12px' }}>
-                Price range
-              </Label>
-
               <RowFixed>
-                <RangeBadge inRange={inRange} />
-                <span style={{ width: '8px' }} />
+                <Label display="flex" style={{ marginRight: '12px' }}>
+                  Price range
+                </Label>
+                <HideExtraSmall>
+                  <>
+                    <RangeBadge inRange={inRange} />
+                    <span style={{ width: '8px' }} />
+                  </>
+                </HideExtraSmall>
+              </RowFixed>
+              <RowFixed>
                 {currencyBase && currencyQuote && (
                   <RateToggle
                     currencyA={currencyBase}

src/pages/Pool/index.tsx

@@ -20,6 +20,14 @@ import CTACards from './CTACards'
 const PageWrapper = styled(AutoColumn)`
   max-width: 870px;
   width: 100%;
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    max-width: 800px;
+  `};
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    max-width: 500px;
+  `};
 `
 const TitleRow = styled(RowBetween)`
   color: ${({ theme }) => theme.text2};

src/pages/RemoveLiquidity/V3.tsx

@@ -23,7 +23,7 @@ import { TransactionResponse } from '@ethersproject/providers'
 import { useTransactionAdder } from 'state/transactions/hooks'
 import { WETH9, CurrencyAmount } from '@uniswap/sdk-core'
 import { TYPE } from 'theme'
-import { Wrapper, SmallMaxButton } from './styled'
+import { Wrapper, SmallMaxButton, ResponsiveHeaderText } from './styled'
 import Loader from 'components/Loader'
 import { useToken } from 'hooks/Tokens'
 import { unwrappedToken } from 'utils/wrappedCurrency'
@@ -196,7 +196,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
 
   function modalHeader() {
     return (
-      <AutoColumn gap={'sm'} style={{ marginTop: '20px' }}>
+      <AutoColumn gap={'sm'} style={{ padding: '16px' }}>
         <RowBetween align="flex-end">
           <Text fontSize={16} fontWeight={500}>
             {currency0?.symbol}:
@@ -287,7 +287,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
                 <AutoColumn gap="md">
                   <TYPE.main fontWeight={400}>Amount</TYPE.main>
                   <RowBetween>
-                    <TYPE.label fontSize="40px">{percentForSlider}%</TYPE.label>
+                    <ResponsiveHeaderText>{percentForSlider}%</ResponsiveHeaderText>
                     <AutoRow gap="4px" justify="flex-end">
                       <SmallMaxButton onClick={() => onPercentSelect(25)} width="20%">
                         25%

src/pages/RemoveLiquidity/styled.ts

 import { MaxButton } from 'pages/Pool/styleds'
+import { Text } from 'rebass'
 import styled from 'styled-components'
 
 export const Wrapper = styled.div`
   position: relative;
   padding: 20px;
   min-width: 460px;
+
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+    min-width: 340px;
+  `};
 `
 
 export const SmallMaxButton = styled(MaxButton)`
   font-size: 12px;
 `
+
+export const ResponsiveHeaderText = styled(Text)`
+  font-size: 40px;
+  font-weight: 500;
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+     font-size: 24px
+  `};
+`

src/pages/Swap/index.tsx

@@ -18,7 +18,7 @@ import { AutoColumn } from '../../components/Column'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
 import CurrencyLogo from '../../components/CurrencyLogo'
 import Loader from '../../components/Loader'
-import { AutoRow, RowBetween, RowFixed } from '../../components/Row'
+import { AutoRow, RowResponsive, RowFixed } from '../../components/Row'
 import BetterTradeLink from '../../components/swap/BetterTradeLink'
 import confirmPriceImpactWithoutFee from '../../components/swap/confirmPriceImpactWithoutFee'
 import ConfirmSwapModal from '../../components/swap/ConfirmSwapModal'
@@ -398,7 +398,7 @@ export default function Swap({ history }: RouteComponentProps) {
               </>
             ) : null}
 
-            <RowBetween style={{ justifyContent: !trade ? 'center' : 'space-between' }}>
+            <RowResponsive style={{ justifyContent: !trade ? 'center' : 'space-between' }}>
               <RowFixed>
                 {[V3TradeState.VALID, V3TradeState.SYNCING, V3TradeState.NO_ROUTE_FOUND].includes(v3TradeState) &&
                   (toggledVersion === Version.v3 && isTradeBetter(v3Trade, v2Trade) ? (
@@ -473,7 +473,7 @@ export default function Swap({ history }: RouteComponentProps) {
                   </MouseoverTooltipContent>
                 )}
               </RowFixed>
-            </RowBetween>
+            </RowResponsive>
 
             <BottomGrouping>
               {swapIsUnsupported ? (

src/pages/Vote/index.tsx

@@ -71,9 +71,9 @@ const VoteCard = styled(DataCard)`
 `
 
 const WrapSmall = styled(RowBetween)`
+  margin-bottom: 1rem;
   ${({ theme }) => theme.mediaWidth.upToSmall`
     flex-wrap: wrap;
-  
   `};
 `
 

src/theme/components.tsx

@@ -299,6 +299,13 @@ export const HideExtraSmall = styled.span`
   `};
 `
 
+export const SmallOnly = styled.span`
+  display: none;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: block;
+  `};
+`
+
 export const ExtraSmallOnly = styled.span`
   display: none;
   ${({ theme }) => theme.mediaWidth.upToExtraSmall`