Fix tx-list, confirmation screen styling

4 files changed, 18 insertions, 13 deletions

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