From 1fd18dbc05268dd5dabf25c7a978c2eedbd31bfb Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Thu, 19 Jan 2023 11:44:28 -0800
Subject: [PATCH] chore: add header title component, add go to trading link for
 lp page

---
 .../client-pages/liquidity/liquidity.tsx      | 20 +++++++++-------
 apps/trading/components/header/header.tsx     | 23 +++++++++++++++++--
 .../select-market/select-market.tsx           | 18 ++++++---------
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/apps/trading/client-pages/liquidity/liquidity.tsx b/apps/trading/client-pages/liquidity/liquidity.tsx
index 84db6e3dc..ba11a359a 100644
--- a/apps/trading/client-pages/liquidity/liquidity.tsx
+++ b/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 && (
-              <Link to={Links[Routes.MARKET](marketId)}>
-                <UiToolkitLink className="sm:text-sm md:text-md lg:text-lg flex items-center gap-2 whitespace-nowrap">
-                  {`${market?.tradableInstrument.instrument.name} ${t(
-                    'liquidity provision'
-                  )}`}
-                </UiToolkitLink>
-              </Link>
+              <HeaderTitle
+                primaryContent={`${
+                  market.tradableInstrument.instrument.code
+                } ${t('liquidity provision')}`}
+                secondaryContent={
+                  <Link to={Links[Routes.MARKET](marketId)}>
+                    <UiToolkitLink>{t('Go to trading')}</UiToolkitLink>
+                  </Link>
+                }
+              />
             )
           }
         >
diff --git a/apps/trading/components/header/header.tsx b/apps/trading/components/header/header.tsx
index 9edbb9ba9..8cfffea04 100644
--- a/apps/trading/components/header/header.tsx
+++ b/apps/trading/components/header/header.tsx
@@ -12,7 +12,7 @@ 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-end">
-        <div className="mb-1 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>
+  );
+};
diff --git a/apps/trading/components/select-market/select-market.tsx b/apps/trading/components/select-market/select-market.tsx
index facbe7446..4847c6466 100644
--- a/apps/trading/components/select-market/select-market.tsx
+++ b/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">
-          <span>
-            <span className="sm:text-sm md:text-md lg:text-lg flex items-center gap-2 whitespace-nowrap">
-              {marketCode}
-            </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>
-
+        <div className="flex items-center gap-2">
+          <HeaderTitle
+            primaryContent={marketCode}
+            secondaryContent={marketName}
+          />
           <Icon name="chevron-down" className={iconClass} size={6} />
-        </span>
+        </div>
       }
     >
       <div