diff options
| -rw-r--r-- | ui/app/components/tx-view.js | 59 | ||||
| -rw-r--r-- | ui/app/css/index.css | 20 |
2 files changed, 56 insertions, 23 deletions
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index b2799a65f..dc9a7985f 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -56,42 +56,61 @@ TxView.prototype.render = function () { }, [ ]), - h('div.flex-row.flex-wrap', { + h('div.flex-row', { style: { margin: '1.8em 1.3em 0.8em 1.3em', - flex: '1 0 auto', + // flex: '1 0 520px', } }, [ - h('div.flex-column.flex-center', { + // laptop: flex-row + // mobile: flex-column + h('div.flex-row.flex-center', { style: { - width: '100%', } }, [ - h('div', {}, 'ETH LOGO'), - - h('div', {}, '1001.124 ETH'), + // laptop: 50px 50px + // mobile: 100px 100px + h('img', { + src: '../images/eth_logo.svg', + width: '50px', + height: '50px', + style: { + borderRadius: '25px', + border: '1px solid', + } + }), - h('div', {}, '$300,000 USD'), + // laptop: 5vw? + // phone: 50vw? + h('div.flex-column.flex-center', { + style: {} + }, [ + h('div', {}, '1001.124 ETH'), - ]), + h('div', {}, '$300,000 USD'), + ]), - h('div.flex-row.flex-center', { - style: { - width: '100%', - } - }, [ - h('button.btn-clear', { - textAlign: 'center' - }, 'BUY'), + // laptop: 10vw? + // phone: 75vw? + h('div.flex-row.flex-center', { + style: { + width: '100%', + } + }, [ + h('button.btn-clear', { + textAlign: 'center' + }, 'BUY'), - h('button.btn-clear', { - textAlign: 'center' - }, 'SEND'), + h('button.btn-clear', { + textAlign: 'center' + }, 'SEND'), + ]), ]), + ]), h('div.flex-row', { diff --git a/ui/app/css/index.css b/ui/app/css/index.css index a14da2d70..eec17ec2b 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -89,12 +89,10 @@ input:focus, textarea:focus { background-color: #02C9B1; // TODO: reusable color in colors.css } + button.btn-clear { - width: 100px; - height: 50px; background: white; border: 1px solid; - font-size: .7em; } // No longer used in flat design, remove when modal buttons done @@ -795,6 +793,14 @@ div.message-container > div:first-child { width: 85%; height: 90vh; } + + button.btn-clear { + width: 75px; + height: 32px; + font-size: .6em; + background: white; + border: 1px solid; + } } @media screen and (min-width: 769px) { @@ -828,4 +834,12 @@ div.message-container > div:first-child { width: 100%; height: 100% } + + button.btn-clear { + width: 100px; + height: 50px; + font-size: .7em; + background: white; + border: 1px solid; + } }
\ No newline at end of file |