zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Rework all typography

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

4
src/view/com/composer/Autocomplete.tsx
View file

@ -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}>
&nbsp;@{item.handle}
</Text>
</Text>

9
src/view/com/composer/ComposePost.tsx
View file

@ -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',

2
src/view/com/composer/Prompt.tsx
View file

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

2
src/view/com/discover/SuggestedFollows.tsx
View file

@ -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}>

40
src/view/com/post-thread/PostThreadItem.tsx
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: {

14
src/view/com/post/Post.tsx
View file

@ -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}} />

24
src/view/com/posts/FeedItem.tsx
View file

@ -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,

2
src/view/com/profile/ProfileCard.tsx
View file

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

2
src/view/com/profile/ProfileFollowers.tsx
View file

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

2
src/view/com/profile/ProfileFollows.tsx
View file

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

18
src/view/com/profile/ProfileHeader.tsx
View file

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

2
src/view/com/util/EmptyState.tsx
View file

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

2
src/view/com/util/Link.tsx
View file

@ -58,7 +58,7 @@ export const Link = observer(function Link({
})
export const TextLink = observer(function Link({
type = 'body1',
type = 'md',
style,
href,
text,

12
src/view/com/util/PostEmbeds.tsx
View file

@ -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,
},

6
src/view/com/util/PostMeta.tsx
View file

@ -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]}>
&nbsp;{handle}
</Text>
) : undefined}
</Text>
</Link>
<Text type="h6" style={[styles.metaItem, pal.textLight]}>
<Text type="md" style={[styles.metaItem, pal.textLight]}>
&middot; {ago(opts.timestamp)}
</Text>
</View>

2
src/view/com/util/UserInfoText.tsx
View file

@ -8,7 +8,7 @@ import {useStores} from '../../../state'
import {TypographyVariant} from '../../lib/ThemeContext'
export function UserInfoText({
type = 'body1',
type = 'md',
did,
attr,
loading,

4
src/view/com/util/ViewHeader.tsx
View file

@ -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}

2
src/view/com/util/error/ErrorMessage.tsx
View file

@ -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}

4
src/view/com/util/error/ErrorScreen.tsx
View file

@ -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,

6
src/view/com/util/text/RichText.tsx
View file

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

2
src/view/com/util/text/Text.tsx
View file

@ -8,7 +8,7 @@ export type CustomTextProps = TextProps & {
}
export function Text({
type = 'body1',
type = 'md',
children,
style,
...props