Design tweaks (#717)

* Prepare for V2 testing

* Bug fixes and tweaks

* Add form link

* Design tweaks

* higher quality favicon

* Favicon... again.

Co-authored-by: Ian Lapham <ianlapham@gmail.com>

src/assets/images/question.svg

@@ -1,4 +1,4 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="8" cy="8" r="8" fill="#E1E1E1"/>
+<circle cx="8" cy="8" r="8" fill="#EDEEF2"/>
-<path d="M7.09618 9.67828H8.18831V9.60573C8.20358 8.72745 8.45561 8.33413 9.10477 7.93317C9.78831 7.52076 10.2084 6.94033 10.2084 6.08115C10.2084 4.8401 9.26897 4 7.86754 4C6.58067 4 5.54964 4.75227 5.5 6.12697H6.66086C6.70668 5.31742 7.28329 4.96229 7.86754 4.96229C8.51671 4.96229 9.04368 5.39379 9.04368 6.06969C9.04368 6.63866 8.68854 7.03962 8.23413 7.3222C7.52387 7.75752 7.10382 8.18902 7.09618 9.60573V9.67828ZM7.67279 12C8.08902 12 8.43652 11.6601 8.43652 11.2363C8.43652 10.82 8.08902 10.4764 7.67279 10.4764C7.25274 10.4764 6.90907 10.82 6.90907 11.2363C6.90907 11.6601 7.25274 12 7.67279 12Z" fill="#737373"/>
+<path d="M7.09618 9.67828H8.18831V9.60573C8.20358 8.72745 8.45561 8.33413 9.10477 7.93317C9.78831 7.52076 10.2084 6.94033 10.2084 6.08115C10.2084 4.8401 9.26897 4 7.86754 4C6.58067 4 5.54964 4.75227 5.5 6.12697H6.66086C6.70668 5.31742 7.28329 4.96229 7.86754 4.96229C8.51671 4.96229 9.04368 5.39379 9.04368 6.06969C9.04368 6.63866 8.68854 7.03962 8.23413 7.3222C7.52387 7.75752 7.10382 8.18902 7.09618 9.60573V9.67828ZM7.67279 12C8.08902 12 8.43652 11.6601 8.43652 11.2363C8.43652 10.82 8.08902 10.4764 7.67279 10.4764C7.25274 10.4764 6.90907 10.82 6.90907 11.2363C6.90907 11.6601 7.25274 12 7.67279 12Z" fill="#565A69"/>
 </svg>

src/components/CurrencyInputPanel/index.js

@@ -167,7 +167,7 @@ export default function CurrencyInputPanel({
         {!hideInput && (
           <LabelRow>
             <RowBetween>
-              <TYPE.body color={theme.text2} fontWeight={500} fontSize={16}>
+              <TYPE.body color={theme.text2} fontWeight={500} fontSize={14}>
                 {label}
               </TYPE.body>
 
@@ -176,7 +176,7 @@ export default function CurrencyInputPanel({
                   onClick={onMax}
                   color={theme.text2}
                   fontWeight={500}
-                  fontSize={16}
+                  fontSize={14}
                   style={{ display: 'inline' }}
                 >
                   {!hideBalance && !!token && userTokenBalance

src/components/ExchangePage/index.tsx

@@ -83,7 +83,7 @@ const SectionBreak = styled.div`
 `
 
 const BottomGrouping = styled.div`
-  margin-top: 20px;
+  margin-top: 12px;
   position: relative;
 `
 
@@ -158,6 +158,12 @@ const StyledBalanceMaxMini = styled.button`
   }
 `
 
+const TruncatedText = styled(Text)`
+  text-overflow: ellipsis;
+  width: 220px;
+  overflow: hidden;
+`
+
 // styles
 const Dots = styled.span`
   &::after {
@@ -955,9 +961,10 @@ function ExchangePage({ sendingInput = false, history, params }) {
       return (
         <AutoColumn gap={'sm'} style={{ marginTop: '20px' }}>
           <RowBetween align="flex-end">
-            <Text fontSize={24} fontWeight={500}>
+            <TruncatedText fontSize={24} fontWeight={500}>
-              {!!slippageAdjustedAmounts[Field.INPUT] && slippageAdjustedAmounts[Field.INPUT].toSignificant(6)}
+              {!!formattedAmounts[Field.INPUT] && formattedAmounts[Field.INPUT]}
-            </Text>
+              {/* {!!slippageAdjustedAmounts[Field.INPUT] && slippageAdjustedAmounts[Field.INPUT].toSignificant(6)} */}
+            </TruncatedText>
             <RowFixed gap="4px">
               <TokenLogo address={tokens[Field.INPUT]?.address} size={'24px'} />
               <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
@@ -969,9 +976,11 @@ function ExchangePage({ sendingInput = false, history, params }) {
             <ArrowDown size="16" color={'#888D9B'} />
           </RowFixed>
           <RowBetween align="flex-end">
-            <Text fontSize={24} fontWeight={500} color={warningHigh ? '#FF6871' : ''}>
+            <TruncatedText fontSize={24} fontWeight={500} color={warningHigh ? '#FF6871' : ''}>
-              {!!slippageAdjustedAmounts[Field.OUTPUT] && slippageAdjustedAmounts[Field.OUTPUT].toSignificant(6)}
+              {!!formattedAmounts[Field.OUTPUT] && formattedAmounts[Field.OUTPUT]}
-            </Text>
+
+              {/* {!!slippageAdjustedAmounts[Field.OUTPUT] && slippageAdjustedAmounts[Field.OUTPUT].toSignificant(6)} */}
+            </TruncatedText>
             <RowFixed gap="4px">
               <TokenLogo address={tokens[Field.OUTPUT]?.address} size={'24px'} />
               <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
@@ -982,15 +991,19 @@ function ExchangePage({ sendingInput = false, history, params }) {
           <AutoColumn justify="flex-start" gap="sm" padding={'20px 0 0 0px'}>
             {independentField === Field.INPUT ? (
               <TYPE.italic textAlign="left" style={{ width: '100%', paddingTop: '.5rem' }}>
-                {`Output is estimated. You will receive at least ${slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(
+                {`Output is estimated. You will receive at least `}
-                  6
+                <b>
-                )} ${tokens[Field.OUTPUT]?.symbol}  or the transaction will revert.`}
+                  {slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(6)} {tokens[Field.OUTPUT]?.symbol}{' '}
+                </b>{' '}
+                {` or the transaction will revert.`}
               </TYPE.italic>
             ) : (
               <TYPE.italic textAlign="left" style={{ width: '100%', paddingTop: '.5rem' }}>
-                {`Input is estimated. You will sell at most ${slippageAdjustedAmounts[Field.INPUT]?.toSignificant(6)} ${
+                {`Input is estimated. You will sell at most `}{' '}
-                  tokens[Field.INPUT]?.symbol
+                <b>
-                }  or the transaction will revert.`}
+                  {slippageAdjustedAmounts[Field.INPUT]?.toSignificant(6)} {tokens[Field.INPUT]?.symbol}
+                </b>
+                {` or the transaction will revert.`}
               </TYPE.italic>
             )}
           </AutoColumn>
@@ -1049,7 +1062,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
                 <TYPE.black fontSize={14} fontWeight={400}>
                   {independentField === Field.INPUT ? (sending ? 'Min sent' : 'Minimum received') : 'Maximum sold'}
                 </TYPE.black>
-                <QuestionHelper text="" />
+                <QuestionHelper text="A boundary is set so you are protected from large price movements after you submit your trade." />
               </RowFixed>
               <RowFixed>
                 <TYPE.black fontSize={14}>
@@ -1077,9 +1090,9 @@ function ExchangePage({ sendingInput = false, history, params }) {
             <RowBetween>
               <RowFixed>
                 <TYPE.black fontSize={14} fontWeight={400}>
-                  Slippage
+                  Price impact
                 </TYPE.black>
-                <QuestionHelper text="" />
+                <QuestionHelper text="The difference between the market price and your price due to trade size." />
               </RowFixed>
               <ErrorText
                 fontWeight={500}
@@ -1100,11 +1113,11 @@ function ExchangePage({ sendingInput = false, history, params }) {
                 <TYPE.black fontSize={14} fontWeight={400}>
                   Liquidity Provider Fee
                 </TYPE.black>
-                <QuestionHelper text="A portion of each trade goes to liquidity providers to incentivize liquidity on the protocol." />
+                <QuestionHelper text="A portion of each trade (0.03%) goes to liquidity providers to incentivize liquidity on the protocol." />
               </RowFixed>
               <TYPE.black fontSize={14}>
                 {feeTimesInputFormatted
-                  ? feeTimesInputFormatted?.toSignificant(8) + ' ' + tokens[Field.INPUT]?.symbol
+                  ? feeTimesInputFormatted?.toSignificant(6) + ' ' + tokens[Field.INPUT]?.symbol
                   : '-'}
               </TYPE.black>
             </RowBetween>
@@ -1155,8 +1168,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
                 : priceSlippage.toFixed(4) + '%'
               : '-'}
           </ErrorText>
-          <Text fontWeight={500} fontSize={14} color={theme().text3} pt={1}>
+          <Text fontWeight={500} fontSize={16} color={theme().text3} pt={1}>
-            Slippage
+            Price Impact
           </Text>
         </AutoColumn>
       </AutoRow>
@@ -1268,13 +1281,13 @@ function ExchangePage({ sendingInput = false, history, params }) {
             />
             {sendingWithSwap ? (
               <ColumnCenter>
-                <RowBetween padding="0 8px">
+                <RowBetween padding="0 12px">
                   <ArrowWrapper onClick={onSwapTokens}>
                     <ArrowDown size="16" color="#ff007a" onClick={onSwapTokens} />
                   </ArrowWrapper>
-                  <ArrowWrapper onClick={() => setSendingWithSwap(false)} style={{ marginRight: '20px' }}>
+                  <StyledBalanceMaxMini onClick={() => setSendingWithSwap(false)} style={{ marginRight: '0px' }}>
                     <TYPE.blue>Remove Swap</TYPE.blue>
-                  </ArrowWrapper>
+                  </StyledBalanceMaxMini>
                 </RowBetween>
               </ColumnCenter>
             ) : (
@@ -1307,9 +1320,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
               otherSelectedTokenAddress={tokens[Field.INPUT]?.address}
             />
             {sendingWithSwap && (
-              <RowBetween padding="0 8px">
+              <RowBetween padding="0 12px">
                 <ArrowDown size="16" />
-                <div> </div>
               </RowBetween>
             )}
           </>
@@ -1337,19 +1349,19 @@ function ExchangePage({ sendingInput = false, history, params }) {
           </AutoColumn>
         )}
         {!noRoute && tokens[Field.OUTPUT] && tokens[Field.INPUT] && (
-          <Card padding={advanced ? '.25rem .75rem 0 .75rem' : '.25rem .75rem 0 .75rem'} borderRadius={'20px'}>
+          <Card padding={advanced ? '.25rem 1.25rem 0 .75rem' : '.25rem .7rem .25rem 1.25rem'} borderRadius={'20px'}>
             {advanced ? (
               <PriceBar />
             ) : (
-              <AutoColumn style={{ cursor: 'pointer' }} gap="sm">
+              <AutoColumn gap="4px">
                 {' '}
                 <RowBetween align="center" justify="center">
-                  <Text fontWeight={500} fontSize={16} color={theme().text2}>
+                  <Text fontWeight={500} fontSize={14} color={theme().text2}>
                     Price
                   </Text>
                   <Text
                     fontWeight={500}
-                    fontSize={16}
+                    fontSize={14}
                     color={theme().text2}
                     style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}
                   >
@@ -1357,12 +1369,12 @@ function ExchangePage({ sendingInput = false, history, params }) {
                       ? route.midPrice.invert().toSignificant(6) +
                         ' ' +
                         tokens[Field.INPUT]?.symbol +
-                        ' / ' +
+                        ' per ' +
                         tokens[Field.OUTPUT]?.symbol
                       : route.midPrice.toSignificant(6) +
                         ' ' +
                         tokens[Field.OUTPUT]?.symbol +
-                        ' / ' +
+                        ' per ' +
                         tokens[Field.INPUT]?.symbol}
                     <StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
                       <Repeat size={14} />
@@ -1371,18 +1383,22 @@ function ExchangePage({ sendingInput = false, history, params }) {
                 </RowBetween>
                 {pair && (warningHigh || warningMedium) && (
                   <RowBetween>
-                    <TYPE.main style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}>
+                    <TYPE.main
+                      style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}
+                      fontSize={14}
+                    >
                       Price Impact
-                      <QuestionHelper text="The difference between the market price and your price due to trade size." />
                     </TYPE.main>
-                    <ErrorText fontWeight={500} fontSize={16} warningMedium={warningMedium} warningHigh={warningHigh}>
+                    <RowFixed>
-                      {priceSlippage
+                      <ErrorText fontWeight={500} fontSize={14} warningMedium={warningMedium} warningHigh={warningHigh}>
-                        ? priceSlippage.toFixed(4) === '0.0000'
+                        {priceSlippage
-                          ? '<0.0001%'
+                          ? priceSlippage.toFixed(4) === '0.0000'
-                          : priceSlippage.toFixed(4) + '%'
+                            ? '<0.0001%'
-                        : '-'}{' '}
+                            : priceSlippage.toFixed(4) + '%'
-                      ⚠️
+                          : '-'}{' '}
-                    </ErrorText>
+                      </ErrorText>
+                      <QuestionHelper text="The difference between the market price and your quoted price due to trade size." />
+                    </RowFixed>
                   </RowBetween>
                 )}
               </AutoColumn>
@@ -1510,9 +1526,9 @@ function ExchangePage({ sendingInput = false, history, params }) {
                 <RowBetween>
                   <RowFixed>
                     <TYPE.black fontSize={14} fontWeight={400}>
-                      Slippage
+                      Price Impact
                     </TYPE.black>
-                    <QuestionHelper text="The difference between the market price and your price due to trade size." />
+                    <QuestionHelper text="The difference between the market price and your quoted price due to trade size." />
                   </RowFixed>
                   <ErrorText
                     fontWeight={500}
@@ -1533,11 +1549,11 @@ function ExchangePage({ sendingInput = false, history, params }) {
                     <TYPE.black fontSize={14} fontWeight={400}>
                       Liquidity Provider Fee
                     </TYPE.black>
-                    <QuestionHelper text="Price change due to trade size and LP fee" />
+                    <QuestionHelper text="A portion of each trade (0.03%) goes to liquidity providers to incentivize liquidity on the protocol." />
                   </RowFixed>
                   <TYPE.black fontSize={14}>
                     {feeTimesInputFormatted
-                      ? feeTimesInputFormatted?.toSignificant(8) + ' ' + tokens[Field.INPUT]?.symbol
+                      ? feeTimesInputFormatted?.toSignificant(6) + ' ' + tokens[Field.INPUT]?.symbol
                       : '-'}
                   </TYPE.black>
                 </RowBetween>
@@ -1547,7 +1563,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
                 <TYPE.black fontWeight={400} fontSize={14}>
                   Set front running resistance
                 </TYPE.black>
-                <QuestionHelper text="Your transaction will revert if the price changes more than this amount after your submit your trade." />
+                <QuestionHelper text="Your transaction will revert if the price changes more than this amount after you submit your trade." />
               </RowFixed>
               <SlippageTabs
                 rawSlippage={allowedSlippage}

src/components/Header/index.js

@@ -30,7 +30,9 @@ const HeaderFrame = styled.div`
 
   ${({ theme }) => theme.mediaWidth.upToExtraSmall`
     padding: 10px;
-    width: calc(100% - 20px);
+    width: calc(100% - 12px);
+    position: relative;
+
   `};
   z-index: 2;
 `
@@ -121,6 +123,11 @@ const MigrateBanner = styled(AutoColumn)`
   a {
     color: ${({ theme }) => theme.pink2};
   }
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    padding: 0;
+    display: none;
+  `};
 `
 
 export default function Header() {

src/components/NavigationTabs/index.js

@@ -105,7 +105,7 @@ function NavigationTabs({ location: { pathname }, history }) {
     <>
       {adding || removing ? (
         <Tabs>
-          <RowBetween style={{ padding: '1rem' }}>
+          <RowBetween style={{ padding: '1rem 1rem 0 1rem' }}>
             <Hover onClick={() => history.goBack()}>
               <ArrowLink />
             </Hover>
@@ -114,7 +114,7 @@ function NavigationTabs({ location: { pathname }, history }) {
               text={
                 adding
                   ? 'When you add liqudiity, you are given pool tokens that represent your position in this pool. These tokens automatically earn fees proportional to your pool share and can be redeemed at any time.'
-                  : 'Your liquidity is represented by a pool token (ERC20). Removing will convert your position back into tokens at the current rate and proportional to the amount of each token in the pool. Any fees you accrued are included in the token amounts your receive.'
+                  : 'Your liquidity is represented by a pool token (ERC20). Removing will convert your position back into tokens at the current rate and proportional to the amount of each token in the pool. Any fees you accrued are included in the token amounts you receive.'
               }
             />
           </RowBetween>

src/components/NumericalInput/index.tsx

@@ -18,6 +18,12 @@ const StyledInput = styled.input`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding: 0px;
+  -webkit-appearance: textfield;
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
 
   [type='number'] {
     -moz-appearance: textfield;

src/components/Popups/index.js

@@ -39,7 +39,7 @@ const MobilePopupInner = styled.div`
 
 const FixedPopupColumn = styled(AutoColumn)`
   position: absolute;
-  top: 128px;
+  top: 112px;
   right: 1rem;
   width: 355px;
 

src/components/PositionCard/index.js

@@ -149,16 +149,18 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, .
             <AutoColumn gap="8px">
               <FixedHeightRow>
                 <RowFixed>
-                  {!minimal && <TokenLogo size="20px" style={{ marginRight: '8px' }} address={token0?.address || ''} />}
+                  <Text fontSize={16} fontWeight={500}>
-                  <Text color="#888D9B" fontSize={16} fontWeight={500}>
                     Pooled {token0?.symbol}:
                   </Text>
                 </RowFixed>
                 {token0Deposited ? (
                   <RowFixed>
-                    <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                    <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
                       {token0Deposited?.toFixed(8)}
                     </Text>
+                    {!minimal && (
+                      <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token0?.address || ''} />
+                    )}
                   </RowFixed>
                 ) : (
                   '-'
@@ -167,35 +169,39 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, .
 
               <FixedHeightRow>
                 <RowFixed>
-                  {!minimal && <TokenLogo size="20px" style={{ marginRight: '8px' }} address={token1?.address || ''} />}
+                  <Text fontSize={16} fontWeight={500}>
-                  <Text color="#888D9B" fontSize={16} fontWeight={500}>
                     Pooled {token1?.symbol}:
                   </Text>
                 </RowFixed>
                 {token1Deposited ? (
-                  <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                  <RowFixed>
-                    {token1Deposited?.toFixed(8)}
+                    <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
-                  </Text>
+                      {token1Deposited?.toFixed(8)}
+                    </Text>
+                    {!minimal && (
+                      <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token1?.address || ''} />
+                    )}
+                  </RowFixed>
                 ) : (
                   '-'
                 )}
               </FixedHeightRow>
               {!minimal && (
                 <FixedHeightRow>
-                  <Text color="#888D9B" fontSize={16} fontWeight={500}>
+                  <Text fontSize={16} fontWeight={500}>
                     Your pool tokens:
                   </Text>
-                  <Text color="#888D9B" fontSize={16} fontWeight={500}>
+                  <Text fontSize={16} fontWeight={500}>
                     {userPoolBalance ? userPoolBalance.toFixed(6) : '-'}
                   </Text>
                 </FixedHeightRow>
               )}
               {!minimal && (
                 <FixedHeightRow>
-                  <Text color="#888D9B" fontSize={16} fontWeight={500}>
+                  <Text fontSize={16} fontWeight={500}>
                     Your pool share
                   </Text>
-                  <Text color="#888D9B" fontSize={16} fontWeight={500}>
+                  <Text fontSize={16} fontWeight={500}>
                     {poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'}
                   </Text>
                 </FixedHeightRow>

src/components/SearchModal/index.js

@@ -115,7 +115,7 @@ const MenuItem = styled(PaddedItem)`
   :hover {
     background-color: ${({ theme, disabled }) => !disabled && theme.bg2};
   }
-  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  opacity: ${({ disabled, selected }) => (disabled || selected ? 0.5 : 1)};
 `
 
 const BaseWrapper = styled(AutoRow)`
@@ -349,7 +349,7 @@ function SearchModal({
       filteredPairList.map((pairAddress, i) => {
         const token0 = allTokens[allPairs[pairAddress].token0]
         const token1 = allTokens[allPairs[pairAddress].token1]
-        // const balance = allBalances?.[account]?.[pairAddress]?.toSignificant(6)
+        const balance = allBalances?.[account]?.[pairAddress]?.toSignificant(6)
         return (
           <MenuItem
             key={i}
@@ -367,14 +367,14 @@ function SearchModal({
             </Text> */}
             <ButtonPrimary
               padding={'6px 8px'}
-              width={'56px'}
+              width={'fit-content'}
               borderRadius={'12px'}
               onClick={() => {
                 history.push('/add/' + token0.address + '-' + token1.address)
                 onDismiss()
               }}
             >
-              Join
+              {balance ? 'Manage' : 'Join'}
             </ButtonPrimary>
           </MenuItem>
         )
@@ -451,6 +451,7 @@ function SearchModal({
               key={address}
               onClick={() => (hiddenToken && hiddenToken === address ? () => {} : _onTokenSelect(address))}
               disabled={hiddenToken && hiddenToken === address}
+              selected={otherSelectedTokenAddress === address}
             >
               <RowFixed>
                 <TokenLogo address={address} size={'24px'} style={{ marginRight: '14px' }} />

src/components/SlippageTabs/index.js

@@ -365,11 +365,14 @@ export default function TransactionDetails({ setRawSlippage, rawSlippage, deadli
             <TYPE.body fontSize={14}>Deadline</TYPE.body>
             <QuestionHelper text="Deadline in minutes. If your transaction takes longer than this it will revert." />
           </RowFixed>
-          <RowBetween padding={'0 20px'}>
+          <RowFixed padding={'0 20px'}>
             <OptionCustom style={{ width: '80px' }}>
               <Input tabIndex={-1} placeholder={deadlineInput} value={deadlineInput} onChange={parseCustomDeadline} />
             </OptionCustom>
-          </RowBetween>
+            <TYPE.body style={{ paddingLeft: '8px' }} fontSize={14}>
+              minutes
+            </TYPE.body>
+          </RowFixed>
         </AutoColumn>
       </>
     )

src/pages/App.js

@@ -50,6 +50,10 @@ const BodyWrapper = styled.div`
     width: 90%;
   }
 
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+      padding-top: 16px;
+  `};
+
   z-index: 1;
 `
 
@@ -64,6 +68,7 @@ const Body = styled.div`
   box-sizing: border-box;
   padding: 1rem;
   position: relative;
+  margin-bottom: 10rem;
 `
 
 const StyledRed = styled.div`

src/pages/Supply/AddLiquidity.tsx

@@ -48,6 +48,28 @@ const FixedBottom = styled.div`
   width: 100%;
 `
 
+// styles
+const Dots = styled.span`
+  &::after {
+    display: inline-block;
+    animation: ellipsis 1.25s infinite;
+    content: '.';
+    width: 1em;
+    text-align: left;
+  }
+  @keyframes ellipsis {
+    0% {
+      content: '.';
+    }
+    33% {
+      content: '..';
+    }
+    66% {
+      content: '...';
+    }
+  }
+`
+
 enum Field {
   INPUT,
   OUTPUT
@@ -589,7 +611,7 @@ function AddLiquidity({ token0, token1, step = false }) {
             {pair ? `${route.midPrice.toSignificant(6)} ` : '-'}
           </Text>
           <Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}>
-            {tokens[Field.OUTPUT]?.symbol} / {tokens[Field.INPUT]?.symbol}
+            {tokens[Field.OUTPUT]?.symbol} per {tokens[Field.INPUT]?.symbol}
           </Text>
         </AutoColumn>
         <AutoColumn justify="center">
@@ -597,7 +619,7 @@ function AddLiquidity({ token0, token1, step = false }) {
             {pair ? `${route.midPrice.invert().toSignificant(6)} ` : '-'}
           </Text>
           <Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}>
-            {tokens[Field.INPUT]?.symbol} / {tokens[Field.OUTPUT]?.symbol}
+            {tokens[Field.INPUT]?.symbol} per {tokens[Field.OUTPUT]?.symbol}
           </Text>
         </AutoColumn>
         <AutoColumn justify="center">
@@ -645,11 +667,8 @@ function AddLiquidity({ token0, token1, step = false }) {
           <ColumnCenter>
             <BlueCard>
               <AutoColumn gap="10px">
-                {/* {step && <TYPE.blue fontWeight={400}>Step 2.</TYPE.blue>} */}
+                <TYPE.blue fontWeight={600}>You are the first liquidity provider.</TYPE.blue>
-                <TYPE.blue fontWeight={400}>
+                <TYPE.blue fontWeight={400}>The ratio of tokens you add will set the price of this pool.</TYPE.blue>
-                  <b>You are the first liquidity provider.</b> The ratio of tokens you add will set the price of this
-                  pool.
-                </TYPE.blue>
                 <TYPE.blue fontWeight={400}>Once you are happy with the rate click supply to review.</TYPE.blue>
               </AutoColumn>
             </BlueCard>
@@ -696,7 +715,11 @@ function AddLiquidity({ token0, token1, step = false }) {
               approveAmount(Field.OUTPUT)
             }}
           >
-            {pendingApprovalOutput ? 'Waiting for approve' : 'Approve ' + tokens[Field.OUTPUT]?.symbol}
+            {pendingApprovalOutput ? (
+              <Dots>Approving {tokens[Field.OUTPUT]?.symbol}</Dots>
+            ) : (
+              'Approve ' + tokens[Field.OUTPUT]?.symbol
+            )}
           </ButtonLight>
         ) : showInputApprove ? (
           <ButtonLight
@@ -704,7 +727,11 @@ function AddLiquidity({ token0, token1, step = false }) {
               approveAmount(Field.INPUT)
             }}
           >
-            {pendingApprovalInput ? 'Waiting for approve' : 'Approve ' + tokens[Field.INPUT]?.symbol}
+            {pendingApprovalInput ? (
+              <Dots>Approving {tokens[Field.INPUT]?.symbol}</Dots>
+            ) : (
+              'Approve ' + tokens[Field.INPUT]?.symbol
+            )}
           </ButtonLight>
         ) : (
           <ButtonPrimary