refactor: Replace deprecated mixins with Text component in unlock-pag…

…e.component.js (#25227)

## **Description**

This pull request replaces the deprecated mixins in the
`unlock-page.component.js` and `index.scss` files with the `Text`
component. The changes include updating the `unlock-page__title` class
to use the `Text` component with appropriate properties and removing the
deprecated mixin instance from the SCSS file.

Devin Run Link:
https://preview.devin.ai/devin/de079f9a40fd45adb09783a36409256c

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25227?quickstart=1)

## **Related issues**

Partially Fixes:
#20496

## **Manual testing steps**

1. Go to the latest build of storybook in this PR
2. Verify that the "UnlockPage" component renders correctly with the
updated `Text` component
3. Ensure that the `unlock-page__title` class is replaced with
`[data-testid="unlock-page-title"]` in the
`test/e2e/tests/settings/auto-lock.spec.js` file

## **Screenshots/Recordings**

### **Before**


![](https://api.devin.ai/attachments/991317c8-2109-4a41-bf0c-5d3edd8add50/980098aa-0372-4728-9f89-f8eff532a8f2.png)

### **After**


![](https://api.devin.ai/attachments/49521e22-bbd6-4016-81a2-839816a3008f/0361fee1-e517-4e0e-8959-f22c6b2e1fac.png)

## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.

---------

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: George Marshall <[email protected]>

test/e2e/tests/settings/auto-lock.spec.js

@@ -42,7 +42,9 @@ describe('Auto-Lock Timer', function () {
           '[data-testid="advanced-setting-auto-lock"] button',
         );
         // Verify the wallet is locked
-        const pageTitle = await driver.findElement('.unlock-page__title');
+        const pageTitle = await driver.findElement(
+          '[data-testid="unlock-page-title"]',
+        );
         const unlockButton = await driver.findElement('.unlock-page button');
         assert.equal(await pageTitle.getText(), 'Welcome back!');
         assert.equal(await unlockButton.isDisplayed(), true);

ui/pages/unlock-page/__snapshots__/unlock-page.test.js.snap

@@ -19,7 +19,8 @@ exports[`Unlock Page should match snapshot 1`] = `
         </div>
       </div>
       <h1
-        class="unlock-page__title"
+        class="mm-box mm-text mm-text--heading-lg mm-box--margin-top-1 mm-box--color-text-alternative"
+        data-testid="unlock-page-title"
       >
         Welcome back!
       </h1>

ui/pages/unlock-page/index.scss

@@ -35,14 +35,6 @@
     }
   }
 
-  &__title {
-    @include design-system.H2;
-
-    margin-top: 5px;
-    font-weight: 800;
-    color: var(--color-text-alternative);
-  }
-
   &__form {
     width: 100%;
     margin: 56px 0 8px;

ui/pages/unlock-page/unlock-page.component.js

@@ -1,6 +1,8 @@
 import { EventEmitter } from 'events';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Text } from '../../components/component-library';
+import { TextVariant, TextColor } from '../../helpers/constants/design-system';
 import Button from '../../components/ui/button';
 import TextField from '../../components/ui/text-field';
 import Mascot from '../../components/ui/mascot';
@@ -176,7 +178,15 @@ export default class UnlockPage extends Component {
               </div>
             ) : null}
           </div>
-          <h1 className="unlock-page__title">{t('welcomeBack')}</h1>
+          <Text
+            data-testid="unlock-page-title"
+            as="h1"
+            variant={TextVariant.headingLg}
+            marginTop={1}
+            color={TextColor.textAlternative}
+          >
+            {t('welcomeBack')}
+          </Text>
           <div>{t('unlockMessage')}</div>
           <form className="unlock-page__form" onSubmit={this.handleSubmit}>
             <TextField