feat: add resizable panels to portfolio page (#888)

* chore: fix padding issues

* chore: add resizable panels to portfolio page

* chore: padding tweak

* chore: adding resizable panels component

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

@@ -25,12 +25,12 @@ import {
   Tab,
   Tabs,
   PriceCellChange,
+  ResizablePanel,
 } from '@vegaprotocol/ui-toolkit';
 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,
@@ -159,11 +159,11 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
     <>
       <div className={wrapperClasses}>
         <TradeMarketHeader market={market} />
-        <Allotment vertical={true}>
-          <Allotment.Pane>
-            <Allotment proportionalLayout={false} minSize={200}>
+        <ResizablePanel vertical={true}>
+          <Allotment.Pane minSize={75}>
+            <ResizablePanel proportionalLayout={false} minSize={200}>
               <Allotment.Pane priority={LayoutPriority.High} minSize={200}>
-                <TradeGridChild className="h-full px-4 bg-black-10 dark:bg-black-70">
+                <TradeGridChild className="h-full pr-4 bg-black-10 dark:bg-black-70">
                   <Tabs>
                     <Tab id="candles" name={t('Candles')}>
                       <TradingViews.Candles marketId={market.id} />
@@ -195,7 +195,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
                 preferredSize={430}
                 minSize={200}
               >
-                <TradeGridChild className="h-full px-4 bg-black-10 dark:bg-black-70">
+                <TradeGridChild className="h-full pl-4 bg-black-10 dark:bg-black-70">
                   <Tabs>
                     <Tab id="orderbook" name={t('Orderbook')}>
                       <TradingViews.Orderbook marketId={market.id} />
@@ -206,7 +206,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
                   </Tabs>
                 </TradeGridChild>
               </Allotment.Pane>
-            </Allotment>
+            </ResizablePanel>
           </Allotment.Pane>
           <Allotment.Pane
             priority={LayoutPriority.Low}
@@ -227,7 +227,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
               </Tabs>
             </TradeGridChild>
           </Allotment.Pane>
-        </Allotment>
+        </ResizablePanel>
       </div>
     </>
   );

apps/trading/pages/portfolio/index.page.tsx

@@ -10,76 +10,88 @@ import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
 import { DepositsContainer } from './deposits-container';
+import { ResizablePanel } from '@vegaprotocol/ui-toolkit';
+import { Allotment, LayoutPriority } from 'allotment';
 
 const Portfolio = () => {
   const wrapperClasses = classNames(
     'h-full max-h-full',
-    'grid gap-4 grid-rows-[1fr_300px]',
-    'bg-black-10 dark:bg-white-10',
+    'flex flex-col',
+    'bg-black-10 dark:bg-black-70',
     'text-ui'
   );
   const tabContentClassName = 'h-full grid gap-4 grid-rows-[min-content_1fr]';
   return (
     <div className={wrapperClasses}>
-      <PortfolioGridChild>
-        <Tabs>
-          <Tab id="positions" name={t('Positions')}>
-            <VegaWalletContainer>
-              <div className={tabContentClassName}>
-                <h4 className="text-h4 text-black dark:text-white p-8">
-                  {t('Positions')}
-                </h4>
-                <div>
-                  <PositionsContainer />
-                </div>
-              </div>
-            </VegaWalletContainer>
-          </Tab>
-          <Tab id="orders" name={t('Orders')}>
-            <VegaWalletContainer>
-              <div className={tabContentClassName}>
-                <h4 className="text-h4 text-black dark:text-white p-8">
-                  {t('Orders')}
-                </h4>
-                <div>
-                  <OrderListContainer />
-                </div>
-              </div>
-            </VegaWalletContainer>
-          </Tab>
-          <Tab id="fills" name={t('Fills')}>
-            <VegaWalletContainer>
-              <div className={tabContentClassName}>
-                <h4 className="text-h4 text-black dark:text-white p-8">
-                  {t('Fills')}
-                </h4>
-                <div>
-                  <FillsContainer />
-                </div>
-              </div>
-            </VegaWalletContainer>
-          </Tab>
-        </Tabs>
-      </PortfolioGridChild>
-      <PortfolioGridChild>
-        <Tabs>
-          <Tab id="collateral" name={t('Collateral')}>
-            <VegaWalletContainer>
-              <AccountsContainer />
-            </VegaWalletContainer>
-          </Tab>
-          <Tab id="deposits" name={t('Deposits')}>
-            <DepositsContainer />
-          </Tab>
-          <Tab id="withdrawals" name={t('Withdrawals')}>
-            <Web3Container>
-              <VegaWalletContainer>
-                <WithdrawalsContainer />
-              </VegaWalletContainer>
-            </Web3Container>
-          </Tab>
-        </Tabs>
-      </PortfolioGridChild>
+      <ResizablePanel vertical={true}>
+        <Allotment.Pane minSize={75}>
+          <PortfolioGridChild className="h-full">
+            <Tabs>
+              <Tab id="positions" name={t('Positions')}>
+                <VegaWalletContainer>
+                  <div className={tabContentClassName}>
+                    <h4 className="text-h4 text-black dark:text-white p-8">
+                      {t('Positions')}
+                    </h4>
+                    <div>
+                      <PositionsContainer />
+                    </div>
+                  </div>
+                </VegaWalletContainer>
+              </Tab>
+              <Tab id="orders" name={t('Orders')}>
+                <VegaWalletContainer>
+                  <div className={tabContentClassName}>
+                    <h4 className="text-h4 text-black dark:text-white p-8">
+                      {t('Orders')}
+                    </h4>
+                    <div>
+                      <OrderListContainer />
+                    </div>
+                  </div>
+                </VegaWalletContainer>
+              </Tab>
+              <Tab id="fills" name={t('Fills')}>
+                <VegaWalletContainer>
+                  <div className={tabContentClassName}>
+                    <h4 className="text-h4 text-black dark:text-white p-8">
+                      {t('Fills')}
+                    </h4>
+                    <div>
+                      <FillsContainer />
+                    </div>
+                  </div>
+                </VegaWalletContainer>
+              </Tab>
+            </Tabs>
+          </PortfolioGridChild>
+        </Allotment.Pane>
+        <Allotment.Pane
+          priority={LayoutPriority.Low}
+          preferredSize={300}
+          minSize={50}
+        >
+          <PortfolioGridChild className="h-full mt-4">
+            <Tabs>
+              <Tab id="collateral" name={t('Collateral')}>
+                <VegaWalletContainer>
+                  <AccountsContainer />
+                </VegaWalletContainer>
+              </Tab>
+              <Tab id="deposits" name={t('Deposits')}>
+                <DepositsContainer />
+              </Tab>
+              <Tab id="withdrawals" name={t('Withdrawals')}>
+                <Web3Container>
+                  <VegaWalletContainer>
+                    <WithdrawalsContainer />
+                  </VegaWalletContainer>
+                </Web3Container>
+              </Tab>
+            </Tabs>
+          </PortfolioGridChild>
+        </Allotment.Pane>
+      </ResizablePanel>
     </div>
   );
 };

libs/market-depth/src/lib/orderbook.tsx

@@ -291,10 +291,10 @@ export const Orderbook = ({
         className="sticky top-0 grid grid-cols-4 gap-5 text-right border-b-1 text-ui-small mb-2 pt-4 pb-2 bg-white dark:bg-black z-10"
         style={{ gridAutoRows: '17px' }}
       >
-        <div>{t('Bid Vol')}</div>
+        <div>{t('Bid vol')}</div>
         <div>{t('Price')}</div>
-        <div>{t('Ask Vol')}</div>
-        <div className="pr-4">{t('Cumulative Vol')}</div>
+        <div>{t('Ask vol')}</div>
+        <div className="pr-4">{t('Cumulative vol')}</div>
       </div>
 
       <div

libs/ui-toolkit/src/components/accordion/accordion.tsx

@@ -17,7 +17,8 @@ export const Accordion = ({ panels }: AccordionProps) => {
   const triggerClassNames = classNames(
     'w-full py-2 box-border',
     'appearance-none cursor-pointer focus:outline-none',
-    'flex items-center justify-between border-b border-muted'
+    'flex items-center justify-between border-b border-muted',
+    'text-left'
   );
 
   return (

libs/ui-toolkit/src/components/index.ts

@@ -20,6 +20,7 @@ export * from './loader';
 export * from './lozenge';
 export * from './price-change';
 export * from './radio-group';
+export * from './resizable-panel';
 export * from './select';
 export * from './sparkline';
 export * from './splash';

libs/ui-toolkit/src/components/resizable-panel/index.tsx

@@ -0,0 +1 @@
+export * from './resizable-panel';

libs/ui-toolkit/src/components/resizable-panel/resizable-panel.stories.tsx

@@ -0,0 +1,24 @@
+import type { Story, Meta } from '@storybook/react';
+import { ResizablePanel } from './resizable-panel';
+import { Allotment } from 'allotment';
+import 'allotment/dist/style.css';
+
+export default {
+  component: ResizablePanel,
+  title: 'ResizablePanel',
+} as Meta;
+
+const Template: Story = (args) => (
+  <div className="h-48">
+    <ResizablePanel vertical={true}>
+      <Allotment.Pane minSize={20}>
+        <div>Panel 1</div>
+      </Allotment.Pane>
+      <Allotment.Pane minSize={20}>
+        <div>Panel 2</div>
+      </Allotment.Pane>
+    </ResizablePanel>
+  </div>
+);
+
+export const Default = Template.bind({});

libs/ui-toolkit/src/components/resizable-panel/resizable-panel.tsx

@@ -0,0 +1,39 @@
+import { Allotment } from 'allotment';
+import type { ReactNode } from 'react';
+import 'allotment/dist/style.css';
+
+interface ResizablePanelProps {
+  children: ReactNode;
+  className?: string;
+  defaultSizes?: Array<number>;
+  maxSize?: number;
+  minSize?: number;
+  proportionalLayout?: boolean;
+  snap?: boolean;
+  vertical?: boolean;
+}
+
+export const ResizablePanel = ({
+  children,
+  className,
+  defaultSizes,
+  maxSize,
+  minSize,
+  proportionalLayout,
+  snap,
+  vertical,
+}: ResizablePanelProps) => {
+  return (
+    <Allotment
+      className={className}
+      defaultSizes={defaultSizes}
+      maxSize={maxSize}
+      minSize={minSize}
+      proportionalLayout={proportionalLayout}
+      snap={snap}
+      vertical={vertical}
+    >
+      {children}
+    </Allotment>
+  );
+};

libs/ui-toolkit/src/styles.scss

@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+div {
+  --focus-border: theme('colors.vega.pink');
+  --separator-border: theme('colors.black.10');
+}
+
+div.dark div {
+  --focus-border: theme('colors.vega.yellow');
+  --separator-border: theme('colors.black.70');
+}