Pin modal partly refactored

src/components/modals/InvalidPin.js

@@ -1,19 +0,0 @@
-/* @flow */
-
-
-import React from 'react';
-import type { Props } from './index';
-
-const InvalidPin = (props: Props) => {
-    if (!props.modal.opened) return null;
-
-    const { device } = props.modal;
-    return (
-        <div className="pin">
-            <h3>Entered PIN for { device.label } is not correct</h3>
-            <p>Retrying...</p>
-        </div>
-    );
-};
-
-export default InvalidPin;

src/components/modals/PassphraseType.js

@@ -1,20 +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;
-
-    return (
-        <div className="confirm-tx">
-            <div className="header">
-                <h3>Complete the action on { device.label } device</h3>
-            </div>
-        </div>
-    );
-};
-
-export default Confirmation;

src/components/modals/index.js

@@ -17,10 +17,11 @@ import * as CONNECT from 'actions/constants/TrezorConnect';
 import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
 import type { State, Dispatch } from 'flowtype';
 
-import Pin from 'components/modals/Pin';
+import Pin from 'components/modals/pin/Pin';
-import InvalidPin from 'components/modals/InvalidPin';
+import InvalidPin from 'components/modals/pin/Invalid';
-import Passphrase from 'components/modals/Passphrase';
+
-import PassphraseType from 'components/modals/PassphraseType';
+import Passphrase from 'components/modals/passphrase/Passphrase';
+import PassphraseType from 'components/modals/passphrase/Type';
 
 import ConfirmSignTx from 'components/modals/confirm/SignTx';
 import ConfirmUnverifiedAddress from 'components/modals/confirm/UnverifiedAddress';
@@ -52,7 +53,6 @@ export type Props = StateProps & DispatchProps;
 
 const duration = 300;
 
-
 const Fade = ({ children, ...props }) => (
     <CSSTransition
         {...props}
@@ -90,7 +90,9 @@ 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 = UI.REQUEST_PIN;
 
         let component = null;
         switch (windowType) {

src/components/modals/passphrase/Passphrase/index.js

@@ -1,6 +1,4 @@
 /* @flow */
-
-
 import React, { Component } from 'react';
 import raf from 'raf';
 

src/components/modals/passphrase/Type/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Icon from 'components/Icon';
+import colors from 'config/colors';
+import icons from 'config/icons';
+import styled from 'styled-components';
+import { H3 } from 'components/Heading';
+
+const Wrapper = styled.div`
+    width: 360px;
+    padding: 24px 48px;
+`;
+
+const Header = styled.div``;
+
+const Confirmation = (props) => {
+    if (!props.modal.opened) return null;
+    const { device } = props.modal;
+
+    return (
+        <Wrapper>
+            <Header>
+                <Icon icon={icons.T1} size={60} color={colors.TEXT_SECONDARY} />
+                <H3>Complete the action on { device.label } device</H3>
+            </Header>
+        </Wrapper>
+    );
+};
+
+export default Confirmation;

src/components/modals/pin/Invalid/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import { H3 } from 'components/Heading';
+import P from 'components/Paragraph';
+
+import type { Props } from './index';
+
+const Wrapper = styled.div`
+    padding: 24px 48px;
+`;
+
+const InvalidPin = (props: Props) => {
+    if (!props.modal.opened) return null;
+
+    const { device } = props.modal;
+    return (
+        <Wrapper>
+            <H3>Entered PIN for { device.label } is not correct</H3>
+            <P isSmaller>Retrying...</P>
+        </Wrapper>
+    );
+};
+
+export default InvalidPin;

src/components/modals/pin/Pin/index.js

@@ -2,13 +2,17 @@
 
 
 import React, { Component } from 'react';
-
+import styled from 'styled-components';
+import colors from 'config/colors';
 import type { Props } from './index';
 
 type State = {
     pin: string;
 }
 
+const Wrapper = styled.div``;
+const InputRow = styled.div``;
+
 export default class Pin extends Component<Props, State> {
     keyboardHandler: (event: KeyboardEvent) => void;
 
@@ -111,7 +115,7 @@ export default class Pin extends Component<Props, State> {
         const { pin } = this.state;
 
         return (
-            <div className="pin">
+            <Wrapper className="pin">
                 {/* <button className="close-modal transparent"></button> */}
                 <h3>Enter { device.label } PIN</h3>
                 <p>The PIN layout is displayed on your TREZOR.</p>
@@ -139,7 +143,7 @@ export default class Pin extends Component<Props, State> {
 
                 <div><button className="submit" type="button" onClick={event => onPinSubmit(pin)}>Enter PIN</button></div>
                 <p>Not sure how PIN works? <a className="green" href="http://doc.satoshilabs.com/trezor-user/enteringyourpin.html" target="_blank" rel="noreferrer noopener">Learn more</a></p>
-            </div>
+            </Wrapper>
         );
     }
 }