diff --git a/ui/app/css/index.css b/ui/app/css/index.css index d45966fc0..f4783a446 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -69,46 +69,48 @@ input:focus, textarea:focus { flex-direction: column; } -button, input[type="submit"] { - font-family: 'Montserrat Bold'; - outline: none; - cursor: pointer; - padding: 8px 12px; - border: none; - color: white; - transform-origin: center center; - transition: transform 50ms ease-in; - /* default orange */ - background: rgba(247, 134, 28, 1); - box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); -} +// TODO: remove/refactor for new design -.btn-green, input[type="submit"].btn-green { - background: rgba(106, 195, 96, 1); - box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36); -} +// button, input[type="submit"] { +// font-family: 'Montserrat Bold'; +// outline: none; +// cursor: pointer; +// padding: 8px 12px; +// border: none; +// color: white; +// transform-origin: center center; +// transition: transform 50ms ease-in; +// /* default orange */ +// background: rgba(247, 134, 28, 1); +// box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); +// } -.btn-red { - background: rgba(254, 35, 17, 1); - box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); -} +// .btn-green, input[type="submit"].btn-green { +// background: rgba(106, 195, 96, 1); +// box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36); +// } -button[disabled], input[type="submit"][disabled] { - cursor: not-allowed; - background: rgba(197, 197, 197, 1); - box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36); -} +// .btn-red { +// background: rgba(254, 35, 17, 1); +// box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); +// } -button.spaced { - margin: 2px; -} +// button[disabled], input[type="submit"][disabled] { +// cursor: not-allowed; +// background: rgba(197, 197, 197, 1); +// box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36); +// } -button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover { - transform: scale(1.1); -} -button:not([disabled]):active, input[type="submit"]:not([disabled]):active { - transform: scale(0.95); -} +// button.spaced { +// margin: 2px; +// } + +// button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover { +// transform: scale(1.1); +// } +// button:not([disabled]):active, input[type="submit"]:not([disabled]):active { +// transform: scale(0.95); +// } a { text-decoration: none; @@ -137,6 +139,22 @@ button.primary { text-transform: uppercase; } +button.light { + padding: 8px 12px; + // background: #FFFFFF; // $bg-white + box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); + color: #585D67; // TODO: make reusable light button color + font-size: 1.1em; + font-family: 'Montserrat Regular'; + text-transform: uppercase; + text-align: center; + line-height: 20px; + border-radius: 2px; + border: 1px solid #979797; // #TODO: make reusable light border color + opacity: 0.5; +} + +// TODO: cleanup: not used anywhere button.btn-thin { border: 1px solid; border-color: #4D4D4D; diff --git a/ui/app/send.js b/ui/app/send.js index 513c2462f..a24989e56 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -72,6 +72,7 @@ SendTransactionScreen.prototype.render = function () { marginLeft: '3.5%', marginRight: '3.5%', background: '#FFFFFF', // $background-white + boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)', } }, [ h('section.flex-center.flex-row', { @@ -92,7 +93,7 @@ SendTransactionScreen.prototype.render = function () { h('h3.flex-center', { style: { - marginTop: '-15px', + marginTop: '-18px', fontSize: '16px', }, }, [ @@ -111,6 +112,7 @@ SendTransactionScreen.prototype.render = function () { h('h3.flex-center', { style: { textAlign: 'center', + marginTop: '2px', fontSize: '12px', }, }, [ @@ -121,6 +123,7 @@ SendTransactionScreen.prototype.render = function () { style: { textAlign: 'center', fontSize: '36px', + marginTop: '8px', }, }, [ '2.34', @@ -130,6 +133,7 @@ SendTransactionScreen.prototype.render = function () { style: { textAlign: 'center', fontSize: '12px', + marginTop: '4px', }, }, [ 'ANT', @@ -156,7 +160,6 @@ SendTransactionScreen.prototype.render = function () { // 'amount' and send button h('section.flex-column.flex-center', [ - h('div.flex-row.flex-center', { style: { fontSize: '12px', @@ -184,7 +187,6 @@ SendTransactionScreen.prototype.render = function () { ]), h('section.flex-column.flex-center', [ - h('div.flex-row.flex-center', { style: { fontSize: '12px', @@ -215,8 +217,11 @@ SendTransactionScreen.prototype.render = function () { // Optional Fields // - h('section.flex-column.flex-center', [ - + h('section.flex-column.flex-center', { + style: { + marginBottom: '10px', + }, + }, [ h('div.flex-row.flex-center', { style: { fontSize: '12px', @@ -225,7 +230,6 @@ SendTransactionScreen.prototype.render = function () { } },[ h('span', { style: {} }, ['Transaction Memo (optional)']), - h('span', { style: { fontSize: '8px' } }, ['What\'s this?']), ]), h('input.large-input', { @@ -266,20 +270,28 @@ SendTransactionScreen.prototype.render = function () { ]), // Buttons underneath card + h('section.flex-column.flex-center', [ - h('button.primary', { - onClick: this.onSubmit.bind(this), - style: { - textTransform: 'uppercase', - }, - }, 'Next'), + h('button.light', { + onClick: this.onSubmit.bind(this), + style: { + marginTop: '8px', + width: '8em', + background: '#FFFFFF' + }, + }, 'Next'), - h('button.primary', { - onClick: this.back.bind(this), - style: { - textTransform: 'uppercase', - }, - }, 'Cancel'), + h('button.light', { + onClick: this.back.bind(this), + style: { + background: '#F7F7F7', // $alabaster + border: 'none', + opacity: 1, + width: '8em', + }, + }, 'Cancel'), + + ]), ]) )