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

 <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"/>
-<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"/>
+<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="#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/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 color="#888D9B" fontSize={16} fontWeight={500}>
+                  <Text 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 color="#888D9B" fontSize={16} fontWeight={500}>
+                  <Text fontSize={16} fontWeight={500}>
                     Pooled {token1?.symbol}:
                   </Text>
                 </RowFixed>
                 {token1Deposited ? (
-                  <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                  <RowFixed>
+                    <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
                       {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={400}>
-                  <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={600}>You are the first liquidity provider.</TYPE.blue>
+                <TYPE.blue fontWeight={400}>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