From 8f819b0ce2b741e399d6f21d191a9dffca99e5f5 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Thu, 27 Sep 2018 12:29:20 +0200 Subject: [PATCH 1/5] Style tootlips --- src/components/Tooltip/index.js | 22 +++++++++++----------- src/config/colors.js | 1 + 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index 8f94ad15..f140a12d 100644 --- a/src/components/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -22,15 +22,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: 1px solid ${colors.BLACK}; } .rc-tooltip-arrow, @@ -48,7 +48,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 +57,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 +78,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 +87,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 +109,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 +118,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 +140,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 +149,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 { 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 From 9e2b5ddb1efc8412d1f9cc3262f641fe1bd8ba80 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Thu, 27 Sep 2018 12:37:08 +0200 Subject: [PATCH 2/5] Fixed token tooltip --- .../Wallet/views/AccountSummary/index.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/src/views/Wallet/views/AccountSummary/index.js b/src/views/Wallet/views/AccountSummary/index.js index 0a5d6644..f5e7b369 100644 --- a/src/views/Wallet/views/AccountSummary/index.js +++ b/src/views/Wallet/views/AccountSummary/index.js @@ -25,17 +25,16 @@ const AccountHeading = styled.div` align-items: center; `; +const TooltipContent = styled.div` + display: block; +`; + const H2Wrapper = styled.div` display: flex; align-items: center; padding: 20px 48px; `; -const StyledTooltip = styled(Tooltip)` - position: relative; - top: 2px; -`; - const AccountName = styled.div` display: flex; align-items: center; @@ -102,20 +101,16 @@ const AccountSummary = (props: Props) => {

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 */} From 0130a84a2ac3f13c4abf5c0860eba0a3603cc5d9 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Thu, 27 Sep 2018 13:03:50 +0200 Subject: [PATCH 3/5] Added read more support, gas price tooltip --- src/components/Tooltip/index.js | 27 ++++++++++++++++++- .../components/AdvancedForm/index.js | 9 ++++--- 2 files changed, 31 insertions(+), 5 deletions(-) diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index f140a12d..b89f12cf 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'; @@ -165,6 +166,19 @@ const Wrapper = styled.div` } `; +const Content = styled.div` + padding-bottom: 10px; +`; + +const ContentWrapper = styled.div``; +const ReadMore = styled.div` + padding: 10px 0; + text-align: center; + width: 100%; + color: ${colors.WHITE}; + border-top: 1px solid ${colors.TEXT_SECONDARY}; +`; + class Tooltip extends Component { render() { const { @@ -172,6 +186,7 @@ class Tooltip extends Component { placement, content, children, + readMoreLink, maxWidth, } = this.props; return ( @@ -184,7 +199,16 @@ class Tooltip extends Component { getTooltipContainer={() => this.tooltipContainerRef} arrowContent={
} placement={placement} - overlay={content} + overlay={() => ( + + {content} + {readMoreLink && ( + + Read more + + ) + } + )} > {children} @@ -205,6 +229,7 @@ Tooltip.propTypes = { PropTypes.element, PropTypes.string, ]), + readMoreLink: PropTypes.string, }; export default Tooltip; diff --git a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js b/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js index 1311c605..01898e9c 100644 --- a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js +++ b/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js @@ -190,12 +190,13 @@ const AdvancedForm = (props: Props) => { - 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_.28GWEI.29" placement="top" > Date: Thu, 27 Sep 2018 13:18:41 +0200 Subject: [PATCH 4/5] Finished tooltips --- src/components/Tooltip/index.js | 3 ++- .../components/AdvancedForm/index.js | 17 +++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index b89f12cf..e6467ab3 100644 --- a/src/components/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -168,11 +168,12 @@ 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; + padding: 10px 0 5px 0; text-align: center; width: 100%; color: ${colors.WHITE}; diff --git a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js b/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js index 01898e9c..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 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. + 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_.28GWEI.29" + readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price" placement="top" > Date: Thu, 27 Sep 2018 13:31:18 +0200 Subject: [PATCH 5/5] Tooltip border color --- src/components/Tooltip/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index e6467ab3..36aa5eaa 100644 --- a/src/components/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -12,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); } @@ -31,7 +31,7 @@ const Wrapper = styled.div` background-color: ${colors.TOOLTIP_BACKGROUND}; border-radius: 3px; min-height: 34px; - border: 1px solid ${colors.BLACK}; + border: none; } .rc-tooltip-arrow,