From a8326c5efa9d201d98cd43d88b5ef2a075b85ae1 Mon Sep 17 00:00:00 2001
From: madalinaraicu <madalina@vegaprotocol.io>
Date: Wed, 6 Jul 2022 23:01:05 +0300
Subject: [PATCH] feat: #657 styling updates on vega order dialog

---
 .../order-list/order-list.stories.tsx         |  2 +-
 .../vega-order-transaction-dialog.tsx         | 65 ++++++++++++-------
 2 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/libs/orders/src/lib/components/order-list/order-list.stories.tsx b/libs/orders/src/lib/components/order-list/order-list.stories.tsx
index 0f7962b06..f4a8da1ca 100644
--- a/libs/orders/src/lib/components/order-list/order-list.stories.tsx
+++ b/libs/orders/src/lib/components/order-list/order-list.stories.tsx
@@ -38,7 +38,7 @@ const Template2: Story = (args) => {
     rejectionReason: null,
     size: '10',
     price: '1000',
-    market: null,
+    market: { name: 'ETH/DAI (30 Jun 2022)', decimalPlaces: 5 },
     type: OrderType.Limit,
   };
   const reset = () => null;
diff --git a/libs/wallet/src/vega-order-transaction-dialog/vega-order-transaction-dialog.tsx b/libs/wallet/src/vega-order-transaction-dialog/vega-order-transaction-dialog.tsx
index ad964c02f..d546a28b4 100644
--- a/libs/wallet/src/vega-order-transaction-dialog/vega-order-transaction-dialog.tsx
+++ b/libs/wallet/src/vega-order-transaction-dialog/vega-order-transaction-dialog.tsx
@@ -36,6 +36,7 @@ export const VegaOrderTransactionDialog = ({
   title,
 }: VegaOrderTransactionDialogProps) => {
   const { VEGA_EXPLORER_URL } = useEnvironment();
+  const headerClassName = 'text-h5 font-bold text-black dark:text-white';
   // Rejected by wallet
   if (transaction.status === VegaTxStatus.Requested) {
     return (
@@ -108,29 +109,46 @@ export const VegaOrderTransactionDialog = ({
 
   return (
     <OrderDialogWrapper title={title} icon={<Icon name="tick" size={20} />}>
-      <p>{t(`Status: ${finalizedOrder.status}`)}</p>
-      {finalizedOrder.market && (
-        <p>{t(`Market: ${finalizedOrder.market.name}`)}</p>
-      )}
-      <p>{t(`Type: ${finalizedOrder.type}`)}</p>
-      <p>
-        {t(
-          `Amount: ${addDecimal(
-            finalizedOrder.size,
-            finalizedOrder.market?.positionDecimalPlaces || 0
-          )}`
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-8">
+        <div>
+          <p className={headerClassName}>{t(`Status`)}</p>
+          <p>{t(`${finalizedOrder.status}`)}</p>
+        </div>
+        {finalizedOrder.market && (
+          <div>
+            <p className={headerClassName}>{t(`Market`)}</p>
+            <p>{t(`${finalizedOrder.market.name}`)}</p>
+          </div>
         )}
-      </p>
-      {finalizedOrder.type === 'Limit' && finalizedOrder.market && (
-        <p>
-          {t(
-            `Price: ${addDecimalsFormatNumber(
-              finalizedOrder.price,
-              finalizedOrder.market.decimalPlaces
-            )}`
-          )}
-        </p>
-      )}
+        <div>
+          <p className={headerClassName}>{t(`Type`)}</p>
+          <p>{t(`${finalizedOrder.type}`)}</p>
+        </div>
+        <div>
+          <p className={headerClassName}>{t(`Amount`)}</p>
+          <p>
+            {t(
+              `${addDecimal(
+                finalizedOrder.size,
+                finalizedOrder.market?.positionDecimalPlaces || 0
+              )}`
+            )}
+          </p>
+        </div>
+        {finalizedOrder.type === 'Limit' && finalizedOrder.market && (
+          <div>
+            <p className={headerClassName}>{t(`Price`)}</p>
+            <p>
+              {t(
+                ` ${addDecimalsFormatNumber(
+                  finalizedOrder.price,
+                  finalizedOrder.market.decimalPlaces
+                )}`
+              )}
+            </p>
+          </div>
+        )}
+      </div>
     </OrderDialogWrapper>
   );
 };
@@ -146,11 +164,12 @@ const OrderDialogWrapper = ({
   icon,
   title,
 }: OrderDialogWrapperProps) => {
+  const headerClassName = 'text-h4 font-bold text-black dark:text-white';
   return (
     <div className="flex gap-12 max-w-full">
       <div className="pt-8 fill-current">{icon}</div>
       <div data-testid="order-wrapper" className="flex-1">
-        <h1 data-testid="order-status-header" className="text-h4">
+        <h1 data-testid="order-status-header" className={headerClassName}>
           {title}
         </h1>
         {children}