Increase information density and enlarge some click targets

5 files changed, 26 insertions, 18 deletions

diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 95b02837d..8a2d5068e 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -345,8 +345,8 @@ const styles = StyleSheet.create({
   },
   postText: {
     fontFamily: 'Helvetica Neue',
-    fontSize: 17,
-    lineHeight: 22.1, // 1.3 of 17px
+    fontSize: 16,
+    lineHeight: 20.8, // 1.3 of 16px
   },
   postTextContainer: {
     flexDirection: 'row',
diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index d0df1b295..4d699af79 100644
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@@ -196,7 +196,7 @@ const styles = StyleSheet.create({
   },
   postText: {
     fontFamily: 'Helvetica Neue',
-    fontSize: 17,
-    lineHeight: 22.1, // 1.3 of 17px
+    fontSize: 16,
+    lineHeight: 20.8, // 1.3 of 16px
   },
 })
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 4063b2008..957c55381 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -254,7 +254,7 @@ const styles = StyleSheet.create({
   },
   postText: {
     fontFamily: 'Helvetica Neue',
-    fontSize: 17,
-    lineHeight: 22.1, // 1.3 of 17px
+    fontSize: 16,
+    lineHeight: 20.8, // 1.3 of 16px
   },
 })
diff --git a/src/view/shell/mobile/MainMenu.tsx b/src/view/shell/mobile/MainMenu.tsx
index d05e70a81..8a7264612 100644
--- a/src/view/shell/mobile/MainMenu.tsx
+++ b/src/view/shell/mobile/MainMenu.tsx
@@ -8,7 +8,6 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -25,10 +24,17 @@ import {CreateSceneModel} from '../../../state/models/shell-ui'
 import {s, colors} from '../../lib/styles'
 
 export const MainMenu = observer(
-  ({active, onClose}: {active: boolean; onClose: () => void}) => {
+  ({
+    active,
+    insetBottom,
+    onClose,
+  }: {
+    active: boolean
+    insetBottom: number
+    onClose: () => void
+  }) => {
     const store = useStores()
     const initInterp = useSharedValue<number>(0)
-    const insets = useSafeAreaInsets()
 
     useEffect(() => {
       if (active) {
@@ -172,7 +178,7 @@ export const MainMenu = observer(
         <Animated.View
           style={[
             styles.wrapper,
-            {bottom: insets.bottom + 55},
+            {bottom: insetBottom + 45},
             wrapperAnimStyle,
           ]}>
           <SafeAreaView>
@@ -267,7 +273,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     height: 40,
     paddingHorizontal: 10,
-    marginBottom: 16,
+    marginTop: 12,
+    marginBottom: 20,
   },
   section: {
     paddingHorizontal: 10,
diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx
index e7c695ca9..ccde52a2c 100644
--- a/src/view/shell/mobile/index.tsx
+++ b/src/view/shell/mobile/index.tsx
@@ -70,7 +70,7 @@ const Btn = ({
   onPress?: (event: GestureResponderEvent) => void
   onLongPress?: (event: GestureResponderEvent) => void
 }) => {
-  let size = 21
+  let size = 24
   let addedStyles
   let IconEl
   if (icon === 'menu') {
@@ -79,17 +79,17 @@ const Btn = ({
     IconEl = GridIconSolid
   } else if (icon === 'home') {
     IconEl = HomeIcon
-    size = 24
+    size = 27
   } else if (icon === 'home-solid') {
     IconEl = HomeIconSolid
-    size = 24
+    size = 27
   } else if (icon === 'bell') {
     IconEl = BellIcon
-    size = 24
+    size = 27
     addedStyles = {position: 'relative', top: -1} as ViewStyle
   } else if (icon === 'bell-solid') {
     IconEl = BellIconSolid
-    size = 24
+    size = 27
     addedStyles = {position: 'relative', top: -1} as ViewStyle
   } else {
     IconEl = FontAwesomeIcon
@@ -316,7 +316,7 @@ export const MobileShell: React.FC = observer(() => {
       <View
         style={[
           styles.bottomBar,
-          {paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)},
+          {paddingBottom: clamp(safeAreaInsets.bottom, 15, 40)},
         ]}>
         <Btn
           icon={isAtHome ? 'home-solid' : 'home'}
@@ -343,6 +343,7 @@ export const MobileShell: React.FC = observer(() => {
       </View>
       <MainMenu
         active={isMainMenuActive}
+        insetBottom={clamp(safeAreaInsets.bottom, 15, 40)}
         onClose={() => setMainMenuActive(false)}
       />
       <Modal />
@@ -491,7 +492,7 @@ const styles = StyleSheet.create({
   },
   ctrl: {
     flex: 1,
-    paddingTop: 15,
+    paddingTop: 12,
     paddingBottom: 5,
   },
   notificationCount: {