mirror of https://github.com/trezor/trezor-wallet
Merge pull request #512 from trezor/feature/limit-max-accounts
Feature/limit number of accounts to 10pull/516/head
commit
5fbb0cd2ea
@ -0,0 +1,64 @@
|
||||
/* @flow */
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { Icon, Tooltip, icons as ICONS, colors } from 'trezor-ui-components';
|
||||
import { LEFT_NAVIGATION_ROW } from 'config/variables';
|
||||
import Row from '../../../Row';
|
||||
|
||||
import l10nMessages from '../../index.messages';
|
||||
|
||||
const RowAddAccountWrapper = styled.div`
|
||||
width: 100%;
|
||||
padding: ${LEFT_NAVIGATION_ROW.PADDING};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
&:hover {
|
||||
cursor: ${props => (props.disabled ? 'default' : 'pointer')};
|
||||
color: ${props => (props.disabled ? colors.TEXT_SECONDARY : colors.TEXT_PRIMARY)};
|
||||
}
|
||||
`;
|
||||
|
||||
const AddAccountIconWrapper = styled.div`
|
||||
margin-right: 12px;
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
onClick?: () => any,
|
||||
tooltipContent?: React.Node,
|
||||
disabled?: boolean,
|
||||
};
|
||||
|
||||
const AddAccountButton = ({ onClick, tooltipContent, disabled }: Props) => {
|
||||
const ButtonRow = (
|
||||
<Row onClick={onClick}>
|
||||
<RowAddAccountWrapper disabled={disabled}>
|
||||
<AddAccountIconWrapper>
|
||||
<Icon icon={ICONS.PLUS} size={14} color={colors.TEXT_SECONDARY} />
|
||||
</AddAccountIconWrapper>
|
||||
<FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} />
|
||||
</RowAddAccountWrapper>
|
||||
</Row>
|
||||
);
|
||||
|
||||
if (tooltipContent) {
|
||||
return (
|
||||
<Tooltip maxWidth={200} content={tooltipContent} placement="bottom">
|
||||
{ButtonRow}
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
return ButtonRow;
|
||||
};
|
||||
|
||||
export default AddAccountButton;
|
||||
|
||||
AddAccountButton.propTypes = {
|
||||
onClick: PropTypes.func,
|
||||
className: PropTypes.string,
|
||||
tooltipContent: PropTypes.node,
|
||||
disabled: PropTypes.bool,
|
||||
};
|
Loading…
Reference in new issue