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