diff options
Diffstat (limited to 'src/view/com')
-rw-r--r-- | src/view/com/composer/Autocomplete.tsx | 4 | ||||
-rw-r--r-- | src/view/com/composer/ComposePost.tsx | 9 | ||||
-rw-r--r-- | src/view/com/composer/Prompt.tsx | 2 | ||||
-rw-r--r-- | src/view/com/discover/SuggestedFollows.tsx | 2 | ||||
-rw-r--r-- | src/view/com/post-thread/PostThreadItem.tsx | 40 | ||||
-rw-r--r-- | src/view/com/post/Post.tsx | 14 | ||||
-rw-r--r-- | src/view/com/posts/FeedItem.tsx | 24 | ||||
-rw-r--r-- | src/view/com/profile/ProfileCard.tsx | 2 | ||||
-rw-r--r-- | src/view/com/profile/ProfileFollowers.tsx | 2 | ||||
-rw-r--r-- | src/view/com/profile/ProfileFollows.tsx | 2 | ||||
-rw-r--r-- | src/view/com/profile/ProfileHeader.tsx | 18 | ||||
-rw-r--r-- | src/view/com/util/EmptyState.tsx | 2 | ||||
-rw-r--r-- | src/view/com/util/Link.tsx | 2 | ||||
-rw-r--r-- | src/view/com/util/PostEmbeds.tsx | 12 | ||||
-rw-r--r-- | src/view/com/util/PostMeta.tsx | 6 | ||||
-rw-r--r-- | src/view/com/util/UserInfoText.tsx | 2 | ||||
-rw-r--r-- | src/view/com/util/ViewHeader.tsx | 4 | ||||
-rw-r--r-- | src/view/com/util/error/ErrorMessage.tsx | 2 | ||||
-rw-r--r-- | src/view/com/util/error/ErrorScreen.tsx | 4 | ||||
-rw-r--r-- | src/view/com/util/text/RichText.tsx | 6 | ||||
-rw-r--r-- | src/view/com/util/text/Text.tsx | 2 |
21 files changed, 83 insertions, 78 deletions
diff --git a/src/view/com/composer/Autocomplete.tsx b/src/view/com/composer/Autocomplete.tsx index 2ccd05653..d3f99627c 100644 --- a/src/view/com/composer/Autocomplete.tsx +++ b/src/view/com/composer/Autocomplete.tsx @@ -50,9 +50,9 @@ export function Autocomplete({ key={i} style={[pal.border, styles.item]} onPress={() => onSelect(item.handle)}> - <Text style={pal.text}> + <Text type="md-medium" style={pal.text}> {item.displayName || item.handle} - <Text type="body2" style={pal.textLight}> + <Text type="sm" style={pal.textLight}> @{item.handle} </Text> </Text> diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx index 790e0f784..b3a5680f2 100644 --- a/src/view/com/composer/ComposePost.tsx +++ b/src/view/com/composer/ComposePost.tsx @@ -243,12 +243,12 @@ export const ComposePost = observer(function ComposePost({ /> <View style={styles.replyToPost}> <TextLink - type="h5" + type="xl-medium" href={`/profile/${replyTo.author.handle}`} text={replyTo.author.displayName || replyTo.author.handle} style={[pal.text]} /> - <Text style={pal.text} numberOfLines={6}> + <Text type="post-text" style={pal.text} numberOfLines={6}> {replyTo.text} </Text> </View> @@ -408,9 +408,12 @@ const styles = StyleSheet.create({ textInput: { flex: 1, padding: 5, - fontSize: 18, marginLeft: 8, alignSelf: 'flex-start', + fontSize: 18, + letterSpacing: 0.2, + fontWeight: '400', + lineHeight: 23.4, // 1.3*16 }, replyToLayout: { flexDirection: 'row', diff --git a/src/view/com/composer/Prompt.tsx b/src/view/com/composer/Prompt.tsx index e8f52f84a..0b420021a 100644 --- a/src/view/com/composer/Prompt.tsx +++ b/src/view/com/composer/Prompt.tsx @@ -26,7 +26,7 @@ export function ComposePrompt({ ]} onPress={onPressCompose}> <View style={styles.textContainer}> - <Text type="h5" style={[pal.textLight, {fontWeight: 'normal'}]}> + <Text type="lg" style={[pal.textLight]}> {text} </Text> </View> diff --git a/src/view/com/discover/SuggestedFollows.tsx b/src/view/com/discover/SuggestedFollows.tsx index 07f397447..f9e28da29 100644 --- a/src/view/com/discover/SuggestedFollows.tsx +++ b/src/view/com/discover/SuggestedFollows.tsx @@ -160,7 +160,7 @@ const User = ({ /> </View> <View style={styles.actorContent}> - <Text type="h5" style={pal.text} numberOfLines={1}> + <Text type="title-sm" style={pal.text} numberOfLines={1}> {item.displayName || item.handle} </Text> <Text style={pal.textLight} numberOfLines={1}> 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]}> + · {ago(item.post.indexedAt)} </Text> - </Link> - <Text type="h6" style={[styles.metaItem, pal.textLight]}> - · {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: { diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index 75ed84954..7e0a87050 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -20,7 +20,6 @@ import {Text} from '../util/text/Text' import {RichText} from '../util/text/RichText' import * as Toast from '../util/Toast' import {UserAvatar} from '../util/UserAvatar' -import {ErrorMessage} from '../util/error/ErrorMessage' import {useStores} from '../../../state' import {s, colors} from '../../lib/styles' import {usePalette} from '../../lib/hooks/usePalette' @@ -166,12 +165,12 @@ export const Post = observer(function Post({ size={9} style={[pal.textLight, s.mr5]} /> - <Text type="body2" style={[pal.textLight, s.mr2]}> + <Text type="sm" style={[pal.textLight, s.mr2]}> Reply to </Text> <Link href={replyHref} title="Parent post"> <UserInfoText - type="body2" + type="sm" did={replyAuthorDid} attr="displayName" style={[pal.textLight]} @@ -182,11 +181,16 @@ export const Post = observer(function Post({ {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 text={record.text} entities={record.entities} /> + <RichText + type="post-text" + text={record.text} + entities={record.entities} + lineHeight={1.3} + /> </View> ) : ( <View style={{height: 5}} /> diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index f5536907d..cfac2bede 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -15,7 +15,7 @@ import {PostEmbeds} from '../util/PostEmbeds' import {RichText} from '../util/text/RichText' import * as Toast from '../util/Toast' import {UserAvatar} from '../util/UserAvatar' -import {s, colors} from '../../lib/styles' +import {s} from '../../lib/styles' import {useStores} from '../../../state' import {useTheme} from '../../lib/ThemeContext' import {usePalette} from '../../lib/hooks/usePalette' @@ -30,7 +30,6 @@ export const FeedItem = observer(function ({ ignoreMuteFor?: string }) { const store = useStores() - const theme = useTheme() const pal = usePalette('default') const [deleted, setDeleted] = useState(false) const record = item.postRecord @@ -144,12 +143,7 @@ export const FeedItem = observer(function ({ icon="retweet" style={[styles.includeReasonIcon, {color: pal.colors.textLight}]} /> - <Text - type="body2" - style={{ - fontWeight: '600', - color: pal.colors.textLight, - }}> + <Text type="sm-bold" style={pal.textLight}> Reposted by{' '} {item.reasonRepost.by.displayName || item.reasonRepost.by.handle} </Text> @@ -180,15 +174,15 @@ export const FeedItem = observer(function ({ size={9} style={[{color: pal.colors.textLight}, s.mr5]} /> - <Text type="body2" style={[pal.textLight, s.mr2]}> + <Text type="md" style={[pal.textLight, s.mr2]}> Reply to </Text> <Link href={replyHref} title="Parent post"> <UserInfoText - type="body2" + type="md" did={replyAuthorDid} attr="displayName" - style={[pal.textLight]} + style={[pal.textLight, s.ml2]} /> </Link> </View> @@ -197,14 +191,15 @@ export const FeedItem = observer(function ({ ignoreMuteFor !== item.post.author.did ? ( <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="body1" + type="post-text" text={record.text} entities={record.entities} + lineHeight={1.3} /> </View> ) : ( @@ -251,7 +246,7 @@ export const FeedItem = observer(function ({ <Circle x="2" y="22" r="1.5" fill={pal.colors.replyLineDot} /> </Svg> </View> - <Text style={[pal.link, theme.typography.body2]}> + <Text type="md" style={pal.link}> View full thread </Text> </Link> @@ -322,6 +317,7 @@ const styles = StyleSheet.create({ alignItems: 'center', flexWrap: 'wrap', paddingBottom: 4, + paddingRight: 20, }, embed: { marginBottom: 6, diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx index 5d1992b7a..0cda3ba2a 100644 --- a/src/view/com/profile/ProfileCard.tsx +++ b/src/view/com/profile/ProfileCard.tsx @@ -39,7 +39,7 @@ export function ProfileCard({ <Text style={[s.bold, pal.text]} numberOfLines={1}> {displayName || handle} </Text> - <Text type="body2" style={[pal.textLight]} numberOfLines={1}> + <Text type="sm" style={[pal.textLight]} numberOfLines={1}> @{handle} </Text> </View> diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx index 26939c7ce..469a91f8d 100644 --- a/src/view/com/profile/ProfileFollowers.tsx +++ b/src/view/com/profile/ProfileFollowers.tsx @@ -99,7 +99,7 @@ const User = ({item}: {item: FollowerItem}) => { <Text style={[s.bold, pal.text]}> {item.displayName || item.handle} </Text> - <Text type="body2" style={[pal.textLight]}> + <Text type="sm" style={[pal.textLight]}> @{item.handle} </Text> </View> diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx index 03c5b13bb..9b413ab76 100644 --- a/src/view/com/profile/ProfileFollows.tsx +++ b/src/view/com/profile/ProfileFollows.tsx @@ -99,7 +99,7 @@ const User = ({item}: {item: FollowItem}) => { <Text style={[s.bold, pal.text]}> {item.displayName || item.handle} </Text> - <Text type="body2" style={pal.textLight}> + <Text type="sm" style={pal.textLight}> @{item.handle} </Text> </View> diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index 52a4400a5..ec577f25e 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -108,7 +108,7 @@ export const ProfileHeader = observer(function ProfileHeader({ /> </View> <View style={styles.displayNameLine}> - <Text type="h2" style={[pal.text, {lineHeight: 38}]}> + <Text type="title-xl" style={[pal.text, {lineHeight: 38}]}> {view.displayName || view.handle} </Text> </View> @@ -200,7 +200,7 @@ export const ProfileHeader = observer(function ProfileHeader({ ) : undefined} </View> <View style={styles.displayNameLine}> - <Text type="h2" style={[pal.text, {lineHeight: 38}]}> + <Text type="title-xl" style={[pal.text, {lineHeight: 38}]}> {view.displayName || view.handle} </Text> </View> @@ -212,10 +212,10 @@ export const ProfileHeader = observer(function ProfileHeader({ testID="profileHeaderFollowersButton" style={[s.flexRow, s.mr10]} onPress={onPressFollowers}> - <Text type="body2" style={[s.bold, s.mr2, pal.text]}> + <Text type="md" style={[s.bold, s.mr2, pal.text]}> {view.followersCount} </Text> - <Text type="body2" style={[pal.textLight]}> + <Text type="md" style={[pal.textLight]}> {pluralize(view.followersCount, 'follower')} </Text> </TouchableOpacity> @@ -224,19 +224,19 @@ export const ProfileHeader = observer(function ProfileHeader({ testID="profileHeaderFollowsButton" style={[s.flexRow, s.mr10]} onPress={onPressFollows}> - <Text type="body2" style={[s.bold, s.mr2, pal.text]}> + <Text type="md" style={[s.bold, s.mr2, pal.text]}> {view.followsCount} </Text> - <Text type="body2" style={[pal.textLight]}> + <Text type="md" style={[pal.textLight]}> following </Text> </TouchableOpacity> ) : undefined} <View style={[s.flexRow, s.mr10]}> - <Text type="body2" style={[s.bold, s.mr2, pal.text]}> + <Text type="md" style={[s.bold, s.mr2, pal.text]}> {view.postsCount} </Text> - <Text type="body2" style={[pal.textLight]}> + <Text type="md" style={[pal.textLight]}> {pluralize(view.postsCount, 'post')} </Text> </View> @@ -255,7 +255,7 @@ export const ProfileHeader = observer(function ProfileHeader({ icon={['far', 'eye-slash']} style={[pal.text, s.mr5]} /> - <Text type="body2" style={[s.mr2, pal.text]}> + <Text type="md" style={[s.mr2, pal.text]}> Account muted. </Text> </View> diff --git a/src/view/com/util/EmptyState.tsx b/src/view/com/util/EmptyState.tsx index d9a317fae..5cede14a9 100644 --- a/src/view/com/util/EmptyState.tsx +++ b/src/view/com/util/EmptyState.tsx @@ -29,7 +29,7 @@ export function EmptyState({ /> )} </View> - <Text type="body1" style={[pal.textLight, styles.text]}> + <Text type="xl" style={[pal.textLight, styles.text]}> {message} </Text> </View> diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx index 1e7b90506..aacdc3272 100644 --- a/src/view/com/util/Link.tsx +++ b/src/view/com/util/Link.tsx @@ -58,7 +58,7 @@ export const Link = observer(function Link({ }) export const TextLink = observer(function Link({ - type = 'body1', + type = 'md', style, href, text, diff --git a/src/view/com/util/PostEmbeds.tsx b/src/view/com/util/PostEmbeds.tsx index 5e01f8628..8d2bc6f33 100644 --- a/src/view/com/util/PostEmbeds.tsx +++ b/src/view/com/util/PostEmbeds.tsx @@ -92,21 +92,18 @@ export function PostEmbeds({ /> )} <View style={styles.extInner}> - <Text - type="body2" - numberOfLines={2} - style={[pal.text, styles.extTitle]}> + <Text type="sm-bold" numberOfLines={2} style={[pal.text]}> {link.title || link.uri} </Text> <Text - type="body2" + type="sm" numberOfLines={1} style={[pal.textLight, styles.extUri]}> {link.uri} </Text> {link.description ? ( <Text - type="body2" + type="sm" numberOfLines={2} style={[pal.text, styles.extDescription]}> {link.description} @@ -140,9 +137,6 @@ const styles = StyleSheet.create({ extImageFallback: { height: 160, }, - extTitle: { - fontWeight: '600', - }, extUri: { marginTop: 2, }, diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx index 8e1a900d7..241480323 100644 --- a/src/view/com/util/PostMeta.tsx +++ b/src/view/com/util/PostMeta.tsx @@ -40,16 +40,16 @@ export function PostMeta(opts: PostMetaOpts) { style={[styles.metaItem, styles.maxWidth]} href={opts.authorHref} title={opts.authorHandle}> - <Text type="h5" style={[pal.text]} numberOfLines={1}> + <Text type="lg-bold" style={[pal.text]} numberOfLines={1}> {displayName} {handle ? ( - <Text type="h6" style={[pal.textLight]}> + <Text type="md" style={[pal.textLight]}> {handle} </Text> ) : undefined} </Text> </Link> - <Text type="h6" style={[styles.metaItem, pal.textLight]}> + <Text type="md" style={[styles.metaItem, pal.textLight]}> · {ago(opts.timestamp)} </Text> </View> diff --git a/src/view/com/util/UserInfoText.tsx b/src/view/com/util/UserInfoText.tsx index d9f8cbf27..db6696a9b 100644 --- a/src/view/com/util/UserInfoText.tsx +++ b/src/view/com/util/UserInfoText.tsx @@ -8,7 +8,7 @@ import {useStores} from '../../../state' import {TypographyVariant} from '../../lib/ThemeContext' export function UserInfoText({ - type = 'body1', + type = 'md', did, attr, loading, diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index ab80bd854..07f7bc22f 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -68,12 +68,12 @@ export const ViewHeader = observer(function ViewHeader({ )} </TouchableOpacity> <View style={styles.titleContainer} pointerEvents="none"> - <Text type="h4" style={[pal.text, styles.title]}> + <Text type="title" style={[pal.text, styles.title]}> {title} </Text> {subtitle ? ( <Text - type="h5" + type="title-sm" style={[styles.subtitle, pal.textLight]} numberOfLines={1}> {subtitle} diff --git a/src/view/com/util/error/ErrorMessage.tsx b/src/view/com/util/error/ErrorMessage.tsx index ee31ad2cb..684e93fca 100644 --- a/src/view/com/util/error/ErrorMessage.tsx +++ b/src/view/com/util/error/ErrorMessage.tsx @@ -31,7 +31,7 @@ export function ErrorMessage({ <FontAwesomeIcon icon="exclamation" style={pal.text} size={16} /> </View> <Text - type="body2" + type="sm" style={[styles.message, pal.text]} numberOfLines={numberOfLines}> {message} diff --git a/src/view/com/util/error/ErrorScreen.tsx b/src/view/com/util/error/ErrorScreen.tsx index 0033195d9..0500b206d 100644 --- a/src/view/com/util/error/ErrorScreen.tsx +++ b/src/view/com/util/error/ErrorScreen.tsx @@ -36,14 +36,14 @@ export function ErrorScreen({ /> </View> </View> - <Text type="h3" style={[styles.title, pal.text]}> + <Text type="title-lg" style={[styles.title, pal.text]}> {title} </Text> <Text style={[styles.message, pal.textLight]}>{message}</Text> {details && ( <Text testID={`${testID}-details`} - type="body2" + type="sm" style={[ styles.details, pal.textInverted, diff --git a/src/view/com/util/text/RichText.tsx b/src/view/com/util/text/RichText.tsx index 2a42d26ae..a7bc92a45 100644 --- a/src/view/com/util/text/RichText.tsx +++ b/src/view/com/util/text/RichText.tsx @@ -15,21 +15,23 @@ type Entity = { } export function RichText({ - type = 'body1', + type = 'md', text, entities, + lineHeight = 1.2, style, numberOfLines, }: { type?: TypographyVariant text: string entities?: Entity[] + lineHeight?: number style?: StyleProp<TextStyle> numberOfLines?: number }) { const theme = useTheme() const pal = usePalette('default') - const lineHeightStyle = lh(theme, type, 1.2) + const lineHeightStyle = lh(theme, type, lineHeight) if (!entities?.length) { if (/^\p{Extended_Pictographic}+$/u.test(text) && text.length <= 5) { style = { diff --git a/src/view/com/util/text/Text.tsx b/src/view/com/util/text/Text.tsx index 549eb2901..c3a8a2194 100644 --- a/src/view/com/util/text/Text.tsx +++ b/src/view/com/util/text/Text.tsx @@ -8,7 +8,7 @@ export type CustomTextProps = TextProps & { } export function Text({ - type = 'body1', + type = 'md', children, style, ...props |