feat: text fit optimisation

cowprotocol · Oct 15, 2024 · 8b2dde2 · 8b2dde2
1 parent b0bb426
commit 8b2dde2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git 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})` })}
-          <h3>{renderTextfit(aprMessage, 'single', 24, 48, `apr-${selectedState}`)}</h3>
+          <h3>{renderTextfit(aprMessage, 'single', 35, 65, `apr-${selectedState}`)}</h3>
           <span>
-            {renderTextfit(comparisonMessage, 'multi', 12, isMobile ? 18 : 21, `comparison-${selectedState}`)}
+            {renderTextfit(comparisonMessage, 'multi', 15, isMobile ? 15 : 21, `comparison-${selectedState}`)}
           </span>
           {renderStarIcon({ size: 16, bottom: 3, right: 20, color: `var(${UI.COLOR_COWAMM_LIGHTER_GREEN})` })}
         </styledEl.Card>

diff --git 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 {