diff --git a/packages/webapp/src/components/Datatable/TableCell.tsx b/packages/webapp/src/components/Datatable/TableCell.tsx index 135083e7f..a1dc5c1d6 100644 --- a/packages/webapp/src/components/Datatable/TableCell.tsx +++ b/packages/webapp/src/components/Datatable/TableCell.tsx @@ -1,13 +1,14 @@ // @ts-nocheck import React, { useContext } from 'react'; import classNames from 'classnames'; -import { camelCase} from 'lodash'; +import { camelCase } from 'lodash'; import { If, Skeleton } from '@/components'; import { useAppIntlContext } from '@/components/AppIntlProvider'; import TableContext from './TableContext'; import { saveInvoke, ignoreEventFromSelectors } from '@/utils'; import { isCellLoading } from './utils'; +import { MoneyDisplay } from '../Money/MoneyDisplay'; const ROW_CLICK_SELECTORS_INGORED = ['.expand-toggle', '.selection-checkbox']; @@ -58,7 +59,7 @@ export default function TableCell({ cell, row, index }) { return; } saveInvoke(onCellClick, cell, event); - }; + }; const cellType = camelCase(cell.column.Cell.cellType) || 'text'; return ( @@ -109,7 +110,11 @@ export default function TableCell({ cell, row, index }) { - {cell.render('Cell')} + {cell.column?.money ? ( + {cell.render('Cell')} + ) : ( + <>{cell.render('Cell')} + )} ); diff --git a/packages/webapp/src/components/Money/MoneyDisplay.module.scss b/packages/webapp/src/components/Money/MoneyDisplay.module.scss new file mode 100644 index 000000000..a84032885 --- /dev/null +++ b/packages/webapp/src/components/Money/MoneyDisplay.module.scss @@ -0,0 +1,4 @@ + +.root { + font-variant-numeric: tabular-nums; +} \ No newline at end of file diff --git a/packages/webapp/src/components/Money/MoneyDisplay.tsx b/packages/webapp/src/components/Money/MoneyDisplay.tsx new file mode 100644 index 000000000..74518187a --- /dev/null +++ b/packages/webapp/src/components/Money/MoneyDisplay.tsx @@ -0,0 +1,9 @@ +import styles from './MoneyDisplay.module.scss'; + +interface MoneyDisplayProps { + children: React.ReactNode; +} + +export function MoneyDisplay({ children }: MoneyDisplayProps) { + return {children}; +} diff --git a/packages/webapp/src/containers/Accounting/JournalsLanding/utils.tsx b/packages/webapp/src/containers/Accounting/JournalsLanding/utils.tsx index ab8bfac21..add270fb4 100644 --- a/packages/webapp/src/containers/Accounting/JournalsLanding/utils.tsx +++ b/packages/webapp/src/containers/Accounting/JournalsLanding/utils.tsx @@ -27,6 +27,7 @@ export const useManualJournalsColumns = () => { accessor: 'formatted_amount', width: 115, clickable: true, + money: true, align: 'right', className: clsx(CLASSES.FONT_BOLD), }, diff --git a/packages/webapp/src/containers/Accounts/utils.tsx b/packages/webapp/src/containers/Accounts/utils.tsx index a0b4aaaf7..bed1323d3 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, }, @@ -102,6 +104,7 @@ export const useAccountsTableColumns = () => { width: 150, clickable: true, align: 'right', + money: true, }, { id: 'balance', @@ -110,6 +113,7 @@ export const useAccountsTableColumns = () => { Cell: BalanceCell, width: 150, clickable: true, + money: true, align: 'right', }, ], diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx index 34c037c14..a75376ea5 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx @@ -1,10 +1,8 @@ // @ts-nocheck import React from 'react'; -import styled from 'styled-components'; import { Intent } from '@blueprintjs/core'; import * as R from 'ramda'; import { - DataTable, TableFastCell, TableSkeletonRows, TableSkeletonHeader, @@ -17,9 +15,10 @@ import { useMemorizedColumnsWidths } from '@/hooks'; import { useExcludedTransactionsColumns } from './_utils'; import { useExcludedTransactionsBoot } from './ExcludedTransactionsTableBoot'; import { useAccountTransactionsContext } from '../AccountTransactionsProvider'; +import { useUnexcludeUncategorizedTransaction } from '@/hooks/query/bank-rules'; import { ActionsMenu } from './_components'; -import { useUnexcludeUncategorizedTransaction } from '@/hooks/query/bank-rules'; +import { BankAccountDataTable } from '../components/BankAccountDataTable'; import { WithBankingActionsProps, withBankingActions, @@ -78,7 +77,7 @@ function ExcludedTransactionsTableRoot({ }; return ( - ); } @@ -65,47 +62,3 @@ export const PendingTransactionsDataTable = compose( })), withBankingActions, )(PendingTransactionsDataTableRoot); - -const DashboardConstrantTable = styled(DataTable)` - .table { - .thead { - .th { - background: #fff; - text-transform: uppercase; - letter-spacing: 1px; - font-size: 13px;i - font-weight: 500; - } - } - - .tbody { - .tr:last-child .td { - border-bottom: 0; - } - } - } -`; - -const CashflowTransactionsTable = styled(DashboardConstrantTable)` - .table .tbody { - .tbody-inner .tr.no-results { - .td { - padding: 2rem 0; - font-size: 14px; - color: #888; - font-weight: 400; - border-bottom: 0; - } - } - - .tbody-inner { - .tr .td:not(:first-child) { - border-left: 1px solid #e6e6e6; - } - - .td-description { - color: #5f6b7c; - } - } - } -`; diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/_hooks.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/_hooks.tsx index 4863273f1..3c8f868d4 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/_hooks.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/_hooks.tsx @@ -48,6 +48,7 @@ export function usePendingTransactionsTableColumns() { textOverview: true, align: 'right', clickable: true, + money: true }, { id: 'withdrawal', @@ -58,6 +59,7 @@ export function usePendingTransactionsTableColumns() { textOverview: true, align: 'right', clickable: true, + money: true }, ], [], diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx index 979e65092..46fc69e8b 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx @@ -27,6 +27,7 @@ import { withBankingActions, } from '../../withBankingActions'; import styles from './RecognizedTransactionsTable.module.scss'; +import { BankAccountDataTable } from '../components/BankAccountDataTable'; interface RecognizedTransactionsTableProps extends WithBankingActionsProps {} @@ -83,7 +84,7 @@ function RecognizedTransactionsTableRoot({ }; return ( - } - className="table-constrant" payload={{ onExclude: handleExcludeClick, onCategorize: handleCategorizeClick, @@ -120,45 +119,6 @@ export const RecognizedTransactionsTable = compose(withBankingActions)( RecognizedTransactionsTableRoot, ); -const DashboardConstrantTable = styled(DataTable)` - .table { - .thead { - .th { - background: #fff; - letter-spacing: 1px; - text-transform: uppercase; - font-size: 13px; - } - } - - .tbody { - .tr:last-child .td { - border-bottom: 0; - } - } - } -`; - -const CashflowTransactionsTable = styled(DashboardConstrantTable)` - .table .tbody { - .tbody-inner .tr.no-results { - .td { - padding: 2rem 0; - font-size: 14px; - color: #888; - font-weight: 400; - border-bottom: 0; - } - } - - .tbody-inner { - .tr .td { - border-bottom: 1px solid #e6e6e6; - } - } - } -`; - function RecognizedTransactionsTableNoResults() { return ( diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_utils.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_utils.tsx index d734d1163..9ecfa405d 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_utils.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_utils.tsx @@ -1,7 +1,9 @@ // @ts-nocheck +import React from 'react'; +import clsx from 'classnames'; +import { Classes } from '@blueprintjs/core'; import { Group, Icon } from '@/components'; import { getColumnWidth } from '@/utils'; -import React from 'react'; import { useRecognizedTransactionsBoot } from './RecognizedTransactionsTableBoot'; const getReportColWidth = (data, accessor, headerText) => { @@ -28,10 +30,6 @@ const recognizeAccessor = (transaction) => { ); }; -const descriptionAccessor = (transaction) => { - return {transaction.description}; -}; - /** * Retrieve uncategorized transactions columns table. */ @@ -59,7 +57,8 @@ export function useUncategorizedTransactionsColumns() { }, { Header: 'Description', - accessor: descriptionAccessor, + accessor: 'description', + className: clsx(Classes.TEXT_MUTED), textOverview: true, }, { @@ -82,12 +81,14 @@ export function useUncategorizedTransactionsColumns() { accessor: 'formatted_deposit_amount', align: 'right', width: depositWidth, + money: true }, { Header: 'Withdrawal', accessor: 'formatted_withdrawal_amount', align: 'right', width: withdrawalWidth, + money: true }, ], [], diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx index 34d7be997..336c689d9 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx @@ -1,22 +1,21 @@ // @ts-nocheck import React from 'react'; import clsx from 'classnames'; -import styled from 'styled-components'; import { Intent } from '@blueprintjs/core'; import { - DataTable, TableFastCell, TableSkeletonRows, TableSkeletonHeader, TableVirtualizedListRows, - FormattedMessage as T, AppToaster, } from '@/components'; import { TABLES } from '@/constants/tables'; import { ActionsMenu } from './components'; +import { BankAccountDataTable } from '../components/BankAccountDataTable'; import withSettings from '@/containers/Settings/withSettings'; import { withBankingActions } from '../../withBankingActions'; +import { withBanking } from '../../withBanking'; import { useMemorizedColumnsWidths } from '@/hooks'; import { useAccountUncategorizedTransactionsContext } from '../AllTransactionsUncategorizedBoot'; @@ -25,7 +24,6 @@ import { useAccountUncategorizedTransactionsColumns } from './hooks'; import { useAccountTransactionsContext } from '../AccountTransactionsProvider'; import { compose } from '@/utils'; -import { withBanking } from '../../withBanking'; import styles from './AccountTransactionsUncategorizedTable.module.scss'; /** @@ -48,7 +46,6 @@ function AccountTransactionsDataTable({ }) { // Retrieve table columns. const columns = useAccountUncategorizedTransactionsColumns(); - const { scrollableRef } = useAccountTransactionsContext(); // Retrieve list context. @@ -100,7 +97,7 @@ function AccountTransactionsDataTable({ }; return ( - @@ -151,47 +148,3 @@ export default compose( }), ), )(AccountTransactionsDataTable); - -const DashboardConstrantTable = styled(DataTable)` - .table { - .thead { - .th { - background: #fff; - text-transform: uppercase; - letter-spacing: 1px; - font-size: 13px;i - font-weight: 500; - } - } - - .tbody { - .tr:last-child .td { - border-bottom: 0; - } - } - } -`; - -const CashflowTransactionsTable = styled(DashboardConstrantTable)` - .table .tbody { - .tbody-inner .tr.no-results { - .td { - padding: 2rem 0; - font-size: 14px; - color: #888; - font-weight: 400; - border-bottom: 0; - } - } - - .tbody-inner { - .tr .td:not(:first-child) { - border-left: 1px solid #e6e6e6; - } - - .td-description { - color: #5f6b7c; - } - } - } -`; diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/hooks.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/hooks.tsx index 5054878f2..8f9b3d059 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/hooks.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/hooks.tsx @@ -1,8 +1,10 @@ // @ts-nocheck import React from 'react'; import intl from 'react-intl-universal'; +import clsx from 'classnames'; import { Checkbox, + Classes, Intent, PopoverInteractionKind, Position, @@ -97,6 +99,7 @@ export function useAccountUncategorizedTransactionsColumns() { width: 160, textOverview: true, clickable: true, + className: clsx(Classes.TEXT_MUTED), }, { id: 'payee', @@ -123,21 +126,21 @@ export function useAccountUncategorizedTransactionsColumns() { id: 'deposit', Header: intl.get('banking.label.deposit'), accessor: 'formatted_deposit_amount', - width: 40, - className: 'deposit', - textOverview: true, align: 'right', + width: 40, + textOverview: true, clickable: true, + money: true }, { id: 'withdrawal', Header: intl.get('banking.label.withdrawal'), accessor: 'formatted_withdrawal_amount', - className: 'withdrawal', width: 40, textOverview: true, align: 'right', clickable: true, + money: true }, { id: 'categorize_include', diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx index e63775359..2fef2ed8c 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx @@ -123,6 +123,7 @@ export function useAccountTransactionsColumns() { textOverview: true, align: 'right', clickable: true, + money: true, }, { id: 'withdrawal', @@ -133,16 +134,18 @@ export function useAccountTransactionsColumns() { textOverview: true, align: 'right', clickable: true, + money: true, }, { id: 'running_balance', Header: intl.get('banking.label.running_balance'), accessor: 'formatted_running_balance', className: 'running_balance', + align: 'right', width: 150, textOverview: true, - align: 'right', clickable: true, + money: true, }, ], [], diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss b/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss new file mode 100644 index 000000000..c7a9e0aaf --- /dev/null +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss @@ -0,0 +1,29 @@ +.root { + :global .table{ + .thead { + .th { + background: #fff; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 13px; + font-weight: 500; + } + } + + .tbody-inner .tr.no-results { + .td { + padding: 2rem 0; + font-size: 14px; + color: #888; + font-weight: 400; + border-bottom: 0; + } + } + + .tbody-inner { + .tr .td{ + border-bottom: 1px solid #ececec; + } + } + } +} \ No newline at end of file diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.tsx new file mode 100644 index 000000000..139d1ada1 --- /dev/null +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.tsx @@ -0,0 +1,19 @@ +import clsx from 'classnames'; +import { DataTable } from '@/components'; +import styles from './BankAccountDataTable.module.scss'; + +interface BankAccountDataTableProps { + className?: string; +} + +export function BankAccountDataTable({ + className, + ...props +}: BankAccountDataTableProps) { + return ( + + ); +} diff --git a/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx b/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx index 0de0a69b5..1ebdd5e9f 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', @@ -167,6 +170,7 @@ export function useCustomersTableColumns() { align: 'right', width: 100, clickable: true, + money: true, }, ], [], diff --git a/packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx b/packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx index cac65ea92..d03bde7a7 100644 --- a/packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx +++ b/packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx @@ -140,26 +140,25 @@ export function useExpensesTableColumns() { id: 'amount', Header: intl.get('full_amount'), accessor: 'formatted_amount', - className: 'amount', align: 'right', width: 150, clickable: true, + money: true, className: clsx(CLASSES.FONT_BOLD), }, { 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/FinancialStatements/GeneralLedger/dynamicColumns.ts b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dynamicColumns.ts index 503fe3fb6..85611b315 100644 --- a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dynamicColumns.ts +++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/dynamicColumns.ts @@ -41,6 +41,7 @@ const numericColumnAccessor = R.curry((data, column) => { ...column, align: Align.Right, width, + money: true, }; }); diff --git a/packages/webapp/src/containers/FinancialStatements/Journal/dynamicColumns.ts b/packages/webapp/src/containers/FinancialStatements/Journal/dynamicColumns.ts index a7acd7743..313cf747e 100644 --- a/packages/webapp/src/containers/FinancialStatements/Journal/dynamicColumns.ts +++ b/packages/webapp/src/containers/FinancialStatements/Journal/dynamicColumns.ts @@ -41,6 +41,7 @@ const numericColumnAccessor = R.curry((data, column) => { return { ...column, align: Align.Right, + money: true, width, }; }); diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dynamicColumns.ts b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dynamicColumns.ts index 43ad0c0f8..e8d8c9ed4 100644 --- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dynamicColumns.ts +++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dynamicColumns.ts @@ -34,6 +34,7 @@ const amountAccessor = R.curry((data, column) => { minWidth: AMOUNT_COLUMNS_MIN_WIDTH, }), align: Align.Right, + money: true, }; }); diff --git a/packages/webapp/src/containers/Items/components.tsx b/packages/webapp/src/containers/Items/components.tsx index 0a06e7408..23c3c72e0 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, @@ -210,6 +212,7 @@ export const useItemsTableColumns = () => { align: 'right', width: 150, clickable: true, + money: true, }, { id: 'cost_price', @@ -218,6 +221,7 @@ export const useItemsTableColumns = () => { align: 'right', width: 150, clickable: true, + money: true, }, { id: 'quantity_on_hand', @@ -227,6 +231,7 @@ export const useItemsTableColumns = () => { align: 'right', width: 140, clickable: true, + money: true, }, ], [], diff --git a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx index f23f2f085..413c45a3b 100644 --- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx +++ b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx @@ -189,6 +189,7 @@ export function useBillsTableColumns() { width: 120, align: 'right', clickable: true, + money: true, className: clsx(CLASSES.FONT_BOLD), }, { diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx index 0c55e9bc7..0d593a42b 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx @@ -207,6 +207,7 @@ export function useEstiamtesTableColumns() { align: 'right', clickable: true, className: clsx(CLASSES.FONT_BOLD), + money: true }, { id: 'status', diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx index 5bdb11d26..8fc32a662 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, }, @@ -241,6 +240,7 @@ export function useInvoicesTableColumns() { align: 'right', clickable: true, textOverview: true, + money: true, className: clsx(CLASSES.FONT_BOLD), }, { @@ -266,7 +266,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..85a918235 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, }, @@ -190,6 +192,7 @@ export function useVendorsTableColumns() { align: 'right', width: 100, clickable: true, + money: true, }, ], [], diff --git a/packages/webapp/src/style/components/DataTable/DataTable.scss b/packages/webapp/src/style/components/DataTable/DataTable.scss index 54a5a2a12..a96d7a003 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; @@ -377,6 +378,8 @@ .table-constrant, .table--constrant { .table { + color: #000; + .thead { .tr:first-of-type .th { border-top: 1px solid #000000; @@ -394,7 +397,6 @@ background: #fff; padding: 0.5rem 0.5rem; border-bottom: 0; - color: #000; } } } \ No newline at end of file