diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index bbcd25e0d..28b988f5a 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -37,5 +37,27 @@ ExportPrivateKeyModal.prototype.render = function () { h('div.account-modal-divider'), + h('span.modal-body-title', 'Download Private Keys'), + + h('div.private-key-password', {}, [ + h('span.private-key-password-label', 'Type Your Password'), + + h('input.private-key-password-input', { + type: 'password', + placeholder: 'Type password', + }), + ]), + + h('div.private-key-password-warning', `Warning: Never disclose this key. + Anyone with your private keys can take steal any assets held in your + account.` + ), + + h('div.export-private-key-buttons', {}, [ + h('button.btn-clear.btn-cancel', {}, 'Cancel'), + + h('button.btn-clear', 'Download'), + ]), + ]) } diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js index e4f13a874..379f63883 100644 --- a/ui/app/components/send-token/index.js +++ b/ui/app/components/send-token/index.js @@ -240,7 +240,10 @@ SendTokenScreen.prototype.renderToAddressInput = function () { this.setErrorsFor('to') this.estimateGasAndPrice() }, - onFocus: () => this.clearErrorsFor('to'), + onFocus: event => { + if (to) event.target.select() + this.clearErrorsFor('to') + }, }), h('datalist#addresses', [ // Corresponds to the addresses owned. diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 0afd778e9..9cdfdec8f 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -265,6 +265,75 @@ background-color: $alto; } +// Export Private Key Modal + +.account-modal-container .account-name { + margin-top: 9px; + font-size: 20px; +} + +.account-modal-container .modal-body-title { + margin-top: 16px; + margin-bottom: 16px; + font-size: 18px; +} + +.private-key-password { + display: flex; + flex-direction: column; +} + +.private-key-password-label { + color: $scorpion; + font-size: 14px; + line-height: 18px; + margin-bottom: 10px; +} + +.private-key-password-input { + padding: 10px 0 13px 17px; + font-size: 16px; + line-height: 21px; + width: 291px; + height: 44px; +} + +.private-key-password::-webkit-input-placeholder { + color: $dusty-gray; + font-family: 'Montserrat UltraLight'; +} + +.private-key-password-warning { + border-radius: 8px; + background-color: #FFF6F6; + font-size: 12px; + font-weight: 500; + line-height: 15px; + color: $crimson; + width: 292px; + padding: 9px 15px; + margin-top: 18px; + font-family: 'Montserrat Regular'; +} + +.export-private-key-buttons { + display: flex; + flex-direction: row; + justify-content: center; + + .btn-clear { + width: 141px; + height: 54px; + } + + .btn-cancel { + margin-right: 15px; + border-color: $dusty-gray; + color: $scorpion; + } +} + + // New Account Modal .new-account-modal-wrapper { display: flex; diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 44ec3e862..5c32976a7 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -446,7 +446,7 @@ textarea.twelve-word-phrase { color: $white; } -.qr-ellip-address { +.qr-ellip-address, .ellip-address { overflow: hidden; text-overflow: ellipsis; } diff --git a/ui/app/send.js b/ui/app/send.js index 033692910..8791e9124 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -130,7 +130,10 @@ SendTransactionScreen.prototype.renderFromInput = function (from, identities) { }) }, onBlur: () => this.setErrorsFor('from'), - onFocus: () => this.clearErrorsFor('from'), + onFocus: event => { + this.clearErrorsFor('from') + this.state.newTx.from && event.target.select() + }, }), h('datalist#accounts', [ @@ -170,7 +173,10 @@ SendTransactionScreen.prototype.renderToInput = function (to, identities, addres this.setErrorsFor('to') this.estimateGasAndPrice() }, - onFocus: () => this.clearErrorsFor('to'), + onFocus: event => { + this.clearErrorsFor('to') + this.state.newTx.to && event.target.select() + }, }), h('datalist#addresses', [