diff --git a/packages/webapp/src/containers/Accounts/utils.tsx b/packages/webapp/src/containers/Accounts/utils.tsx index a0b4aaaf7..8b7f28e1e 100644 --- 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, }, diff --git a/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx b/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx index 0de0a69b5..9ab8c82fa 100644 --- 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', diff --git a/packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx b/packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx index cac65ea92..8366dbdf8 100644 --- 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, }, diff --git a/packages/webapp/src/containers/Items/components.tsx b/packages/webapp/src/containers/Items/components.tsx index 0a06e7408..cffcc75a3 100644 --- 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, diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx index 5bdb11d26..4e8dcfd16 100644 --- 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, }, diff --git a/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx b/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx index c6eb396e6..99aa089df 100644 --- 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, }, diff --git a/packages/webapp/src/style/components/DataTable/DataTable.scss b/packages/webapp/src/style/components/DataTable/DataTable.scss index 54a5a2a12..96a07454f 100644 --- 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;