diff --git a/scripts/chain-configs/optimism/assets/grayscale-logo.svg b/scripts/chain-configs/optimism/assets/grayscale-logo.svg index f1f83d901..03feaff02 100644 --- a/scripts/chain-configs/optimism/assets/grayscale-logo.svg +++ b/scripts/chain-configs/optimism/assets/grayscale-logo.svg @@ -1,12 +1,5 @@ - - - - - - - - - - - - + + + + + \ No newline at end of file diff --git a/scripts/chain-configs/optimism/assets/logo.svg b/scripts/chain-configs/optimism/assets/logo.svg index 2e5ce3103..126dbea86 100644 --- a/scripts/chain-configs/optimism/assets/logo.svg +++ b/scripts/chain-configs/optimism/assets/logo.svg @@ -1,5 +1,5 @@ - - - - - + + + + + \ No newline at end of file diff --git a/src/assets/chain-logos/optimism-grayscale.svg b/src/assets/chain-logos/optimism-grayscale.svg index f1f83d901..03feaff02 100644 --- a/src/assets/chain-logos/optimism-grayscale.svg +++ b/src/assets/chain-logos/optimism-grayscale.svg @@ -1,12 +1,5 @@ - - - - - - - - - - - - + + + + + \ No newline at end of file diff --git a/src/assets/chain-logos/optimism-sepolia-grayscale.svg b/src/assets/chain-logos/optimism-sepolia-grayscale.svg index f1f83d901..03feaff02 100644 --- a/src/assets/chain-logos/optimism-sepolia-grayscale.svg +++ b/src/assets/chain-logos/optimism-sepolia-grayscale.svg @@ -1,12 +1,5 @@ - - - - - - - - - - - - + + + + + \ No newline at end of file diff --git a/src/assets/chain-logos/optimism-sepolia.svg b/src/assets/chain-logos/optimism-sepolia.svg index 2e5ce3103..126dbea86 100644 --- a/src/assets/chain-logos/optimism-sepolia.svg +++ b/src/assets/chain-logos/optimism-sepolia.svg @@ -1,5 +1,5 @@ - - - - - + + + + + \ No newline at end of file diff --git a/src/assets/chain-logos/optimism.svg b/src/assets/chain-logos/optimism.svg index 2e5ce3103..126dbea86 100644 --- a/src/assets/chain-logos/optimism.svg +++ b/src/assets/chain-logos/optimism.svg @@ -1,5 +1,5 @@ - - - - - + + + + + \ No newline at end of file diff --git a/src/assets/token-logos/op.svg b/src/assets/token-logos/op.svg index 2e5ce3103..6286f1011 100644 --- a/src/assets/token-logos/op.svg +++ b/src/assets/token-logos/op.svg @@ -1,5 +1,5 @@ - - - - - + + + + + \ No newline at end of file diff --git a/src/views/DepositStatus/components/DepositStatusUpperCard.tsx b/src/views/DepositStatus/components/DepositStatusUpperCard.tsx index d16672411..418530448 100644 --- a/src/views/DepositStatus/components/DepositStatusUpperCard.tsx +++ b/src/views/DepositStatus/components/DepositStatusUpperCard.tsx @@ -417,6 +417,16 @@ const AnimatedLogoFromChain = styled(AnimatedLogo)<{ status: DepositStatus }>` #path-to-animate { fill: currentColor; } + + // Set the fill on the svg based on status if id=require-fill is present + &#requires-fill { + fill: ${({ status }) => + status === "deposit-reverted" + ? COLORS.warning + : status === "depositing" + ? COLORS.white + : COLORS.aqua}; + } } `; @@ -430,12 +440,29 @@ const AnimatedLogoToChain = styled(AnimatedLogo)<{ status: DepositStatus }>` ? COLORS.white : COLORS.aqua}; + fill: ${({ status }) => + status === "depositing" || status === "deposit-reverted" + ? COLORS["grey-400"] + : status === "filling" + ? COLORS.white + : COLORS.aqua}; + // Use currentColor for the fill of rect, circle, and #path-to-animate & rect, circle, #path-to-animate { fill: currentColor; } + + // Set the fill on the svg based on status if id=require-fill is present + &#requires-fill { + fill: ${({ status }) => + status === "deposit-reverted" + ? COLORS.warning + : status === "depositing" + ? COLORS.white + : COLORS.aqua}; + } } `;