UI tweaks on mention-unsubscribed warning

[gnprice]

This follows up on some of the UI points I noted in this comment before merging #4101: #4101 (comment)

Specifically, going through that comment in order:

• button shape/size in visual appearance -- done here
• button touch target to 48px (extending beyond visual button) -- still TODO
• no border -- done here
• background color -- still TODO
• text/background color contrast, for legibility -- done in Warn on @-mentioning someone who won't see it because not subscribed #4101 before merge
• cut animation -- done here
• use a nice slide-in animation instead -- still TODO

[agrawal-d]

Regarding the border, its present to separate multiple warnings.

[gnprice]

Regarding the border, its present to separate multiple warnings.

Yeah. As I say in the commit message:

When there are several of these banners, this means there won't be a
dividing line between them.  I tried that out and it looked fine.

Here's a screenshot:

When there are several banners, the effect is a lot like a Material list. A list like this one typically won't have dividers between the elements:

Place a divider between rows with lots of content, such as those with three-line lists.

[agrawal-d]

LGTM!

[chrisbobbe]

LGTM!

• button touch target to 48px (extending beyond visual button) -- still TODO

For this, we'll likely want to use the hitSlop prop of the component that gets the onPress prop. We may have to adjust the dimensions of its parent, too:

The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.

[gnprice]

Merged! Thanks for the reviews.

I've filed #4224 for the remaining followups here. Including the mention of hitSlop -- that sounds very helpful! I hadn't known about that one and had imagined doing it by having ZulipButton contain some padding inside the touchable while outside the part that looks like a button. I think that could work, but this sounds potentially simpler.