Move Txs list item styles into classes

ui/app/components/tx-list.js

@@ -111,69 +111,49 @@ TxList.prototype.renderTransactionListItem = function () {
 
   const { address, transactionStatus, transactionAmount, dateString } = props
 
-  return h('div.flex-column', {
+  return h('div.flex-column.tx-list-item-wrapper', {
-    style: {
+    style: {}
-      alignItems: 'stretch',
-      justifyContent: 'flex-start',
-      margin: '0.6em 1.3em 0.6em 1.3em',
-      overflow: 'none'
-    }
   }, [
 
-    h('div', {
+    h('div.tx-list-date-wrapper', {
-      style: {
+      style: {}
-        flexGrow: 1,
-        flexShrink: 1,
-        flexBasis: 'auto',
-        marginTop: '0.3em',
-      }
     }, [
-      h('span', {}, [
+      h('span.tx-list-date', {}, [
         dateString,
       ])
     ]),
 
-    h('div.flex-row', {
+    h('div.flex-row.tx-list-content-wrapper', {
-      style: {
+      style: {}
-        alignItems: 'stretch',
-      }
     }, [
 
-      h('div', {
+      h('div.tx-list-identicon-wrapper', {
-        style: {
+        style: {}
-          flexGrow: 1,
-        }
       }, [
         h(Identicon, {
           address,
-          diameter: 24,
+          diameter: 18,
         })
       ]),
 
-      h('div', {
+      h('div.tx-list-account-wrapper', {
-        style: {
+        style: {}
-          flexGrow: 3,
-        }
       }, [
         h('span', {}, [
           '0x82df11be...7684', //address
         ]),
       ]),
 
-      h('div', {
+      h('div.tx-list-status-wrapper', {
-        style: {
+        style: {}
-          flexGrow: 5,
-        }
       }, [
-        h('span', {}, [
+        h('span.tx-list-status', {}, [
           transactionStatus,
         ]),
       ]),
 
-      h('div.flex-column', {
+      h('div.flex-column.tx-list-details-wrapper', {
-        style: {
+        style: {}
-          flexGrow: 2,
-        }
       }, [
 
         h('span', {}, [

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

@@ -0,0 +1,44 @@
+.tx-list-item-wrapper {
+  align-items: stretch;
+  justify-content: 'flex-start',
+  margin: '0.6em 1.3em 0.6em 1.3em',
+  overflow: 'scroll',
+}
+
+.tx-list-date-wrapper {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 'auto';
+  margin-top: '0.3em';
+}
+
+.tx-list-content-wrapper {
+  alignItems: 'stretch';
+}
+
+.tx-list-date {
+  color: $dusty-gray;
+  font-size: 8px;
+}
+
+.tx-list-identicon-wrapper {
+  flex: 1 1 auto;
+}
+
+.tx-list-account-wrapper {
+  flex: 3 3 auto;
+  font-size: 12px;
+}
+
+.tx-list-status-wrapper {
+  flex: 5 5 auto;
+}
+
+.tx-list-status {
+  color: $dusty-gray;
+  font-size: 12px;
+}
+
+.tx-list-details-wrapper {
+  flex: 2 2 auto;
+}