m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Touch up transaction list item styles, remove main-content scroll bars, align buttons with main-content..

Browse Source
This commit is contained in:
Dan 2017-08-31 04:58:45 -02:30 committed by Chi Kei Chan
parent 57b3cdf948
commit 7d6ad48f15
5 changed files with 76 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
ui/app/components/tx-list.js
View File

@ -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
])
}

9
ui/app/conf-tx.js
View File

@ -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) {

2
ui/app/css/itcss/components/hero-balance.scss
View File

@ -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 {

5
ui/app/css/itcss/components/newui-sections.scss
View File

@ -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

26
ui/app/css/itcss/components/transaction-list.scss
View File

@ -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;
}
}