Improvement(add): Style tweaks on add page, remove timeout (#30)

* start add liquidity

* update add state, add input UI

* basic add skeleton with dummy state

* refactor with preview steps on add

* small style tweaks, timeout update

* remove merge conflict

public/locales/en.json

@@ -89,8 +89,8 @@
   "toleranceExplanation": "Lowering this limit decreases your risk of frontrunning. However, this makes more likely that your transaction will fail due to normal price movements.",
   "tokenSearchPlaceholder": "Search name or paste address",
   "selectFee": "Select Fee",
-  "selectLiquidityRange": "Select liquidity range",
-  "selectPool": "Select Fee Pool",
+  "selectLiquidityRange": "Select Liquidity Range",
+  "selectPool": "Select Fee Tier",
   "inputTokens": "Input Tokens",
   "fee": "fee",
   "setLimits": "Set Limits",
@@ -106,7 +106,7 @@
   "addEarnHelper": "You will earn fees from trades proportional to your share of the pool.",
   "learnMoreAboutFess": " Learn more about earning fees.",
   "selectAPool": "Select a pool to provide liquidity to.",
-  "poolType": "Select a pool type based on your preferred liquidity provider fee.",
+  "poolType": "Select a fee tier based on your preferred liquidity provider fee.",
   "rangeWarning": "Your liquidity will only be active and earning fees when the rate of the pool is within this price range.",
   "chooseLiquidityAmount": "Choose an amount of tokens to open this liquidity position. If you don’t have enough tokens you can trade for them with a Swap.",
   "selectPriceLimits": "Select Price Limits",

src/components/Button/index.tsx

@@ -5,6 +5,7 @@ import { darken, lighten } from 'polished'
 import { RowBetween } from '../Row'
 import { ChevronDown, Check } from 'react-feather'
 import { Button as RebassButton, ButtonProps } from 'rebass/styled-components'
+import useTheme from 'hooks/useTheme'
 
 const Base = styled(RebassButton)<{
   padding?: string
@@ -379,6 +380,8 @@ const CheckboxWrapper = styled.div`
 `
 
 export function ButtonRadioChecked({ active = false, children, ...rest }: { active?: boolean } & ButtonProps) {
+  const theme = useTheme()
+
   if (!active) {
     return (
       <ButtonOutlined borderRadius="12px" padding="12px 8px" {...rest}>
@@ -393,7 +396,7 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
             {children}
             <CheckboxWrapper>
               <Circle>
-                <Check size={13} />
+                <Check size={13} stroke={theme.white} />
               </Circle>
             </CheckboxWrapper>
           </RowBetween>

src/components/InputStepCounter/InputStepCounter.tsx

@@ -81,7 +81,7 @@ const StepCounter = ({ value, onUserInput, usePercent = false, prependSymbol }:
         setTimeout(function () {
           setPulsing(false)
         }, 1800)
-      }, 400)
+      }, 0)
     }
   }, [localValue, useLocalValue, value])
 

src/pages/AddLiquidity/index.tsx

@@ -413,7 +413,7 @@ export default function AddLiquidity({
                   {t('rangeWarning')}
                 </TYPE.main>
                 {price && rateCurrencyBase && (
-                  <RowBetween style={{ backgroundColor: '#1A2028', padding: '8px' }}>
+                  <RowBetween style={{ backgroundColor: theme.bg3, padding: '8px', borderRadius: '12px' }}>
                     <TYPE.main>{t('currentRate', { label: rateCurrencyBase.symbol })}</TYPE.main>
                     <TYPE.main>
                       {rateCurrencyBase === currencyA ? price.toSignificant(3) : price.invert().toSignificant(3)}{' '}