From 119c2b24238b84d5a9e3beabe572da42f8e2ffcb Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 10 Oct 2017 14:16:57 -0700 Subject: Confirm eth v2 --- ui/app/components/pending-tx/confirm-send-ether.js | 38 ++--- ui/app/css/itcss/components/confirm.scss | 154 +++++++++++++-------- ui/app/css/itcss/settings/typography.scss | 2 +- ui/app/css/itcss/settings/variables.scss | 1 - ui/lib/feature-toggle-utils.js | 4 +- 5 files changed, 119 insertions(+), 80 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 330a55cce..537a9a659 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -192,7 +192,7 @@ ConfirmSendEther.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 @@ -202,6 +202,7 @@ ConfirmSendEther.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', [ @@ -209,11 +210,11 @@ ConfirmSendEther.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', [ @@ -221,27 +222,27 @@ ConfirmSendEther.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)}`, + // ]), h('h3.flex-center.confirm-screen-send-amount', [`$${amountInUSD}`]), 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}"` : '' ]), ]), h('div.confirm-screen-rows', [ @@ -365,17 +366,16 @@ ConfirmSendEther.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 36d1bdd9a..dc642c2bc 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -1,32 +1,43 @@ .confirm-screen-container { - position: absolute; + position: relative; align-items: center; + font-family: Roboto; + flex: 0 0 auto; + flex-flow: column nowrap; + box-shadow: 0 2px 4px 0 rgba($black, .08); + border-radius: 8px; @media screen and (max-width: 575px) { - margin-top: 35px; width: 100%; } @media screen and (min-width: 576px) { - margin-top: 6.9vh; + top: -26px; } } .confirm-screen-wrapper { + height: 100%; + width: 380px; + background-color: $white; display: flex; - flex-direction: column; + flex-flow: column nowrap; + z-index: 25; align-items: center; - z-index: 100; - top: 5%; - font-family: 'DIN NEXT'; - background: $white; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); - // padding: 20px 24px 32px; - color: $scorpion; - width: 100%; + font-family: Roboto; + position: relative; + overflow-y: auto; + overflow-x: hidden; + border-top-left-radius: 8px; + border-top-right-radius: 8px; - @media screen and (min-width: $break-large) { - width: 498px; + @media screen and (max-width: $break-small) { + width: 100%; + overflow-x: hidden; + overflow-y: auto; + top: 0; + box-shadow: none; + height: calc(100vh - 41px - 100px); } } @@ -39,27 +50,34 @@ margin: 0; } -.confirm-screen-wrapper > .confirm-screen-header { - - @media screen and (max-width: $break-small) { - margin-left: 8px; - } -} - .confirm-screen-header { - font-size: 26px; + height: 88px; + background-color: $athens-grey; position: relative; display: flex; - flex-flow: row nowrap; + justify-content: center; align-items: center; + font-size: 22px; + line-height: 29px; width: 100%; - padding: 20px 24px 0; + padding: 25px 0; + flex: 0 0 auto; @media screen and (max-width: $break-small) { font-size: 22px; } } +.confirm-screen-header-tip { + height: 25px; + width: 25px; + background: $athens-grey; + position: absolute; + transform: rotate(45deg); + left: 178px; + top: 71px; +} + .confirm-screen-title { line-height: 27px; @@ -70,12 +88,12 @@ } .confirm-screen-back-button { - background: $white; - border: 1px solid $dusty-gray; + background: transparent; + border: 1px solid $curious-blue; left: 24px; position: absolute; text-align: center; - color: $black; + color: $curious-blue; padding: 6px 13px 7px 12px; border-radius: 2px; height: 30px; @@ -93,14 +111,15 @@ .confirm-screen-account-name { margin-top: 12px; + font-size: 14px; + line-height: 19px; + color: $scorpion; + text-align: center; } -.confirm-screen-account-name, .confirm-screen-row-info { font-size: 16px; - line-height: 24px; - color: $scorpion; - text-align: center; + line-height: 21px; } .confirm-screen-account-number { @@ -113,6 +132,7 @@ .confirm-screen-identicons { margin-top: 24px; + flex: 0 0 auto; i.fa-arrow-right { align-self: start; @@ -132,34 +152,34 @@ } .confirm-screen-send-amount { - font-size: 64px; color: $scorpion; margin-top: 12px; - line-height: 60px; text-align: center; - font-family: 'DIN NEXT Light'; + font-size: 40px; + font-weight: 300; + line-height: 53px; + flex: 0 0 auto; } .confirm-screen-send-amount-currency { font-size: 20px; line-height: 20px; text-align: center; + flex: 0 0 auto; } .confirm-memo-wrapper { min-height: 24px; width: 100%; border-bottom: 1px solid $alto; + flex: 0 0 auto; } .confirm-screen-send-memo { - color: $dusty-gray; + color: $scorpion; font-size: 16px; - line-height: 24px; - text-align: center; - margin-top: 21px; - margin-bottom: 18px; - font-family: 'DIN NEXT Light'; + line-height: 19px; + font-weight: 400; } .confirm-screen-label { @@ -180,7 +200,7 @@ section .confirm-screen-account-number, display: flex; flex-flow: column nowrap; width: 100%; - padding: 0 24px 32px; + flex: 0 0 auto; } .confirm-screen-section-column { @@ -191,24 +211,26 @@ section .confirm-screen-account-number, display: flex; flex-flow: row nowrap; border-bottom: 1px solid $alto; - width: calc(100% - 24px); + width: 100%; align-items: center; - padding: 12px 0; - margin: 0 12px; + padding: 12px; + padding-left: 35px; + font-size: 16px; + line-height: 22px; + font-weight: 300; } .confirm-screen-row-detail { font-size: 12px; line-height: 16px; color: $dusty-gray; - font-family: 'DIN NEXT Light'; } .confirm-screen-total-box { background-color: $wild-sand; - border-radius: 8px; - padding: 22px 14px; - margin-top: 13px; + padding: 20px; + padding-left: 35px; + border-bottom: 1px solid $alto; .confirm-screen-label { line-height: 18px; @@ -219,44 +241,62 @@ section .confirm-screen-account-number, } &__subtitle { - font-size: 14px; - line-height: 20px; - font-family: 'DIN NEXT Light'; + font-size: 12px; + line-height: 22px; + } + + .confirm-screen-row-info { + font-size: 16px; + font-weight: 500; + line-height: 21px; } } .confirm-screen-confirm-button { height: 62px; - width: 216.88px; border-radius: 2px; background-color: #02c9b1; font-size: 16px; color: $white; text-align: center; - font-family: 'DIN NEXT'; + font-family: Roboto; padding-top: 15px; padding-bottom: 15px; - margin-top: 23px; border-width: 0; box-shadow: none; + flex: 1 0 auto; + font-weight: 300; } .btn-light.confirm-screen-cancel-button { height: 62px; - width: 216.88px; background: none; border: none; opacity: 1; - width: 8em; - font-family: 'DIN NEXT'; + font-family: Roboto; border-width: 0; padding-top: 15px; padding-bottom: 15px; font-size: 16px; + line-height: 32px; box-shadow: none; cursor: pointer; + flex: 1 0 auto; + font-weight: 300; } #pending-tx-form { flex: 1 0 auto; + position: relative; + display: flex; + flex-flow: row nowrap; + background-color: $white; + padding: 19px 18px; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + + + @media screen and (max-width: $break-small) { + border-top: 1px solid $alto; + } } diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss index 5b7817651..58e2d444e 100644 --- a/ui/app/css/itcss/settings/typography.scss +++ b/ui/app/css/itcss/settings/typography.scss @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css?family=Roboto:300,500'); +@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'); @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'); diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 764d9c179..7433df81f 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -31,7 +31,6 @@ $concrete: #f3f3f3; $tundora: #4d4d4d; $nile-blue: #1b344d; $scorpion: #5d5d5d; -$caribbean-green: #02C9B1; $silver: #cdcdcd; $caribbean-green: #02c9b1; $monzo: #d0021b; diff --git a/ui/lib/feature-toggle-utils.js b/ui/lib/feature-toggle-utils.js index f4ff446d3..6d4e461ca 100644 --- a/ui/lib/feature-toggle-utils.js +++ b/ui/lib/feature-toggle-utils.js @@ -1,4 +1,4 @@ -function checkFeatureToggle(name) { +function checkFeatureToggle (name) { const queryPairMap = window.location.search.substr(1).split('&') .map(pair => pair.split('=')) .reduce((pairs, [key, value]) => ({...pairs, [key]: value }), {}) @@ -8,4 +8,4 @@ function checkFeatureToggle(name) { module.exports = { checkFeatureToggle, -} \ No newline at end of file +} -- cgit