fix: summary dialog layout nits (#550)

Uniswap · Mar 13, 2023 · f8eac4e · f8eac4e · vercel · Mar 13, 2023
1 parent ee653ee
commit f8eac4e
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 7 deletions.
diff --git a/src/components/Swap/Summary/Details.tsx b/src/components/Swap/Summary/Details.tsx
@@ -26,7 +26,6 @@ import { getEstimateMessage } from './Estimate'
 const Label = styled.span`
   color: ${({ theme }) => theme.secondary};
   margin-right: 0.5rem;
-  max-width: 50%;
 `
 const Value = styled.span<{ color?: Color }>`
   color: ${({ color, theme }) => color && theme[color]};
@@ -90,7 +89,7 @@ function Amount({ tooltipText, label, amount, usdcAmount }: AmountProps) {
   }
 
   return (
-    <Row flex align="flex-start" gap={0.5}>
+    <Row flex align="flex-start" gap={0.75}>
       <Row>
         <ThemedText.Body2 userSelect>
           <Label>{label}</Label>

diff --git a/src/components/Swap/Summary/Estimate.tsx b/src/components/Swap/Summary/Estimate.tsx
@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro'
+import { t } from '@lingui/macro'
 import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import { formatSlippage, Slippage } from 'hooks/useSlippage'
 import { ReactNode, useMemo } from 'react'
@@ -50,7 +50,7 @@ export function getEstimateMessage(
       estimateMessage: t`Output is estimated. You will receive at least ${minReceivedString} or the transaction will revert.`,
       descriptor: (
         <ThemedText.Body2>
-          <Trans>Minimum output after slippage</Trans>
+          {t`Minimum output after slippage`}
           {slippage && (
             <ThemedText.Body2 $inline color={slippage?.warning ?? 'secondary'}>
               {' '}
@@ -69,7 +69,7 @@ export function getEstimateMessage(
       estimateMessage: t`Output is estimated. You will send at most ${maxSentString} or the transaction will revert.`,
       descriptor: (
         <ThemedText.Body2>
-          <Trans>Maximum input after slippage</Trans>
+          {t`Maximum input after slippage`}
           {slippage && (
             <ThemedText.Body2 $inline color={slippage?.warning ?? 'secondary'}>
               {' '}

diff --git a/src/components/Swap/Summary/index.tsx b/src/components/Swap/Summary/index.tsx
@@ -76,8 +76,7 @@ function useReviewState(onSwap: () => Promise<void>, allowance: Allowance, doesT
 }
 
 const Body = styled(Column)`
-  height: 100%;
-  padding: 0.75rem 0.875rem;
+  margin: 0.75rem 0.875rem;
 `
 
 const PriceImpactText = styled.span`