Logged out improvments (#5771)

* fetch all accounts in one go

* delete unused component

* add safeareaview to logged out layout

* add safe area insets to LoggedOut view

* add safe area insets to the error boundary

* sanitize displaynames/handles

* use button for X

* increase spacing

src/view/com/auth/LoggedOut.tsx

@@ -1,13 +1,11 @@
 import React from 'react'
-import {Pressable, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {View} from 'react-native'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {usePalette} from '#/lib/hooks/usePalette'
+import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {logEvent} from '#/lib/statsig/statsig'
-import {s} from '#/lib/styles'
-import {isIOS} from '#/platform/detection'
 import {
   useLoggedOutView,
   useLoggedOutViewControls,
@@ -17,6 +15,9 @@ import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {Login} from '#/screens/Login'
 import {Signup} from '#/screens/Signup'
 import {LandingScreen} from '#/screens/StarterPack/StarterPackLandingScreen'
+import {atoms as a, native, tokens, useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
 import {SplashScreen} from './SplashScreen'
 
 enum ScreenState {
@@ -29,7 +30,8 @@ export {ScreenState as LoggedOutScreenState}
 
 export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
   const {_} = useLingui()
-  const pal = usePalette('default')
+  const t = useTheme()
+  const insets = useSafeAreaInsets()
   const setMinimalShellMode = useSetMinimalShellMode()
   const {requestedAccountSwitchTo} = useLoggedOutView()
   const [screenState, setScreenState] = React.useState<ScreenState>(() => {
@@ -57,31 +59,33 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
   }, [clearRequestedAccount, onDismiss])
 
   return (
-    <View testID="noSessionView" style={[s.hContentRegion, pal.view]}>
+    <View
+      testID="noSessionView"
+      style={[
+        a.util_screen_outer,
+        t.atoms.bg,
+        {paddingTop: insets.top, paddingBottom: insets.bottom},
+      ]}>
       <ErrorBoundary>
         {onDismiss && screenState === ScreenState.S_LoginOrCreateAccount ? (
-          <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,
-            }}
+          <Button
+            label={_(msg`Go back`)}
+            variant="solid"
+            color="secondary_inverted"
+            size="small"
+            shape="round"
+            PressableComponent={native(PressableScale)}
+            style={[
+              a.absolute,
+              {
+                top: insets.top + tokens.space.xl,
+                right: tokens.space.xl,
+                zIndex: 100,
+              },
+            ]}
             onPress={onPressDismiss}>
-            <FontAwesomeIcon
-              icon="x"
-              size={12}
-              style={{
-                color: String(pal.textInverted.color),
-              }}
-            />
-          </Pressable>
+            <ButtonIcon icon={XIcon} />
+          </Button>
         ) : null}
 
         {screenState === ScreenState.S_StarterPack ? (

src/view/com/util/ErrorBoundary.tsx

@@ -1,4 +1,5 @@
 import React, {Component, ErrorInfo, ReactNode} from 'react'
+import {StyleProp, ViewStyle} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -9,6 +10,7 @@ import {CenteredView} from './Views'
 interface Props {
   children?: ReactNode
   renderError?: (error: any) => ReactNode
+  style?: StyleProp<ViewStyle>
 }
 
 interface State {
@@ -37,7 +39,7 @@ export class ErrorBoundary extends Component<Props, State> {
       }
 
       return (
-        <CenteredView style={{height: '100%', flex: 1}}>
+        <CenteredView style={[{height: '100%', flex: 1}, this.props.style]}>
           <TranslatedErrorScreen details={this.state.error.toString()} />
         </CenteredView>
       )

src/view/com/util/layouts/LoggedOutLayout.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import {ScrollView, StyleSheet, View} from 'react-native'
 
+import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
+import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {isWeb} from '#/platform/detection'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
-import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {atoms as a} from '#/alf'
 import {Text} from '../text/Text'
 
@@ -36,7 +36,7 @@ export const LoggedOutLayout = ({
     if (scrollable) {
       return (
         <ScrollView
-          style={styles.scrollview}
+          style={a.flex_1}
           keyboardShouldPersistTaps="handled"
           keyboardDismissMode="none"
           contentContainerStyle={[
@@ -75,7 +75,7 @@ export const LoggedOutLayout = ({
       {scrollable ? (
         <View style={[styles.scrollableContent, contentBg]}>
           <ScrollView
-            style={styles.scrollview}
+            style={a.flex_1}
             contentContainerStyle={styles.scrollViewContentContainer}
             keyboardShouldPersistTaps="handled"
             keyboardDismissMode="on-drag">
@@ -113,9 +113,6 @@ const styles = StyleSheet.create({
   scrollableContent: {
     flex: 2,
   },
-  scrollview: {
-    flex: 1,
-  },
   scrollViewContentContainer: {
     flex: 1,
     paddingHorizontal: 40,

src/view/com/util/layouts/TitleColumnLayout.tsx

@@ -1,69 +0,0 @@
-import React from 'react'
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
-
-interface Props {
-  testID?: string
-  title: JSX.Element
-  horizontal: boolean
-  titleStyle?: StyleProp<ViewStyle>
-  contentStyle?: StyleProp<ViewStyle>
-}
-
-export function TitleColumnLayout({
-  testID,
-  title,
-  horizontal,
-  children,
-  titleStyle,
-  contentStyle,
-}: React.PropsWithChildren<Props>) {
-  const pal = usePalette('default')
-  const titleBg = useColorSchemeStyle(pal.viewLight, pal.view)
-  const contentBg = useColorSchemeStyle(pal.view, {
-    backgroundColor: pal.colors.background,
-    borderColor: pal.colors.border,
-    borderLeftWidth: 1,
-  })
-
-  const layoutStyles = horizontal ? styles2Column : styles1Column
-  return (
-    <View testID={testID} style={layoutStyles.container}>
-      <View style={[layoutStyles.title, titleBg, titleStyle]}>{title}</View>
-      <View style={[layoutStyles.content, contentBg, contentStyle]}>
-        {children}
-      </View>
-    </View>
-  )
-}
-
-const styles2Column = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    height: '100%',
-  },
-  title: {
-    flex: 1,
-    paddingHorizontal: 40,
-    paddingBottom: 80,
-    justifyContent: 'center',
-  },
-  content: {
-    flex: 2,
-    paddingHorizontal: 40,
-    justifyContent: 'center',
-  },
-})
-
-const styles1Column = StyleSheet.create({
-  container: {},
-  title: {
-    paddingHorizontal: 40,
-    paddingVertical: 40,
-  },
-  content: {
-    paddingHorizontal: 40,
-    paddingVertical: 40,
-  },
-})

src/view/shell/createNativeStackNavigatorWithAuth.tsx

@@ -23,17 +23,17 @@ import type {NativeStackNavigatorProps} from '@react-navigation/native-stack/src
 
 import {PWI_ENABLED} from '#/lib/build-flags'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {isNative, isWeb} from '#/platform/detection'
 import {useSession} from '#/state/session'
 import {useOnboardingState} from '#/state/shell'
 import {
   useLoggedOutView,
   useLoggedOutViewControls,
 } from '#/state/shell/logged-out'
-import {isNative, isWeb} from 'platform/detection'
+import {LoggedOut} from '#/view/com/auth/LoggedOut'
 import {Deactivated} from '#/screens/Deactivated'
 import {Onboarding} from '#/screens/Onboarding'
 import {SignupQueued} from '#/screens/SignupQueued'
-import {LoggedOut} from '../com/auth/LoggedOut'
 import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
 import {DesktopLeftNav} from './desktop/LeftNav'
 import {DesktopRightNav} from './desktop/RightNav'

src/view/shell/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {BackHandler, StyleSheet, useWindowDimensions, View} from 'react-native'
 import {Drawer} from 'react-native-drawer-layout'
 import Animated from 'react-native-reanimated'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import * as NavigationBar from 'expo-navigation-bar'
 import {StatusBar} from 'expo-status-bar'
 import {useNavigation, useNavigationState} from '@react-navigation/native'
@@ -41,6 +42,7 @@ function ShellInner() {
   const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
   const setIsDrawerOpen = useSetDrawerOpen()
   const winDim = useWindowDimensions()
+  const insets = useSafeAreaInsets()
 
   const renderDrawerContent = React.useCallback(() => <DrawerContent />, [])
   const onOpenDrawer = React.useCallback(
@@ -94,7 +96,8 @@ function ShellInner() {
   return (
     <>
       <Animated.View style={[a.h_full]}>
-        <ErrorBoundary>
+        <ErrorBoundary
+          style={{paddingTop: insets.top, paddingBottom: insets.bottom}}>
           <Drawer
             renderDrawerContent={renderDrawerContent}
             drawerStyle={{width: Math.min(400, winDim.width * 0.8)}}