Add UI tweaks, including separation of overflow logic for mobile (full-height) vs laptop (tx-view-only)

3 files changed, 45 insertions, 16 deletions

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;