Visual tune-up

src/view/com/util/PostMeta.tsx

@@ -136,7 +136,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     width: '100%',
-    paddingBottom: 2,
+    paddingBottom: 4,
   },
   metaTwoLineLeft: {
     flex: 1,

src/view/com/util/TabBar.tsx

@@ -78,9 +78,7 @@ export function TabBar({
         return (
           <TouchableWithoutFeedback key={i} onPress={() => onPressItem(i)}>
             <View style={styles.item} ref={itemRefs[i]}>
-              <Text
+              <Text type="xl-bold" style={selected ? pal.text : pal.textLight}>
-                type="xl-medium"
-                style={selected ? pal.text : pal.textLight}>
                 {item}
               </Text>
             </View>
@@ -97,14 +95,14 @@ const styles = StyleSheet.create({
     paddingHorizontal: 14,
   },
   item: {
-    paddingTop: 6,
+    paddingTop: 8,
-    paddingBottom: 14,
+    paddingBottom: 12,
     marginRight: 24,
   },
   underline: {
     position: 'absolute',
     height: 3,
-    bottom: 0,
+    bottom: -1,
     borderRadius: 4,
   },
 })

src/view/screens/Home.tsx

@@ -58,11 +58,11 @@ export const HomeScreen = withAuthRequired((_opts: Props) => {
   const renderTabBar = React.useCallback(
     (props: TabBarProps) => {
       return (
-        <View style={[pal.view, styles.tabBar]}>
+        <View style={[pal.view, pal.border, styles.tabBar]}>
           <TouchableOpacity style={styles.tabBarAvi} onPress={onPressAvi}>
             <UserAvatar avatar={store.me.avatar} size={32} />
           </TouchableOpacity>
-          <TabBar items={['Popular', 'Following']} {...props} />
+          <TabBar items={['Suggested', 'Following']} {...props} />
         </View>
       )
     },
@@ -273,8 +273,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: 18,
+    borderBottomWidth: 1,
   },
   tabBarAvi: {
     marginRight: 16,
+    paddingBottom: 2,
   },
 })