From 66604cf47e377791394d55fe1d753ae613b1058f Mon Sep 17 00:00:00 2001 From: Callil Capuozzo Date: Mon, 29 Jul 2019 15:14:53 -0400 Subject: [PATCH] Add focus styles (#375) * Add focus styles * remove periods * Change copy and button hover state --- public/locales/en.json | 4 +- src/components/ContextualInfo/index.js | 4 +- src/components/ContextualInfoNew/index.js | 4 +- src/components/CurrencyInputPanel/index.js | 3 +- src/components/TransactionDetails/index.js | 119 ++++++++++++++------- src/theme/components.js | 6 +- 6 files changed, 94 insertions(+), 46 deletions(-) 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 44c30d13e2..1373e5769a 100644 --- a/src/components/ContextualInfoNew/index.js +++ b/src/components/ContextualInfoNew/index.js @@ -85,8 +85,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 ebafec539b..160eb65027 100644 --- a/src/components/TransactionDetails/index.js +++ b/src/components/TransactionDetails/index.js @@ -1,7 +1,7 @@ import React, { useState, useEffect, useRef } from 'react' import { useTranslation } from 'react-i18next' import styled, { css, keyframes } from 'styled-components' -import { transparentize, darken } from 'polished' +import { darken, lighten } from 'polished' import { amountFormatter } from '../../utils' import { useDebounce } from '../../hooks' @@ -105,17 +105,18 @@ const FancyButton = styled.button` min-width: 55px; height: 2rem; border-radius: 36px; + font-size: 12px; border: 1px solid ${({ theme }) => theme.mercuryGray}; outline: none; background: ${({ theme }) => theme.white}; :hover { cursor: inherit; - border: 1px solid ${({ theme }) => theme.royalBlue}; - box-shadow: ${({ theme }) => transparentize(0.6, theme.royalBlue)} 0px 0px 0px 2px; + border: 1px solid ${({ theme }) => theme.chaliceGray}; } :focus { - box-shadow: ${({ theme }) => transparentize(0.6, theme.royalBlue)} 0px 0px 0px 2px; + border: 1px solid ${({ theme }) => theme.royalBlue}; + /* box-shadow: 0 0 1px 1px #5CA2FF; */ } ` @@ -123,12 +124,39 @@ const Option = styled(FancyButton)` margin-right: 8px; margin-top: 6px; + :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)}; + } `} ` @@ -198,6 +226,9 @@ const OptionCustom = styled(FancyButton)` active && css` border: 1px solid ${({ theme }) => theme.royalBlue}; + :hover { + border: 1px solid ${({ theme }) => darken(0.1, theme.royalBlue)}; + } `} ${({ color }) => @@ -219,7 +250,7 @@ const Bold = styled.span` ` const LastSummaryText = styled.div` - margin-top: 0.6rem; + padding-top: 0.5rem; ` const SlippageSelector = styled.div` @@ -252,6 +283,14 @@ const TransactionInfo = styled.div` padding: 1.25rem 1.25rem 1rem 1.25rem; ` +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() @@ -513,25 +552,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}%`)} ) @@ -540,28 +583,32 @@ 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}` + )} + .
{t('itWillCost')}{' '} - {b( - `${amountFormatter( - props.dependentValueMaximum, - props.dependentDecimals, - Math.min(4, props.dependentDecimals) - )} ${props.inputSymbol}` - )}{' '} + + {b( + `${amountFormatter( + props.dependentValueMaximum, + props.dependentDecimals, + Math.min(4, props.dependentDecimals) + )} ${props.inputSymbol}` + )} + {' '} {t('orTransFail')} - {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 {