fix(trading): fees breakdown layout and condense tabs (#2976)
This commit is contained in:
parent
5aedeba4ff
commit
0c26d99ce2
@ -74,7 +74,7 @@ export const FeesBreakdown = ({
|
|||||||
: '-';
|
: '-';
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<dl className="grid grid-cols-5">
|
<dl className="grid grid-cols-6">
|
||||||
<dt className="col-span-2">{t('Infrastructure fee')}</dt>
|
<dt className="col-span-2">{t('Infrastructure fee')}</dt>
|
||||||
{feeFactors && (
|
{feeFactors && (
|
||||||
<dd className="text-right col-span-1">
|
<dd className="text-right col-span-1">
|
||||||
@ -83,7 +83,7 @@ export const FeesBreakdown = ({
|
|||||||
)}
|
)}
|
||||||
</dd>
|
</dd>
|
||||||
)}
|
)}
|
||||||
<dd className="text-right col-span-2">
|
<dd className="text-right col-span-3">
|
||||||
{formatValue(fees.infrastructureFee)} {symbol || ''}
|
{formatValue(fees.infrastructureFee)} {symbol || ''}
|
||||||
</dd>
|
</dd>
|
||||||
<dt className="col-span-2">{t('Liquidity fee')}</dt>
|
<dt className="col-span-2">{t('Liquidity fee')}</dt>
|
||||||
@ -94,7 +94,7 @@ export const FeesBreakdown = ({
|
|||||||
)}
|
)}
|
||||||
</dd>
|
</dd>
|
||||||
)}
|
)}
|
||||||
<dd className="text-right col-span-2">
|
<dd className="text-right col-span-3">
|
||||||
{formatValue(fees.liquidityFee)} {symbol || ''}
|
{formatValue(fees.liquidityFee)} {symbol || ''}
|
||||||
</dd>
|
</dd>
|
||||||
<dt className="col-span-2">{t('Maker fee')}</dt>
|
<dt className="col-span-2">{t('Maker fee')}</dt>
|
||||||
@ -105,7 +105,7 @@ export const FeesBreakdown = ({
|
|||||||
)}
|
)}
|
||||||
</dd>
|
</dd>
|
||||||
)}
|
)}
|
||||||
<dd className="text-right col-span-2">
|
<dd className="text-right col-span-3">
|
||||||
{formatValue(fees.makerFee)} {symbol || ''}
|
{formatValue(fees.makerFee)} {symbol || ''}
|
||||||
</dd>
|
</dd>
|
||||||
<dt className="col-span-2">{t('Total fees')}</dt>
|
<dt className="col-span-2">{t('Total fees')}</dt>
|
||||||
@ -114,7 +114,7 @@ export const FeesBreakdown = ({
|
|||||||
{totalFeesPercentage(feeFactors)}
|
{totalFeesPercentage(feeFactors)}
|
||||||
</dd>
|
</dd>
|
||||||
)}
|
)}
|
||||||
<dd className="text-right col-span-2">
|
<dd className="text-right col-span-3">
|
||||||
{formatValue(totalFees)} {symbol || ''}
|
{formatValue(totalFees)} {symbol || ''}
|
||||||
</dd>
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
|
@ -28,7 +28,7 @@ export const Tabs = ({ children, active: activeDefaultId }: TabsProps) => {
|
|||||||
if (!isValidElement(child) || child.props.hidden) return null;
|
if (!isValidElement(child) || child.props.hidden) return null;
|
||||||
const isActive = child.props.id === activeTab;
|
const isActive = child.props.id === activeTab;
|
||||||
const triggerClass = classNames(
|
const triggerClass = classNames(
|
||||||
'relative px-4 py-2 border-r border-default',
|
'relative px-4 py-1 border-r border-default',
|
||||||
'uppercase',
|
'uppercase',
|
||||||
{
|
{
|
||||||
'cursor-default': isActive,
|
'cursor-default': isActive,
|
||||||
|
Loading…
Reference in New Issue
Block a user