first pass at making things visually distinct if there are notifications

frontend/templates/base.html

@@ -85,7 +85,7 @@
                 <div class="js-topmenu" id="authenticated">
                     <ul class="menu">
                         <li>
-                            <a href="#"><span id="welcome">{{ user.username }}</span></a>
+                            <a href="#"><span id="welcome">Hi, {{ user.username }} {% if unseen_count %}<img src="/static/images/menu_bar_down_arrow.png">{% endif %}</span></a>
                         </li>
                         <ul id="user_menu">
                             <li><a href="{% url supporter supporter_username=user.username %}">Wishlist</a></li>
@@ -103,8 +103,6 @@
                             <li><a href="{% url auth_logout %}"><span>Sign Out</span></a></li>
                         </ul>
                         <li>
-                            {% comment %}
-                            {% endcomment %}
                             {% if supporter.profile.pic_url %}
                                 <img class="user-avatar" src="{{ supporter.profile.pic_url }}" height=36 width="36" alt="Picture of {{ supporter }}" title="{{ supporter }}" />
                             {% else %}

static/css/sitewide.css

@@ -612,6 +612,15 @@ ul.menu {
   float: right;
   margin-top: 25px;
 }
+.js-topmenu#authenticated {
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  height: 36px;
+}
 .js-topmenu#authenticated:hover,
 .js-topmenu#authenticated.highlight {
   background: #d6dde0;
@@ -686,6 +695,9 @@ ul.menu {
   padding: 0 10px;
   margin-right: 5px;
 }
+.js-topmenu ul li span#welcome img {
+  vertical-align: middle;
+}
 .js-topmenu ul li img {
   padding: 0;
   margin: 0;

static/less/sitewide.less

@@ -267,12 +267,17 @@ ul.menu{
     float:right;
     margin-top:25px;
 
+    &#authenticated {
+        .one-border-radius(5px);
+        height: 36px;
+    }
+    
     &#authenticated:hover, &#authenticated.highlight {
         background: @blue-grey;
         cursor: pointer;
         position: relative;
     }
-
+    
     ul {
         &#user_menu {
             display: none;
@@ -320,7 +325,11 @@ ul.menu{
                 color:@green;
                 .header-text;
                 padding: 0 10px;
-                margin-right: 5px;                
+                margin-right: 5px;    
+                
+                img {
+                    vertical-align: middle;
+                }
             }
             
             img {