Fix/Trading grid layout fixes (#583)

* fix: move MarketList wait back

* fix: dont wait for MarketList query

* fix: move assertion to actual test body so other tests can run

* fix: ensure page rendered before checking url after redirect

* fix: grid layout

* fix: withdrawals test by giving explicit dates to mocked withdrawals so they are ordered correctly

apps/trading-e2e/src/support/mocks/generate-withdrawals.ts

@@ -15,8 +15,8 @@ export const generateWithdrawals = (
           status: WithdrawalStatus.Finalized,
           amount: '100',
           txHash: null,
-          createdTimestamp: new Date().toISOString(),
+          createdTimestamp: new Date('2022-02-02').toISOString(),
-          withdrawnTimestamp: new Date().toISOString(),
+          withdrawnTimestamp: new Date('2022-02-02').toISOString(),
           details: {
             __typename: 'Erc20WithdrawalDetails',
             receiverAddress: '0x72c22822A19D20DE7e426fB84aa047399Ddd8853',
@@ -35,8 +35,8 @@ export const generateWithdrawals = (
           amount: '100',
           txHash:
             '0x5d7b1a35ba6bd23be17bb7a159c13cdbb3121fceb94e9c6c510f5503dce48d03',
-          createdTimestamp: new Date().toISOString(),
+          createdTimestamp: new Date('2022-02-01').toISOString(),
-          withdrawnTimestamp: new Date().toISOString(),
+          withdrawnTimestamp: new Date('2022-02-01').toISOString(),
           details: {
             __typename: 'Erc20WithdrawalDetails',
             receiverAddress: '0x72c22822A19D20DE7e426fB84aa047399Ddd8853',

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

@@ -34,11 +34,15 @@ const TradingViews = {
 
 type TradingView = keyof typeof TradingViews;
 
-interface TradeGridProps {
+interface TradeMarketHeaderProps {
   market: Market_market;
+  className?: string;
 }
 
-export const TradeMarketHeader = ({ market }: TradeGridProps) => {
+export const TradeMarketHeader = ({
+  market,
+  className,
+}: TradeMarketHeaderProps) => {
   const [open, setOpen] = useState(false);
   const candlesClose: string[] = (market?.candles || [])
     .map((candle) => candle?.close)
@@ -48,8 +52,12 @@ export const TradeMarketHeader = ({ market }: TradeGridProps) => {
     'font-sans font-normal mb-0 text-dark/80 dark:text-white/80 text-ui-small';
   const itemValueClassName =
     'capitalize font-sans tracking-tighter text-black dark:text-white text-ui';
+  const headerClassname = classNames(
+    'w-full p-8 bg-white dark:bg-black',
+    className
+  );
   return (
-    <header className="w-full p-8">
+    <header className={headerClassname}>
       <SelectMarketDialog dialogOpen={open} setDialogOpen={setOpen} />
       <div className="flex flex-col md:flex-row gap-20 md:gap-64 ml-auto mr-8">
         <button
@@ -90,19 +98,26 @@ export const TradeMarketHeader = ({ market }: TradeGridProps) => {
   );
 };
 
+interface TradeGridProps {
+  market: Market_market;
+}
+
 export const TradeGrid = ({ market }: TradeGridProps) => {
   const wrapperClasses = classNames(
     'h-full max-h-full',
-    'grid gap-[1px] grid-cols-[1fr_375px_460px] grid-rows-[min-content_1fr_200px]',
+    'grid gap-4 grid-cols-[1fr_375px_460px] grid-rows-[min-content_1fr_200px]',
     'bg-black-10 dark:bg-white-10',
     'text-ui'
   );
 
   return (
     <>
-      <TradeMarketHeader market={market} />
       <div className={wrapperClasses}>
-        <TradeGridChild className="row-start-1 row-end-3">
+        <TradeMarketHeader
+          market={market}
+          className="row-start-1 row-end-2 col-start-1 col-end-2"
+        />
+        <TradeGridChild className="row-start-2 row-end-3 col-start-1 col-end-2">
           <GridTabs>
             <GridTab id="candles" name={t('Candles')}>
               <TradingViews.Candles marketId={market.id} />

libs/ui-toolkit/src/components/grid-tabs/grid-tabs.tsx

@@ -18,31 +18,32 @@ export const GridTabs = ({ children }: GridTabsProps) => {
       className="h-full grid grid-rows-[min-content_1fr]"
       onValueChange={(value) => setActiveTab(value)}
     >
-      <Tabs.List
+      <div className="bg-black-10 dark:bg-white-10">
-        className="flex flex-nowrap gap-4 overflow-x-auto"
+        <Tabs.List
-        role="tablist"
+          className="flex flex-nowrap gap-4 overflow-x-auto"
-      >
+          role="tablist"
-        {Children.map(children, (child) => {
+        >
-          if (!isValidElement(child)) return null;
+          {Children.map(children, (child) => {
-          const isActive = child.props.id === activeTab;
+            if (!isValidElement(child)) return null;
-          const triggerClass = classNames('py-4', 'px-12', 'capitalize', {
+            const isActive = child.props.id === activeTab;
-            'text-black dark:text-vega-yellow': isActive,
+            const triggerClass = classNames('py-4', 'px-12', 'capitalize', {
-            'bg-white dark:bg-black': isActive,
+              'text-black dark:text-vega-yellow': isActive,
-            'text-black dark:text-white': !isActive,
+              'bg-white dark:bg-black': isActive,
-            'bg-black-10 dark:bg-white-25': !isActive,
+              'text-black-60 dark:text-white-60': !isActive,
-          });
+              'bg-black-10 dark:bg-white-10': !isActive,
-          return (
+            });
-            <Tabs.Trigger
+            return (
-              data-testid={child.props.name}
+              <Tabs.Trigger
-              value={child.props.id}
+                data-testid={child.props.name}
-              className={triggerClass}
+                value={child.props.id}
-            >
+                className={triggerClass}
-              {child.props.name}
+              >
-            </Tabs.Trigger>
+                {child.props.name}
-          );
+              </Tabs.Trigger>
-        })}
+            );
-        <div className="bg-black-10 dark:bg-white-25 grow"></div>
+          })}
-      </Tabs.List>
+        </Tabs.List>
+      </div>
       <div className="h-full overflow-auto">
         {Children.map(children, (child) => {
           if (!isValidElement(child)) return null;