Task/AgGrid and responsive nav font size (#130)

* add custom properties to style ag grid tables

* use theme styles, make nav text sizes responsive

* move row and header heights to parent

* use max-w-full

apps/trading/components/navbar/navbar.tsx

@@ -12,9 +12,8 @@ export const Navbar = () => {
         </a>
       </Link>
       {[
-        { name: 'Trading', path: '/', exact: true },
+        { name: 'Trading', path: '/markets' },
         { name: 'Portfolio', path: '/portfolio' },
-        { name: 'Markets', path: '/markets' },
       ].map((route) => (
         <NavLink key={route.path} {...route} />
       ))}
@@ -35,7 +34,7 @@ const NavLink = ({ name, path, exact }: NavLinkProps) => {
   return (
     <AnchorButton
       variant={isActive ? 'accent' : 'inline'}
-      className="px-16 py-6 h-[38px] text-h4 uppercase border-0 self-end"
+      className="px-16 py-6 h-[38px] uppercase border-0 self-end xs:text-ui sm:text-body-large md:text-h5 lg:text-h4"
       href={path}
       onClick={(e) => {
         e.preventDefault();

apps/trading/components/vega-wallet-connect-button/index.tsx

@@ -19,7 +19,10 @@ export const VegaWalletButton = ({
   };
 
   return (
-    <button onClick={handleClick} className="ml-auto inline-block">
+    <button
+      onClick={handleClick}
+      className="ml-auto inline-block text-ui sm:text-body-large"
+    >
       {isConnected ? 'Disconnect' : 'Connect Vega wallet'}
     </button>
   );

apps/trading/pages/markets/trade-grid.tsx

@@ -5,11 +5,33 @@ import { useState, ReactNode } from 'react';
 import { GridTab, GridTabs } from './grid-tabs';
 import { DealTicketContainer } from '../../components/deal-ticket-container';
 import { OrderListContainer } from '../..//components/order-list-container';
+import { Splash } from '@vegaprotocol/ui-toolkit';
 
-const Chart = () => <div>TODO: Chart</div>;
-const Orderbook = () => <div>TODO: Orderbook</div>;
-const Positions = () => <div>TODO: Positions</div>;
-const Collateral = () => <div>TODO: Collateral</div>;
+const Chart = () => (
+  <Splash>
+    <p>Chart</p>
+  </Splash>
+);
+const Orderbook = () => (
+  <Splash>
+    <p>Orderbook</p>
+  </Splash>
+);
+const Positions = () => (
+  <Splash>
+    <p>Positions</p>
+  </Splash>
+);
+const Collateral = () => (
+  <Splash>
+    <p>Collateral</p>
+  </Splash>
+);
+const Trades = () => (
+  <Splash>
+    <p>Trades</p>
+  </Splash>
+);
 
 type TradingView = keyof typeof TradingViews;
 
@@ -20,6 +42,7 @@ const TradingViews = {
   orders: OrderListContainer,
   positions: Positions,
   collateral: Collateral,
+  trades: Trades,
 };
 
 interface TradeGridProps {
@@ -47,7 +70,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
       <TradeGridChild className="row-start-1 row-end-3">
         <GridTabs group="trade">
           <GridTab name="trades">
-            <pre>{JSON.stringify(market.trades, null, 2)}</pre>
+            <TradingViews.trades />
           </GridTab>
           <GridTab name="orderbook">
             <TradingViews.orderbook />
@@ -120,7 +143,7 @@ export const TradePanels = ({ market }: TradePanelsProps) => {
           )}
         </AutoSizer>
       </div>
-      <div className="flex flex-nowrap gap-4 overflow-x-auto my-4">
+      <div className="flex flex-nowrap gap-4 overflow-x-auto my-4 max-w-full">
         {Object.keys(TradingViews).map((key: TradingView) => {
           const isActive = view === key;
           const className = classNames('py-4', 'px-12', 'capitalize', {

libs/order-list/src/order-list.tsx

@@ -43,6 +43,7 @@ export const OrderList = ({ orders }: OrderListProps) => {
       <AgGridColumn
         headerName="Amount"
         field="size"
+        cellClass="font-mono"
         valueFormatter={({ value, data }: ValueFormatterParams) => {
           const prefix = data.side === Side.Buy ? '+' : '-';
           return prefix + value;
@@ -62,12 +63,14 @@ export const OrderList = ({ orders }: OrderListProps) => {
       <AgGridColumn
         headerName="Filled"
         field="remaining"
+        cellClass="font-mono"
         valueFormatter={({ data }: ValueFormatterParams) => {
           return `${Number(data.size) - Number(data.remaining)}/${data.size}`;
         }}
       />
       <AgGridColumn
         field="price"
+        cellClass="font-mono"
         valueFormatter={({ value, data }: ValueFormatterParams) => {
           if (data.type === 'Market') {
             return '-';

libs/ui-toolkit/src/components/ag-grid/ag-grid-dark.tsx

@@ -1,4 +1,35 @@
 import { ReactElement } from 'react';
+import { theme } from '@vegaprotocol/tailwindcss-config';
 import 'ag-grid-community/dist/styles/ag-theme-balham-dark.css';
 
-export const AgGrid = (props: { children: ReactElement }) => props.children;
+const agGridDarkVariables = `
+  .ag-theme-balham-dark {
+    --ag-background-color: ${theme.colors.black[100]};
+    --ag-border-color: ${theme.colors.white[25]};
+    --ag-header-background-color: ${theme.colors.black[100]};
+    --ag-odd-row-background-color: ${theme.colors.black[100]};
+    --ag-row-border-color:${theme.colors.black[100]};
+    --ag-row-hover-color: ${theme.colors.white[25]};
+    --ag-font-size: 12px;
+  }
+
+  .ag-theme-balham-dark .ag-root-wrapper {
+    border: 0;
+  }
+
+  .ag-theme-balham-dark .ag-react-container {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ag-theme-balham-dark .ag-header-row {
+    font-weight: 400;
+  }
+`;
+
+export const AgGrid = (props: { children: ReactElement }) => (
+  <>
+    <style>{agGridDarkVariables}</style>
+    {props.children}
+  </>
+);

libs/ui-toolkit/src/components/ag-grid/ag-grid-dynamic-themed.tsx

@@ -24,6 +24,7 @@ export const AgGridThemed = ({
   className?: string;
 }) => {
   const theme = React.useContext(ThemeContext);
+  const defaultProps = { rowHeight: 20, headerHeight: 22 };
   return (
     <div
       className={`${className ?? ''} ${
@@ -33,11 +34,11 @@ export const AgGridThemed = ({
     >
       {theme === 'dark' ? (
         <AgGridDarkTheme>
-          <AgGridReact {...props} />
+          <AgGridReact {...defaultProps} {...props} />
         </AgGridDarkTheme>
       ) : (
         <AgGridLightTheme>
-          <AgGridReact {...props} />
+          <AgGridReact {...defaultProps} {...props} />
         </AgGridLightTheme>
       )}
     </div>

libs/ui-toolkit/src/components/ag-grid/ag-grid-light.tsx

@@ -1,4 +1,35 @@
 import { ReactElement } from 'react';
+import { theme } from '@vegaprotocol/tailwindcss-config';
 import 'ag-grid-community/dist/styles/ag-theme-balham.css';
 
-export const AgGrid = (props: { children: ReactElement }) => props.children;
+const agGridLightVariables = `
+  .ag-theme-balham {
+    --ag-background-color: ${theme.colors.white[100]};
+    --ag-border-color: ${theme.colors.black['05']};
+    --ag-header-background-color: ${theme.colors.white[100]};
+    --ag-odd-row-background-color: ${theme.colors.white[100]};
+    --ag-row-border-color: ${theme.colors.white[100]};
+    --ag-row-hover-color: ${theme.colors.vega.yellow};  
+    --ag-font-size: 12px;
+  }
+
+  .ag-theme-balham .ag-root-wrapper {
+    border: 0;
+  }
+
+  .ag-theme-balham .ag-react-container {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ag-theme-balham-dark .ag-header-row {
+    font-weight: 400;
+  }
+`;
+
+export const AgGrid = (props: { children: ReactElement }) => (
+  <>
+    <style>{agGridLightVariables}</style>
+    {props.children}
+  </>
+);