Sizing and spacing fixes based on on-device testing

13 files changed, 120 insertions, 93 deletions

diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx
index 8ac661a25..45bad95fc 100644
--- a/src/view/com/notifications/FeedItem.tsx
+++ b/src/view/com/notifications/FeedItem.tsx
@@ -133,20 +133,20 @@ export const FeedItem = observer(function FeedItem({
               style={styles.metaItem}
               href={authors[0].href}
               title={`@${authors[0].handle}`}>
-              <Text style={[s.f14, s.bold]}>
+              <Text style={[s.f15, s.bold]}>
                 {authors[0].displayName || authors[0].handle}
               </Text>
             </Link>
             {authors.length > 1 ? (
               <>
-                <Text style={[styles.metaItem, s.f14]}>and</Text>
-                <Text style={[styles.metaItem, s.f14, s.bold]}>
+                <Text style={[styles.metaItem, s.f15]}>and</Text>
+                <Text style={[styles.metaItem, s.f15, s.bold]}>
                   {authors.length - 1} {pluralize(authors.length - 1, 'other')}
                 </Text>
               </>
             ) : undefined}
-            <Text style={[styles.metaItem, s.f14]}>{action}</Text>
-            <Text style={[styles.metaItem, s.f14, s.gray5]}>
+            <Text style={[styles.metaItem, s.f15]}>{action}</Text>
+            <Text style={[styles.metaItem, s.f15, s.gray5]}>
               {ago(item.indexedAt)}
             </Text>
           </View>
diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx
index 8a0ddab5d..5d0a5ba4b 100644
--- a/src/view/com/post-thread/PostThread.tsx
+++ b/src/view/com/post-thread/PostThread.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useRef} from 'react'
+import React, {useState, useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
 import {ActivityIndicator, FlatList, Text, View} from 'react-native'
 import {
@@ -9,12 +9,9 @@ import {useStores} from '../../../state'
 import {SharePostModel} from '../../../state/models/shell'
 import {PostThreadItem} from './PostThreadItem'
 
-const UPDATE_DELAY = 2e3 // wait 2s before refetching the thread for updates
-
 export const PostThread = observer(function PostThread({uri}: {uri: string}) {
   const store = useStores()
   const [view, setView] = useState<PostThreadViewModel | undefined>()
-  const [lastUpdate, setLastUpdate] = useState<number>(Date.now())
 
   useEffect(() => {
     if (view?.params.uri === uri) {
@@ -27,14 +24,6 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
     newView.setup().catch(err => console.error('Failed to fetch thread', err))
   }, [uri, view?.params.uri, store])
 
-  // TODO
-  // useFocusEffect(() => {
-  //   if (Date.now() - lastUpdate > UPDATE_DELAY) {
-  //     view?.update()
-  //     setLastUpdate(Date.now())
-  //   }
-  // })
-
   const onPressShare = (uri: string) => {
     store.shell.openModal(new SharePostModel(uri))
   }
@@ -83,6 +72,7 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
       renderItem={renderItem}
       refreshing={view.isRefreshing}
       onRefresh={onRefresh}
+      style={{flex: 1}}
     />
   )
 })
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 7add92361..17f37cb2e 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -77,14 +77,14 @@ export const PostThreadItem = observer(function PostThreadItem({
             />
           </Link>
           <View style={styles.layoutContent}>
-            <View style={[styles.meta, s.mt5]}>
+            <View style={[styles.meta, {paddingTop: 5, paddingBottom: 0}]}>
               <Link
                 style={styles.metaItem}
                 href={authorHref}
                 title={authorTitle}>
-                <Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
+                <Text style={[s.f16, s.bold]}>{item.author.displayName}</Text>
               </Link>
-              <Text style={[styles.metaItem, s.f14, s.gray5]}>
+              <Text style={[styles.metaItem, s.f15, s.gray5]}>
                 &middot; {ago(item.indexedAt)}
               </Text>
               <View style={s.flex1} />
@@ -104,7 +104,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                 style={styles.metaItem}
                 href={authorHref}
                 title={authorTitle}>
-                <Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
+                <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
               </Link>
             </View>
           </View>
@@ -125,8 +125,10 @@ export const PostThreadItem = observer(function PostThreadItem({
                   style={styles.expandedInfoItem}
                   href={repostsHref}
                   title={repostsTitle}>
-                  <Text style={[s.gray5, s.semiBold]}>
-                    <Text style={[s.bold, s.black]}>{item.repostCount}</Text>{' '}
+                  <Text style={[s.gray5, s.semiBold, s.f16]}>
+                    <Text style={[s.bold, s.black, s.f16]}>
+                      {item.repostCount}
+                    </Text>{' '}
                     {pluralize(item.repostCount, 'repost')}
                   </Text>
                 </Link>
@@ -138,8 +140,10 @@ export const PostThreadItem = observer(function PostThreadItem({
                   style={styles.expandedInfoItem}
                   href={likesHref}
                   title={likesTitle}>
-                  <Text style={[s.gray5, s.semiBold]}>
-                    <Text style={[s.bold, s.black]}>{item.likeCount}</Text>{' '}
+                  <Text style={[s.gray5, s.semiBold, s.f16]}>
+                    <Text style={[s.bold, s.black, s.f16]}>
+                      {item.likeCount}
+                    </Text>{' '}
                     {pluralize(item.likeCount, 'like')}
                   </Text>
                 </Link>
@@ -205,37 +209,20 @@ export const PostThreadItem = observer(function PostThreadItem({
             />
           </Link>
           <View style={styles.layoutContent}>
-            {item.replyingToAuthor &&
-              item.replyingToAuthor !== item.author.handle && (
-                <View style={[s.flexRow, {alignItems: 'center'}]}>
-                  <FontAwesomeIcon
-                    icon="reply"
-                    size={9}
-                    style={[s.gray4, s.mr5]}
-                  />
-                  <Link
-                    href={`/profile/${item.replyingToAuthor}`}
-                    title={`@${item.replyingToAuthor}`}>
-                    <Text style={[s.f12, s.gray5]}>
-                      @{item.replyingToAuthor}
-                    </Text>
-                  </Link>
-                </View>
-              )}
             <View style={styles.meta}>
               <Link
                 style={styles.metaItem}
                 href={authorHref}
                 title={authorTitle}>
-                <Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
+                <Text style={[s.f17, s.bold]}>{item.author.displayName}</Text>
               </Link>
               <Link
                 style={styles.metaItem}
                 href={authorHref}
                 title={authorTitle}>
-                <Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
+                <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
               </Link>
-              <Text style={[styles.metaItem, s.f14, s.gray5]}>
+              <Text style={[styles.metaItem, s.f15, s.gray5]}>
                 &middot; {ago(item.indexedAt)}
               </Text>
               <View style={s.flex1} />
@@ -250,11 +237,24 @@ export const PostThreadItem = observer(function PostThreadItem({
                 />
               </PostDropdownBtn>
             </View>
+            {item.replyingToAuthor &&
+              item.replyingToAuthor !== item.author.handle && (
+                <View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
+                  <Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text>
+                  <Link
+                    href={`/profile/${item.replyingToAuthor}`}
+                    title={`@${item.replyingToAuthor}`}>
+                    <Text style={[s.f14, s.blue3]}>
+                      @{item.replyingToAuthor}
+                    </Text>
+                  </Link>
+                </View>
+              )}
             <View style={styles.postTextContainer}>
               <RichText
                 text={record.text}
                 entities={record.entities}
-                style={[styles.postText, s.f15, s['lh15-1.3']]}
+                style={[styles.postText, s.f17, s['lh17-1.3']]}
               />
             </View>
             <PostCtrls
diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index 91088e21b..37d25a7b1 100644
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@@ -97,12 +97,12 @@ export const Post = observer(function Post({uri}: {uri: string}) {
         <View style={styles.layoutContent}>
           <View style={styles.meta}>
             <Link style={styles.metaItem} href={authorHref} title={authorTitle}>
-              <Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
+              <Text style={[s.f16, s.bold]}>{item.author.displayName}</Text>
             </Link>
             <Link style={styles.metaItem} href={authorHref} title={authorTitle}>
-              <Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
+              <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
             </Link>
-            <Text style={[styles.metaItem, s.f14, s.gray5]}>
+            <Text style={[styles.metaItem, s.f15, s.gray5]}>
               &middot; {ago(item.indexedAt)}
             </Text>
           </View>
@@ -123,7 +123,7 @@ export const Post = observer(function Post({uri}: {uri: string}) {
             <RichText
               text={record.text}
               entities={record.entities}
-              style={[s.f15, s['lh15-1.3']]}
+              style={[s.f16, s['lh16-1.3']]}
             />
           </View>
           <PostCtrls
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 257690d05..feaa78550 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -84,15 +84,15 @@ export const FeedItem = observer(function FeedItem({
               style={styles.metaItem}
               href={authorHref}
               title={item.author.handle}>
-              <Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
+              <Text style={[s.f17, s.bold]}>{item.author.displayName}</Text>
             </Link>
             <Link
               style={styles.metaItem}
               href={authorHref}
               title={item.author.handle}>
-              <Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
+              <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
             </Link>
-            <Text style={[styles.metaItem, s.f14, s.gray5]}>
+            <Text style={[styles.metaItem, s.f15, s.gray5]}>
               &middot; {ago(item.indexedAt)}
             </Text>
             <View style={s.flex1} />
@@ -108,13 +108,12 @@ export const FeedItem = observer(function FeedItem({
             </PostDropdownBtn>
           </View>
           {replyHref !== '' && (
-            <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
-              <FontAwesomeIcon icon="reply" size={9} style={[s.gray4, s.mr5]} />
-              <Text style={[s.gray4, s.f12, s.mr2]}>Reply to</Text>
+            <View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
+              <Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text>
               <Link href={replyHref} title="Parent post">
                 <UserInfoText
                   did={replyAuthorDid}
-                  style={[s.f12, s.gray5]}
+                  style={[s.f15, s.blue3]}
                   prefix="@"
                 />
               </Link>
@@ -124,7 +123,7 @@ export const FeedItem = observer(function FeedItem({
             <RichText
               text={record.text}
               entities={record.entities}
-              style={[s.f15, s['lh15-1.3']]}
+              style={[s.f17, s['lh17-1.3']]}
             />
           </View>
           <PostCtrls
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index dfd8d3c29..05ad5889f 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -154,8 +154,10 @@ export const ProfileHeader = observer(function ProfileHeader({
           <TouchableOpacity
             style={[s.flexRow, s.mr10]}
             onPress={onPressFollowers}>
-            <Text style={[s.bold, s.mr2]}>{view.followersCount}</Text>
-            <Text style={s.gray5}>
+            <Text style={[s.bold, s.mr2, styles.metricsText]}>
+              {view.followersCount}
+            </Text>
+            <Text style={[s.gray5, styles.metricsText]}>
               {pluralize(view.followersCount, 'follower')}
             </Text>
           </TouchableOpacity>
@@ -163,27 +165,35 @@ export const ProfileHeader = observer(function ProfileHeader({
             <TouchableOpacity
               style={[s.flexRow, s.mr10]}
               onPress={onPressFollows}>
-              <Text style={[s.bold, s.mr2]}>{view.followsCount}</Text>
-              <Text style={s.gray5}>following</Text>
+              <Text style={[s.bold, s.mr2, styles.metricsText]}>
+                {view.followsCount}
+              </Text>
+              <Text style={[s.gray5, styles.metricsText]}>following</Text>
             </TouchableOpacity>
           ) : undefined}
           {view.isScene ? (
             <TouchableOpacity
               style={[s.flexRow, s.mr10]}
               onPress={onPressFollows}>
-              <Text style={[s.bold, s.mr2]}>{view.followsCount}</Text>
-              <Text style={s.gray5}>
+              <Text style={[s.bold, s.mr2, styles.metricsText]}>
+                {view.followsCount}
+              </Text>
+              <Text style={[s.gray5, styles.metricsText]}>
                 {pluralize(view.followsCount, 'member')}
               </Text>
             </TouchableOpacity>
           ) : undefined}
           <View style={[s.flexRow, s.mr10]}>
-            <Text style={[s.bold, s.mr2]}>{view.postsCount}</Text>
-            <Text style={s.gray5}>{pluralize(view.postsCount, 'post')}</Text>
+            <Text style={[s.bold, s.mr2, styles.metricsText]}>
+              {view.postsCount}
+            </Text>
+            <Text style={[s.gray5, styles.metricsText]}>
+              {pluralize(view.postsCount, 'post')}
+            </Text>
           </View>
         </View>
         {view.description && (
-          <Text style={[s.mb5, s.f15, s['lh15-1.3']]}>{view.description}</Text>
+          <Text style={[s.mb5, s.f16, s['lh16-1.3']]}>{view.description}</Text>
         )}
         {
           undefined /*<View style={styles.badgesLine}>
@@ -268,7 +278,7 @@ const styles = StyleSheet.create({
     // marginBottom: 14,
   },
   displayName: {
-    fontSize: 24,
+    fontSize: 28,
     fontWeight: 'bold',
   },
 
@@ -277,7 +287,7 @@ const styles = StyleSheet.create({
     marginBottom: 8,
   },
   handle: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: 'bold',
     color: colors.gray5,
   },
@@ -288,7 +298,7 @@ const styles = StyleSheet.create({
     marginRight: 5,
   },
   typeLabel: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: 'bold',
     color: colors.gray5,
   },
@@ -297,6 +307,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     marginBottom: 8,
   },
+  metricsText: {
+    fontSize: 15,
+  },
 
   badgesLine: {
     flexDirection: 'row',
diff --git a/src/view/com/util/DropdownBtn.tsx b/src/view/com/util/DropdownBtn.tsx
index 825a5395c..2e9ca0c15 100644
--- a/src/view/com/util/DropdownBtn.tsx
+++ b/src/view/com/util/DropdownBtn.tsx
@@ -157,9 +157,9 @@ const styles = StyleSheet.create({
   menuItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 6,
-    paddingLeft: 10,
-    paddingRight: 30,
+    paddingVertical: 10,
+    paddingLeft: 15,
+    paddingRight: 40,
   },
   menuItemBorder: {
     borderTopWidth: 1,
@@ -172,6 +172,6 @@ const styles = StyleSheet.create({
     marginRight: 8,
   },
   label: {
-    fontSize: 15,
+    fontSize: 18,
   },
 })
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index 6c8868972..16e18c84d 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -5,7 +5,7 @@ import {getGradient} from '../../lib/asset-gen'
 export function UserBanner({handle}: {handle: string}) {
   const gradient = getGradient(handle)
   return (
-    <Svg width="400" height="120" viewBox="50 0 200 100">
+    <Svg width="100%" height="120" viewBox="50 0 200 100">
       <Defs>
         <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
           <Stop offset="0" stopColor={gradient[0]} stopOpacity="1" />
diff --git a/src/view/lib/icons.tsx b/src/view/lib/icons.tsx
index 8cc40a73e..bf4d242f0 100644
--- a/src/view/lib/icons.tsx
+++ b/src/view/lib/icons.tsx
@@ -31,12 +31,18 @@ export function GridIcon({style}: {style?: StyleProp<ViewStyle>}) {
   )
 }
 
-export function HomeIcon({style}: {style?: StyleProp<ViewStyle>}) {
+export function HomeIcon({
+  style,
+  size,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+}) {
   return (
     <Svg
       viewBox="0 0 48 48"
-      width="24"
-      height="24"
+      width={size || 24}
+      height={size || 24}
       stroke="currentColor"
       style={style}>
       <Path
@@ -73,14 +79,20 @@ export function BellIcon({
 
 // Copyright (c) 2020 Refactoring UI Inc.
 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
-export function UserGroupIcon({style}: {style?: StyleProp<ViewStyle>}) {
+export function UserGroupIcon({
+  style,
+  size,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+}) {
   return (
     <Svg
       fill="none"
       viewBox="0 0 24 24"
-      width="32"
-      height="32"
-      strokeWidth={1.5}
+      width={size || 32}
+      height={size || 32}
+      strokeWidth={2}
       stroke="currentColor"
       style={style}>
       <Path
diff --git a/src/view/lib/styles.ts b/src/view/lib/styles.ts
index e3f3edb69..dfcaeef92 100644
--- a/src/view/lib/styles.ts
+++ b/src/view/lib/styles.ts
@@ -71,6 +71,7 @@ export const s = StyleSheet.create({
   f14: {fontSize: 14},
   f15: {fontSize: 15},
   f16: {fontSize: 16},
+  f17: {fontSize: 17},
   f18: {fontSize: 18},
 
   // line heights
@@ -82,6 +83,8 @@ export const s = StyleSheet.create({
   ['lh15-1.3']: {lineHeight: 19.5}, // 1.3 of 15px
   ['lh16-1']: {lineHeight: 16},
   ['lh16-1.3']: {lineHeight: 20.8}, // 1.3 of 16px
+  ['lh17-1']: {lineHeight: 17},
+  ['lh17-1.3']: {lineHeight: 22.1}, // 1.3 of 16px
   ['lh18-1']: {lineHeight: 18},
   ['lh18-1.3']: {lineHeight: 23.4}, // 1.3 of 18px
 
diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx
index e872db2dc..fc804f61e 100644
--- a/src/view/screens/PostThread.tsx
+++ b/src/view/screens/PostThread.tsx
@@ -18,9 +18,11 @@ export const PostThread = ({visible, params}: ScreenParams) => {
   }, [visible, store.nav, name])
 
   return (
-    <View>
+    <View style={{flex: 1}}>
       <ViewHeader title="Post" subtitle={`by ${name}`} />
-      <PostThreadComponent uri={uri} />
+      <View style={{flex: 1}}>
+        <PostThreadComponent uri={uri} />
+      </View>
     </View>
   )
 }
diff --git a/src/view/shell/mobile/Composer.tsx b/src/view/shell/mobile/Composer.tsx
index 62bc7304d..96fd50441 100644
--- a/src/view/shell/mobile/Composer.tsx
+++ b/src/view/shell/mobile/Composer.tsx
@@ -78,6 +78,6 @@ const styles = StyleSheet.create({
     bottom: 0,
     width: '100%',
     backgroundColor: '#fff',
-    paddingTop: 20,
+    paddingTop: 24,
   },
 })
diff --git a/src/view/shell/mobile/MainMenu.tsx b/src/view/shell/mobile/MainMenu.tsx
index 89c7857f9..fbd31ff28 100644
--- a/src/view/shell/mobile/MainMenu.tsx
+++ b/src/view/shell/mobile/MainMenu.tsx
@@ -51,6 +51,10 @@ export const MainMenu = observer(
     // rendering
     // =
 
+    const MenuItemBlank = () => (
+      <View style={[styles.menuItem, styles.menuItemMargin]} />
+    )
+
     const MenuItem = ({
       icon,
       label,
@@ -67,16 +71,16 @@ export const MainMenu = observer(
         onPress={() => onNavigate(url)}>
         <View style={[styles.menuItemIconWrapper]}>
           {icon === 'home' ? (
-            <HomeIcon style={styles.menuItemIcon} />
+            <HomeIcon style={styles.menuItemIcon} size="32" />
           ) : icon === 'user-group' ? (
-            <UserGroupIcon style={styles.menuItemIcon} />
+            <UserGroupIcon style={styles.menuItemIcon} size="36" />
           ) : icon === 'bell' ? (
-            <BellIcon style={styles.menuItemIcon} size="28" />
+            <BellIcon style={styles.menuItemIcon} size="32" />
           ) : (
             <FontAwesomeIcon
               icon={icon}
               style={styles.menuItemIcon}
-              size={24}
+              size={28}
             />
           )}
         </View>
@@ -133,7 +137,7 @@ export const MainMenu = observer(
                 onPress={() => onNavigate(`/profile/${store.me.handle || ''}`)}>
                 <View style={styles.profileImage}>
                   <UserAvatar
-                    size={30}
+                    size={35}
                     displayName={store.me.displayName}
                     handle={store.me.handle || ''}
                   />
@@ -167,6 +171,8 @@ export const MainMenu = observer(
                   url="/notifications"
                   count={store.me.notificationCount}
                 />
+                <MenuItemBlank />
+                <MenuItemBlank />
               </View>
 
               <Text style={styles.heading}>Scenes</Text>
@@ -183,6 +189,8 @@ export const MainMenu = observer(
               <View style={[styles.menuItems]}>
                 <MenuItemActor label="Cool People Only" url="/" />
                 <MenuItemActor label="Techsky" url="/" />
+                <MenuItemBlank />
+                <MenuItemBlank />
               </View>
             </Animated.View>
           </SafeAreaView>
@@ -215,7 +223,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     height: 40,
     paddingHorizontal: 10,
-    marginBottom: 10,
+    marginBottom: 16,
   },
   section: {
     paddingHorizontal: 10,
@@ -238,7 +246,7 @@ const styles = StyleSheet.create({
     marginRight: 8,
   },
   profileText: {
-    fontSize: 15,
+    fontSize: 17,
     fontWeight: 'bold',
   },
 
@@ -256,7 +264,7 @@ const styles = StyleSheet.create({
     marginBottom: 20,
   },
   menuItem: {
-    width: 82,
+    flex: 1,
     alignItems: 'center',
   },
   menuItemMargin: {