refactor: replace deprecated mixins with Text component in slippage-buttons

[devin-ai-integration]

Description

This pull request replaces deprecated mixins @include H1 - @include H9 in SCSS with the Text component in the "MetaMask/metamask-extension" repository. The changes are made in the ui/pages/swaps/slippage-buttons/index.scss and slippage-buttons.js files.

1. What is the reason for the change?

   • The deprecated mixins @include H1 - @include H9 need to be replaced with the Text component to ensure consistency and maintainability in the codebase.

2. What is the improvement/solution?

   • The deprecated mixins are replaced with the Text component, and the corresponding CSS properties are mapped to the Text component props.

Devin Run Link : https://preview.devin.ai/devin/78aa98c3ee2b43c685a605db902abe1a

Requested by: Devin

Related issues

Partially Fixes: #20496

Manual testing steps

1. Go to the latest build of storybook in this PR
2. Verify that the SlippageButtons component renders correctly with the updated Text components.
3. Ensure that the styles and functionality of the component remain consistent with the previous implementation.

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I’ve followed MetaMask 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.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 69.96%. Comparing base (7a1191b) to head (f1ceba5).
Report is 6 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #25638   +/-   ##
========================================
  Coverage    69.96%   69.96%           
========================================
  Files         1411     1411           
  Lines        49946    49946           
  Branches     13805    13805           
========================================
  Hits         34942    34942           
  Misses       15004    15004           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[metamaskbot]

Builds ready [7ed0f75]

• 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
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (160 ± 187 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	75	131	105	17	8
		domContentLoaded	10	47	23	11	5
		load	46	1852	160	388	187
		domInteractive	10	47	23	11	5

Bundle size diffs

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

[georgewrmarshall]

Left some suggestions

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[metamaskbot]

Builds ready [f1ceba5]

• 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
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (758 ± 407 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	80	404	153	91	43
		domContentLoaded	10	66	24	15	7
		load	49	2157	758	848	407
		domInteractive	10	66	24	15	7

Bundle size diffs

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

[georgewrmarshall]

LGTM

• checked storybook PR build against develop storybook ✅

[garrettbear]

LGTM