diff --git a/native/navigation/invite-link-modal.react.js b/native/navigation/invite-link-modal.react.js --- a/native/navigation/invite-link-modal.react.js +++ b/native/navigation/invite-link-modal.react.js @@ -71,12 +71,24 @@ const header = React.useMemo(() => { if (invitationDetails.status === 'valid' && linkStatus === 'valid') { + let additionalCommunityDescription = null; + if (invitationDetails.thread) { + additionalCommunityDescription = ( + <> + within + + {invitationDetails.community.name} + + + ); + } + const targetName = + invitationDetails.thread?.name ?? invitationDetails.community.name; return ( <> You have been invited to join - - {invitationDetails.community.name} - + {targetName} + {additionalCommunityDescription} ); } @@ -92,7 +104,8 @@ ); }, [ invitationDetails, - styles.communityName, + styles.threadName, + styles.communityIntro, styles.invalidInviteExplanation, styles.invalidInviteTitle, styles.invitation, @@ -193,7 +206,16 @@ lineHeight: 22, marginBottom: 24, }, - communityName: { + communityIntro: { + color: 'whiteText', + textAlign: 'center', + fontSize: 14, + fontWeight: '400', + lineHeight: 22, + marginBottom: 24, + marginTop: 16, + }, + threadName: { color: 'whiteText', textAlign: 'center', fontSize: 18, diff --git a/web/invite-links/accept-invite-modal.css b/web/invite-links/accept-invite-modal.css --- a/web/invite-links/accept-invite-modal.css +++ b/web/invite-links/accept-invite-modal.css @@ -22,6 +22,7 @@ line-height: var(--line-height-display); font-weight: var(--semi-bold); color: var(--fg); + word-break: break-word; } .text { diff --git a/web/invite-links/accept-invite-modal.react.js b/web/invite-links/accept-invite-modal.react.js --- a/web/invite-links/accept-invite-modal.react.js +++ b/web/invite-links/accept-invite-modal.react.js @@ -65,10 +65,24 @@ let content; if (verificationResponse.status === 'valid' && linkStatus === 'valid') { const { community } = verificationResponse; + let additionalCommunityDescription = null; + if (verificationResponse.thread) { + additionalCommunityDescription = ( +
+
within
+
{community.name}
+
+ ); + } + const targetName = + verificationResponse.thread?.name ?? verificationResponse.community.name; content = ( <> -
You have been invited to join
-
{community.name}
+
+
You have been invited to join
+
{targetName}
+
+ {additionalCommunityDescription}