fix(progress-bar): fix styling issues (#4841)

* feat: fix styling issues * feat: fix styling issues
cowprotocol · Sep 5, 2024 · 083d489 · 083d489
1 parent 5d4dd48
commit 083d489
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 64 deletions.
diff --git a/apps/cowswap-frontend/src/common/pure/OrderProgressBarV2/index.tsx b/apps/cowswap-frontend/src/common/pure/OrderProgressBarV2/index.tsx
@@ -37,7 +37,11 @@ import { useIsDarkMode } from 'legacy/state/user/hooks'
 
 import { Category, cowAnalytics } from 'modules/analytics'
 
-import { OrderProgressBarStepName, PROGRESS_BAR_TIMER_DURATION, SolverCompetition } from 'common/hooks/orderProgressBarV2'
+import {
+  OrderProgressBarStepName,
+  PROGRESS_BAR_TIMER_DURATION,
+  SolverCompetition,
+} from 'common/hooks/orderProgressBarV2'
 import { SurplusData } from 'common/hooks/useGetSurplusFiatValue'
 import { getIsCustomRecipient } from 'utils/orderUtils/getIsCustomRecipient'
 
@@ -78,7 +82,7 @@ function StepsWrapper({
   customStepTitles,
   customColor,
   isCancelling,
-  isUnfillable
+  isUnfillable,
 }: {
   steps: typeof STEPS
   currentStep: number
@@ -120,10 +124,10 @@ function StepsWrapper({
                 ? 'cancelling'
                 : 'active'
               : index === currentStep + 1
-                ? 'next'
-                : index < currentStep
-                  ? 'done'
-                  : 'future'
+              ? 'next'
+              : index < currentStep
+              ? 'done'
+              : 'future'
           return (
             <div key={index}>
               <StepComponent
@@ -152,7 +156,7 @@ function StepComponent({
   extraContent,
   customColor,
   isUnfillable,
-  isCancelling
+  isCancelling,
 }: {
   status: string
   isFirst: boolean
@@ -355,20 +359,24 @@ function AnimatedTokens({
   sellToken: Currency | TokenWithLogo | null | undefined
   buyToken: Currency | TokenWithLogo | null | undefined
 }): JSX.Element {
+  const ICON_SIZE = 136
+  const MOBILE_ICON_SIZE = 72
+
   return (
     <styledEl.AnimatedTokensWrapper>
-      <styledEl.TokenWrapper position="left">
-        <TokenLogo token={sellToken} size={136} />
+      <styledEl.TokenWrapper position="left" size={ICON_SIZE} sizeMobile={MOBILE_ICON_SIZE}>
+        <TokenLogo token={sellToken} size={ICON_SIZE} sizeMobile={MOBILE_ICON_SIZE} />
       </styledEl.TokenWrapper>
-      <styledEl.TokenWrapper position="center">
-        <TokenLogo token={buyToken} size={136} />
+      <styledEl.TokenWrapper position="center" size={ICON_SIZE} sizeMobile={MOBILE_ICON_SIZE}>
+        <TokenLogo token={buyToken} size={ICON_SIZE} sizeMobile={MOBILE_ICON_SIZE} />
       </styledEl.TokenWrapper>
-      <styledEl.TokenWrapper position="right" bgColor={'#012F7A'}>
+      <styledEl.TokenWrapper position="right" bgColor={'#012F7A'} size={ICON_SIZE} sizeMobile={MOBILE_ICON_SIZE}>
         <ProductLogo
           variant={ProductVariant.CowSwap}
           theme={'dark'}
           overrideHoverColor={'#65D9FF'}
-          height={136}
+          height={58}
+          heightMobile={32}
           logoIconOnly
         />
       </styledEl.TokenWrapper>
@@ -381,21 +389,18 @@ function RenderProgressTopSection({
   order,
   countdown,
   chainId,
-  surplusData
+  surplusData,
 }: Pick<OrderProgressBarV2Props, 'stepName' | 'order' | 'countdown' | 'chainId' | 'surplusData'>) {
   const hideIntent = stepName === 'finished' || stepName === 'cancellationFailed'
 
-  const { randomImage, randomBenefit } = useMemo(
-    () => {
-      const benefits = CHAIN_SPECIFIC_BENEFITS[chainId]
+  const { randomImage, randomBenefit } = useMemo(() => {
+    const benefits = CHAIN_SPECIFIC_BENEFITS[chainId]
 
-      return ({
-        randomImage: SURPLUS_IMAGES[getRandomInt(0, SURPLUS_IMAGES.length - 1)],
-        randomBenefit: benefits[getRandomInt(0, benefits.length - 1)],
-      })
-    },
-    [chainId]
-  )
+    return {
+      randomImage: SURPLUS_IMAGES[getRandomInt(0, SURPLUS_IMAGES.length - 1)],
+      randomBenefit: benefits[getRandomInt(0, benefits.length - 1)],
+    }
+  }, [chainId])
 
   const { surplusPercent, showSurplus } = surplusData || {}
   const shouldShowSurplus = DEBUG_FORCE_SHOW_SURPLUS || showSurplus
@@ -421,7 +426,7 @@ function RenderProgressTopSection({
       case 'initial':
         return (
           <>
-            <styledEl.ProgressImageWrapper bgColor={'#65D9FF'}>
+            <styledEl.ProgressImageWrapper bgColor={'#65D9FF'} padding={'24px'}>
               <AnimatedTokens sellToken={order?.inputToken} buyToken={order?.outputToken} />
             </styledEl.ProgressImageWrapper>
           </>
@@ -437,8 +442,8 @@ function RenderProgressTopSection({
               stepName === 'unfillable'
                 ? '#FFDB9C'
                 : stepName === 'delayed' || stepName === 'submissionFailed' || stepName === 'solved'
-                  ? '#FFB3B3'
-                  : '#65D9FF'
+                ? '#FFB3B3'
+                : '#65D9FF'
             }
             padding={stepName === 'unfillable' ? '20px 0 0' : stepName === 'solving' ? '16px' : '0'}
             height={
@@ -659,23 +664,24 @@ function ExecutingStep(props: OrderProgressBarV2Props) {
 }
 
 const COW_SWAP_BENEFITS = [
-  "CoW Swap solvers search Uniswap, 1inch, Matcha, Sushi and more to find you the best price.",
-  "CoW Swap sets the standard for protecting against MEV attacks such as frontrunning and sandwiching.",
-  "CoW Swap was the first DEX to offer intent-based trading, gasless swaps, coincidences of wants, and many other DeFi innovations.",
-  "CoW Swap is the only exchange that matches Coincidences of Wants (CoWs): peer-to-peer swaps that save on settlement costs.",
-  "You can avoid price impact on large trades by using TWAP orders on CoW Swap.",
+  'CoW Swap solvers search Uniswap, 1inch, Matcha, Sushi and more to find you the best price.',
+  'CoW Swap sets the standard for protecting against MEV attacks such as frontrunning and sandwiching.',
+  'CoW Swap was the first DEX to offer intent-based trading, gasless swaps, coincidences of wants, and many other DeFi innovations.',
+  'CoW Swap is the only exchange that matches Coincidences of Wants (CoWs): peer-to-peer swaps that save on settlement costs.',
+  'You can avoid price impact on large trades by using TWAP orders on CoW Swap.',
   "Limit orders on CoW Swap capture surplus - so if the price moves in your favor, you're likely to get more than you asked for.",
   "On CoW Swap, you can set limit orders for balances you don't have yet.",
   "Limit orders on CoW Swap are free to place and cancel. That's unique in DeFi!",
-  "You can protect all your Ethereum transactions from MEV - not just trades on CoW Swap - by installing MEV Blocker.",
+  'You can protect all your Ethereum transactions from MEV - not just trades on CoW Swap - by installing MEV Blocker.',
   "Liquidity pools on CoW AMM grow faster than on other AMMs because they don't lose money to arbitrage bots.",
-  "CoW Swap has over 20 active solvers - more than any other exchange.",
+  'CoW Swap has over 20 active solvers - more than any other exchange.',
   "CoW Swap's robust solver competition protects your slippage from being exploited by MEV bots.",
-  "Advanced users can create complex, conditional orders directly through CoW Protocol. Read the docs for more info.",
-  "Unlike most other exchanges, CoW Swap doesn't charge you any fees if your trade fails."
+  'Advanced users can create complex, conditional orders directly through CoW Protocol. Read the docs for more info.',
+  "Unlike most other exchanges, CoW Swap doesn't charge you any fees if your trade fails.",
 ]
 
-const TRADE_ON_ARBITRUM_BENEFIT = "CoW Swap is now live on Arbitrum. Switch the network toggle in the nav bar for quick, cheap transactions."
+const TRADE_ON_ARBITRUM_BENEFIT =
+  'CoW Swap is now live on Arbitrum. Switch the network toggle in the nav bar for quick, cheap transactions.'
 
 const CHAIN_SPECIFIC_BENEFITS: Record<SupportedChainId, string[]> = {
   [SupportedChainId.MAINNET]: [TRADE_ON_ARBITRUM_BENEFIT, ...COW_SWAP_BENEFITS],
@@ -723,15 +729,7 @@ const SURPLUS_IMAGES = [
 ]
 
 function FinishedStep(props: OrderProgressBarV2Props) {
-  const {
-    stepName,
-    solverCompetition: solvers,
-    totalSolvers,
-    order,
-    surplusData,
-    chainId,
-    receiverEnsName,
-  } = props
+  const { stepName, solverCompetition: solvers, totalSolvers, order, surplusData, chainId, receiverEnsName } = props
   const [showAllSolvers, setShowAllSolvers] = useState(false)
 
   const { surplusFiatValue, surplusAmount, showSurplus } = surplusData || {}
@@ -929,20 +927,23 @@ function SolvingStep(props: OrderProgressBarV2Props) {
 
   return (
     <styledEl.ProgressContainer>
-      <RenderProgressTopSection {...props} countdown={isUnfillable || isDelayed || isSubmissionFailed || isSolved ? undefined : countdown} />
+      <RenderProgressTopSection
+        {...props}
+        countdown={isUnfillable || isDelayed || isSubmissionFailed || isSolved ? undefined : countdown}
+      />
       <StepsWrapper
         steps={STEPS}
         currentStep={1}
         customStepTitles={
           isUnfillable
             ? { 1: 'Price change' }
             : isDelayed
-              ? { 1: 'Still searching' }
-              : isSubmissionFailed
-                ? { 1: 'A new competition has started' }
-                : isSolved
-                  ? { 1: 'A new competition has started' }
-                  : undefined
+            ? { 1: 'Still searching' }
+            : isSubmissionFailed
+            ? { 1: 'A new competition has started' }
+            : isSolved
+            ? { 1: 'A new competition has started' }
+            : undefined
         }
         extraContent={
           <styledEl.Description>

diff --git a/apps/cowswap-frontend/src/common/pure/OrderProgressBarV2/styled.ts b/apps/cowswap-frontend/src/common/pure/OrderProgressBarV2/styled.ts
@@ -169,6 +169,11 @@ export const ProgressImageWrapper = styled.div<{ bgColor?: string; padding?: str
   position: relative;
   overflow: hidden;
 
+  ${Media.upToSmall()} {
+    min-height: auto;
+    height: auto;
+  }
+
   > img,
   > svg {
     --size: 100%;
@@ -202,6 +207,10 @@ export const ProgressTopSection = styled.div`
   border-radius: 21px;
   background: var(${UI.COLOR_PAPER_DARKER});
   min-height: 230px;
+
+  ${Media.upToSmall()} {
+    min-height: auto;
+  }
 `
 
 export const OriginalOrderIntent = styled.span`
@@ -240,8 +249,14 @@ export const AnimatedTokensWrapper = styled.div`
   overflow: hidden;
 `
 
-export const TokenWrapper = styled.div<{ position: 'left' | 'center' | 'right'; bgColor?: string }>`
-  --size: 136px;
+export const TokenWrapper = styled.div<{
+  position: 'left' | 'center' | 'right'
+  bgColor?: string
+  size: number
+  sizeMobile: number
+}>`
+  --size: ${({ size }) => (size ? `${size}px` : '136px')};
+  --sizeMobile: ${({ sizeMobile }) => (sizeMobile ? `${sizeMobile}px` : 'var(--size)')};
   width: var(--size);
   height: var(--size);
   border-radius: var(--size);
@@ -260,6 +275,12 @@ export const TokenWrapper = styled.div<{ position: 'left' | 'center' | 'right';
   background: ${({ position, bgColor }) =>
     position === 'right' ? bgColor || `var(${UI.COLOR_PRIMARY})` : 'transparent'};
 
+  ${Media.upToSmall()} {
+    height: var(--sizeMobile);
+    width: var(--sizeMobile);
+    border-radius: var(--sizeMobile);
+  }
+
   ${({ position }) =>
     position === 'right' &&
     css`
@@ -274,22 +295,36 @@ export const TokenWrapper = styled.div<{ position: 'left' | 'center' | 'right';
         background: url(${IMAGE_STAR_SHINE}) no-repeat;
         background-size: 100% 100%;
         animation: star-shine 1s infinite;
+
+        ${Media.upToSmall()} {
+          --size: 18px;
+        }
       }
     `}
 
-  > span {
-    padding: ${({ position }) => (position === 'right' ? '45px 40px 34px' : '0')};
-  }
-
   @keyframes appear-left {
     to {
-      transform: translateX(-68px);
+      transform: translateX(calc(var(--size) / -2));
     }
   }
 
   @keyframes appear-right {
     to {
-      transform: translateX(68px);
+      transform: translateX(calc(var(--size) / 2));
+    }
+  }
+
+  ${Media.upToSmall()} {
+    @keyframes appear-left {
+      to {
+        transform: translateX(calc(var(--sizeMobile) / -2));
+      }
+    }
+
+    @keyframes appear-right {
+      to {
+        transform: translateX(calc(var(--sizeMobile) / 2));
+      }
     }
   }
 `

diff --git a/libs/tokens/src/pure/TokenLogo/index.tsx b/libs/tokens/src/pure/TokenLogo/index.tsx
@@ -18,7 +18,9 @@ const invalidUrlsAtom = atom<{ [url: string]: boolean }>({})
 const defaultSize = 42
 
 export const TokenLogoWrapper = styled.div<{ size?: number; sizeMobile?: number }>`
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: var(${UI.COLOR_DARK_IMAGE_PAPER});
   color: var(${UI.COLOR_DARK_IMAGE_PAPER_TEXT});
   border-radius: ${({ size }) => size ?? defaultSize}px;
@@ -42,6 +44,7 @@ export const TokenLogoWrapper = styled.div<{ size?: number; sizeMobile?: number
             border-radius: ${sizeMobile}px;
             width: ${sizeMobile}px;
             height: ${sizeMobile}px;
+            font-size: ${sizeMobile}px;
 
             > img,
             > svg {

diff --git a/libs/ui/src/pure/ProductLogo/index.tsx b/libs/ui/src/pure/ProductLogo/index.tsx
@@ -11,6 +11,7 @@ import { useTheme } from '@cowprotocol/common-hooks'
 import SVG from 'react-inlinesvg'
 import styled from 'styled-components/macro'
 
+import { Media } from '../../consts'
 import { Color } from '../../consts'
 import { CowSwapTheme } from '../../types'
 
@@ -208,12 +209,20 @@ export interface LogoProps {
   overrideColor?: string // Optional override color
   overrideHoverColor?: string // Optional override hover color
   height?: number | string
+  heightMobile?: number | string
   href?: string // Optional href for the logo
   external?: boolean // Indicates if the href is an external link
 }
 
-export const ProductLogoWrapper = styled.span<{ color?: string; hoverColor?: string; height?: number | string }>`
+export const ProductLogoWrapper = styled.span<{
+  color?: string
+  hoverColor?: string
+  height?: number | string
+  heightMobile?: number | string
+}>`
   --height: ${({ height }) => (typeof height === 'number' ? `${height}px` : height || '28px')};
+  --heightMobile: ${({ heightMobile }) =>
+    typeof heightMobile === 'number' ? `${heightMobile}px` : heightMobile || 'var(--height)'};
   --color: ${({ color }) => color || 'inherit'};
   --hoverColor: ${({ hoverColor }) => hoverColor || 'inherit'};
 
@@ -226,6 +235,10 @@ export const ProductLogoWrapper = styled.span<{ color?: string; hoverColor?: str
   height: var(--height);
   transition: color 0.2s ease-in-out;
 
+  ${Media.upToSmall()} {
+    height: var(--heightMobile);
+  }
+
   > a,
   > a > svg,
   > svg {
@@ -252,6 +265,7 @@ export const ProductLogo = ({
   overrideColor,
   overrideHoverColor,
   height,
+  heightMobile,
   href,
   external = false,
 }: LogoProps) => {
@@ -263,7 +277,12 @@ export const ProductLogo = ({
   const logoElement = <SVG src={logoInfo.src} description={logoInfo.alt} />
 
   return (
-    <ProductLogoWrapper color={initialColor} hoverColor={overrideHoverColor || 'inherit'} height={height}>
+    <ProductLogoWrapper
+      color={initialColor}
+      hoverColor={overrideHoverColor || 'inherit'}
+      height={height}
+      heightMobile={heightMobile}
+    >
       {href ? (
         <a href={href} target={external ? '_blank' : '_self'} rel={external ? 'noopener noreferrer' : undefined}>
           {logoElement}