From cf9cff317099b59d1559ea51064c3930b49d1e02 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Tue, 4 Sep 2018 15:43:12 +0200 Subject: [PATCH] Remove icon prop from Button - Now if you want to add icon to button you have to add it as button's child --- src/components/Button/index.js | 37 ++--------------- .../Landing/components/InstallBridge/index.js | 24 +++++++---- .../Wallet/views/AccountReceive/index.js | 41 +++++++++++++------ .../components/AddedToken/index.js | 12 +++--- 4 files changed, 54 insertions(+), 60 deletions(-) diff --git a/src/components/Button/index.js b/src/components/Button/index.js index cf305ae7..c50ae0d2 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -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, }) => ( - {hasIconRight && children} - {icon && ( - - - - )} - {!hasIconRight && children} + {children} ); 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; \ No newline at end of file diff --git a/src/views/Landing/components/InstallBridge/index.js b/src/views/Landing/components/InstallBridge/index.js index d3cb0775..79f66aca 100644 --- a/src/views/Landing/components/InstallBridge/index.js +++ b/src/views/Landing/components/InstallBridge/index.js @@ -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 { constructor(props: Props) { super(props); @@ -121,14 +129,14 @@ export default class InstallBridge extends Component { options={installers} /> - + + + Download for {label} +

diff --git a/src/views/Wallet/views/AccountReceive/index.js b/src/views/Wallet/views/AccountReceive/index.js index c0b65a8c..ec92414d 100644 --- a/src/views/Wallet/views/AccountReceive/index.js +++ b/src/views/Wallet/views/AccountReceive/index.js @@ -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) => { props.showAddress(account.addressPath)} - icon={{ - type: addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE, - color: addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY, - }} - /> + > + + )} { props.showAddress(account.addressPath)} isDisabled={device.connected && !discovery.completed} - icon={{ - type: ICONS.EYE, - color: colors.WHITE, - size: 25, - }} - >Show full address + > + + Show full address )} diff --git a/src/views/Wallet/views/AccountSummary/components/AddedToken/index.js b/src/views/Wallet/views/AccountSummary/components/AddedToken/index.js index 29051dbc..2ee663b3 100644 --- a/src/views/Wallet/views/AccountSummary/components/AddedToken/index.js +++ b/src/views/Wallet/views/AccountSummary/components/AddedToken/index.js @@ -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<> { this.props.removeToken(this.props.token)} - icon={{ - type: ICONS.CLOSE, - size: 23, - }} - /> + > + + ); }