fix: rewards UI fixes button color and overflow

[sophieqgu]

Description

Duplicate of #37818 rebased onto main
Small ui fixes to button color and prevent overflow

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

1. Go to this page...

Screenshots/Recordings

Before

After

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.

---

Note

Refines Rewards Onboarding modal layout and imagery to prevent overflow, adjusts modal height, and adds button hover styling.

• Rewards Onboarding UI:
  • Layout/Sizing:
    • Reduce OnboardingModal height from 800px to 740px.
    • Tweak intro image positioning to top: '25%' and remove extra margins.
    • Add top: 0 to step SVGs; set step images to width: '94%' and drop w-full to prevent overflow.
    • Adjust info containers (remove min-h-30, center content in Step 4) for better vertical alignment.
  • Buttons:
    • Add hover:bg-default-hover for the primary confirm button on the intro step.
    • Ensure skip button retains hover styling.

^{Written by Cursor Bugbot for commit 2bc0e5f. This will update automatically on new commits. Configure here.}

[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]

Builds ready [2bc0e5f]

• builds: chrome, firefox
• builds (beta): chrome, firefox
• builds (flask): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• bundle size: Bundle Size Stats
• user-actions-benchmark: User Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all 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, 15
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1263 ± 96 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Standard Home	uiStartup	1263	1108	1607	96	1316	1429
			load	1087	939	1364	84	1146	1222
			domContentLoaded	1079	934	1352	85	1142	1212
			domInteractive	24	14	100	19	19	80
			firstPaint	629	93	1250	427	1072	1211
			backgroundConnect	237	223	349	15	238	261
			firstReactRender	31	19	57	9	37	49
			getState	26	8	92	14	29	58
			initialActions	1	0	8	1	1	3
			loadScripts	850	712	1103	83	916	983
			setupStore	12	7	39	5	14	20
			numNetworkReqs	13	6	76	19	6	70
	Browserify	Power User Home	uiStartup	2253	2007	2701	214	2386	2701
			load	1175	1016	1549	194	1458	1549
			domContentLoaded	1152	999	1514	192	1437	1514
			domInteractive	57	20	184	50	120	184
			firstPaint	657	220	1538	511	1140	1538
			backgroundConnect	258	240	310	16	268	310
			firstReactRender	81	52	119	19	94	119
			getState	214	179	273	31	232	273
			initialActions	2	0	7	2	2	7
			loadScripts	917	774	1271	187	1185	1271
			setupStore	32	15	54	10	38	54
			numNetworkReqs	124	95	188	31	164	188
	Webpack	Standard Home	uiStartup	862	739	1207	96	873	1103
			load	624	573	953	79	625	859
			domContentLoaded	617	568	933	75	617	840
			domInteractive	18	12	69	13	14	57
			firstPaint	188	63	936	189	200	624
			backgroundConnect	26	12	86	15	30	63
			firstReactRender	33	20	73	11	37	57
			getState	11	6	32	4	13	18
			initialActions	1	0	2	1	1	1
			loadScripts	614	566	923	73	613	829
			setupStore	12	5	40	5	13	18
			numNetworkReqs	13	6	73	19	8	70
	Webpack	Power User Home	uiStartup	1263	1087	1887	204	1391	1887
			load	746	612	1173	150	879	1173
			domContentLoaded	719	597	1119	138	792	1119
			domInteractive	46	16	177	49	106	177
			firstPaint	430	131	1125	332	671	1125
			backgroundConnect	66	14	180	48	87	180
			firstReactRender	50	45	54	2	52	54
			getState	167	99	198	33	192	198
			initialActions	1	1	2	0	1	2
			loadScripts	715	595	1110	135	783	1110
			setupStore	13	8	35	8	15	35
			numNetworkReqs	78	64	131	19	81	131
Firefox	Browserify	Standard Home	uiStartup	1476	1311	2067	128	1499	1779
			load	1239	1130	1546	86	1252	1451
			domContentLoaded	1238	1130	1545	86	1252	1451
			domInteractive	55	33	197	39	52	165
			firstPaint	-	-	-	-	-	-
			backgroundConnect	39	24	112	14	45	57
			firstReactRender	29	22	89	9	28	43
			getState	11	7	39	5	11	23
			initialActions	2	0	3	1	2	2
			loadScripts	1216	1114	1472	82	1232	1426
			setupStore	15	7	159	17	13	36
			numNetworkReqs	12	6	63	15	7	59
	Browserify	Power User Home	uiStartup	3445	2672	4889	732	3907	4889
			load	1571	1332	2212	278	1934	2212
			domContentLoaded	1571	1332	2211	278	1933	2211
			domInteractive	250	92	669	193	496	669
			firstPaint	-	-	-	-	-	-
			backgroundConnect	624	102	1544	469	1046	1544
			firstReactRender	87	47	128	26	106	128
			getState	206	76	552	116	292	552
			initialActions	2	1	3	1	3	3
			loadScripts	1533	1305	2154	272	1848	2154
			setupStore	130	41	487	128	179	487
			numNetworkReqs	124	71	252	60	137	252
	Webpack	Standard Home	uiStartup	1628	1423	1969	124	1666	1926
			load	1380	1217	1649	101	1433	1583
			domContentLoaded	1379	1217	1649	101	1433	1583
			domInteractive	58	29	203	27	70	113
			firstPaint	-	-	-	-	-	-
			backgroundConnect	50	23	209	28	54	109
			firstReactRender	35	25	83	14	34	80
			getState	11	7	51	6	12	20
			initialActions	1	0	2	1	2	2
			loadScripts	1347	1202	1616	96	1400	1543
			setupStore	13	6	72	11	13	37
			numNetworkReqs	13	6	69	17	8	66
	Webpack	Power User Home	uiStartup	3195	2590	4233	557	3980	4233
			load	1684	1448	2284	255	1975	2284
			domContentLoaded	1684	1448	2283	255	1975	2283
			domInteractive	263	72	688	215	517	688
			firstPaint	-	-	-	-	-	-
			backgroundConnect	392	192	815	241	672	815
			firstReactRender	88	49	139	20	95	139
			getState	176	110	601	112	162	601
			initialActions	2	1	3	0	2	3
			loadScripts	1634	1422	2215	241	1924	2215
			setupStore	95	48	165	36	119	165
			numNetworkReqs	128	72	247	63	202	247

📊 Page Load Benchmark Results

Current Commit: 2bc0e5f | Date: 11/18/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

• pageLoadTime-> current mean value: 1.04s (±46ms) 🟡 | historical mean value: 1.04s ⬇️ (historical data)
• domContentLoaded-> current mean value: 726ms (±42ms) 🟢 | historical mean value: 729ms ⬇️ (historical data)
• firstContentfulPaint-> current mean value: 78ms (±15ms) 🟢 | historical mean value: 78ms ⬆️ (historical data)

📈 Detailed Results

Metric	Mean	Std Dev	Min	Max	P95	P99
pageLoadTime	1.04s	46ms	1.02s	1.42s	1.07s	1.42s
domContentLoaded	726ms	42ms	701ms	1.07s	749ms	1.07s
firstPaint	78ms	15ms	60ms	212ms	88ms	212ms
firstContentfulPaint	78ms	15ms	60ms	212ms	88ms	212ms
largestContentfulPaint	0ms	0ms	0ms	0ms	0ms	0ms

Bundle size diffs [🚨 Warning! Bundle size has increased!]

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