chore: make headers consistent (#2683)

apps/trading/client-pages/liquidity/liquidity.tsx

@@ -25,7 +25,7 @@ import {
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import { Header, HeaderStat } from '../../components/header';
+import { Header, HeaderStat, HeaderTitle } from '../../components/header';
 
 import type { AgGridReact } from 'ag-grid-react';
 import type { IGetRowsParams } from 'ag-grid-community';
@@ -224,14 +224,18 @@ export const LiquidityViewContainer = ({
         <Header
           title={
             market?.tradableInstrument.instrument.name &&
+            market?.tradableInstrument.instrument.code &&
             marketId && (
+              <HeaderTitle
+                primaryContent={`${
+                  market.tradableInstrument.instrument.code
+                } ${t('liquidity provision')}`}
+                secondaryContent={
                   <Link to={Links[Routes.MARKET](marketId)}>
-                <UiToolkitLink className="sm:text-sm md:text-md lg:text-lg flex items-center gap-2 whitespace-nowrap">
+                    <UiToolkitLink>{t('Go to trading')}</UiToolkitLink>
-                  {`${market?.tradableInstrument.instrument.name} ${t(
-                    'liquidity provision'
-                  )}`}
-                </UiToolkitLink>
                   </Link>
+                }
+              />
             )
           }
         >

apps/trading/components/header/header.tsx

@@ -11,8 +11,8 @@ interface TradeMarketHeaderProps {
 export const Header = ({ title, children }: TradeMarketHeaderProps) => {
   return (
     <header className="w-screen xl:px-4 pt-2 border-b border-default">
-      <div className="xl:flex xl:gap-4 items-center">
+      <div className="xl:flex xl:gap-4 items-end">
-        <div className="mb-4 xl:mb-0 px-4 xl:px-0">{title}</div>
+        <div className="px-4 xl:px-0 pb-2 xl:pb-3">{title}</div>
         <div
           data-testid="header-summary"
           className="flex flex-nowrap items-start xl:flex-1 w-full overflow-x-auto text-xs"
@@ -43,7 +43,7 @@ export const HeaderStat = ({
   testId?: string;
 }) => {
   const itemClass =
-    'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-default mt-1';
+    'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-default';
   const itemHeading = 'text-neutral-500 dark:text-neutral-400';
 
   return (
@@ -63,3 +63,22 @@ export const HeaderStat = ({
     </div>
   );
 };
+
+export const HeaderTitle = ({
+  primaryContent,
+  secondaryContent,
+}: {
+  primaryContent: ReactNode;
+  secondaryContent: ReactNode;
+}) => {
+  return (
+    <div className="text-left">
+      <div className="text-sm md:text-md lg:text-lg whitespace-nowrap leading-4">
+        {primaryContent}
+      </div>
+      <div className="text-xs whitespace-nowrap text-neutral-500 dark:text-neutral-400">
+        {secondaryContent}
+      </div>
+    </div>
+  );
+};

apps/trading/components/navbar/navbar.tsx

@@ -10,15 +10,17 @@ import {
 import { t } from '@vegaprotocol/react-helpers';
 import { useGlobalStore } from '../../stores/global';
 import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
-import { Drawer, NewTab, ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
-import { Vega } from '../icons/vega';
-import type { HTMLAttributeAnchorTarget } from 'react';
-import { Links, Routes } from '../../pages/client-router';
 import {
+  Drawer,
   getNavLinkClassNames,
   getActiveNavLinkClassNames,
   Nav,
+  NewTab,
+  ThemeSwitcher,
 } from '@vegaprotocol/ui-toolkit';
+import { Vega } from '../icons/vega';
+import type { HTMLAttributeAnchorTarget } from 'react';
+import { Links, Routes } from '../../pages/client-router';
 
 type NavbarTheme = 'inherit' | 'dark' | 'yellow';
 interface NavbarProps {

apps/trading/components/select-market/select-market.tsx

@@ -28,6 +28,7 @@ import {
   TOKEN_NEW_MARKET_PROPOSAL,
   useLinks,
 } from '@vegaprotocol/environment';
+import { HeaderTitle } from '../header';
 
 export type Market = MarketWithCandles & MarketWithData;
 
@@ -150,18 +151,13 @@ export const SelectMarketPopover = ({
       open={open}
       onChange={setOpen}
       trigger={
-        <span className="flex items-center gap-2">
+        <div className="flex items-center gap-2">
-          <span>
+          <HeaderTitle
-            <span className="sm:text-sm md:text-md lg:text-lg flex items-center gap-2 whitespace-nowrap">
+            primaryContent={marketCode}
-              {marketCode}
+            secondaryContent={marketName}
-            </span>
+          />
-            <span className="sm:text-xs text-sm flex items-center gap-2 whitespace-nowrap text-neutral-500 dark:text-neutral-400 pb-2">
-              {marketName}
-            </span>
-          </span>
-
           <Icon name="chevron-down" className={iconClass} size={6} />
-        </span>
+        </div>
       }
     >
       <div