Sign and verify migrated to styled components

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);
+export default SignVerify;

src/js/config/colors.js

@@ -27,4 +27,6 @@ export default {
 
     ERROR_PRIMARY: '#ED1212',
     ERROR_SECONDARY: '#FFE9E9',
+
+    LABEL_COLOR: '#A9A9A9',
 };

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';

src/styles/signverify.less

@@ -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;
-    }
-}