Refine user menu CSS

app/assets/stylesheets/common.css.scss

@@ -392,11 +392,17 @@ nav.secondary {
   position: absolute;
   right: 0;
 
-  > ul a {
+  > ul {
+    margin-right: 10px;
+  }
+
+  > ul a,
+  .dropdown-toggle {
+    display: inline-block;
     font-weight: bold;
     text-decoration: none;
     color: $darkgrey;
-    padding-right: 10px;
+    padding: 5px 5px;
   }
 
   .dropdown {
@@ -404,27 +410,26 @@ nav.secondary {
     border-radius: 4px;
   }
 
-  img {
-    vertical-align: top;
-    border-radius: 2px 0 0 2px;
+  .caret {
+    border-top-color: $grey;
+    margin-top: 10px;
     margin-right: 5px;
   }
 
+  img.user_thumbnail_tiny {
+    border: 0;
+    vertical-align: top;
+    margin: 2px 0 0 3px;
+    border-radius: 2px 0 0 2px;
+  }
+
   #inboxanchor {
     display: inline-block;
-    position: relative;
+    vertical-align: top;
     height: 20px;
-    top: -2px;
-    margin: 0 2px 0 0;
-    padding: 0 5px 0 0;
-    border-radius: 2px;
-  }
-
-  .dropdown-toggle {
-    display: block;
-    padding: 3px 7px;
-    color: #000;
-    text-decoration: none;
+    margin: 2px 7px 0 0;
+    background-color: $grey;
+    border-radius: 0 2px 2px 0;
   }
 
   .dropdown-menu {
@@ -713,7 +718,7 @@ nav.secondary {
 }
 
 .leaflet-top.leaflet-right {
-  top: 10px !important;
+  top: $lineheight !important;
   .leaflet-control {
     margin-right: 0px !important;
     margin-top: 0px !important;

app/views/layouts/_inbox.html.erb

@@ -1,3 +1 @@
-<span id="inboxanchor" class="count-number">
-  <%= user_thumbnail_tiny(@user, :size => 20, :width => 20, :height => 20) %><span><%= @user.new_messages.size %></span>
-</span>
+<span id="inboxanchor" class="count-number"><%= @user.new_messages.size %></span>

app/views/layouts/_user_menu.html.erb

@@ -1,7 +1,8 @@
 <div class='dropdown'>
   <a class='dropdown-toggle' data-toggle='dropdown' href="#">
-    <%= render :partial => 'layouts/inbox' %>
-    <%= @user.display_name %>
+    <%= user_thumbnail_tiny(@user, :size => 20, :width => 20, :height => 20)
+    %><%= render :partial => 'layouts/inbox'
+    %><span class='username'><%= @user.display_name %></span>
     <b class="caret"></b>
   </a>
   <ul class='dropdown-menu'>