fix: ui customizations for redesigned transactions (#28443)

[cryptotavares]

Description

Cherry pick: 072c8c7

Related issues

Fixes: #28322
Fixes: #28339

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.

[sentry-io]

🔍 Existing Issues For Review

Your pull request is modifying functions with the following pre-existing issues:

📄 File: app/scripts/lib/transaction/metrics.ts

Function	Unhandled Issue
buildEventFragmentProperties	TypeError: null has no properties /background.html Event Count: 21 Affected Users: 0
buildEventFragmentProperties	SyntaxError: Invalid or unexpected token /scripts... Event Count: 7 Affected Users: 0
buildEventFragmentProperties	TypeError: Cannot destructure property 'name' of '(intermediate value)' as it is null. ... Event Count: 5 Affected Users: 0
buildEventFragmentProperties	TypeError: e.ￇ槌ￔ榫ￅ槝iceModel is not a function /sc... Event Count: 4 Affected Users: 0
buildEventFragmentProperties	Error: e.ￇ槌ￔ榫ￅ槝iceModel is not a function /notifi... Event Count: 4 Affected Users: 0

---

_{Did you find this useful? React with a 👍 or 👎}

[metamaskbot]

Builds ready [bee54dd]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

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

Page Load Metrics (2542 ± 570 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	377	4778	1753	1123	539
		domContentLoaded	1575	4643	2505	1179	566
		load	1619	4747	2542	1187	570
		domInteractive	20	211	81	52	25
		backgroundConnect	8	108	48	31	15
		firstReactRender	45	405	126	85	41
		getState	4	90	18	20	10
		initialActions	0	1	0	0	0
		loadScripts	1143	3632	1886	916	440
		setupStore	11	65	31	19	9
		uiStartup	1772	5225	2820	1335	641

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

• background: 881 Bytes (0.02%)
• ui: 2.63 KiB (0.03%)
• common: 902 Bytes (0.01%)