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 ? (