Sizing and spacing fixes based on on-device testing

2 files changed, 31 insertions, 41 deletions

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