Big batch of UI updates (#276)

* Replace react-native-root-toast with a custom toast that fits the visual style

* Tune dark mode colors

* Tune colors a bit more

* Move the reply prompt to a fixed position in the footer

* Fully hide muted posts but give a control to show anyway (close #270)

* Improve thread rendering (better clarity on reply lines)

* Add follower/following counts to side menu

* Fix issues with display name overflows

1 files changed, 6 insertions, 25 deletions

diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 8eda0962a..1413148a9 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -21,8 +21,8 @@ import {useStores} from 'state/index'
 import {PostMeta} from '../util/PostMeta'
 import {PostEmbeds} from '../util/PostEmbeds'
 import {PostCtrls} from '../util/PostCtrls'
+import {PostMutedWrapper} from '../util/PostMuted'
 import {ErrorMessage} from '../util/error/ErrorMessage'
-import {ComposePrompt} from '../composer/Prompt'
 import {usePalette} from 'lib/hooks/usePalette'
 
 const PARENT_REPLY_LINE_LENGTH = 8
@@ -271,23 +271,17 @@ export const PostThreadItem = observer(function PostThreadItem({
             </View>
           </View>
         </View>
-        <ComposePrompt
-          isReply
-          text="Write your reply"
-          btn="Reply"
-          onPressCompose={onPressReply}
-        />
       </>
     )
   } else {
     return (
-      <>
+      <PostMutedWrapper isMuted={item.post.author.viewer?.muted === true}>
         <Link
           style={[styles.outer, {borderTopColor: pal.colors.border}, pal.view]}
           href={itemHref}
           title={itemTitle}
           noFeedback>
-          {record.reply && (
+          {item._showParentReplyLine && (
             <View
               style={[
                 styles.parentReplyLine,
@@ -295,7 +289,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               ]}
             />
           )}
-          {item.replies?.length !== 0 && (
+          {item._showChildReplyLine && (
             <View
               style={[
                 styles.childReplyLine,
@@ -322,12 +316,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                 did={item.post.author.did}
                 declarationCid={item.post.author.declaration.cid}
               />
-              {item.post.author.viewer?.muted ? (
-                <View style={[styles.mutedWarning, pal.btn]}>
-                  <FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
-                  <Text type="sm">This post is by a muted account.</Text>
-                </View>
-              ) : item.richText?.text ? (
+              {item.richText?.text ? (
                 <View style={styles.postTextContainer}>
                   <RichText
                     type="post-text"
@@ -384,7 +373,7 @@ export const PostThreadItem = observer(function PostThreadItem({
             />
           </Link>
         ) : undefined}
-      </>
+      </PostMutedWrapper>
     )
   }
 })
@@ -441,14 +430,6 @@ const styles = StyleSheet.create({
     paddingRight: 5,
     maxWidth: 240,
   },
-  mutedWarning: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 10,
-    marginTop: 2,
-    marginBottom: 6,
-    borderRadius: 2,
-  },
   postTextContainer: {
     flexDirection: 'row',
     alignItems: 'center',