diff --git a/app/views/send.js b/app/views/send.js index dc6b326..1d2fb7d 100644 --- a/app/views/send.js +++ b/app/views/send.js @@ -5,7 +5,6 @@ import styled, { withTheme, keyframes } from 'styled-components'; import { BigNumber } from 'bignumber.js'; import { Transition, animated } from 'react-spring'; import { type Match } from 'react-router-dom'; -import Tooltip from 'rc-tooltip'; import { FEES } from '../constants/fees'; import { DARK } from '../constants/themes'; @@ -32,8 +31,7 @@ import LoadingIcon from '../assets/images/sync_icon_dark.png'; import ArrowUpIconDark from '../assets/images/arrow_up_dark.png'; import ArrowUpIconLight from '../assets/images/arrow_up_light.png'; -import type { SendTransactionInput, MapDispatchToProps, MapStateToProps } from '../containers/send'; -import type { State as SendState } from '../redux/modules/send'; +import type { MapDispatchToProps, MapStateToProps } from '../containers/send'; const rotate = keyframes` from { @@ -87,7 +85,7 @@ const AmountWrapper = styled.div` display: block; transition: all 0.05s ease-in-out; opacity: ${(props: AmountProps) => (props.isEmpty ? '0' : '1')}; - color: #fff; + color: ${props => props.theme.colors.text}; z-index: 10; } `; @@ -278,7 +276,7 @@ const HexadecimalWrapper = styled.div` cursor: pointer; &:hover { - opacity: 1; + opacity: 1;s } `; @@ -286,10 +284,33 @@ const HexadecimalText = styled(TextComponent)` white-space: nowrap; `; +const SimpleTooltip = styled.div` + background: ${props => props.theme.colors.walletAddressTooltipBg}; + position: absolute; + top: -30px; + right: 0px; + padding: 6px 10px; + border-radius: 3px; +`; + +const TooltipText = styled(TextComponent)` + color: ${props => props.theme.colors.walletAddressTooltip}; + font-size: 10px; + font-weight: 700; + text-align: center; +`; + +const SendButtonWrapper = styled.div` + position: relative; + width: 100%; + display: flex; +`; + type Props = { match: Match, theme: AppTheme, -} & MapStateToProps & MapDispatchToProps; +} & MapStateToProps & + MapDispatchToProps; type State = { showFee: boolean, @@ -453,18 +474,12 @@ class Component extends PureComponent { return isToAddressValid ? ( - + ) : ( - + ); }; @@ -564,12 +579,20 @@ class Component extends PureComponent { addresses, balance, zecPrice, isSending, error, operationId, theme, } = this.props; const { - showFee, from, amount, to, memo, fee, feeType, isHexMemo, showBalanceTooltip, + showFee, + from, + amount, + to, + memo, + fee, + feeType, + isHexMemo, + showBalanceTooltip, } = this.state; const isEmpty = amount === ''; - const fixedAmount = this.getAmountWithFee(); + const fixedAmount = isEmpty || new BigNumber(amount).eq(0) ? 0 : this.getAmountWithFee(); const zecBalance = formatNumber({ value: balance, append: 'ZEC ' }); const zecBalanceInUsd = formatNumber({ @@ -585,13 +608,9 @@ class Component extends PureComponent { append: 'USD $', }); - const seeMoreIcon = theme.mode === DARK - ? MenuIconDark - : MenuIconLight; + const seeMoreIcon = theme.mode === DARK ? MenuIconDark : MenuIconLight; - const arrowUpIcon = theme.mode === DARK - ? ArrowUpIconDark - : ArrowUpIconLight; + const arrowUpIcon = theme.mode === DARK ? ArrowUpIconDark : ArrowUpIconLight; return ( @@ -741,16 +760,13 @@ class Component extends PureComponent { showButtons={!isSending && !error && !operationId} onClose={this.reset} renderTrigger={toggle => ( - - - - - )} - > + + {showBalanceTooltip ? ( + + + + + ) : null} this.showModal(toggle)} id='send-submit-button' @@ -760,7 +776,7 @@ class Component extends PureComponent { isFluid disabled={this.shouldDisableSendButton()} /> - + )} > {toggle => (