feat: cashflow account transactions.

src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js

@@ -30,11 +30,8 @@ function AccountTransactionsDataTable({
   const columns = useAccountTransactionsColumns();
 
   // Retrieve list context.
-  const {
-    cashflowTransactions,
-    isCashFlowTransactionsFetching,
-    isCashFlowTransactionsLoading,
-  } = useAccountTransactionsContext();
+  const { cashflowTransactions, isCashFlowTransactionsLoading } =
+    useAccountTransactionsContext();
 
   // Local storage memorizing columns widths.
   const [initialColumnsWidths, , handleColumnResizing] =
@@ -85,28 +82,39 @@ export default compose(
 )(AccountTransactionsDataTable);
 
 const DashboardConstrantTable = styled(DataTable)`
-  .table .thead {
-    .th {
-      border-bottom-color: #666;
-      border-top-color: #666;
-      background: #fff;
+  .table {
+    .thead {
+      .th {
+        background: #fff;
+      }
     }
-  }
-`;
 
-const CashflowTransactionsTable = styled(DashboardConstrantTable)`
-  .table .tbody {
-    
-    .tbody-inner .tr.no-results {
-      .td {
-        padding: 3rem 0;
-        font-size: 16px;
-        color: #888;
-        font-weight: 400;
+    .tbody {
+      .tr:last-child .td {
         border-bottom: 0;
       }
     }
   }
 `;
 
+const CashflowTransactionsTable = styled(DashboardConstrantTable)`
+  .table .tbody {
+    .tbody-inner .tr.no-results {
+      .td {
+        padding: 2rem 0;
+        font-size: 14px;
+        color: #888;
+        font-weight: 400;
+        border-bottom: 0;
+      }
+    }
+
+    .tbody-inner {
+      .tr .td:not(:first-child) {
+        border-left: 1px solid #e6e6e6;
+      }
+    }
+  }
+`;
+
 const DashboardRegularTable = styled(DataTable)``;

src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import 'style/pages/CashFlow/AccountTransactions/List.scss';
 
@@ -22,9 +23,9 @@ function AccountTransactionsList() {
       <AccountTransactionsProgressBar />
 
       <DashboardPageContent>
-        <DashboardContentTable>
+        <CashflowTransactionsTableCard>
           <AccountTransactionsDataTable />
-        </DashboardContentTable>
+        </CashflowTransactionsTableCard>
       </DashboardPageContent>
       <AccountTransactionsAlerts />
     </AccountTransactionsProvider>
@@ -32,3 +33,12 @@ function AccountTransactionsList() {
 }
 
 export default AccountTransactionsList;
+
+const CashflowTransactionsTableCard = styled.div`
+  border: 2px solid #f0f0f0;
+  border-radius: 10px;
+  padding: 30px 18px;
+  margin: 30px 15px;
+  background: #fff;
+  flex: 0 1;
+`;