Add border around avatar to identify their cursor color

[jasonrudolph]

Closes #338

Depends on atom/teletype-client#61

---

Description of the Change

This pull request implements the design shown in #338 (comment).

In the screenshot below, we see the addition of colored borders around some avatars. When a participant's cursor appears in the current editor, the avatar will now have a border with a color that matches the user's cursor color.

Verification Process

• Border shown when another collaborator is typing in the same editor
• Border not shown when another collaborator is typing in a different editor
• Border appears again when collaborator navigates to the editor you're currently viewing and begins typing or selecting
• Border not shown when another collaborator is viewing a non-portal item (e.g., the settings view)
• Border not shown when another collaborator has a retracted tether
• Up to 15 sites can have unique cursor colors

TODO

• Implement preliminary functionality
• Reduce duplication in CSS re: site colors (e.g., cursor color for site 6 vs. avatar border color for site 6)
• Update tests to exercise this new behavior
• Define and execute verification process

[jasonrudolph]

@simurai: I took a first pass at the CSS for this pull request, but I'd love to get your eyes on it. Would you mind taking a look to see if there's anything we should change? Feel free to push any recommended changes to this branch.

One thing in particular that I'd like help with is the way the link icon is rendered in relation to the border. It's difficult to explain in words, but hopefully the screenshot below gives you an idea of the issue:

Is there a way that we can improve that?

[simurai]

the way the link icon is rendered in relation to the border.

Moved the icon a bit to better cover the site border:

[jasonrudolph]

Thanks for those updates, @simurai. They look great! ⚡

[jasonrudolph]

Some light stress testing...