style: Update tabs color, hover and animations

[amandaye0h]

Description

This PR modifies the tab colors to improve the visual hierarchy of the page. It adds a hover effect and animations to make the transitions smoother.

Related issues

None

Manual testing steps

1. Open MetaMask
2. Hover and click on tabs

Screenshots/Recordings

Before

Screen.Recording.2025-03-11.at.10.10.32.PM.mov

After

Screen.Recording.2025-03-11.at.10.10.57.PM.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.

[amandaye0h]

I have read the CLA Document and I hereby sign the CLA

[metamaskbot]

Builds ready [9aa545c]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all 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
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1954 ± 100 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1719	2522	1950	206	99
		domContentLoaded	1696	2495	1902	197	95
		load	1719	2582	1954	209	100
		domInteractive	26	91	38	18	8
		backgroundConnect	18	225	61	44	21
		firstReactRender	16	79	35	22	11
		getState	7	117	20	24	12
		initialActions	0	0	0	0	0
		loadScripts	1280	1944	1453	166	80
		setupStore	8	69	24	21	10
		uiStartup	1981	3026	2280	293	141

Bundle size diffs

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

[metamaskbot]

Builds ready [964189c]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all 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
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • content-script: 0
  • offscreen: 0

Page Load Metrics (3719 ± 2289 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1649	24232	3449	4822	2315
		domContentLoaded	1549	24119	3145	4846	2327
		load	1696	24188	3719	4767	2289
		domInteractive	23	309	59	65	31
		backgroundConnect	76	1872	580	432	208
		firstReactRender	22	268	118	62	30
		getState	31	880	280	205	98
		initialActions	0	1	0	0	0
		loadScripts	1102	23688	2507	4874	2340
		setupStore	12	383	164	120	58
		uiStartup	2341	24325	7157	5246	2519

Bundle size diffs

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

[metamaskbot]

✨ Files requiring CODEOWNER review ✨

🖥️ @MetaMask/wallet-ux

• ui/components/multichain/account-overview/index.scss

[vinnyhoward]

Changes LGTM!

[metamaskbot]

Builds ready [d7b10b5]

• 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
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1193 ± 62 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1193	1078	1389	62	1234	1308
			load	1041	926	1182	60	926	987
			domContentLoaded	1035	921	1179	61	941	987
			domInteractive	16	13	36	4	16	26
			firstPaint	756	73	1168	404	245	966
			backgroundConnect	10	7	71	7	9	10
			firstReactRender	18	14	42	4	19	24
			getState	10	4	26	6	6	8
			initialActions	0	0	1	0	0	1
			loadScripts	822	719	965	59	863	922
			setupStore	7	4	13	2	7	8
	Webpack	Home	uiStartup	930	787	1246	74	947	969
			load	788	602	932	67	830	902
			domContentLoaded	781	584	925	68	825	891
			domInteractive	15	12	57	7	13	34
			firstPaint	469	74	930	336	823	884
			backgroundConnect	17	10	56	9	15	45
			firstReactRender	14	12	27	3	13	24
			getState	6	4	15	2	7	8
			initialActions	0	0	1	0	0	1
			loadScripts	779	574	915	68	823	881
			setupStore	7	5	17	2	7	9
Firefox	Browserify	Home	uiStartup	1376	1174	2027	164	1390	1816
			load	1239	1063	1877	159	1262	1654
			domContentLoaded	1238	1062	1877	159	1261	1654
			domInteractive	98	44	181	23	91	97
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	23	17	58	6	25	32
			firstReactRender	22	19	47	4	22	31
			getState	6	4	18	2	7	8
			initialActions	0	0	1	0	0	1
			loadScripts	1216	1045	1851	158	1234	1625
			setupStore	7	4	19	3	6	7
	Webpack	Home	uiStartup	995	840	1511	184	895	973
			load	870	727	1311	160	794	889
			domContentLoaded	870	725	1311	160	793	888
			domInteractive	114	40	205	24	160	96
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	22	14	93	14	24	64
			firstReactRender	19	16	42	3	19	25
			getState	10	4	73	13	7	9
			initialActions	0	0	1	0	0	1
			loadScripts	853	716	1285	156	778	870
			setupStore	8	4	78	7	7	9

Bundle size diffs

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