LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix(#661): prices and number values right-aligned (#1193)

Browse Source 
* fix: #661 prices and number values right-aligned

* fix: revert fills-table test created instead of date
This commit is contained in:
m.ray 2022-08-31 06:59:30 +01:00 committed by GitHub
parent fa6c4e7a02
commit 509a68d795
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
libs/accounts/src/lib/accounts-table.tsx
View File

@ -158,6 +158,7 @@ export const AccountsTable = forwardRef<AgGridReact, AccountsTableProps>(
headerName={t('Balance')}
field="balance"
cellRenderer="PriceCell"
type="rightAligned"
valueFormatter={({
value,
data,

17
libs/fills/src/lib/fills-table.tsx
View File

@ -18,6 +18,7 @@ import type {
FillFields_market_tradableInstrument_instrument_product,
} from './__generated__/FillFields';
import type { Fills_party_tradesConnection_edges_node } from './__generated__/Fills';
import classNames from 'classnames';
export type Props = (AgGridReactProps | AgReactUiProps) & {
partyId: string;
@ -44,15 +45,14 @@ export const FillsTable = forwardRef<AgGridReact, Props>(
<AgGridColumn headerName={t('Market')} field="market.name" />
<AgGridColumn
headerName={t('Size')}
type="rightAligned"
field="size"
cellClass={({ data }: { data: FillFields }) => {
let className = '';
if (data?.buyer.id === partyId) {
className = 'text-vega-green-dark dark:text-vega-green';
} else if (data?.seller.id) {
className = 'text-vega-red-dark dark:text-vega-red';
}
return className;
return classNames('text-right', {
'text-vega-green-dark dark:text-vega-green':
data?.buyer.id === partyId,
'text-vega-red-dark dark:text-vega-red': data?.seller.id,
});
}}
valueFormatter={formatSize(partyId)}
/>
@ -60,11 +60,13 @@ export const FillsTable = forwardRef<AgGridReact, Props>(
headerName={t('Value')}
field="price"
valueFormatter={formatPrice}
type="rightAligned"
/>
<AgGridColumn
headerName={t('Filled value')}
field="price"
valueFormatter={formatTotal}
type="rightAligned"
/>
<AgGridColumn
headerName={t('Role')}
@ -75,6 +77,7 @@ export const FillsTable = forwardRef<AgGridReact, Props>(
headerName={t('Fee')}
field="market.tradableInstrument.instrument.product"
valueFormatter={formatFee(partyId)}
type="rightAligned"
/>
<AgGridColumn
headerName={t('Date')}

9
libs/orders/src/lib/components/order-list/order-list.tsx
View File

@ -122,7 +122,8 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
<AgGridColumn
headerName={t('Size')}
field="size"
cellClass="font-mono"
cellClass="font-mono text-right"
type="rightAligned"
cellClassRules={{
'text-vega-green-dark dark:text-vega-green': ({
data,
@ -185,7 +186,8 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
<AgGridColumn
headerName={t('Filled')}
field="remaining"
cellClass="font-mono"
cellClass="font-mono text-right"
type="rightAligned"
valueFormatter={({
data,
value,
@ -207,7 +209,8 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
/>
<AgGridColumn
field="price"
cellClass="font-mono"
type="rightAligned"
cellClass="font-mono text-right"
valueFormatter={({
value,
data,

4
libs/trades/src/lib/trades-table.tsx
View File

@ -34,7 +34,7 @@ const changeCellClass =
}
}
return ['font-mono', colorClass].join(' ');
return ['font-mono text-right', colorClass].join(' ');
};
type Props = AgGridReactProps | AgReactUiProps;
@ -60,6 +60,7 @@ export const TradesTable = forwardRef<AgGridReact, Props>((props, ref) => {
<AgGridColumn
headerName={t('Price')}
field="price"
type="rightAligned"
width={130}
cellClass={changeCellClass('price')}
valueFormatter={({
@ -78,6 +79,7 @@ export const TradesTable = forwardRef<AgGridReact, Props>((props, ref) => {
headerName={t('Size')}
field="size"
width={125}
type="rightAligned"
valueFormatter={({
value,
data,