LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

chore(#819): ui tweaks (#826)

Browse Source 
* chore: tweak panel layout/styling

* chore: tweak panel layout/styling

* chore: add thicker borders
This commit is contained in:
PeteWilliams 2022-07-21 09:10:37 +01:00 committed by GitHub
parent 164108e6aa
commit 0964d6dee5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/trading/pages/markets/trade-grid.tsx
View File

@ -65,7 +65,7 @@ export const TradeMarketHeader = ({
const itemValueClassName =
'font-sans tracking-tighter text-black dark:text-white text-ui';
const headerClassName = classNames(
'w-full p-8 bg-white dark:bg-black',
'w-full p-8 mb-4 bg-white dark:bg-black',
className
);
return (
@ -140,7 +140,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
<Allotment.Pane>
<Allotment proportionalLayout={false} minSize={200}>
<Allotment.Pane priority={LayoutPriority.High} minSize={200}>
<TradeGridChild className="h-full px-4">
<TradeGridChild className="h-full px-4 bg-black-10 dark:bg-black-70">
<Tabs>
<Tab id="candles" name={t('Candles')}>
<TradingViews.Candles marketId={market.id} />
@ -153,13 +153,13 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
</Allotment.Pane>
<Allotment.Pane
priority={LayoutPriority.Low}
preferredSize={375}
preferredSize={330}
minSize={200}
>
<TradeGridChild className="h-full px-4">
<TradeGridChild className="h-full px-4 bg-black-10 dark:bg-black-70">
<Tabs>
<Tab id="ticket" name={t('Ticket')}>
<TradingViews.Ticket marketId={market.id} />
<TradingViews.Ticket marketId={market.id}/>
</Tab>
<Tab id="info" name={t('Info')}>
<TradingViews.Info marketId={market.id} />
@ -169,10 +169,10 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
</Allotment.Pane>
<Allotment.Pane
priority={LayoutPriority.Low}
preferredSize={460}
preferredSize={430}
minSize={200}
>
<TradeGridChild className="h-full px-4">
<TradeGridChild className="h-full px-4 bg-black-10 dark:bg-black-70">
<Tabs>
<Tab id="orderbook" name={t('Orderbook')}>
<TradingViews.Orderbook marketId={market.id} />
@ -186,12 +186,11 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
</Allotment>
</Allotment.Pane>
<Allotment.Pane
snap={true}
priority={LayoutPriority.Low}
preferredSize={200}
minSize={200}
minSize={50}
>
<TradeGridChild className="h-full">
<TradeGridChild className="h-full mt-4">
<Tabs>
<Tab id="positions" name={t('Positions')}>
<TradingViews.Positions />

2
apps/trading/pages/styles.css
View File

@ -10,8 +10,10 @@ body,
html > body {
--focus-border: theme('colors.vega.pink');
--separator-border: theme('colors.black.10');
}
html.dark > body {
--focus-border: theme('colors.vega.yellow');
--separator-border: theme('colors.black.70');
}

2
libs/ui-toolkit/src/components/tabs/tabs.tsx
View File

@ -60,7 +60,7 @@ export const Tabs = ({ children }: TabsProps) => {
return (
<TabsPrimitive.Content
value={child.props.id}
className="h-full"
className="h-full bg-white dark:bg-black"
data-testid={`tab-${child.props.id}`}
>
{child.props.children}