feat: Datatable UI improvements

2026-02-18 22:00:31 +00:00 · 2024-09-03 16:39:13 +02:00
parent 0c6f23e770
commit 1b51742c36
7 changed files with 22 additions and 16 deletions
--- a/packages/webapp/src/containers/Accounts/utils.tsx
+++ b/packages/webapp/src/containers/Accounts/utils.tsx
@@ -1,7 +1,8 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Intent, Tag } from '@blueprintjs/core';
+import { Intent, Tag, Classes } from '@blueprintjs/core';
+import clsx from 'classnames';

 import { If, AppToaster } from '@/components';
 import { NormalCell, BalanceCell, BankBalanceCell } from './components';
@@ -73,7 +74,7 @@ export const useAccountsTableColumns = () => {
        id: 'type',
        Header: intl.get('type'),
        accessor: 'account_type_label',
-        className: 'type',
+        className: clsx('type', Classes.TEXT_MUTED),
        width: 140,
        clickable: true,
        textOverview: true,
@@ -91,6 +92,7 @@ export const useAccountsTableColumns = () => {
        id: 'currency',
        Header: intl.get('currency'),
        accessor: 'currency_code',
+        className: clsx(Classes.TEXT_MUTED),
        width: 75,
        clickable: true,
      },
--- a/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx
+++ b/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx
@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
+import clsx from 'classnames';
 import {
  Menu,
  MenuItem,
@@ -14,6 +15,7 @@ import {
 import { Can, Icon, Money, If, AvatarCell } from '@/components';
 import { CustomerAction, AbilitySubject } from '@/constants/abilityOption';
 import { safeCallback } from '@/utils';
+import { CLASSES } from '@/constants';

 /**
 * Actions menu.
@@ -140,7 +142,7 @@ export function useCustomersTableColumns() {
        id: 'company_name',
        Header: intl.get('company_name'),
        accessor: 'company_name',
-        className: 'company_name',
+        className: clsx('company_name', CLASSES.TEXT_MUTED),
        width: 150,
        clickable: true,
      },
@@ -148,9 +150,9 @@ export function useCustomersTableColumns() {
        id: 'work_phone',
        Header: intl.get('phone_number'),
        accessor: PhoneNumberAccessor,
-        className: 'phone_number',
        width: 100,
        clickable: true,
+        className: clsx('phone_number', CLASSES.TEXT_MUTED)
      },
      {
        id: 'note',
@@ -159,6 +161,7 @@ export function useCustomersTableColumns() {
        disableSortBy: true,
        width: 85,
        clickable: true,
+        className: clsx(CLASSES.TEXT_MUTED)
      },
      {
        id: 'balance',
--- a/packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx
@@ -140,7 +140,6 @@ export function useExpensesTableColumns() {
        id: 'amount',
        Header: intl.get('full_amount'),
        accessor: 'formatted_amount',
-        className: 'amount',
        align: 'right',
        width: 150,
        clickable: true,
@@ -150,16 +149,15 @@ export function useExpensesTableColumns() {
        id: 'payment_account',
        Header: intl.get('payment_account'),
        accessor: 'payment_account.name',
-        className: 'payment_account',
        width: 150,
        clickable: true,
+        className: clsx(CLASSES.TEXT_MUTED),
      },
      {
        id: 'expense_account',
        Header: intl.get('expense_account'),
        accessor: ExpenseAccountAccessor,
        width: 160,
-        className: 'expense_account',
        disableSortBy: true,
        clickable: true,
      },
--- a/packages/webapp/src/containers/Items/components.tsx
+++ b/packages/webapp/src/containers/Items/components.tsx
@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
+import clsx from 'classnames';
 import { isNumber } from 'lodash';
 import {
  Menu,
@@ -11,6 +12,7 @@ import {
  Position,
  Button,
  Popover,
+  Classes,
 } from '@blueprintjs/core';
 import { FormattedMessage as T, Icon, Money, If, Can } from '@/components';
 import { isBlank, safeCallback } from '@/utils';
@@ -182,7 +184,7 @@ export const useItemsTableColumns = () => {
        id: 'code',
        Header: intl.get('item_code'),
        accessor: 'code',
-        className: 'code',
+        className: clsx(Classes.TEXT_MUTED),
        width: 120,
        clickable: true,
      },
@@ -198,7 +200,7 @@ export const useItemsTableColumns = () => {
        id: 'category',
        Header: intl.get('category'),
        accessor: 'category.name',
-        className: 'category',
+        className: clsx(Classes.TEXT_MUTED),
        width: 150,
        clickable: true,
        textOverview: true,
--- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx
@@ -229,7 +229,6 @@ export function useInvoicesTableColumns() {
        Header: intl.get('invoice_no__'),
        accessor: 'invoice_no',
        width: 100,
-        className: 'invoice_no',
        clickable: true,
        textOverview: true,
      },
@@ -266,7 +265,6 @@ export function useInvoicesTableColumns() {
        Header: intl.get('reference_no'),
        accessor: 'reference_no',
        width: 90,
-        className: 'reference_no',
        clickable: true,
        textOverview: true,
      },
--- a/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx
@@ -12,6 +12,7 @@ import {
  Intent,
  Classes,
 } from '@blueprintjs/core';
+import clsx from 'classnames';

 import { Can, Icon, Money, If, AvatarCell } from '@/components';
 import { VendorAction, AbilitySubject } from '@/constants/abilityOption';
@@ -163,7 +164,7 @@ export function useVendorsTableColumns() {
        id: 'company_name',
        Header: intl.get('company_name'),
        accessor: 'company_name',
-        className: 'company_name',
+        className: clsx(Classes.TEXT_MUTED),
        width: 150,
        clickable: true,
      },
@@ -171,7 +172,7 @@ export function useVendorsTableColumns() {
        id: 'work_phone',
        Header: intl.get('phone_number'),
        accessor: PhoneNumberAccessor,
-        className: 'work_phone',
+        className: clsx(Classes.TEXT_MUTED),
        width: 100,
        clickable: true,
      },
@@ -180,6 +181,7 @@ export function useVendorsTableColumns() {
        Header: intl.get('note'),
        accessor: NoteAccessor,
        disableSortBy: true,
+        className: clsx(Classes.TEXT_MUTED),
        width: 85,
        clickable: true,
      },
--- a/packages/webapp/src/style/components/DataTable/DataTable.scss
+++ b/packages/webapp/src/style/components/DataTable/DataTable.scss
@@ -8,6 +8,7 @@
    border-spacing: 0;
    min-width: 100%;
    display: block;
+    color: #101219;

    .thead .thead-inner,
    .tbody .tbody-inner {
@@ -21,7 +22,7 @@
        padding: 0.68rem 0.5rem;
        background: #f5f5f5;
        font-size: 14px;
-        color: #4E5B6F;
+        color: #424853;
        font-weight: 400;
        border-bottom: 1px solid #d2dde2;

@@ -180,9 +181,9 @@
      }

      .tr .td {
-        border-bottom: 1px solid #e0e0e0;
+        border-bottom: 1px solid #ececec;
        align-items: center;
-        color: #101219;
+        

        .placeholder {
          color: #a0a0a0;