Merge branch 'feat/mobile-layout' of github.com:vegaprotocol/frontend-monorepo into feat/mobile-buttons

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

@@ -56,9 +56,8 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
         <Last24hPriceChange
           marketId={market.id}
           decimalPlaces={market.decimalPlaces}
-        >
-          <span>-</span>
-        </Last24hPriceChange>
+          fallback={<span>-</span>}
+        />
       </HeaderStat>
       <HeaderStat heading={t('Volume (24h)')} testId="market-volume">
         <Last24hVolume

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

@@ -29,14 +29,14 @@ export const MobileMarketHeader = () => {
   if (!marketId) return null;
 
   return (
-    <div className="p-2 flex justify-between gap-2 items-center h-10 border-b border-default bg-vega-clight-700 dark:bg-vega-cdark-700">
+    <div className="pl-3 pr-2 flex justify-between gap-2 h-10 bg-vega-clight-700 dark:bg-vega-cdark-700">
       <FullScreenPopover
         open={openMarket}
         onOpenChange={(x) => {
           setOpenMarket(x);
         }}
         trigger={
-          <h1 className="flex gap-1 sm:gap-2 md:gap-4 items-center text-lg md:text-lg whitespace-nowrap xl:pr-4 xl:border-r border-default">
+          <h1 className="flex gap-1 sm:gap-2 md:gap-4 items-center text-base leading-3 md:text-lg whitespace-nowrap">
             {data
               ? data.tradableInstrument.instrument.code
               : t('Select market')}
@@ -64,7 +64,7 @@ export const MobileMarketHeader = () => {
           setOpenPrice(x);
         }}
         trigger={
-          <h1 className="flex gap-1 items-center text-sm md:text-md whitespace-nowrap xl:pr-4 xl:border-r border-default">
+          <span className="flex gap-2 items-end md:text-md whitespace-nowrap leading-3">
             {data && (
               <>
                 <span className="text-xs">
@@ -73,27 +73,29 @@ export const MobileMarketHeader = () => {
                     decimalPlaces={data.decimalPlaces}
                   />
                 </span>
-                <MarketMarkPrice
-                  marketId={data.id}
-                  decimalPlaces={data.decimalPlaces}
-                />
+                <span className="flex items-center gap-1">
+                  <MarketMarkPrice
+                    marketId={data.id}
+                    decimalPlaces={data.decimalPlaces}
+                  />
+                  <VegaIcon
+                    name={VegaIconNames.CHEVRON_DOWN}
+                    size={16}
+                    className={classNames(
+                      'transition-transform ease-in-out duration-300',
+                      {
+                        'rotate-180': openPrice,
+                      }
+                    )}
+                  />
+                </span>
               </>
             )}
-            <span
-              className={classNames(
-                'transition-transform ease-in-out duration-300',
-                {
-                  'rotate-180': openPrice,
-                }
-              )}
-            >
-              <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={16} />
-            </span>
-          </h1>
+          </span>
         }
       >
         {data && (
-          <div className="px-2 py-4 text-sm grid grid-cols-2 items-center gap-2">
+          <div className="px-3 py-6 text-sm grid grid-cols-2 items-center gap-x-4 gap-y-6">
             <MarketHeaderStats market={data} />
           </div>
         )}
@@ -120,8 +122,8 @@ export const FullScreenPopover = ({
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
           data-testid="popover-content"
-          className="w-screen bg-vega-clight-800 dark:bg-vega-cdark-800 border border-default"
-          sideOffset={5}
+          className="w-screen bg-vega-clight-800 dark:bg-vega-cdark-800 border-y border-default"
+          sideOffset={0}
         >
           {children}
         </PopoverPrimitive.Content>

apps/trading/pages/_app.page.tsx

@@ -14,7 +14,7 @@ import './styles.css';
 import { usePageTitleStore } from '../stores';
 import DialogsContainer from './dialogs-container';
 import ToastsManager from './toasts-manager';
-import { HashRouter, useLocation, Route, Routes } from 'react-router-dom';
+import { HashRouter, useLocation } from 'react-router-dom';
 import { Bootstrapper } from '../components/bootstrapper';
 import { AnnouncementBanner } from '../components/banner';
 import { Navbar } from '../components/navbar';
@@ -26,7 +26,6 @@ import {
 } from '@vegaprotocol/proposals';
 import { ViewingBanner } from '../components/viewing-banner';
 import { Telemetry } from '../components/telemetry';
-import { Routes as AppRoutes } from '../lib/links';
 import { SSRLoader } from './ssr-loader';
 import { PartyActiveOrdersHandler } from './party-active-orders-handler';
 import { MaybeConnectEagerly } from './maybe-connect-eagerly';
@@ -73,14 +72,6 @@ function AppBody({ Component }: AppProps) {
       <div className={gridClasses}>
         <AnnouncementBanner />
         <Navbar theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'system'} />
-        <Routes>
-          <Route
-            path={AppRoutes.MARKETS}
-            // render nothing for markets/all, otherwise markets/:marketId will match with markets/all
-            element={null}
-          />
-          <Route path={AppRoutes.MARKET} />
-        </Routes>
         <div data-testid="banners">
           <ProtocolUpgradeProposalNotification
             mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}

apps/trading/pages/client-router.tsx

@@ -36,7 +36,7 @@ import { CompetitionsUpdateTeam } from '../client-pages/competitions/competition
 import { MarketsMobileSidebar } from '../client-pages/markets/mobile-buttons';
 import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 
-// These must remain dynamically imported as pennant cannot be compiled by nextjs due to ESM
+// These must remain dynamically imported as pennant cannot be compiled by Next.js due to ESM
 // Using dynamic imports is a workaround for this until pennant is published as ESM
 const MarketPage = lazy(() => import('../client-pages/market'));
 const Portfolio = lazy(() => import('../client-pages/portfolio'));
@@ -52,12 +52,13 @@ const NotFound = () => {
 
 export const useRouterConfig = (): RouteObject[] => {
   const featureFlags = useFeatureFlags((state) => state.flags);
-  const { isMobile } = useScreenDimensions();
-  const marketHeader = isMobile ? <MobileMarketHeader /> : <MarketHeader />;
-  const marketsSidebar = isMobile ? (
-    <MarketsMobileSidebar />
-  ) : (
+  const { screenSize } = useScreenDimensions();
+  const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
+  const marketHeader = largeScreen ? <MarketHeader /> : <MobileMarketHeader />;
+  const marketsSidebar = largeScreen ? (
     <MarketsSidebar />
+  ) : (
+    <MarketsMobileSidebar />
   );
   const routeConfig = compact([
     {

libs/markets/src/lib/components/last-24h-price-change/last-24h-price-change.tsx

@@ -19,14 +19,14 @@ interface Props {
   isHeader?: boolean;
   noUpdate?: boolean;
   // render prop for no price change
-  children?: React.ReactNode;
+  fallback?: React.ReactNode;
 }
 
 export const Last24hPriceChange = ({
   marketId,
   decimalPlaces,
   initialValue,
-  children,
+  fallback,
 }: Props) => {
   const t = useT();
   const { oneDayCandles, error, fiveDaysCandles } = useCandles({
@@ -51,13 +51,13 @@ export const Last24hPriceChange = ({
           </span>
         }
       >
-        <span>{children}</span>
+        <span>{fallback}</span>
       </Tooltip>
     );
   }
 
   if (error || !isNumeric(decimalPlaces)) {
-    return <span>{children}</span>;
+    return <span>{fallback}</span>;
   }
 
   const candles = oneDayCandles?.map((c) => c.close) || initialValue || [];