Put display name and handle on one line in invite dialog (#10824)
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user