From b599c7cf5f36aeebb05f98aa24e962631fe4b6a4 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Tue, 28 Aug 2018 09:43:45 +0200 Subject: [PATCH] Create "TooltipContent" component --- src/components/Tooltip/index.js | 160 ------------------ src/components/TooltipContent/index.js | 26 +++ .../components/AccountMenu/index.js | 8 +- .../AccountSend/components/AdvancedForm.js | 36 ++-- .../Wallet/views/AccountSummary/index.js | 5 +- 5 files changed, 52 insertions(+), 183 deletions(-) delete mode 100644 src/components/Tooltip/index.js create mode 100644 src/components/TooltipContent/index.js diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js deleted file mode 100644 index 4a1ffe6a..00000000 --- a/src/components/Tooltip/index.js +++ /dev/null @@ -1,160 +0,0 @@ -import Tooltip from 'rc-tooltip'; -import styled from 'styled-components'; -import colors from 'config/colors'; -import { FONT_SIZE } from 'config/variables'; - -const StyledTooltip = styled(Tooltip)` - .tooltip-wrapper { - width: 320px; - font-size: ${FONT_SIZE.SMALLEST}; - span { - color: ${colors.GREEN_PRIMARY}; - } - } - - .aside-tooltip-wrapper { - width: 260px; - font-size: ${FONT_SIZE.SMALLEST}; - } - - &.rc-tooltip { - position: absolute; - z-index: 1070; - display: block; - visibility: visible; - border: 1px solid ${colors.DIVIDER}; - border-radius: 3px; - box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); - } - - &.rc-tooltip-hidden { - display: none; - } - - &.rc-tooltip-inner { - padding: 8px 10px; - color: ${colors.TEXT_SECONDARY}; - font-size: ${FONT_SIZE.SMALLER}; - line-height: 1.5; - text-align: left; - text-decoration: none; - background-color: ${colors.WHITE}; - border-radius: 3px; - min-height: 34px; - border: 1px solid ${colors.WHITE}; - } - &.rc-tooltip-arrow, - &.rc-tooltip-arrow-inner { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } - - - &.rc-tooltip-placement-top &.rc-tooltip-arrow, - &.rc-tooltip-placement-topLeft &.rc-tooltip-arrow, - &.rc-tooltip-placement-topRight &.rc-tooltip-arrow { - bottom: -6px; - margin-left: -6px; - border-width: 6px 6px 0; - border-top-color: ${colors.DIVIDER}; - } - &.rc-tooltip-placement-top &.rc-tooltip-arrow-inner, - &.rc-tooltip-placement-topLeft &.rc-tooltip-arrow-inner, - &.rc-tooltip-placement-topRight &.rc-tooltip-arrow-inner { - bottom: 2px; - margin-left: -6px; - border-width: 6px 6px 0; - border-top-color: ${colors.WHITE}; - } - &.rc-tooltip-placement-top &.rc-tooltip-arrow { - left: 50%; - } - &.rc-tooltip-placement-topLeft &.rc-tooltip-arrow { - left: 15%; - } - &.rc-tooltip-placement-topRight &.rc-tooltip-arrow { - right: 15%; - } - &.rc-tooltip-placement-right &.rc-tooltip-arrow, - &.rc-tooltip-placement-rightTop &.rc-tooltip-arrow, - &.rc-tooltip-placement-rightBottom &.rc-tooltip-arrow { - left: -5px; - margin-top: -6px; - border-width: 6px 6px 6px 0; - border-right-color: ${colors.DIVIDER}; - } - &.rc-tooltip-placement-right &.rc-tooltip-arrow-inner, - &.rc-tooltip-placement-rightTop &.rc-tooltip-arrow-inner, - &.rc-tooltip-placement-rightBottom &.rc-tooltip-arrow-inner { - left: 1px; - margin-top: -6px; - border-width: 6px 6px 6px 0; - border-right-color: ${colors.WHITE}; - } - &.rc-tooltip-placement-right &.rc-tooltip-arrow { - top: 50%; - } - &.rc-tooltip-placement-rightTop &.rc-tooltip-arrow { - top: 15%; - margin-top: 0; - } - &.rc-tooltip-placement-rightBottom &.rc-tooltip-arrow { - bottom: 15%; - } - &.rc-tooltip-placement-left &.rc-tooltip-arrow, - &.rc-tooltip-placement-leftTop &.rc-tooltip-arrow, - &.rc-tooltip-placement-leftBottom &.rc-tooltip-arrow { - right: -5px; - margin-top: -6px; - border-width: 6px 0 6px 6px; - border-left-color: ${colors.DIVIDER}; - } - &.rc-tooltip-placement-left &.rc-tooltip-arrow-inner, - &.rc-tooltip-placement-leftTop &.rc-tooltip-arrow-inner, - &.rc-tooltip-placement-leftBottom &.rc-tooltip-arrow-inner { - right: 1px; - margin-top: -6px; - border-width: 6px 0 6px 6px; - border-left-color: ${colors.WHITE}; - } - &.rc-tooltip-placement-left &.rc-tooltip-arrow { - top: 50%; - } - &.rc-tooltip-placement-leftTop &.rc-tooltip-arrow { - top: 15%; - margin-top: 0; - } - &.rc-tooltip-placement-leftBottom &.rc-tooltip-arrow { - bottom: 15%; - } - &.rc-tooltip-placement-bottom &.rc-tooltip-arrow, - &.rc-tooltip-placement-bottomLeft &.rc-tooltip-arrow, - &.rc-tooltip-placement-bottomRight &.rc-tooltip-arrow { - top: -5px; - margin-left: -6px; - border-width: 0 6px 6px; - border-bottom-color: ${colors.DIVIDER}; - } - &.rc-tooltip-placement-bottom &.rc-tooltip-arrow-inner, - &.rc-tooltip-placement-bottomLeft &.rc-tooltip-arrow-inner, - &.rc-tooltip-placement-bottomRight &.rc-tooltip-arrow-inner { - top: 1px; - margin-left: -6px; - border-width: 0 6px 6px; - border-bottom-color: ${colors.WHITE}; - } - &.rc-tooltip-placement-bottom &.rc-tooltip-arrow { - left: 50%; - } - &.rc-tooltip-placement-bottomLeft &.rc-tooltip-arrow { - left: 15%; - } - &.rc-tooltip-placement-bottomRight &.rc-tooltip-arrow { - right: 15%; - } -`; - -export default StyledTooltip; diff --git a/src/components/TooltipContent/index.js b/src/components/TooltipContent/index.js new file mode 100644 index 00000000..fe07399a --- /dev/null +++ b/src/components/TooltipContent/index.js @@ -0,0 +1,26 @@ +import React from 'react'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; +import { FONT_SIZE } from 'config/variables'; + +const Wrapper = styled.div` + width: ${props => (props.isAside ? '260px' : '320px')}; + font-size: ${FONT_SIZE.SMALLEST}; +`; + +const TooltipContent = ({ + children, isAside = false, +}) => ( + + {children} + +); + +TooltipContent.propTypes = { + children: PropTypes.node, + isAside: PropTypes.bool, +}; + +export default TooltipContent; diff --git a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js index ed245279..d6d0e064 100644 --- a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js @@ -1,6 +1,7 @@ /* @flow */ import React from 'react'; import BigNumber from 'bignumber.js'; +import TooltipContent from 'components/TooltipContent'; import Icon from 'components/Icon'; import colors from 'config/colors'; import Loader from 'components/Loader'; @@ -268,15 +269,10 @@ const AccountMenu = (props: Props): ?React$Element => { if (lastAccount && (new BigNumber(lastAccount.balance).greaterThan(0) || lastAccount.nonce > 0)) { discoveryStatus = ; } else { - const tooltip = ( -
- To add a new account, last account must have some transactions. -
- ); discoveryStatus = ( } - overlay={tooltip} + overlay={To add a new account, last account must have some transactions.} placement="bottom" > diff --git a/src/views/Wallet/views/AccountSend/components/AdvancedForm.js b/src/views/Wallet/views/AccountSend/components/AdvancedForm.js index f5a4218c..770b7d3a 100644 --- a/src/views/Wallet/views/AccountSend/components/AdvancedForm.js +++ b/src/views/Wallet/views/AccountSend/components/AdvancedForm.js @@ -1,10 +1,16 @@ /* @flow */ - - import React from 'react'; import Tooltip from 'rc-tooltip'; +import TooltipContent from 'components/TooltipContent'; +import Link from 'components/Link'; +import styled from 'styled-components'; +import colors from 'config/colors'; import type { Props as BaseProps } from '../Container'; +const GreenSpan = styled.span` + color: ${colors.GREEN_PRIMARY}; +`; + type Props = { selectedAccount: $ElementType, sendForm: $ElementType, @@ -51,9 +57,9 @@ const AdvancedForm = (props: Props) => { } const nonceTooltip = ( -
+ TODO
-
+ ); let gasLimitTooltipCurrency: string; @@ -67,27 +73,27 @@ const AdvancedForm = (props: Props) => { } const gasLimitTooltip = ( -
+ Gas limit is the amount of gas to send with your transaction.
- TX fee = gas price * gas limit & is paid to miners for including your TX in a block.
+ TX fee = gas price * gas limit & is paid to miners for including your TX in a block.
Increasing this number will not get your TX mined faster.
- Default value for sending { gasLimitTooltipCurrency } is { gasLimitTooltipValue } -
+ Default value for sending {gasLimitTooltipCurrency} is {gasLimitTooltipValue} + ); const gasPriceTooltip = ( -
+ Gas Price is the amount you pay per unit of gas.
- TX fee = gas price * gas limit & is paid to miners for including your TX in a block.
- Higher the gas price = faster transaction, but more expensive. Recommended is { recommendedGasPrice } GWEI.
- Read more -
+ TX fee = gas price * gas limit & is paid to miners for including your TX in a block.
+ Higher the gas price = faster transaction, but more expensive. Recommended is {recommendedGasPrice} GWEI.
+ Read more + ); const dataTooltip = ( -
+ Data is usually used when you send transactions to contracts. -
+ ); diff --git a/src/views/Wallet/views/AccountSummary/index.js b/src/views/Wallet/views/AccountSummary/index.js index 268bb606..85902523 100644 --- a/src/views/Wallet/views/AccountSummary/index.js +++ b/src/views/Wallet/views/AccountSummary/index.js @@ -2,6 +2,7 @@ import styled from 'styled-components'; import React from 'react'; import { H2 } from 'components/Heading'; +import TooltipContent from 'components/TooltipContent'; import BigNumber from 'bignumber.js'; import { Async as AsyncSelect } from 'react-select'; import Tooltip from 'rc-tooltip'; @@ -49,9 +50,9 @@ const Summary = (props: Props) => { if (!device || !account || !network) return null; const tokensTooltip = ( -
+ Insert token name, symbol or address to be able to send it. -
+ ); const explorerLink: string = `${network.explorer.address}${account.address}`;