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

feat: improve styles for market header

Browse Source
This commit is contained in:
Matthew Russell 2024-02-07 17:30:05 -08:00
parent 96a07b6379
commit 58df46687b
1 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/trading/components/market-header/mobile-market-header.tsx
View File

@ -36,7 +36,7 @@ export const MobileMarketHeader = () => {
setOpenMarket(x); setOpenMarket(x);
}} }}
trigger={ trigger={
<h1 className="flex gap-1 sm:gap-2 md:gap-4 items-center text-lg md:text-lg whitespace-nowrap"> <h1 className="flex gap-1 sm:gap-2 md:gap-4 items-center text-base leading-3 md:text-lg whitespace-nowrap">
{data {data
? data.tradableInstrument.instrument.code ? data.tradableInstrument.instrument.code
: t('Select market')} : t('Select market')}
@ -64,7 +64,7 @@ export const MobileMarketHeader = () => {
setOpenPrice(x); setOpenPrice(x);
}} }}
trigger={ trigger={
<span className="flex gap-1 items-center md:text-md whitespace-nowrap"> <span className="flex gap-2 items-end md:text-md whitespace-nowrap leading-3">
{data && ( {data && (
<> <>
<span className="text-xs"> <span className="text-xs">
@ -73,27 +73,29 @@ export const MobileMarketHeader = () => {
decimalPlaces={data.decimalPlaces} decimalPlaces={data.decimalPlaces}
/> />
</span> </span>
<span className="flex items-center gap-1">
<MarketMarkPrice <MarketMarkPrice
marketId={data.id} marketId={data.id}
decimalPlaces={data.decimalPlaces} decimalPlaces={data.decimalPlaces}
/> />
</> <VegaIcon
)} name={VegaIconNames.CHEVRON_DOWN}
<span size={16}
className={classNames( className={classNames(
'transition-transform ease-in-out duration-300', 'transition-transform ease-in-out duration-300',
{ {
'rotate-180': openPrice, 'rotate-180': openPrice,
} }
)} )}
> />
<VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={16} />
</span> </span>
</>
)}
</span> </span>
} }
> >
{data && ( {data && (
<div className="p-4 text-sm grid grid-cols-2 items-center gap-4"> <div className="px-3 py-6 text-sm grid grid-cols-2 items-center gap-x-4 gap-y-6">
<MarketHeaderStats market={data} /> <MarketHeaderStats market={data} />
</div> </div>
)} )}