feat: tweaks in style.

client/src/components/AccountsSuggestField.js

@@ -15,7 +15,7 @@ export default function AccountsSuggestField({
   defaultSelectText = 'Select account',
   onAccountSelected,
 
-  filterByRootTypes = [],
+  filterByParentTypes = [],
   filterByTypes = [],
   filterByNormal,
   popoverFill = false,
@@ -26,24 +26,23 @@ export default function AccountsSuggestField({
   const filteredAccounts = useMemo(() => {
     let filteredAccounts = [...accounts];
 
-    if (!isEmpty(filterByRootTypes)) {
+    if (!isEmpty(filterByParentTypes)) {
       filteredAccounts = filteredAccounts.filter(
-        (account) => filterByRootTypes.indexOf(account.type.root_type) !== -1,
+        (account) => filterByParentTypes.indexOf(account.account_parent_type) !== -1,
       );
     }
     if (!isEmpty(filterByTypes)) {
       filteredAccounts = filteredAccounts.filter(
-        (account) => filterByTypes.indexOf(account.type.key) !== -1,
+        (account) => filterByTypes.indexOf(account.account_type) !== -1,
       );
     }
     if (!isEmpty(filterByNormal)) {
       filteredAccounts = filteredAccounts.filter(
-        (account) =>
-          filterByTypes.indexOf(account.type.normal) === filterByNormal,
+        (account) => filterByTypes.indexOf(account.account_normal) === filterByNormal,
       );
     }
     return filteredAccounts;
-  }, [accounts, filterByRootTypes, filterByTypes, filterByNormal]);
+  }, [accounts, filterByParentTypes, filterByTypes, filterByNormal]);
 
   // Find initial account object to set it as default account in initial render.
   const initialAccount = useMemo(

client/src/components/Datatable/TableHeader.js

@@ -4,59 +4,66 @@ import { ScrollSyncPane } from 'react-scroll-sync';
 import { If } from 'components';
 import TableContext from './TableContext';
 
-function TableHeaderGroup({ headerGroup }) {
+function TableHeaderCell({ column, index }) {
   const {
     table: { getToggleAllRowsExpandedProps, isAllRowsExpanded },
     props: { expandable, expandToggleColumn },
   } = useContext(TableContext);
 
+  return (
+    <div
+      {...column.getHeaderProps({
+        className: classNames(column.className || '', 'th'),
+      })}
+    >
+      <If condition={expandable && index + 1 === expandToggleColumn}>
+        <span {...getToggleAllRowsExpandedProps()} className="expand-toggle">
+          <span
+            className={classNames({
+              'arrow-down': isAllRowsExpanded,
+              'arrow-right': !isAllRowsExpanded,
+            })}
+          />
+        </span>
+      </If>
+
+      <div {...column.getSortByToggleProps({
+        className: classNames('cell-inner', {
+          'text-overview': column.textOverview,
+        })
+      })}>
+        {column.render('Header')}
+
+        <If condition={column.isSorted}>
+          <span
+            className={classNames(
+              {
+                'sort-icon--desc': column.isSortedDesc,
+                'sort-icon--asc': !column.isSortedDesc,
+              },
+              'sort-icon',
+            )}
+          ></span>
+        </If>
+      </div>
+
+      {column.canResize && (
+        <div
+          {...column.getResizerProps()}
+          className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
+        >
+          <div class="inner-resizer" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TableHeaderGroup({ headerGroup }) {
   return (
     <div {...headerGroup.getHeaderGroupProps()} className="tr">
       {headerGroup.headers.map((column, index) => (
-        <div
-          {...column.getHeaderProps({
-            className: classNames(column.className || '', 'th'),
-          })}
-        >
-          <If condition={expandable && index + 1 === expandToggleColumn}>
-            <span
-              {...getToggleAllRowsExpandedProps()}
-              className="expand-toggle"
-            >
-              <span
-                className={classNames({
-                  'arrow-down': isAllRowsExpanded,
-                  'arrow-right': !isAllRowsExpanded,
-                })}
-              />
-            </span>
-          </If>
-
-          <div {...column.getSortByToggleProps()}>
-            {column.render('Header')}
-
-            <If condition={column.isSorted}>
-              <span
-                className={classNames(
-                  {
-                    'sort-icon--desc': column.isSortedDesc,
-                    'sort-icon--asc': !column.isSortedDesc,
-                  },
-                  'sort-icon',
-                )}
-              ></span>
-            </If>
-          </div>
-
-          {column.canResize && (
-            <div
-              {...column.getResizerProps()}
-              className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
-            >
-              <div class="inner-resizer" />
-            </div>
-          )}
-        </div>
+        <TableHeaderCell column={column} index={index} />
       ))}
     </div>
   );