diff --git a/package.json b/package.json
index b22a1998..10934290 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js
index d67ba8d7..98f8a938 100644
--- a/src/components/Textarea/index.js
+++ b/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 = ({
);
-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;
diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js
index 9c763607..a5e11ee8 100644
--- a/src/components/inputs/Input/index.js
+++ b/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;
diff --git a/src/views/Wallet/components/TopNavigationAccount/index.js b/src/views/Wallet/components/TopNavigationAccount/index.js
index aef26440..3ff290ae 100644
--- a/src/views/Wallet/components/TopNavigationAccount/index.js
+++ b/src/views/Wallet/components/TopNavigationAccount/index.js
@@ -59,7 +59,7 @@ const TopNavigationAccount = (props: Props) => {
Summary
Receive
Send
- {/* Sign & Verify */}
+ Sign & Verify
);
diff --git a/src/views/Wallet/views/Account/SignVerify/index.js b/src/views/Wallet/views/Account/SignVerify/index.js
index d04e3b4f..e8b63cb8 100644
--- a/src/views/Wallet/views/Account/SignVerify/index.js
+++ b/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)`
- padding-bottom: 10px;
+const Row = styled.div`
+ 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};
- padding: 5px 0px;
+ color: ${colors.TEXT_SECONDARY};
+ padding: 5px 0px 10px 0;
`;
const AccountSignVerify = () => (
+ Sign & Verify
- Sign message
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sign
+
- Verify message
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Verify
+
diff --git a/yarn.lock b/yarn.lock
index 0c415b76..9d9e3b69 100644
--- a/yarn.lock
+++ b/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"