fix(predict): Design QA feedback to the redesigned Predict home and feed

app/components/UI/Predict/components/PredictChipList/PredictChipList.tsx

@@ -22,7 +22,7 @@ import { useChipScrollList } from './useChipScrollList';
 
 export { calculateChipScrollX } from './calculateChipScrollX';
 
-const DEFAULT_CONTAINER_CLASS = 'pt-3 pb-4';
+const DEFAULT_CONTAINER_CLASS = 'pt-3 pb-3';
 const DEFAULT_CHIP_CLASS = 'rounded-xl px-4 py-2';
 
 const PredictChipList: React.FC<PredictChipListProps> = ({

app/components/UI/Predict/components/PredictCryptoUpDownMarketCard/PredictCryptoUpDownMarketCard.tsx

@@ -123,9 +123,8 @@ const CHART_REQUEST_DURATION_BY_RECURRENCE_MS: Record<string, number> = {
 };
 const PROGRESS_RING_SIZE = 54;
 const PROGRESS_RING_STROKE_WIDTH = 4;
-const PROGRESS_RING_RADIUS =
-  (PROGRESS_RING_SIZE - PROGRESS_RING_STROKE_WIDTH) / 2;
-const PROGRESS_RING_CIRCUMFERENCE = 2 * Math.PI * PROGRESS_RING_RADIUS;
+const COMPACT_PROGRESS_RING_SIZE = 40;
+const COMPACT_PROGRESS_RING_STROKE_WIDTH = 2;
 const CRYPTO_ACCENT_DEFAULT = 'rgb(245, 158, 11)';
 const CRYPTO_ACCENT_BY_SYMBOL: Record<string, string> = {
   BTC: 'rgb(247, 147, 26)',
@@ -814,49 +813,62 @@ const ProgressLogo = React.memo(
     progress,
     color,
     trackColor,
+    compact,
   }: {
     imageUrl?: string;
     progress: number;
     color: string;
     trackColor: string;
+    compact?: boolean;
   }) => {
     const tw = useTailwind();
-    const strokeDashoffset = PROGRESS_RING_CIRCUMFERENCE * (1 - progress);
+    const ringSize = compact ? COMPACT_PROGRESS_RING_SIZE : PROGRESS_RING_SIZE;
+    const strokeWidth = compact
+      ? COMPACT_PROGRESS_RING_STROKE_WIDTH
+      : PROGRESS_RING_STROKE_WIDTH;
+    const radius = (ringSize - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const strokeDashoffset = circumference * (1 - progress);
 
     return (
-      <Box twClassName="h-[54px] w-[54px] items-center justify-center">
+      <Box
+        twClassName="items-center justify-center"
+        style={tw.style({ width: ringSize, height: ringSize })}
+      >
         <Box twClassName="absolute inset-0">
           <Svg
-            width={PROGRESS_RING_SIZE}
-            height={PROGRESS_RING_SIZE}
-            viewBox={`0 0 ${PROGRESS_RING_SIZE} ${PROGRESS_RING_SIZE}`}
+            width={ringSize}
+            height={ringSize}
+            viewBox={`0 0 ${ringSize} ${ringSize}`}
           >
             <Circle
-              cx={PROGRESS_RING_SIZE / 2}
-              cy={PROGRESS_RING_SIZE / 2}
-              r={PROGRESS_RING_RADIUS}
+              cx={ringSize / 2}
+              cy={ringSize / 2}
+              r={radius}
               stroke={trackColor}
               strokeOpacity={0.7}
-              strokeWidth={PROGRESS_RING_STROKE_WIDTH}
+              strokeWidth={strokeWidth}
               fill="transparent"
             />
             <Circle
-              cx={PROGRESS_RING_SIZE / 2}
-              cy={PROGRESS_RING_SIZE / 2}
-              r={PROGRESS_RING_RADIUS}
+              cx={ringSize / 2}
+              cy={ringSize / 2}
+              r={radius}
               stroke={color}
-              strokeWidth={PROGRESS_RING_STROKE_WIDTH}
-              strokeDasharray={`${PROGRESS_RING_CIRCUMFERENCE} ${PROGRESS_RING_CIRCUMFERENCE}`}
+              strokeWidth={strokeWidth}
+              strokeDasharray={`${circumference} ${circumference}`}
               strokeDashoffset={strokeDashoffset}
               strokeLinecap="round"
               fill="transparent"
-              transform={`rotate(-90 ${PROGRESS_RING_SIZE / 2} ${
-                PROGRESS_RING_SIZE / 2
-              })`}
+              transform={`rotate(-90 ${ringSize / 2} ${ringSize / 2})`}
             />
           </Svg>
         </Box>
-        <Box twClassName="h-10 w-10 overflow-hidden rounded-full bg-default">
+        <Box
+          twClassName={`${
+            compact ? 'h-8 w-8' : 'h-10 w-10'
+          } overflow-hidden rounded-full bg-default`}
+        >
           {imageUrl ? (
             <Image
               source={{ uri: imageUrl }}
@@ -905,6 +917,7 @@ const LiveStatus = React.memo(
         progress={progressRemaining}
         color={accentColor}
         trackColor={trackColor}
+        compact={compact}
       />
     );
 
@@ -1354,9 +1367,15 @@ const PredictCryptoUpDownMarketCard: React.FC<
             >
               {cardTitle}
             </Text>
+            <Text
+              variant={TextVariant.BodySm}
+              color={TextColor.TextAlternative}
+            >
+              Resets every {resetDuration}
+            </Text>
           </Box>
 
-          <Box twClassName="w-full items-center gap-2">
+          <Box twClassName="w-full">
             <OutcomeButtons
               compact
               upToken={upToken}
@@ -1366,12 +1385,6 @@ const PredictCryptoUpDownMarketCard: React.FC<
               marketStatus={selectedMarket.status as PredictMarketStatus}
               onBuyPress={handleBuyPress}
             />
-            <Text
-              variant={TextVariant.BodySm}
-              color={TextColor.TextAlternative}
-            >
-              Resets every {resetDuration}
-            </Text>
           </Box>
         </Box>
       </Pressable>

app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.test.tsx

@@ -416,7 +416,7 @@ describe('PredictMarketSportCard', () => {
       { state: initialState },
     );
 
-    expect(getByText('Live')).toBeOnTheScreen();
+    expect(getByText('LIVE')).toBeOnTheScreen();
     expect(getByText('75’')).toBeOnTheScreen();
     expect(getByText('0')).toBeOnTheScreen();
     expect(getByText('1')).toBeOnTheScreen();

app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.tsx

@@ -285,7 +285,7 @@ const PredictMarketSportCard: React.FC<PredictMarketSportCardProps> = ({
 
   return (
     <TouchableOpacity
-      style={tw.style(isCarousel ? '' : 'my-[8px]')}
+      style={tw.style(isCarousel ? 'h-full' : 'my-[8px]')}
       testID={testID}
       onPress={handleCardPress}
       activeOpacity={0.9}
@@ -306,9 +306,7 @@ const PredictMarketSportCard: React.FC<PredictMarketSportCardProps> = ({
           </Box>
         )}
 
-        <Box
-          twClassName={isCompact ? 'flex-1 p-3 justify-between' : 'p-4 gap-4'}
-        >
+        <Box twClassName={isCompact ? 'flex-1 p-3' : 'p-4 gap-4'}>
           <Text
             variant={TextVariant.HeadingSm}
             color={TextColor.TextDefault}
@@ -319,16 +317,18 @@ const PredictMarketSportCard: React.FC<PredictMarketSportCardProps> = ({
             {market.title}
           </Text>
 
-          <PredictSportScoreboard
-            game={game}
-            compact={isCompact}
-            testID={testID ? `${testID}-scoreboard` : undefined}
-          />
+          <Box twClassName={isCompact ? 'flex-1 mt-3 justify-center' : ''}>
+            <PredictSportScoreboard
+              game={game}
+              compact={isCompact}
+              testID={testID ? `${testID}-scoreboard` : undefined}
+            />
+          </Box>
 
           {showBuyButtons && (
             <Box
               flexDirection={BoxFlexDirection.Row}
-              twClassName="w-full gap-2"
+              twClassName={`w-full gap-2 ${isCompact ? 'mt-1' : ''}`}
             >
               {buttonItems.map((item) => (
                 <Box key={item.key} twClassName="flex-1">

app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.test.tsx

@@ -170,7 +170,7 @@ describe('PredictSportScoreboard', () => {
         />,
       );
 
-      expect(getByText('Live')).toBeOnTheScreen();
+      expect(getByText('LIVE')).toBeOnTheScreen();
       expect(getByText('25’')).toBeOnTheScreen();
     });
 

app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.tsx

@@ -202,7 +202,7 @@ const PredictSportScoreboard: React.FC<PredictSportScoreboardProps> = ({
                   fontWeight={FontWeight.Medium}
                   color={TextColor.SuccessDefault}
                 >
-                  Live
+                  LIVE
                 </Text>
                 <Box twClassName="w-3" />
               </Box>

app/components/UI/Predict/views/PredictFeedView/PredictFeedView.test.tsx

@@ -295,7 +295,8 @@ describe('PredictFeedView', () => {
       expect(screen.getAllByText('Tennis').length).toBeGreaterThan(0);
     });
 
-    it('hides the tab bar for a single-tab feed but still renders filters', () => {
+    it('hides the tab bar and filter list for a single-filter feed', () => {
+      mockRouteParams = { feedId: 'live' };
       mockUsePredictFeedConfig.mockReturnValue(
         feedConfigResult({
           feedId: 'live',
@@ -321,8 +322,8 @@ describe('PredictFeedView', () => {
         screen.queryByTestId(PredictFeedViewSelectorsIDs.TABS),
       ).not.toBeOnTheScreen();
       expect(
-        screen.getByTestId(PredictFeedViewSelectorsIDs.FILTERS),
-      ).toBeOnTheScreen();
+        screen.queryByTestId(PredictFeedViewSelectorsIDs.FILTERS),
+      ).not.toBeOnTheScreen();
     });
   });
 

app/components/UI/Predict/views/PredictFeedView/PredictFeedView.tsx

@@ -250,6 +250,7 @@ const PredictFeedView: React.FC = () => {
       })),
     [filters],
   );
+  const showFilterList = chips.length >= 2;
 
   const handleEndReached = useCallback(() => {
     if (hasNextPage && !isFetchingNextPage) {
@@ -391,12 +392,14 @@ const PredictFeedView: React.FC = () => {
           />
         )}
 
-        <PredictChipList
-          chips={chips}
-          activeChipKey={activeFilterId ?? ''}
-          onChipSelect={handleFilterSelect}
-          testID={PredictFeedViewSelectorsIDs.FILTERS}
-        />
+        {showFilterList && (
+          <PredictChipList
+            chips={chips}
+            activeChipKey={activeFilterId ?? ''}
+            onChipSelect={handleFilterSelect}
+            testID={PredictFeedViewSelectorsIDs.FILTERS}
+          />
+        )}
 
         {renderContent()}
       </Box>

app/components/UI/Predict/views/PredictHome/PredictHome.tsx

@@ -129,7 +129,7 @@ const PredictHome: React.FC = () => {
 
   return (
     <SafeAreaView
-      edges={{ bottom: 'additive' }}
+      edges={{ bottom: 'off' }}
       style={tw.style('flex-1 bg-default')}
     >
       <Box
@@ -160,40 +160,44 @@ const PredictHome: React.FC = () => {
           >
             <Text
               testID={PredictHomeSelectorsIDs.TITLE}
-              variant={TextVariant.DisplayMd}
+              variant={TextVariant.HeadingMd}
             >
               {strings('wallet.predict')}
             </Text>
           </Box>
 
-          <PredictPortfolioModule
-            onDepositWalletWithdrawPress={handleDepositWalletWithdrawPress}
-          />
-          <Box
-            testID={PredictHomeSelectorsIDs.LIVE_NOW_IMPRESSION}
-            onLayout={registerSection(PredictEventValues.SECTION_ID.LIVE_NOW)}
-          >
-            <PredictLiveNowSection />
-          </Box>
-          <Box
-            testID={PredictHomeSelectorsIDs.CATEGORIES_IMPRESSION}
-            onLayout={registerSection(PredictEventValues.SECTION_ID.CATEGORIES)}
-          >
-            <PredictCategoriesSection />
-          </Box>
-          <Box
-            testID={PredictHomeSelectorsIDs.POPULAR_TODAY_IMPRESSION}
-            onLayout={registerSection(
-              PredictEventValues.SECTION_ID.POPULAR_TODAY,
-            )}
-          >
-            <PredictPopularTodaySection />
-          </Box>
-          <Box
-            testID={PredictHomeSelectorsIDs.TRENDING_IMPRESSION}
-            onLayout={registerSection(PredictEventValues.SECTION_ID.TRENDING)}
-          >
-            <PredictTrendingSection />
+          <Box twClassName="gap-6">
+            <PredictPortfolioModule
+              onDepositWalletWithdrawPress={handleDepositWalletWithdrawPress}
+            />
+            <Box
+              testID={PredictHomeSelectorsIDs.LIVE_NOW_IMPRESSION}
+              onLayout={registerSection(PredictEventValues.SECTION_ID.LIVE_NOW)}
+            >
+              <PredictLiveNowSection />
+            </Box>
+            <Box
+              testID={PredictHomeSelectorsIDs.CATEGORIES_IMPRESSION}
+              onLayout={registerSection(
+                PredictEventValues.SECTION_ID.CATEGORIES,
+              )}
+            >
+              <PredictCategoriesSection />
+            </Box>
+            <Box
+              testID={PredictHomeSelectorsIDs.POPULAR_TODAY_IMPRESSION}
+              onLayout={registerSection(
+                PredictEventValues.SECTION_ID.POPULAR_TODAY,
+              )}
+            >
+              <PredictPopularTodaySection />
+            </Box>
+            <Box
+              testID={PredictHomeSelectorsIDs.TRENDING_IMPRESSION}
+              onLayout={registerSection(PredictEventValues.SECTION_ID.TRENDING)}
+            >
+              <PredictTrendingSection />
+            </Box>
           </Box>
         </Animated.ScrollView>
 

app/components/UI/Predict/views/PredictHome/components/PredictCategoriesSection/PredictCategoriesSection.tsx

@@ -74,7 +74,7 @@ const PredictCategoriesSection: React.FC<PredictCategoriesSectionProps> = ({
   );
 
   return (
-    <Box testID={testID} twClassName="my-2">
+    <Box testID={testID}>
       <SectionHeader
         testID={PREDICT_CATEGORIES_SECTION_TEST_IDS.HEADER}
         title={strings('predict.home.categories_title')}

app/components/UI/Predict/views/PredictHome/components/PredictLiveNowSection/PredictLiveNowSection.tsx

@@ -147,13 +147,14 @@ const PredictLiveNowSection: React.FC<PredictLiveNowSectionProps> = ({
   }
 
   return (
-    <Box testID={testID} twClassName="my-2">
+    <Box testID={testID}>
       {/* "See all" navigates to the generic PredictFeedView (feedId 'live'). */}
       <SectionHeader
         testID={PREDICT_LIVE_NOW_SECTION_TEST_IDS.HEADER}
         title={strings('predict.home.live_now_title')}
         isInteractive
         onPress={handleSeeAll}
+        twClassName="p-0 mb-2"
       />
 
       <Box twClassName="-mx-4">

app/components/UI/Predict/views/PredictHome/components/PredictPopularTodaySection/PredictPopularTodaySection.tsx

@@ -183,7 +183,7 @@ const PredictPopularTodaySection: React.FC<PredictPopularTodaySectionProps> = ({
   }
 
   return (
-    <Box testID={testID} twClassName="my-2">
+    <Box testID={testID}>
       <SectionHeader
         testID={PREDICT_POPULAR_TODAY_SECTION_TEST_IDS.HEADER}
         title={strings('predict.feed.popular_today')}
@@ -243,7 +243,7 @@ const PredictPopularTodaySection: React.FC<PredictPopularTodaySectionProps> = ({
                   >
                     <Text
                       variant={TextVariant.BodySm}
-                      color={TextColor.TextAlternative}
+                      color={TextColor.TextDefault}
                       fontWeight={FontWeight.Medium}
                     >
                       {label}