feat: optimize landed cost entries table style.

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js

@@ -1,7 +1,10 @@
 import React from 'react';
-import intl from 'react-intl-universal';
+import styled from 'styled-components';
-import { MoneyFieldCell, DataTableEditable } from 'components';
+
+import { DataTableEditable } from 'components';
+
 import { compose, updateTableCell } from 'utils';
+import { useAllocateLandedCostEntriesTableColumns } from './utils';
 
 /**
  * Allocate landed cost entries table.
@@ -11,42 +14,7 @@ export default function AllocateLandedCostEntriesTable({
   entries,
 }) {
   // Allocate landed cost entries table columns.
-  const columns = React.useMemo(
+  const columns = useAllocateLandedCostEntriesTableColumns();
-    () => [
-      {
-        Header: intl.get('item'),
-        accessor: 'item.name',
-        disableSortBy: true,
-        width: '150',
-      },
-      {
-        Header: intl.get('quantity'),
-        accessor: 'quantity',
-        disableSortBy: true,
-        width: '100',
-      },
-      {
-        Header: intl.get('rate'),
-        accessor: 'rate',
-        disableSortBy: true,
-        width: '100',
-      },
-      {
-        Header: intl.get('amount'),
-        accessor: 'amount',
-        disableSortBy: true,
-        width: '100',
-      },
-      {
-        Header: intl.get('cost'),
-        accessor: 'cost',
-        width: '150',
-        Cell: MoneyFieldCell,
-        disableSortBy: true,
-      },
-    ],
-    [],
-  );
 
   // Handle update data.
   const handleUpdateData = React.useCallback(
@@ -60,7 +28,7 @@ export default function AllocateLandedCostEntriesTable({
   );
 
   return (
-    <DataTableEditable
+    <AllocateLandeedCostEntriesEditableTable
       columns={columns}
       data={entries}
       payload={{
@@ -70,3 +38,18 @@ export default function AllocateLandedCostEntriesTable({
     />
   );
 }
+
+export const AllocateLandeedCostEntriesEditableTable = styled(
+  DataTableEditable,
+)`
+  .table {
+    .thead .tr .th {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+
+    .tbody .tr .td {
+      padding: 0.25rem;
+    }
+  }
+`;

src/containers/Dialogs/AllocateLandedCostDialog/utils.js

@@ -1,5 +1,10 @@
+import React from 'react';
 import { sumBy, round } from 'lodash';
 import * as R from 'ramda';
+import intl from 'react-intl-universal';
+
+import { MoneyFieldCell } from 'components';
+
 /**
  * Retrieve transaction entries of the given transaction id.
  */
@@ -60,3 +65,45 @@ export function allocateCostByQuantity(total, entries) {
     cost: round(entry.percentageOfQuantity * total, 2),
   }));
 }
+
+/**
+ * Retrieves allocate landed cost entries table columns.
+ */
+export const useAllocateLandedCostEntriesTableColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('item'),
+        accessor: 'item.name',
+        disableSortBy: true,
+        width: '150',
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('cost'),
+        accessor: 'cost',
+        width: '150',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );
+};