fix(TMCU-513): update View More card styling and Perps routing (#27078)

## **Description**

Updates the shared "View more" card in the homepage carousels to match
the updated design, and changes the Perps "View more" entrypoint to
route to the market list page instead of the main Perps home.

Changes:
- Added `rounded-xl bg-background-muted` background to the ViewMoreCard
outer Box
- Removed the circular bubble wrapper around the ArrowRight icon
- Made Predictions ViewMoreCard use `flex-1` and default `BodyMd` text
size to match Perps
- Split Perps navigation: section title still goes to Perps home, View
more card now goes to the market list page

## **Changelog**

CHANGELOG entry: Updated View more card styling with background color
and updated Perps View more to navigate to market list

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-513

## **Manual testing steps**

```gherkin
Feature: View more card styling and routing

  Scenario: View more cards display with background
    Given user is on the homepage
    And Perps or Predictions sections show a carousel with a View more card

    When the user views the View more card
    Then it has a rounded grey background (bg-background-muted)
    And the arrow icon has no circular bubble around it

  Scenario: Perps View more navigates to market list
    Given user is on the homepage with Perps section visible

    When user taps the View more card in the Perps carousel
    Then the app navigates to the Perps market list page

  Scenario: Perps section title navigates to Perps home
    Given user is on the homepage with Perps section visible

    When user taps the Perpetuals section title
    Then the app navigates to the Perps home page
```

## **Screenshots/Recordings**

Verified on device -- both Perps and Predictions View more cards now
show consistent styling.

### **Before**

View more card had no background and a circular bubble around the arrow
icon.

### **After**

<img width="300"
src="https://github.com/user-attachments/assets/23c07566-2996-4f26-9717-481a07ba783e"
/>


## **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
- [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-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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 and navigation tweak limited to homepage carousels; main
risk is an incorrect route/params causing the Perps "View more" CTA to
land on the wrong screen.
> 
> **Overview**
> Updates the shared homepage `ViewMoreCard` to match new design by
moving the muted background and rounded corners to the outer card and
removing the circular icon bubble.
> 
> Changes the Perps homepage carousel "View more" CTA to navigate to
`Routes.PERPS.MARKET_LIST` (while the section title still routes to
`Routes.PERPS.PERPS_HOME`) and updates the Perps unit test accordingly.
Aligns the Predictions carousel `ViewMoreCard` sizing/typography usage
with Perps by using `flex-1` and default text variant.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
a2cb634. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: wachunei

app/components/Views/Homepage/Sections/Perpetuals/PerpsSection.test.tsx

@@ -811,7 +811,7 @@ describe('PerpsSection', () => {
       fireEvent.press(screen.getByTestId('perps-view-more-card'));
 
       expect(mockNavigate).toHaveBeenCalledWith(Routes.PERPS.ROOT, {
-        screen: Routes.PERPS.PERPS_HOME,
+        screen: Routes.PERPS.MARKET_LIST,
         params: { source: 'home_section' },
       });
     });

app/components/Views/Homepage/Sections/Perpetuals/PerpsSection.tsx

@@ -212,6 +212,13 @@ const PerpsSection = forwardRef<SectionRefreshHandle, PerpsSectionProps>(
       });
     }, [navigation]);
 
+    const handleViewMorePerps = useCallback(() => {
+      navigation.navigate(Routes.PERPS.ROOT, {
+        screen: Routes.PERPS.MARKET_LIST,
+        params: { source: PERPS_EVENT_VALUE.SOURCE.HOME_SECTION },
+      });
+    }, [navigation]);
+
     const handlePositionPress = useCallback(
       (position: Position) => {
         track(MetaMetricsEvents.PERPS_UI_INTERACTION, {
@@ -330,7 +337,7 @@ const PerpsSection = forwardRef<SectionRefreshHandle, PerpsSectionProps>(
                     />
                   ))}
                   <ViewMoreCard
-                    onPress={handleViewAllPerps}
+                    onPress={handleViewMorePerps}
                     twClassName="w-[180px] flex-1"
                     testID="perps-view-more-card"
                   />

app/components/Views/Homepage/Sections/Predictions/PredictionsSection.tsx

@@ -8,7 +8,7 @@ import { ScrollView, View } from 'react-native';
 import { useNavigation, NavigationProp } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import { Box, TextVariant } from '@metamask/design-system-react-native';
+import { Box } from '@metamask/design-system-react-native';
 import SectionTitle from '../../components/SectionTitle';
 import ErrorState from '../../components/ErrorState';
 import FadingScrollContainer from '../../components/FadingScrollContainer';
@@ -276,8 +276,7 @@ const PredictionsSection = forwardRef<
                   ))}
                   <ViewMoreCard
                     onPress={handleViewAllPredictions}
-                    twClassName="w-[180px] h-[180px]"
-                    textVariant={TextVariant.BodyLg}
+                    twClassName="w-[180px] flex-1"
                   />
                 </>
               )}

app/components/Views/Homepage/components/ViewMoreCard/ViewMoreCard.tsx

@@ -26,7 +26,7 @@ interface ViewMoreCardProps {
 
 /**
  * Shared "View more" card shown at the end of a horizontal carousel.
- * Renders a circular ArrowRight icon above a label, blending with the background.
+ * Renders an ArrowRight icon above a label on a muted background.
  */
 const ViewMoreCard: React.FC<ViewMoreCardProps> = ({
   onPress,
@@ -41,22 +41,16 @@ const ViewMoreCard: React.FC<ViewMoreCardProps> = ({
     testID={testID}
   >
     <Box
-      twClassName={twClassName}
+      twClassName={`rounded-xl bg-background-muted ${twClassName}`}
       alignItems={BoxAlignItems.Center}
       justifyContent={BoxJustifyContent.Center}
       gap={2}
     >
-      <Box
-        twClassName="w-8 h-8 rounded-full bg-background-muted"
-        alignItems={BoxAlignItems.Center}
-        justifyContent={BoxJustifyContent.Center}
-      >
-        <Icon
-          name={IconName.ArrowRight}
-          size={IconSize.Md}
-          color={IconColor.IconDefault}
-        />
-      </Box>
+      <Icon
+        name={IconName.ArrowRight}
+        size={IconSize.Md}
+        color={IconColor.IconDefault}
+      />
       <Text
         variant={textVariant}
         fontWeight={FontWeight.Medium}