fix: style of vendor/customer balance summary.

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
 import { DataTable, FinancialSheet } from 'components';
 
 import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
 import { useCustomersSummaryColumns } from './components';
 
+import { TableStyle } from 'common';
 import { tableRowTypesToClassnames } from 'utils';
 
 /**
- * customers balance summary table.
+ * Customers balance summary table.
  */
 export default function CustomersBalanceSummaryTable({
   // #ownProps
@@ -27,12 +29,36 @@ export default function CustomersBalanceSummaryTable({
       sheetType={intl.get('customers_balance_summary')}
       asDate={new Date()}
     >
-      <DataTable
+      <CustomerBalanceDataTable
         columns={columns}
         data={table.data}
         rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
+        styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );
 }
+
+const CustomerBalanceDataTable = styled(DataTable)`
+  .table {
+    .tbody {
+      .tr:not(.no-results) {
+        .td {
+          border-bottom: 0;
+          padding-top: 0.4rem;
+          padding-bottom: 0.4rem;
+        }
+
+        &.row_type--TOTAL {
+          font-weight: 500;
+
+          .td {
+            border-top: 1px solid #bbb;
+            border-bottom: 3px double #333;
+          }
+        }
+      }
+    }
+  }
+`;