diff --git a/apps/cowswap-frontend/src/common/pure/CoWAMMBanner/CoWAmmBannerContent.tsx b/apps/cowswap-frontend/src/common/pure/CoWAMMBanner/CoWAmmBannerContent.tsx index 8103c4baa8..018ceb9b31 100644 --- a/apps/cowswap-frontend/src/common/pure/CoWAMMBanner/CoWAmmBannerContent.tsx +++ b/apps/cowswap-frontend/src/common/pure/CoWAMMBanner/CoWAmmBannerContent.tsx @@ -255,12 +255,12 @@ export function CoWAmmBannerContent({ borderWidth={2} padding={'10px'} gap={'14px'} - height={'max-content'} + height={90} > {renderStarIcon({ size: 26, top: -16, right: 80, color: `var(${UI.COLOR_COWAMM_LIGHTER_GREEN})` })} -

{renderTextfit(aprMessage, 'single', 24, 48, `apr-${selectedState}`)}

+

{renderTextfit(aprMessage, 'single', 35, 65, `apr-${selectedState}`)}

- {renderTextfit(comparisonMessage, 'multi', 12, isMobile ? 18 : 21, `comparison-${selectedState}`)} + {renderTextfit(comparisonMessage, 'multi', 15, isMobile ? 15 : 21, `comparison-${selectedState}`)} {renderStarIcon({ size: 16, bottom: 3, right: 20, color: `var(${UI.COLOR_COWAMM_LIGHTER_GREEN})` })} diff --git a/apps/cowswap-frontend/src/common/pure/CoWAMMBanner/styled.ts b/apps/cowswap-frontend/src/common/pure/CoWAMMBanner/styled.ts index d8896bfe2b..165e249b33 100644 --- a/apps/cowswap-frontend/src/common/pure/CoWAMMBanner/styled.ts +++ b/apps/cowswap-frontend/src/common/pure/CoWAMMBanner/styled.ts @@ -169,9 +169,13 @@ export const PoolInfo = styled.div<{ display: flex; align-items: ${({ align = 'flex-start' }) => align}; flex-flow: ${({ flow = 'column' }) => flow}; - font-size: 16px; + font-size: inherit; gap: 10px; + ${Media.upToSmall()} { + flex-flow: column wrap; + } + > i { font-style: normal; background: ${({ bgColor }) => bgColor || `var(${UI.COLOR_COWAMM_LIGHT_BLUE})`}; @@ -184,6 +188,10 @@ export const PoolInfo = styled.div<{ border-radius: 62px; width: min-content; box-shadow: var(${UI.BOX_SHADOW_2}); + + ${Media.upToSmall()} { + margin: 0 auto; + } } > i > div {