diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js index edcdf6fa3..7378a1a12 100644 --- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js +++ b/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)``; diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js index a627bc2f5..337d61192 100644 --- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js +++ b/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() { - + - + @@ -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; +`;