diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 50e328dac..84cd0f093 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -36,16 +36,15 @@ TxList.prototype.componentWillMount = function () { } TxList.prototype.render = function () { - return h('div.flex-column.tx-list-container', {}, [ - + return h('div.flex-column', [ h('div.flex-row.tx-list-header-wrapper', [ h('div.flex-row.tx-list-header', [ h('div', 'transactions'), ]), ]), - - this.renderTransaction(), - + h('div.flex-column.tx-list-container', {}, [ + this.renderTransaction(), + ]), ]) } diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index e75a827f9..255f66e66 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -2,13 +2,15 @@ position: relative; align-items: center; font-family: Roboto; - flex: 0 0 auto; + flex: 1 0 auto; flex-flow: column nowrap; box-shadow: 0 2px 4px 0 rgba($black, .08); border-radius: 8px; + display: flex; @media screen and (max-width: 575px) { width: 100%; + box-shadow: initial; } @media screen and (min-width: 576px) { @@ -272,8 +274,8 @@ section .confirm-screen-account-number, } .confirm-screen-confirm-button { - height: 62px; - border-radius: 2px; + height: 50px; + border-radius: 4px; background-color: #02c9b1; font-size: 16px; color: $white; @@ -285,11 +287,11 @@ section .confirm-screen-account-number, box-shadow: none; flex: 1 0 auto; font-weight: 300; - margin: 0 8px; + margin: 0 5px; } .btn-light.confirm-screen-cancel-button { - height: 62px; + height: 50px; background: none; border: none; opacity: 1; @@ -298,12 +300,11 @@ section .confirm-screen-account-number, padding-top: 15px; padding-bottom: 15px; font-size: 16px; - line-height: 32px; box-shadow: none; cursor: pointer; flex: 1 0 auto; font-weight: 300; - margin: 0 8px; + margin: 0 5px; } #pending-tx-form { @@ -312,7 +313,7 @@ section .confirm-screen-account-number, display: flex; flex-flow: row nowrap; background-color: $white; - padding: 12px 18px; + padding: 12px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; width: 100%; diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 99fd2a96d..ccc9a0118 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -17,6 +17,7 @@ justify-content: flex-start; align-items: center; margin: 2.3em 2.37em .8em; + flex: 0 0 auto; } .balance-container { diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 19dadc69a..29001a842 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -6,6 +6,10 @@ } } +.tx-list-header-wrapper { + flex: 0 0 auto; +} + .tx-list-header { text-transform: capitalize; }