feat(deal-ticket): fix margin and fees alignment (#4956)

This commit is contained in:
Bartłomiej Głownia 2023-10-05 07:40:25 +02:00 committed by GitHub
parent bb4cc1e51d
commit 3b978118dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 5 deletions

View File

@ -273,7 +273,7 @@ export const DealTicketMarginDetails = ({
key={'value-dropdown'} key={'value-dropdown'}
className="flex items-center justify-between w-full gap-2" className="flex items-center justify-between w-full gap-2"
> >
<div className="flex items-center gap-1"> <div className="flex items-center gap-1 text-left">
<Tooltip description={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}> <Tooltip description={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}>
<span className="text-muted">{t('Margin required')}</span> <span className="text-muted">{t('Margin required')}</span>
</Tooltip> </Tooltip>

View File

@ -25,11 +25,11 @@ export const KeyValue = ({
}: KeyValuePros) => { }: KeyValuePros) => {
const displayValue = `${formattedValue ?? '-'} ${symbol || ''}`; const displayValue = `${formattedValue ?? '-'} ${symbol || ''}`;
const valueElement = onClick ? ( const valueElement = onClick ? (
<button onClick={onClick} className="font-mono"> <button onClick={onClick} className="font-mono ml-auto">
{displayValue} {displayValue}
</button> </button>
) : ( ) : (
<div className="font-mono">{displayValue}</div> <div className="font-mono ml-auto">{displayValue}</div>
); );
return ( return (
<div <div
@ -40,12 +40,12 @@ export const KeyValue = ({
}`} }`}
key={typeof label === 'string' ? label : 'value-dropdown'} key={typeof label === 'string' ? label : 'value-dropdown'}
className={classnames( className={classnames(
'text-xs flex justify-between items-center gap-4 flex-wrap', 'text-xs flex justify-between items-center gap-4 flex-wrap text-right',
{ 'ml-2': indent } { 'ml-2': indent }
)} )}
> >
<Tooltip description={labelDescription}> <Tooltip description={labelDescription}>
<div className="text-muted">{label}</div> <div className="text-muted text-left">{label}</div>
</Tooltip> </Tooltip>
<Tooltip description={`${value ?? '-'} ${symbol || ''}`}> <Tooltip description={`${value ?? '-'} ${symbol || ''}`}>
{valueElement} {valueElement}