diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index 8f94ad15..36aa5eaa 100644 --- a/src/components/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import RcTooltip from 'rc-tooltip'; import colors from 'config/colors'; +import Link from 'components/Link'; import styled from 'styled-components'; import PropTypes from 'prop-types'; @@ -11,7 +12,7 @@ const Wrapper = styled.div` z-index: 1070; display: block; visibility: visible; - border: 1px solid ${colors.DIVIDER}; + border: none; border-radius: 3px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); } @@ -22,15 +23,15 @@ const Wrapper = styled.div` .rc-tooltip-inner { padding: 8px 10px; - color: ${colors.TEXT_SECONDARY}; + color: ${colors.WHITE}; font-size: 12px; line-height: 1.5; text-align: left; text-decoration: none; - background-color: ${colors.WHITE}; + background-color: ${colors.TOOLTIP_BACKGROUND}; border-radius: 3px; min-height: 34px; - border: 1px solid ${colors.WHITE}; + border: none; } .rc-tooltip-arrow, @@ -48,7 +49,7 @@ const Wrapper = styled.div` bottom: -6px; margin-left: -6px; border-width: 6px 6px 0; - border-top-color: ${colors.DIVIDER}; + border-top-color: ${colors.BLACK}; } .rc-tooltip-placement-top .rc-tooltip-arrow-inner, @@ -57,7 +58,7 @@ const Wrapper = styled.div` bottom: 2px; margin-left: -6px; border-width: 6px 6px 0; - border-top-color: ${colors.WHITE}; + border-top-color: ${colors.TOOLTIP_BACKGROUND}; } .rc-tooltip-placement-top .rc-tooltip-arrow { @@ -78,7 +79,7 @@ const Wrapper = styled.div` left: -5px; margin-top: -6px; border-width: 6px 6px 6px 0; - border-right-color: ${colors.DIVIDER}; + border-right-color: ${colors.TOOLTIP_BACKGROUND}; } .rc-tooltip-placement-right .rc-tooltip-arrow-inner, @@ -87,7 +88,7 @@ const Wrapper = styled.div` left: 1px; margin-top: -6px; border-width: 6px 6px 6px 0; - border-right-color: ${colors.WHITE}; + border-right-color: ${colors.TOOLTIP_BACKGROUND}; } .rc-tooltip-placement-right .rc-tooltip-arrow { @@ -109,7 +110,7 @@ const Wrapper = styled.div` right: -5px; margin-top: -6px; border-width: 6px 0 6px 6px; - border-left-color: ${colors.DIVIDER}; + border-left-color: ${colors.TOOLTIP_BACKGROUND}; } .rc-tooltip-placement-left .rc-tooltip-arrow-inner, @@ -118,7 +119,7 @@ const Wrapper = styled.div` right: 1px; margin-top: -6px; border-width: 6px 0 6px 6px; - border-left-color: ${colors.WHITE}; + border-left-color: ${colors.TOOLTIP_BACKGROUND}; } .rc-tooltip-placement-left .rc-tooltip-arrow { @@ -140,7 +141,7 @@ const Wrapper = styled.div` top: -5px; margin-left: -6px; border-width: 0 6px 6px; - border-bottom-color: ${colors.DIVIDER}; + border-bottom-color: ${colors.TOOLTIP_BACKGROUND}; } .rc-tooltip-placement-bottom .rc-tooltip-arrow-inner, @@ -149,7 +150,7 @@ const Wrapper = styled.div` top: 1px; margin-left: -6px; border-width: 0 6px 6px; - border-bottom-color: ${colors.WHITE}; + border-bottom-color: ${colors.TOOLTIP_BACKGROUND}; } .rc-tooltip-placement-bottom .rc-tooltip-arrow { @@ -165,6 +166,20 @@ const Wrapper = styled.div` } `; +const Content = styled.div` + padding-bottom: 10px; + text-align: justify; +`; + +const ContentWrapper = styled.div``; +const ReadMore = styled.div` + padding: 10px 0 5px 0; + text-align: center; + width: 100%; + color: ${colors.WHITE}; + border-top: 1px solid ${colors.TEXT_SECONDARY}; +`; + class Tooltip extends Component { render() { const { @@ -172,6 +187,7 @@ class Tooltip extends Component { placement, content, children, + readMoreLink, maxWidth, } = this.props; return ( @@ -184,7 +200,16 @@ class Tooltip extends Component { getTooltipContainer={() => this.tooltipContainerRef} arrowContent={
} placement={placement} - overlay={content} + overlay={() => ( + + {content} + {readMoreLink && ( + + Read more + + ) + } + )} > {children} @@ -205,6 +230,7 @@ Tooltip.propTypes = { PropTypes.element, PropTypes.string, ]), + readMoreLink: PropTypes.string, }; export default Tooltip; diff --git a/src/config/colors.js b/src/config/colors.js index f6f5421f..32c737e4 100644 --- a/src/config/colors.js +++ b/src/config/colors.js @@ -30,4 +30,5 @@ export default { ERROR_SECONDARY: '#FFE9E9', LABEL_COLOR: '#A9A9A9', + TOOLTIP_BACKGROUND: '#333333', }; \ No newline at end of file diff --git a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js b/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js index 1311c605..cd3bb65b 100644 --- a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js +++ b/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js @@ -156,12 +156,13 @@ const AdvancedForm = (props: Props) => { - 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.
- Increasing this number will not get your TX mined faster.
- Default value for sending {gasLimitTooltipCurrency} is {gasLimitTooltipValue} + Gas limit refers to the maximum amount of gas user is willing to spendon a particular transaction.{' '} + Transaction fee = gas limit * gas price.{' '}Increasing the gas limit will not get the transaction confirmed sooner. + Default value for sending {gasLimitTooltipCurrency} is {gasLimitTooltipValue}. )} + maxWidth={410} + readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_limit" placement="top" > { - 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 + Gas price refers to the amount of ether you are willing to pay for every + unit of gas, and is usually measured in “Gwei”. Transaction fee = gas limit * gas price. Increasing the gas price will get the transaction confirmed sooner but + makes it more expensive. The recommended gas price is {recommendedGasPrice} GWEI. )} + maxWidth={400} + readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price" placement="top" > {

Tokens

- - Insert token name, symbol or address to be able to send it. - - )} + content="Insert token name, symbol or address to be able to send it." > - +
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */} {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}