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

@@ -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}
+        {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}
     </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;

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<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
+                        <DownloadBridgeButton>
-                            icon={{
+                            <Icon
-                                type: ICONS.DOWNLOAD,
+                                icon={ICONS.DOWNLOAD}
-                                color: colors.WHITE,
+                                color={colors.WHITE}
-                                size: 30,
+                                size={30}
-                            }}
+                            />
-                        >Download for {label}
+                            Download for {label}
-                        </Button>
+                        </DownloadBridgeButton>
                     </Link>
                 </DownloadBridgeWrapper>
                 <P>

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;
+    right: 60px;
-    top: 2px;
+    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,
+                                <Icon
-                                    color: addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY,
+                                    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,
+                            <ShowAddressIcon
-                                color: colors.WHITE,
+                                icon={ICONS.EYE}
-                                size: 25,
+                                color={colors.WHITE}
-                            }}
+                            />
-                        >Show full address
+                            Show full address
                         </ShowAddressButton>
                     )}
                 </AddressWrapper>

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<> {
                 <RemoveTokenButton
                     isTransparent
                     onClick={() => this.props.removeToken(this.props.token)}
-                    icon={{
+                >
-                        type: ICONS.CLOSE,
+                    <Icon
-                        size: 23,
+                        icon={ICONS.CLOSE}
-                    }}
+                        size={23}
-                />
+                    />
+                </RemoveTokenButton>
             </TokenWrapper>
         );
     }