Styled sign and verify section

package.json

@@ -56,6 +56,7 @@
         "react-router-redux": "next",
         "react-scale-text": "^1.2.2",
         "react-select": "2.0.0",
+        "react-textarea-autosize": "^7.0.4",
         "react-transition-group": "^2.4.0",
         "redbox-react": "^1.6.0",
         "redux": "4.0.0",

src/components/Textarea/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Textarea from 'react-textarea-autosize';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import colors from 'config/colors';
@@ -13,11 +14,11 @@ const Wrapper = styled.div`
 
 const disabledColor = colors.TEXT_PRIMARY;
 
-const StyledTextarea = styled.textarea`
+const StyledTextarea = styled(Textarea)`
     width: 100%;
     min-height: 85px;
     margin-bottom: 10px;
-    padding: 6px 12px;
+    padding: 10px 12px;
     box-sizing: border-box;
     border: 1px solid ${props => (props.borderColor ? props.borderColor : colors.DIVIDER)};
     border-radius: 2px;
@@ -27,7 +28,7 @@ const StyledTextarea = styled.textarea`
     color: ${colors.TEXT_PRIMARY};
     background: ${colors.WHITE};
     font-weight: ${FONT_WEIGHT.BASE};
-    font-size: ${FONT_SIZE.BASE};
+    font-size: ${FONT_SIZE.SMALL};
     white-space: pre-wrap;       /* css-3 */
     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
     white-space: -pre-wrap;      /* Opera 4-6 */
@@ -105,7 +106,7 @@ const getColor = (inputState) => {
     return color;
 };
 
-const Textarea = ({
+const TextArea = ({
     className,
     placeholder = '',
     value,
@@ -145,7 +146,7 @@ const Textarea = ({
     </Wrapper>
 );
 
-Textarea.propTypes = {
+TextArea.propTypes = {
     className: PropTypes.string,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
@@ -159,4 +160,4 @@ Textarea.propTypes = {
     bottomText: PropTypes.string,
 };
 
-export default Textarea;
+export default TextArea;

src/components/inputs/Input/index.js

@@ -34,7 +34,7 @@ const TopLabel = styled.span`
 
 const StyledInput = styled.input`
     width: 100%;
-    height: 40px;
+    height: ${props => (props.height ? `${props.height}px` : '40px')};
     padding: 5px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px;
 
     line-height: 1.42857143;

src/views/Wallet/components/TopNavigationAccount/index.js

@@ -59,7 +59,7 @@ const TopNavigationAccount = (props: Props) => {
             <StyledNavLink exact to={`${basePath}`}>Summary</StyledNavLink>
             <StyledNavLink to={`${basePath}/receive`}>Receive</StyledNavLink>
             <StyledNavLink to={`${basePath}/send`}>Send</StyledNavLink>
-            {/* <StyledNavLink to={`${basePath}/signverify`}>Sign & Verify</StyledNavLink> */}
+            <StyledNavLink to={`${basePath}/signverify`}>Sign & Verify</StyledNavLink>
             <Indicator pathname={pathname} />
         </Wrapper>
     );

src/views/Wallet/views/Account/SignVerify/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import Input from 'components/inputs/Input';
 import Textarea from 'components/Textarea';
+import Button from 'components/Button';
 import Content from 'views/Wallet/components/Content';
 
 import { H2 } from 'components/Heading';
@@ -14,8 +15,19 @@ const Wrapper = styled.div`
     background: ${colors.WHITE};
 `;
 
-const StyledH2 = styled(H2)`
+const Row = styled.div`
-    padding-bottom: 10px;
+    padding: 10px 0 10px 0;
+`;
+
+const RowButtons = styled(Row)`
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+`;
+
+const StyledButton = styled(Button)`
+    margin-left: 10px;
+    width: 110px;
 `;
 
 const Column = styled.div`
@@ -31,30 +43,49 @@ const Verify = styled(Column)`
 `;
 
 const Label = styled.div`
-    color: ${colors.LABEL};
+    color: ${colors.TEXT_SECONDARY};
-    padding: 5px 0px;
+    padding: 5px 0px 10px 0;
 `;
 
 const AccountSignVerify = () => (
     <Content>
+        <H2>Sign & Verify</H2>
         <Wrapper>
             <Sign>
-                <StyledH2>Sign message</StyledH2>
+                <Row>
-                <Label>Message</Label>
+                    <Label>Address</Label>
-                <Textarea rows="4" maxLength="255" />
+                    <Input height={50} type="text" disabled />
-                <Label>Address</Label>
+                </Row>
-                <Input type="text" />
+                <Row>
-                <Label>Signature</Label>
+                    <Label>Message</Label>
-                <Textarea rows="4" maxLength="255" readOnly="readonly" />
+                    <Textarea rows="2" maxLength="255" />
+                </Row>
+                <Row>
+                    <Label>Signature</Label>
+                    <Textarea rows="2" maxLength="255" disabled />
+                </Row>
+                <RowButtons>
+                    <Button isWhite>Clear</Button>
+                    <StyledButton>Sign</StyledButton>
+                </RowButtons>
             </Sign>
             <Verify>
-                <StyledH2>Verify message</StyledH2>
+                <Row>
-                <Label>Message</Label>
+                    <Label>Address</Label>
-                <Textarea rows="4" maxLength="255" />
+                    <Input type="text" />
-                <Label>Address</Label>
+                </Row>
-                <Input type="text" />
+                <Row>
-                <Label>Signature</Label>
+                    <Label>Message</Label>
-                <Textarea rows="4" maxLength="255" />
+                    <Textarea rows="4" maxLength="255" />
+                </Row>
+                <Row>
+                    <Label>Signature</Label>
+                    <Textarea rows="4" maxLength="255" />
+                </Row>
+                <RowButtons>
+                    <Button isWhite>Clear</Button>
+                    <StyledButton>Verify</StyledButton>
+                </RowButtons>
             </Verify>
         </Wrapper>
     </Content>

yarn.lock

@@ -8449,6 +8449,12 @@ react-select@2.0.0:
     react-input-autosize "^2.2.1"
     react-transition-group "^2.2.1"
 
+react-textarea-autosize@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-7.0.4.tgz#4e4be649b544a88713e7b5043f76950f35d3d503"
+  dependencies:
+    prop-types "^15.6.0"
+
 react-transition-group@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"