Improve the design of the post locking modal

[javierarce]

I've noticed that the post locking modal presents some design problems we could address.

1. There's a big empty space before the message.
2. The username of the locked post is difficult to read. Highlighting it would improve its readability.
3. The action buttons don't have a clear hierarchy (the tertiary action is sandwiched between the primary and the secondary ones).
4. We could explain what happens if the user decides to take over the post.
5. The modal that shows the other user's avatar doesn't show the username.

Here's a design proposal for this popover:

Besides addressing the problems I've mentioned earlier, I've made some other changes:

1. I got rid of the dot at the end of the title and the redundant "User", and removed the title case of the "take over" button.
2. Since "taking over" is disruptive, I de-emphasize it and transformed it into a secondary action.
3. I right-aligned the actions and fixed the paddings.

Figma file

[karmatosed]

First, I love that this is getting some attention @javierarce so ✨ there.

I wonder though, could we go further? The bit that really gets me is the 2 actions on the same level. I understand they are a primary, secondary and tertiary style but they just feel so not great together. What could be the option to soothe that line of 'preview/take over/ exit the editor'?

[jasmussen]

Vast improvements. To echo Tammie a bit, I'd use at most two styles of buttons, for example primary and tertiary, or just three tertiary buttons.

Good call unifying the case of "Take over", as we don't use titlecase in the editor. In that vein, should "Editor" be lowercase? Can it be simplified to "Exit editor" or perhaps even to just "Exit"?

[javierarce]

Thanks, @karmatosed & @jasmussen! I've refined the design using your feedback:

• To simplify the action row, I integrated the preview link inside the description.
• I changed "Exit the Editor" to "Exit editor" (I think writing just "Exit" could be confused with closing the modal)

From the two options on the bottom, I think the one on the left side (a tertiary plus a primary button) looks better and makes a better distinction between the options.

[jasmussen]

That looks great, I especially like the primary + tertiary one. I wonder, instead of linking "on this post" we could just output "(preview)" in parenthesis after?

As a note to self mostly, it looks like the external link icon needs a figma update to become fill instead of outlines, as when scaled down the stroke should become a bit thinner as well.

[javierarce]

That looks great, I especially like the primary + tertiary one. I wonder, instead of linking "on this post" we could just output "(preview)" in parenthesis after?

Good idea, let's try that, it'll be more clear.

As a note to self mostly, it looks like the external link icon needs a figma update to become fill instead of outlines, as when scaled down the stroke should become a bit thinner as well.

True. Momentarily, I've updated the line weight on my Figma file.

[karmatosed]

@javierarce that's vastly better, thank you for taking the critique and running with it. I'd say because it's so much better now and we can always build up.

[jasmussen]

I've started work in #37821, but note that many of the important details shown in the mockups above are not yet implemented, as some of the localization work can get gnarly. I'd appreciate help from anyone with skill in this area: feel free to push directly to the branch if you like.

[Mamaduka]

I created another follow-up PR to fix user avatar and display name issues.

What are the remaining items to close this issue?

[jasmussen]

I'll let Javier catch any details I missed, but it looks like there's an added paragraph: "If you take over, the other user will lose editing control to the post, but their changes will be saved."

[spacedmonkey]

Related: #37789

[javierarce]

I'll let Javier catch any details I missed, but it looks like there's an added paragraph: "If you take over, the other user will lose editing control to the post, but their changes will be saved."

Yes, I think that is the only thing left to close this issue.

[Mamaduka]

I will create the last PR for design changes shortly. We #37914 can merge separately.

[Mamaduka]

@javierarce this is how modal looks after applying remaining changes, including @jasmussen suggestion for avatar on top of the latest fixes.

[javierarce]

@Mamaduka would it be possible to place all the text on the same column? It would look cleaner.