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};
+ }
}
`;