Adjust clickable target area in auth widget and style sign-out menu

[sssoleileraaa]

Description

Remaining work for auth widget from #264

• Make clicking on journalist's name trigger the sign-out drop-down menu (Make clicking on journalist's name trigger the sign-out drop-down menu  #298)
• Match clickable target area to highlighted spec below
• Make sign-out menu white with an arrow pointing from drop-down menu

Once specific colors are decided on:

• Make journalist username's font color a lighter during hover-over action
• Change color of highlighted menu option

Auth widget selected:

Auth widget clicked:

[sssoleileraaa]

Try to use these colors when creating placeholders for final colors:

https://app.zeplin.io/project/5c807ea562f734bd2756b243/screen/5c9d42bec4045605c4a2142c

[ninavizz]

Note: dotted-pink line and yellow highlight, were part of my annotations—not part of the intended design. 😄

[sssoleileraaa]

This task can be marked as done once PR #293 gets merged:

• Make clicking on journalist's name trigger the sign-out drop-down menu

[eloquence]

I've updated the issue description per Nina's comment, and transformed the tasks into a checklist.

Ensuring that the clickable area matches the spec (and having a mouse cursor affordance for same - #415) is IMO especially important for usability. Right now, clicking the initials does not open the drop down menu.

[eloquence]

Adjusting the clickable target area to include the initials is a nice candidate issue for @ntoll so keeping on milestone for now.

[eloquence]

As clarified in #850 the sign-out design in this issue is outdated. #976 has improved the clickable target area, but is not fully to spec. I'm going to close this issue and open a new tightly scoped one to further tweak the click target area.