diff --git a/apps/trading/pages/markets/trade-grid.tsx b/apps/trading/pages/markets/trade-grid.tsx index adf274aa9..1213320dd 100644 --- a/apps/trading/pages/markets/trade-grid.tsx +++ b/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) => { <>
- - - + + + - + @@ -195,7 +195,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => { preferredSize={430} minSize={200} > - + @@ -206,7 +206,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => { - + { - +
); diff --git a/apps/trading/pages/portfolio/index.page.tsx b/apps/trading/pages/portfolio/index.page.tsx index 38036f7ff..2e8b54bd5 100644 --- a/apps/trading/pages/portfolio/index.page.tsx +++ b/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 (
- - - - -
-

- {t('Positions')} -

-
- -
-
- - - - -
-

- {t('Orders')} -

-
- -
-
- - - - -
-

- {t('Fills')} -

-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - + + + + + + +
+

+ {t('Positions')} +

+
+ +
+
+ + + + +
+

+ {t('Orders')} +

+
+ +
+
+ + + + +
+

+ {t('Fills')} +

+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
); }; diff --git a/libs/market-depth/src/lib/orderbook.tsx b/libs/market-depth/src/lib/orderbook.tsx index 5fb8adbb0..7b9307ebf 100644 --- a/libs/market-depth/src/lib/orderbook.tsx +++ b/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' }} > -
{t('Bid Vol')}
+
{t('Bid vol')}
{t('Price')}
-
{t('Ask Vol')}
-
{t('Cumulative Vol')}
+
{t('Ask vol')}
+
{t('Cumulative vol')}
{ 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 ( diff --git a/libs/ui-toolkit/src/components/index.ts b/libs/ui-toolkit/src/components/index.ts index 4db3f2510..09061937a 100644 --- a/libs/ui-toolkit/src/components/index.ts +++ b/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'; diff --git a/libs/ui-toolkit/src/components/resizable-panel/index.tsx b/libs/ui-toolkit/src/components/resizable-panel/index.tsx new file mode 100644 index 000000000..22ca1e74a --- /dev/null +++ b/libs/ui-toolkit/src/components/resizable-panel/index.tsx @@ -0,0 +1 @@ +export * from './resizable-panel'; diff --git a/libs/ui-toolkit/src/components/resizable-panel/resizable-panel.stories.tsx b/libs/ui-toolkit/src/components/resizable-panel/resizable-panel.stories.tsx new file mode 100644 index 000000000..40916fbdc --- /dev/null +++ b/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) => ( +
+ + +
Panel 1
+ + +
Panel 2
+ + +
+); + +export const Default = Template.bind({}); diff --git a/libs/ui-toolkit/src/components/resizable-panel/resizable-panel.tsx b/libs/ui-toolkit/src/components/resizable-panel/resizable-panel.tsx new file mode 100644 index 000000000..62fe4c96c --- /dev/null +++ b/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; + maxSize?: number; + minSize?: number; + proportionalLayout?: boolean; + snap?: boolean; + vertical?: boolean; +} + +export const ResizablePanel = ({ + children, + className, + defaultSizes, + maxSize, + minSize, + proportionalLayout, + snap, + vertical, +}: ResizablePanelProps) => { + return ( + + {children} + + ); +}; diff --git a/libs/ui-toolkit/src/styles.scss b/libs/ui-toolkit/src/styles.scss index b5c61c956..f05d74d40 100644 --- a/libs/ui-toolkit/src/styles.scss +++ b/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'); +}