feat: Datatable UI improvements

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,
       },

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',

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,
       },

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,

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,
       },

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,
       },

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;