Desktop ViewHeader

src/view/com/util/ViewHeader.tsx

@@ -11,8 +11,9 @@ import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {NavigationProp} from '#/lib/routes/types'
 import {useSetDrawerOpen} from '#/state/shell'
-import {useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
+import {Text as NewText} from '#/components/Typography'
 import {Text} from './text/Text'
 import {CenteredView} from './Views'
 
@@ -141,40 +142,42 @@ function DesktopWebHeader({
   renderButton?: () => JSX.Element
   showBorder?: boolean
 }) {
-  const pal = usePalette('default')
   const t = useTheme()
   return (
     <CenteredView
       style={[
-        styles.header,
+        a.w_full,
-        styles.desktopHeader,
+        a.py_md,
-        pal.border,
+        a.px_lg,
+        a.gap_xs,
+        showBorder && a.border_b,
+        t.atoms.border_contrast_low,
         {
-          borderBottomWidth: showBorder ? StyleSheet.hairlineWidth : 0,
+          maxWidth: 600,
+          marginLeft: 'auto',
+          marginRight: 'auto',
         },
-        {display: 'flex', flexDirection: 'column'},
       ]}>
-      <View>
+      <NewText
-        <View style={styles.titleContainer} pointerEvents="none">
+        style={[
-          <Text type="title-lg" style={[pal.text, styles.title]}>
+          a.text_lg,
-            {title}
+          a.font_heavy,
-          </Text>
+          a.text_center,
-        </View>
+          {pointerEvents: 'none'},
-        {renderButton?.()}
+        ]}>
-      </View>
+        {title}
+      </NewText>
+      {renderButton?.()}
       {subtitle ? (
-        <View>
+        <NewText
-          <View style={[styles.titleContainer]} pointerEvents="none">
+          style={[
-            <Text
+            a.text_sm,
-              style={[
+            a.text_center,
-                pal.text,
+            t.atoms.text_contrast_medium,
-                styles.subtitleDesktop,
+            {pointerEvents: 'none'},
-                t.atoms.text_contrast_medium,
+          ]}>
-              ]}>
+          {subtitle}
-              {subtitle}
+        </NewText>
-            </Text>
-          </View>
-        </View>
       ) : null}
     </CenteredView>
   )