fix(trading): fees breakdown layout and condense tabs (#2976)

This commit is contained in:
m.ray 2023-02-23 09:27:11 -05:00 committed by GitHub
parent 5aedeba4ff
commit 0c26d99ce2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 6 deletions

View File

@ -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>

View File

@ -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,