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

Improve market page and tabs look and feel

Browse Source
This commit is contained in:
Bartłomiej Głownia 2022-03-09 17:59:48 +01:00 committed by Matthew Russell
parent ebbd50edf3
commit da37ecf72d
2 changed files with 22 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/trading/pages/markets/grid-tabs.tsx
View File

@ -44,26 +44,26 @@ export const GridTabs = ({ children, group }: GridTabsProps) => {
className="h-full grid grid-rows-[min-content_1fr]" className="h-full grid grid-rows-[min-content_1fr]"
onValueChange={(value) => setActiveTab(value)} onValueChange={(value) => setActiveTab(value)}
> >
<Tabs.List className="flex gap-[2px] bg-neutral-200" role="tablist"> <Tabs.List
className="flex flex-nowrap gap-4 overflow-x-auto my-4"
role="tablist"
>
{Children.map(children, (child) => { {Children.map(children, (child) => {
if (!isValidElement(child)) return null; if (!isValidElement(child)) return null;
const isActive = child.props.name === activeTab; const isActive = child.props.name === activeTab;
const triggerClass = classNames( const triggerClass = classNames('py-4', 'px-12', 'capitalize', {
'py-4', 'text-black dark:text-vega-yellow': isActive,
'px-12', 'bg-white dark:bg-black': isActive,
'border-t border-neutral-200', 'text-black dark:text-white': !isActive,
'capitalize', 'bg-black-10 dark:bg-white-10': !isActive,
{ });
'text-vega-pink': isActive,
'bg-white': isActive,
}
);
return ( return (
<Tabs.Trigger value={child.props.name} className={triggerClass}> <Tabs.Trigger value={child.props.name} className={triggerClass}>
{child.props.name} {child.props.name}
</Tabs.Trigger> </Tabs.Trigger>
); );
})} })}
<div className="bg-black-10 dark:bg-white-10 grow"></div>
</Tabs.List> </Tabs.List>
<div className="h-full overflow-auto"> <div className="h-full overflow-auto">
{Children.map(children, (child) => { {Children.map(children, (child) => {

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

@ -18,7 +18,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
); );
return ( return (
<div className={wrapperClasses}> <div className={wrapperClasses}>
<header className="col-start-1 col-end-2 row-start-1 row-end-1 bg-white p-8"> <header className="col-start-1 col-end-2 row-start-1 row-end-1 p-8">
<h1>Market: {market.name}</h1> <h1>Market: {market.name}</h1>
</header> </header>
<TradeGridChild className="col-start-1 col-end-2"> <TradeGridChild className="col-start-1 col-end-2">
@ -93,7 +93,7 @@ export const TradePanels = ({ market }: TradePanelsProps) => {
return ( return (
<div className="h-full grid grid-rows-[min-content_1fr_min-content]"> <div className="h-full grid grid-rows-[min-content_1fr_min-content]">
<header className="bg-white p-8"> <header className="p-8">
<h1>Market: {market.name}</h1> <h1>Market: {market.name}</h1>
</header> </header>
<div className="h-full"> <div className="h-full">
@ -103,18 +103,15 @@ export const TradePanels = ({ market }: TradePanelsProps) => {
)} )}
</AutoSizer> </AutoSizer>
</div> </div>
<div className="flex flex-nowrap gap-2 bg-neutral-200 border-neutral-200 border-t overflow-x-auto"> <div className="flex flex-nowrap gap-4 overflow-x-auto my-4">
{Object.keys(TradingViews).map((key: TradingView) => { {Object.keys(TradingViews).map((key: TradingView) => {
const className = classNames( const isActive = view === key;
'p-8', const className = classNames('py-4', 'px-12', 'capitalize', {
'border-t', 'text-black dark:text-vega-yellow': isActive,
'border-neutral-200', 'bg-white dark:bg-black': isActive,
'capitalize', 'text-black dark:text-white': !isActive,
{ 'bg-black-10 dark:bg-white-10': !isActive,
'text-vega-pink': view === key, });
'bg-white': view === key,
}
);
return ( return (
<button <button
onClick={() => setView(key)} onClick={() => setView(key)}
@ -125,6 +122,7 @@ export const TradePanels = ({ market }: TradePanelsProps) => {
</button> </button>
); );
})} })}
<div className="bg-black-10 dark:bg-white-10 grow"></div>
</div> </div>
</div> </div>
); );