From 509a68d795aeb803447564e5f28204a025724f3e Mon Sep 17 00:00:00 2001
From: "m.ray" <16125548+MadalinaRaicu@users.noreply.github.com>
Date: Wed, 31 Aug 2022 06:59:30 +0100
Subject: [PATCH] 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        |  1 +
 libs/fills/src/lib/fills-table.tsx              | 17 ++++++++++-------
 .../lib/components/order-list/order-list.tsx    |  9 ++++++---
 libs/trades/src/lib/trades-table.tsx            |  4 +++-
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/libs/accounts/src/lib/accounts-table.tsx b/libs/accounts/src/lib/accounts-table.tsx
index 52ac15693..2a48c01d1 100644
--- a/libs/accounts/src/lib/accounts-table.tsx
+++ b/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,
diff --git a/libs/fills/src/lib/fills-table.tsx b/libs/fills/src/lib/fills-table.tsx
index deee381c0..6f939f4a4 100644
--- a/libs/fills/src/lib/fills-table.tsx
+++ b/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 = '';
-            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')}
diff --git a/libs/orders/src/lib/components/order-list/order-list.tsx b/libs/orders/src/lib/components/order-list/order-list.tsx
index 293c78f22..8f945f4e8 100644
--- a/libs/orders/src/lib/components/order-list/order-list.tsx
+++ b/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,
diff --git a/libs/trades/src/lib/trades-table.tsx b/libs/trades/src/lib/trades-table.tsx
index 94e165572..8560e050f 100644
--- a/libs/trades/src/lib/trades-table.tsx
+++ b/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,