diff options
Diffstat (limited to 'src/view/com/auth')
| -rw-r--r-- | src/view/com/auth/onboarding/RecommendedFeeds.tsx | 34 | ||||
| -rw-r--r-- | src/view/com/auth/onboarding/Welcome.tsx | 84 |
2 files changed, 51 insertions, 67 deletions
diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx index 2f4c63daf..fa9d69f98 100644 --- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx +++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx @@ -3,14 +3,12 @@ import {FlatList, StyleSheet, View} from 'react-native' import {Text} from 'view/com/util/text/Text' import {usePalette} from 'lib/hooks/usePalette' import {Button} from 'view/com/util/forms/Button' -import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {HomeTabNavigatorParams} from 'lib/routes/types' -import {useStores} from 'state/index' import {observer} from 'mobx-react-lite' import {CustomFeed} from 'view/com/feeds/CustomFeed' import {useCustomFeed} from 'lib/hooks/useCustomFeed' import {makeRecordUri} from 'lib/strings/url-helpers' import {ViewHeader} from 'view/com/util/ViewHeader' +import {isDesktopWeb} from 'platform/detection' const TEMPORARY_RECOMMENDED_FEEDS = [ { @@ -119,21 +117,15 @@ const TEMPORARY_RECOMMENDED_FEEDS = [ }, ] -type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'RecommendedFeeds'> -export const RecommendedFeeds = observer(({navigation}: Props) => { +type Props = { + next: () => void +} +export const RecommendedFeeds = observer(({next}: Props) => { const pal = usePalette('default') - const store = useStores() - - const next = () => { - const nextScreenName = store.onboarding.next('RecommendedFeeds') - if (nextScreenName) { - navigation.navigate(nextScreenName) - } - } return ( <View style={[styles.container]} testID="recommendedFeedsScreen"> - <ViewHeader title="Recommended Feeds" canGoBack /> + <ViewHeader title="Recommended Feeds" canGoBack={true} /> <Text type="lg-medium" style={[pal.text, styles.header]}> Check out some recommended feeds. Click + to add them to your list of pinned feeds. @@ -167,7 +159,19 @@ const Item = ({item}: {item: ItemProps}) => { const data = useCustomFeed(uri) if (!data) return null return ( - <CustomFeed item={data} key={uri} showDescription showLikes showSaveBtn /> + <CustomFeed + item={data} + key={uri} + showDescription + showLikes + showSaveBtn + style={[ + { + // @ts-ignore + cursor: isDesktopWeb ? 'pointer' : 'auto', + }, + ]} + /> ) } diff --git a/src/view/com/auth/onboarding/Welcome.tsx b/src/view/com/auth/onboarding/Welcome.tsx index a1e97a32f..a322e4d4f 100644 --- a/src/view/com/auth/onboarding/Welcome.tsx +++ b/src/view/com/auth/onboarding/Welcome.tsx @@ -5,40 +5,45 @@ import {s} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {Button} from 'view/com/util/forms/Button' -import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {HomeTabNavigatorParams} from 'lib/routes/types' -import {useStores} from 'state/index' import {observer} from 'mobx-react-lite' -import {HeaderButtonProps} from '@react-navigation/native-stack/lib/typescript/src/types' -import {NavigationProp, useNavigation} from '@react-navigation/native' +import {ViewHeader} from 'view/com/util/ViewHeader' +import {isDesktopWeb} from 'platform/detection' -type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Welcome'> -export const Welcome = observer(({navigation}: Props) => { - const pal = usePalette('default') - const store = useStores() - - // make sure bottom nav is hidden - React.useEffect(() => { - if (!store.shell.minimalShellMode) { - store.shell.setMinimalShellMode(true) - } - }, [store.shell.minimalShellMode, store]) +type Props = { + next: () => void + skip: () => void +} - const next = () => { - const nextScreenName = store.onboarding.next('Welcome') - if (nextScreenName) { - navigation.navigate(nextScreenName) - } - } +export const Welcome = observer(({next, skip}: Props) => { + const pal = usePalette('default') return ( - <View style={[styles.container]}> - <View testID="welcomeScreen"> + <View style={[styles.container]} testID="welcomeOnboarding"> + <ViewHeader + showOnDesktop + showBorder={false} + showBackButton={false} + title="" + renderButton={() => { + return ( + <Pressable + accessibilityRole="button" + style={[s.flexRow, s.alignCenter]} + onPress={skip}> + <Text style={[pal.link]}>Skip</Text> + <FontAwesomeIcon + icon={'chevron-right'} + size={14} + color={pal.colors.link} + /> + </Pressable> + ) + }} + /> + <View> <Text style={[pal.text, styles.title]}>Welcome to </Text> <Text style={[pal.text, pal.link, styles.title]}>Bluesky</Text> - <View style={styles.spacer} /> - <View style={[styles.row]}> <FontAwesomeIcon icon={'globe'} size={36} color={pal.colors.link} /> <View style={[styles.rowText]}> @@ -85,35 +90,10 @@ export const Welcome = observer(({navigation}: Props) => { ) }) -export const WelcomeHeaderRight = (props: HeaderButtonProps) => { - const {canGoBack} = props - const pal = usePalette('default') - const navigation = useNavigation<NavigationProp<HomeTabNavigatorParams>>() - const store = useStores() - return ( - <Pressable - accessibilityRole="button" - style={[s.flexRow, s.alignCenter]} - onPress={() => { - if (canGoBack) { - store.onboarding.skip() - navigation.goBack() - } - }}> - <Text style={[pal.link]}>Skip</Text> - <FontAwesomeIcon - icon={'chevron-right'} - size={14} - color={pal.colors.link} - /> - </Pressable> - ) -} - const styles = StyleSheet.create({ container: { flex: 1, - marginVertical: 60, + marginBottom: isDesktopWeb ? 30 : 60, marginHorizontal: 16, justifyContent: 'space-between', }, |