ui - redesign - trans group + + account detail + tx list fixes

2 files changed, 56 insertions, 41 deletions

diff --git a/ui/app/components/panel.js b/ui/app/components/panel.js
index 2f5a3715d..5d72d6068 100644
--- a/ui/app/components/panel.js
+++ b/ui/app/components/panel.js
@@ -18,12 +18,15 @@ Panel.prototype.render = function() {
   var identity = state.identity || {}
   var account = state.account || {}
   var isFauceting = state.isFauceting
+  var style = {
+    flex: '1 0 auto',
+  }
+
+  if (state.onClick) style.cursor = 'pointer'
 
   return (
     h('.identity-panel.flex-row.flex-space-between', {
-      style: {
-        flex: '1 0 auto',
-      },
+      style,
       onClick: state.onClick,
     }, [
 
@@ -42,7 +45,7 @@ Panel.prototype.render = function() {
           return h('.flex-row.flex-space-between', {
             key: '' + Math.round(Math.random() * 1000000),
           }, [
-            h('label.font-small', attr.key),
+            h('label.font-small.no-select', attr.key),
             h('span.font-small', attr.value),
           ])
         }),
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index 0c025cae3..e10dfecf3 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -5,50 +5,62 @@ const explorerLink = require('../../lib/explorer-link')
 const Panel = require('./panel')
 
 module.exports = function(transactions, network) {
-  return h('section', [
+  return (
 
-    h('.current-domain-panel.flex-center.font-small', [
-      h('span', 'Transactions'),
-    ]),
+    h('section.transaction-list', [
 
-    h('.tx-list', {
+      h('h3.flex-center.text-transform-uppercase', {
+        style: {
+          background: '#EBEBEB',
+        },
+      }, [
+        'Transactions',
+      ]),
+
+      h('.tx-list', {
         style: {
           overflowY: 'auto',
-          height: '180px',
+          height: '204px',
+          margin: '0 20px',
           textAlign: 'center',
         },
-      },
+      }, (
 
-      [
-
-        transactions.map((transaction) => {
-
-          var panelOpts = {
-            key: `tx-${transaction.hash}`,
-            identiconKey: transaction.txParams.to,
+        transactions.length ?
+          transactions.map(renderTransaction)
+        :
+          [h('.flex-center', {
             style: {
-              cursor: 'pointer',
-            },
-            onClick: (event) => {
-              var url = explorerLink(transaction.hash, parseInt(network))
-              chrome.tabs.create({ url });
+              height: '100%',
             },
-            attributes: [
-              {
-                key: 'TO',
-                value: addressSummary(transaction.txParams.to),
-              },
-              {
-                key: 'VALUE',
-                value: formatBalance(transaction.txParams.value),
-              },
-            ]
-          }
-
-          return h(Panel, panelOpts)
-        })
-      ]
-    )
-
-  ])
+          }, 'No transaction history...')]
+
+      ))
+
+    ])
+
+  )
  }
+
+function renderTransaction(transaction){
+  var panelOpts = {
+    key: `tx-${transaction.hash}`,
+    identiconKey: transaction.txParams.to,
+    onClick: (event) => {
+      var url = explorerLink(transaction.hash, parseInt(network))
+      chrome.tabs.create({ url })
+    },
+    attributes: [
+      {
+        key: 'TO',
+        value: addressSummary(transaction.txParams.to),
+      },
+      {
+        key: 'VALUE',
+        value: formatBalance(transaction.txParams.value),
+      },
+    ]
+  }
+
+  return h(Panel, panelOpts)
+}
\ No newline at end of file