1 files changed, 36 insertions, 90 deletions

diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx
index bdfc2c7ff..1dc67b6c3 100644
--- a/src/view/com/home/HomeHeaderLayout.web.tsx
+++ b/src/view/com/home/HomeHeaderLayout.web.tsx
@@ -1,26 +1,27 @@
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
+import {View} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {useSession} from '#/state/session'
 import {useShellLayout} from '#/state/shell/shell-layout'
+import {HomeHeaderLayoutMobile} from '#/view/com/home/HomeHeaderLayoutMobile'
 import {Logo} from '#/view/icons/Logo'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useGutterStyles, useTheme} from '#/alf'
+import {ButtonIcon} from '#/components/Button'
 import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
+import * as Layout from '#/components/Layout'
 import {Link} from '#/components/Link'
-import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile'
 
 export function HomeHeaderLayout(props: {
   children: React.ReactNode
   tabBarAnchor: JSX.Element | null | undefined
 }) {
-  const {isMobile} = useWebMediaQueries()
-  if (isMobile) {
+  const {gtMobile} = useBreakpoints()
+  if (!gtMobile) {
     return <HomeHeaderLayoutMobile {...props} />
   } else {
     return <HomeHeaderLayoutDesktopAndTablet {...props} />
@@ -40,98 +41,43 @@ function HomeHeaderLayoutDesktopAndTablet({
   const {hasSession} = useSession()
   const {_} = useLingui()
   const kawaii = useKawaiiMode()
+  const gutter = useGutterStyles()
 
   return (
     <>
       {hasSession && (
-        <View
-          style={[
-            a.relative,
-            a.flex_row,
-            a.justify_end,
-            a.align_center,
-            a.pt_lg,
-            a.px_md,
-            a.pb_2xs,
-            t.atoms.bg,
-            t.atoms.border_contrast_low,
-            styles.bar,
-            kawaii && {paddingTop: 22, paddingBottom: 16},
-          ]}>
+        <Layout.Center>
           <View
-            style={[
-              a.absolute,
-              a.inset_0,
-              a.pt_lg,
-              a.m_auto,
-              kawaii && {paddingTop: 4, paddingBottom: 0},
-              {
-                width: kawaii ? 84 : 28,
-              },
-            ]}>
-            <Logo width={kawaii ? 60 : 28} />
+            style={[a.flex_row, a.align_center, a.pt_md, gutter, t.atoms.bg]}>
+            <View style={{width: 34}} />
+            <View style={[a.flex_1, a.align_center, a.justify_center]}>
+              <Logo width={kawaii ? 60 : 28} />
+            </View>
+            <Link
+              to="/feeds"
+              hitSlop={10}
+              label={_(msg`View your feeds and explore more`)}
+              size="small"
+              variant="ghost"
+              color="secondary"
+              shape="square"
+              style={[a.justify_center]}>
+              <ButtonIcon icon={FeedsIcon} size="lg" />
+            </Link>
           </View>
-
-          <Link
-            to="/feeds"
-            hitSlop={10}
-            label={_(msg`View your feeds and explore more`)}
-            size="small"
-            variant="ghost"
-            color="secondary"
-            shape="square"
-            style={[
-              a.justify_center,
-              {
-                marginTop: -4,
-              },
-            ]}>
-            <FeedsIcon size="md" fill={t.atoms.text_contrast_medium.color} />
-          </Link>
-        </View>
+        </Layout.Center>
       )}
       {tabBarAnchor}
-      <Animated.View
-        onLayout={e => {
-          headerHeight.set(e.nativeEvent.layout.height)
-        }}
-        style={[
-          t.atoms.bg,
-          t.atoms.border_contrast_low,
-          styles.bar,
-          styles.tabBar,
-          headerMinimalShellTransform,
-        ]}>
-        {children}
-      </Animated.View>
+      <Layout.Center
+        style={[a.sticky, a.z_10, a.align_center, t.atoms.bg, {top: 0}]}>
+        <Animated.View
+          onLayout={e => {
+            headerHeight.set(e.nativeEvent.layout.height)
+          }}
+          style={[headerMinimalShellTransform]}>
+          {children}
+        </Animated.View>
+      </Layout.Center>
     </>
   )
 }
-
-const styles = StyleSheet.create({
-  bar: {
-    // @ts-ignore Web only
-    left: 'calc(50% - 300px)',
-    width: 600,
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-  },
-  topBar: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 18,
-    paddingTop: 16,
-    paddingBottom: 8,
-  },
-  tabBar: {
-    // @ts-ignore Web only
-    position: 'sticky',
-    top: 0,
-    flexDirection: 'column',
-    alignItems: 'center',
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-    zIndex: 1,
-  },
-})