feat: fix deal ticket margin and fees alignment

2023-10-02 15:02:21 +02:00
2 changed files with 5 additions and 5 deletions
@@ -273,7 +273,7 @@ export const DealTicketMarginDetails = ({
                key={'value-dropdown'}
                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)}>
                    <span className="text-muted">{t('Margin required')}</span>
                  </Tooltip>
@@ -25,11 +25,11 @@ export const KeyValue = ({
 }: KeyValuePros) => {
  const displayValue = `${formattedValue ?? '-'} ${symbol || ''}`;
  const valueElement = onClick ? (
-    <button onClick={onClick} className="font-mono">
+    <button onClick={onClick} className="font-mono ml-auto">
      {displayValue}
    </button>
  ) : (
-    <div className="font-mono">{displayValue}</div>
+    <div className="font-mono ml-auto">{displayValue}</div>
  );
  return (
    <div
@@ -40,12 +40,12 @@ export const KeyValue = ({
      }`}
      key={typeof label === 'string' ? label : 'value-dropdown'}
      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 }
      )}
    >
      <Tooltip description={labelDescription}>
-        <div className="text-muted">{label}</div>
+        <div className="text-muted text-left">{label}</div>
      </Tooltip>
      <Tooltip description={`${value ?? '-'} ${symbol || ''}`}>
        {valueElement}