Merge pull request #602 from LiskHQ/522-transactions-tab-should-provi…

…de-message Transactions tab should provide "No transactions" message- Closes #522
LiskArchive · Aug 15, 2017 · 02ae2be · 02ae2be
2 parents 54642eb + 1ad4e33
commit 02ae2be
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/components/transactions/transactions.css b/src/components/transactions/transactions.css
@@ -4,7 +4,6 @@
     --btn: rgb(2,136,209);
 }
 
-
 .grayButton, .inButton, .outButton, .smallButton {
     background-color: #eee;
     border-radius: 3px;
@@ -19,7 +18,10 @@
 .inButton {
     background: color(var(--in) alpha(45%))!important;
 }
-
+.empty{
+    color: #777;
+    text-align: right;
+}
 .outButton {
     background: color(var(--out) alpha(45%))!important;
 }

diff --git a/src/components/transactions/transactionsComponent.js b/src/components/transactions/transactionsComponent.js
@@ -4,6 +4,7 @@ import tableStyle from 'react-toolbox/lib/table/theme.css';
 import { transactions } from '../../utils/api/account';
 import TransactionsHeader from './transactionsHeader';
 import TransactionRow from './transactionRow';
+import styles from './transactions.css';
 
 class Transactions extends React.Component {
   constructor() {
@@ -25,8 +26,9 @@ class Transactions extends React.Component {
 
   render() {
     return (
-      <div className='box'>
-        <table className={tableStyle.table}>
+      <div className='box noPaddingBox'>
+        {this.props.transactions.length > 0 ?
+          <table className={tableStyle.table}>
           <TransactionsHeader tableStyle={tableStyle}></TransactionsHeader>
           <tbody>
             {this.props.transactions.map(transaction => (
@@ -37,7 +39,9 @@ class Transactions extends React.Component {
               </TransactionRow>
             ))}
           </tbody>
-        </table>
+        </table> :
+          <p className={`${styles.empty} hasPaddingRow`}>No transactions</p>
+        }
         <Waypoint onEnter={() => { this.loadMore(); } }></Waypoint>
       </div>
     );