Rework all typography

This commit is contained in:
Paul Frazee 2023-01-18 11:15:40 -06:00
parent df4acbd683
commit 77580ab6a4
28 changed files with 355 additions and 162 deletions

View file

@ -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: {