diff options
| -rw-r--r-- | src/alf/atoms.ts | 3 | ||||
| -rw-r--r-- | src/alf/tokens.ts | 1 | ||||
| -rw-r--r-- | src/view/screens/Search/Explore.tsx | 31 |
3 files changed, 23 insertions, 12 deletions
diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 1ccb0460c..1dc2dfa7b 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -267,6 +267,9 @@ export const atoms = { font_bold: { fontWeight: tokens.fontWeight.bold, }, + font_heavy: { + fontWeight: tokens.fontWeight.heavy, + }, italic: { fontStyle: 'italic', }, diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts index 1bddd95d4..675844e29 100644 --- a/src/alf/tokens.ts +++ b/src/alf/tokens.ts @@ -118,6 +118,7 @@ export const fontWeight = { normal: '400', semibold: '500', bold: '600', + heavy: '700', } as const export const gradients = { diff --git a/src/view/screens/Search/Explore.tsx b/src/view/screens/Search/Explore.tsx index c7f5f939f..dd93bf813 100644 --- a/src/view/screens/Search/Explore.tsx +++ b/src/view/screens/Search/Explore.tsx @@ -64,7 +64,7 @@ function SuggestedItemsHeader({ fill={t.palette.primary_500} style={{marginLeft: -2}} /> - <Text style={[a.text_2xl, a.font_bold, t.atoms.text]}>{title}</Text> + <Text style={[a.text_2xl, a.font_heavy, t.atoms.text]}>{title}</Text> </View> <Text style={[t.atoms.text_contrast_high, a.leading_snug]}> {description} @@ -119,6 +119,9 @@ function LoadMore({ }) .filter(Boolean) as LoadMoreItems[] }, [item.items, moderationOpts]) + + if (items.length === 0) return null + const type = items[0].type return ( @@ -142,20 +145,20 @@ function LoadMore({ a.relative, { height: 32, - width: 32 + 15 * 3, + width: 32 + 15 * items.length, }, ]}> <View style={[ a.align_center, a.justify_center, - a.border, t.atoms.bg_contrast_25, a.absolute, { width: 30, height: 30, left: 0, + borderWidth: 1, backgroundColor: t.palette.primary_500, borderColor: t.atoms.bg.backgroundColor, borderRadius: type === 'profile' ? 999 : 4, @@ -169,13 +172,13 @@ function LoadMore({ <View key={_item.key} style={[ - a.border, t.atoms.bg_contrast_25, a.absolute, { width: 30, height: 30, left: (i + 1) * 15, + borderWidth: 1, borderColor: t.atoms.bg.backgroundColor, borderRadius: _item.type === 'profile' ? 999 : 4, zIndex: 3 - i, @@ -350,13 +353,15 @@ export function Explore() { } } - i.push({ - type: 'loadMore', - key: 'loadMoreProfiles', - isLoadingMore: isLoadingMoreProfiles, - onLoadMore: onLoadMoreProfiles, - items: i.filter(item => item.type === 'profile').slice(-3), - }) + if (hasNextProfilesPage) { + i.push({ + type: 'loadMore', + key: 'loadMoreProfiles', + isLoadingMore: isLoadingMoreProfiles, + onLoadMore: onLoadMoreProfiles, + items: i.filter(item => item.type === 'profile').slice(-3), + }) + } } else { if (profilesError) { i.push({ @@ -412,7 +417,7 @@ export function Explore() { message: _(msg`Failed to load feeds preferences`), error: cleanError(preferencesError), }) - } else { + } else if (hasNextFeedsPage) { i.push({ type: 'loadMore', key: 'loadMoreFeeds', @@ -454,6 +459,8 @@ export function Explore() { profilesError, feedsError, preferencesError, + hasNextProfilesPage, + hasNextFeedsPage, ]) const renderItem = React.useCallback( |