[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,28 +20,6 @@ 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]}>
@@ -85,7 +54,6 @@ export const SplashScreen = ({
           </TouchableOpacity>
         </View>
       </ErrorBoundary>
-      </SafeAreaView>
     </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,
+})