Put display name and handle on one line in invite dialog (#10824)

This commit is contained in:
DS Boyce
2026-06-10 09:17:09 -07:00
committed by GitHub
parent a69836216c
commit 90f8fe59ba
+41 -33
View File
@@ -197,8 +197,7 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
return (
<>
<ChainLinkBrokenIcon fill={t.palette.primary_500} size="3xl" />
<Text
style={[a.text_center, a.text_lg, a.font_semi_bold, t.atoms.text]}>
<Text style={[a.text_center, a.text_lg, a.font_semi_bold]}>
<Trans>This invite link is invalid</Trans>
</Text>
<Button
@@ -278,7 +277,7 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
return (
<>
<View style={[a.py_lg, a.align_center]}>
<View style={[a.w_full, a.py_lg, a.align_center]}>
<AvatarBubbles
profiles={[
joinLinkPreview.owner,
@@ -287,7 +286,7 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
self
size={135}
/>
<View style={[a.gap_sm, a.align_center, a.mt_lg]}>
<View style={[a.w_full, a.gap_sm, a.align_center, a.mt_lg]}>
<View>
<Text
style={[
@@ -299,14 +298,12 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
]}>
<Trans>Group chat</Trans>
</Text>
<Text
style={[a.text_center, a.text_3xl, a.font_bold, t.atoms.text]}>
<Text style={[a.text_center, a.text_3xl, a.font_bold]}>
{joinLinkPreview.name}
</Text>
</View>
<View style={[a.flex_row, a.align_center]}>
<Text
style={[a.text_center, a.text_xs, a.leading_snug, t.atoms.text]}>
<Text style={[a.text_center, a.text_xs, a.leading_snug]}>
<Trans comment="The number of active group chat members out of the total number allowed.">
{joinLinkPreview.memberCount}/{joinLinkPreview.memberLimit}{' '}
members
@@ -315,32 +312,40 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
<View style={[a.flex_row, a.ml_md]}>
<PersonGroupIcon size="xs" style={[a.mr_xs, t.atoms.text]} />
</View>
<Text
style={[a.text_center, a.text_xs, a.leading_snug, t.atoms.text]}>
<Text style={[a.text_center, a.text_xs, a.leading_snug]}>
{joinLinkPreview.joinRule === 'followedByOwner'
? l`Followers can join`
: l`Anyone can join`}
</Text>
</View>
<View>
<View
style={[a.flex_row, a.gap_xs, a.align_center, a.justify_center]}>
<Text
emoji
style={[
a.mb_2xs,
a.text_center,
a.text_sm,
a.leading_snug,
a.font_semi_bold,
t.atoms.text,
]}>
<View
style={[
a.px_2xl,
a.w_full,
a.flex_row,
a.gap_xs,
a.align_center,
a.justify_center,
]}>
<Text
emoji
style={[
a.flex_shrink,
a.text_center,
a.text_sm,
a.leading_snug,
a.font_semi_bold,
web({minWidth: 0}),
]}
numberOfLines={1}>
<Trans comment="The group chat creator, in the format 'By {displayName}'.">
By{' '}
<InlineLinkText
label={`@${joinLinkPreview.owner.handle}`}
to={makeProfileLink(joinLinkPreview.owner)}
style={[
a.mb_2xs,
a.flex_shrink,
a.leading_snug,
a.text_sm,
a.font_semi_bold,
t.atoms.text,
@@ -368,20 +373,23 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
),
)}
</InlineLinkText>
</Text>
<ProfileBadges
profile={joinLinkPreview.owner}
size="sm"
style={{marginTop: -3}}
/>
</View>
</Trans>
</Text>
<ProfileBadges
profile={joinLinkPreview.owner}
size="sm"
style={{marginTop: -3}}
/>
<Text
style={[
a.flex_shrink,
a.text_center,
a.text_xs,
a.leading_snug,
a.text_sm,
t.atoms.text_contrast_high,
]}>
web({minWidth: 0}),
]}
numberOfLines={1}>
{sanitizeHandle(joinLinkPreview.owner.handle, '@')}
</Text>
</View>