Fix layout of NotFound screen and convert to ALF (#10649)

src/view/screens/NotFound.tsx

@@ -1,21 +1,17 @@
 import {useCallback} from 'react'
-import {StyleSheet, View} from 'react-native'
+import {View} from 'react-native'
-import {msg} from '@lingui/core/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
 import {StackActions, useNavigation} from '@react-navigation/native'
 
-import {usePalette} from '#/lib/hooks/usePalette'
 import {type NavigationProp} from '#/lib/routes/types'
-import {s} from '#/lib/styles'
+import {atoms as a, useTheme} from '#/alf'
-import {Button} from '#/view/com/util/forms/Button'
+import {Button, ButtonText} from '#/components/Button'
-import {Text} from '#/view/com/util/text/Text'
-import {ViewHeader} from '#/view/com/util/ViewHeader'
 import * as Layout from '#/components/Layout'
+import {Text} from '#/components/Typography'
 
 export const NotFoundScreen = () => {
-  const pal = usePalette('default')
+  const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const navigation = useNavigation<NavigationProp>()
 
   const canGoBack = navigation.canGoBack()
@@ -30,37 +26,38 @@ export const NotFoundScreen = () => {
 
   return (
     <Layout.Screen testID="notFoundView">
-      <ViewHeader title={_(msg`Page Not Found`)} />
+      <Layout.Center>
-      <View style={styles.container}>
+        <Layout.Header.Outer>
-        <Text type="title-2xl" style={[pal.text, s.mb10]}>
+          <Layout.Header.BackButton />
-          <Trans>Page not found</Trans>
+          <Layout.Header.Content align="left">
-        </Text>
+            <Layout.Header.TitleText>
-        <Text type="md" style={[pal.text, s.mb10]}>
+              <Trans>Page not found</Trans>
-          <Trans>
+            </Layout.Header.TitleText>
-            We're sorry! We can't find the page you were looking for.
+          </Layout.Header.Content>
-          </Trans>
+          <Layout.Header.Slot />
-        </Text>
+        </Layout.Header.Outer>
-        <Button
+        <View style={[a.px_xl, a.align_center, a.h_full, {paddingTop: 100}]}>
-          type="primary"
+          <Text style={[a.mb_md, a.text_4xl, a.font_semi_bold, t.atoms.text]}>
-          label={canGoBack ? _(msg`Go Back`) : _(msg`Go Home`)}
+            <Trans>Page not found</Trans>
-          accessibilityLabel={canGoBack ? _(msg`Go back`) : _(msg`Go home`)}
+          </Text>
-          accessibilityHint={
+          <Text style={[a.mb_md, a.text_md, t.atoms.text]}>
-            canGoBack
+            <Trans>
-              ? _(msg`Returns to previous page`)
+              We're sorry! We can't find the page you were looking for.
-              : _(msg`Returns to home page`)
+            </Trans>
-          }
+          </Text>
-          onPress={onPressHome}
+          <Button
-        />
+            color="primary"
-      </View>
+            size="small"
+            label={canGoBack ? l`Go back` : l`Go home`}
+            accessibilityLabel={canGoBack ? l`Go back` : l`Go home`}
+            accessibilityHint={
+              canGoBack ? l`Returns to previous page` : l`Returns to home page`
+            }
+            onPress={onPressHome}>
+            <ButtonText>{canGoBack ? l`Go back` : l`Go home`}</ButtonText>
+          </Button>
+        </View>
+      </Layout.Center>
     </Layout.Screen>
   )
 }
-
-const styles = StyleSheet.create({
-  container: {
-    paddingTop: 100,
-    paddingHorizontal: 20,
-    alignItems: 'center',
-    height: '100%',
-  },
-})