Transaction history improvements - visual improvements

react/src/components/dashboard/main/dashboard.scss

@@ -147,4 +147,22 @@
 
 .ReactTable .rt-tfoot .rt-td {
   text-align: center;
+}
+
+.ReactTable .rt-thead .rt-th.-sort-asc,
+.ReactTable .rt-thead .rt-td.-sort-asc,
+.ReactTable .rt-thead .rt-th.-sort-desc,
+.ReactTable .rt-thead .rt-td.-sort-desc{
+  box-shadow: none;
+}
+
+.ReactTable .rt-thead .rt-th.-sort-asc div:nth-child(1):after {
+  font-family: FontAwesome;
+  padding-left: 5px;
+  content: "\f106";
+}
+.ReactTable .rt-thead .rt-th.-sort-desc div:nth-child(1):after {
+  font-family: FontAwesome;
+  padding-left: 5px;
+  content: "\f107";
 }

react/src/components/dashboard/walletsData/pagination.render.js

@@ -50,7 +50,6 @@ const PaginationRender = function() {
                   type={this.state.page === '' ? 'text' : 'number'}
                   onChange={e => {
                     const val = e.target.value;
-                    console.error('onchange', val);
                     this.changePage(val - 1);
                   }}
                   value={this.state.page === '' ? '' : this.state.page + 1}

react/src/components/dashboard/walletsData/walletsData.js

@@ -23,6 +23,7 @@ import {
   AddressTypeRender,
   TransactionDetailRender,
   AddressItemRender,
+  TxTypeRender,
   TxHistoryListRender,
   AddressListRender,
   WalletsDataRender
@@ -97,7 +98,7 @@ class WalletsData extends React.Component {
         id: 'direction',
         Header: translate('INDEX.DIRECTION'),
         Footer: translate('INDEX.DIRECTION'),
-        accessor: (tx) => this.renderTxType(tx.category || tx.type)
+        accessor: (tx) => TxTypeRender.call(this, tx.category || tx.type)
       },
       {
         Header: translate('INDEX.CONFIRMATIONS'),
@@ -308,46 +309,6 @@ class WalletsData extends React.Component {
     });
   }
 
-  renderTxType(category) {
-    if (category === 'send' ||
-        category === 'sent') {
-      return (
-        <span className="label label-danger">
-          <i className="icon fa-arrow-circle-left"></i> <span>{ translate('DASHBOARD.OUT') }</span>
-        </span>
-      );
-    }
-    if (category === 'receive' ||
-        category === 'received') {
-      return (
-        <span className="label label-success">
-          <i className="icon fa-arrow-circle-right"></i> <span>{ translate('DASHBOARD.IN') }</span>
-        </span>
-      );
-    }
-    if (category === 'generate') {
-      return (
-        <span>
-          <i className="icon fa-cogs"></i> <span>{ translate('DASHBOARD.MINED') }</span>
-        </span>
-      );
-    }
-    if (category === 'immature') {
-      return (
-        <span>
-          <i className="icon fa-clock-o"></i> <span>{ translate('DASHBOARD.IMMATURE') }</span>
-        </span>
-      );
-    }
-    if (category === 'unknown') {
-      return (
-        <span>
-          <i className="icon fa-meh-o"></i> <span>{ translate('DASHBOARD.UNKNOWN') }</span>
-        </span>
-      );
-    }
-  }
-
   isFullySynced() {
     if (this.props.Dashboard.progress &&
         (Number(this.props.Dashboard.progress.balances) +

react/src/components/dashboard/walletsData/walletsData.render.js

@@ -67,6 +67,46 @@ export const AddressListRender = function() {
   );
 };
 
+export const TxTypeRender = function(category) {
+  if (category === 'send' ||
+    category === 'sent') {
+    return (
+      <span className="label label-danger">
+          <i className="icon fa-arrow-circle-left"></i> <span>{ translate('DASHBOARD.OUT') }</span>
+        </span>
+    );
+  }
+  if (category === 'receive' ||
+    category === 'received') {
+    return (
+      <span className="label label-success">
+          <i className="icon fa-arrow-circle-right"></i> <span>{ translate('DASHBOARD.IN') }</span>
+        </span>
+    );
+  }
+  if (category === 'generate') {
+    return (
+      <span>
+          <i className="icon fa-cogs"></i> <span>{ translate('DASHBOARD.MINED') }</span>
+        </span>
+    );
+  }
+  if (category === 'immature') {
+    return (
+      <span>
+          <i className="icon fa-clock-o"></i> <span>{ translate('DASHBOARD.IMMATURE') }</span>
+        </span>
+    );
+  }
+  if (category === 'unknown') {
+    return (
+      <span>
+          <i className="icon fa-meh-o"></i> <span>{ translate('DASHBOARD.UNKNOWN') }</span>
+        </span>
+    );
+  }
+};
+
 export const TxHistoryListRender = function() {
   return (
     <ReactTable
@@ -76,6 +116,7 @@ export const TxHistoryListRender = function() {
       filterable={true}
       className='-striped -highlight'
       PaginationComponent={TablePaginationRenderer}
+      showPaginationTop={true}
       nextText={translate('INDEX.NEXT_PAGE')}
       previousText={translate('INDEX.PREVIOUS_PAGE')}
     />