chore(trading): add background to sidebar and minor tweaks (#5037)

apps/trading/client-pages/market/market-header-stats.tsx

@@ -43,7 +43,7 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
   const asset = getAsset(market);
 
   return (
-    <div className="flex gap-8">
+    <>
       <HeaderStat heading={t('Mark Price')} testId="market-price">
         <MarketMarkPrice
           marketId={market.id}
@@ -144,7 +144,7 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
         </HeaderStat>
       )}
       <MarketProposalNotification marketId={market.id} />
-    </div>
+    </>
   );
 };
 

apps/trading/components/header/header.tsx

@@ -17,11 +17,11 @@ export const Header = ({ title, children }: TradeMarketHeaderProps) => {
   );
   return (
     <header className={headerClasses}>
-      <div className="hidden lg:flex flex-col justify-center items-start pl-3 lg:pl-4 pt-2 xl:pb-2 pb-0">
+      <div className="flex-col items-start justify-center hidden pt-2 pb-0 pl-3 lg:flex lg:pl-4 xl:pb-2">
         {title}
       </div>
       <div data-testid="header-summary" className="min-w-0">
-        <div className="px-3 lg:px-4 py-2 flex flex-nowrap gap-4 items-center text-xs overflow-x-auto">
+        <div className="flex items-center px-3 py-2 overflow-x-auto text-xs lg:px-4 flex-nowrap gap-6">
           {children}
         </div>
       </div>
@@ -70,7 +70,7 @@ export const HeaderTitle = ({ children }: { children: ReactNode }) => {
   return (
     <h1
       data-testid="header-title"
-      className="flex gap-4 items-center text-lg whitespace-nowrap xl:pr-4 xl:border-r border-default"
+      className="flex items-center text-lg gap-4 whitespace-nowrap xl:pr-4 xl:border-r border-default"
     >
       {children}
     </h1>

apps/trading/components/layouts/layout-with-sidebar.tsx

@@ -40,9 +40,12 @@ export const LayoutWithSidebar = () => {
       </main>
       <aside
         // min-h-0 is needed as this element is part of a grid, we want the content to be scrollable, without it it will push the grid element taller
-        className={classNames('col-start-1 lg:col-start-2 min-h-0', {
+        className={classNames(
-          hidden: !sidebarOpen,
+          'col-start-1 lg:col-start-2 min-h-0 lg:border-l border-default lg:bg-vega-clight-800 dark:lg:bg-vega-cdark-800',
-        })}
+          {
+            hidden: !sidebarOpen,
+          }
+        )}
       >
         <SidebarContent />
       </aside>

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

@@ -28,12 +28,11 @@ export const MarketHeader = () => {
             <HeaderTitle>
               <span>
                 {data.tradableInstrument.instrument.code}
-                <span className="ml-2 text-xs uppercase text-muted">
+                <span className="ml-1 text-xs uppercase text-muted">
-                  {' '}
                   {data.tradableInstrument.instrument.product.__typename &&
                     ProductTypeShortName[
                       data.tradableInstrument.instrument.product.__typename
-                    ]}{' '}
+                    ]}
                 </span>
               </span>
               <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={14} />