diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 9a076551e..c4efeccf0 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -652,7 +652,8 @@ } &__next-btn, - &__cancel-btn { + &__cancel-btn, + &__next-btn__disabled { width: 163px; text-align: center; height: 55px; @@ -667,16 +668,17 @@ border: 1px solid; } + &__next-btn, + &__next-btn__disabled { + color: $curious-blue; + border-color: $curious-blue; + } + &__next-btn__disabled { opacity: .5; cursor: auto; } - &__next-btn { - color: $curious-blue; - border-color: $curious-blue; - } - &__cancel-btn { color: $dusty-gray; border-color: $dusty-gray; diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index a9473541c..4986edf5f 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -382,7 +382,14 @@ SendTransactionScreen.prototype.renderForm = function () { } SendTransactionScreen.prototype.renderFooter = function () { - const { goHome, clearSend } = this.props + const { + goHome, + clearSend, + errors: { amount: amountError, to: toError } + } = this.props + + const noErrors = amountError === null && toError === null + const errorClass = noErrors ? '' : '__disabled' return h('div.send-v2__footer', [ h('button.send-v2__cancel-btn', { @@ -391,8 +398,8 @@ SendTransactionScreen.prototype.renderFooter = function () { goHome() }, }, 'Cancel'), - h('button.send-v2__next-btn', { - onClick: event => this.onSubmit(event), + h(`button.send-v2__next-btn${errorClass}`, { + onClick: event => noErrors && this.onSubmit(event), }, 'Next'), ]) }