feat(#776): Resizable panes in trading app

* feat: resizable panes in trading app

* chore: use tailwind theme for colors

apps/trading/pages/markets/trade-grid.tsx

@@ -29,6 +29,8 @@ import {
 import type { CandleClose } from '@vegaprotocol/types';
 import { AuctionTrigger } from '@vegaprotocol/types';
 import { MarketTradingMode } from '@vegaprotocol/types';
+import { Allotment, LayoutPriority } from 'allotment';
+import 'allotment/dist/style.css';
 
 const TradingViews = {
   Candles: CandlesChartContainer,
@@ -125,7 +127,7 @@ interface TradeGridProps {
 export const TradeGrid = ({ market }: TradeGridProps) => {
   const wrapperClasses = classNames(
     'h-full max-h-full',
-    'grid gap-x-8 gap-y-4 grid-cols-[1fr_325px_425px] grid-rows-[min-content_1fr_200px]',
+    'flex flex-col',
     'bg-black-10 dark:bg-black-70',
     'text-ui'
   );
@@ -133,11 +135,12 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
   return (
     <>
       <div className={wrapperClasses}>
-        <TradeMarketHeader
-          market={market}
-          className="row-start-1 row-end-2 col-start-1 col-end-4"
-        />
-        <TradeGridChild className="row-start-2 row-end-3 col-start-1 col-end-2">
+        <TradeMarketHeader market={market} />
+        <Allotment vertical={true}>
+          <Allotment.Pane>
+            <Allotment proportionalLayout={false} minSize={200}>
+              <Allotment.Pane priority={LayoutPriority.High} minSize={200}>
+                <TradeGridChild className="h-full px-4">
                   <Tabs>
                     <Tab id="candles" name={t('Candles')}>
                       <TradingViews.Candles marketId={market.id} />
@@ -147,7 +150,13 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
                     </Tab>
                   </Tabs>
                 </TradeGridChild>
-        <TradeGridChild className="row-start-2 row-end-3 col-start-2 col-end-3">
+              </Allotment.Pane>
+              <Allotment.Pane
+                priority={LayoutPriority.Low}
+                preferredSize={375}
+                minSize={200}
+              >
+                <TradeGridChild className="h-full px-4">
                   <Tabs>
                     <Tab id="ticket" name={t('Ticket')}>
                       <TradingViews.Ticket marketId={market.id} />
@@ -157,7 +166,13 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
                     </Tab>
                   </Tabs>
                 </TradeGridChild>
-        <TradeGridChild className="row-start-2 row-end-3 col-start-3 col-end-4">
+              </Allotment.Pane>
+              <Allotment.Pane
+                priority={LayoutPriority.Low}
+                preferredSize={460}
+                minSize={200}
+              >
+                <TradeGridChild className="h-full px-4">
                   <Tabs>
                     <Tab id="orderbook" name={t('Orderbook')}>
                       <TradingViews.Orderbook marketId={market.id} />
@@ -167,7 +182,16 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
                     </Tab>
                   </Tabs>
                 </TradeGridChild>
-        <TradeGridChild className="col-span-3">
+              </Allotment.Pane>
+            </Allotment>
+          </Allotment.Pane>
+          <Allotment.Pane
+            snap={true}
+            priority={LayoutPriority.Low}
+            preferredSize={200}
+            minSize={200}
+          >
+            <TradeGridChild className="h-full">
               <Tabs>
                 <Tab id="positions" name={t('Positions')}>
                   <TradingViews.Positions />
@@ -180,6 +204,8 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
                 </Tab>
               </Tabs>
             </TradeGridChild>
+          </Allotment.Pane>
+        </Allotment>
       </div>
     </>
   );

apps/trading/pages/styles.css

@@ -7,3 +7,11 @@ body,
 #__next {
   @apply h-full;
 }
+
+html > body {
+  --focus-border: theme('colors.vega.pink');
+}
+
+html.dark > body {
+  --focus-border: theme('colors.vega.yellow');
+}

package.json

@@ -37,6 +37,7 @@
     "@web3-react/walletconnect": "^8.0.23-beta.0",
     "ag-grid-community": "^27.0.1",
     "ag-grid-react": "^27.0.1",
+    "allotment": "^1.14.5",
     "alpha-lyrae": "vegaprotocol/alpha-lyrae",
     "apollo": "^2.33.9",
     "autoprefixer": "^10.4.2",

yarn.lock

@@ -7448,6 +7448,18 @@ allotment@1.14.2:
     lodash.isequal "^4.5.0"
     use-resize-observer "^9.0.0"
 
+allotment@^1.14.5:
+  version "1.14.5"
+  resolved "https://registry.yarnpkg.com/allotment/-/allotment-1.14.5.tgz#c952f5a7d43ac17649f27cb699e543d85cb6169a"
+  integrity sha512-o/OsKW8HQPDkUoGpzRIULzAy1R3UmbkUw8oBGyJo91YtB7QhiRtUOU5kEUsJX/M8lpnHtJFFo3DWTgH6HXB5TA==
+  dependencies:
+    classnames "^2.3.0"
+    eventemitter3 "^4.0.0"
+    lodash.clamp "^4.0.0"
+    lodash.debounce "^4.0.0"
+    lodash.isequal "^4.5.0"
+    use-resize-observer "^9.0.0"
+
 alpha-lyrae@vegaprotocol/alpha-lyrae:
   version "0.0.0"
   resolved "https://codeload.github.com/vegaprotocol/alpha-lyrae/tar.gz/952bbedd040080c51fb9fa15b52b0093be4d3c26"