From 0c26d99ce2830d3c3e5bd46287648cabb878cdec Mon Sep 17 00:00:00 2001
From: "m.ray" <16125548+MadalinaRaicu@users.noreply.github.com>
Date: Thu, 23 Feb 2023 09:27:11 -0500
Subject: [PATCH] fix(trading): fees breakdown layout and condense tabs (#2976)

---
 .../src/components/fees-breakdown/fees-breakdown.tsx   | 10 +++++-----
 libs/ui-toolkit/src/components/tabs/tabs.tsx           |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/libs/market-info/src/components/fees-breakdown/fees-breakdown.tsx b/libs/market-info/src/components/fees-breakdown/fees-breakdown.tsx
index dcca1251d..747e3d1e0 100644
--- a/libs/market-info/src/components/fees-breakdown/fees-breakdown.tsx
+++ b/libs/market-info/src/components/fees-breakdown/fees-breakdown.tsx
@@ -74,7 +74,7 @@ export const FeesBreakdown = ({
       : '-';
   };
   return (
-    <dl className="grid grid-cols-5">
+    <dl className="grid grid-cols-6">
       <dt className="col-span-2">{t('Infrastructure fee')}</dt>
       {feeFactors && (
         <dd className="text-right col-span-1">
@@ -83,7 +83,7 @@ export const FeesBreakdown = ({
           )}
         </dd>
       )}
-      <dd className="text-right col-span-2">
+      <dd className="text-right col-span-3">
         {formatValue(fees.infrastructureFee)} {symbol || ''}
       </dd>
       <dt className="col-span-2">{t('Liquidity fee')}</dt>
@@ -94,7 +94,7 @@ export const FeesBreakdown = ({
           )}
         </dd>
       )}
-      <dd className="text-right col-span-2">
+      <dd className="text-right col-span-3">
         {formatValue(fees.liquidityFee)} {symbol || ''}
       </dd>
       <dt className="col-span-2">{t('Maker fee')}</dt>
@@ -105,7 +105,7 @@ export const FeesBreakdown = ({
           )}
         </dd>
       )}
-      <dd className="text-right col-span-2">
+      <dd className="text-right col-span-3">
         {formatValue(fees.makerFee)} {symbol || ''}
       </dd>
       <dt className="col-span-2">{t('Total fees')}</dt>
@@ -114,7 +114,7 @@ export const FeesBreakdown = ({
           {totalFeesPercentage(feeFactors)}
         </dd>
       )}
-      <dd className="text-right col-span-2">
+      <dd className="text-right col-span-3">
         {formatValue(totalFees)} {symbol || ''}
       </dd>
     </dl>
diff --git a/libs/ui-toolkit/src/components/tabs/tabs.tsx b/libs/ui-toolkit/src/components/tabs/tabs.tsx
index a727104a0..8b8127a02 100644
--- a/libs/ui-toolkit/src/components/tabs/tabs.tsx
+++ b/libs/ui-toolkit/src/components/tabs/tabs.tsx
@@ -28,7 +28,7 @@ export const Tabs = ({ children, active: activeDefaultId }: TabsProps) => {
             if (!isValidElement(child) || child.props.hidden) return null;
             const isActive = child.props.id === activeTab;
             const triggerClass = classNames(
-              'relative px-4 py-2 border-r border-default',
+              'relative px-4 py-1 border-r border-default',
               'uppercase',
               {
                 'cursor-default': isActive,