chore(runway): cherry-pick feat(predict): Adds scoreboard component (#24593)

- feat(predict): Adds scoreboard component (#24528)

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

This PR adds sports scoreboard component that hands the various
potential game states (pre-game, in-progress, half-time, delayed, and
final). When a game is in-progress a possession indicator can be
displayed next to a provided team. Similarly, when a game is over and a
winner is specified, a trophy icon displays next to the winning team's
abbreviation.

What's included:

- `PredictSportScoreboard` component
- PredictSportWinner component - trophy SVG icon component with dynamic
color and size props
  - Default size: 16px (matching the original SVG viewBox)
  - Supports custom colors via hex, RGB, or other color formats
- Includes comprehensive unit tests covering rendering, size variations,
and edge cases
- Winner enum - Added to `PredictSportScoreboard.types.ts` with `Away`,
`Home`, and `None` values (mirrors the existing Possession enum pattern)
- Scoreboard winner display logic - Updated `PredictSportScoreboard` to:
  - Accept optional winner prop (defaults to `Winner.None`)
- Display trophy icon (14px, muted gray #9B9B9B) next to winning team's
abbreviation
- Only show trophy when gameState === GameState.Final and winner is
specified
- Trophy appears in the same position as the possession football
indicator

## **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: null

## **Related issues**

Fixes:

## **Manual testing steps**

Add the following to a page wherein you want to view the scoreboard
(note the various game states are provided below for reference):

```jsx
<PredictSportScoreboard
  awayTeam={{ abbreviation: 'SEA', color: '#2244' }}
  homeTeam={{ abbreviation: 'DEN', color: '#FB4F14' }}
  awayScore={109}
  homeScore={17}
  gameState={GameState.Final}
  quarter="Q3"
  time="12:02"
  date="Sun, Jan 14"
  possession={Possession.Away}
  winner={Winner.Home}
  testID="predict-positions-scoreboard"
/>
```

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

<img width="716" height="182" alt="image"

src="https://github.com/user-attachments/assets/48f8910c-712b-46b1-baee-b2cf133ce353"
/>

<img width="720" height="180" alt="image"

src="https://github.com/user-attachments/assets/6fbf60d9-b7fa-4238-bcf5-2f657f475476"
/>

<img width="722" height="202" alt="image"

src="https://github.com/user-attachments/assets/4e44a341-270c-4843-88e6-859448f891c2"
/>

<img width="726" height="196" alt="image"

src="https://github.com/user-attachments/assets/846fceca-44e4-4d3d-b557-f4b0ca096fac"
/>

<img width="736" height="200" alt="image"

src="https://github.com/user-attachments/assets/300c46a3-08f4-4c55-8854-973434445e30"
/>


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

## **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]
> Implements an NFL-style scoreboard UI with game state handling and
indicators, plus supporting icon component and tests.
> 
> - Add `PredictSportScoreboard` with states (`PreGame`, `InProgress`,
`Halftime`, `Final`), scores, team helmets, possession football icon,
and winner trophy display
> - Introduce `PredictSportWinner` SVG component with configurable
size/color and unit tests
> - Add extensive tests for scoreboard rendering, states,
possession/winner logic, and edge cases
> - Add i18n strings `predict.sports.halftime` and
`predict.sports.final` in `en.json`
> - Update `PredictSportFootballIcon` default fill to
`colors.text.alternative`
> - Export scoreboard and types via `index.ts`
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
4de8451. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[83c602a](83c602a)

Co-authored-by: Kevin Bluer <kevin@bluer.com>

Author: runway-github[bot]

app/components/UI/Predict/components/PredictSportFootballIcon/PredictSportFootballIcon.tsx

@@ -18,7 +18,7 @@ const PredictSportFootballIcon: React.FC<PredictSportFootballIconProps> = ({
   testID,
 }) => {
   const { colors } = useTheme();
-  const fillColor = color ?? colors.text.default;
+  const fillColor = color ?? colors.text.alternative;
 
   return (
     <Svg width={size} height={size} viewBox="0 0 16 16" testID={testID}>