From b7e5dba3d08a538032ede8798f0eab4786bccd07 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Fri, 10 Aug 2018 16:01:12 +0200
Subject: [PATCH] Sign and verify migrated to styled components

---
 .../wallet/account/sign/SignVerify.js         | 83 ++++++++++++++-----
 src/js/config/colors.js                       |  2 +
 src/styles/index.less                         |  1 -
 src/styles/signverify.less                    | 36 --------
 4 files changed, 62 insertions(+), 60 deletions(-)
 delete mode 100644 src/styles/signverify.less

diff --git a/src/js/components/wallet/account/sign/SignVerify.js b/src/js/components/wallet/account/sign/SignVerify.js
index 1c7dcb41..20a9b4b5 100644
--- a/src/js/components/wallet/account/sign/SignVerify.js
+++ b/src/js/components/wallet/account/sign/SignVerify.js
@@ -1,29 +1,66 @@
 import React from 'react';
+import styled from 'styled-components';
+
 import { H2 } from '~/js/components/common/Heading';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import colors from '~/js/config/colors';
+
+const Wrapper = styled.div`
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    background: ${colors.WHITE};
+    padding: 50px;
+`;
+
+const StyledH2 = styled(H2)`
+    padding-bottom: 10px;
+`;
+
+const Column = styled.div`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+`;
+
+const Sign = styled(Column)``;
+
+const Verify = styled(Column)`
+    padding-left: 20px;
+`;
+
+const Label = styled.div`
+    color: ${colors.LABEL};
+    padding: 5px 0px;
+`;
+
+const Textarea = styled.textarea`
+    resize: vertical;
+    width: 100%;
+`;
+
+const Input = styled.input``;
 
 const SignVerify = () => (
-    <section className="signverify">
-        <div className="sign">
-            <H2>Sign message</H2>
-            <label>Message</label>
-            <textarea rows="4" maxLength="255" />
-            <label>Address</label>
-            <input type="text" />
-            <label>Signature</label>
-            <textarea rows="4" maxLength="255" readOnly="readonly" />
-        </div>
-        <div className="verify">
-            <H2>Verify message</H2>
-            <label>Message</label>
-            <textarea rows="4" maxLength="255" />
-            <label>Address</label>
-            <input type="text" />
-            <label>Signature</label>
-            <textarea rows="4" maxLength="255" />
-        </div>
-    </section>
+    <Wrapper>
+        <Sign>
+            <StyledH2>Sign message</StyledH2>
+            <Label>Message</Label>
+            <Textarea rows="4" maxLength="255" />
+            <Label>Address</Label>
+            <Input type="text" />
+            <Label>Signature</Label>
+            <Textarea rows="4" maxLength="255" readOnly="readonly" />
+        </Sign>
+        <Verify>
+            <StyledH2>Verify message</StyledH2>
+            <Label>Message</Label>
+            <Textarea rows="4" maxLength="255" />
+            <Label>Address</Label>
+            <Input type="text" />
+            <Label>Signature</Label>
+            <Textarea rows="4" maxLength="255" />
+        </Verify>
+    </Wrapper>
 );
 
-export default connect(null, null)(SignVerify);
\ No newline at end of file
+export default SignVerify;
\ No newline at end of file
diff --git a/src/js/config/colors.js b/src/js/config/colors.js
index 4ec40050..e3ab71a3 100644
--- a/src/js/config/colors.js
+++ b/src/js/config/colors.js
@@ -27,4 +27,6 @@ export default {
 
     ERROR_PRIMARY: '#ED1212',
     ERROR_SECONDARY: '#FFE9E9',
+
+    LABEL_COLOR: '#A9A9A9',
 };
\ No newline at end of file
diff --git a/src/styles/index.less b/src/styles/index.less
index 2b44b544..0e0f8c7f 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -16,7 +16,6 @@
 @import './send.less';
 @import './receive.less';
 @import './summary.less';
-@import './signverify.less';
 @import './deviceSettings.less';
 
 @import './landingPage.less';
diff --git a/src/styles/signverify.less b/src/styles/signverify.less
deleted file mode 100644
index 356da153..00000000
--- a/src/styles/signverify.less
+++ /dev/null
@@ -1,36 +0,0 @@
-.signverify {
-    flex: 1;
-    display: flex;
-    flex-direction: row;
-    background: @color_white;
-
-    h2 {
-        line-height: 74px;
-    }
-
-    .sign,
-    .verify {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        padding-left: 50px;
-
-        textarea {
-            resize: vertical;
-            width: 100%;
-        }
-
-        // textarea[readonly] {
-        //     background: #A9A9A9;
-        // }
-    }
-
-    label {
-        color: #A9A9A9;
-        padding: 5px 0px;
-    }
-
-    .verify {
-        padding-right: 20px;
-    }
-}
\ No newline at end of file