diff options
Diffstat (limited to 'src')
23 files changed, 149 insertions, 167 deletions
diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 18801bf64..8f8855d67 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -22,7 +22,6 @@ import {buildStateObject} from 'lib/routes/helpers' import { AllNavigatorParams, BottomTabNavigatorParams, - FeedsTabNavigatorParams, FlatNavigatorParams, HomeTabNavigatorParams, MessagesTabNavigatorParams, @@ -91,7 +90,6 @@ const navigationRef = createNavigationContainerRef<AllNavigatorParams>() const HomeTab = createNativeStackNavigatorWithAuth<HomeTabNavigatorParams>() const SearchTab = createNativeStackNavigatorWithAuth<SearchTabNavigatorParams>() -const FeedsTab = createNativeStackNavigatorWithAuth<FeedsTabNavigatorParams>() const NotificationsTab = createNativeStackNavigatorWithAuth<NotificationsTabNavigatorParams>() const MyProfileTab = @@ -306,6 +304,7 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) { getComponent={() => MessagesSettingsScreen} options={{title: title(msg`Chat settings`), requireAuth: true}} /> + <Stack.Screen name="Feeds" getComponent={() => FeedsScreen} /> </> ) } @@ -330,7 +329,6 @@ function TabsNavigator() { tabBar={tabBar}> <Tab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} /> <Tab.Screen name="SearchTab" getComponent={() => SearchTabNavigator} /> - <Tab.Screen name="FeedsTab" getComponent={() => FeedsTabNavigator} /> <Tab.Screen name="NotificationsTab" getComponent={() => NotificationsTabNavigator} @@ -384,24 +382,6 @@ function SearchTabNavigator() { ) } -function FeedsTabNavigator() { - const pal = usePalette('default') - return ( - <FeedsTab.Navigator - screenOptions={{ - animation: isAndroid ? 'ios' : undefined, - animationDuration: 285, - gestureEnabled: true, - fullScreenGestureEnabled: true, - headerShown: false, - contentStyle: pal.view, - }}> - <FeedsTab.Screen name="Feeds" getComponent={() => FeedsScreen} /> - {commonScreens(FeedsTab as typeof HomeTab)} - </FeedsTab.Navigator> - ) -} - function NotificationsTabNavigator() { const pal = usePalette('default') return ( @@ -506,11 +486,6 @@ const FlatNavigator = () => { options={{title: title(msg`Search`)}} /> <Flat.Screen - name="Feeds" - getComponent={() => FeedsScreen} - options={{title: title(msg`Feeds`)}} - /> - <Flat.Screen name="Notifications" getComponent={() => NotificationsScreen} options={{title: title(msg`Notifications`), requireAuth: true}} diff --git a/src/components/icons/ListPlus.tsx b/src/components/icons/ListPlus.tsx new file mode 100644 index 000000000..fd14ac9c7 --- /dev/null +++ b/src/components/icons/ListPlus.tsx @@ -0,0 +1,9 @@ +import {createSinglePathSVG} from './TEMPLATE' + +/* + * This icon is off-menu, not part of the icon set + */ + +export const ListPlus_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M4 5a1 1 0 0 0 0 2h16a1 1 0 1 0 0-2H4Zm0 12a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2H4Zm-1-5a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm14-3c.552 0 1 .41 1 .917V13.5h3.583c.507 0 .917.448.917 1s-.41 1-.917 1H18v3.583c0 .507-.448.917-1 .917s-1-.41-1-.917V15.5h-3.583c-.507 0-.917-.448-.917-1s.41-1 .917-1H16V9.917C16 9.41 16.448 9 17 9Z', +}) diff --git a/src/components/icons/Menu.tsx b/src/components/icons/Menu.tsx new file mode 100644 index 000000000..fb183c222 --- /dev/null +++ b/src/components/icons/Menu.tsx @@ -0,0 +1,5 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const Menu_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M2 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Z', +}) diff --git a/src/components/icons/Pin.tsx b/src/components/icons/Pin.tsx new file mode 100644 index 000000000..03dbbac90 --- /dev/null +++ b/src/components/icons/Pin.tsx @@ -0,0 +1,5 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const Pin_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M6.5 3a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3.997a6.25 6.25 0 0 0 1.83 4.42l.377.376A1 1 0 0 1 20 12.5V15a1 1 0 0 1-1 1h-6v5a1 1 0 1 1-2 0v-5H5a1 1 0 0 1-1-1v-2.5a1 1 0 0 1 .293-.707l.376-.377A6.25 6.25 0 0 0 6.5 6.996V3.001Zm2 1v2.997a8.25 8.25 0 0 1-2.416 5.834L6 12.914V14h12v-1.086l-.084-.083A8.25 8.25 0 0 1 15.5 6.997V4h-7Z', +}) diff --git a/src/components/icons/Shapes.tsx b/src/components/icons/Shapes.tsx new file mode 100644 index 000000000..79f90018a --- /dev/null +++ b/src/components/icons/Shapes.tsx @@ -0,0 +1,5 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const Shapes_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M7 3a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2H8v2a1 1 0 1 1-2 0V8H4a1 1 0 0 1 0-2h2V4a1 1 0 0 1 1-1Zm6 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3 14a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 1v4h4v-4H5Zm9.171-.829a1 1 0 0 1 1.415 0L17 15.585l1.414-1.414a1 1 0 1 1 1.414 1.414L18.414 17l1.414 1.414a1 1 0 0 1-1.414 1.414L17 18.414l-1.415 1.414a1 1 0 0 1-1.414-1.414l1.415-1.415-1.415-1.414a1 1 0 0 1 0-1.414Z', +}) diff --git a/src/components/icons/Star.tsx b/src/components/icons/Star.tsx new file mode 100644 index 000000000..e6ac8011f --- /dev/null +++ b/src/components/icons/Star.tsx @@ -0,0 +1,9 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const Star_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M12 1a1 1 0 0 1 .902.568l2.643 5.517 6.085.799a1 1 0 0 1 .557 1.718l-4.45 4.207 1.118 6.008a1 1 0 0 1-1.46 1.063L12 17.962 6.604 20.88a1 1 0 0 1-1.459-1.063l1.117-6.008-4.45-4.207a1 1 0 0 1 .558-1.718l6.085-.8 2.643-5.516A1 1 0 0 1 12 1Zm0 3.315-1.975 4.123a1 1 0 0 1-.772.56l-4.538.595 3.317 3.137a1 1 0 0 1 .296.91l-.834 4.485 4.03-2.179a1 1 0 0 1 .952 0l4.03 2.179-.834-4.485a1 1 0 0 1 .296-.91l3.317-3.137-4.538-.596a1 1 0 0 1-.772-.56L12 4.316Z', +}) + +export const Star_Filled_Corner0_Rounded = createSinglePathSVG({ + path: 'M12.902 1.568a1 1 0 0 0-1.804 0L8.455 7.085l-6.085.799a1 1 0 0 0-.557 1.718l4.45 4.207-1.117 6.008a1 1 0 0 0 1.458 1.063L12 17.962l5.396 2.918a1 1 0 0 0 1.459-1.063l-1.117-6.008 4.45-4.207a1 1 0 0 0-.558-1.718l-6.085-.8-2.643-5.516Z', +}) diff --git a/src/lib/hooks/useNavigationTabState.ts b/src/lib/hooks/useNavigationTabState.ts index c70653e3a..e1fa95008 100644 --- a/src/lib/hooks/useNavigationTabState.ts +++ b/src/lib/hooks/useNavigationTabState.ts @@ -7,6 +7,7 @@ export function useNavigationTabState() { const res = { isAtHome: getTabState(state, 'Home') !== TabState.Outside, isAtSearch: getTabState(state, 'Search') !== TabState.Outside, + // FeedsTab no longer exists, but this check works for `Feeds` screen as well isAtFeeds: getTabState(state, 'Feeds') !== TabState.Outside, isAtNotifications: getTabState(state, 'Notifications') !== TabState.Outside, diff --git a/src/lib/routes/helpers.ts b/src/lib/routes/helpers.ts index 603b6f71b..1297df8d2 100644 --- a/src/lib/routes/helpers.ts +++ b/src/lib/routes/helpers.ts @@ -35,7 +35,7 @@ export function isStateAtTabRoot(state: State | undefined) { return ( isTab(currentRoute.name, 'Home') || isTab(currentRoute.name, 'Search') || - isTab(currentRoute.name, 'Feeds') || + isTab(currentRoute.name, 'Messages') || isTab(currentRoute.name, 'Notifications') || isTab(currentRoute.name, 'MyProfile') ) diff --git a/src/lib/routes/types.ts b/src/lib/routes/types.ts index 7504cd83a..caa861b6e 100644 --- a/src/lib/routes/types.ts +++ b/src/lib/routes/types.ts @@ -40,12 +40,12 @@ export type CommonNavigatorParams = { Hashtag: {tag: string; author?: string} MessagesConversation: {conversation: string; embed?: string} MessagesSettings: undefined + Feeds: undefined } export type BottomTabNavigatorParams = CommonNavigatorParams & { HomeTab: undefined SearchTab: undefined - FeedsTab: undefined NotificationsTab: undefined MyProfileTab: undefined MessagesTab: undefined @@ -59,10 +59,6 @@ export type SearchTabNavigatorParams = CommonNavigatorParams & { Search: {q?: string} } -export type FeedsTabNavigatorParams = CommonNavigatorParams & { - Feeds: undefined -} - export type NotificationsTabNavigatorParams = CommonNavigatorParams & { Notifications: undefined } @@ -89,7 +85,6 @@ export type AllNavigatorParams = CommonNavigatorParams & { Home: undefined SearchTab: undefined Search: {q?: string} - FeedsTab: undefined Feeds: undefined NotificationsTab: undefined Notifications: undefined diff --git a/src/screens/Home/NoFeedsPinned.tsx b/src/screens/Home/NoFeedsPinned.tsx index e804e3e09..3a98b8734 100644 --- a/src/screens/Home/NoFeedsPinned.tsx +++ b/src/screens/Home/NoFeedsPinned.tsx @@ -3,13 +3,10 @@ import {View} from 'react-native' import {TID} from '@atproto/common-web' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useNavigation} from '@react-navigation/native' import {DISCOVER_SAVED_FEED, TIMELINE_SAVED_FEED} from '#/lib/constants' -import {isNative} from '#/platform/detection' import {useOverwriteSavedFeedsMutation} from '#/state/queries/preferences' import {UsePreferencesQueryResponse} from '#/state/queries/preferences' -import {NavigationProp} from 'lib/routes/types' import {CenteredView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' @@ -26,7 +23,6 @@ export function NoFeedsPinned({ }) { const {_} = useLingui() const headerOffset = useHeaderOffset() - const navigation = useNavigation<NavigationProp>() const {isPending, mutateAsync: overwriteSavedFeeds} = useOverwriteSavedFeedsMutation() @@ -66,15 +62,6 @@ export function NoFeedsPinned({ await overwriteSavedFeeds(toSave) }, [overwriteSavedFeeds, preferences.savedFeeds]) - const onPressFeedsLink = React.useCallback(() => { - if (isNative) { - // Hack that's necessary due to how our navigators are set up. - navigation.navigate('FeedsTab') - navigation.popToTop() - return false - } - }, [navigation]) - return ( <CenteredView sideBorders style={[a.h_full_vh]}> <View @@ -115,7 +102,6 @@ export function NoFeedsPinned({ <Link label={_(msg`Browse other feeds`)} to="/feeds" - onPress={onPressFeedsLink} size="medium" variant="solid" color="secondary"> diff --git a/src/view/com/home/HomeHeader.tsx b/src/view/com/home/HomeHeader.tsx index b068484e8..b225efaa3 100644 --- a/src/view/com/home/HomeHeader.tsx +++ b/src/view/com/home/HomeHeader.tsx @@ -5,7 +5,6 @@ import {usePalette} from '#/lib/hooks/usePalette' import {FeedSourceInfo} from '#/state/queries/feed' import {useSession} from '#/state/session' import {NavigationProp} from 'lib/routes/types' -import {isWeb} from 'platform/detection' import {RenderTabBarFnProps} from 'view/com/pager/Pager' import {TabBar} from '../pager/TabBar' import {HomeHeaderLayout} from './HomeHeaderLayout' @@ -39,12 +38,7 @@ export function HomeHeader( }, [hasPinnedCustom, feeds]) const onPressFeedsLink = React.useCallback(() => { - if (isWeb) { - navigation.navigate('Feeds') - } else { - navigation.navigate('FeedsTab') - navigation.popToTop() - } + navigation.navigate('Feeds') }, [navigation]) const onSelect = React.useCallback( diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx index 474fc392d..77bdba51f 100644 --- a/src/view/com/home/HomeHeaderLayout.web.tsx +++ b/src/view/com/home/HomeHeaderLayout.web.tsx @@ -1,22 +1,18 @@ import React from 'react' import {StyleSheet, View} from 'react-native' import Animated from 'react-native-reanimated' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {CogIcon} from '#/lib/icons' import {useSession} from '#/state/session' import {useShellLayout} from '#/state/shell/shell-layout' import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform' -import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {Logo} from '#/view/icons/Logo' +import {atoms as a, useTheme} from '#/alf' +import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag' +import {Link} from '#/components/Link' import {useKawaiiMode} from '../../../state/preferences/kawaii' -import {Link} from '../util/Link' import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile' export function HomeHeaderLayout(props: { @@ -38,7 +34,7 @@ function HomeHeaderLayoutDesktopAndTablet({ children: React.ReactNode tabBarAnchor: JSX.Element | null | undefined }) { - const pal = usePalette('default') + const t = useTheme() const headerMinimalShellTransform = useMinimalShellHeaderTransform() const {headerHeight} = useShellLayout() const {hasSession} = useSession() @@ -51,31 +47,46 @@ function HomeHeaderLayoutDesktopAndTablet({ {hasSession && ( <View style={[ - pal.view, - pal.border, + a.relative, + a.flex_row, + a.justify_end, + a.align_center, + a.pt_lg, + a.px_md, + a.pb_2xs, + t.atoms.bg, + t.atoms.border_contrast_low, styles.bar, - styles.topBar, - kawaii && {paddingTop: 4, paddingBottom: 0}, ]}> + <View + style={[ + a.absolute, + a.inset_0, + a.pt_lg, + a.m_auto, + kawaii && {paddingTop: 4, paddingBottom: 0}, + { + width: kawaii ? 60 : 28, + }, + ]}> + <Logo width={kawaii ? 60 : 28} /> + </View> + <Link - href="/settings/following-feed" - hitSlop={10} - accessibilityRole="button" - accessibilityLabel={_(msg`Following Feed Preferences`)} - accessibilityHint=""> - <FontAwesomeIcon - icon="sliders" - style={pal.textLight as FontAwesomeIconStyle} - /> - </Link> - <Logo width={kawaii ? 60 : 28} /> - <Link - href="/settings/saved-feeds" + to="/feeds" hitSlop={10} - accessibilityRole="button" - accessibilityLabel={_(msg`Edit Saved Feeds`)} - accessibilityHint={_(msg`Opens screen to edit Saved Feeds`)}> - <CogIcon size={22} strokeWidth={2} style={pal.textLight} /> + label={_(msg`View your feeds and explore more`)} + size="small" + variant="ghost" + color="secondary" + shape="square" + style={[ + a.justify_center, + { + marginTop: -4, + }, + ]}> + <FeedsIcon size="md" fill={t.atoms.text_contrast_medium.color} /> </Link> </View> )} @@ -85,8 +96,8 @@ function HomeHeaderLayoutDesktopAndTablet({ headerHeight.value = e.nativeEvent.layout.height }} style={[ - pal.view, - pal.border, + t.atoms.bg, + t.atoms.border_contrast_low, styles.bar, styles.tabBar, headerMinimalShellTransform, diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx index 5ce1d80a7..895baa9a4 100644 --- a/src/view/com/home/HomeHeaderLayoutMobile.tsx +++ b/src/view/com/home/HomeHeaderLayoutMobile.tsx @@ -1,8 +1,6 @@ import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' import Animated from 'react-native-reanimated' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -15,10 +13,13 @@ import {usePalette} from 'lib/hooks/usePalette' import {isWeb} from 'platform/detection' import {Logo} from '#/view/icons/Logo' import {atoms} from '#/alf' +import {useTheme} from '#/alf' +import {atoms as a} from '#/alf' import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette' -import {Link as Link2} from '#/components/Link' +import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag' +import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' +import {Link} from '#/components/Link' import {IS_DEV} from '#/env' -import {Link} from '../util/Link' export function HomeHeaderLayoutMobile({ children, @@ -26,6 +27,7 @@ export function HomeHeaderLayoutMobile({ children: React.ReactNode tabBarAnchor: JSX.Element | null | undefined }) { + const t = useTheme() const pal = usePalette('default') const {_} = useLingui() const setDrawerOpen = useSetDrawerOpen() @@ -54,11 +56,7 @@ export function HomeHeaderLayoutMobile({ msg`Access profile and other navigation links`, )} hitSlop={HITSLOP_10}> - <FontAwesomeIcon - icon="bars" - size={18} - color={pal.colors.textLight} - /> + <Menu size="lg" fill={t.atoms.text_contrast_medium.color} /> </TouchableOpacity> </View> <View> @@ -74,22 +72,28 @@ export function HomeHeaderLayoutMobile({ {width: 100}, ]}> {IS_DEV && ( - <Link2 to="/sys/debug"> + <Link to="/sys/debug"> <ColorPalette size="md" /> - </Link2> + </Link> )} {hasSession && ( <Link testID="viewHeaderHomeFeedPrefsBtn" - href="/settings/following-feed" + to="/feeds" hitSlop={HITSLOP_10} - accessibilityRole="button" - accessibilityLabel={_(msg`Following Feed Preferences`)} - accessibilityHint=""> - <FontAwesomeIcon - icon="sliders" - style={pal.textLight as FontAwesomeIconStyle} - /> + label={_(msg`View your feeds and explore more`)} + size="small" + variant="ghost" + color="secondary" + shape="square" + style={[ + a.justify_center, + { + marginTop: 2, + marginRight: -6, + }, + ]}> + <FeedsIcon size="lg" fill={t.atoms.text_contrast_medium.color} /> </Link> )} </View> @@ -113,8 +117,8 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - paddingHorizontal: 18, - paddingVertical: 8, + paddingHorizontal: 16, + paddingVertical: 5, width: '100%', }, title: { diff --git a/src/view/com/posts/FollowingEmptyState.tsx b/src/view/com/posts/FollowingEmptyState.tsx index ef02039af..dd4915e18 100644 --- a/src/view/com/posts/FollowingEmptyState.tsx +++ b/src/view/com/posts/FollowingEmptyState.tsx @@ -1,18 +1,19 @@ import React from 'react' import {StyleSheet, View} from 'react-native' -import {useNavigation} from '@react-navigation/native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {Text} from '../util/text/Text' -import {Button} from '../util/forms/Button' +import {Trans} from '@lingui/macro' +import {useNavigation} from '@react-navigation/native' + +import {usePalette} from 'lib/hooks/usePalette' import {MagnifyingGlassIcon} from 'lib/icons' import {NavigationProp} from 'lib/routes/types' -import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' import {isWeb} from 'platform/detection' -import {Trans} from '@lingui/macro' +import {Button} from '../util/forms/Button' +import {Text} from '../util/text/Text' export function FollowingEmptyState() { const pal = usePalette('default') @@ -29,12 +30,7 @@ export function FollowingEmptyState() { }, [navigation]) const onPressDiscoverFeeds = React.useCallback(() => { - if (isWeb) { - navigation.navigate('Feeds') - } else { - navigation.navigate('FeedsTab') - navigation.popToTop() - } + navigation.navigate('Feeds') }, [navigation]) return ( diff --git a/src/view/com/posts/FollowingEndOfFeed.tsx b/src/view/com/posts/FollowingEndOfFeed.tsx index bea5bedea..d3c616a20 100644 --- a/src/view/com/posts/FollowingEndOfFeed.tsx +++ b/src/view/com/posts/FollowingEndOfFeed.tsx @@ -1,17 +1,18 @@ import React from 'react' -import {StyleSheet, View, Dimensions} from 'react-native' -import {useNavigation} from '@react-navigation/native' +import {Dimensions, StyleSheet, View} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {Text} from '../util/text/Text' -import {Button} from '../util/forms/Button' -import {NavigationProp} from 'lib/routes/types' +import {Trans} from '@lingui/macro' +import {useNavigation} from '@react-navigation/native' + import {usePalette} from 'lib/hooks/usePalette' +import {NavigationProp} from 'lib/routes/types' import {s} from 'lib/styles' import {isWeb} from 'platform/detection' -import {Trans} from '@lingui/macro' +import {Button} from '../util/forms/Button' +import {Text} from '../util/text/Text' export function FollowingEndOfFeed() { const pal = usePalette('default') @@ -28,12 +29,7 @@ export function FollowingEndOfFeed() { }, [navigation]) const onPressDiscoverFeeds = React.useCallback(() => { - if (isWeb) { - navigation.navigate('Feeds') - } else { - navigation.navigate('FeedsTab') - navigation.popToTop() - } + navigation.navigate('Feeds') }, [navigation]) return ( diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx index 549fc5151..edc6b75f9 100644 --- a/src/view/com/profile/ProfileSubpageHeader.tsx +++ b/src/view/com/profile/ProfileSubpageHeader.tsx @@ -21,6 +21,7 @@ import {Text} from '../util/text/Text' import {UserAvatar, UserAvatarType} from '../util/UserAvatar' import {CenteredView} from '../util/Views' import hairlineWidth = StyleSheet.hairlineWidth +import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' export function ProfileSubpageHeader({ isLoading, @@ -103,11 +104,7 @@ export function ProfileSubpageHeader({ style={[styles.backIcon, pal.text]} /> ) : ( - <FontAwesomeIcon - size={18} - icon="bars" - style={[styles.backIcon, pal.textLight]} - /> + <Menu size="lg" style={[{marginTop: 4}, pal.textLight]} /> )} </Pressable> <View style={{flex: 1}} /> @@ -194,7 +191,7 @@ const styles = StyleSheet.create({ backBtnWide: { width: 20, height: 30, - paddingHorizontal: 6, + marginRight: 4, }, backIcon: { marginTop: 6, diff --git a/src/view/com/testing/TestCtrls.e2e.tsx b/src/view/com/testing/TestCtrls.e2e.tsx index 1291165b3..82750959d 100644 --- a/src/view/com/testing/TestCtrls.e2e.tsx +++ b/src/view/com/testing/TestCtrls.e2e.tsx @@ -90,7 +90,7 @@ export function TestCtrls() { /> <Pressable testID="e2eGotoFeeds" - onPress={() => navigate('FeedsTab')} + onPress={() => navigate('Feeds')} accessibilityRole="button" style={BTN} /> diff --git a/src/view/com/util/SimpleViewHeader.tsx b/src/view/com/util/SimpleViewHeader.tsx index 814b2fb15..dc14723d2 100644 --- a/src/view/com/util/SimpleViewHeader.tsx +++ b/src/view/com/util/SimpleViewHeader.tsx @@ -8,13 +8,15 @@ import { } from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {useNavigation} from '@react-navigation/native' -import {CenteredView} from './Views' + +import {isWeb} from '#/platform/detection' +import {useSetDrawerOpen} from '#/state/shell' +import {useAnalytics} from 'lib/analytics/analytics' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useAnalytics} from 'lib/analytics/analytics' import {NavigationProp} from 'lib/routes/types' -import {useSetDrawerOpen} from '#/state/shell' -import {isWeb} from '#/platform/detection' +import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' +import {CenteredView} from './Views' const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} @@ -72,11 +74,7 @@ export function SimpleViewHeader({ style={[styles.backIcon, pal.text]} /> ) : ( - <FontAwesomeIcon - size={18} - icon="bars" - style={[styles.backIcon, pal.textLight]} - /> + <Menu size="lg" style={[{marginTop: 4}, pal.textLight]} /> )} </TouchableOpacity> ) : null} @@ -110,7 +108,8 @@ const styles = StyleSheet.create({ backBtnWide: { width: 30, height: 30, - paddingHorizontal: 6, + paddingLeft: 4, + marginRight: 4, }, backIcon: { marginTop: 6, diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 95b6e290c..e659aed42 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -16,6 +16,7 @@ import {useTheme} from '#/alf' import {Text} from './text/Text' import {CenteredView} from './Views' import hairlineWidth = StyleSheet.hairlineWidth +import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} @@ -98,11 +99,7 @@ export function ViewHeader({ style={[styles.backIcon, pal.text]} /> ) : !isTablet ? ( - <FontAwesomeIcon - size={18} - icon="bars" - style={[styles.backIcon, pal.textLight]} - /> + <Menu size="lg" style={[{marginTop: 3}, pal.textLight]} /> ) : null} </TouchableOpacity> ) : null} @@ -269,7 +266,8 @@ const styles = StyleSheet.create({ backBtnWide: { width: 30, height: 30, - paddingHorizontal: 6, + paddingLeft: 4, + marginRight: 4, }, backIcon: { marginTop: 6, diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index 837e58195..f3db5ef17 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -29,7 +29,7 @@ import {HITSLOP_10} from 'lib/constants' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {CogIcon, ComposeIcon2, MagnifyingGlassIcon2} from 'lib/icons' -import {FeedsTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {cleanError} from 'lib/strings/errors' import {s} from 'lib/styles' import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' @@ -54,7 +54,7 @@ import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/Li import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle' import hairlineWidth = StyleSheet.hairlineWidth -type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'> +type Props = NativeStackScreenProps<CommonNavigatorParams, 'Feeds'> type FlatlistSlice = | { @@ -594,7 +594,6 @@ export function FeedsScreen(_props: Props) { {isMobile && ( <ViewHeader title={_(msg`Feeds`)} - canGoBack={false} renderButton={renderHeaderBtn} showBorder /> diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index 765b783e8..f1ae7945a 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -163,7 +163,7 @@ export function NotificationsScreen({}: Props) { return ( <CenteredView testID="notificationsScreen" - style={s.hContentRegion} + style={[s.hContentRegion, {paddingTop: 2}]} sideBorders={true}> <ViewHeader title={_(msg`Notifications`)} diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 118a8be25..b6daf84b3 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -59,6 +59,7 @@ import {CenteredView, ScrollView} from '#/view/com/util/Views' import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search' import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' import {atoms as a} from '#/alf' +import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' function Loader() { const pal = usePalette('default') @@ -712,11 +713,7 @@ export function SearchScreen( accessibilityRole="button" accessibilityLabel={_(msg`Menu`)} accessibilityHint={_(msg`Access navigation links and settings`)}> - <FontAwesomeIcon - icon="bars" - size={18} - color={pal.colors.textLight} - /> + <Menu size="lg" fill={pal.colors.textLight} /> </Pressable> )} <SearchInputBox @@ -1073,13 +1070,14 @@ function scrollToTopWeb() { } } -const HEADER_HEIGHT = 50 +const HEADER_HEIGHT = 46 const styles = StyleSheet.create({ header: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12, + paddingLeft: 13, paddingVertical: 4, height: HEADER_HEIGHT, // @ts-ignore web only @@ -1092,7 +1090,6 @@ const styles = StyleSheet.create({ height: 30, borderRadius: 30, marginRight: 6, - paddingBottom: 2, alignItems: 'center', justifyContent: 'center', }, diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index be35b314b..e858ae2c4 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -186,10 +186,11 @@ let DrawerContent = ({}: {}): React.ReactNode => { onPressTab('MyProfile') }, [onPressTab]) - const onPressMyFeeds = React.useCallback( - () => onPressTab('Feeds'), - [onPressTab], - ) + const onPressMyFeeds = React.useCallback(() => { + track('Menu:ItemClicked', {url: 'Feeds'}) + navigation.navigate('Feeds') + setDrawerOpen(false) + }, [navigation, setDrawerOpen, track]) const onPressLists = React.useCallback(() => { track('Menu:ItemClicked', {url: 'Lists'}) |