diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index b0d017c1..d83963df 100644 --- a/src/components/Textarea/index.js +++ b/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, diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index 08677e47..4866b04c 100644 --- a/src/components/inputs/Input/index.js +++ b/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 ); `} `; diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js index 0c575c56..67870d8e 100644 --- a/src/views/Wallet/views/Account/Receive/index.js +++ b/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; } `; diff --git a/src/views/Wallet/views/Account/SignVerify/index.js b/src/views/Wallet/views/Account/SignVerify/index.js index 61a6db2e..d9b75cef 100644 --- a/src/views/Wallet/views/Account/SignVerify/index.js +++ b/src/views/Wallet/views/Account/SignVerify/index.js @@ -86,7 +86,7 @@ class SignVerify extends Component { type="text" isSmallText autoSelect - isDisabled + readOnly /> @@ -97,7 +97,7 @@ class SignVerify extends Component { onChange={this.handleInputChange} rows={4} maxRows={4} - maxLength="255" + maxLength={255} /> @@ -108,8 +108,8 @@ class SignVerify extends Component { rows={4} autoSelect maxRows={4} - maxLength="255" - isDisabled + maxLength={255} + readOnly /> @@ -146,7 +146,7 @@ class SignVerify extends Component { onChange={this.handleInputChange} rows={4} maxRows={4} - maxLength="255" + maxLength={255} /> @@ -158,7 +158,7 @@ class SignVerify extends Component { onChange={this.handleInputChange} rows={4} maxRows={4} - maxLength="255" + maxLength={255} />