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

src/view/com/composer/Prompt.tsx

@@ -1,91 +1,45 @@
 import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {StyleSheet, TouchableOpacity} from 'react-native'
+import {UserAvatar} from '../util/UserAvatar'
 import {Text} from '../util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useStores} from 'state/index'
 
 export function ComposePrompt({
-  text = "What's up?",
-  btn = 'Post',
-  isReply = false,
   onPressCompose,
 }: {
-  text?: string
-  btn?: string
-  isReply?: boolean
   onPressCompose: (imagesOpen?: boolean) => void
 }) {
+  const store = useStores()
   const pal = usePalette('default')
   return (
     <TouchableOpacity
-      testID="composePromptButton"
-      style={[
-        pal.view,
-        pal.border,
-        styles.container,
-        isReply ? styles.containerReply : undefined,
-      ]}
+      testID="replyPromptBtn"
+      style={[pal.view, pal.border, styles.prompt]}
       onPress={() => onPressCompose()}>
-      {!isReply && (
-        <FontAwesomeIcon
-          icon={['fas', 'pen-nib']}
-          size={18}
-          style={[pal.textLight, styles.iconLeft]}
-        />
-      )}
-      <View style={styles.textContainer}>
-        <Text type={isReply ? 'lg' : 'lg-medium'} style={pal.textLight}>
-          {text}
-        </Text>
-      </View>
-      {isReply ? (
-        <View
-          style={[styles.btn, {backgroundColor: pal.colors.backgroundLight}]}>
-          <Text type="button" style={pal.textLight}>
-            {btn}
-          </Text>
-        </View>
-      ) : (
-        <TouchableOpacity onPress={() => onPressCompose(true)}>
-          <FontAwesomeIcon
-            icon={['far', 'image']}
-            size={18}
-            style={[pal.textLight, styles.iconRight]}
-          />
-        </TouchableOpacity>
-      )}
+      <UserAvatar
+        handle={store.me.handle}
+        avatar={store.me.avatar}
+        displayName={store.me.displayName}
+        size={38}
+      />
+      <Text type="xl" style={[pal.text, styles.label]}>
+        Write your reply
+      </Text>
     </TouchableOpacity>
   )
 }
 
 const styles = StyleSheet.create({
-  iconLeft: {
-    marginLeft: 22,
-    marginRight: 2,
-  },
-  iconRight: {
-    marginRight: 20,
-  },
-  container: {
-    paddingVertical: 16,
+  prompt: {
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    paddingBottom: 10,
     flexDirection: 'row',
     alignItems: 'center',
     borderTopWidth: 1,
   },
-  containerReply: {
-    paddingVertical: 14,
-    paddingHorizontal: 10,
-  },
-  avatar: {
-    width: 50,
-  },
-  textContainer: {
-    marginLeft: 10,
-    flex: 1,
-  },
-  btn: {
-    paddingVertical: 6,
-    paddingHorizontal: 14,
-    borderRadius: 30,
+  label: {
+    paddingLeft: 12,
   },
 })