Clean up UX some more

[chadwhitacre]

Part of #4305, follows on #4410.

• asterisk-out email addresses, ya?—let's wait for demand, these are all public in the npm registry
• still getting a fouc on claim form?
• add a nice mail icon for current selection in dropdown
• add a nice dropdown arrow icon
  • highlight that instead of name on hover when closed
• implement status icons
  • primary → feature
  • verified → success
  • unverified → [none]
  • unlinked → warning
  • other → failure
• implement disabled (for emails linked to other accounts)
  • disable Apply button when there are no "Ready to link" emails
• if only one email, treat differently?
  • no radio dropdown?
  • no i?
• double-check .details (grep it)
• make the Sign In button bigger, too
• cross-browserize
• seeing an off-by-one in hover state while scrolling? … bumped to Robustify custom select #4415

[chadwhitacre]

91e6e45:

[chadwhitacre]

aad63ce:

[chadwhitacre]

Actually, I'm not sure the status icons work here. On the project listing there is a profile pic to take most of the visual weight. Here we don't have that, so the status icons pop ... too much, I think.

[chadwhitacre]

Okay. a79240d implements status icons for the most important statuses. Unlinked accounts don't have an icon.

On a different account:

[chadwhitacre]

Actually, how about warning for half-linked? 3dd13da

[chadwhitacre]

4b9fb97:

[chadwhitacre]

Started hacking on disabling items in e7b90e3, will pick up with that next time.

[chadwhitacre]

Re: af443c9, looks like text-overflow: ellipsis can violate the padding.

[chadwhitacre]

???

[chadwhitacre]

Opacity generates a new stacking context.

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

[chadwhitacre]

I tried obfuscating emails in 47eeb4c, but it looks weird. In addition to being public info, this view is also only for auth'd users.

---

---

[chadwhitacre]

Let's punt on treating single emails differently. A select is still a select with only one item.

[EdOverflow]

I tried obfuscating emails in 47eeb4c, but it looks weird. In addition to being public info, this view is also only for auth'd users.

I agree that there is no real need for obfuscation in this particular instance, but I just wanted to say that I prefer the asterisks over the dashes. 😉

[chadwhitacre]

Haven't checked in IE but working in recent Chrome, FF, Safari. Haven't checked on mobile but let's do that on a different PR.

[chadwhitacre]

I really wanna make that sign-in button bigger, because it's the first impression people are going to have of Gratipay, and it just looks goofy not to match the "Apply to receive payments" button on the inside. But it's complicated because it's a template include that we use in a half dozen places and we'll need to generalize it to be able to have a large version. But then we can also use the large version on the 401 page which could potentially help address #4270.

[chadwhitacre]

Aright, macro in 89c5789 ... derp, broken. :-/

Sooo ... fix that, then I'm looking at enlargening the button for the npm package page. There's already a class large in buttons.scss that's not used anywhere that I can see. But there is a larger class that's used but not defined. 🤦‍♂️

[chadwhitacre]

not used anywhere

Sike, we're using it for the "Apply to accept payments" button.

I think I'm going to hack this in pages/package.scss to avoid cross-contamination with the sign-in dropdown in the header.

[chadwhitacre]

... which means we don't need the macro.

[chadwhitacre]

Well, maybe it helps.

[chadwhitacre]

cd2f10c

---

[chadwhitacre]

seeing an off-by-one in hover state while scrolling?

Steps:

1. Load a package with lots of emails, such as kine.
2. Open select.
3. Scroll and move mouse until you see the mouse hovering over one item but the adjacent element (above? always above?) highlighted instead.

Expected

Item under mouse is always highlighted.

Actual

Adjacent is highlighted. ☺️

[chadwhitacre]

Rebased, was cd2f10c.

[chadwhitacre]

Rebased to pick up 47ad781 in #4410, was 1c6ad4b.