Update post thread aesthetics

3 files changed, 115 insertions, 98 deletions

diff --git a/src/view/com/feed/FeedItem.tsx b/src/view/com/feed/FeedItem.tsx
index c8acf1899..8c1e8dd21 100644
--- a/src/view/com/feed/FeedItem.tsx
+++ b/src/view/com/feed/FeedItem.tsx
@@ -133,8 +133,6 @@ export const FeedItem = observer(function FeedItem({
 
 const styles = StyleSheet.create({
   outer: {
-    // borderWidth: 1,
-    // borderColor: '#e8e8e8',
     borderRadius: 10,
     margin: 2,
     marginBottom: 0,
diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx
index f7044b741..c12d99edb 100644
--- a/src/view/com/post-thread/PostThread.tsx
+++ b/src/view/com/post-thread/PostThread.tsx
@@ -75,7 +75,7 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
     <PostThreadItem item={item} onPressShare={onPressShare} />
   )
   return (
-    <View style={s.h100pct}>
+    <View>
       <FlatList
         data={posts}
         keyExtractor={item => item._reactKey}
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index ed411131f..376ec6805 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -9,14 +9,6 @@ import {ago, pluralize} from '../../lib/strings'
 import {AVIS} from '../../lib/assets'
 import {useStores} from '../../../state'
 
-function iter<T>(n: number, fn: (_i: number) => T): Array<T> {
-  const arr: T[] = []
-  for (let i = 0; i < n; i++) {
-    arr.push(fn(i))
-  }
-  return arr
-}
-
 export const PostThreadItem = observer(function PostThreadItem({
   item,
   onPressShare,
@@ -61,41 +53,83 @@ export const PostThreadItem = observer(function PostThreadItem({
       .catch(e => console.error('Failed to toggle like', record, e))
   }
 
-  return (
-    <TouchableOpacity style={styles.outer} onPress={onPressOuter}>
-      <View style={styles.layout}>
-        {iter(Math.abs(item._depth), (i: number) => (
-          <View key={i} style={styles.replyBar} />
-        ))}
-        <TouchableOpacity style={styles.layoutAvi} onPress={onPressAuthor}>
-          <Image
-            style={styles.avi}
-            source={AVIS[item.author.name] || AVIS['alice.com']}
-          />
-        </TouchableOpacity>
-        <View style={styles.layoutContent}>
-          <View style={styles.meta}>
-            <Text
-              style={[styles.metaItem, s.f15, s.bold]}
-              onPress={onPressAuthor}>
-              {item.author.displayName}
-            </Text>
-            <Text
-              style={[styles.metaItem, s.f14, s.gray5]}
-              onPress={onPressAuthor}>
-              @{item.author.name}
-            </Text>
-            <Text style={[styles.metaItem, s.f14, s.gray5]}>
-              &middot; {ago(item.indexedAt)}
-            </Text>
+  const Ctrls = () => (
+    <View style={styles.ctrls}>
+      <TouchableOpacity style={styles.ctrl} onPress={onPressReply}>
+        <FontAwesomeIcon
+          style={styles.ctrlIcon}
+          icon={['far', 'comment']}
+          size={14}
+        />
+        <Text style={s.f13}>{item.replyCount}</Text>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}>
+        <FontAwesomeIcon
+          style={
+            item.myState.hasReposted ? styles.ctrlIconReposted : styles.ctrlIcon
+          }
+          icon="retweet"
+          size={18}
+        />
+        <Text
+          style={item.myState.hasReposted ? [s.bold, s.green3, s.f13] : s.f13}>
+          {item.repostCount}
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.ctrl} onPress={onPressToggleLike}>
+        <FontAwesomeIcon
+          style={item.myState.hasLiked ? styles.ctrlIconLiked : styles.ctrlIcon}
+          icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
+          size={14}
+        />
+        <Text style={item.myState.hasLiked ? [s.bold, s.red3, s.f13] : s.f13}>
+          {item.likeCount}
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={styles.ctrl}
+        onPress={() => onPressShare(item.uri)}>
+        <FontAwesomeIcon
+          style={styles.ctrlIcon}
+          icon="share-from-square"
+          size={14}
+        />
+      </TouchableOpacity>
+    </View>
+  )
+
+  if (item._isHighlightedPost) {
+    return (
+      <View style={styles.outer}>
+        <View style={styles.layout}>
+          <TouchableOpacity style={styles.layoutAvi} onPress={onPressAuthor}>
+            <Image
+              style={styles.avi}
+              source={AVIS[item.author.name] || AVIS['alice.com']}
+            />
+          </TouchableOpacity>
+          <View style={styles.layoutContent}>
+            <View style={[styles.meta, s.mt5]}>
+              <Text
+                style={[styles.metaItem, s.f15, s.bold]}
+                onPress={onPressAuthor}>
+                {item.author.displayName}
+              </Text>
+              <Text style={[styles.metaItem, s.f14, s.gray5]}>
+                &middot; {ago(item.indexedAt)}
+              </Text>
+            </View>
+            <View style={styles.meta}>
+              <Text
+                style={[styles.metaItem, s.f14, s.gray5]}
+                onPress={onPressAuthor}>
+                @{item.author.name}
+              </Text>
+            </View>
           </View>
-          <Text
-            style={[
-              styles.postText,
-              ...(item._isHighlightedPost
-                ? [s.f16, s['lh16-1.3']]
-                : [s.f15, s['lh15-1.3']]),
-            ]}>
+        </View>
+        <View style={[s.pl10, s.pr10, s.pb10]}>
+          <Text style={[styles.postText, s.f18, s['lh18-1.3']]}>
             {record.text}
           </Text>
           {item._isHighlightedPost && hasEngagement ? (
@@ -124,74 +158,59 @@ export const PostThreadItem = observer(function PostThreadItem({
           ) : (
             <></>
           )}
-          <View style={styles.ctrls}>
-            <TouchableOpacity style={styles.ctrl} onPress={onPressReply}>
-              <FontAwesomeIcon
-                style={styles.ctrlIcon}
-                icon={['far', 'comment']}
-                size={14}
-              />
-              <Text style={s.f13}>{item.replyCount}</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}>
-              <FontAwesomeIcon
-                style={
-                  item.myState.hasReposted
-                    ? styles.ctrlIconReposted
-                    : styles.ctrlIcon
-                }
-                icon="retweet"
-                size={18}
-              />
+          <View style={[s.pl10]}>
+            <Ctrls />
+          </View>
+        </View>
+      </View>
+    )
+  } else {
+    return (
+      <TouchableOpacity style={styles.outer} onPress={onPressOuter}>
+        <View style={styles.layout}>
+          <TouchableOpacity style={styles.layoutAvi} onPress={onPressAuthor}>
+            <Image
+              style={styles.avi}
+              source={AVIS[item.author.name] || AVIS['alice.com']}
+            />
+          </TouchableOpacity>
+          <View style={styles.layoutContent}>
+            <View style={styles.meta}>
               <Text
-                style={
-                  item.myState.hasReposted ? [s.bold, s.green3, s.f13] : s.f13
-                }>
-                {item.repostCount}
+                style={[styles.metaItem, s.f15, s.bold]}
+                onPress={onPressAuthor}>
+                {item.author.displayName}
               </Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.ctrl} onPress={onPressToggleLike}>
-              <FontAwesomeIcon
-                style={
-                  item.myState.hasLiked ? styles.ctrlIconLiked : styles.ctrlIcon
-                }
-                icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
-                size={14}
-              />
               <Text
-                style={item.myState.hasLiked ? [s.bold, s.red3, s.f13] : s.f13}>
-                {item.likeCount}
+                style={[styles.metaItem, s.f14, s.gray5]}
+                onPress={onPressAuthor}>
+                @{item.author.name}
+              </Text>
+              <Text style={[styles.metaItem, s.f14, s.gray5]}>
+                &middot; {ago(item.indexedAt)}
               </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={styles.ctrl}
-              onPress={() => onPressShare(item.uri)}>
-              <FontAwesomeIcon
-                style={styles.ctrlIcon}
-                icon="share-from-square"
-                size={14}
-              />
-            </TouchableOpacity>
+            </View>
+            <Text style={[styles.postText, s.f15, s['lh15-1.3']]}>
+              {record.text}
+            </Text>
+            <Ctrls />
           </View>
         </View>
-      </View>
-    </TouchableOpacity>
-  )
+      </TouchableOpacity>
+    )
+  }
 })
 
 const styles = StyleSheet.create({
   outer: {
-    marginTop: 1,
     backgroundColor: colors.white,
+    borderRadius: 10,
+    margin: 2,
+    marginBottom: 0,
   },
   layout: {
     flexDirection: 'row',
   },
-  replyBar: {
-    width: 5,
-    backgroundColor: colors.gray2,
-    marginRight: 2,
-  },
   layoutAvi: {
     width: 70,
     paddingLeft: 10,