4 files changed, 28 insertions, 34 deletions
diff --git a/src/view/com/profile/FollowButton.tsx b/src/view/com/profile/FollowButton.tsx
index f24c3d0c9..7a194cee9 100644
--- a/src/view/com/profile/FollowButton.tsx
+++ b/src/view/com/profile/FollowButton.tsx
@@ -42,7 +42,7 @@ const FollowButton = observer(
 
     return (
       <Button
-        type={isFollowing ? 'default' : 'primary'}
+        type={isFollowing ? 'default' : 'inverted'}
         onPress={onToggleFollowInner}
         label={isFollowing ? 'Unfollow' : 'Follow'}
       />
diff --git a/src/view/com/util/Pager.tsx b/src/view/com/util/Pager.tsx
index 1a3ff642c..9ce5006cd 100644
--- a/src/view/com/util/Pager.tsx
+++ b/src/view/com/util/Pager.tsx
@@ -2,16 +2,25 @@ import React from 'react'
 import {Animated, StyleSheet, View} from 'react-native'
 import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
-import {TabBar} from './TabBar'
+import {s} from 'lib/styles'
 
 export type PageSelectedEvent = PagerViewOnPageSelectedEvent
 const AnimatedPagerView = Animated.createAnimatedComponent(PagerView)
 
+export interface TabBarProps {
+  selectedPage: number
+  position: Animated.Value
+  offset: Animated.Value
+  onSelect?: (index: number) => void
+}
+
 interface Props {
+  renderTabBar: (props: TabBarProps) => JSX.Element
   onPageSelected?: (e: PageSelectedEvent) => void
 }
 export const Pager = ({
   children,
+  renderTabBar,
   onPageSelected,
 }: React.PropsWithChildren<Props>) => {
   const [selectedPage, setSelectedPage] = React.useState(0)
@@ -36,16 +45,10 @@ export const Pager = ({
 
   return (
     <View>
-      <TabBar
-        position={position}
-        offset={offset}
-        items={['One', 'Two', 'Three']}
-        selectedPage={selectedPage}
-        onSelect={onTabBarSelect}
-      />
+      {renderTabBar({selectedPage, position, offset, onSelect: onTabBarSelect})}
       <AnimatedPagerView
         ref={pagerView}
-        style={{height: '100%'}}
+        style={s.h100pct}
         initialPage={0}
         onPageSelected={onPageSelectedInner}
         onPageScroll={Animated.event(
@@ -64,9 +67,3 @@ export const Pager = ({
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  tabBar: {
-    flexDirection: 'row',
-  },
-})
diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index 0bb402100..3f9e6935f 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@@ -44,7 +44,7 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
     // two-liner with follow button
     return (
       <View style={styles.metaTwoLine}>
-        <View>
+        <View style={styles.metaTwoLineLeft}>
           <View style={styles.metaTwoLineTop}>
             <DesktopWebTextLink
               type="lg-bold"
@@ -69,6 +69,7 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
             type="md"
             style={[styles.metaItem, pal.textLight]}
             lineHeight={1.2}
+            numberOfLines={1}
             text={`@${handle}`}
             href={`/profile/${opts.authorHandle}`}
           />
@@ -134,8 +135,13 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
+    width: '100%',
     paddingBottom: 2,
   },
+  metaTwoLineLeft: {
+    flex: 1,
+    paddingRight: 40,
+  },
   metaTwoLineTop: {
     flexDirection: 'row',
     alignItems: 'baseline',
diff --git a/src/view/com/util/TabBar.tsx b/src/view/com/util/TabBar.tsx
index 3a823e42c..d9f48577c 100644
--- a/src/view/com/util/TabBar.tsx
+++ b/src/view/com/util/TabBar.tsx
@@ -37,7 +37,7 @@ export function TabBar({
   const panX = Animated.add(position, offset)
 
   const underlineStyle = {
-    backgroundColor: pal.colors.text,
+    backgroundColor: pal.colors.link,
     left: panX.interpolate({
       inputRange: items.map((_item, i) => i),
       outputRange: itemLayouts.map(l => l.x),
@@ -79,11 +79,8 @@ export function TabBar({
           <TouchableWithoutFeedback key={i} onPress={() => onPressItem(i)}>
             <View style={styles.item} ref={itemRefs[i]}>
               <Text
-                style={
-                  selected
-                    ? [styles.labelSelected, pal.text]
-                    : [styles.label, pal.textLight]
-                }>
+                type="xl-medium"
+                style={selected ? pal.text : pal.textLight}>
                 {item}
               </Text>
             </View>
@@ -100,20 +97,14 @@ const styles = StyleSheet.create({
     paddingHorizontal: 14,
   },
   item: {
-    paddingTop: 8,
-    paddingBottom: 12,
-    marginRight: 14,
-    paddingHorizontal: 10,
-  },
-  label: {
-    fontWeight: '600',
-  },
-  labelSelected: {
-    fontWeight: '600',
+    paddingTop: 6,
+    paddingBottom: 14,
+    marginRight: 24,
   },
   underline: {
     position: 'absolute',
-    height: 4,
+    height: 3,
     bottom: 0,
+    borderRadius: 4,
   },
 })