arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

Fix tooltip in AccountSummary

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-09-05 13:01:28 +02:00
parent 8caf66e39d
commit a29b13789d
2 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Tooltip/index.js
View File

@ -173,9 +173,17 @@ const Wrapper = styled.div`
class Tooltip extends Component { class Tooltip extends Component {
render() { render() {
const { placement, content, children } = this.props; const {
className,
placement,
content,
children,
} = this.props;
return ( return (
<Wrapper innerRef={(node) => { this.tooltipContainerRef = node; }}> <Wrapper
className={className}
innerRef={(node) => { this.tooltipContainerRef = node; }}
>
<RcTooltip <RcTooltip
getTooltipContainer={() => this.tooltipContainerRef} getTooltipContainer={() => this.tooltipContainerRef}
arrowContent={<div className="rc-tooltip-arrow-inner" />} arrowContent={<div className="rc-tooltip-arrow-inner" />}
@ -190,6 +198,7 @@ class Tooltip extends Component {
} }
Tooltip.propTypes = { Tooltip.propTypes = {
className: PropTypes.string,
placement: PropTypes.string, placement: PropTypes.string,
children: PropTypes.oneOfType([ children: PropTypes.oneOfType([
PropTypes.element, PropTypes.element,

26
src/views/Wallet/views/AccountSummary/index.js
View File

@ -7,7 +7,7 @@ import Icon from 'components/Icon';
import { AsyncSelect } from 'components/Select'; import { AsyncSelect } from 'components/Select';
import ICONS from 'config/icons'; import ICONS from 'config/icons';
import colors from 'config/colors'; import colors from 'config/colors';
import Tooltip from 'rc-tooltip'; import Tooltip from 'components/Tooltip';
import CoinLogo from 'components/images/CoinLogo'; import CoinLogo from 'components/images/CoinLogo';
import * as stateUtils from 'reducers/utils'; import * as stateUtils from 'reducers/utils';
@ -25,10 +25,17 @@ const AccountHeading = styled.div`
align-items: center; align-items: center;
`; `;
const StyledH2 = styled(H2)` const H2Wrapper = styled.div`
display: flex;
align-items: center;
padding: 20px 48px; padding: 20px 48px;
`; `;
const StyledTooltip = styled(Tooltip)`
position: relative;
top: 2px;
`;
const AccountName = styled.div` const AccountName = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
@ -93,24 +100,23 @@ const AccountSummary = (props: Props) => {
localStorage={props.localStorage} localStorage={props.localStorage}
/> />
<StyledH2> <H2Wrapper>
Tokens <H2>Tokens</H2>
<Tooltip <StyledTooltip
arrowContent={<div className="rc-tooltip-arrow-inner" />} placement="top"
overlay={( content={(
<React.Fragment> <React.Fragment>
Insert token name, symbol or address to be able to send it. Insert token name, symbol or address to be able to send it.
</React.Fragment> </React.Fragment>
)} )}
placement="top"
> >
<StyledIcon <StyledIcon
icon={ICONS.HELP} icon={ICONS.HELP}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
size={24} size={24}
/> />
</Tooltip> </StyledTooltip>
</StyledH2> </H2Wrapper>
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */} {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */} {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}