Add date separators

[gnprice]

Fixes: #173

This is a draft because it needs tests and also some cleanups in the code. But from a user perspective it already works great — so I'm sharing this in order to get feedback on the visual design. As mentioned at #173 (comment) , I don't see an existing design for this in Figma, so for a first draft I've taken what's in web and adapted it.

Design questions

• In web the dates have color hsl(0deg 0% 15% / 75%), which is the same as the dates in the recipient headers. Here, our dates in recipient headers are lighter than that: they're black with 40% alpha. So I used that color for these, though it makes the dates lighter than in web. @terpimost do you think this is the color we want?
• In web the dates are slightly smaller in the date separators than they are in the recipient headers. But the CSS that results in this on the recipient headers side looks like a bug: there's both a calc(12em / 14) and a calc(15em / 14) applying multiplicatively. (This bug illustrates why in the CSS for zulip-mobile's webview, we use rem and not em.) So I'm not sure that difference is intended, and in this draft I've made the size the same as in the recipient headers.
• The vertical alignment here is just that everything's centered. But that seems to get the dividers a bit too high compared to the text. I'll have to fiddle with this (perhaps by adjusting the text's line-height). I fixed this by adding some bottom padding to the text.

Other adjustments from web

• In web the dates and timestamps are 10px from the right, but in the current design they're 16px in. So I put this at 16px to match.
• In web there's 2px horizontal padding before and after each divider line (though web's implementation of that is a bit complex). I copied that.
• I made the dividers one physical pixel tall (not one logical pixel, which would typically be several physical pixels).
• I made the dividers black, like in web.

Screenshot

Here's a screenshot of the current revision:

[gnprice]

I've pushed a revision that adjusts the vertical alignment between the text and the divider lines.

I also edited the PR description with another design question, one I'd forgotten about when I first posted the PR, about the font size for the dates compared to the dates in recipient headers.

[gnprice]

I un-marked this as draft too hastily before re-reading what I'd said above about why it's a draft 🙂. I'll do those cleanups and tests now.

[gnprice]

OK, now actually ready.

There are still a couple of design questions open (mentioned above in the PR description), but they're pretty subtle — so I think the best thing is to go ahead and merge without worrying about those, and we can always adjust later if @terpimost has comments once he's back.

[chrisbobbe]

Thanks, LGTM! Merged.