diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 39cf7de79..74d46728c 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -22,12 +22,7 @@ function TxList () { } const contentDivider = h('div.tx-list-content-divider', { - style: { - marginLeft: '1.3em', - marginRight: '1.3em', - height:'1px', - background:'#E7E7E7', // TODO: make custom color - }, + style: {}, }) TxList.prototype.render = function () { @@ -38,11 +33,11 @@ TxList.prototype.render = function () { return h('div.flex-column.tx-list-container', {}, [ - h('div.flex-row.tx-list-header', { + h('div.flex-row.tx-list-header-wrapper', { style: {}, }, [ - h('div.flex-row', { + h('div.flex-row.tx-list-header', { }, [ h('div', { diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 2dd9bf973..463a124fb 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -5,7 +5,9 @@ flex-direction: column; justify-content: flex-start; align-items: center; - margin: 0.3em 0.9em 0.8em 0.9em; + margin: 0.3em 0.9em 0em 0.9em; + height: 80vh; + max-height: 225px; } @media screen and (min-width: $break-large) { diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 41543c347..02409fb3e 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -1,23 +1,54 @@ -.tx-list-header { - margin: 1.8em 1.3em 1.8em 1.3em; +.tx-list-container { + height: 87.5%; + @media screen and (min-width: $break-large) { + overflow-y: scroll; + } +} + +@media screen and (max-width: $break-small) { + .tx-list-header-wrapper { + margin-top: 1em; + margin-bottom: 1.4em; + justify-content: center; + } + + .tx-list-header { + align-self: center; + font-size: 12px; + color: $dusty-gray; + } +} + +@media screen and (min-width: $break-large) { + .tx-list-header-wrapper { + flex: 0 0 55px; + } + + .tx-list-header { + font-size: 16px; + margin: 1.8em 1.3em 1.8em 1.3em; + } } .tx-list-content-divider { - margin: 0.1em 1.3em 0.1em 1.3em; height: 1px; background: rgb(231, 231, 231); flex: 0 0 1px; -} -.tx-list-container { - height: 87.5%; - overflow-y: scroll; + @media screen and (max-width: $break-small) { + margin: 0.1em 0em 0.1em 0em; + } + + @media screen and (min-width: $break-large) { + margin: 0.1em 1.3em 0.1em 1.3em; + } } .tx-list-item-wrapper { flex: 0 0 70px; align-items: stretch; justify-content: flex-start; + @media screen and (max-width: $break-small) { margin: 0em 1.3em 0.95em 1.3em; } @@ -31,6 +62,7 @@ flex-grow: 1; flex-shrink: 1; flex-basis: auto; + @media screen and (max-width: $break-small) { margin-top: 6px; margin-bottom: 20px;