feat: update prediction market cards to match latest design (#26795)

## **Description**

Updates the prediction market cards on the homepage to match the latest
Figma design specs
([TMCU-483](https://consensyssoftware.atlassian.net/browse/TMCU-483)):

- **Outcome percentages as plain text**: Replaced `Button` components
with `Text` to show outcome probabilities (e.g. "55%") as
alternative-colored text without a background, matching the simplified
card design.
- **Removed date display**: Removed the `formatDate` helper and end-date
rendering from cards.
- **Reduced card width**: From 280px to 240px for a more compact
carousel layout.
- **Smaller outcome images**: From 32px to 24px thumbnails.
- **Consistent card heights**: Added `flex-1` and `justifyContent:
spaceBetween` so all cards in the carousel share the same height
regardless of title length.
- **ViewMoreCard flex alignment**: Changed from fixed `h-[180px]` to
`flex-1` so it matches sibling card heights.
- **Updated skeleton loader**: Aligned `PredictMarketCardSkeleton`
dimensions (width, gaps, image/text placeholder sizes) with the new card
layout.

## **Changelog**

CHANGELOG entry: Updated prediction market card design with smaller
cards, plain-text percentages, and consistent heights

## **Related issues**

Refs:
[TMCU-483](https://consensyssoftware.atlassian.net/browse/TMCU-483)

## **Manual testing steps**

```gherkin
Feature: Prediction market cards on homepage

  Scenario: user views trending prediction markets carousel
    Given user is on the homepage with no prediction positions
    And the Predictions feature flag is enabled

    When user scrolls to the Predictions section
    Then prediction market cards display at 240px width
    And each card shows a title and up to 2 outcomes with percentage text (not buttons)
    And all cards in the carousel have the same height
    And a "More predictions" card appears at the end of the carousel

  Scenario: user sees skeleton loading state
    Given user is on the homepage
    And prediction markets are loading

    When user scrolls to the Predictions section
    Then skeleton placeholders match the new card dimensions
```

## **Screenshots/Recordings**

### **Before**


https://github.com/user-attachments/assets/6426ebbd-608e-4e23-ad1e-b905bf1a45c8

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

### **After**

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





https://github.com/user-attachments/assets/8f66556d-bd91-48cc-b73f-70c1618eeb52



## **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.

[TMCU-483]:
https://consensyssoftware.atlassian.net/browse/TMCU-483?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
[TMCU-483]:
https://consensyssoftware.atlassian.net/browse/TMCU-483?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Primarily UI/layout changes to the homepage predictions carousel (card
sizing, alignment, and display), with no changes to data fetching or
navigation logic.
> 
> **Overview**
> Updates the homepage Predictions carousel to match the latest card
design by shrinking market cards (and snap offsets) from 280px to 240px
and making the end `ViewMoreCard` use `flex-1` for consistent height.
> 
> Simplifies `PredictMarketCard` UI by removing end-date rendering and
replacing outcome price `Button`s with plain percentage `Text`, while
adjusting spacing and thumbnail sizes; the skeleton loader is updated to
mirror the new layout.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
f65e8f7. 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/Predictions/PredictionsSection.tsx

@@ -45,7 +45,7 @@ import { usePredictClaim } from '../../../../UI/Predict/hooks/usePredictClaim';
 const MAX_MARKETS_DISPLAYED = 5;
 
 // Card dimensions for snap offsets
-const CARD_WIDTH = 280;
+const CARD_WIDTH = 240;
 const GAP = 12;
 const PADDING = 16; // px-4
 
@@ -287,7 +287,7 @@ const PredictionsSection = forwardRef<SectionRefreshHandle>((_, ref) => {
               ))}
               <ViewMoreCard
                 onPress={handleViewAllPredictions}
-                twClassName="w-[180px] h-[180px]"
+                twClassName="w-[180px] flex-1"
                 textVariant={TextVariant.BodyLg}
               />
             </>

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

@@ -6,16 +6,13 @@ import {
   Text,
   BoxFlexDirection,
   BoxAlignItems,
+  BoxJustifyContent,
   TextVariant,
   TextColor,
   FontWeight,
 } from '@metamask/design-system-react-native';
 import { useNavigation, NavigationProp } from '@react-navigation/native';
 import Routes from '../../../../../../constants/navigation/Routes';
-import Button, {
-  ButtonVariants,
-  ButtonSize,
-} from '../../../../../../component-library/components/Buttons/Button';
 import type {
   PredictMarket,
   PredictOutcome,
@@ -29,34 +26,19 @@ interface PredictMarketCardProps {
 const MAX_OUTCOMES_DISPLAYED = 2;
 
 /**
- * Format price as cents (e.g., 0.55 -> "55¢")
+ * Format price as percentage (e.g., 0.55 -> "55%")
  */
 const formatPrice = (price: number): string => {
-  const cents = Math.round(price * 100);
-  return `${cents}¢`;
+  const pct = Math.round(price * 100);
+  return `${pct}%`;
 };
 
 /**
- * Format end date to short format (e.g., "Jan 8")
- */
-const formatDate = (dateString?: string): string | null => {
-  if (!dateString) return null;
-  try {
-    const date = new Date(dateString);
-    if (isNaN(date.getTime())) return null;
-    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-  } catch {
-    return null;
-  }
-};
-
-/**
- * OutcomeRow - Single outcome row with image, name, and price button
+ * OutcomeRow - Single outcome row with image, name, and percentage
  */
 const OutcomeRow: React.FC<{
   outcome: PredictOutcome;
-  onPress: () => void;
-}> = ({ outcome, onPress }) => {
+}> = ({ outcome }) => {
   const tw = useTailwind();
   const yesToken = outcome.tokens?.[0];
   const price = yesToken?.price ?? 0;
@@ -68,11 +50,11 @@ const OutcomeRow: React.FC<{
       gap={3}
     >
       {/* Outcome image */}
-      <Box twClassName="w-8 h-8 rounded-lg overflow-hidden bg-background-alternative">
+      <Box twClassName="w-6 h-6 rounded-lg overflow-hidden bg-background-alternative">
         {outcome.image ? (
           <Image
             source={{ uri: outcome.image }}
-            style={tw.style('w-8 h-8')}
+            style={tw.style('w-6 h-6')}
             resizeMode="cover"
           />
         ) : null}
@@ -82,28 +64,24 @@ const OutcomeRow: React.FC<{
       <Box twClassName="flex-1">
         <Text
           variant={TextVariant.BodyMd}
-          fontWeight={FontWeight.Medium}
           color={TextColor.TextDefault}
           numberOfLines={1}
         >
           {outcome.groupItemTitle || outcome.title}
         </Text>
       </Box>
 
-      {/* Price button */}
-      <Button
-        variant={ButtonVariants.Secondary}
-        size={ButtonSize.Sm}
-        label={formatPrice(price)}
-        onPress={onPress}
-      />
+      {/* Percentage */}
+      <Text variant={TextVariant.BodyMd} color={TextColor.TextAlternative}>
+        {formatPrice(price)}
+      </Text>
     </Box>
   );
 };
 
 /**
  * Compact prediction market card for homepage carousel.
- * Shows title, date, and top 2 outcomes with prices.
+ * Shows title and top 2 outcomes with prices.
  */
 const PredictMarketCard: React.FC<PredictMarketCardProps> = ({ market }) => {
   const navigation =
@@ -116,11 +94,6 @@ const PredictMarketCard: React.FC<PredictMarketCardProps> = ({ market }) => {
     });
   }, [navigation, market.id]);
 
-  const formattedDate = useMemo(
-    () => formatDate(market.endDate),
-    [market.endDate],
-  );
-
   // Get top outcomes to display
   const displayOutcomes = useMemo(() => {
     if (!market.outcomes?.length) {
@@ -150,38 +123,25 @@ const PredictMarketCard: React.FC<PredictMarketCardProps> = ({ market }) => {
   return (
     <TouchableOpacity onPress={handlePress}>
       <Box
-        twClassName="w-[280px] rounded-2xl bg-background-muted"
+        twClassName="w-[240px] rounded-2xl bg-background-muted flex-1"
         padding={4}
-        gap={3}
+        gap={6}
+        justifyContent={BoxJustifyContent.Between}
       >
-        {/* Header: Title + Date */}
-        <Box gap={1}>
-          <Text
-            variant={TextVariant.BodyMd}
-            fontWeight={FontWeight.Medium}
-            color={TextColor.TextDefault}
-            numberOfLines={2}
-          >
-            {market.title}
-          </Text>
-          {formattedDate && (
-            <Text
-              variant={TextVariant.BodyMd}
-              color={TextColor.TextAlternative}
-            >
-              {formattedDate}
-            </Text>
-          )}
-        </Box>
+        {/* Header: Title */}
+        <Text
+          variant={TextVariant.BodyMd}
+          fontWeight={FontWeight.Medium}
+          color={TextColor.TextDefault}
+          numberOfLines={2}
+        >
+          {market.title}
+        </Text>
 
         {/* Outcomes */}
         <Box gap={2}>
           {displayOutcomes.map((outcome) => (
-            <OutcomeRow
-              key={outcome.id}
-              outcome={outcome}
-              onPress={handlePress}
-            />
+            <OutcomeRow key={outcome.id} outcome={outcome} />
           ))}
         </Box>
       </Box>

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

@@ -13,36 +13,33 @@ const PredictMarketCardSkeleton: React.FC = () => {
   const { colors } = useTheme();
 
   return (
-    <View style={tw.style('w-[280px] rounded-2xl bg-background-muted p-4')}>
+    <View style={tw.style('w-[240px] rounded-2xl bg-background-muted p-4')}>
       <SkeletonPlaceholder
         backgroundColor={colors.background.section}
         highlightColor={colors.background.subsection}
       >
-        <View style={tw.style('gap-3')}>
-          {/* Header skeleton */}
-          <View style={tw.style('gap-1')}>
-            <View style={tw.style('w-[80%] h-5 rounded')} />
-            <View style={tw.style('w-[40%] h-4 rounded')} />
-          </View>
+        <View style={tw.style('gap-6')}>
+          {/* Title skeleton */}
+          <View style={tw.style('w-[80%] h-5 rounded')} />
 
           {/* Outcome rows skeleton */}
           <View style={tw.style('gap-2')}>
             {/* Outcome 1 */}
             <View style={tw.style('flex-row items-center gap-3')}>
-              <View style={tw.style('w-8 h-8 rounded-lg')} />
+              <View style={tw.style('w-6 h-6 rounded-lg')} />
               <View style={tw.style('flex-1')}>
                 <View style={tw.style('w-[60%] h-4 rounded')} />
               </View>
-              <View style={tw.style('w-12 h-8 rounded-lg')} />
+              <View style={tw.style('w-8 h-4 rounded')} />
             </View>
 
             {/* Outcome 2 */}
             <View style={tw.style('flex-row items-center gap-3')}>
-              <View style={tw.style('w-8 h-8 rounded-lg')} />
+              <View style={tw.style('w-6 h-6 rounded-lg')} />
               <View style={tw.style('flex-1')}>
                 <View style={tw.style('w-[50%] h-4 rounded')} />
               </View>
-              <View style={tw.style('w-12 h-8 rounded-lg')} />
+              <View style={tw.style('w-8 h-4 rounded')} />
             </View>
           </View>
         </View>