diff --git a/public/locales/en.json b/public/locales/en.json index 61de6b81d2..4b773b00a0 100644 --- a/public/locales/en.json +++ b/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", @@ -81,5 +81,5 @@ "decimals": "Decimals", "enterTokenCont": "Enter a token address to continue", "priceChange": "Expected price slippage", - "forAtLeast" : "for at least " + "forAtLeast": "for at least " } diff --git a/src/components/ContextualInfo/index.js b/src/components/ContextualInfo/index.js index 6daa6b6586..39abeba2e8 100644 --- a/src/components/ContextualInfo/index.js +++ b/src/components/ContextualInfo/index.js @@ -51,8 +51,8 @@ class ContextualInfo extends Component { } static defaultProps = { - openDetailsText: 'Transaction Details', - closeDetailsText: 'Hide Details', + openDetailsText: 'Advanced Details', + closeDetailsText: 'Hide Advanced', renderTransactionDetails() {}, contextualInfo: '', isError: false diff --git a/src/components/ContextualInfoNew/index.js b/src/components/ContextualInfoNew/index.js index 5c71073fd2..ae06c23a9e 100644 --- a/src/components/ContextualInfoNew/index.js +++ b/src/components/ContextualInfoNew/index.js @@ -86,8 +86,8 @@ const ColoredDropdown = styled(WrappedDropdown)` ` export default function ContextualInfo({ - openDetailsText = 'Transaction Details', - closeDetailsText = 'Hide Details', + openDetailsText = 'Advanced Details', + closeDetailsText = 'Hide Advanced', contextualInfo = '', allowExpand = false, isError = false, diff --git a/src/components/CurrencyInputPanel/index.js b/src/components/CurrencyInputPanel/index.js index 17211a7bd7..9178a3a41e 100644 --- a/src/components/CurrencyInputPanel/index.js +++ b/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 { diff --git a/src/components/TransactionDetails/index.js b/src/components/TransactionDetails/index.js index 2fa9dcfa11..ebbd01baaf 100644 --- a/src/components/TransactionDetails/index.js +++ b/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 { isAddress, amountFormatter } from '../../utils' -import questionMark from '../../assets/images/question-mark.svg' +import styled, { css, keyframes } from 'styled-components' +import { darken, lighten } from 'polished' +import { amountFormatter } from '../../utils' +import { useDebounce } from '../../hooks' + +import question from '../../assets/images/question.svg' import NewContextualInfo from '../../components/ContextualInfoNew' @@ -55,26 +58,46 @@ const Popup = styled(Flex)` font-style: italic; ` -const Option = styled(Flex)` - align-items: center; - min-width: 55px; - height: 24px; - margin-right: 4px; - border-radius: 36px; - border: 1px solid #f2f2f2; +const Option = styled(FancyButton)` + margin-right: 8px; + margin-top: 6px; - ${({ active }) => - active && - ` - background-color: #2f80ed; - color: white; - border: 1px solid #2f80ed; - `} - - &:hover { + :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; @@ -127,11 +150,21 @@ const BottomError = styled.div` `} ` -const Break = styled.div` - border: 1px solid #f2f2f2; - width: 100%; - margin-top: 1rem; -` +const OptionCustom = styled(FancyButton)` + height: 2rem; + position: relative; + 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,25 +494,29 @@ export default function TransactionDetails(props) {
{t('youAreSelling')}{' '} - {b( - `${amountFormatter( - props.independentValueParsed, - props.independentDecimals, - Math.min(4, props.independentDecimals) - )} ${props.inputSymbol}` - )}{' '} - {t('forAtLeast')} - {b( - `${amountFormatter( - props.dependentValueMinumum, - props.dependentDecimals, - Math.min(4, props.dependentDecimals) - )} ${props.outputSymbol}` - )} + + {b( + `${amountFormatter( + props.independentValueParsed, + props.independentDecimals, + Math.min(4, props.independentDecimals) + )} ${props.inputSymbol}` + )} + {' '} + {t('forAtLeast')}{' '} + + {b( + `${amountFormatter( + props.dependentValueMinumum, + props.dependentDecimals, + Math.min(4, props.dependentDecimals) + )} ${props.outputSymbol}` + )} + .
- {t('priceChange')} {b(`${props.percentSlippageFormatted}%`)}. + {t('priceChange')} {b(`${props.percentSlippageFormatted}%`)}
) @@ -507,13 +552,15 @@ export default function TransactionDetails(props) {
{t('youAreBuying')}{' '} - {b( - `${amountFormatter( - props.independentValueParsed, - props.independentDecimals, - Math.min(4, props.independentDecimals) - )} ${props.outputSymbol}` - )} + + {b( + `${amountFormatter( + props.independentValueParsed, + props.independentDecimals, + Math.min(4, props.independentDecimals) + )} ${props.outputSymbol}` + )} + .
@@ -527,7 +574,7 @@ export default function TransactionDetails(props) { )}{' '} - {t('priceChange')} {b(`${props.percentSlippageFormatted}%`)}. + {t('priceChange')} {b(`${props.percentSlippageFormatted}%`)}
) diff --git a/src/theme/components.js b/src/theme/components.js index 8f1d8a8e33..4dcb2ebb2d 100644 --- a/src/theme/components.js +++ b/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 {