Hightlighting the down-arrow next to user name on hover

[ssrihari]

• the right-arrow wasn't highlighted on hover, which was
  inconsistent with the other header items
• changed the user-menu items highlight color from #fff to #fafafa, which is
  consistent across the header
• refactored the css to reduce specificity
• refactored css to use nesting in class names instead of nesting in
  scss (as advocated by http://smacss.com) to reduce specificity and
  to enhance readability

[jhass]

Hm, so reduced specificity at the CSS level comes at the cost of increased redundancy at the HTML level.

[ssrihari]

Yes, there is some redundancy in the class names. However, I do see some value in it here. For instance, user-menu-trigger isn't a user-menu-item even though they are both sibling <li>s. And if I had to add another <li> in the same <ul> which isn't a user-menu-item, I can differentiate it in the class. This way, the redundant class makes the html more semantic.

[ssrihari]

Before:
[No highlight on hover of <li>]

[Highlight only name on hover of name] [Also, uses #fff as highlight color]

After:
[Highlight both][Uses #fafafa as highlight color, which is used across the header]

[jhass]

Can you please rebase against the latest develop branch?

git remote add upstream git://github.com/diaspora/diaspora.git
git checkout develop
git pull upstream develop
git checkout user-menu-highlight
git rebase develop
# You now got a merge conflict, git status will tell on which files. Either run git mergetool or manually open the files, resolve the conflict and run git add on them. Finally run git rebase --continue
git push -f origin user-menu-highlight

[jhass]

Thank you!