[client styling] Create and place auth widget

[ninavizz]

Epic: UX Parity between prototypes & coded client (#261)

This Story: Create and place auth widget
Within the "Functional Regions" mapping, is a widget to sign-in/sign-out, which is different from today's static button. This Issue is to simply get a widget in place; styling may be as rich or as basic as is deemed necessary to get the Epic satisfactorily complete.

Reference materials: Static spec uploaded to Zeplin (and shown in below PNGs)

---

Design Spec: See flat multi-state spec above! :)
"Active" Button Animation: LDS Ripple

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}

[ninavizz]

Note: Colors/HexValues will be added-in to Zeplin spec & here, following 14 March's VisDe review.

[ninavizz]

If possible to implement this WITH lowercase letterforms in the ID badge, and with a TBD font, that would be awesome.

I've been wavering between the necessity to do uppercase vs lowercase based on prior studies I did 13 years ago when at Yahoo!, but there are many more digital fonts available today... and based on how nicely the GitHub's chicklet labels look in this test Issue, I'm going to try to find a font that might work to keep these lowercase. Can't do until Thursday afternoon, tho.

[ninavizz]

^ BUMP @creviera... added into spec the "Sign In" pane w/ error message.

Per the acceptance criteria, "placement" is this Issue's goal—all styling optional, and a separate Issue will be created to nail that, after everything's been placed & made functional. 😃

[sssoleileraaa]

This issue can be closed by this PR: #278

I captured things left to do in these tickets:

• auth widget styling: Adjust clickable target area in auth widget and style sign-out menu #285
• refresh status bar: Create a top pane for refresh, messages, and errors #279
• login window: Hide main window and add offline mode link to login dialog #286

If I missed anything please add more tickets or update any of those.