Forget device refactored

src/components/buttons/Button/index.js

@@ -29,7 +29,7 @@ const Wrapper = styled.button`
         background: ${colors.GRAY_LIGHT};
     `}
 
-    ${props => props.color === 'white' && css`
+    ${props => props.isWhite && css`
         background: ${colors.WHITE};
         color: ${colors.TEXT_SECONDARY};
         border: 1px solid ${colors.DIVIDER};
@@ -113,14 +113,13 @@ const IconWrapper = styled.span`
 `;
 
 const Button = ({
-    className, text, icon, onClick = () => { }, disabled, color = null, isWhite = false, isWebUsb = false, isTransparent = false,
+    className, text, icon, onClick = () => { }, disabled, isWhite = false, isWebUsb = false, isTransparent = false,
 }) => (
     <Wrapper
         className={className}
         icon={icon}
         onClick={onClick}
         disabled={disabled}
-        color={color}
         isWhite={isWhite}
         isWebUsb={isWebUsb}
         isTransparent={isTransparent}
@@ -142,7 +141,6 @@ Button.propTypes = {
     className: PropTypes.string,
     onClick: PropTypes.func,
     disabled: PropTypes.bool,
-    color: PropTypes.string,
     isWhite: PropTypes.bool,
     isWebUsb: PropTypes.bool,
     isTransparent: PropTypes.bool,

src/components/modal/ConfirmSignTx.js

@@ -1,37 +0,0 @@
-/* @flow */
-
-
-import React from 'react';
-import type { Props } from './index';
-
-const Confirmation = (props: Props) => {
-    if (!props.modal.opened) return null;
-    const { device } = props.modal;
-
-    const {
-        amount,
-        address,
-        currency,
-        total,
-        selectedFeeLevel,
-    } = props.sendForm;
-
-    return (
-        <div className="confirm-tx">
-            <div className="header">
-                <h3>Confirm transaction on { device.label } device</h3>
-                <p>Details are shown on display</p>
-            </div>
-            <div className="content">
-                <label>Send </label>
-                <p>{ `${amount} ${currency}` }</p>
-                <label>To</label>
-                <p>{ address }</p>
-                <label>Fee</label>
-                <p>{ selectedFeeLevel.label }</p>
-            </div>
-        </div>
-    );
-};
-
-export default Confirmation;

src/components/modal/ForgetDevice/index.js

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { H3 } from 'components/Heading';
+import P from 'components/Paragraph';
+import Button from 'components/buttons/Button';
+
+const Remember = styled.div`
+    width: 360px;
+    padding: 24px 48px;
+`;
+
+const StyledP = styled(P)`
+    padding: 14px 0px;
+`;
+
+const StyledButton = styled(Button)`
+    margin: 0 0 10px 0;
+`;
+
+const Row = styled.div`
+    display: flex;
+    flex-direction: column;
+    padding: 10px 0;
+`;
+
+class ForgetDevice extends Component {
+    componentDidMount() {
+        this.keyboardHandler = this.keyboardHandler.bind(this);
+        window.addEventListener('keydown', this.keyboardHandler, false);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('keydown', this.keyboardHandler, false);
+    }
+
+    keyboardHandler(event) {
+        if (event.keyCode === 13) {
+            event.preventDefault();
+            this.forget();
+        }
+    }
+
+    forget() {
+        if (this.props.modal.opened) {
+            this.props.modalActions.onForgetSingleDevice(this.props.modal.device);
+        }
+    }
+
+    render() {
+        if (!this.props.modal.opened) return null;
+        const { device } = this.props.modal;
+        const { onCancel } = this.props.modalActions;
+        return (
+            <Remember>
+                <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>
+        );
+    }
+}
+
+export default ForgetDevice;

src/components/modal/index.js

@@ -18,14 +18,17 @@ import * as MODAL from 'actions/constants/modal';
 import * as CONNECT from 'actions/constants/TrezorConnect';
 import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
 import type { State, Dispatch } from 'flowtype';
-import Pin from './Pin';
+
-import InvalidPin from './InvalidPin';
+import ForgetDevice from 'components/modal/ForgetDevice';
-import Passphrase from './Passphrase';
+
-import PassphraseType from './PassphraseType';
+import Pin from 'components/modal/Pin';
-import ConfirmSignTx from './ConfirmSignTx';
+import InvalidPin from 'components/modal/InvalidPin';
-import ConfirmAddress, { ConfirmUnverifiedAddress } from './ConfirmAddress';
+import Passphrase from 'components/modal/Passphrase';
-import RememberDevice, { ForgetDevice } from './RememberDevice';
+import PassphraseType from 'components/modal/PassphraseType';
-import DuplicateDevice from './DuplicateDevice';
+import ConfirmSignTx from 'components/modal/ConfirmSignTx';
+import ConfirmAddress, { ConfirmUnverifiedAddress } from 'components/modal/ConfirmAddress';
+import RememberDevice from 'components/modal/RememberDevice';
+import DuplicateDevice from 'components/modal/DuplicateDevice';
 
 
 type OwnProps = { }