chore: update discover dapp and dapp filter styles

src/components/FilterChipsCarousel.tsx

@@ -54,7 +54,10 @@ function FilterChipsCarousel<T>({
       scrollEnabled={scrollEnabled}
       showsHorizontalScrollIndicator={false}
       style={[styles.container, style]}
-      contentContainerStyle={[styles.contentContainer, { width: scrollEnabled ? 'auto' : '100%' }]}
+      contentContainerStyle={[
+        styles.contentContainer,
+        { flexWrap: scrollEnabled ? 'nowrap' : 'wrap', width: scrollEnabled ? 'auto' : '100%' },
+      ]}
       ref={forwardedRef}
       testID="FilterChipsCarousel"
     >
@@ -108,7 +111,6 @@ const styles = StyleSheet.create({
   contentContainer: {
     paddingHorizontal: Spacing.Thick24,
     gap: Spacing.Smallest8,
-    flexWrap: 'wrap',
   },
   filterChipBackground: {
     overflow: 'hidden',

src/dapps/DappsScreen.tsx

@@ -276,6 +276,7 @@ function DappsScreen({ navigation }: Props) {
                   onFavoriteDapp={onFavoriteDapp}
                   showBorder={true}
                   testID={`${section.testID}/DappCard`}
+                  cardStyle={styles.dappCard}
                 />
               )
             }}
@@ -362,6 +363,9 @@ const styles = StyleSheet.create({
     color: Colors.black,
     marginBottom: Spacing.Thick24,
   },
+  dappCard: {
+    marginTop: Spacing.Regular16,
+  },
 })
 
 export default DappsScreen

src/dappsExplorer/DappCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Image, StyleSheet, Text, View } from 'react-native'
+import { Image, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { DappExplorerEvents } from 'src/analytics/Events'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
 import Card from 'src/components/Card'
@@ -20,7 +20,6 @@ interface DappCardContentProps {
   onFavoriteDapp?: (dapp: Dapp) => void
   favoritedFromSection: DappSection
   disableFavoriting?: boolean
-  showBorder?: boolean
 }
 
 interface Props {
@@ -30,6 +29,8 @@ interface Props {
   disableFavoriting?: boolean
   onFavoriteDapp?: (dapp: Dapp) => void
   showBorder?: boolean
+  cardContentContainerStyle?: ViewStyle
+  cardStyle?: ViewStyle
 }
 
 // Since this icon exists within a touchable, make the hitslop bigger than usual
@@ -40,7 +41,6 @@ export function DappCardContent({
   onFavoriteDapp,
   favoritedFromSection,
   disableFavoriting,
-  showBorder,
 }: DappCardContentProps) {
   const dispatch = useDispatch()
   const favoriteDappIds = useSelector(favoriteDappIdsSelector)
@@ -67,14 +67,7 @@ export function DappCardContent({
     vibrateSuccess()
   }
   return (
-    <View
-      style={[
-        styles.pressableCard,
-        {
-          paddingHorizontal: showBorder ? Spacing.Regular16 : Spacing.Smallest8,
-        },
-      ]}
-    >
+    <>
       <Image source={{ uri: dapp.iconUrl }} style={styles.dappIcon} />
       <View style={styles.itemTextContainer}>
         <Text style={styles.title}>{dapp.name}</Text>
@@ -88,7 +81,7 @@ export function DappCardContent({
       >
         {isFavorited ? <Star /> : !disableFavoriting ? <StarOutline /> : <></>}
       </Touchable>
-    </View>
+    </>
   )
 }
 
@@ -98,22 +91,28 @@ function DappCard({
   onFavoriteDapp,
   disableFavoriting,
   showBorder,
+  cardContentContainerStyle,
+  cardStyle,
   testID,
 }: Props) {
   return (
     <Card
       testID={testID}
-      style={[styles.card, showBorder ? styles.borderStyle : {}]}
+      style={[styles.card, showBorder ? styles.borderStyle : {}, cardStyle]}
       rounded={true}
       shadow={null}
     >
-      <Touchable onPress={onPressDapp} borderRadius={8} testID={`Dapp/${dapp.id}`}>
+      <Touchable
+        style={[styles.pressableCard, cardContentContainerStyle]}
+        onPress={onPressDapp}
+        borderRadius={showBorder ? 8 : undefined}
+        testID={`Dapp/${dapp.id}`}
+      >
         <DappCardContent
           dapp={dapp}
           onFavoriteDapp={onFavoriteDapp}
           disableFavoriting={disableFavoriting}
           favoritedFromSection={DappSection.All}
-          showBorder={showBorder}
         />
       </Touchable>
     </Card>
@@ -139,10 +138,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     flex: 1,
-    paddingVertical: Spacing.Regular16,
+    padding: Spacing.Regular16,
   },
   card: {
-    marginTop: Spacing.Regular16,
     padding: 0,
   },
   title: {

src/dappsExplorer/DiscoverDappsCard.tsx

@@ -1,22 +1,20 @@
 import React, { useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SectionList, StyleSheet, Text, View } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { DappExplorerEvents } from 'src/analytics/Events'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
-import { mostPopularDappsSelector, favoriteDappsSelector } from 'src/dapps/selectors'
+import TextButton from 'src/components/TextButton'
+import { favoriteDappsSelector, mostPopularDappsSelector } from 'src/dapps/selectors'
 import { fetchDappsList } from 'src/dapps/slice'
 import { ActiveDapp, Dapp, DappSection } from 'src/dapps/types'
 import DappCard from 'src/dappsExplorer/DappCard'
 import useOpenDapp from 'src/dappsExplorer/useOpenDapp'
-import { currentLanguageSelector } from 'src/i18n/selectors'
+import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { useDispatch, useSelector } from 'src/redux/hooks'
 import { Colors } from 'src/styles/colors'
-import fontStyles, { typeScale } from 'src/styles/fonts'
+import { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
-import TextButton from 'src/components/TextButton'
-import { navigate } from 'src/navigator/NavigationService'
 
 interface SectionData {
   data: Dapp[]
@@ -30,11 +28,8 @@ const MAX_DAPPS = 5
 function DiscoverDappsCard() {
   const { t } = useTranslation()
 
-  const insets = useSafeAreaInsets()
-
   const sectionListRef = useRef<SectionList>(null)
 
-  const language = useSelector(currentLanguageSelector)
   const dispatch = useDispatch()
   const favoriteDapps = useSelector(favoriteDappsSelector)
   const mostPopularDapps = useSelector(mostPopularDappsSelector)
@@ -62,7 +57,7 @@ function DiscoverDappsCard() {
           data: mostPopularDapps
             .filter((dapp) => !favoriteDappIds.includes(dapp.id))
             .slice(0, MAX_DAPPS - favoriteDapps.length),
-          sectionName: t('dappsScreen.mostPopularDapps').toLocaleUpperCase(language ?? 'en-US'),
+          sectionName: t('dappsScreen.mostPopularDapps'),
           dappSection: DappSection.MostPopular,
           testID: 'DiscoverDappsCard/MostPopularSection',
         },
@@ -73,7 +68,7 @@ function DiscoverDappsCard() {
         ? [
             {
               data: favoriteDapps.slice(0, MAX_DAPPS),
-              sectionName: t('dappsScreen.favoriteDapps').toLocaleUpperCase(language ?? 'en-US'),
+              sectionName: t('dappsScreen.favoriteDapps'),
               dappSection: DappSection.FavoritesDappScreen,
               testID: 'DiscoverDappsCard/FavoritesSection',
             },
@@ -97,25 +92,22 @@ function DiscoverDappsCard() {
         scrollEnabled={false}
         ListHeaderComponent={<Text style={styles.title}>{t('dappsScreen.exploreDapps')}</Text>}
         ListFooterComponent={
-          <TextButton style={styles.footer} onPress={onPressExploreAll}>
-            {t('dappsScreen.exploreAll')}
-          </TextButton>
+          <View>
+            <TextButton style={styles.footer} onPress={onPressExploreAll}>
+              {t('dappsScreen.exploreAll')}
+            </TextButton>
+          </View>
         }
-        contentContainerStyle={[
-          styles.sectionListContentContainer,
-          { paddingBottom: Math.max(insets.bottom, Spacing.Regular16) },
-        ]}
         sections={sections}
         renderItem={({ item: dapp, index, section }) => {
           return (
-            <View style={styles.cardContainer}>
-              <DappCard
-                dapp={dapp}
-                onPressDapp={() => onPressDapp({ ...dapp, openedFrom: section.dappSection }, index)}
-                disableFavoriting={true}
-                testID={`${section.testID}/DappCard`}
-              />
-            </View>
+            <DappCard
+              dapp={dapp}
+              onPressDapp={() => onPressDapp({ ...dapp, openedFrom: section.dappSection }, index)}
+              disableFavoriting={true}
+              testID={`${section.testID}/DappCard`}
+              cardContentContainerStyle={styles.dappCardContentContainer}
+            />
           )
         }}
         renderSectionHeader={({ section: { sectionName, testID } }) => {
@@ -139,40 +131,31 @@ function DiscoverDappsCard() {
 const styles = StyleSheet.create({
   container: {
     padding: Spacing.Regular16,
-    paddingBottom: 0,
-    gap: Spacing.Smallest8,
     borderColor: Colors.gray2,
     borderWidth: 1,
     borderRadius: Spacing.Smallest8,
   },
-  sectionListContentContainer: {
-    paddingTop: Spacing.Regular16,
-    flexGrow: 1,
-  },
   sectionTitle: {
-    ...fontStyles.label,
-    paddingTop: Spacing.Small12,
-    paddingLeft: Spacing.Regular16,
+    ...typeScale.labelXSmall,
     color: Colors.gray4,
+    marginTop: Spacing.Smallest8,
   },
   listFooterComponent: {
     flex: 1,
-    alignItems: 'center',
-    paddingTop: Spacing.Regular16,
+    alignSelf: 'center',
   },
   footer: {
     ...typeScale.labelSemiBoldXSmall,
-    flex: 1,
     color: Colors.primary,
   },
   title: {
-    ...typeScale.titleMedium,
+    ...typeScale.labelSemiBoldMedium,
     color: Colors.black,
-    marginBottom: Spacing.Large32,
-    paddingLeft: Spacing.Regular16,
+    marginBottom: Spacing.Smallest8,
   },
-  cardContainer: {
-    paddingLeft: Spacing.Smallest8,
+  dappCardContentContainer: {
+    padding: 0,
+    marginVertical: Spacing.Regular16,
   },
 })