From f11ea73ca6c718c6f6dbd5209595c7772bdfed31 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Tue, 4 Jul 2023 11:38:49 -0700
Subject: [PATCH] chore: adjust layout to work for mobile

---
 apps/trading/client-pages/layout/layout.tsx   |  97 -------------
 .../client-pages/market/trade-views.tsx       |  12 +-
 apps/trading/components/header/header.tsx     |   8 +-
 .../layout/index.ts                           |   0
 apps/trading/components/layout/layout.tsx     |  70 +++++++++
 apps/trading/components/sidebar/sidebar.tsx   | 133 +++++++++---------
 apps/trading/pages/client-router.tsx          |   2 +-
 libs/candles-chart/src/lib/candles-chart.tsx  |   2 +-
 8 files changed, 143 insertions(+), 181 deletions(-)
 delete mode 100644 apps/trading/client-pages/layout/layout.tsx
 rename apps/trading/{client-pages => components}/layout/index.ts (100%)
 create mode 100644 apps/trading/components/layout/layout.tsx

diff --git a/apps/trading/client-pages/layout/layout.tsx b/apps/trading/client-pages/layout/layout.tsx
deleted file mode 100644
index de8e201bf..000000000
--- a/apps/trading/client-pages/layout/layout.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Outlet, useLocation } from 'react-router-dom';
-import { Sidebar, SidebarContent, useSidebar } from '../../components/sidebar';
-import classNames from 'classnames';
-import { Navbar } from '../../components/navbar';
-import { ViewingBanner } from '../../components/viewing-banner';
-import { AnnouncementBanner, UpgradeBanner } from '../../components/banner';
-import {
-  ProtocolUpgradeCountdownMode,
-  ProtocolUpgradeProposalNotification,
-} from '@vegaprotocol/proposals';
-import * as DialogPrimitives from '@radix-ui/react-dialog';
-import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
-import { useScreenDimensions } from '@vegaprotocol/react-helpers';
-
-export const Layout = () => {
-  const location = useLocation();
-  const { view, setView } = useSidebar();
-  const { screenSize } = useScreenDimensions();
-  const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
-  const sidebarOpen = view !== null;
-
-  const commonClasses = [
-    'h-full relative z-0 grid',
-    'grid-rows-[repeat(4,min-content),minmax(0,1fr)]',
-  ];
-  const largeClasses = classNames(commonClasses, {
-    'grid-cols-[45px_350px_1fr]': sidebarOpen,
-    'grid-cols-[45px_1fr]': !sidebarOpen,
-  });
-  const smallClasses = classNames(commonClasses, 'grid-cols-[45px_1fr]');
-  const gridClasses = largeScreen ? largeClasses : smallClasses;
-
-  const mainClasses = classNames('row-start-4 row-span-full');
-  return (
-    <>
-      <div className={gridClasses}>
-        <div className="col-span-full row-start-1 bg-vega-pink">
-          <AnnouncementBanner />
-        </div>
-        <div className="row-span-full row-start-2 bg-vega-clight-800 dark:bg-vega-cdark-800 border-r border-default">
-          <Sidebar />
-        </div>
-        {largeScreen && sidebarOpen && (
-          <div className="row-span-full row-start-4 col-start-2 p-4 overflow-y-auto">
-            <SidebarContent />
-          </div>
-        )}
-        <div className="col-span-full col-start-2 row-start-2">
-          <Navbar theme="system" />
-        </div>
-        <div
-          className="col-span-full col-start-2 row-start-3"
-          data-testid="banners"
-        >
-          <ProtocolUpgradeProposalNotification
-            mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
-          />
-          <ViewingBanner />
-          <UpgradeBanner showVersionChange={true} />
-        </div>
-        <main className={mainClasses} data-testid={location.pathname}>
-          <Outlet />
-        </main>
-      </div>
-      {/* {!largeScreen && (
-        <DialogPrimitives.Root
-          open={sidebarOpen}
-          onOpenChange={(isOpen) => {
-            if (!isOpen) {
-              setView(null);
-            }
-          }}
-        >
-          <DialogPrimitives.Portal>
-            <DialogPrimitives.Overlay />
-            <DialogPrimitives.Content
-              className={classNames(
-                'fixed h-full max-w-[500px] w-[90vw] z-10 top-0 left-0 transition-transform',
-                'bg-white dark:bg-black', // TODO: colors
-                'border-r border-default'
-              )}
-            >
-              <DialogPrimitives.Close className="absolute top-0 right-0 p-2">
-                <VegaIcon name={VegaIconNames.CROSS} />
-              </DialogPrimitives.Close>
-              {sidebarOpen && (
-                <div className="py-8 px-4">
-                  <SidebarContent />
-                </div>
-              )}
-            </DialogPrimitives.Content>
-          </DialogPrimitives.Portal>
-        </DialogPrimitives.Root>
-      )} */}
-    </>
-  );
-};
diff --git a/apps/trading/client-pages/market/trade-views.tsx b/apps/trading/client-pages/market/trade-views.tsx
index 4d9405e38..2594de3fd 100644
--- a/apps/trading/client-pages/market/trade-views.tsx
+++ b/apps/trading/client-pages/market/trade-views.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps } from 'react';
 import { Splash } from '@vegaprotocol/ui-toolkit';
-import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
-import { MarketInfoAccordionContainer } from '@vegaprotocol/markets';
+import type { DealTicketContainer } from '@vegaprotocol/deal-ticket';
+import type { MarketInfoAccordionContainer } from '@vegaprotocol/markets';
 import { TradesContainer } from '@vegaprotocol/trades';
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
 import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
@@ -47,14 +47,6 @@ export const TradingViews = {
     label: 'Liquidity',
     component: requiresMarket(LiquidityContainer),
   },
-  ticket: {
-    label: 'Ticket',
-    component: requiresMarket(DealTicketContainer),
-  },
-  info: {
-    label: 'Info',
-    component: requiresMarket(MarketInfoAccordionContainer),
-  },
   orderbook: {
     label: 'Orderbook',
     component: requiresMarket(OrderbookContainer),
diff --git a/apps/trading/components/header/header.tsx b/apps/trading/components/header/header.tsx
index 23ed038c4..3fa673386 100644
--- a/apps/trading/components/header/header.tsx
+++ b/apps/trading/components/header/header.tsx
@@ -12,17 +12,17 @@ export const Header = ({ title, children }: TradeMarketHeaderProps) => {
     'grid',
     'grid-rows-[min-content_min-content]',
     'xl:grid-cols-[min-content_1fr]',
-    'border-l border-b border-default',
+    'lg:border-l border-b border-default',
     'bg-vega-clight-800 dark:bg-vega-cdark-800'
   );
   return (
-    <header className="pl-1">
+    <header className="lg:pl-1">
       <div className={headerClasses}>
-        <div className="flex flex-col justify-center pl-4 pt-2 xl:pb-2 pb-0 xl:border-r border-default xl:pr-4">
+        <div className="flex flex-col justify-center pl-3 lg:pl-4 pt-2 xl:pb-2 pb-0 xl:border-r border-default xl:pr-4">
           {title}
         </div>
         <div data-testid="header-summary" className="min-w-0">
-          <div className="px-4 py-2 flex flex-nowrap gap-4 items-center text-xs overflow-x-auto">
+          <div className="px-3 lg:px-4 py-2 flex flex-nowrap gap-4 items-center text-xs overflow-x-auto">
             {children}
           </div>
         </div>
diff --git a/apps/trading/client-pages/layout/index.ts b/apps/trading/components/layout/index.ts
similarity index 100%
rename from apps/trading/client-pages/layout/index.ts
rename to apps/trading/components/layout/index.ts
diff --git a/apps/trading/components/layout/layout.tsx b/apps/trading/components/layout/layout.tsx
new file mode 100644
index 000000000..1ab891afa
--- /dev/null
+++ b/apps/trading/components/layout/layout.tsx
@@ -0,0 +1,70 @@
+import { Outlet, useLocation } from 'react-router-dom';
+import { Sidebar, SidebarContent, useSidebar } from '../sidebar';
+import classNames from 'classnames';
+import { Navbar } from '../navbar';
+import { ViewingBanner } from '../viewing-banner';
+import { AnnouncementBanner, UpgradeBanner } from '../banner';
+import {
+  ProtocolUpgradeCountdownMode,
+  ProtocolUpgradeProposalNotification,
+} from '@vegaprotocol/proposals';
+
+export const Layout = () => {
+  const location = useLocation();
+  const { view } = useSidebar();
+  const sidebarOpen = view !== null;
+
+  const gridClasses = classNames(
+    'h-full relative z-0 grid',
+    'grid-rows-[repeat(4,min-content),minmax(0,1fr)]',
+    'grid-cols-[45px_1fr]',
+    'lg:grid-cols-[45px_350px_1fr]'
+  );
+
+  return (
+    <div className={gridClasses}>
+      <div className="bg-vega-yellow col-start-2 col-span-full row-start-1">
+        {/* <AnnouncementBanner /> */}
+      </div>
+      <div className="col-start-1 row-span-full bg-vega-clight-800 dark:bg-vega-cdark-800 border-r border-default">
+        <Sidebar />
+      </div>
+      <div
+        className={classNames(
+          'row-span-full row-start-4 col-start-2 p-4 overflow-y-auto',
+          {
+            hidden: !sidebarOpen,
+          }
+        )}
+      >
+        <SidebarContent />
+      </div>
+      <div className="col-span-full col-start-2 row-start-2">
+        <Navbar theme="system" />
+      </div>
+      <div
+        className="bg-vega-pink col-span-full col-start-2 row-start-3"
+        data-testid="banners"
+      >
+        <ProtocolUpgradeProposalNotification
+          mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
+        />
+        <ViewingBanner />
+        <UpgradeBanner showVersionChange={true} />
+      </div>
+      <main
+        className={classNames(
+          'row-start-4 row-span-full col-start-2 col-span-full',
+          {
+            'col-start-2': !sidebarOpen,
+            'col-start-3': sidebarOpen,
+            'hidden lg:block': sidebarOpen,
+          }
+        )}
+        data-testid={location.pathname}
+      >
+        <Outlet />
+      </main>
+    </div>
+  );
+};
diff --git a/apps/trading/components/sidebar/sidebar.tsx b/apps/trading/components/sidebar/sidebar.tsx
index db1f29770..733b066d0 100644
--- a/apps/trading/components/sidebar/sidebar.tsx
+++ b/apps/trading/components/sidebar/sidebar.tsx
@@ -11,6 +11,7 @@ import classNames from 'classnames';
 import { NodeHealthContainer } from '../node-health';
 import { MarketInfoAccordionContainer } from '@vegaprotocol/markets';
 import { t } from '@vegaprotocol/i18n';
+import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
 
 type SidebarView =
   | 'order'
@@ -22,59 +23,61 @@ type SidebarView =
 
 export const Sidebar = () => {
   return (
-    <div className="flex flex-col items-center gap-2 py-2 px-1 h-full">
-      <div>
-        <VLogo className="w-[20px]" />
-      </div>
-      <nav className="flex flex-col items-stretch gap-2 p-1">
-        {/* sidebar options that always show */}
-        <SidebarButton
-          view="deposit"
-          icon={VegaIconNames.DEPOSIT}
-          tooltip="Deposit"
-        />
-        <SidebarButton
-          view="withdraw"
-          icon={VegaIconNames.WITHDRAW}
-          tooltip="Withdraw"
-        />
-        <SidebarButton
-          view="transfer"
-          icon={VegaIconNames.TRANSFER}
-          tooltip="Transfer"
-        />
-        {/* buttons for specific routes */}
-        <Routes>
-          <Route path="/markets/all" element={null} />
-          <Route
-            path="/markets/:marketId"
-            element={
-              <>
-                <SidebarDivider />
-                <SidebarButton
-                  view="order"
-                  icon={VegaIconNames.TREND_UP}
-                  tooltip="Order"
-                />
-                <SidebarButton
-                  view="info"
-                  icon={VegaIconNames.BREAKDOWN}
-                  tooltip="Market specification"
-                />
-              </>
-            }
+    <>
+      <div className="flex flex-col items-center gap-2 py-2 px-1 h-full">
+        <div>
+          <VLogo className="w-[20px]" />
+        </div>
+        <nav className="flex flex-col items-stretch gap-2 p-1">
+          {/* sidebar options that always show */}
+          <SidebarButton
+            view="deposit"
+            icon={VegaIconNames.DEPOSIT}
+            tooltip="Deposit"
           />
-        </Routes>
-      </nav>
-      <nav className="mt-auto flex flex-col items-stretch gap-2 p-1">
-        <SidebarButton
-          view="settings"
-          icon={VegaIconNames.COG}
-          tooltip="Settings"
-        />
-        <NodeHealthContainer />
-      </nav>
-    </div>
+          <SidebarButton
+            view="withdraw"
+            icon={VegaIconNames.WITHDRAW}
+            tooltip="Withdraw"
+          />
+          <SidebarButton
+            view="transfer"
+            icon={VegaIconNames.TRANSFER}
+            tooltip="Transfer"
+          />
+          {/* buttons for specific routes */}
+          <Routes>
+            <Route path="/markets/all" element={null} />
+            <Route
+              path="/markets/:marketId"
+              element={
+                <>
+                  <SidebarDivider />
+                  <SidebarButton
+                    view="order"
+                    icon={VegaIconNames.TREND_UP}
+                    tooltip="Order"
+                  />
+                  <SidebarButton
+                    view="info"
+                    icon={VegaIconNames.BREAKDOWN}
+                    tooltip="Market specification"
+                  />
+                </>
+              }
+            />
+          </Routes>
+        </nav>
+        <nav className="mt-auto flex flex-col items-stretch gap-2 p-1">
+          <SidebarButton
+            view="settings"
+            icon={VegaIconNames.COG}
+            tooltip="Settings"
+          />
+          <NodeHealthContainer />
+        </nav>
+      </div>
+    </>
   );
 };
 
@@ -110,46 +113,40 @@ export const SidebarContent = () => {
   const params = useParams();
   const { view } = useSidebar();
 
-  let content = null;
-
   if (view === 'order') {
     if (params.marketId) {
-      content = <TradingViews.ticket.component marketId={params.marketId} />;
+      return <DealTicketContainer marketId={params.marketId} />;
     } else {
-      content = <p>{t('No market selected')}</p>;
+      return <p>{t('No market selected')}</p>;
     }
   }
 
   if (view === 'deposit') {
-    content = <DepositContainer />;
+    return <DepositContainer />;
   }
 
   if (view === 'withdraw') {
-    content = <WithdrawFormContainer submit={() => alert('TODO')} />;
+    return <WithdrawFormContainer submit={() => alert('TODO')} />;
   }
 
   if (view === 'transfer') {
-    content = <TransferContainer />;
+    return <TransferContainer />;
   }
 
   if (view === 'settings') {
-    content = <Settings />;
+    return <Settings />;
   }
 
   if (view === 'info') {
     if (params.marketId) {
-      content = <MarketInfoAccordionContainer marketId={params.marketId} />;
+      return <MarketInfoAccordionContainer marketId={params.marketId} />;
     } else {
-      content = <p>{t('No market selected')}</p>;
+      return <p>{t('No market selected')}</p>;
     }
   }
 
-  return (
-    <div>
-      {/* <h2 className="capitalize mb-2">{view}</h2> */}
-      {content}
-    </div>
-  );
+  // sidebar not open
+  return null;
 };
 
 export const useSidebar = create<{
diff --git a/apps/trading/pages/client-router.tsx b/apps/trading/pages/client-router.tsx
index 4995cf930..281f6aa24 100644
--- a/apps/trading/pages/client-router.tsx
+++ b/apps/trading/pages/client-router.tsx
@@ -5,7 +5,7 @@ import dynamic from 'next/dynamic';
 import { t } from '@vegaprotocol/i18n';
 import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
 import trimEnd from 'lodash/trimEnd';
-import { Layout } from '../client-pages/layout';
+import { Layout } from '../components/layout';
 
 const LazyHome = dynamic(() => import('../client-pages/home'), {
   ssr: false,
diff --git a/libs/candles-chart/src/lib/candles-chart.tsx b/libs/candles-chart/src/lib/candles-chart.tsx
index af888b404..c2c41e81d 100644
--- a/libs/candles-chart/src/lib/candles-chart.tsx
+++ b/libs/candles-chart/src/lib/candles-chart.tsx
@@ -131,7 +131,7 @@ export const CandlesChartContainer = ({
 
   return (
     <div className="h-full flex flex-col">
-      <div className="px-4 py-2 flex flex-row flex-wrap gap-2 bg-vega-clight-700 dark:bg-vega-cdark-700">
+      <div className="px-3 lg:px-4 py-2 flex flex-row flex-wrap gap-2 bg-vega-clight-700 dark:bg-vega-cdark-700">
         <DropdownMenu
           trigger={
             <DropdownMenuTrigger>