Rework all typography

1 files changed, 23 insertions, 17 deletions

diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 86e428621..2456da5a4 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -130,17 +130,19 @@ export const PostThreadItem = observer(function PostThreadItem({
             </View>
             <View style={styles.layoutContent}>
               <View style={[styles.meta, {paddingTop: 5, paddingBottom: 0}]}>
-                <Link
-                  style={styles.metaItem}
-                  href={authorHref}
-                  title={authorTitle}>
-                  <Text type="h5" style={[pal.text]} numberOfLines={1}>
-                    {item.post.author.displayName || item.post.author.handle}
+                <View style={{flexDirection: 'row', alignItems: 'baseline'}}>
+                  <Link
+                    style={styles.metaItem}
+                    href={authorHref}
+                    title={authorTitle}>
+                    <Text type="xl-bold" style={[pal.text]} numberOfLines={1}>
+                      {item.post.author.displayName || item.post.author.handle}
+                    </Text>
+                  </Link>
+                  <Text type="md" style={[styles.metaItem, pal.textLight]}>
+                    &middot; {ago(item.post.indexedAt)}
                   </Text>
-                </Link>
-                <Text type="h6" style={[styles.metaItem, pal.textLight]}>
-                  &middot; {ago(item.post.indexedAt)}
-                </Text>
+                </View>
                 <View style={s.flex1} />
                 <PostDropdownBtn
                   style={styles.metaItem}
@@ -161,7 +163,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                   style={styles.metaItem}
                   href={authorHref}
                   title={authorTitle}>
-                  <Text type="h6" style={[pal.textLight]} numberOfLines={1}>
+                  <Text type="md" style={[pal.textLight]} numberOfLines={1}>
                     @{item.post.author.handle}
                   </Text>
                 </Link>
@@ -176,9 +178,10 @@ export const PostThreadItem = observer(function PostThreadItem({
                   styles.postTextLargeContainer,
                 ]}>
                 <RichText
-                  type="h3"
+                  type="post-text-lg"
                   text={record.text}
                   entities={record.entities}
+                  lineHeight={1.3}
                 />
               </View>
             ) : undefined}
@@ -190,8 +193,8 @@ export const PostThreadItem = observer(function PostThreadItem({
                     style={styles.expandedInfoItem}
                     href={repostsHref}
                     title={repostsTitle}>
-                    <Text type="h6" style={pal.textLight}>
-                      <Text type="h5" style={pal.text}>
+                    <Text type="lg" style={pal.textLight}>
+                      <Text type="xl-bold" style={pal.text}>
                         {item.post.repostCount}
                       </Text>{' '}
                       {pluralize(item.post.repostCount, 'repost')}
@@ -205,8 +208,8 @@ export const PostThreadItem = observer(function PostThreadItem({
                     style={styles.expandedInfoItem}
                     href={upvotesHref}
                     title={upvotesTitle}>
-                    <Text type="h6" style={pal.textLight}>
-                      <Text type="h5" style={pal.text}>
+                    <Text type="lg" style={pal.textLight}>
+                      <Text type="xl-bold" style={pal.text}>
                         {item.post.upvoteCount}
                       </Text>{' '}
                       {pluralize(item.post.upvoteCount, 'like')}
@@ -289,14 +292,16 @@ export const PostThreadItem = observer(function PostThreadItem({
               {item.post.author.viewer?.muted ? (
                 <View style={[styles.mutedWarning, pal.btn]}>
                   <FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
-                  <Text type="body2">This post is by a muted account.</Text>
+                  <Text type="sm">This post is by a muted account.</Text>
                 </View>
               ) : record.text ? (
                 <View style={styles.postTextContainer}>
                   <RichText
+                    type="post-text"
                     text={record.text}
                     entities={record.entities}
                     style={pal.text}
+                    lineHeight={1.3}
                   />
                 </View>
               ) : (
@@ -394,6 +399,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexWrap: 'wrap',
     paddingBottom: 8,
+    paddingRight: 20,
     minHeight: 36,
   },
   postTextLargeContainer: {