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, 18 insertions, 3 deletions

diff --git a/src/view/shell/mobile/Menu.tsx b/src/view/shell/mobile/Menu.tsx
index bc487aee2..927e712e1 100644
--- a/src/view/shell/mobile/Menu.tsx
+++ b/src/view/shell/mobile/Menu.tsx
@@ -32,6 +32,7 @@ import {Text} from '../../com/util/text/Text'
 import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics'
+import {pluralize} from 'lib/strings/helpers'
 
 export const Menu = observer(({onClose}: {onClose: () => void}) => {
   const theme = useTheme()
@@ -138,6 +139,16 @@ export const Menu = observer(({onClose}: {onClose: () => void}) => {
         <Text type="2xl" style={[pal.textLight, styles.profileCardHandle]}>
           @{store.me.handle}
         </Text>
+        <Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}>
+          <Text type="xl-medium" style={pal.text}>
+            {store.me.followersCount || 0}
+          </Text>{' '}
+          {pluralize(store.me.followersCount || 0, 'follower')} &middot;{' '}
+          <Text type="xl-medium" style={pal.text}>
+            {store.me.followsCount || 0}
+          </Text>{' '}
+          following
+        </Text>
       </TouchableOpacity>
       <View style={s.flex1} />
       <View>
@@ -267,12 +278,12 @@ export const Menu = observer(({onClose}: {onClose: () => void}) => {
 const styles = StyleSheet.create({
   view: {
     flex: 1,
-    paddingTop: 10,
+    paddingTop: 20,
     paddingBottom: 50,
     paddingLeft: 30,
   },
   viewDarkMode: {
-    backgroundColor: '#202023',
+    backgroundColor: '#1B1919',
   },
 
   profileCardDisplayName: {
@@ -283,6 +294,10 @@ const styles = StyleSheet.create({
     marginTop: 4,
     paddingRight: 20,
   },
+  profileCardFollowers: {
+    marginTop: 16,
+    paddingRight: 20,
+  },
 
   menuItem: {
     flexDirection: 'row',
@@ -316,7 +331,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingRight: 30,
-    paddingTop: 20,
+    paddingTop: 80,
   },
   footerBtn: {
     flexDirection: 'row',