release(runway): cherry-pick fix: added support link to unlock page cp-13.10.0 (#37986)

- fix: added support link to unlock page (#37967)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub

Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/37967?quickstart=1)

In this PR, we have enabled the MetaMask Support link in unlock page.

Jira Link: https://consensyssoftware.atlassian.net/browse/SL-329

Figma Link:

https://www.figma.com/design/pViOUcmjwhEzFsdrwknpNc/Onboarding-Redesign?node-id=18656-27472&m=dev


## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: added the support link back in unlock page.

## **Related issues**

Fixes:

## **Manual testing steps**

1. Open Extension
2. Create Wallet
3. Lock the app
4. Validate changes in unlock page.
5.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

<img width="1728" height="1007" alt="Screenshot 2025-11-19 at 1 06
31 PM"

src="https://github.com/user-attachments/assets/9dbf610c-1d7a-4aad-9a9f-de52bc23a71a"
/>


### **After**

<!-- [screenshots/recordings] -->

<img width="385" height="1002" alt="Screenshot 2025-11-19 at 12 51
52 PM"

src="https://github.com/user-attachments/assets/8172d54e-09d1-4eb7-ae85-b0b56fa9f1fc"
/>
<img width="381" height="994" alt="Screenshot 2025-11-19 at 12 52 07 PM"

src="https://github.com/user-attachments/assets/c29c2a40-dc66-402b-9812-63e008d116f2"
/>
<img width="498" height="761" alt="Screenshot 2025-11-19 at 12 52 37 PM"

src="https://github.com/user-attachments/assets/58f4cd6e-89c0-46b1-8b48-44fcf5f90c40"
/>
<img width="494" height="647" alt="Screenshot 2025-11-19 at 12 53 04 PM"

src="https://github.com/user-attachments/assets/69b15d7f-ff87-4d6d-b9cc-02d2f3379ff4"
/>
<img width="1727" height="987" alt="Screenshot 2025-11-19 at 12 53
20 PM"

src="https://github.com/user-attachments/assets/1eeabfae-30c7-4dd0-8090-0701eb8cba88"
/>
<img width="1722" height="1031" alt="Screenshot 2025-11-19 at 12 53
38 PM"

src="https://github.com/user-attachments/assets/e5eea7ee-d609-4956-b397-a29b75e74e93"
/>


## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding

Standards](https://github.com/MetaMask/metamask-extension/blob/main/.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/main/.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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds a help/support link to the unlock page and tweaks horizontal logo
spacing with a popup-specific style, wiring `isPopup` from container to
component.
> 
> - **Unlock Page UI** (`ui/pages/unlock-page/unlock-page.component.js`)
> - Add persistent "Need help?" text with link to `SUPPORT_LINK` and
tracking.
> - Reduce "Forgot password?" button bottom margin (`marginBottom` 6 →
4).
> - Apply popup-specific class to `MetaFoxHorizontalLogo` when `isPopup`
is true.
>   - Add `isPopup` to `PropTypes`.
> - **Styling** (`ui/pages/unlock-page/index.scss`)
> - Decrease `unlock-page__mascot-container__horizontal-logo`
margin-bottom (60px → 24px) and add `--popup` modifier (margin-bottom:
0).
> - **Container** (`ui/pages/unlock-page/unlock-page.container.js`)
> - Determine `isPopup` via `getEnvironmentType()` and pass to
component; reuse for restore-in-browser logic.
> - **Tests** (`__snapshots__/unlock-page.test.js.snap`)
> - Update snapshot to reflect new help text/link, spacing changes, and
logo class.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
477688e. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Lwin <[email protected]>
[355e33f](355e33f)

Co-authored-by: Ganesh Suresh Patra <[email protected]>
Co-authored-by: Lwin <[email protected]>

Author: 3 people

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

@@ -16,7 +16,7 @@ exports[`Unlock Page should match snapshot 1`] = `
           class="mm-box unlock-page__mascot-container mm-box--margin-bottom-0"
         >
           <svg
-            class="unlock-page__mascot-container__horizontal-logo"
+            class="unlock-page__mascot-container__horizontal-logo "
             fill="none"
             height="30"
             viewBox="0 0 696 344"
@@ -58,12 +58,31 @@ exports[`Unlock Page should match snapshot 1`] = `
           Unlock
         </button>
         <button
-          class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-bottom-6 mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-bottom-4 mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           data-testid="unlock-forgot-password-button"
           type="button"
         >
           Forgot password?
         </button>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+        >
+          <span>
+             
+            Need help? Contact 
+            <a
+              class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+              href="https://support.metamask.io"
+              rel="noopener noreferrer"
+              target="_blank"
+              type="button"
+            >
+              MetaMask support
+            </a>
+            
+             
+          </span>
+        </p>
       </div>
     </form>
   </div>

ui/pages/unlock-page/index.scss

@@ -24,12 +24,12 @@
     }
 
     &__horizontal-logo {
-      margin-bottom: 60px;
+      margin-bottom: 24px;
       width: 180px;
       height: 180px;
 
-      @include design-system.screen-md-max {
-        margin-bottom: 48px;
+      &--popup {
+        margin-bottom: 0;
       }
     }
 

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

@@ -119,6 +119,10 @@ class UnlockPage extends Component {
      * Reset Wallet
      */
     resetWallet: PropTypes.func,
+    /**
+     * Indicates if the environment is a popup
+     */
+    isPopup: PropTypes.bool,
   };
 
   state = {
@@ -529,7 +533,9 @@ class UnlockPage extends Component {
               {isRehydrationFlow ? (
                 this.renderMascot()
               ) : (
-                <MetaFoxHorizontalLogo className="unlock-page__mascot-container__horizontal-logo" />
+                <MetaFoxHorizontalLogo
+                  className={`unlock-page__mascot-container__horizontal-logo ${this.props.isPopup ? 'unlock-page__mascot-container__horizontal-logo--popup' : ''}`}
+                />
               )}
               {isBeta() ? (
                 <Text
@@ -602,7 +608,7 @@ class UnlockPage extends Component {
               key="import-account"
               type="button"
               onClick={this.onForgotPasswordOrLoginWithDiffMethods}
-              marginBottom={6}
+              marginBottom={4}
               color={
                 isRehydrationFlow
                   ? TextColor.textDefault
@@ -614,38 +620,37 @@ class UnlockPage extends Component {
                 : t('forgotPassword')}
             </Button>
 
-            {isRehydrationFlow && (
-              <Text>
-                {t('needHelp', [
-                  <Button
-                    variant={ButtonVariant.Link}
-                    href={SUPPORT_LINK}
-                    type="button"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    key="need-help-link"
-                    onClick={() => {
-                      this.context.trackEvent(
-                        {
-                          category: MetaMetricsEventCategory.Navigation,
-                          event: MetaMetricsEventName.SupportLinkClicked,
-                          properties: {
-                            url: SUPPORT_LINK,
-                          },
+            <Text variant={TextVariant.bodyMd} color={TextColor.textDefault}>
+              {t('needHelp', [
+                <Button
+                  variant={ButtonVariant.Link}
+                  color={TextColor.primaryDefault}
+                  href={SUPPORT_LINK}
+                  type="button"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  key="need-help-link"
+                  onClick={() => {
+                    this.context.trackEvent(
+                      {
+                        category: MetaMetricsEventCategory.Navigation,
+                        event: MetaMetricsEventName.SupportLinkClicked,
+                        properties: {
+                          url: SUPPORT_LINK,
                         },
-                        {
-                          contextPropsIntoEventProperties: [
-                            MetaMetricsContextProp.PageTitle,
-                          ],
-                        },
-                      );
-                    }}
-                  >
-                    {needHelpText}
-                  </Button>,
-                ])}
-              </Text>
-            )}
+                      },
+                      {
+                        contextPropsIntoEventProperties: [
+                          MetaMetricsContextProp.PageTitle,
+                        ],
+                      },
+                    );
+                  }}
+                >
+                  {needHelpText}
+                </Button>,
+              ])}
+            </Text>
           </Box>
         </Box>
         {!isTestEnvironment && !isRehydrationFlow && (

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

@@ -62,11 +62,13 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     ...restOwnProps
   } = ownProps;
 
+  const isPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP;
+
   const onImport = async () => {
     await propsMarkPasswordForgotten();
     navigate(RESTORE_VAULT_ROUTE);
 
-    if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
+    if (isPopup) {
       global.platform.openExtensionInBrowser?.(RESTORE_VAULT_ROUTE);
     }
   };
@@ -93,6 +95,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     navigate,
     location,
     navState,
+    isPopup,
   };
 };