Replace deprecated mixins `@include H1` - `@include H9` in SCSS with Text component

### Description

Currently, the extension is using outdated mixins `@include H1` - `@include H9`. This CSS should be removed and the JSX associated with these styles replaced with the `Text` component. This will reduce the amount of CSS in the extension and improve the cohesiveness of the UI.

This is a massive undertaking by itself and creating a single PR would be too large. Smaller PRs can be submitted against this issue to ensure easier review and gradual improvements.

### Technical Details

- Remove instances of the deprecated mixins from the CSS and replace the JSX element with `Text` component (`ui/components/component-library/text/text.tsx`) or [appropriate component from the component-library](https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-introduction--docs).
- There will also be CSS that can be removed in favor of the style utility props that are available on the `Text` component. For example, `display: flex` can be replaced with `display={Display.Flex}` prop on the `Text` component. [Check out all the available style utility props in the Text docs in storybook](https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs).
- The `Text` component has a `variant` prop that can be used to set the font size and weight. Use the `TextVariant` enum (`ui/helpers/constants/design-system.ts`) to set the appropriate variant.
- There are 9 deprecated mixins that need to be replaced. The following is a mapping of the mixin to the component that should be used to replace it:

`@include H1` => ``
`@include H2` => ``
`@include H3` => ``
`@include H4` => ``
`@include H5` => ``
`@include H6` => ``
`@include H7` => ``
`@include H8` => ``
`@include H9` => ``

### Acceptance Criteria

- Instances of deprecated mixins `@include H1` - `@include H9` are completely replaced with the `Text` component or appropriate component from the component-library
- Each Pull Request (PR) should include **no more than 3 files**
- The code changes should pass Jest tests, e2e tests, linting, and Storybook without any errors.
- The PR must include before and after screenshots of the UI to ensure there are no visual regressions.

If the acceptance criteria is not met, PRs may be closed.

### Difficulty: Intermediate

Good first issue for: External contributors who are familiar with running the extension locally, have knowledge of React, component props, Jest tests, linting, and Storybook, and want to contribute to improving the cohesiveness of UI in the extension

Search the extension for @include H1 through @include H9, then choose a change limited to three files. Read ui/components/component-library/text/text.tsx and ui/helpers/constants/design-system.ts, and check the Text documentation in Storybook. Done means the selected mixins and related JSX are replaced, with Jest, linting, e2e, Storybook, and before/after screenshots covering the change.

Written by the indexing model from the issue text.