Merge pull request #266 from trezor/sign-and-verify-readonly

Sign and verify readonly

src/components/Textarea/index.js

@@ -57,6 +57,11 @@ const StyledTextarea = styled(Textarea)`
         opacity: 1;
     }
 
+    &:read-only {
+        background: ${colors.GRAY_LIGHT};
+        color: ${colors.TEXT_SECONDARY};
+    }
+
     &:disabled {
         pointer-events: none;
         background: ${colors.GRAY_LIGHT};
@@ -150,11 +155,13 @@ const TextArea = ({
     onFocus,
     onBlur,
     isDisabled,
+    readOnly,
     name,
     onChange,
     topLabel,
     rows,
     maxRows,
+    maxLength,
     autoSelect,
     state = '',
     bottomText = '',
@@ -169,6 +176,7 @@ const TextArea = ({
             autoCorrect="off"
             autoCapitalize="off"
             maxRows={maxRows}
+            maxLength={maxLength}
             rows={rows}
             className={className}
             disabled={isDisabled}
@@ -177,6 +185,7 @@ const TextArea = ({
             onFocus={onFocus}
             onBlur={onBlur}
             value={value}
+            readOnly={readOnly}
             onClick={autoSelect ? event => event.target.select() : null}
             placeholder={placeholder}
             onChange={onChange}
@@ -202,7 +211,9 @@ TextArea.propTypes = {
     customStyle: PropTypes.string,
     placeholder: PropTypes.string,
     value: PropTypes.string,
+    readOnly: PropTypes.bool,
     maxRows: PropTypes.number,
+    maxLength: PropTypes.number,
     rows: PropTypes.number,
     name: PropTypes.string,
     isDisabled: PropTypes.bool,

src/components/inputs/Input/index.js

@@ -62,6 +62,11 @@ const StyledInput = styled.input`
         color: ${colors.TEXT_SECONDARY};
     }
 
+    &:read-only  {
+        background: ${colors.GRAY_LIGHT};
+        color: ${colors.TEXT_SECONDARY};
+    }
+
     ${props => props.trezorAction && css`
         z-index: 10001;
         position: relative; /* bigger than modal container */
@@ -95,7 +100,7 @@ const Overlay = styled.div`
         height: 100%;
         background-image: linear-gradient(to right, 
             rgba(0,0,0, 0) 0%,
-            rgba(255,255,255, 1) 220px
+            rgba(249,249,249, 1) 220px
         );
     `}
 `;

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

@@ -65,13 +65,13 @@ const EyeButton = styled(Button)`
     z-index: 10001;
     padding: 0;
     width: 30px;
-    background: white;
+    background: transparent;
     top: 5px;
     position: absolute;
     right: 10px;
 
     &:hover {
-        background: white;
+        background: transparent;
     }
 `;
 

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

@@ -86,7 +86,7 @@ class SignVerify extends Component <Props> {
                                 type="text"
                                 isSmallText
                                 autoSelect
-                                isDisabled
+                                readOnly
                             />
                         </Row>
                         <Row>
@@ -97,7 +97,7 @@ class SignVerify extends Component <Props> {
                                 onChange={this.handleInputChange}
                                 rows={4}
                                 maxRows={4}
-                                maxLength="255"
+                                maxLength={255}
                             />
                         </Row>
                         <Row>
@@ -108,8 +108,8 @@ class SignVerify extends Component <Props> {
                                 rows={4}
                                 autoSelect
                                 maxRows={4}
-                                maxLength="255"
+                                maxLength={255}
-                                isDisabled
+                                readOnly
                             />
                         </Row>
                         <RowButtons>
@@ -146,7 +146,7 @@ class SignVerify extends Component <Props> {
                                 onChange={this.handleInputChange}
                                 rows={4}
                                 maxRows={4}
-                                maxLength="255"
+                                maxLength={255}
                             />
                         </Row>
                         <Row>
@@ -158,7 +158,7 @@ class SignVerify extends Component <Props> {
                                 onChange={this.handleInputChange}
                                 rows={4}
                                 maxRows={4}
-                                maxLength="255"
+                                maxLength={255}
                             />
                         </Row>
                         <RowButtons>