Implement widescreen layout for tx list

ui/app/components/tx-list.js

@@ -21,7 +21,7 @@ function TxList () {
   Component.call(this)
 }
 
-const contentDivider = h('div', {
+const contentDivider = h('div.tx-list-content-divider', {
   style: {
     marginLeft: '1.3em',
     marginRight: '1.3em',
@@ -38,13 +38,10 @@ TxList.prototype.render = function () {
 
   return h('div.flex-column.tx-list-container', {}, [
 
-    h('div.flex-row.tx-list', {
-      style: {
-        margin: '1.8em 0.9em 0.8em 0.9em',
-      },
+    h('div.flex-row.tx-list-header', {
+      style: {},
     }, [
 
-      // tx-view-tab.js
       h('div.flex-row', {
       }, [
 
@@ -53,6 +50,7 @@ TxList.prototype.render = function () {
         }, 'TRANSACTIONS'),
 
       ]),
+
     ]),
 
     contentDivider,
@@ -61,41 +59,41 @@ TxList.prototype.render = function () {
 
     contentDivider,
 
-    // this.renderTransactionListItem(),
+    this.renderTransactionListItem(),
 
-    // contentDivider,
+    contentDivider,
 
-    // this.renderTransactionListItem(),
+    this.renderTransactionListItem(),
 
-    // contentDivider,
+    contentDivider,
 
-    // this.renderTransactionListItem(),
+    this.renderTransactionListItem(),
 
-    // contentDivider,
+    contentDivider,
 
-    // this.renderTransactionListItem(),
+    this.renderTransactionListItem(),
 
-    // contentDivider,
+    contentDivider,
 
-    // this.renderTransactionListItem(),
+    this.renderTransactionListItem(),
 
-    // contentDivider,
+    contentDivider,
 
-    // this.renderTransactionListItem(),
+    this.renderTransactionListItem(),
 
-    // contentDivider,
+    contentDivider,
 
-    // this.renderTransactionListItem(),
+    this.renderTransactionListItem(),
 
-    // contentDivider,
+    contentDivider,
 
-    // this.renderTransactionListItem(),
+    this.renderTransactionListItem(),
 
-    // contentDivider,
+    contentDivider,
 
-    // this.renderTransactionListItem(),
+    this.renderTransactionListItem(),
 
-    // contentDivider,
+    contentDivider,
 
   ])
 }
@@ -106,7 +104,7 @@ TxList.prototype.renderTransactionListItem = function () {
     dateString: 'Jul 01, 2017',
     address: '0x82df11beb942beeed58d466fcb0f0791365c7684',
     transactionStatus: 'Confirmed',
-    transactionAmount: '3'
+    transactionAmount: '+ 3 ETH'
   }
 
   const { address, transactionStatus, transactionAmount, dateString } = props
@@ -132,14 +130,14 @@ TxList.prototype.renderTransactionListItem = function () {
       }, [
         h(Identicon, {
           address,
-          diameter: 18,
+          diameter: 24,
         })
       ]),
 
       h('div.tx-list-account-wrapper', {
         style: {}
       }, [
-        h('span', {}, [
+        h('span.tx-list-account', {}, [
           '0x82df11be...7684', //address
         ]),
       ]),
@@ -156,12 +154,12 @@ TxList.prototype.renderTransactionListItem = function () {
         style: {}
       }, [
 
-        h('span', {}, [
+        h('span.tx-list-value', {}, [
           transactionAmount,
         ]),
 
-        h('span', {}, [
-          '300 USD',
+        h('span.tx-list-fiat-value', {}, [
+          '+ $300 USD',
         ]),
 
       ]),

ui/app/css/itcss/components/index.scss

@@ -6,4 +6,5 @@
 @import './modal.scss';
 @import './newui-sections.scss';
 @import './hero-balance.scss';
+@import './transaction-list.scss';
 @import './sections.scss';

ui/app/css/itcss/components/transaction-list.scss

@@ -1,44 +1,77 @@
+.tx-list-header {
+  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;
+}
+
 .tx-list-item-wrapper {
+  flex: 0 0 70px;
   align-items: stretch;
-  justify-content: 'flex-start',
-  margin: '0.6em 1.3em 0.6em 1.3em',
-  overflow: 'scroll',
+  justify-content: flex-start;
+  margin: 0em 1.3em 0em 1.3em;
 }
 
 .tx-list-date-wrapper {
   flex-grow: 1;
   flex-shrink: 1;
-  flex-basis: 'auto';
-  margin-top: '0.3em';
+  flex-basis: auto;
+  margin-top: 6px;
 }
 
 .tx-list-content-wrapper {
-  alignItems: 'stretch';
+  align-items: stretch;
+  margin-bottom: 8px;
 }
 
 .tx-list-date {
   color: $dusty-gray;
-  font-size: 8px;
+  font-size: 14px;
 }
 
 .tx-list-identicon-wrapper {
+  align-self: center;
   flex: 1 1 auto;
+  margin-left: 3px;
 }
 
 .tx-list-account-wrapper {
   flex: 3 3 auto;
-  font-size: 12px;
+  align-self: center;
+}
+
+.tx-list-account {
+  font-size: 16px;
 }
 
 .tx-list-status-wrapper {
+  align-self: center;
   flex: 5 5 auto;
 }
 
 .tx-list-status {
   color: $dusty-gray;
-  font-size: 12px;
+  font-size: 16px;
 }
 
 .tx-list-details-wrapper {
+  align-self: center;
   flex: 2 2 auto;
+}
+
+.tx-list-value {
+  font-size: 16px;
+}
+
+.tx-list-fiat-value {
+  font-size: 12px;
 }

ui/app/css/itcss/settings/variables.scss

@@ -12,7 +12,7 @@ $alabaster: #F7F7F7;
 $shark: #22232C;
 $wild-sand: #F6F6F6;
 $white: #FFFFFF;
-$dusty-gray: #9B9B9B
+$dusty-gray: #9B9B9B;
 
 // Z Indicies - Planned
 $dropdown-z: 30;