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/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',

src/view/shell/mobile/index.tsx

@@ -157,7 +157,7 @@ export const MobileShell: React.FC = observer(() => {
   }
 
   const screenBg = {
-    backgroundColor: theme.colorScheme === 'dark' ? colors.gray7 : colors.gray1,
+    backgroundColor: theme.colorScheme === 'dark' ? colors.black : colors.gray1,
   }
   return (
     <View testID="mobileShellView" style={[styles.outerContainer, pal.view]}>
@@ -202,13 +202,7 @@ export const MobileShell: React.FC = observer(() => {
                       style={[
                         s.h100pct,
                         screenBg,
-                        current
-                          ? [
-                              swipeTransform,
-                              // tabMenuTransform, TODO
-                              // isRunningNewTabAnim ? newTabTransform : undefined, TODO
-                            ]
-                          : undefined,
+                        current ? [swipeTransform] : undefined,
                       ]}>
                       <ErrorBoundary>
                         <Com