From 5ee1748495b361709e37be07d3167e0acd239b43 Mon Sep 17 00:00:00 2001
From: "m.ray" <16125548+MadalinaRaicu@users.noreply.github.com>
Date: Wed, 29 Nov 2023 00:13:12 +0200
Subject: [PATCH] fix(trading): ag-grid styling updates and filter fixes
 (#5368)

---
 apps/trading/client-pages/market/market.tsx        | 7 ++++---
 apps/trading/client-pages/markets/open-markets.tsx | 2 +-
 apps/trading/pages/styles.css                      | 6 +++---
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/apps/trading/client-pages/market/market.tsx b/apps/trading/client-pages/market/market.tsx
index 7c50d294e..5b87a5a25 100644
--- a/apps/trading/client-pages/market/market.tsx
+++ b/apps/trading/client-pages/market/market.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from 'react';
 import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/utils';
 import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 import { useThrottledDataProvider } from '@vegaprotocol/data-provider';
-import { ExternalLink, Loader, Splash } from '@vegaprotocol/ui-toolkit';
+import { Link, Loader, Splash } from '@vegaprotocol/ui-toolkit';
 import { getAsset, marketDataProvider, useMarket } from '@vegaprotocol/markets';
 import { useGlobalStore, usePageTitleStore } from '../../stores';
 import { TradeGrid } from './trade-grid';
@@ -117,12 +117,13 @@ export const MarketPage = () => {
               defaults="Please choose another market from the <0>market list</0>"
               ns={ns}
               components={[
-                <ExternalLink
+                <Link
+                  className="underline underline-offset-4 "
                   onClick={() => navigate(Links.MARKETS())}
                   key="link"
                 >
                   market list
-                </ExternalLink>,
+                </Link>,
               ]}
             />
           </p>
diff --git a/apps/trading/client-pages/markets/open-markets.tsx b/apps/trading/client-pages/markets/open-markets.tsx
index cf25923ba..807615248 100644
--- a/apps/trading/client-pages/markets/open-markets.tsx
+++ b/apps/trading/client-pages/markets/open-markets.tsx
@@ -43,7 +43,7 @@ export const OpenMarkets = () => {
         if (!data) return;
 
         // prevent navigating to the market page if any of the below cells are clicked
-        // event.preventDefault or event.stopPropagation dont seem to apply for aggird
+        // event.preventDefault or event.stopPropagation do not seem to apply for ag-grid
         const colId = column.getColId();
 
         if (
diff --git a/apps/trading/pages/styles.css b/apps/trading/pages/styles.css
index c1d09cceb..00ad60e84 100644
--- a/apps/trading/pages/styles.css
+++ b/apps/trading/pages/styles.css
@@ -170,7 +170,7 @@ html [data-theme='dark'] {
 
 .ag-theme-balham,
 .ag-theme-balham-dark {
-  --ag-grid-size: 2px; /* Used for compactness */
+  --ag-grid-size: 5px; /* Used for compactness */
   --ag-row-height: 36px;
   --ag-header-height: 28px;
 }
@@ -184,7 +184,7 @@ html [data-theme='dark'] {
 
 /* Light variables */
 .ag-theme-balham {
-  --ag-background-color: transparent;
+  --ag-background-color: theme(colors.vega.clight.900);
   --ag-border-color: theme(colors.vega.clight.600);
   --ag-header-background-color: theme(colors.vega.clight.700);
   --ag-odd-row-background-color: transparent;
@@ -196,7 +196,7 @@ html [data-theme='dark'] {
 
 /* Dark variables */
 .ag-theme-balham-dark {
-  --ag-background-color: transparent;
+  --ag-background-color: theme(colors.vega.cdark.900);
   --ag-border-color: theme(colors.vega.cdark.600);
   --ag-header-background-color: theme(colors.vega.cdark.700);
   --ag-odd-row-background-color: transparent;