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