feat: optimize style of invoice details.

feat: optimize style of credit note details.
feat: optimize global style checkbox  of the application.

src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from 'components';
+
+import { useTransactionsByReference } from 'hooks/query';
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Invoice GL entries table.
+ * @returns {React.JSX}
+ */
+export default function InvoiceGLEntriesTable() {
+  const { invoiceId } = useInvoiceDetailDrawerContext();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: invoiceId,
+      reference_type: 'SaleInvoice',
+    },
+    { enabled: !!invoiceId },
+  );
+
+  return (
+    <InvoiceGLEntriesRoot>
+      <AmountDisplayedBaseCurrencyMessage />
+      <InvoiceGLEntriesDatatable
+        loading={isTransactionLoading}
+        transactions={transactions}
+      />
+    </InvoiceGLEntriesRoot>
+  );
+}
+
+const InvoiceGLEntriesDatatable = styled(JournalEntriesTable)`
+  .table .tbody .tr:last-child .td {
+    border-bottom: 0;
+  }
+`;
+
+const InvoiceGLEntriesRoot = styled(Card)`
+  padding: 15px;
+`;