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

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

* fix: revert fills-table test created instead of date

libs/accounts/src/lib/accounts-table.tsx

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

libs/fills/src/lib/fills-table.tsx

@@ -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 = '';
+            return classNames('text-right', {
-            if (data?.buyer.id === partyId) {
+              'text-vega-green-dark dark:text-vega-green':
-              className = 'text-vega-green-dark dark:text-vega-green';
+                data?.buyer.id === partyId,
-            } else if (data?.seller.id) {
+              'text-vega-red-dark dark:text-vega-red': data?.seller.id,
-              className = 'text-vega-red-dark dark:text-vega-red';
+            });
-            }
-            return className;
           }}
           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')}

libs/orders/src/lib/components/order-list/order-list.tsx

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

libs/trades/src/lib/trades-table.tsx

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