fix most conflicts

public/locales/en.json

@@ -27,7 +27,7 @@
   "noLiquidity": "No liquidity.",
   "insufficientLiquidity": "Insufficient liquidity.",
   "unlockTokenCont": "Please unlock token to continue.",
-  "transactionDetails": "Transaction Details",
+  "transactionDetails": "Advanced Details",
   "hideDetails": "Hide Details",
   "slippageWarning": "Slippage Warning",
   "highSlippageWarning": "High Slippage Warning",

src/components/ContextualInfo/index.js

@@ -51,8 +51,8 @@ class ContextualInfo extends Component {
   }
 
   static defaultProps = {
-    openDetailsText: 'Transaction Details',
+    openDetailsText: 'Advanced Details',
-    closeDetailsText: 'Hide Details',
+    closeDetailsText: 'Hide Advanced',
     renderTransactionDetails() {},
     contextualInfo: '',
     isError: false

src/components/ContextualInfoNew/index.js

@@ -86,8 +86,8 @@ const ColoredDropdown = styled(WrappedDropdown)`
 `
 
 export default function ContextualInfo({
-  openDetailsText = 'Transaction Details',
+  openDetailsText = 'Advanced Details',
-  closeDetailsText = 'Hide Details',
+  closeDetailsText = 'Hide Advanced',
   contextualInfo = '',
   allowExpand = false,
   isError = false,

src/components/CurrencyInputPanel/index.js

@@ -34,6 +34,7 @@ const SubCurrencySelect = styled.button`
   outline: none;
   cursor: pointer;
   user-select: none;
+
 `
 
 const InputRow = styled.div`
@@ -70,7 +71,7 @@ const CurrencySelect = styled.button`
   }
 
   :focus {
-    box-shadow: 0 0 1px 1px ${({ theme }) => theme.malibuBlue};
+    border: 1px solid ${({ theme }) => darken(0.1, theme.royalBlue)};
   }
 
   :active {

src/components/TransactionDetails/index.js

@@ -1,9 +1,12 @@
 import React, { useState } from 'react'
 import ReactGA from 'react-ga'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import styled, { css, keyframes } from 'styled-components'
-import { isAddress, amountFormatter } from '../../utils'
+import { darken, lighten } from 'polished'
-import questionMark from '../../assets/images/question-mark.svg'
+import { amountFormatter } from '../../utils'
+import { useDebounce } from '../../hooks'
+
+import question from '../../assets/images/question.svg'
 
 import NewContextualInfo from '../../components/ContextualInfoNew'
 
@@ -55,27 +58,47 @@ const Popup = styled(Flex)`
   font-style: italic;
 `
 
-const Option = styled(Flex)`
+const Option = styled(FancyButton)`
-  align-items: center;
+  margin-right: 8px;
-  min-width: 55px;
+  margin-top: 6px;
-  height: 24px;
-  margin-right: 4px;
-  border-radius: 36px;
-  border: 1px solid #f2f2f2;
 
-  ${({ active }) =>
+  :hover {
-    active &&
-    `
-    background-color: #2f80ed;
-    color: white;
-    border: 1px solid #2f80ed;
-  `}
-
-  &:hover {
     cursor: pointer;
   }
+
+  ${({ active, theme }) =>
+    active &&
+    css`
+      background-color: ${({ theme }) => theme.royalBlue};
+      color: ${({ theme }) => theme.white};
+      border: none;
+
+      :hover {
+        border: none;
+        box-shadow: none;
+        background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
+      }
+
+      :focus {
+        border: none;
+        box-shadow: none;
+        background-color: ${({ theme }) => lighten(0.05, theme.royalBlue)};
+      }
+
+      :active {
+        background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
+      }
+
+      :hover:focus {
+        background-color: ${({ theme }) => theme.royalBlue};
+      }
+      :hover:focus:active {
+        background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
+      }
+    `}
 `
     
+
 const Input = styled.input`
   width: 123.27px;
   background: #ffffff;
@@ -127,11 +150,21 @@ const BottomError = styled.div`
   `}
 `
 
-const Break = styled.div`
+const OptionCustom = styled(FancyButton)`
-  border: 1px solid #f2f2f2;
+  height: 2rem;
-  width: 100%;
+  position: relative;
-  margin-top: 1rem;
+  width: 120px;
-`
+  margin-top: 6px;
+  padding: 0 0.75rem;
+
+  ${({ active }) =>
+    active &&
+    css`
+      border: 1px solid ${({ theme }) => theme.royalBlue};
+      :hover {
+        border: 1px solid ${({ theme }) => darken(0.1, theme.royalBlue)};
+      }
+    `}
 
 const OptionLarge = styled(Option)`
   width: 120px;
@@ -142,7 +175,7 @@ const Bold = styled.span`
 `
 
 const LastSummaryText = styled.div`
-  margin-top: 0.6rem;
+  padding-top: 0.5rem;
 `
 
 const SlippageSelector = styled.div`
@@ -181,6 +214,14 @@ const ErrorEmoji = styled.span`
   position: absolute;
 `
 
+const ValueWrapper = styled.span`
+  padding: 0.125rem 0.3rem 0.1rem 0.3rem;
+  background-color: ${({ theme }) => darken(0.04, theme.concreteGray)};
+  border-radius: 12px;
+  font-variant: tabular-nums;
+  vertical
+`
+
 export default function TransactionDetails(props) {
   const { t } = useTranslation()
 
@@ -453,14 +494,17 @@ export default function TransactionDetails(props) {
         <div>
           <div>
             {t('youAreSelling')}{' '}
+            <ValueWrapper>
               {b(
                 `${amountFormatter(
                   props.independentValueParsed,
                   props.independentDecimals,
                   Math.min(4, props.independentDecimals)
                 )} ${props.inputSymbol}`
-            )}{' '}
+              )}
-            {t('forAtLeast')}
+            </ValueWrapper>{' '}
+            {t('forAtLeast')}{' '}
+            <ValueWrapper>
               {b(
                 `${amountFormatter(
                   props.dependentValueMinumum,
@@ -468,10 +512,11 @@ export default function TransactionDetails(props) {
                   Math.min(4, props.dependentDecimals)
                 )} ${props.outputSymbol}`
               )}
+            </ValueWrapper>
             .
           </div>
           <LastSummaryText>
-            {t('priceChange')} {b(`${props.percentSlippageFormatted}%`)}.
+            {t('priceChange')} <ValueWrapper>{b(`${props.percentSlippageFormatted}%`)}</ValueWrapper>
           </LastSummaryText>
         </div>
       )
@@ -507,6 +552,7 @@ export default function TransactionDetails(props) {
         <div>
           <div>
             {t('youAreBuying')}{' '}
+            <ValueWrapper>
               {b(
                 `${amountFormatter(
                   props.independentValueParsed,
@@ -514,6 +560,7 @@ export default function TransactionDetails(props) {
                   Math.min(4, props.independentDecimals)
                 )} ${props.outputSymbol}`
               )}
+            </ValueWrapper>
             .
           </div>
           <LastSummaryText>
@@ -527,7 +574,7 @@ export default function TransactionDetails(props) {
             )}{' '}
           </LastSummaryText>
           <LastSummaryText>
-            {t('priceChange')} {b(`${props.percentSlippageFormatted}%`)}.
+            {t('priceChange')} <ValueWrapper>{b(`${props.percentSlippageFormatted}%`)}</ValueWrapper>
           </LastSummaryText>
         </div>
       )

src/theme/components.js

@@ -1,5 +1,5 @@
 import styled, { keyframes } from 'styled-components'
-import { lighten, darken } from 'polished'
+import { darken } from 'polished'
 
 export const Button = styled.button.attrs(({ warning, theme }) => ({
   backgroundColor: warning ? theme.salmonRed : theme.royalBlue
@@ -18,11 +18,11 @@ export const Button = styled.button.attrs(({ warning, theme }) => ({
 
   :hover,
   :focus {
-    background-color: ${({ backgroundColor }) => lighten(0.05, backgroundColor)};
+    background-color: ${({ backgroundColor }) => darken(0.05, backgroundColor)};
   }
 
   :active {
-    background-color: ${({ backgroundColor }) => darken(0.05, backgroundColor)};
+    background-color: ${({ backgroundColor }) => darken(0.1, backgroundColor)};
   }
 
   :disabled {