mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-24 09:18:09 +00:00
Remove icon prop from Button
- Now if you want to add icon to button you have to add it as button's child
This commit is contained in:
Vasek Mlejnsky
parent
01504cc2f9
commit
cf9cff3170
@ -82,7 +82,7 @@ const Wrapper = styled.button`
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&:after {
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
left: 23px;
|
||||
@ -107,15 +107,9 @@ const Wrapper = styled.button`
|
||||
`}
|
||||
`;
|
||||
|
||||
const IconWrapper = styled.span`
|
||||
${props => ((props.hasChildren && !props.isRight) ? 'margin: 0 8px 0 -4px;' : '')};
|
||||
${props => ((props.hasChildren && props.isRight) ? 'margin: 0 -4px 0 8px;' : '')};
|
||||
`;
|
||||
|
||||
const Button = ({
|
||||
children,
|
||||
className,
|
||||
icon,
|
||||
onClick = () => { },
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
@ -124,11 +118,9 @@ const Button = ({
|
||||
isWhite = false,
|
||||
isWebUsb = false,
|
||||
isTransparent = false,
|
||||
hasIconRight = false,
|
||||
}) => (
|
||||
<Wrapper
|
||||
className={className}
|
||||
icon={icon}
|
||||
onClick={onClick}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
@ -138,27 +130,12 @@ const Button = ({
|
||||
isWebUsb={isWebUsb}
|
||||
isTransparent={isTransparent}
|
||||
>
|
||||
{hasIconRight && children}
|
||||
{icon && (
|
||||
<IconWrapper
|
||||
hasChildren={!!children}
|
||||
isRight={hasIconRight}
|
||||
>
|
||||
<Icon
|
||||
icon={icon.type}
|
||||
color={icon.color}
|
||||
size={icon.size}
|
||||
isActive={icon.isActive}
|
||||
canAnimate={icon.canAnimate}
|
||||
/>
|
||||
</IconWrapper>
|
||||
)}
|
||||
{!hasIconRight && children}
|
||||
{children}
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
Button.propTypes = {
|
||||
children: PropTypes.node,
|
||||
children: PropTypes.node.isRequired,
|
||||
className: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
onMouseEnter: PropTypes.func,
|
||||
@ -168,14 +145,6 @@ Button.propTypes = {
|
||||
isWhite: PropTypes.bool,
|
||||
isWebUsb: PropTypes.bool,
|
||||
isTransparent: PropTypes.bool,
|
||||
icon: PropTypes.shape({
|
||||
type: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
color: PropTypes.string,
|
||||
size: PropTypes.number,
|
||||
isActive: PropTypes.bool,
|
||||
canAnimate: PropTypes.bool,
|
||||
}),
|
||||
hasIconRight: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@ -10,6 +10,7 @@ import Link from 'components/Link';
|
||||
import Button from 'components/Button';
|
||||
import Loader from 'components/Loader';
|
||||
import P from 'components/Paragraph';
|
||||
import Icon from 'components/Icon';
|
||||
import ICONS from 'config/icons';
|
||||
|
||||
type State = {
|
||||
@ -73,6 +74,13 @@ const DownloadBridgeWrapper = styled.div`
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const DownloadBridgeButton = styled(Button)`
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export default class InstallBridge extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
@ -121,14 +129,14 @@ export default class InstallBridge extends Component<Props, State> {
|
||||
options={installers}
|
||||
/>
|
||||
<Link href={url}>
|
||||
<Button
|
||||
icon={{
|
||||
type: ICONS.DOWNLOAD,
|
||||
color: colors.WHITE,
|
||||
size: 30,
|
||||
}}
|
||||
>Download for {label}
|
||||
</Button>
|
||||
<DownloadBridgeButton>
|
||||
<Icon
|
||||
icon={ICONS.DOWNLOAD}
|
||||
color={colors.WHITE}
|
||||
size={30}
|
||||
/>
|
||||
Download for {label}
|
||||
</DownloadBridgeButton>
|
||||
</Link>
|
||||
</DownloadBridgeWrapper>
|
||||
<P>
|
||||
|
||||
@ -3,6 +3,7 @@ import React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import { H2 } from 'components/Heading';
|
||||
import Button from 'components/Button';
|
||||
import Icon from 'components/Icon';
|
||||
import ICONS from 'config/icons';
|
||||
import colors from 'config/colors';
|
||||
|
||||
@ -80,17 +81,30 @@ const AddressInfoText = styled.div`
|
||||
`;
|
||||
|
||||
const ShowAddressButton = styled(Button)`
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 10px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
`;
|
||||
|
||||
const ShowAddressIcon = styled(Icon)`
|
||||
margin-right: 7px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
`;
|
||||
|
||||
const EyeButton = styled(Button)`
|
||||
z-index: 10001;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: 40px;
|
||||
top: 2px;
|
||||
right: 60px;
|
||||
top: 3px;
|
||||
`;
|
||||
|
||||
const qrCodeStyle = {
|
||||
@ -154,11 +168,12 @@ const AccountReceive = (props: Props) => {
|
||||
<EyeButton
|
||||
isTransparent
|
||||
onClick={() => props.showAddress(account.addressPath)}
|
||||
icon={{
|
||||
type: addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE,
|
||||
color: addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY,
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Icon
|
||||
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
|
||||
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
|
||||
/>
|
||||
</EyeButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
<ValueWrapper
|
||||
@ -183,12 +198,12 @@ const AccountReceive = (props: Props) => {
|
||||
<ShowAddressButton
|
||||
onClick={() => props.showAddress(account.addressPath)}
|
||||
isDisabled={device.connected && !discovery.completed}
|
||||
icon={{
|
||||
type: ICONS.EYE,
|
||||
color: colors.WHITE,
|
||||
size: 25,
|
||||
}}
|
||||
>Show full address
|
||||
>
|
||||
<ShowAddressIcon
|
||||
icon={ICONS.EYE}
|
||||
color={colors.WHITE}
|
||||
/>
|
||||
Show full address
|
||||
</ShowAddressButton>
|
||||
)}
|
||||
</AddressWrapper>
|
||||
|
||||
@ -4,6 +4,7 @@ import ColorHash from 'color-hash';
|
||||
import ScaleText from 'react-scale-text';
|
||||
import colors from 'config/colors';
|
||||
import Button from 'components/Button';
|
||||
import Icon from 'components/Icon';
|
||||
import ICONS from 'config/icons';
|
||||
import * as stateUtils from 'reducers/utils';
|
||||
import BigNumber from 'bignumber.js';
|
||||
@ -78,11 +79,12 @@ class AddedToken extends Component<> {
|
||||
<RemoveTokenButton
|
||||
isTransparent
|
||||
onClick={() => this.props.removeToken(this.props.token)}
|
||||
icon={{
|
||||
type: ICONS.CLOSE,
|
||||
size: 23,
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Icon
|
||||
icon={ICONS.CLOSE}
|
||||
size={23}
|
||||
/>
|
||||
</RemoveTokenButton>
|
||||
</TokenWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user