blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

orderbook layout

This commit is contained in:
saml33 2022-09-19 15:36:09 +10:00
parent 2b4f3410d2
commit a2f83b527d
1 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/trade/Orderbook.tsx
View File

@ -387,9 +387,9 @@ const Orderbook = ({ depth = 12 }) => {
/> />
</Tooltip> </Tooltip>
</div> </div>
<div className="flex items-center justify-between px-4 pb-2 text-xs text-th-fgd-4"> <div className="grid grid-cols-2 px-4 pb-2 text-xs text-th-fgd-4">
<div>Size</div> <div className="col-span-1 text-right">Size</div>
<div>Price</div> <div className="col-span-1 text-right">Price</div>
</div> </div>
<div className=""> <div className="">
{showSells {showSells
@ -421,12 +421,14 @@ const Orderbook = ({ depth = 12 }) => {
) )
: null} : null}
{showBuys && showSells ? ( {showBuys && showSells ? (
<div className="my-2 flex justify-between border-y border-th-bkg-2 py-2 px-4 text-xs"> <div className="my-2 grid grid-cols-2 border-y border-th-bkg-3 py-2 px-4 text-xs">
<div className="text-th-fgd-3">{t('spread')}</div> <div className="col-span-1 flex justify-between">
<div className="text-th-fgd-1"> <div className="text-th-fgd-3">{t('spread')}</div>
{orderbookData?.spread.toFixed(2)} <div className="text-th-fgd-1">
{orderbookData?.spread.toFixed(2)}
</div>
</div> </div>
<div className="text-th-fgd-1"> <div className="col-span-1 text-right text-th-fgd-1">
{orderbookData?.spreadPercentage.toFixed(2)}% {orderbookData?.spreadPercentage.toFixed(2)}%
</div> </div>
</div> </div>
@ -544,7 +546,7 @@ const OrderbookRow = ({
<div className="flex w-full justify-start pl-2"> <div className="flex w-full justify-start pl-2">
<div <div
style={{ fontFeatureSettings: 'zero 1' }} style={{ fontFeatureSettings: 'zero 1' }}
className={`z-10 w-16 pl-2 font-mono text-xs leading-5 md:leading-6 ${ className={`z-10 w-full text-right font-mono text-xs leading-5 md:leading-6 ${
/*hasOpenOrder*/ false ? 'text-th-primary' : '' /*hasOpenOrder*/ false ? 'text-th-primary' : ''
}`} }`}
// onClick={handleSizeClick} // onClick={handleSizeClick}
@ -561,7 +563,7 @@ const OrderbookRow = ({
</div> </div>
<Line <Line
className={`absolute right-0 opacity-90 ${ className={`absolute left-0 opacity-90 ${
side === 'buy' ? `bg-th-green-muted` : `bg-th-red-muted` side === 'buy' ? `bg-th-green-muted` : `bg-th-red-muted`
}`} }`}
data-width={sizePercent + '%'} data-width={sizePercent + '%'}