From c221f5ce79a1e24df4672e16bda8e85c434e11ba Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 10 Oct 2017 14:30:20 -0700 Subject: Confirm Token and Confirm Contract v2 --- .../pending-tx/confirm-deploy-contract.js | 33 ++++++++--------- ui/app/components/pending-tx/confirm-send-token.js | 42 +++++++++++----------- ui/app/css/itcss/components/confirm.scss | 6 ++-- 3 files changed, 43 insertions(+), 38 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index 386e14afe..ea4aa1dde 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -270,7 +270,8 @@ ConfirmDeployContract.prototype.render = function () { h('button.confirm-screen-back-button', { onClick: () => backToAccountDetail(selectedAddress), }, 'BACK'), - h('div.confirm-screen-title', 'Confirm Transaction'), + h('div.confirm-screen-title', 'Confirm Contract'), + h('div.confirm-screen-header-tip'), ]), h('div.flex-row.flex-center.confirm-screen-identicons', [ h('div.confirm-screen-account-wrapper', [ @@ -278,11 +279,11 @@ ConfirmDeployContract.prototype.render = function () { Identicon, { address: fromAddress, - diameter: 100, + diameter: 60, }, ), h('span.confirm-screen-account-name', fromName), - h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), + // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), ]), h('i.fa.fa-arrow-right.fa-lg'), h('div.confirm-screen-account-wrapper', [ @@ -292,14 +293,14 @@ ConfirmDeployContract.prototype.render = function () { ]), ]), - h('h3.flex-center.confirm-screen-sending-to-message', { - style: { - textAlign: 'center', - fontSize: '16px', - }, - }, [ - `You're deploying a new contract.`, - ]), + // h('h3.flex-center.confirm-screen-sending-to-message', { + // style: { + // textAlign: 'center', + // fontSize: '16px', + // }, + // }, [ + // `You're deploying a new contract.`, + // ]), this.renderHeroAmount(), @@ -326,17 +327,17 @@ ConfirmDeployContract.prototype.render = function () { ]), ]), - h('form#pending-tx-form.flex-column.flex-center', { + h('form#pending-tx-form', { onSubmit: this.onSubmit, }, [ - - // Accept Button - h('button.confirm-screen-confirm-button', ['CONFIRM']), - // Cancel Button h('div.cancel.btn-light.confirm-screen-cancel-button', { onClick: (event) => this.cancel(event, txMeta), }, 'CANCEL'), + + // Accept Button + h('button.confirm-screen-confirm-button', ['CONFIRM']), + ]), ]) ) diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 384ac92cc..d6ff5a5af 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -155,7 +155,7 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { h('h3.flex-center.confirm-screen-send-amount', `$${fiatAmount}`), h('h3.flex-center.confirm-screen-send-amount-currency', 'USD'), h('div.flex-center.confirm-memo-wrapper', [ - h('h3.confirm-screen-send-memo', memo), + h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), ]), ]) ) @@ -164,7 +164,7 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { h('h3.flex-center.confirm-screen-send-amount', tokenAmount), h('h3.flex-center.confirm-screen-send-amount-currency', symbol), h('div.flex-center.confirm-memo-wrapper', [ - h('h3.confirm-screen-send-memo', memo), + h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), ]), ]) ) @@ -242,7 +242,7 @@ ConfirmSendToken.prototype.render = function () { this.inputs = [] return ( - h('div.flex-column.flex-grow.confirm-screen-container', { + h('div.confirm-screen-container', { style: { minWidth: '355px' }, }, [ // Main Send token Card @@ -252,6 +252,7 @@ ConfirmSendToken.prototype.render = function () { onClick: () => backToAccountDetail(selectedAddress), }, 'BACK'), h('div.confirm-screen-title', 'Confirm Transaction'), + h('div.confirm-screen-header-tip'), ]), h('div.flex-row.flex-center.confirm-screen-identicons', [ h('div.confirm-screen-account-wrapper', [ @@ -259,11 +260,11 @@ ConfirmSendToken.prototype.render = function () { Identicon, { address: fromAddress, - diameter: 100, + diameter: 60, }, ), h('span.confirm-screen-account-name', fromName), - h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), + // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), ]), h('i.fa.fa-arrow-right.fa-lg'), h('div.confirm-screen-account-wrapper', [ @@ -271,22 +272,22 @@ ConfirmSendToken.prototype.render = function () { Identicon, { address: txParams.to, - diameter: 100, + diameter: 60, }, ), h('span.confirm-screen-account-name', toName), - h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), + // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), ]), ]), - h('h3.flex-center.confirm-screen-sending-to-message', { - style: { - textAlign: 'center', - fontSize: '16px', - }, - }, [ - `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, - ]), + // h('h3.flex-center.confirm-screen-sending-to-message', { + // style: { + // textAlign: 'center', + // fontSize: '16px', + // }, + // }, [ + // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, + // ]), this.renderHeroAmount(), @@ -314,18 +315,19 @@ ConfirmSendToken.prototype.render = function () { ]), ]), - h('form#pending-tx-form.flex-column.flex-center', { + h('form#pending-tx-form', { onSubmit: this.onSubmit, }, [ - - // Accept Button - h('button.confirm-screen-confirm-button', ['CONFIRM']), - // Cancel Button h('div.cancel.btn-light.confirm-screen-cancel-button', { onClick: (event) => this.cancel(event, txMeta), }, 'CANCEL'), + + // Accept Button + h('button.confirm-screen-confirm-button', ['CONFIRM']), ]), + + ]) ) } diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index dc642c2bc..643747e36 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -140,7 +140,9 @@ } i.fa-file-text-o { - font-size: 100px; + font-size: 60px; + margin: 16px 8px 0 8px; + text-align: center; } } @@ -294,7 +296,7 @@ section .confirm-screen-account-number, padding: 19px 18px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; - + width: 100%; @media screen and (max-width: $break-small) { border-top: 1px solid $alto; -- cgit