Tune the UI layout of the feed tab header

3 files changed, 22 insertions, 21 deletions

diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx
index b99efcfed..426f7628b 100644
--- a/src/view/com/pager/FeedsTabBarMobile.tsx
+++ b/src/view/com/pager/FeedsTabBarMobile.tsx
@@ -7,8 +7,9 @@ import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {Link} from '../util/Link'
+import {Text} from '../util/text/Text'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {colors} from 'lib/styles'
+import {s} from 'lib/styles'
 
 export const FeedsTabBar = observer(
   (
@@ -45,20 +46,23 @@ export const FeedsTabBar = observer(
           <View style={[pal.view]}>
             <TouchableOpacity
               testID="viewHeaderDrawerBtn"
-              style={styles.tabBarAvi}
               onPress={onPressAvi}
               accessibilityRole="button"
               accessibilityLabel="Open navigation"
-              accessibilityHint="Access profile and other navigation links">
-              <FontAwesomeIcon icon="bars" size={24} color={colors.blue3} />
+              accessibilityHint="Access profile and other navigation links"
+              hitSlop={10}>
+              <FontAwesomeIcon icon="bars" size={18} color={pal.colors.icon} />
             </TouchableOpacity>
           </View>
+          <Text type="title" style={[pal.link, s.bold]}>
+            Bluesky
+          </Text>
           <View style={[pal.view]}>
-            <Link href="/settings/saved-feeds">
+            <Link href="/settings/saved-feeds" hitSlop={10}>
               <FontAwesomeIcon
                 icon="satellite-dish"
-                size={24}
-                color={pal.colors.link}
+                size={19}
+                color={pal.colors.icon}
               />
             </Link>
           </View>
@@ -75,13 +79,6 @@ export const FeedsTabBar = observer(
 )
 
 const styles = StyleSheet.create({
-  topBar: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 18,
-    width: '100%',
-  },
   tabBar: {
     position: 'absolute',
     zIndex: 1,
@@ -92,8 +89,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderBottomWidth: 1,
   },
-  tabBarAvi: {
-    marginTop: 1,
-    marginRight: 18,
+  topBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 18,
+    paddingBottom: 2,
+    width: '100%',
   },
 })
diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index caca9f926..f89dbe88a 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -92,7 +92,7 @@ export function TabBar({
               hoverStyle={pal.viewLight}
               onPress={() => onPressItem(i)}>
               <Text
-                type="xl-bold"
+                type="lg-bold"
                 testID={testID ? `${testID}-${item}` : undefined}
                 style={selected ? pal.text : pal.textLight}>
                 {item}
@@ -127,12 +127,12 @@ const styles = isDesktopWeb
         flexDirection: 'row',
       },
       contentContainer: {
-        gap: 14,
+        gap: 18,
         paddingHorizontal: 18,
       },
       item: {
         paddingTop: 8,
-        paddingBottom: 12,
+        paddingBottom: 8,
         borderBottomWidth: 3,
         borderBottomColor: 'transparent',
       },
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 2aade5e1a..3d4430415 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -23,7 +23,7 @@ import {useAnalytics} from 'lib/analytics'
 import {ComposeIcon2} from 'lib/icons'
 import {isDesktopWeb} from 'platform/detection'
 
-const HEADER_OFFSET = isDesktopWeb ? 50 : 74
+const HEADER_OFFSET = isDesktopWeb ? 50 : 64
 const POLL_FREQ = 30e3 // 30sec
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>