Page MenuHomePhabricator

[web][native] Update invite link copy
ClosedPublic

Authored by tomek on Jul 4 2023, 7:26 AM.
Tags
None
Referenced Files
F3388436: D8423.diff
Fri, Nov 29, 2:19 PM
Unknown Object (File)
Mon, Nov 25, 2:53 PM
Unknown Object (File)
Wed, Nov 13, 6:30 PM
Unknown Object (File)
Sun, Nov 10, 12:32 PM
Unknown Object (File)
Mon, Nov 4, 6:06 AM
Unknown Object (File)
Oct 20 2024, 9:04 PM
Unknown Object (File)
Oct 19 2024, 10:31 AM
Unknown Object (File)
Oct 19 2024, 10:31 AM
Subscribers

Details

Summary

Solves https://linear.app/comm/issue/ENG-4304/update-invite-links-copy

  1. web/invite-links/accept-invite-modal.react.js
    1. buttons in Comm typically don't capitalize every word. "Accept Invite" should probably be "Accept invite"
      1a.png (766×956 px, 44 KB)
    2. the string "This invite link may be expired, please try again with another invite link" contains a grammatical error called a "comma splice". perhaps it should be replaced with two sentences: "This invite link may be expired. Please try again with another invite link"
      1b.png (688×1 px, 51 KB)
  2. web/invite-links/invite-links-menu.react.js
    1. buttons shouldn't capitalize every word. "Invite Link" should probably be "Invite link"
      2.png (232×422 px, 17 KB)
  3. web/invite-links/view-invite-link-modal.react.js
    1. I worry about including user-generated content in modal titles. "Invite people to ${resolvedThreadInfo.uiName}" could perhaps just be "Invite link"? this one is hard to judge without a screenshot... would it be confusing to not see the community name anywhere?
      3a.png (530×924 px, 51 KB)
      3a2.png (554×1 px, 54 KB)
    2. I'd like to replace "Use this public link to invite your friends into the community!" with "Share this invite link with your friends to help them join your community!", but I'm not sure if it's too long. would like to see a screenshot
      3b.png (540×1 px, 58 KB)
  4. native/invite-links/invite-links-button.react.js
    1. buttons shouldn't capitalize every word. "Invite Link" should probably be "Invite link", and "Manage Invite Links" should be "Manage invite links"
      4.png (195×400 px, 25 KB)
  5. native/navigation/invite-link-modal.react.js
    1. buttons shouldn't capitalize every word. "Accept Invite" should probably be "Accept invite"
      5a.png (289×392 px, 17 KB)
    2. "This invite link may be expired, please try again with another invite link" contains a comma splice". we should update it to match my recommendation on web above. (separately, should we store this copy somewhere in lib to avoid copy-pasting between web and native?)
      5b.png (258×396 px, 18 KB)
  6. native/invite-links/view-invite-links-header-title.react.js
    1. same concern as web/invite-links/view-invite-link-modal.react.js above. can we avoid including the community name in the title?
      6.png (209×404 px, 17 KB)
      62.png (248×404 px, 15 KB)
  7. native/invite-links/invite-links-navigator.react.js
    1. "Public Link" should probably be "Public link". I think we take the same approach to capitalization of titles that we do with buttons
      7.png (486×406 px, 40 KB)
  8. native/invite-links/view-invite-links-screen.react.js
    1. same as web: "Use this public link to invite your friends into the community!" should be "Share this invite link with your friends to help them join your community!", if there is enough space for it
      8a.png (233×406 px, 16 KB)
  9. native/invite-links/manage-public-link-screen.react.js
    1. I think we can remove this sentence: "Members who have your community’s public link but have not joined will not able to with the disabled link." the Alert is already too long, and I think this should be obvious to the reader
      9a.png (239×267 px, 65 KB)
    2. "Other communities may also claim your previous public link url." <-- first of all, URL should always be capitalized. I think we can replace this with "Other communities will be able to claim the same URL."
      9b.png (234×263 px, 64 KB)
    3. the text that starts with "Let your community be more accessible" should be replaced: Invite links make it easy for your friends to join your community. Anybody who knows your community's invite link will be able to join it. Note that if you change your public link's URL, other communities will be able to claim the old URL.
      9c.png (458×402 px, 37 KB)

Depends on D8419

Test Plan

Check if the app still works, but most of the changes is only about changing text.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

tomek edited the summary of this revision. (Show Details)
tomek edited the summary of this revision. (Show Details)
tomek requested review of this revision.Jul 4 2023, 7:43 AM
ashoat requested changes to this revision.Jul 4 2023, 6:22 PM
ashoat added a subscriber: ted.

Thanks @tomek! Would accept if not for the ManagePublicLinkScreen issue... for that, I'd to review the updates before accepting

native/invite-links/manage-public-link-screen.react.js
86–89 ↗(On Diff #28384)

From the screenshot, this looks like too much text in a row. We could try separating out the third sentence into its own paragraph. We could also try showing the three sentences as three bullet points. @ted, any thoughts?

native/invite-links/view-invite-links-screen.react.js
82–83 ↗(On Diff #28384)

Let's try "Share this invite link to help your friends join your community!" – it looked too long in the screenshot on native

Can you share an updated screenshot? Curious to see if it fits in one line now

native/navigation/invite-link-modal.react.js
63 ↗(On Diff #28384)

After seeing the screenshot, I think it would be better to add a period to the end here so these are both full sentences

web/invite-links/accept-invite-modal.react.js
106–107 ↗(On Diff #28384)

After seeing the screenshot, I think it would be better to add a period to the end here so these are both full sentences

web/invite-links/view-invite-link-modal.react.js
24–25 ↗(On Diff #28384)

Let's try "Share this invite link to help your friends join your community!" – it looked too long in the screenshot on native

This revision now requires changes to proceed.Jul 4 2023, 6:22 PM

Address comments

native/invite-links/manage-public-link-screen.react.js
86–89 ↗(On Diff #28384)

In the original design, the last sentence was separated by an empty line. It probably makes sense to do the same here.

native-manage-newline.png (497×407 px, 38 KB)

native/invite-links/view-invite-links-screen.react.js
82–83 ↗(On Diff #28384)

native-view-link.png (218×409 px, 16 KB)

native/navigation/invite-link-modal.react.js
63 ↗(On Diff #28384)

native-invalid.png (255×395 px, 15 KB)

web/invite-links/accept-invite-modal.react.js
106–107 ↗(On Diff #28384)

web-invalid.png (644×952 px, 42 KB)

web/invite-links/view-invite-link-modal.react.js
24–25 ↗(On Diff #28384)

web-view-link.png (544×954 px, 44 KB)

Looks perfect! Thanks for iterating on this

native/invite-links/manage-public-link-screen.react.js
88 ↗(On Diff #28399)

I think it's considered bad practice to use whitespace characters (eg. spaces, newlines) to manage whitespace in HTML / JSX. Instead, we should separate into two separate Text blocks, and make sure the spacing between them is good via margin or padding. What do you think?

This revision is now accepted and ready to land.Jul 5 2023, 10:10 AM
native/invite-links/manage-public-link-screen.react.js
88 ↗(On Diff #28399)

Replied here: https://phab.comm.dev/D8419#inline-54191, but to make it shorter: I think that if we have to make the space between texts as high as one line then using newline / br is better. But if we are fine with having some fixed margin / gap, just like in almost all the other places, then newline / br should be avoided.

native/invite-links/manage-public-link-screen.react.js
88 ↗(On Diff #28399)

I think we should probably reduce the spacing here a little bit... one line of spacing is I think perhaps too much. I think we should avoid using \n\n

native/invite-links/manage-public-link-screen.react.js
88 ↗(On Diff #28399)

Replaced this in D8444 with a margin (can't wait for RN 0.71 where gap is introduced) of 12 and used two Text components instead of a single one with new line chars.

This revision was automatically updated to reflect the committed changes.