From 7d6ad48f15aa65d28de724f550f911234ad2c58e Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 31 Aug 2017 04:58:45 -0230 Subject: Touch up transaction list item styles, remove main-content scroll bars, align buttons with main-content.. --- ui/app/components/tx-list.js | 85 +++++++++++++++++++++++--------------------- 1 file changed, 45 insertions(+), 40 deletions(-) (limited to 'ui/app/components') 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-status-wrapper', { - style: {}, - }, [ - h('span.tx-list-status', {}, [ - transactionStatus, + 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.flex-column.tx-list-details-wrapper', { - style: {}, - }, [ + h('div.flex-column.tx-list-details-wrapper', { + style: {} + }, [ - h('span.tx-list-value', {}, [ - transactionAmount, - ]), + h('span.tx-list-value', {}, [ + transactionAmount, + ]), + + h('span.tx-list-fiat-value', {}, [ + '+ $300 USD', + ]), - h('span.tx-list-fiat-value', {}, [ - '+ $300 USD', ]), ]), ]), + contentDivider + ]) } -- cgit v1.2.3