Skip to content

Commit fb50a03

Browse files
runway-github[bot]matallui
runway-github[bot]
and
matallui
authored
chore(runway): cherry-pick fix(predict): cp-7.63.0 general UI fixes to live games (#25171)
- fix(predict): cp-7.63.0 general UI fixes to live games (#25130) ## **Description** This PR makes UI adjustments to the Predict feature's game markets: 1. **Removed team gradient background** from game market cards and game details screen - the gradient that used team colors as a background is no longer needed 2. **Adjusted padding** around the "Your picks" section in game details - increased top padding from `py-2` to `pt-8` for better visual spacing ### Changes: - `PredictGameDetailsContent.tsx`: Removed `PredictSportTeamGradient` wrapper, now uses `SafeAreaView` directly - `PredictGameDetailsFooter.tsx`: Removed gradient logic and unused `awayColor`/`homeColor` props - `PredictMarketSportCard.tsx`: Replaced gradient with simple `Box` using `bg-muted rounded-xl` - `PredictPicks.tsx`: Adjusted padding from `py-2` to `pt-8` - Updated tests and types to reflect the removal of gradient-related code ## **Changelog** CHANGELOG entry: null ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/PRED-541 ## **Manual testing steps** ```gherkin Feature: Predict game market UI Scenario: User views game market card in feed Given the user is on the Predict feed When the user views a sports game market card Then the card displays with a muted background (no team color gradient) Scenario: User views game details screen Given the user taps on a sports game market When the game details screen opens Then the screen displays without a team color gradient background And the "Your picks" section has proper spacing from the chart above ``` ## **Screenshots/Recordings** ### **Before** <!-- Team gradient backgrounds visible on cards and details screen --> ### **After** <!-- Clean muted backgrounds, improved spacing --> <img width="360" height="760" alt="Screenshot 2026-01-23 at 1 00 33 PM" src="https://github.com/user-attachments/assets/82a14a45-e491-414f-8ad5-e2af5cf25c2a" /> <img width="370" height="764" alt="Screenshot 2026-01-23 at 1 00 18 PM" src="https://github.com/user-attachments/assets/4879dc50-6a2c-4d71-8e86-03c9b187d3d1" /> ## **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] > Replaces team color gradients with neutral containers and cleans up related props/tests. > > - Remove `PredictSportTeamGradient` from `PredictGameDetailsContent`, `PredictGameDetailsFooter`, and `PredictMarketSportCard`; use `SafeAreaView`/`Box` with `bg-muted` and rounded corners > - Drop `awayColor`/`homeColor` props and gradient logic from footer (`PredictGameDetailsFooter.tsx` and `.types.ts`) > - Adjust "Your picks" heading spacing in `PredictPicks.tsx` from `py-2` to `pt-8` > - Update tests and snapshots to reflect no-gradient UI and removed props > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 12abe81. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY --> [06a4e3c](06a4e3c) Co-authored-by: Luis Taniça <matallui@gmail.com>
1 parent 0b330b5 commit fb50a03

8 files changed

Lines changed: 292 additions & 421 deletions

File tree

‎app/components/UI/Predict/components/PredictGameDetailsContent/PredictGameDetailsContent.test.tsx‎

Lines changed: 0 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -66,30 +66,6 @@ jest.mock('../PredictGameDetailsFooter/PredictGameAboutSheet', () => {
6666
};
6767
});
6868

69-
jest.mock('../PredictSportTeamGradient', () => {
70-
const { View } = jest.requireActual('react-native');
71-
return function MockPredictSportTeamGradient({
72-
children,
73-
testID,
74-
awayColor,
75-
homeColor,
76-
}: {
77-
children: React.ReactNode;
78-
testID?: string;
79-
awayColor?: string;
80-
homeColor?: string;
81-
}) {
82-
return (
83-
<View
84-
testID={testID}
85-
accessibilityHint={`away:${awayColor ?? 'undefined'},home:${homeColor ?? 'undefined'}`}
86-
>
87-
{children}
88-
</View>
89-
);
90-
};
91-
});
92-
9369
jest.mock('../PredictSportScoreboard', () => {
9470
const { View } = jest.requireActual('react-native');
9571
return {
@@ -461,29 +437,6 @@ describe('PredictGameDetailsContent', () => {
461437
});
462438
});
463439

464-
describe('Gradient Integration', () => {
465-
it('renders gradient with team colors', () => {
466-
const market = createMockMarket();
467-
468-
const { getByTestId } = render(
469-
<PredictGameDetailsContent
470-
market={market}
471-
onBack={mockOnBack}
472-
onRefresh={mockOnRefresh}
473-
onBetPress={mockOnBetPress}
474-
refreshing={false}
475-
/>,
476-
);
477-
478-
const gradient = getByTestId('game-details-gradient');
479-
480-
expect(gradient).toBeOnTheScreen();
481-
expect(gradient.props.accessibilityHint).toBe(
482-
'away:#0000FF,home:#FF0000',
483-
);
484-
});
485-
});
486-
487440
describe('Scoreboard Integration', () => {
488441
it('renders scoreboard with team data', () => {
489442
const market = createMockMarket();

‎app/components/UI/Predict/components/PredictGameDetailsContent/PredictGameDetailsContent.tsx‎

Lines changed: 70 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import PredictGameAboutSheet from '../PredictGameDetailsFooter/PredictGameAboutS
2626
import PredictPicks from '../PredictPicks/PredictPicks';
2727
import PredictShareButton from '../PredictShareButton/PredictShareButton';
2828
import PredictSportScoreboard from '../PredictSportScoreboard';
29-
import PredictSportTeamGradient from '../PredictSportTeamGradient';
3029
import { PredictGameDetailsContentProps } from './PredictGameDetailsContent.types';
3130
import { useTheme } from '../../../../../util/theme';
3231
import { PredictMarketDetailsSelectorsIDs } from '../../Predict.testIds';
@@ -62,97 +61,88 @@ const PredictGameDetailsContent: React.FC<PredictGameDetailsContentProps> = ({
6261
}
6362

6463
return (
65-
<PredictSportTeamGradient
66-
awayColor={game.awayTeam.color}
67-
homeColor={game.homeTeam.color}
68-
style={tw.style('flex-1 bg-default')}
69-
testID="game-details-gradient"
64+
<SafeAreaView
65+
testID={PredictMarketDetailsSelectorsIDs.SCREEN}
66+
style={tw.style('flex-1')}
67+
edges={['left', 'right']}
7068
>
71-
<SafeAreaView
72-
testID={PredictMarketDetailsSelectorsIDs.SCREEN}
73-
style={tw.style('flex-1')}
74-
edges={['left', 'right']}
69+
<Box
70+
flexDirection={BoxFlexDirection.Row}
71+
alignItems={BoxAlignItems.Center}
72+
justifyContent={BoxJustifyContent.Between}
73+
twClassName="px-4 py-3"
74+
style={{ paddingTop: insets.top + 12 }}
7575
>
76-
<Box
77-
flexDirection={BoxFlexDirection.Row}
78-
alignItems={BoxAlignItems.Center}
79-
justifyContent={BoxJustifyContent.Between}
80-
twClassName="px-4 py-3"
81-
style={{ paddingTop: insets.top + 12 }}
76+
<Pressable
77+
onPress={onBack}
78+
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
79+
accessibilityRole="button"
80+
accessibilityLabel={strings('predict.buttons.back')}
8281
>
83-
<Pressable
84-
onPress={onBack}
85-
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
86-
accessibilityRole="button"
87-
accessibilityLabel={strings('predict.buttons.back')}
82+
<Icon
83+
name={IconName.ArrowLeft}
84+
size={IconSize.Lg}
85+
color={IconColor.IconDefault}
86+
/>
87+
</Pressable>
88+
89+
<Box twClassName="flex-1 mx-4">
90+
<Text
91+
variant={TextVariant.HeadingMd}
92+
color={TextColor.TextDefault}
93+
style={tw.style('text-center')}
94+
numberOfLines={1}
8895
>
89-
<Icon
90-
name={IconName.ArrowLeft}
91-
size={IconSize.Lg}
92-
color={IconColor.IconDefault}
93-
/>
94-
</Pressable>
96+
{market.title}
97+
</Text>
98+
</Box>
9599

96-
<Box twClassName="flex-1 mx-4">
97-
<Text
98-
variant={TextVariant.HeadingMd}
99-
color={TextColor.TextDefault}
100-
style={tw.style('text-center')}
101-
numberOfLines={1}
102-
>
103-
{market.title}
104-
</Text>
105-
</Box>
100+
<PredictShareButton marketId={market.id} marketSlug={market.slug} />
101+
</Box>
106102

107-
<PredictShareButton marketId={market.id} marketSlug={market.slug} />
103+
<ScrollView
104+
style={tw.style('flex-1')}
105+
contentContainerStyle={tw.style('pb-4')}
106+
refreshControl={
107+
<RefreshControl
108+
refreshing={refreshing}
109+
onRefresh={onRefresh}
110+
tintColor={colors.primary.default}
111+
colors={[colors.primary.default]}
112+
/>
113+
}
114+
>
115+
<Box twClassName="px-4 py-2">
116+
<PredictSportScoreboard game={game} testID="game-scoreboard" />
108117
</Box>
109118

110-
<ScrollView
111-
style={tw.style('flex-1')}
112-
contentContainerStyle={tw.style('pb-4')}
113-
refreshControl={
114-
<RefreshControl
115-
refreshing={refreshing}
116-
onRefresh={onRefresh}
117-
tintColor={colors.primary.default}
118-
colors={[colors.primary.default]}
119-
/>
120-
}
121-
>
122-
<Box twClassName="px-4 py-2">
123-
<PredictSportScoreboard game={game} testID="game-scoreboard" />
124-
</Box>
119+
<Box twClassName="mt-4">
120+
<PredictGameChart market={market} testID="game-chart" />
121+
</Box>
125122

126-
<Box twClassName="mt-4">
127-
<PredictGameChart market={market} testID="game-chart" />
128-
</Box>
123+
<Box twClassName="px-4 py-2">
124+
<PredictPicks market={market} testID="game-picks" />
125+
</Box>
126+
</ScrollView>
129127

130-
<Box twClassName="px-4 py-2">
131-
<PredictPicks market={market} testID="game-picks" />
132-
</Box>
133-
</ScrollView>
128+
<PredictGameDetailsFooter
129+
market={market}
130+
outcome={outcome}
131+
onBetPress={onBetPress}
132+
onClaimPress={onClaimPress}
133+
onInfoPress={handleInfoPress}
134+
claimableAmount={claimableAmount}
135+
isLoading={isLoading}
136+
/>
134137

135-
<PredictGameDetailsFooter
136-
market={market}
137-
outcome={outcome}
138-
onBetPress={onBetPress}
139-
onClaimPress={onClaimPress}
140-
onInfoPress={handleInfoPress}
141-
claimableAmount={claimableAmount}
142-
isLoading={isLoading}
143-
awayColor={game.awayTeam.color}
144-
homeColor={game.homeTeam.color}
138+
{isVisible && (
139+
<PredictGameAboutSheet
140+
ref={sheetRef}
141+
description={market.description ?? ''}
142+
onClose={handleSheetClosed}
145143
/>
146-
147-
{isVisible && (
148-
<PredictGameAboutSheet
149-
ref={sheetRef}
150-
description={market.description ?? ''}
151-
onClose={handleSheetClosed}
152-
/>
153-
)}
154-
</SafeAreaView>
155-
</PredictSportTeamGradient>
144+
)}
145+
</SafeAreaView>
156146
);
157147
};
158148

0 commit comments

Comments
 (0)