feat: MUSD-740, MUSD-746 — MetaMask Card section polish (#29646)

## **Description**

Two small polish items in the MetaMask Card section on Money Home.

- **MUSD-746** wraps the "1% cashback" / "3% cashback" labels on the
Virtual and Metal card rows in the MMDS `Tag` (severity = success) so
they read as pills. This matches the APY tag pattern in the Money Home
header and gives the labels stronger emphasis.
- **MUSD-740** rebalances the `link` variant of `MoneyMetaMaskCard`. The
card image is enlarged from `104×66` to `152×96` (a new `linkCardImage`
style), and the row gains `BoxAlignItems.Center` so the checklist sits
vertically centred next to the larger image. The upsell variant rows are
unchanged.

No copy, analytics, or routing changes.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:
- https://consensyssoftware.atlassian.net/browse/MUSD-740
- https://consensyssoftware.atlassian.net/browse/MUSD-746

## **Manual testing steps**

```gherkin
Feature: MetaMask Card section polish

  Scenario: user views the MetaMask Card section in upsell mode
    Given the Money Account feature flag is enabled and the user has no card
    When the user scrolls to the "MetaMask Card" section on Money Home
    Then "1% cashback" and "3% cashback" render as green pill tags
    And both pills sit immediately below the card name
    And the existing "Get now" buttons are unchanged

  Scenario: user views the MetaMask Card section in link mode
    Given the user is in the link-card flow
    When the "Link MetaMask Card" card is rendered
    Then the card image is visibly larger than before
    And the two checklist bullets ("Up to 3% cash back", "Up to N% APY") are vertically centred next to the image
    And the "Link card" button position is unchanged
```

## **Screenshots/Recordings**

<img width="1206" height="2622" alt="image"
src="https://github.com/user-attachments/assets/0f954d2e-5b0c-4417-9ac0-5bcef3d452c3"
/>


## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/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
- [ ] 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-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

#### Performance checks (if applicable)

- [ ] I've tested on Android
- [ ] I've tested with a power user scenario
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics

## **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]
> **Low Risk**
> Low risk UI-only changes: swaps cashback labels to MMDS `Tag` pills
and tweaks link-mode layout/image sizing without touching navigation,
analytics, or data logic.
> 
> **Overview**
> Updates the Money Home `MoneyMetaMaskCard` UI polish.
> 
> Cashback labels in the upsell rows are now rendered as MMDS `Tag`
pills (success severity) instead of plain green text. Link mode layout
is adjusted by enlarging the card image via a new `linkCardImage` style
and vertically centering the image/bullet row.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
8b2297f. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Kureev

app/components/UI/Money/components/MoneyMetaMaskCard/MoneyMetaMaskCard.styles.ts

@@ -5,6 +5,10 @@ const styles = StyleSheet.create({
     width: 104,
     height: 66,
   },
+  linkCardImage: {
+    width: 152,
+    height: 96,
+  },
 });
 
 export default styles;

app/components/UI/Money/components/MoneyMetaMaskCard/MoneyMetaMaskCard.tsx

@@ -13,6 +13,8 @@ import {
   IconColor,
   IconName,
   IconSize,
+  Tag,
+  TagSeverity,
   Text,
   TextColor,
   TextVariant,
@@ -72,15 +74,11 @@ const CardRow = ({
         <Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium}>
           {cardName}
         </Text>
-        <Text
-          variant={TextVariant.BodySm}
-          fontWeight={FontWeight.Regular}
-          color={TextColor.SuccessDefault}
-        >
+        <Tag severity={TagSeverity.Success}>
           {strings('money.metamask_card.cashback', {
             percentage: cashbackPercentage,
           })}
-        </Text>
+        </Tag>
       </Box>
     </Box>
     <Button
@@ -133,12 +131,13 @@ const LinkContent = ({
     </Text>
     <Box
       flexDirection={BoxFlexDirection.Row}
+      alignItems={BoxAlignItems.Center}
       twClassName="gap-4"
       testID={MoneyMetaMaskCardTestIds.LINK_CONTAINER}
     >
       <Image
         source={mmCardMetal}
-        style={styles.cardImage}
+        style={styles.linkCardImage}
         testID={MoneyMetaMaskCardTestIds.LINK_CARD_IMAGE}
       />
       <Box twClassName="gap-2 flex-1 justify-center">