Sizing and spacing fixes based on on-device testing

8 files changed, 77 insertions, 75 deletions

diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx
index 8ac661a25..45bad95fc 100644
--- a/src/view/com/notifications/FeedItem.tsx
+++ b/src/view/com/notifications/FeedItem.tsx
@@ -133,20 +133,20 @@ export const FeedItem = observer(function FeedItem({
               style={styles.metaItem}
               href={authors[0].href}
               title={`@${authors[0].handle}`}>
-              <Text style={[s.f14, s.bold]}>
+              <Text style={[s.f15, s.bold]}>
                 {authors[0].displayName || authors[0].handle}
               </Text>
             </Link>
             {authors.length > 1 ? (
               <>
-                <Text style={[styles.metaItem, s.f14]}>and</Text>
-                <Text style={[styles.metaItem, s.f14, s.bold]}>
+                <Text style={[styles.metaItem, s.f15]}>and</Text>
+                <Text style={[styles.metaItem, s.f15, s.bold]}>
                   {authors.length - 1} {pluralize(authors.length - 1, 'other')}
                 </Text>
               </>
             ) : undefined}
-            <Text style={[styles.metaItem, s.f14]}>{action}</Text>
-            <Text style={[styles.metaItem, s.f14, s.gray5]}>
+            <Text style={[styles.metaItem, s.f15]}>{action}</Text>
+            <Text style={[styles.metaItem, s.f15, s.gray5]}>
               {ago(item.indexedAt)}
             </Text>
           </View>
diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx
index 8a0ddab5d..5d0a5ba4b 100644
--- a/src/view/com/post-thread/PostThread.tsx
+++ b/src/view/com/post-thread/PostThread.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useRef} from 'react'
+import React, {useState, useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
 import {ActivityIndicator, FlatList, Text, View} from 'react-native'
 import {
@@ -9,12 +9,9 @@ import {useStores} from '../../../state'
 import {SharePostModel} from '../../../state/models/shell'
 import {PostThreadItem} from './PostThreadItem'
 
-const UPDATE_DELAY = 2e3 // wait 2s before refetching the thread for updates
-
 export const PostThread = observer(function PostThread({uri}: {uri: string}) {
   const store = useStores()
   const [view, setView] = useState<PostThreadViewModel | undefined>()
-  const [lastUpdate, setLastUpdate] = useState<number>(Date.now())
 
   useEffect(() => {
     if (view?.params.uri === uri) {
@@ -27,14 +24,6 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
     newView.setup().catch(err => console.error('Failed to fetch thread', err))
   }, [uri, view?.params.uri, store])
 
-  // TODO
-  // useFocusEffect(() => {
-  //   if (Date.now() - lastUpdate > UPDATE_DELAY) {
-  //     view?.update()
-  //     setLastUpdate(Date.now())
-  //   }
-  // })
-
   const onPressShare = (uri: string) => {
     store.shell.openModal(new SharePostModel(uri))
   }
@@ -83,6 +72,7 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
       renderItem={renderItem}
       refreshing={view.isRefreshing}
       onRefresh={onRefresh}
+      style={{flex: 1}}
     />
   )
 })
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 7add92361..17f37cb2e 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -77,14 +77,14 @@ export const PostThreadItem = observer(function PostThreadItem({
             />
           </Link>
           <View style={styles.layoutContent}>
-            <View style={[styles.meta, s.mt5]}>
+            <View style={[styles.meta, {paddingTop: 5, paddingBottom: 0}]}>
               <Link
                 style={styles.metaItem}
                 href={authorHref}
                 title={authorTitle}>
-                <Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
+                <Text style={[s.f16, s.bold]}>{item.author.displayName}</Text>
               </Link>
-              <Text style={[styles.metaItem, s.f14, s.gray5]}>
+              <Text style={[styles.metaItem, s.f15, s.gray5]}>
                 &middot; {ago(item.indexedAt)}
               </Text>
               <View style={s.flex1} />
@@ -104,7 +104,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                 style={styles.metaItem}
                 href={authorHref}
                 title={authorTitle}>
-                <Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
+                <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
               </Link>
             </View>
           </View>
@@ -125,8 +125,10 @@ export const PostThreadItem = observer(function PostThreadItem({
                   style={styles.expandedInfoItem}
                   href={repostsHref}
                   title={repostsTitle}>
-                  <Text style={[s.gray5, s.semiBold]}>
-                    <Text style={[s.bold, s.black]}>{item.repostCount}</Text>{' '}
+                  <Text style={[s.gray5, s.semiBold, s.f16]}>
+                    <Text style={[s.bold, s.black, s.f16]}>
+                      {item.repostCount}
+                    </Text>{' '}
                     {pluralize(item.repostCount, 'repost')}
                   </Text>
                 </Link>
@@ -138,8 +140,10 @@ export const PostThreadItem = observer(function PostThreadItem({
                   style={styles.expandedInfoItem}
                   href={likesHref}
                   title={likesTitle}>
-                  <Text style={[s.gray5, s.semiBold]}>
-                    <Text style={[s.bold, s.black]}>{item.likeCount}</Text>{' '}
+                  <Text style={[s.gray5, s.semiBold, s.f16]}>
+                    <Text style={[s.bold, s.black, s.f16]}>
+                      {item.likeCount}
+                    </Text>{' '}
                     {pluralize(item.likeCount, 'like')}
                   </Text>
                 </Link>
@@ -205,37 +209,20 @@ export const PostThreadItem = observer(function PostThreadItem({
             />
           </Link>
           <View style={styles.layoutContent}>
-            {item.replyingToAuthor &&
-              item.replyingToAuthor !== item.author.handle && (
-                <View style={[s.flexRow, {alignItems: 'center'}]}>
-                  <FontAwesomeIcon
-                    icon="reply"
-                    size={9}
-                    style={[s.gray4, s.mr5]}
-                  />
-                  <Link
-                    href={`/profile/${item.replyingToAuthor}`}
-                    title={`@${item.replyingToAuthor}`}>
-                    <Text style={[s.f12, s.gray5]}>
-                      @{item.replyingToAuthor}
-                    </Text>
-                  </Link>
-                </View>
-              )}
             <View style={styles.meta}>
               <Link
                 style={styles.metaItem}
                 href={authorHref}
                 title={authorTitle}>
-                <Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
+                <Text style={[s.f17, s.bold]}>{item.author.displayName}</Text>
               </Link>
               <Link
                 style={styles.metaItem}
                 href={authorHref}
                 title={authorTitle}>
-                <Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
+                <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
               </Link>
-              <Text style={[styles.metaItem, s.f14, s.gray5]}>
+              <Text style={[styles.metaItem, s.f15, s.gray5]}>
                 &middot; {ago(item.indexedAt)}
               </Text>
               <View style={s.flex1} />
@@ -250,11 +237,24 @@ export const PostThreadItem = observer(function PostThreadItem({
                 />
               </PostDropdownBtn>
             </View>
+            {item.replyingToAuthor &&
+              item.replyingToAuthor !== item.author.handle && (
+                <View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
+                  <Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text>
+                  <Link
+                    href={`/profile/${item.replyingToAuthor}`}
+                    title={`@${item.replyingToAuthor}`}>
+                    <Text style={[s.f14, s.blue3]}>
+                      @{item.replyingToAuthor}
+                    </Text>
+                  </Link>
+                </View>
+              )}
             <View style={styles.postTextContainer}>
               <RichText
                 text={record.text}
                 entities={record.entities}
-                style={[styles.postText, s.f15, s['lh15-1.3']]}
+                style={[styles.postText, s.f17, s['lh17-1.3']]}
               />
             </View>
             <PostCtrls
diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index 91088e21b..37d25a7b1 100644
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@@ -97,12 +97,12 @@ export const Post = observer(function Post({uri}: {uri: string}) {
         <View style={styles.layoutContent}>
           <View style={styles.meta}>
             <Link style={styles.metaItem} href={authorHref} title={authorTitle}>
-              <Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
+              <Text style={[s.f16, s.bold]}>{item.author.displayName}</Text>
             </Link>
             <Link style={styles.metaItem} href={authorHref} title={authorTitle}>
-              <Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
+              <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
             </Link>
-            <Text style={[styles.metaItem, s.f14, s.gray5]}>
+            <Text style={[styles.metaItem, s.f15, s.gray5]}>
               &middot; {ago(item.indexedAt)}
             </Text>
           </View>
@@ -123,7 +123,7 @@ export const Post = observer(function Post({uri}: {uri: string}) {
             <RichText
               text={record.text}
               entities={record.entities}
-              style={[s.f15, s['lh15-1.3']]}
+              style={[s.f16, s['lh16-1.3']]}
             />
           </View>
           <PostCtrls
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 257690d05..feaa78550 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -84,15 +84,15 @@ export const FeedItem = observer(function FeedItem({
               style={styles.metaItem}
               href={authorHref}
               title={item.author.handle}>
-              <Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
+              <Text style={[s.f17, s.bold]}>{item.author.displayName}</Text>
             </Link>
             <Link
               style={styles.metaItem}
               href={authorHref}
               title={item.author.handle}>
-              <Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
+              <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
             </Link>
-            <Text style={[styles.metaItem, s.f14, s.gray5]}>
+            <Text style={[styles.metaItem, s.f15, s.gray5]}>
               &middot; {ago(item.indexedAt)}
             </Text>
             <View style={s.flex1} />
@@ -108,13 +108,12 @@ export const FeedItem = observer(function FeedItem({
             </PostDropdownBtn>
           </View>
           {replyHref !== '' && (
-            <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
-              <FontAwesomeIcon icon="reply" size={9} style={[s.gray4, s.mr5]} />
-              <Text style={[s.gray4, s.f12, s.mr2]}>Reply to</Text>
+            <View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
+              <Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text>
               <Link href={replyHref} title="Parent post">
                 <UserInfoText
                   did={replyAuthorDid}
-                  style={[s.f12, s.gray5]}
+                  style={[s.f15, s.blue3]}
                   prefix="@"
                 />
               </Link>
@@ -124,7 +123,7 @@ export const FeedItem = observer(function FeedItem({
             <RichText
               text={record.text}
               entities={record.entities}
-              style={[s.f15, s['lh15-1.3']]}
+              style={[s.f17, s['lh17-1.3']]}
             />
           </View>
           <PostCtrls
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index dfd8d3c29..05ad5889f 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -154,8 +154,10 @@ export const ProfileHeader = observer(function ProfileHeader({
           <TouchableOpacity
             style={[s.flexRow, s.mr10]}
             onPress={onPressFollowers}>
-            <Text style={[s.bold, s.mr2]}>{view.followersCount}</Text>
-            <Text style={s.gray5}>
+            <Text style={[s.bold, s.mr2, styles.metricsText]}>
+              {view.followersCount}
+            </Text>
+            <Text style={[s.gray5, styles.metricsText]}>
               {pluralize(view.followersCount, 'follower')}
             </Text>
           </TouchableOpacity>
@@ -163,27 +165,35 @@ export const ProfileHeader = observer(function ProfileHeader({
             <TouchableOpacity
               style={[s.flexRow, s.mr10]}
               onPress={onPressFollows}>
-              <Text style={[s.bold, s.mr2]}>{view.followsCount}</Text>
-              <Text style={s.gray5}>following</Text>
+              <Text style={[s.bold, s.mr2, styles.metricsText]}>
+                {view.followsCount}
+              </Text>
+              <Text style={[s.gray5, styles.metricsText]}>following</Text>
             </TouchableOpacity>
           ) : undefined}
           {view.isScene ? (
             <TouchableOpacity
               style={[s.flexRow, s.mr10]}
               onPress={onPressFollows}>
-              <Text style={[s.bold, s.mr2]}>{view.followsCount}</Text>
-              <Text style={s.gray5}>
+              <Text style={[s.bold, s.mr2, styles.metricsText]}>
+                {view.followsCount}
+              </Text>
+              <Text style={[s.gray5, styles.metricsText]}>
                 {pluralize(view.followsCount, 'member')}
               </Text>
             </TouchableOpacity>
           ) : undefined}
           <View style={[s.flexRow, s.mr10]}>
-            <Text style={[s.bold, s.mr2]}>{view.postsCount}</Text>
-            <Text style={s.gray5}>{pluralize(view.postsCount, 'post')}</Text>
+            <Text style={[s.bold, s.mr2, styles.metricsText]}>
+              {view.postsCount}
+            </Text>
+            <Text style={[s.gray5, styles.metricsText]}>
+              {pluralize(view.postsCount, 'post')}
+            </Text>
           </View>
         </View>
         {view.description && (
-          <Text style={[s.mb5, s.f15, s['lh15-1.3']]}>{view.description}</Text>
+          <Text style={[s.mb5, s.f16, s['lh16-1.3']]}>{view.description}</Text>
         )}
         {
           undefined /*<View style={styles.badgesLine}>
@@ -268,7 +278,7 @@ const styles = StyleSheet.create({
     // marginBottom: 14,
   },
   displayName: {
-    fontSize: 24,
+    fontSize: 28,
     fontWeight: 'bold',
   },
 
@@ -277,7 +287,7 @@ const styles = StyleSheet.create({
     marginBottom: 8,
   },
   handle: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: 'bold',
     color: colors.gray5,
   },
@@ -288,7 +298,7 @@ const styles = StyleSheet.create({
     marginRight: 5,
   },
   typeLabel: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: 'bold',
     color: colors.gray5,
   },
@@ -297,6 +307,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     marginBottom: 8,
   },
+  metricsText: {
+    fontSize: 15,
+  },
 
   badgesLine: {
     flexDirection: 'row',
diff --git a/src/view/com/util/DropdownBtn.tsx b/src/view/com/util/DropdownBtn.tsx
index 825a5395c..2e9ca0c15 100644
--- a/src/view/com/util/DropdownBtn.tsx
+++ b/src/view/com/util/DropdownBtn.tsx
@@ -157,9 +157,9 @@ const styles = StyleSheet.create({
   menuItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 6,
-    paddingLeft: 10,
-    paddingRight: 30,
+    paddingVertical: 10,
+    paddingLeft: 15,
+    paddingRight: 40,
   },
   menuItemBorder: {
     borderTopWidth: 1,
@@ -172,6 +172,6 @@ const styles = StyleSheet.create({
     marginRight: 8,
   },
   label: {
-    fontSize: 15,
+    fontSize: 18,
   },
 })
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index 6c8868972..16e18c84d 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -5,7 +5,7 @@ import {getGradient} from '../../lib/asset-gen'
 export function UserBanner({handle}: {handle: string}) {
   const gradient = getGradient(handle)
   return (
-    <Svg width="400" height="120" viewBox="50 0 200 100">
+    <Svg width="100%" height="120" viewBox="50 0 200 100">
       <Defs>
         <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
           <Stop offset="0" stopColor={gradient[0]} stopOpacity="1" />