some clean up in showing the route

src/components/CurrencyInputPanel/index.tsx

@@ -200,10 +200,10 @@ export default function CurrencyInputPanel({
     if (!priceImpact) return undefined
     if (priceImpact.lessThan('0')) return theme.green1
     const severity = warningSeverity(priceImpact)
-    if (severity < 1) return undefined
+    if (severity < 1) return theme.text4
     if (severity < 3) return theme.yellow1
     return theme.red1
-  }, [priceImpact, theme.green1, theme.red1, theme.yellow1])
+  }, [priceImpact, theme.green1, theme.red1, theme.text4, theme.yellow1])
 
   return (
     <InputPanel id={id} hideInput={hideInput} {...rest}>

src/components/swap/AdvancedSwapDetails.tsx

@@ -6,73 +6,46 @@ import { TYPE } from '../../theme'
 import { computeTradePriceBreakdown } from '../../utils/prices'
 import { AutoColumn } from '../Column'
 import { RowBetween, RowFixed } from '../Row'
-import FormattedPriceImpact from './FormattedPriceImpact'
 import SwapRoute from './SwapRoute'
 
-function TradeSummary({ trade }: { trade: V2Trade | V3Trade }) {
+export interface AdvancedSwapDetailsProps {
+  trade?: V2Trade | V3Trade
+}
+
+export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
   const theme = useContext(ThemeContext)
-  const { priceImpactWithoutFee, realizedLPFee } = computeTradePriceBreakdown(trade)
 
-  return (
-    <>
-      <AutoColumn gap={'8px'}>
-        <RowBetween>
-          <RowFixed>
-            <TYPE.black fontSize={12} fontWeight={400} color={theme.text2}>
-              Price Impact
-            </TYPE.black>
-            {/* <QuestionHelper text="The difference between the market price and estimated price due to trade size." /> */}
-          </RowFixed>
-          <FormattedPriceImpact priceImpact={priceImpactWithoutFee} />
-        </RowBetween>
+  const { realizedLPFee } = computeTradePriceBreakdown(trade)
+
+  const showRoute = Boolean(
+    (trade && trade instanceof V2Trade && trade.route.pairs.length > 1) ||
+      (trade instanceof V3Trade && trade.route.pools.length > 1)
+  )
 
+  return !trade ? null : (
+    <AutoColumn gap="8px">
       <RowBetween>
         <RowFixed>
           <TYPE.black fontSize={12} fontWeight={400} color={theme.text2}>
             Liquidity Provider Fee
           </TYPE.black>
-            {/* <QuestionHelper text="A portion of each trade goes to liquidity providers as a protocol incentive." /> */}
         </RowFixed>
         <TYPE.black fontSize={12} color={theme.text1}>
           {realizedLPFee ? `${realizedLPFee.toSignificant(4)} ${trade.inputAmount.currency.symbol}` : '-'}
         </TYPE.black>
       </RowBetween>
-      </AutoColumn>
-    </>
-  )
-}
 
-export interface AdvancedSwapDetailsProps {
-  trade?: V2Trade | V3Trade
-}
-
-export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
-  const theme = useContext(ThemeContext)
-
-  const showRoute = Boolean(
-    (trade && trade instanceof V2Trade && trade.route.pairs.length > 2) ||
-      (trade instanceof V3Trade && trade.route.pools.length > 2)
-  )
-
-  return (
-    <AutoColumn gap="0px">
-      {trade && (
-        <>
-          <TradeSummary trade={trade} />
       {showRoute && (
-            <>
-              <RowBetween style={{ padding: '4px 16px' }}>
-                <span style={{ display: 'flex', alignItems: 'center' }}>
-                  <TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
+        <RowBetween>
+          <RowFixed>
+            <TYPE.black fontSize={12} fontWeight={400} color={theme.text2}>
               Route
             </TYPE.black>
-                  {/* <QuestionHelper text="Routing through these tokens resulted in the best price for your trade." /> */}
-                </span>
+          </RowFixed>
+          <TYPE.black fontSize={12} color={theme.text1}>
             <SwapRoute trade={trade} />
+          </TYPE.black>
         </RowBetween>
-            </>
-          )}
-        </>
       )}
     </AutoColumn>
   )

src/components/swap/SwapRoute.tsx

@@ -32,7 +32,7 @@ export default memo(function SwapRoute({ trade }: { trade: V2Trade | V3Trade })
         return (
           <Fragment key={i}>
             <Flex alignItems="end">
-              <TYPE.black fontSize={14} color={theme.text1} ml="0.125rem" mr="0.125rem">
+              <TYPE.black fontSize={12} color={theme.text1} ml="0.125rem" mr="0.125rem">
                 {currency.symbol}
               </TYPE.black>
             </Flex>