diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx index 5954e7f2e4..ff922d4464 100644 --- a/src/view/com/pager/FeedsTabBarMobile.tsx +++ b/src/view/com/pager/FeedsTabBarMobile.tsx @@ -1,5 +1,5 @@ import React, {useMemo} from 'react' -import {Animated, StyleSheet, TouchableOpacity} from 'react-native' +import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native' import {observer} from 'mobx-react-lite' import {TabBar} from 'view/com/pager/TabBar' import {RenderTabBarFnProps} from 'view/com/pager/Pager' @@ -7,6 +7,8 @@ import {UserAvatar} from '../util/UserAvatar' import {useStores} from 'state/index' import {usePalette} from 'lib/hooks/usePalette' import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' +import {Link} from '../util/Link' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' export const FeedsTabBar = observer( ( @@ -33,21 +35,34 @@ export const FeedsTabBar = observer( }, [store]) const items = useMemo( - () => ['Following', ...store.me.savedFeeds.pinnedFeedNames, 'My Feeds'], + () => ['Following', ...store.me.savedFeeds.pinnedFeedNames], [store.me.savedFeeds.pinnedFeedNames], ) return ( - - - + + + + + + + + + + + + {items.map((item, i) => { const selected = i === selectedPage @@ -111,6 +112,7 @@ const styles = isDesktopWeb width: 598, paddingHorizontal: 14, }, + contentContainer: {}, item: { paddingTop: 14, paddingBottom: 12, @@ -123,12 +125,14 @@ const styles = isDesktopWeb outer: { flex: 1, flexDirection: 'row', - paddingLeft: 14, + }, + contentContainer: { + gap: 14, + paddingHorizontal: 18, }, item: { paddingTop: 8, paddingBottom: 12, - marginRight: 24, borderBottomWidth: 3, borderBottomColor: 'transparent', }, diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index bd800590d9..35f7b826bf 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -16,7 +16,6 @@ import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn' import {FeedsTabBar} from '../com/pager/FeedsTabBar' import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager' import {FAB} from '../com/util/fab/FAB' -import {SavedFeeds} from 'view/com/feeds/SavedFeeds' import {useStores} from 'state/index' import {s} from 'lib/styles' import {useOnMainScroll} from 'lib/hooks/useOnMainScroll' @@ -24,7 +23,7 @@ import {useAnalytics} from 'lib/analytics' import {ComposeIcon2} from 'lib/icons' import {isDesktopWeb} from 'platform/detection' -const HEADER_OFFSET = isDesktopWeb ? 50 : 40 +const HEADER_OFFSET = isDesktopWeb ? 50 : 74 const POLL_FREQ = 30e3 // 30sec type Props = NativeStackScreenProps @@ -127,11 +126,6 @@ export const HomeScreen = withAuthRequired( /> ) })} - ) }), diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx index e305e63056..b3a48b4271 100644 --- a/src/view/screens/SavedFeeds.tsx +++ b/src/view/screens/SavedFeeds.tsx @@ -29,6 +29,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {CustomFeedModel} from 'state/models/feeds/custom-feed' import * as Toast from 'view/com/util/Toast' import {Haptics} from 'lib/haptics' +import {Link, TextLink} from 'view/com/util/Link' type Props = NativeStackScreenProps @@ -65,11 +66,36 @@ export const SavedFeeds = withAuthRequired( const renderListFooterComponent = useCallback(() => { return ( - + <> + + + + + Discover new feeds + + + + + + Feeds are custom algorithms that users build with a little coding + expertise.{' '} + {' '} + for more information. + + {savedFeeds.isLoading && } - + ) - }, [savedFeeds]) + }, [pal, savedFeeds.isLoading]) const onRefresh = useCallback(() => savedFeeds.refresh(), [savedFeeds]) @@ -224,9 +250,6 @@ const styles = StyleSheet.create({ borderRightWidth: 1, minHeight: '100vh', }, - footer: { - paddingVertical: 20, - }, empty: { paddingHorizontal: 20, paddingVertical: 20, @@ -252,4 +275,19 @@ const styles = StyleSheet.create({ noBorder: { borderTopWidth: 0, }, + footerText: { + paddingHorizontal: 26, + paddingVertical: 22, + }, + footerLinks: { + borderBottomWidth: 1, + borderTopWidth: 0, + }, + footerLink: { + flexDirection: 'row', + borderTopWidth: 1, + paddingHorizontal: 26, + paddingVertical: 18, + gap: 18, + }, })