Fix: make swap icon white in dark mode [SW-81]

[jmealy]

What it solves

In the transaction summary, the swap icon is black in dark mode.

How this PR fixes it

• Use MUI SvgIcon to render the swap icon so that it changes color according to the theme.

How to test it

• Find or create a swap transaction in the tx history.
• See the the icon is the correct color in both light and dark mode. Make sure the other tx icons are unaffected.

Screenshots

Checklist

• I've tested the branch on mobile 📱
• I've documented how it affects the analytics (if at all) 📊
• I've written a unit/e2e test for it (if applicable) 🧑‍💻

[notion-workspace]

Swap icon in dark in dark theme

[github-actions]

Branch preview

✅ Deploy successful!

Website:
https://swap_icon_dark--walletweb.review.5afe.dev/home?safe=eth:0xA77DE01e157f9f57C7c4A326eeE9C4874D0598b6

Storybook:
https://swap_icon_dark--walletweb.review.5afe.dev/storybook/

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[github-actions]

📦 Next.js Bundle Analysis for safe-wallet-web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	79.03% (-0.03% 🔻)	11619/14702
🔴	Branches	58.66% (-0.22% 🔻)	2856/4869
🟡	Functions	65.94% (-0.14% 🔻)	1855/2813
🟢	Lines	80.42% (-0.03% 🔻)	10477/13028

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / index.tsx	89.29%	79.17%	100%	89.02%
🟢	... / hooks.ts	80%	63.16%	81.82%	80.61%
🟡	... / useTransactionType.tsx	68.29%	40%	100%	69.23%

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🔴	... / index.ts	43.48% (-6.52% 🔻)	0%	16.67% (-3.33% 🔻)	41.18% (-8.82% 🔻)
🟢	... / useWalletBalance.ts	84.62% (-7.69% 🔻)	100%	100%	83.33% (-8.33% 🔻)
🟢	... / index.tsx	100%	50% (-50% 🔻)	100%	100%
🟢	... / index.tsx	88.89% (-1.39% 🔻)	71.05% (-11.21% 🔻)	60%	88.14% (-1.57% 🔻)

Test suite run success

1436 tests passing in 198 suites.

Report generated by 🧪jest coverage report action from 76e959e

[compojoom]

Looks fine to me, but maybe @usame-algan wants to give his 2 cents as the SVG and CSS Master :)

[usame-algan]

There are css classes in globals.css like illustration-text-primary-fill that can be used to overwrite the color of svg icons without having to change anything in components.

Edit: This will not work as the icon is included as an <img>

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}