diff options
| -rw-r--r-- | src/view/com/auth/LoggedOut.tsx | 66 | ||||
| -rw-r--r-- | src/view/com/auth/SplashScreen.tsx | 98 | ||||
| -rw-r--r-- | src/view/screens/Search/index.tsx | 7 | ||||
| -rw-r--r-- | src/view/screens/Search/index.web.tsx | 7 |
4 files changed, 98 insertions, 80 deletions
diff --git a/src/view/com/auth/LoggedOut.tsx b/src/view/com/auth/LoggedOut.tsx index daafa60a3..030ae68b1 100644 --- a/src/view/com/auth/LoggedOut.tsx +++ b/src/view/com/auth/LoggedOut.tsx @@ -1,5 +1,10 @@ import React from 'react' -import {SafeAreaView} from 'react-native' +import {View, Pressable} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' + +import {isIOS} from 'platform/detection' import {Login} from 'view/com/auth/login/Login' import {CreateAccount} from 'view/com/auth/create/CreateAccount' import {ErrorBoundary} from 'view/com/util/ErrorBoundary' @@ -8,6 +13,7 @@ import {usePalette} from 'lib/hooks/usePalette' import {useAnalytics} from 'lib/analytics/analytics' import {SplashScreen} from './SplashScreen' import {useSetMinimalShellMode} from '#/state/shell/minimal-mode' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' enum ScreenState { S_LoginOrCreateAccount, @@ -16,31 +22,65 @@ enum ScreenState { } export function LoggedOut({onDismiss}: {onDismiss?: () => void}) { + const {_} = useLingui() const pal = usePalette('default') const setMinimalShellMode = useSetMinimalShellMode() const {screen} = useAnalytics() const [screenState, setScreenState] = React.useState<ScreenState>( ScreenState.S_LoginOrCreateAccount, ) + const {isMobile} = useWebMediaQueries() React.useEffect(() => { screen('Login') setMinimalShellMode(true) }, [screen, setMinimalShellMode]) - if (screenState === ScreenState.S_LoginOrCreateAccount) { - return ( - <SplashScreen - onDismiss={onDismiss} - onPressSignin={() => setScreenState(ScreenState.S_Login)} - onPressCreateAccount={() => setScreenState(ScreenState.S_CreateAccount)} - /> - ) - } - return ( - <SafeAreaView testID="noSessionView" style={[s.hContentRegion, pal.view]}> + <View + testID="noSessionView" + style={[ + s.hContentRegion, + pal.view, + { + // only needed if dismiss button is present + paddingTop: onDismiss && isMobile ? 40 : 0, + }, + ]}> <ErrorBoundary> + {onDismiss && ( + <Pressable + accessibilityHint={_(msg`Go back`)} + accessibilityLabel={_(msg`Go back`)} + accessibilityRole="button" + style={{ + position: 'absolute', + top: isIOS ? 0 : 20, + right: 20, + padding: 10, + zIndex: 100, + backgroundColor: pal.text.color, + borderRadius: 100, + }} + onPress={onDismiss}> + <FontAwesomeIcon + icon="x" + size={12} + style={{ + color: String(pal.textInverted.color), + }} + /> + </Pressable> + )} + + {screenState === ScreenState.S_LoginOrCreateAccount ? ( + <SplashScreen + onPressSignin={() => setScreenState(ScreenState.S_Login)} + onPressCreateAccount={() => + setScreenState(ScreenState.S_CreateAccount) + } + /> + ) : undefined} {screenState === ScreenState.S_Login ? ( <Login onPressBack={() => @@ -56,6 +96,6 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) { /> ) : undefined} </ErrorBoundary> - </SafeAreaView> + </View> ) } diff --git a/src/view/com/auth/SplashScreen.tsx b/src/view/com/auth/SplashScreen.tsx index 2c968aef4..d88627f65 100644 --- a/src/view/com/auth/SplashScreen.tsx +++ b/src/view/com/auth/SplashScreen.tsx @@ -1,12 +1,5 @@ import React from 'react' -import { - SafeAreaView, - StyleSheet, - TouchableOpacity, - Pressable, - View, -} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {StyleSheet, TouchableOpacity, View} from 'react-native' import {Text} from 'view/com/util/text/Text' import {ErrorBoundary} from 'view/com/util/ErrorBoundary' import {s, colors} from 'lib/styles' @@ -16,11 +9,9 @@ import {Trans, msg} from '@lingui/macro' import {useLingui} from '@lingui/react' export const SplashScreen = ({ - onDismiss, onPressSignin, onPressCreateAccount, }: { - onDismiss?: () => void onPressSignin: () => void onPressCreateAccount: () => void }) => { @@ -29,63 +20,40 @@ export const SplashScreen = ({ return ( <CenteredView style={[styles.container, pal.view]}> - {onDismiss && ( - <Pressable - accessibilityRole="button" - style={{ - position: 'absolute', - top: 20, - right: 20, - padding: 20, - zIndex: 100, - }} - onPress={onDismiss}> - <FontAwesomeIcon - icon="x" - size={24} - style={{ - color: String(pal.text.color), - }} - /> - </Pressable> - )} - - <SafeAreaView testID="noSessionView" style={styles.container}> - <ErrorBoundary> - <View style={styles.hero}> - <Text style={[styles.title, pal.link]}> - <Trans>Bluesky</Trans> + <ErrorBoundary> + <View style={styles.hero}> + <Text style={[styles.title, pal.link]}> + <Trans>Bluesky</Trans> + </Text> + <Text style={[styles.subtitle, pal.textLight]}> + <Trans>See what's next</Trans> + </Text> + </View> + <View testID="signinOrCreateAccount" style={styles.btns}> + <TouchableOpacity + testID="createAccountButton" + style={[styles.btn, {backgroundColor: colors.blue3}]} + onPress={onPressCreateAccount} + accessibilityRole="button" + accessibilityLabel={_(msg`Create new account`)} + accessibilityHint="Opens flow to create a new Bluesky account"> + <Text style={[s.white, styles.btnLabel]}> + <Trans>Create a new account</Trans> </Text> - <Text style={[styles.subtitle, pal.textLight]}> - <Trans>See what's next</Trans> + </TouchableOpacity> + <TouchableOpacity + testID="signInButton" + style={[styles.btn, pal.btn]} + onPress={onPressSignin} + accessibilityRole="button" + accessibilityLabel={_(msg`Sign in`)} + accessibilityHint="Opens flow to sign into your existing Bluesky account"> + <Text style={[pal.text, styles.btnLabel]}> + <Trans>Sign In</Trans> </Text> - </View> - <View testID="signinOrCreateAccount" style={styles.btns}> - <TouchableOpacity - testID="createAccountButton" - style={[styles.btn, {backgroundColor: colors.blue3}]} - onPress={onPressCreateAccount} - accessibilityRole="button" - accessibilityLabel={_(msg`Create new account`)} - accessibilityHint="Opens flow to create a new Bluesky account"> - <Text style={[s.white, styles.btnLabel]}> - <Trans>Create a new account</Trans> - </Text> - </TouchableOpacity> - <TouchableOpacity - testID="signInButton" - style={[styles.btn, pal.btn]} - onPress={onPressSignin} - accessibilityRole="button" - accessibilityLabel={_(msg`Sign in`)} - accessibilityHint="Opens flow to sign into your existing Bluesky account"> - <Text style={[pal.text, styles.btnLabel]}> - <Trans>Sign In</Trans> - </Text> - </TouchableOpacity> - </View> - </ErrorBoundary> - </SafeAreaView> + </TouchableOpacity> + </View> + </ErrorBoundary> </CenteredView> ) } diff --git a/src/view/screens/Search/index.tsx b/src/view/screens/Search/index.tsx index d1b9684ef..69130ecfd 100644 --- a/src/view/screens/Search/index.tsx +++ b/src/view/screens/Search/index.tsx @@ -1 +1,6 @@ -export {SearchScreenMobile as SearchScreen} from '#/view/screens/Search/Search' +import {withAuthRequired} from '#/view/com/auth/withAuthRequired' +import {SearchScreenMobile} from '#/view/screens/Search/Search' + +export const SearchScreen = withAuthRequired(SearchScreenMobile, { + isPublic: true, +}) diff --git a/src/view/screens/Search/index.web.tsx b/src/view/screens/Search/index.web.tsx index 8d09f342a..03fb7589c 100644 --- a/src/view/screens/Search/index.web.tsx +++ b/src/view/screens/Search/index.web.tsx @@ -1 +1,6 @@ -export {SearchScreenDesktop as SearchScreen} from '#/view/screens/Search/Search' +import {withAuthRequired} from '#/view/com/auth/withAuthRequired' +import {SearchScreenDesktop} from '#/view/screens/Search/Search' + +export const SearchScreen = withAuthRequired(SearchScreenDesktop, { + isPublic: true, +}) |