Add trezor webusb button style

src/js/components/Button/index.js

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import Icon from 'components/Icon';
 import colors from 'config/colors';
+import { TRANSITION } from 'config/variables';
 
 const Wrapper = styled.button`
     padding: ${props => (props.icon ? '4px 24px 4px 15px' : '11px 24px')};
@@ -24,6 +25,55 @@ const Wrapper = styled.button`
         color: ${colors.TEXT_SECONDARY};
         background: ${colors.GRAY_LIGHT};
     `}
+
+    ${props => props.isWebUsb && css`
+        position: relative;
+        padding: 12px 24px 12px 40px;
+        background: transparent;
+        color: ${colors.GREEN_PRIMARY};
+        border: 1px solid ${colors.GREEN_PRIMARY};
+        transition: ${TRANSITION.HOVER};
+
+        &:before,
+        &:after {
+            content: '';
+            position: absolute;
+            background: ${colors.GREEN_PRIMARY};
+            top: 0;
+            bottom: 0;
+            margin: auto;
+            transition: ${TRANSITION.HOVER};
+        }
+
+        &:before {
+            width: 12px;
+            height: 2px;
+            left: 18px;
+        }
+
+        &:after {
+            width: 2px;
+            height: 12px;
+            left: 23px;
+        }
+
+        &:hover {
+            background: ${colors.GREEN_PRIMARY};
+            color: ${colors.WHITE};
+
+            &:before,
+            &:after {
+                background: ${colors.WHITE};
+            }
+        }
+
+        iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 1;
+        }
+    `}
 `;
 
 const IconWrapper = styled.span`
@@ -31,14 +81,16 @@ const IconWrapper = styled.span`
 `;
 
 const Button = ({
-    text, icon, onClick, disabled, blue, white,
+    className, text, icon, onClick = () => { }, disabled, isBlue = false, isWhite = false, isWebUsb = false,
 }) => (
     <Wrapper
+        className={className}
         icon={icon}
         onClick={onClick}
         disabled={disabled}
-        blue={blue}
-        white={white}
+        isBlue={isBlue}
+        isWhite={isWhite}
+        isWebUsb={isWebUsb}
     >
         {icon && (
             <IconWrapper>
@@ -54,10 +106,12 @@ const Button = ({
 );
 
 Button.propTypes = {
+    className: PropTypes.string,
     onClick: PropTypes.func,
     disabled: PropTypes.bool,
-    blue: PropTypes.bool,
-    white: PropTypes.bool,
+    isBlue: PropTypes.bool,
+    isWhite: PropTypes.bool,
+    isWebUsb: PropTypes.bool,
     icon: PropTypes.shape({
         type: PropTypes.arrayOf(PropTypes.string).isRequired,
         color: PropTypes.string,
@@ -66,11 +120,4 @@ Button.propTypes = {
     text: PropTypes.string.isRequired,
 };
 
-Button.defaultProps = {
-    onClick: () => {},
-    disabled: false,
-    blue: false,
-    white: false,
-};
-
 export default Button;

src/js/views/Landing/components/ConnectDevice/index.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import styled, { keyframes } from 'styled-components';
 import TrezorConnect from 'trezor-connect';
 import P from 'components/Paragraph';
+import Button from 'components/Button';
 import colors from 'config/colors';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 
@@ -97,12 +98,11 @@ class ConnectDevice extends Component<Props> {
                 {this.props.showWebUsb && (
                     <React.Fragment>
                         <P>and</P>
-                        <button
-                            type="button"
+                        <Button
                             className="trezor-webusb-button"
-                        >
-                            Check for devices
-                        </button>
+                            text="Check for devices"
+                            isWebUsb
+                        />
                     </React.Fragment>
                 )}
             </Wrapper>