4 files changed, 42 insertions, 10 deletions
diff --git a/src/view/com/profile/FollowButton.tsx b/src/view/com/profile/FollowButton.tsx
index 7a194cee9..5204f5a40 100644
--- a/src/view/com/profile/FollowButton.tsx
+++ b/src/view/com/profile/FollowButton.tsx
@@ -1,16 +1,18 @@
 import React from 'react'
 import {observer} from 'mobx-react-lite'
-import {Button} from '../util/forms/Button'
+import {Button, ButtonType} from '../util/forms/Button'
 import {useStores} from 'state/index'
 import * as apilib from 'lib/api/index'
 import * as Toast from '../util/Toast'
 
 const FollowButton = observer(
   ({
+    type = 'inverted',
     did,
     declarationCid,
     onToggleFollow,
   }: {
+    type?: ButtonType
     did: string
     declarationCid: string
     onToggleFollow?: (v: boolean) => void
@@ -42,7 +44,7 @@ const FollowButton = observer(
 
     return (
       <Button
-        type={isFollowing ? 'default' : 'inverted'}
+        type={isFollowing ? 'default' : type}
         onPress={onToggleFollowInner}
         label={isFollowing ? 'Unfollow' : 'Follow'}
       />
diff --git a/src/view/com/util/Pager.tsx b/src/view/com/util/Pager.tsx
index 9ce5006cd..89ba59e85 100644
--- a/src/view/com/util/Pager.tsx
+++ b/src/view/com/util/Pager.tsx
@@ -15,11 +15,13 @@ export interface TabBarProps {
 }
 
 interface Props {
+  tabBarPosition?: 'top' | 'bottom'
   renderTabBar: (props: TabBarProps) => JSX.Element
   onPageSelected?: (e: PageSelectedEvent) => void
 }
 export const Pager = ({
   children,
+  tabBarPosition = 'top',
   renderTabBar,
   onPageSelected,
 }: React.PropsWithChildren<Props>) => {
@@ -45,7 +47,13 @@ export const Pager = ({
 
   return (
     <View>
-      {renderTabBar({selectedPage, position, offset, onSelect: onTabBarSelect})}
+      {tabBarPosition === 'top' &&
+        renderTabBar({
+          selectedPage,
+          position,
+          offset,
+          onSelect: onTabBarSelect,
+        })}
       <AnimatedPagerView
         ref={pagerView}
         style={s.h100pct}
@@ -64,6 +72,13 @@ export const Pager = ({
         )}>
         {children}
       </AnimatedPagerView>
+      {tabBarPosition === 'bottom' &&
+        renderTabBar({
+          selectedPage,
+          position,
+          offset,
+          onSelect: onTabBarSelect,
+        })}
     </View>
   )
 }
diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index 1a36a72e8..c53de5c1f 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@@ -77,6 +77,7 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
 
         <View>
           <FollowButton
+            type="default"
             did={opts.did}
             declarationCid={opts.declarationCid}
             onToggleFollow={onToggleFollow}
diff --git a/src/view/com/util/TabBar.tsx b/src/view/com/util/TabBar.tsx
index 666ad5811..ac1814685 100644
--- a/src/view/com/util/TabBar.tsx
+++ b/src/view/com/util/TabBar.tsx
@@ -18,12 +18,16 @@ export function TabBar({
   items,
   position,
   offset,
+  indicatorPosition = 'bottom',
+  indicatorColor,
   onSelect,
 }: {
   selectedPage: number
   items: string[]
   position: Animated.Value
   offset: Animated.Value
+  indicatorPosition?: 'top' | 'bottom'
+  indicatorColor?: string
   onSelect?: (index: number) => void
 }) {
   const pal = usePalette('default')
@@ -36,8 +40,10 @@ export function TabBar({
   )
   const panX = Animated.add(position, offset)
 
-  const underlineStyle = {
-    backgroundColor: pal.colors.link,
+  const indicatorStyle = {
+    backgroundColor: indicatorColor || pal.colors.link,
+    bottom: indicatorPosition === 'bottom' ? -1 : undefined,
+    top: indicatorPosition === 'top' ? -1 : undefined,
     left: panX.interpolate({
       inputRange: items.map((_item, i) => i),
       outputRange: itemLayouts.map(l => l.x),
@@ -72,12 +78,16 @@ export function TabBar({
 
   return (
     <View style={[pal.view, styles.outer]} onLayout={onLayout}>
-      <Animated.View style={[styles.underline, underlineStyle]} />
+      <Animated.View style={[styles.indicator, indicatorStyle]} />
       {items.map((item, i) => {
         const selected = i === selectedPage
         return (
           <TouchableWithoutFeedback key={i} onPress={() => onPressItem(i)}>
-            <View style={styles.item} ref={itemRefs[i]}>
+            <View
+              style={
+                indicatorPosition === 'top' ? styles.itemTop : styles.itemBottom
+              }
+              ref={itemRefs[i]}>
               <Text type="xl-bold" style={selected ? pal.text : pal.textLight}>
                 {item}
               </Text>
@@ -94,15 +104,19 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     paddingHorizontal: 14,
   },
-  item: {
+  itemTop: {
+    paddingTop: 10,
+    paddingBottom: 10,
+    marginRight: 24,
+  },
+  itemBottom: {
     paddingTop: 8,
     paddingBottom: 12,
     marginRight: 24,
   },
-  underline: {
+  indicator: {
     position: 'absolute',
     height: 3,
-    bottom: -1,
     borderRadius: 4,
   },
 })