[Layout] Notifications Header (#6910)

* Replace notifications screen header

* fix cropped indicator

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/components/Layout/Header/index.tsx

@@ -7,7 +7,13 @@ 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 {
+  atoms as a,
+  TextStyleProp,
+  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'
@@ -114,7 +120,10 @@ export function MenuButton() {
   )
 }
 
-export function TitleText({children}: {children: React.ReactNode}) {
+export function TitleText({
+  children,
+  style,
+}: {children: React.ReactNode} & TextStyleProp) {
   const {gtMobile} = useBreakpoints()
   return (
     <Text
@@ -124,6 +133,7 @@ export function TitleText({children}: {children: React.ReactNode}) {
         a.leading_tight,
         isIOS && a.text_center,
         gtMobile && [a.text_xl],
+        style,
       ]}
       numberOfLines={2}>
       {children}