HabitRPG/habitrpg — pull request #3799 by Alys (2014-07-28 23:25:52+00:00)
Title: apply contributor tier color to avatar name - fixes https://github.com/HabitRPG/habitrpg/issues/3735#issuecomment-48915822

Do not merge this until https://github.com/HabitRPG/habitrpg/pull/3792 ["show more avatar background (remove Lvl, hide avatar name)"] has been merged! I based this branch on the branch for that change, since the same code is being modified. If https://github.com/HabitRPG/habitrpg/pull/3792 is rejected, I can re-do this change.

Note: Ben suggested (sensibly) that the level indicators should NOT have the tier colour, since level and tier aren't related, but I've left the colour on the levels because I think it looks nice with the name and level matching, and I thought the aesthetics might be more important than logic in this case. See the final screenshot for what it's like with grey levels. If you prefer grey levels, it's a very simple fix - in views/shared/header/avatar.jade change .avatar-level(ng-class='userLevelStyle(profile)') to .avatar-level

@benmanley: I changed the way that the avatar names are inserted into the page. Instead of .herobox:after with a "content" attribute, it's now .avatar-name (very similar to the pre-existing .avatar-level code), but maybe there was a good reason for using .herobox:after? I've also reorderd the various styles to put all name/level styles together and simplified the comments. If any of that isn't okay, I can re-do the change. I also made whitespace more consistent in a couple of unrelated places (tabs, not spaces).

**default state (user is not hovering):**
![1](https://cloud.githubusercontent.com/assets/1495809/3728632/93a4e8c6-16ad-11e4-9e0c-d1e96a31c685.png)

**user hovers over a party member to show name:**
![2](https://cloud.githubusercontent.com/assets/1495809/3728633/93bbf7dc-16ad-11e4-85a0-ada9cc59ac36.png)

**user has a background so name is hidden by default (user is not hovering) - see https://github.com/HabitRPG/habitrpg/pull/3792 for details:**
![3](https://cloud.githubusercontent.com/assets/1495809/3728634/93bccafe-16ad-11e4-9e9f-568096d23579.png)

**user hovers over own avatar to show name:**
![4](https://cloud.githubusercontent.com/assets/1495809/3728635/93bef8e2-16ad-11e4-835d-7e011fa3be9a.png)

**what it looks like when levels are grey:**
![5](https://cloud.githubusercontent.com/assets/1495809/3728631/939ed116-16ad-11e4-8534-09ea134a1160.png)