style: Update carousel styling and images

[amandaye0h]

Description

This updates the styling of the carousel component so it looks visually cohesive with the new brand and buttons.

Figma design.

Related issues

Fixes:

Manual testing steps

1. Open MetaMask

Screenshots/Recordings

Before

Screen.Recording.2025-04-08.at.7.53.39.AM.mov

After

Screen.Recording.2025-04-08.at.7.57.59.AM.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[metamaskbot]

✨ Files requiring CODEOWNER review ✨

🖥️ @MetaMask/wallet-ux

• ui/components/multichain/carousel/carousel.tsx
• ui/components/multichain/carousel/constants.ts
• ui/components/multichain/carousel/index.scss

[metamaskbot]

Builds ready [8703d46]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• bundle size: Bundle Size Stats
• user-actions-benchmark: User Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all CircleCI artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1227 ± 63 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1227	1097	1401	63	1272	1350
			load	1075	973	1202	59	1151	988
			domContentLoaded	1069	970	1191	60	1179	986
			domInteractive	17	13	63	9	15	30
			firstPaint	779	155	1202	413	234	990
			backgroundConnect	10	6	36	4	9	10
			firstReactRender	19	15	44	5	19	31
			getState	13	5	32	7	7	8
			initialActions	0	0	1	0	0	1
			loadScripts	819	720	935	57	864	917
			setupStore	7	4	17	2	7	8
	Webpack	Home	uiStartup	2175	1762	2618	205	2318	2465
			load	1696	1355	2044	156	1790	1989
			domContentLoaded	1690	1350	2039	155	1785	1964
			domInteractive	17	12	58	10	14	49
			firstPaint	169	68	444	71	282	95
			backgroundConnect	36	11	396	44	396	59
			firstReactRender	186	56	362	110	61	90
			getState	12	4	62	9	7	9
			initialActions	3	1	7	1	4	5
			loadScripts	1678	1344	2013	151	1775	1938
			setupStore	21	6	255	25	34	9
Firefox	Browserify	Home	uiStartup	1389	1206	1951	155	1452	1725
			load	1241	1062	1811	146	1313	1566
			domContentLoaded	1241	1061	1811	146	1313	1566
			domInteractive	103	38	307	43	88	96
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	25	16	93	10	25	47
			firstReactRender	23	19	47	4	24	30
			getState	11	4	189	21	7	9
			initialActions	0	0	2	0	0	1
			loadScripts	1217	1039	1788	146	1294	1537
			setupStore	6	4	21	3	6	7
	Webpack	Home	uiStartup	1547	1347	2084	156	1600	1889
			load	1330	1152	1893	145	1370	1648
			domContentLoaded	1330	1152	1893	145	1370	1647
			domInteractive	96	39	175	24	90	97
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	26	18	84	9	27	47
			firstReactRender	35	29	67	6	38	46
			getState	10	4	38	7	8	9
			initialActions	0	0	2	1	1	1
			loadScripts	1307	1131	1875	144	1345	1625
			setupStore	11	5	297	29	8	9

Bundle size diffs

• background: 0 Bytes (0%)
• ui: 20 Bytes (0%)
• common: 0 Bytes (0%)

[vinnyhoward]

Look good!

[metamaskbot]

Builds ready [170cea3]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• bundle size: Bundle Size Stats
• user-actions-benchmark: User Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all CircleCI artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7, 8
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1190 ± 50 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1190	1080	1309	50	1223	1289
			load	1029	943	1172	45	965	993
			domContentLoaded	1023	940	1168	44	962	988
			domInteractive	17	13	39	6	16	31
			firstPaint	726	147	1132	391	278	991
			backgroundConnect	6	4	21	2	7	9
			firstReactRender	20	15	50	5	20	30
			getState	14	5	45	8	7	9
			initialActions	0	0	1	0	0	1
			loadScripts	787	713	919	43	814	872
			setupStore	7	5	15	2	7	8
	Webpack	Home	uiStartup	2115	1710	2528	179	2259	2322
			load	1627	1304	1880	134	1731	1811
			domContentLoaded	1620	1300	1875	133	1723	1805
			domInteractive	15	11	56	9	13	43
			firstPaint	174	69	390	62	239	92
			backgroundConnect	28	9	344	38	30	61
			firstReactRender	181	54	372	111	59	95
			getState	11	3	27	5	7	9
			initialActions	3	1	8	1	3	5
			loadScripts	1616	1299	1873	134	1721	1803
			setupStore	26	6	304	47	29	8
Firefox	Browserify	Home	uiStartup	1358	1183	1715	101	1419	1570
			load	1208	1040	1567	106	1279	1409
			domContentLoaded	1208	1040	1567	106	1279	1408
			domInteractive	107	38	281	35	86	98
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	13	110	12	20	30
			firstReactRender	22	19	38	3	23	27
			getState	7	4	13	1	8	9
			initialActions	0	0	1	0	0	1
			loadScripts	1189	1026	1551	106	1263	1393
			setupStore	6	4	36	4	6	7
	Webpack	Home	uiStartup	1503	1343	2003	120	1587	1685
			load	1291	1150	1755	108	1362	1459
			domContentLoaded	1291	1150	1755	108	1362	1458
			domInteractive	82	52	192	27	71	90
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	22	15	44	6	24	38
			firstReactRender	34	29	50	4	36	42
			getState	8	4	29	3	8	9
			initialActions	0	0	2	1	1	1
			loadScripts	1272	1134	1724	108	1344	1442
			setupStore	8	5	38	5	8	8