Trade boilerplate for ease of use

src/components/Layout/Header/index.tsx

@@ -32,46 +32,26 @@ export function Outer({children}: {children: React.ReactNode}) {
         a.py_sm,
         t.atoms.border_contrast_low,
       ]}>
-      <View style={[a.flex_1]}>{children}</View>
+      {children}
     </View>
   )
 }
 
 export function Content({children}: {children: React.ReactNode}) {
   return (
-    <View
+    <View style={[a.flex_1, a.justify_center, isIOS && a.align_center]}>
-      style={[
-        a.flex_1,
-        a.justify_center,
-        a.py_xs,
-        isIOS && a.align_center,
-        {
-          paddingHorizontal: BUTTON_SIZE + a.gap_sm.gap,
-          minHeight: BUTTON_SIZE,
-        },
-      ]}>
       {children}
     </View>
   )
 }
 
-export function Slot({
+export function Slot({children}: {children?: React.ReactNode}) {
-  children,
-  position = 'left',
-}: {
-  children?: React.ReactNode
-  position?: 'left' | 'right'
-}) {
   return (
     <View
       style={[
-        a.absolute,
-        a.inset_0,
         a.z_50,
         {
           width: BUTTON_SIZE,
-          right: position === 'left' ? 'auto' : 0,
-          left: position === 'right' ? 'auto' : 0,
         },
       ]}>
       {children}

src/screens/Settings/AboutSettings.tsx

@@ -29,6 +29,7 @@ export function AboutSettingsScreen({}: Props) {
               <Trans>About</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <SettingsList.Container>
           <SettingsList.LinkItem

src/screens/Settings/AccessibilitySettings.tsx

@@ -47,6 +47,7 @@ export function AccessibilitySettingsScreen({}: Props) {
               <Trans>Accessibility</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <SettingsList.Container>
           <SettingsList.Group contentContainerStyle={[a.gap_sm]}>

src/screens/Settings/AccountSettings.tsx

@@ -46,6 +46,7 @@ export function AccountSettingsScreen({}: Props) {
               <Trans>Account</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
 
         <SettingsList.Container>

src/screens/Settings/AppIconSettings.tsx

@@ -29,6 +29,7 @@ export function AppIconSettingsScreen({}: Props) {
               <Trans>App Icon</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <Text style={[a.text_lg, a.font_heavy]}>Defaults</Text>
         <View style={[a.flex_row, a.flex_wrap]}>

src/screens/Settings/AppPasswords.tsx

@@ -52,6 +52,7 @@ export function AppPasswordsScreen({}: Props) {
               <Trans>App Passwords</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         {error ? (
           <ErrorScreen

src/screens/Settings/AppearanceSettings.tsx

@@ -87,6 +87,7 @@ export function AppearanceSettingsScreen({}: Props) {
                 <Trans>Appearance</Trans>
               </Layout.Header.TitleText>
             </Layout.Header.Content>
+            <Layout.Header.Slot />
           </Layout.Header.Outer>
           <SettingsList.Container>
             <AppearanceToggleButtonGroup

src/screens/Settings/ContentAndMediaSettings.tsx

@@ -40,6 +40,7 @@ export function ContentAndMediaSettingsScreen({}: Props) {
               <Trans>Content & Media</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <SettingsList.Container>
           <SettingsList.LinkItem

src/screens/Settings/ExternalMediaPreferences.tsx

@@ -34,6 +34,7 @@ export function ExternalMediaPreferencesScreen({}: Props) {
               <Trans>External Media Preferences</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <SettingsList.Container>
           <SettingsList.Item>

src/screens/Settings/FollowingFeedPreferences.tsx

@@ -56,6 +56,7 @@ export function FollowingFeedPreferencesScreen({}: Props) {
               <Trans>Following Feed Preferences</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <SettingsList.Container>
           <SettingsList.Item>

src/screens/Settings/LanguageSettings.tsx

@@ -72,6 +72,7 @@ export function LanguageSettingsScreen({}: Props) {
               <Trans>Languages</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <SettingsList.Container>
           <SettingsList.Group iconInset={false}>

src/screens/Settings/NotificationSettings.tsx

@@ -41,6 +41,7 @@ export function NotificationSettingsScreen({}: Props) {
               <Trans>Notification Settings</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         {isQueryError ? (
           <Error

src/screens/Settings/PrivacyAndSecuritySettings.tsx

@@ -37,6 +37,7 @@ export function PrivacyAndSecuritySettingsScreen({}: Props) {
               <Trans>Privacy and Security</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <SettingsList.Container>
           <SettingsList.Item>

src/screens/Settings/Settings.tsx

@@ -81,6 +81,7 @@ export function SettingsScreen({}: Props) {
               <Trans>Settings</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
 
         <SettingsList.Container>

src/screens/Settings/ThreadPreferences.tsx

@@ -46,6 +46,7 @@ export function ThreadPreferencesScreen({}: Props) {
               <Trans>Thread Preferences</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
 
         <SettingsList.Container>