diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index c63284b7e..bd7d77c48 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -66,63 +66,68 @@ TxList.prototype.renderTransactionListItem = function (transaction) { } const { address, transactionStatus, transactionAmount, dateString } = props - return h('div.flex-column.tx-list-item-wrapper', { - style: {}, - }, [ - - h('div.tx-list-date-wrapper', { - style: {}, - }, [ - h('span.tx-list-date', {}, [ - dateString, - ]), - ]), - - h('div.flex-row.tx-list-content-wrapper', { - style: {}, + return h('div', {}, [ + h('div.flex-column.tx-list-item-wrapper', { + style: {} }, [ - h('div.tx-list-identicon-wrapper', { - style: {}, + h('div.tx-list-date-wrapper', { + style: {} }, [ - h(Identicon, { - address, - diameter: 24, - }), + h('span.tx-list-date', {}, [ + dateString, + ]) ]), - h('div.tx-list-account-and-status-wrapper', {}, [ - h('div.tx-list-account-wrapper', { - style: {}, + h('div.flex-row.tx-list-content-wrapper', { + style: {} + }, [ + + h('div.tx-list-identicon-wrapper', { + style: {} }, [ - h('span.tx-list-account', {}, [ - `${address.slice(0, 10)}...${address.slice(-4)}`, + h(Identicon, { + address, + diameter: 28, + }) + ]), + + h('div.tx-list-account-and-status-wrapper', {}, [ + h('div.tx-list-account-wrapper', { + style: {} + }, [ + h('span.tx-list-account', {}, [ + `${address.slice(0, 10)}...${address.slice(-4)}` + ]), + ]), + + h('div.tx-list-status-wrapper', { + style: {} + }, [ + h('span.tx-list-status', {}, [ + transactionStatus, + ]), ]), ]), - h('div.tx-list-status-wrapper', { - style: {}, + h('div.flex-column.tx-list-details-wrapper', { + style: {} }, [ - h('span.tx-list-status', {}, [ - transactionStatus, + + h('span.tx-list-value', {}, [ + transactionAmount, ]), - ]), - ]), - h('div.flex-column.tx-list-details-wrapper', { - style: {}, - }, [ + h('span.tx-list-fiat-value', {}, [ + '+ $300 USD', + ]), - h('span.tx-list-value', {}, [ - transactionAmount, - ]), - - h('span.tx-list-fiat-value', {}, [ - '+ $300 USD', ]), ]), ]), + contentDivider + ]) } diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index eaaf99b80..81dcde5a9 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -10,6 +10,15 @@ const PendingMsg = require('./components/pending-msg') const PendingPersonalMsg = require('./components/pending-personal-msg') const Loading = require('./components/loading') +const contentDivider = h('div', { + style: { + marginLeft: '16px', + marginRight: '16px', + height:'1px', + background:'#E7E7E7', + }, +}) + module.exports = connect(mapStateToProps)(ConfirmTxScreen) function mapStateToProps (state) { diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 9ac506714..f7b3cc3e5 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -15,7 +15,7 @@ flex-direction: row; justify-content: flex-start; align-items: center; - margin: 2.8em 1.8em .8em; + margin: 2.8em 2.37em .8em; } .balance-container { diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index a140eb0f6..aa874caf5 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -14,7 +14,10 @@ $wallet-view-bg: $wild-sand; display: flex; flex-wrap: wrap; align-items: stretch; - overflow-y: scroll; +} + +.main-container::-webkit-scrollbar { + display: none; } // tx view diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 69a7e6718..8dca35a17 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -35,7 +35,11 @@ .tx-list-header { font-size: 16px; - margin: 1.8em 1.8em; + margin: 1.5em 2.37em; + } + + .tx-list-container::-webkit-scrollbar { + display: none; } } @@ -49,7 +53,7 @@ } @media screen and (min-width: $break-large) { - margin: .1em 1.8em; + margin: .1em 2.37em; } } @@ -63,7 +67,7 @@ } @media screen and (min-width: $break-large) { - margin: 0 1.8em; + margin: 0 2.37em; } } @@ -76,24 +80,24 @@ } @media screen and (min-width: $break-large) { - margin-top: 6px; + margin-top: 13px; } } .tx-list-content-wrapper { align-items: stretch; - margin-bottom: 8px; + margin-bottom: 4px; + margin-top: 2px; } .tx-list-date { color: $dusty-gray; - font-size: 14px; + font-size: 12px; } .tx-list-identicon-wrapper { align-self: center; - flex: 1 1 auto; - margin-left: 3px; + flex: 0.5 1 auto; } .tx-list-account-and-status-wrapper { @@ -113,7 +117,7 @@ align-items: center; .tx-list-account-wrapper { - flex: 2 2 auto; + flex: 1.3 2 auto; } .tx-list-status-wrapper { @@ -123,6 +127,7 @@ .tx-list-account { font-size: 16px; + color: $scorpion; } .tx-list-status { @@ -135,12 +140,15 @@ .tx-list-details-wrapper { align-self: center; flex: 2 2 auto; + color: $dusty-gray; .tx-list-value { font-size: 16px; + text-align: right; } .tx-list-fiat-value { font-size: 12px; + text-align: right; } }