diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js index dca5c8c47..cc723df14 100644 --- a/ui/app/components/qr-code.js +++ b/ui/app/components/qr-code.js @@ -4,6 +4,7 @@ const qrCode = require('qrcode-npm').qrcode const inherits = require('util').inherits const connect = require('react-redux').connect const isHexPrefixed = require('ethereumjs-util').isHexPrefixed +const ReadOnlyInput = require('./readonly-input') module.exports = connect(mapStateToProps)(QrCodeView) @@ -46,18 +47,11 @@ QrCodeView.prototype.render = function () { __html: qrImage.createTableTag(4), }, }), - h('.div.ellip-address-wrapper', [ - h('input.qr-ellip-address', { - style: { - width: '247px', - }, - value: Qr.data, - readOnly: true, - }), - // h(CopyButton, { - // value: Qr.data, - // }), - ]), + h(ReadOnlyInput, { + wrapperClass: 'ellip-address-wrapper', + inputClass: 'qr-ellip-address', + value: Qr.data, + }), ]) } diff --git a/ui/app/components/readonly-input.js b/ui/app/components/readonly-input.js new file mode 100644 index 000000000..b688e0722 --- /dev/null +++ b/ui/app/components/readonly-input.js @@ -0,0 +1,27 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +module.exports = ReadOnlyInput + +inherits(ReadOnlyInput, Component) +function ReadOnlyInput () { + Component.call(this) +} + +ReadOnlyInput.prototype.render = function () { + const { + wrapperClass, + inputClass, + value, + } = this.props + + return h('div', {className: wrapperClass}, [ + h('input', { + className: inputClass, + value, + readOnly: true, + }), + ]) +} + diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 9f6ce54f5..5e3f9cc08 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -234,7 +234,7 @@ } .account-modal-container .qr-ellip-address { - width: 254px; + width: 247px; border: none; font-family: 'Montserrat Light'; font-size: 14px;