Added children for button not text, refactored remember device

src/components/Loader/index.js

@@ -35,11 +35,15 @@ const CircleWrapper = styled.circle`
     `};
 `;
 
+const StyledParagraph = styled(Paragraph)`
+    color: ${props => (props.isWhiteText ? colors.WHITE : colors.TEXT_PRIMARY)};
+`;
+
 const Loader = ({
-    className, text, size = 100,
+    className, text, isWhiteText = false, size = 100,
 }) => (
     <Wrapper className={className} size={size}>
-        <Paragraph>{text}</Paragraph>
+        <StyledParagraph isWhiteText={isWhiteText}>{text}</StyledParagraph>
         <SvgWrapper viewBox="25 25 50 50">
             <CircleWrapper
                 cx="50"
@@ -65,6 +69,7 @@ const Loader = ({
 );
 
 Loader.propTypes = {
+    isWhiteText: PropTypes.bool,
     className: PropTypes.string,
     text: PropTypes.string,
     size: PropTypes.number,

src/components/buttons/Button/index.js

@@ -36,7 +36,6 @@ const Wrapper = styled.button`
 
         &:hover {
             color: ${colors.TEXT_PRIMARY};
-            border-color: ${colors.TEXT_PRIMARY};
             background: ${colors.DIVIDER};
         }
 
@@ -113,7 +112,7 @@ const IconWrapper = styled.span`
 `;
 
 const Button = ({
-    className, text, icon, onClick = () => { }, disabled, isWhite = false, isWebUsb = false, isTransparent = false,
+    children, className, text, icon, onClick = () => { }, disabled, isWhite = false, isWebUsb = false, isTransparent = false,
 }) => (
     <Wrapper
         className={className}
@@ -133,11 +132,12 @@ const Button = ({
                 />
             </IconWrapper>
         )}
-        {text}
+        {children}
     </Wrapper>
 );
 
 Button.propTypes = {
+    children: PropTypes.element.isRequired,
     className: PropTypes.string,
     onClick: PropTypes.func,
     disabled: PropTypes.bool,

src/components/modal/ForgetDevice/index.js

@@ -4,7 +4,7 @@ import { H3 } from 'components/Heading';
 import P from 'components/Paragraph';
 import Button from 'components/buttons/Button';
 
-const Remember = styled.div`
+const Wrapper = styled.div`
     width: 360px;
     padding: 24px 48px;
 `;
@@ -51,14 +51,14 @@ class ForgetDevice extends Component {
         const { device } = this.props.modal;
         const { onCancel } = this.props.modalActions;
         return (
-            <Remember>
+            <Wrapper>
-                <H3>Forget { device.instanceLabel } ?</H3>
+                <H3>Forget { device.instanceLabel }?</H3>
                 <StyledP isSmaller>Forgetting only removes the device from the list on the left, your coins are still safe and you can access them by reconnecting your TREZOR again.</StyledP>
                 <Row>
                     <StyledButton onClick={() => this.forget()} text="Forget" />
                     <StyledButton isWhite onClick={onCancel} text="Don't forget" />
                 </Row>
-            </Remember>
+            </Wrapper>
         );
     }
 }

src/components/modal/RememberDevice/index.js

@@ -1,8 +1,10 @@
 /* @flow */
-
-
 import React, { Component } from 'react';
+import styled from 'styled-components';
+import { H3 } from 'components/Heading';
+import P from 'components/Paragraph';
 import Loader from 'components/Loader';
+import Button from 'components/buttons/Button';
 
 import type { Props } from './index';
 
@@ -11,6 +13,40 @@ type State = {
     ticker?: number;
 }
 
+const ButtonContent = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+`;
+
+const StyledP = styled(P)`
+    padding: 10px 0;
+`;
+
+const Wrapper = styled.div`
+    width: 360px;
+    padding: 24px 48px;
+`;
+
+const Text = styled.div`
+    padding-right: 10px;
+`;
+
+const Column = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
+const StyledButton = styled(Button)`
+    margin: 5px 0;
+`;
+
+const StyledLoader = styled(Loader)`
+    position: absolute;
+    left: 200px;
+`;
+
 export default class RememberDevice extends Component<Props, State> {
     keyboardHandler: (event: KeyboardEvent) => void;
 
@@ -86,12 +122,27 @@ export default class RememberDevice extends Component<Props, State> {
             });
         }
         return (
-            <div className="remember">
+            <Wrapper>
-                <h3>Forget {label}?</h3>
+                <H3>Forget {label}?</H3>
-                <p>Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?</p>
+                <StyledP isSmaller>Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?</StyledP>
-                <button onClick={event => this.forget()}><span>Forget <Loader size={28} text={this.state.countdown.toString()} /></span></button>
+                <Column>
-                <button className="white" onClick={event => onRememberDevice(device)}>Remember</button>
+                    <StyledButton onClick={() => this.forget()}>
-            </div>
+                        <ButtonContent>
+                            <Text>Forget</Text>
+                            <StyledLoader
+                                isWhiteText
+                                size={28}
+                                text={this.state.countdown.toString()}
+                            />
+                        </ButtonContent>
+                    </StyledButton>
+                    <StyledButton
+                        isWhite
+                        onClick={event => onRememberDevice(device)}
+                    >Remember
+                    </StyledButton>
+                </Column>
+            </Wrapper>
         );
     }
 }

src/components/modal/index.js

@@ -1,10 +1,10 @@
 /* @flow */
-
-
 import React, { Component } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
+import styled from 'styled-components';
+import colors from 'config/colors';
 
 import { CSSTransition, Transition } from 'react-transition-group';
 
@@ -65,12 +65,35 @@ const Fade = ({ children, ...props }) => (
     </CSSTransition>
 );
 
+const ModalContainer = styled.div`
+    position: fixed;
+    z-index: 10000;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    background: rgba(0, 0, 0, 0.35);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: auto;
+    padding: 20px; 
+`;
+
+const ModalWindow = styled.div`
+    margin: auto;
+    position: relative;
+    border-radius: 4px;
+    background-color: ${colors.WHITE};
+    text-align: center;
+`;
+
 class Modal extends Component<Props> {
     render() {
         if (!this.props.modal.opened) return null;
 
-        const { opened, windowType } = this.props.modal;
+        const { opened } = this.props.modal;
-
+        const windowType = CONNECT.REMEMBER_REQUEST;
         let component = null;
         switch (windowType) {
             case UI.REQUEST_PIN:
@@ -86,8 +109,6 @@ class Modal extends Component<Props> {
                 component = (<ConfirmSignTx {...this.props} />);
                 break;
             // case "ButtonRequest_Address" :
-            //     component = (<ConfirmAddress { ...this.props } />)
-            // break;
             case 'ButtonRequest_PassphraseType':
                 component = (<PassphraseType {...this.props} />);
                 break;
@@ -114,11 +135,11 @@ class Modal extends Component<Props> {
         if (opened) {
             ch = (
                 <Fade key="1">
-                    <div className="modal-container">
+                    <ModalContainer className="modal-container">
-                        <div className="modal-window">
+                        <ModalWindow>
                             { component }
-                        </div>
+                        </ModalWindow>
-                    </div>
+                    </ModalContainer>
                 </Fade>
             );
         }

src/styles/modal.less

@@ -1,27 +1,4 @@
 .modal-container {
-    position: fixed;
-    z-index: 10000;
-    width: 100%;
-    height: 100%;
-    top: 0px;
-    left: 0px;
-    background: rgba(0, 0, 0, 0.35);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow: auto;
-    padding: 20px; 
-
-    .modal-window {
-        margin: auto;
-        // padding: 24px 48px;
-        position: relative;
-        border-radius: 4px;
-        background-color: @color_white;
-        text-align: center;
-        // overflow: hidden;
-    }
-
     h3 {
         color: @color_text_primary;
         font-size: 16px;