fix: JIRA-759, 760, 765, 754, 756 cp-13.10.0 (#37848)

<!--
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?
-->

In this PR, Updated Transaction Shield UI Bugs.

Jira Link: 
- https://consensyssoftware.atlassian.net/browse/SUBS-759
- https://consensyssoftware.atlassian.net/browse/SUBS-760
- https://consensyssoftware.atlassian.net/browse/SUBS-765
- https://consensyssoftware.atlassian.net/browse/SUBS-754
- https://consensyssoftware.atlassian.net/browse/SUBS-756


Figma Link: 
-
https://www.figma.com/design/HTAO1SrmixV4ppv7qIvLoa/Metamask-Transaction-Shield?node-id=14740-209891&m=dev
-
https://www.figma.com/design/agblIyQvyxSoqGMjQDAPBK/Transaction-Shield?node-id=277-14&p=f&t=apuyU6XgEuw694p7-0

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

## **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: Used feature flag to only show this change when
sidepanel flag is enabled for chrome. Updated button on wallet creation
successful page from 'Done' to 'Open wallet'.

## **Related issues**

Fixes:

## **Manual testing steps**

1. Open extension
2. Create wallet and validate Transaction Shield from settings. 

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

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

<img width="382" height="938" alt="Screenshot 2025-11-14 at 3 58 50 PM"
src="https://github.com/user-attachments/assets/b709385d-4179-49da-8c85-56d591594761"
/>
![Uploading Screenshot 2025-11-14 at 4.45.54 PM.png…]()


## **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]
> Updates Transaction Shield copy and i18n, improves responsive layouts
and theming, replaces the entry modal animation with a static image, and
renames the billing action to “Manage billing.”
> 
> - **Frontend UI/Styles**:
> - **Shield Entry Modal (`ui/components/app/shield-entry-modal/`)**:
Replace animation with static image (`transaction-shield-modal.png`),
add responsive title/spacing, full-height body, and new
`shield-entry-modal-sheild-image` styles.
> - **Settings Layout (`ui/pages/settings/index.scss`)**: On small
screens, modules use flex column with scroll; similar adjustments in
sidepanel selected view.
> - **Transaction Shield Tab
(`ui/pages/settings/transaction-shield-tab/`)**: Add light-theme
inactive background (`--shield-membership-inactive-light`) with new
modifier class; remove forced dark theme; minor styling.
> - **Claims Form (`claims-form.tsx`)**: Add padding/margins, keep only
section headers (remove descriptive subtext), retain dividers.
> - **Shield Plan (`ui/pages/shield-plan/`)**: Tweak plan card
padding/gaps and responsive price font; move spacing from props to CSS.
> - **Colors (`ui/css/utilities/colors.scss`)**: Add
`--shield-membership-inactive-light`.
> - **i18n (`app/_locales/en*/messages.json`)**:
> - Update copy: `shieldTxDetails1Title` to "Up to $10,000 transaction
protection"; billing action to `"Manage billing"`.
> - Remove unused: `shieldClaimIncidentDetailsDescription`,
`shieldClaimPersonalDetailsDescription`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
1b81792. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: smgv

app/_locales/en/messages.json

@@ -4,6 +4,11 @@
   .shield-entry-modal__title {
     line-height: 1em;
     font-size: 2.25rem;
+
+    @include design-system.screen-sm-max {
+      font-size: 2rem;
+      margin-top: 16px;
+    }
   }
 
   .shield-entry-modal__content {
@@ -43,4 +48,13 @@
       width: 100%;
     }
   }
+
+  &-sheild-image {
+    width: 346px;
+    height: 252px;
+
+    @include design-system.screen-sm-max {
+      width: 322px;
+    }
+  }
 }

app/_locales/en_GB/messages.json

@@ -47,12 +47,12 @@ import {
 } from '../../../../shared/constants/subscriptions';
 import {
   AlignItems,
+  BlockSize,
   Display,
   FlexDirection,
 } from '../../../helpers/constants/design-system';
 import { TRANSACTION_SHIELD_LINK } from '../../../helpers/constants/common';
 import { ThemeType } from '../../../../shared/constants/preferences';
-import ShieldIllustrationAnimation from './shield-illustration-animation';
 
 const ShieldEntryModal = ({
   skipEventSubmission = false,
@@ -197,6 +197,7 @@ const ShieldEntryModal = ({
           flexDirection={FlexDirection.Column}
           gap={3}
           paddingTop={4}
+          height={BlockSize.Full}
         >
           <Text
             fontFamily={FontFamily.Hero}
@@ -216,15 +217,11 @@ const ShieldEntryModal = ({
               ? t('shieldEntryModalSubtitleA', ['$10,000'])
               : t('shieldEntryModalSubtitleB', ['$10,000'])}
           </Text>
-          <Box className="grid place-items-center">
+          <Box className="shield-entry-modal-sheild-image flex-1 flex items-center justify-center">
             <img
-              src="/images/shield-entry-modal-bg.png"
+              src="/images/transaction-shield-modal.png"
               alt="Shield Entry Illustration"
-              className="col-start-1 row-start-1"
-            />
-            <ShieldIllustrationAnimation
-              containerClassName="shield-entry-modal-shield-illustration__container col-start-1 row-start-1"
-              canvasClassName="shield-entry-modal-shield-illustration__canvas"
+              className="mx-auto h-full w-full object-contain"
             />
           </Box>
         </ModalBody>

app/images/transaction-shield-modal.png

@@ -24,4 +24,5 @@ Before adding a color here make sure that there isn't a design token available.
   --color-network-linea-mainnet-default: #121212;
   --color-network-linea-mainnet-inverse: #fcfcfc;
   --welcome-bg-light: #fff2eb;
+  --shield-membership-inactive-light: #dadce5;
 }

ui/components/app/shield-entry-modal/index.scss

@@ -397,7 +397,9 @@
 
         &__modules {
           @include design-system.screen-sm-max {
-            display: block;
+            display: flex;
+            flex-flow: column;
+            overflow-y: auto;
           }
         }
       }
@@ -547,7 +549,8 @@
     }
 
     .settings-page__content__modules {
-      display: block;
+      display: flex;
+      flex-flow: column;
     }
   }
 }

ui/components/app/shield-entry-modal/shield-entry-modal.tsx

@@ -386,9 +386,8 @@ const ClaimsForm = ({ isView = false }: { isView?: boolean }) => {
 
   return (
     <Box
-      className="submit-claim-page flex flex-col"
+      className="submit-claim-page flex flex-col pt-4 px-4 pb-4"
       data-testid="submit-claim-page"
-      padding={4}
       gap={4}
     >
       {!isView && pendingClaims.length > 0 && (
@@ -430,16 +429,9 @@ const ClaimsForm = ({ isView = false }: { isView?: boolean }) => {
       </Text>
       {/* Personal details */}
       <Box>
-        <Text variant={TextVariant.HeadingSm}>
+        <Text variant={TextVariant.HeadingSm} className="mb-2">
           {t('shieldClaimPersonalDetails')}
         </Text>
-        <Text
-          variant={TextVariant.BodySm}
-          color={TextColor.TextAlternative}
-          className="mb-2"
-        >
-          {t('shieldClaimPersonalDetailsDescription')}
-        </Text>
         <Box
           borderColor={BoxBorderColor.BorderMuted}
           className="w-full h-[1px] border border-b-0"
@@ -495,17 +487,9 @@ const ClaimsForm = ({ isView = false }: { isView?: boolean }) => {
       />
       {/* Incident details */}
       <Box className="mt-4">
-        <Text variant={TextVariant.HeadingSm}>
+        <Text variant={TextVariant.HeadingSm} className="mb-2">
           {t('shieldClaimIncidentDetails')}
         </Text>
-        <Text
-          variant={TextVariant.BodySm}
-          color={TextColor.TextAlternative}
-          className="mb-2"
-        >
-          {t('shieldClaimIncidentDetailsDescription')}
-        </Text>
-
         <Box
           borderColor={BoxBorderColor.BorderMuted}
           className="w-full h-[1px] border border-b-0"

ui/css/utilities/colors.scss

@@ -36,6 +36,10 @@
     &--inactive {
       background-color: var(--color-background-subsection);
 
+      &-light {
+        background-color: var(--shield-membership-inactive-light);
+      }
+
       .transaction-shield-page__membership-text {
         color: var(--color-text-default);
       }

ui/pages/settings/index.scss

@@ -12,6 +12,7 @@ import {
 } from '@metamask/subscription-controller';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { NameType } from '@metamask/name-controller';
+import { useSelector } from 'react-redux';
 import {
   BannerAlert,
   BannerAlertSeverity,
@@ -85,6 +86,7 @@ import {
   ShieldErrorStateViewEnum,
 } from '../../../../shared/constants/subscriptions';
 import { ThemeType } from '../../../../shared/constants/preferences';
+import { getTheme } from '../../../selectors';
 import CancelMembershipModal from './cancel-membership-modal';
 import { isCryptoPaymentMethod } from './types';
 
@@ -104,6 +106,8 @@ const TransactionShield = () => {
   }, [search]);
 
   const { formatCurrency } = useFormatters();
+  const theme = useSelector(getTheme);
+  const isLightTheme = theme === ThemeType.light;
 
   const {
     customerId,
@@ -645,7 +649,6 @@ const TransactionShield = () => {
       {membershipErrorBanner}
       <Box className="transaction-shield-page__container" marginBottom={4}>
         <Box
-          data-theme={ThemeType.dark}
           className={classnames(
             'transaction-shield-page__row transaction-shield-page__membership',
             {
@@ -655,6 +658,8 @@ const TransactionShield = () => {
                 isMembershipInactive && !showSkeletonLoader,
               'transaction-shield-page__membership--active':
                 !isMembershipInactive && !showSkeletonLoader,
+              'transaction-shield-page__membership--inactive-light':
+                isLightTheme && isMembershipInactive && !showSkeletonLoader,
             },
           )}
           {...rowsStyleProps}