Clean up new header

src/components/Layout/Header/index.tsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from '#/lib/routes/types'
+import {isIOS} from '#/platform/detection'
+import {useSetDrawerOpen} from '#/state/shell'
+import {atoms as a, useBreakpoints, useGutterStyles, useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow'
+import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
+import {Text} from '#/components/Typography'
+
+const BUTTON_VISUAL_ALIGNMENT_OFFSET = 3
+
+export function Outer({children}: {children: React.ReactNode}) {
+  const t = useTheme()
+  const gutter = useGutterStyles()
+
+  return (
+    <View
+      style={[
+        a.w_full,
+        a.border_b,
+        a.flex_row,
+        a.align_center,
+        a.gap_sm,
+        gutter,
+        a.py_sm,
+        t.atoms.border_contrast_low,
+      ]}>
+      {children}
+    </View>
+  )
+}
+
+export function Content({children}: {children: React.ReactNode}) {
+  return (
+    <View
+      style={[a.flex_1, a.justify_center, a.py_xs, isIOS && a.align_center]}>
+      {children}
+    </View>
+  )
+}
+
+export function Slot({children}: {children: React.ReactNode}) {
+  return <View style={[{width: 34}]}>{children}</View>
+}
+
+export function BackButton() {
+  const {_} = useLingui()
+  const navigation = useNavigation<NavigationProp>()
+
+  const onPressBack = React.useCallback(() => {
+    if (navigation.canGoBack()) {
+      navigation.goBack()
+    } else {
+      navigation.navigate('Home')
+    }
+  }, [navigation])
+
+  return (
+    <Slot>
+      <Button
+        label={_(msg`Go back`)}
+        size="small"
+        variant="ghost"
+        color="secondary"
+        shape="round"
+        onPress={onPressBack}
+        style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}]}>
+        <ButtonIcon icon={ArrowLeft} size="lg" />
+      </Button>
+    </Slot>
+  )
+}
+
+export function MenuButton() {
+  const {_} = useLingui()
+  const setDrawerOpen = useSetDrawerOpen()
+  const {gtMobile} = useBreakpoints()
+
+  const onPress = React.useCallback(() => {
+    setDrawerOpen(true)
+  }, [setDrawerOpen])
+
+  return gtMobile ? null : (
+    <Slot>
+      <Button
+        label={_(msg`Go back`)}
+        size="small"
+        variant="ghost"
+        color="secondary"
+        shape="round"
+        onPress={onPress}
+        style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}]}>
+        <ButtonIcon icon={Menu} size="lg" />
+      </Button>
+    </Slot>
+  )
+}
+
+export function TitleText({children}: {children: React.ReactNode}) {
+  const {gtMobile} = useBreakpoints()
+  return (
+    <Text
+      style={[
+        a.text_lg,
+        a.font_heavy,
+        a.leading_snug,
+        gtMobile && [a.text_xl],
+      ]}>
+      {children}
+    </Text>
+  )
+}
+
+export function SubtitleText({children}: {children: React.ReactNode}) {
+  const t = useTheme()
+  return (
+    <Text style={[a.text_sm, a.leading_tight, t.atoms.text_contrast_medium]}>
+      {children}
+    </Text>
+  )
+}

src/components/Layout/index.tsx

@@ -7,18 +7,13 @@ import {
 } from 'react-native-keyboard-controller'
 import Animated, {AnimatedScrollViewProps} from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useNavigation} from '@react-navigation/native'
 
-import {NavigationProp} from '#/lib/routes/types'
 import {isWeb} from '#/platform/detection'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
 import {CenteredView} from '#/view/com/util/Views'
-import {atoms as a, useBreakpoints, useGutterStyles,useTheme} from '#/alf'
-import {Button, ButtonIcon} from '#/components/Button'
-import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
-import {Text} from '#/components/Typography'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+
+export * as HeaderNew from './Header'
 
 // Every screen should have a Layout component wrapping it.
 // This component provides a default padding for the top of the screen.
@@ -197,98 +192,6 @@ export const Center = React.forwardRef(function LayoutContent(
   )
 })
 
-export function HeaderNew({children}: {children: React.ReactNode}) {
-  const t = useTheme()
-  const gutter = useGutterStyles({top: true, bottom: true})
-
-  return (
-    <View style={[a.w_full, a.border_b, t.atoms.border_contrast_low]}>
-      <View style={[a.flex_row, a.align_start, gutter, {gap: 9}]}>
-        {children}
-      </View>
-    </View>
-  )
-}
-
-HeaderNew.BackButton = function HeaderBackButton() {
-  const {_} = useLingui()
-  const navigation = useNavigation<NavigationProp>()
-
-  const onPressBack = React.useCallback(() => {
-    if (navigation.canGoBack()) {
-      navigation.goBack()
-    } else {
-      navigation.navigate('Home')
-    }
-  }, [navigation])
-
-  return (
-    <Button
-      label={_(msg`Go back`)}
-      size="small"
-      variant="solid"
-      color="secondary"
-      shape="round"
-      onPress={onPressBack}
-      style={[{marginLeft: -3}]}>
-      <ButtonIcon icon={ChevronLeft} />
-    </Button>
-  )
-}
-
-HeaderNew.Content = function HeaderContent({
-  children,
-  right,
-}: {
-  children: React.ReactNode
-  right?: React.ReactNode
-}) {
-  return (
-    <View style={[a.flex_row, a.align_start, a.gap_xs]}>
-      <View style={[a.flex_1]}>{children}</View>
-      {right && <View style={[a.gap_xs, a.flex_1]}>{right}</View>}
-    </View>
-  )
-}
-
-HeaderNew.TitleText = function HeaderTitleText({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  const {gtMobile} = useBreakpoints()
-  return (
-    <Text
-      style={[
-        a.text_xl,
-        a.font_heavy,
-        a.leading_tight,
-        {paddingTop: 6},
-        gtMobile && [
-          a.text_3xl,
-          {
-            paddingTop: 2,
-          },
-        ],
-      ]}>
-      {children}
-    </Text>
-  )
-}
-
-HeaderNew.SubtitleText = function HeaderSubtitleText({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  const t = useTheme()
-  return (
-    <Text style={[a.text_sm, a.leading_tight, t.atoms.text_contrast_medium]}>
-      {children}
-    </Text>
-  )
-}
-
 const styles = StyleSheet.create({
   scrollViewCommonStyles: {
     width: '100%',

src/screens/Settings/AccountSettings.tsx

@@ -39,12 +39,14 @@ export function AccountSettingsScreen({}: Props) {
   return (
     <Layout.Screen>
       <Layout.Content>
-        <Layout.HeaderNew>
+        <Layout.HeaderNew.Outer>
           <Layout.HeaderNew.BackButton />
           <Layout.HeaderNew.Content>
-            <Layout.HeaderNew.TitleText>Account</Layout.HeaderNew.TitleText>
+            <Layout.HeaderNew.TitleText>
+              <Trans>Account</Trans>
+            </Layout.HeaderNew.TitleText>
           </Layout.HeaderNew.Content>
-        </Layout.HeaderNew>
+        </Layout.HeaderNew.Outer>
 
         <SettingsList.Container>
           <SettingsList.Item>