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

5 files changed, 76 insertions, 51 deletions

diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index c63284b7e..bd7d77c48 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -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-status-wrapper', {
-          style: {},
-        }, [
-          h('span.tx-list-status', {}, [
-            transactionStatus,
+        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.flex-column.tx-list-details-wrapper', {
-        style: {},
-      }, [
+        h('div.flex-column.tx-list-details-wrapper', {
+          style: {}
+        }, [
 
-        h('span.tx-list-value', {}, [
-          transactionAmount,
-        ]),
+          h('span.tx-list-value', {}, [
+            transactionAmount,
+          ]),
+
+          h('span.tx-list-fiat-value', {}, [
+            '+ $300 USD',
+          ]),
 
-        h('span.tx-list-fiat-value', {}, [
-          '+ $300 USD',
         ]),
 
       ]),
     ]),
+    contentDivider
+
   ])
 }
 
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index eaaf99b80..81dcde5a9 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -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) {
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index 9ac506714..f7b3cc3e5 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -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 {
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index a140eb0f6..aa874caf5 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -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
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index 69a7e6718..8dca35a17 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -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;
   }
 }