[PWI] Clean up logged out screen (#1978)

* Clean up logged out screen

* Better responsive styles

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>
   )
 }

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>
   )
 }

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,
+})

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,
+})