From 0a8f8f8872257d4b37ef77ff5406fcb8c7a54f1b Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Wed, 22 Aug 2018 16:35:19 +0200
Subject: [PATCH] Styled initil page

---
 src/js/components/P/index.js                  | 18 +++++++++
 src/js/views/Wallet/views/Initialize/index.js | 40 +++++++++++++++----
 2 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 src/js/components/P/index.js

diff --git a/src/js/components/P/index.js b/src/js/components/P/index.js
new file mode 100644
index 00000000..0e49f301
--- /dev/null
+++ b/src/js/components/P/index.js
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Wrapper = styled.p`
+`;
+
+const P = ({ children, className }) => (
+    <Wrapper className={className}>{children}</Wrapper>
+);
+
+P.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.string.isRequired,
+};
+
+
+export default P;
diff --git a/src/js/views/Wallet/views/Initialize/index.js b/src/js/views/Wallet/views/Initialize/index.js
index 47ec5d8b..b1a9a231 100644
--- a/src/js/views/Wallet/views/Initialize/index.js
+++ b/src/js/views/Wallet/views/Initialize/index.js
@@ -1,17 +1,41 @@
-/* @flow */
+import styled from 'styled-components';
 import { H2 } from 'components/Heading';
+import Button from 'components/Button';
+import P from 'components/P';
 import React from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
+const Wrapper = styled.div`
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+`;
+
+const Row = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;  
+`;
+
+const A = styled.a``;
+
+const StyledP = styled(P)`
+    margin: 20px 50px;
+    display: block;
+`;
+
 const Initialize = () => (
-    <section className="device-settings">
-        <div className="row">
+    <Wrapper>
+        <Row>
             <H2>Your device is in not initialized</H2>
-            <p>Please use Bitcoin wallet interface to start initialization process</p>
-            <a className="button" href="https://wallet.trezor.io/">Take me to the Bitcoin wallet</a>
-        </div>
-    </section>
+            <StyledP>Please use Bitcoin wallet interface to start initialization process</StyledP>
+            <A href="https://wallet.trezor.io/">
+                <Button text="Take me to the Bitcoin wallet" />
+            </A>
+        </Row>
+    </Wrapper>
 );
 
 export default connect(null, null)(Initialize);