Update headers

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
@@ -13,6 +13,7 @@ import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {usePalette} from 'lib/hooks/usePalette'
 import {isWeb} from 'platform/detection'
 import {Logo} from '#/view/icons/Logo'
+import {Logotype} from '#/view/icons/Logotype'
 import {atoms} from '#/alf'
 import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette'
 import {Link as Link2} from '#/components/Link'
@@ -38,25 +39,9 @@ export function HomeHeaderLayoutMobile({
         headerHeight.value = e.nativeEvent.layout.height
       }}>
       <View style={[pal.view, styles.topBar]}>
-        <View style={[pal.view, {width: 100}]}>
+        <View style={[atoms.flex_row, atoms.align_end, atoms.gap_md]}>
-          <TouchableOpacity
-            testID="viewHeaderDrawerBtn"
-            onPress={undefined /*TODO*/}
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`Open navigation`)}
-            accessibilityHint={_(
-              msg`Access profile and other navigation links`,
-            )}
-            hitSlop={HITSLOP_10}>
-            <FontAwesomeIcon
-              icon="bars"
-              size={18}
-              color={pal.colors.textLight}
-            />
-          </TouchableOpacity>
-        </View>
-        <View>
           <Logo width={30} />
+          <Logotype width={80} />
         </View>
         <View
           style={[
@@ -67,7 +52,7 @@ export function HomeHeaderLayoutMobile({
             pal.view,
             {width: 100},
           ]}>
-          {IS_DEV && (
+          {IS_DEV && false && (
             <Link2 to="/sys/debug">
               <ColorPalette size="md" />
             </Link2>
@@ -75,7 +60,7 @@ export function HomeHeaderLayoutMobile({
           {hasSession && (
             <Link
               testID="viewHeaderHomeFeedPrefsBtn"
-              href="/settings/following-feed"
+              href="/settings"
               hitSlop={HITSLOP_10}
               accessibilityRole="button"
               accessibilityLabel={_(msg`Following Feed Preferences`)}

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -48,7 +48,6 @@ export function ProfileSubpageHeader({
   const {isMobile} = useWebMediaQueries()
   const {openLightbox} = useLightboxControls()
   const pal = usePalette('default')
-  const canGoBack = navigation.canGoBack()
 
   const onPressBack = React.useCallback(() => {
     if (navigation.canGoBack()) {
@@ -83,25 +82,17 @@ export function ProfileSubpageHeader({
           ]}>
           <Pressable
             testID="headerDrawerBtn"
-            onPress={canGoBack ? onPressBack : undefined /*TODO*/}
+            onPress={onPressBack}
             hitSlop={BACK_HITSLOP}
-            style={canGoBack ? styles.backBtn : styles.backBtnWide}
+            style={styles.backBtn}
             accessibilityRole="button"
-            accessibilityLabel={canGoBack ? 'Back' : 'Menu'}
+            accessibilityLabel={'Back'}
             accessibilityHint="">
-            {canGoBack ? (
+            <FontAwesomeIcon
-              <FontAwesomeIcon
+              size={18}
-                size={18}
+              icon="angle-left"
-                icon="angle-left"
+              style={[styles.backIcon, pal.text]}
-                style={[styles.backIcon, pal.text]}
+            />
-              />
-            ) : (
-              <FontAwesomeIcon
-                size={18}
-                icon="bars"
-                style={[styles.backIcon, pal.textLight]}
-              />
-            )}
           </Pressable>
           <View style={{flex: 1}} />
           {children}
@@ -184,11 +175,6 @@ const styles = StyleSheet.create({
     width: 20,
     height: 30,
   },
-  backBtnWide: {
-    width: 20,
-    height: 30,
-    paddingHorizontal: 6,
-  },
   backIcon: {
     marginTop: 6,
   },

src/view/com/util/SimpleViewHeader.tsx

@@ -10,7 +10,6 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'
 
 import {isWeb} from '#/platform/detection'
-import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {NavigationProp} from 'lib/routes/types'
@@ -28,7 +27,6 @@ export function SimpleViewHeader({
 }>) {
   const pal = usePalette('default')
   const navigation = useNavigation<NavigationProp>()
-  const {track} = useAnalytics()
   const {isMobile} = useWebMediaQueries()
   const canGoBack = navigation.canGoBack()
 
@@ -40,11 +38,6 @@ export function SimpleViewHeader({
     }
   }, [navigation])
 
-  const onPressMenu = React.useCallback(() => {
-    track('ViewHeader:MenuButtonClicked')
-    // TODO
-  }, [track])
-
   const Container = isMobile ? View : CenteredView
   return (
     <Container
@@ -55,28 +48,20 @@ export function SimpleViewHeader({
         pal.view,
         style,
       ]}>
-      {showBackButton ? (
+      {showBackButton && canGoBack ? (
         <TouchableOpacity
           testID="viewHeaderDrawerBtn"
-          onPress={canGoBack ? onPressBack : onPressMenu}
+          onPress={onPressBack}
           hitSlop={BACK_HITSLOP}
           style={canGoBack ? styles.backBtn : styles.backBtnWide}
           accessibilityRole="button"
-          accessibilityLabel={canGoBack ? 'Back' : 'Menu'}
+          accessibilityLabel={'Back'}
           accessibilityHint="">
-          {canGoBack ? (
+          <FontAwesomeIcon
-            <FontAwesomeIcon
+            size={18}
-              size={18}
+            icon="angle-left"
-              icon="angle-left"
+            style={[styles.backIcon, pal.text]}
-              style={[styles.backIcon, pal.text]}
+          />
-            />
-          ) : (
-            <FontAwesomeIcon
-              size={18}
-              icon="bars"
-              style={[styles.backIcon, pal.textLight]}
-            />
-          )}
         </TouchableOpacity>
       ) : null}
       {children}

src/view/com/util/ViewHeader.tsx

@@ -6,7 +6,6 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
-import {useAnalytics} from 'lib/analytics/analytics'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
@@ -39,8 +38,7 @@ export function ViewHeader({
   const pal = usePalette('default')
   const {_} = useLingui()
   const navigation = useNavigation<NavigationProp>()
-  const {track} = useAnalytics()
+  const {isDesktop} = useWebMediaQueries()
-  const {isDesktop, isTablet} = useWebMediaQueries()
   const t = useTheme()
 
   const onPressBack = React.useCallback(() => {
@@ -51,11 +49,6 @@ export function ViewHeader({
     }
   }, [navigation])
 
-  const onPressMenu = React.useCallback(() => {
-    track('ViewHeader:MenuButtonClicked')
-    // TODO
-  }, [track])
-
   if (isDesktop) {
     if (showOnDesktop) {
       return (
@@ -73,37 +66,37 @@ export function ViewHeader({
       canGoBack = navigation.canGoBack()
     }
 
+    const showBackButtonAndCan = showBackButton && canGoBack
     return (
       <Container hideOnScroll={hideOnScroll || false} showBorder={showBorder}>
         <View style={{flex: 1}}>
-          <View style={{flexDirection: 'row', alignItems: 'center'}}>
+          <View
-            {showBackButton ? (
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}>
+            {showBackButtonAndCan ? (
               <TouchableOpacity
                 testID="viewHeaderDrawerBtn"
-                onPress={canGoBack ? onPressBack : onPressMenu}
+                onPress={onPressBack}
                 hitSlop={BACK_HITSLOP}
-                style={canGoBack ? styles.backBtn : styles.backBtnWide}
+                style={styles.backBtn}
                 accessibilityRole="button"
                 accessibilityLabel={canGoBack ? _(msg`Back`) : _(msg`Menu`)}
-                accessibilityHint={
+                accessibilityHint="">
-                  canGoBack ? '' : _(msg`Access navigation links and settings`)
+                <FontAwesomeIcon
-                }>
+                  size={18}
-                {canGoBack ? (
+                  icon="angle-left"
-                  <FontAwesomeIcon
+                  style={[styles.backIcon, pal.text]}
-                    size={18}
+                />
-                    icon="angle-left"
-                    style={[styles.backIcon, pal.text]}
-                  />
-                ) : !isTablet ? (
-                  <FontAwesomeIcon
-                    size={18}
-                    icon="bars"
-                    style={[styles.backIcon, pal.textLight]}
-                  />
-                ) : null}
               </TouchableOpacity>
             ) : null}
-            <View style={styles.titleContainer} pointerEvents="none">
+            <View
+              style={[
+                styles.titleContainer,
+                !showBackButtonAndCan && {marginLeft: 0},
+              ]}
+              pointerEvents="none">
               <Text type="title" style={[pal.text, styles.title]}>
                 {title}
               </Text>
@@ -111,7 +104,7 @@ export function ViewHeader({
             {renderButton ? (
               renderButton()
             ) : showBackButton ? (
-              <View style={canGoBack ? styles.backBtn : styles.backBtnWide} />
+              <View style={styles.backBtn} />
             ) : null}
           </View>
           {subtitle ? (
@@ -263,11 +256,6 @@ const styles = StyleSheet.create({
     width: 30,
     height: 30,
   },
-  backBtnWide: {
-    width: 30,
-    height: 30,
-    paddingHorizontal: 6,
-  },
   backIcon: {
     marginTop: 6,
   },

src/view/screens/Search/Search.tsx

@@ -17,7 +17,6 @@ import {useLingui} from '@lingui/react'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import {useFocusEffect, useNavigation} from '@react-navigation/native'
 
-import {useAnalytics} from '#/lib/analytics/analytics'
 import {HITSLOP_10} from '#/lib/constants'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {MagnifyingGlassIcon} from '#/lib/icons'
@@ -531,11 +530,10 @@ export function SearchScreen(
   const textInput = React.useRef<TextInput>(null)
   const {_} = useLingui()
   const pal = usePalette('default')
-  const {track} = useAnalytics()
   const moderationOpts = useModerationOpts()
   const search = useActorAutocompleteFn()
   const setMinimalShellMode = useSetMinimalShellMode()
-  const {isTabletOrDesktop, isTabletOrMobile} = useWebMediaQueries()
+  const {isTabletOrDesktop} = useWebMediaQueries()
 
   const searchDebounceTimeout = React.useRef<NodeJS.Timeout | undefined>(
     undefined,
@@ -586,10 +584,6 @@ export function SearchScreen(
     loadSearchHistory()
   }, [])
 
-  const onPressMenu = React.useCallback(() => {
-    track('ViewHeader:MenuButtonClicked')
-  }, [track])
-
   const onPressCancelSearch = React.useCallback(() => {
     scrollToTopWeb()
     textInput.current?.blur()
@@ -711,23 +705,6 @@ export function SearchScreen(
           isTabletOrDesktop && {paddingTop: 10},
         ]}
         sideBorders={isTabletOrDesktop}>
-        {isTabletOrMobile && (
-          <Pressable
-            testID="viewHeaderBackOrMenuBtn"
-            onPress={onPressMenu}
-            hitSlop={HITSLOP_10}
-            style={styles.headerMenuBtn}
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`Menu`)}
-            accessibilityHint={_(msg`Access navigation links and settings`)}>
-            <FontAwesomeIcon
-              icon="bars"
-              size={18}
-              color={pal.colors.textLight}
-            />
-          </Pressable>
-        )}
-
         <View
           style={[
             {backgroundColor: pal.colors.backgroundLight},
@@ -909,15 +886,6 @@ const styles = StyleSheet.create({
     top: 0,
     zIndex: 1,
   },
-  headerMenuBtn: {
-    width: 30,
-    height: 30,
-    borderRadius: 30,
-    marginRight: 6,
-    paddingBottom: 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
   headerSearchContainer: {
     flex: 1,
     flexDirection: 'row',