LT-250: Styling right part of toolbar

Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.html

@@ -1,10 +1,10 @@
 <template name="userAccountMenu">
     {{#if currentUser}}
         <div id="userAccountMenu" class="dropdown">
-            <div class="dropdown-toggle noselect" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                {{name}} {{currentPath}}
-                <div class="menuButton">
-                    <i class="fa fa-cog"></i> <span class="caret"></span>
+            <div class="dropdown-toggle noselect clearfix" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="userName pull-left m-r-1">{{name}} {{currentPath}}</span>
+                <div class="menuButton pull-right">
+                    <i class="fa fa-cog"></i> <span class="caret-down"></span>
                 </div>
             </div>
             <ul class="dropdown-menu dropdown-menu-right">
@@ -41,4 +41,4 @@
             </ul>
         </div>
     {{/if}}
-</template>
+</template>

Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl

@@ -1,27 +1,31 @@
 @import "{design}/app"
 
 #userAccountMenu
-  padding: 5px
+  padding: 4px 0
   height: 100%
 
   .dropdown-toggle
-    cursor: pointer
-    line-height: 20px
-    font-weight: 400
-    font-size: 13px
-    text-decoration: none
     background-color: $primaryBackgroundColor
     color: $textSecondaryColor
+    cursor: pointer
+    font-size: 13px
+    font-weight: 400
+    line-height: 18px
+    text-decoration: none
 
     .menuButton
-      display: inline-block
-      padding-left: 5px
       border-left: solid 1px #516873
+      display: inline-block
+      height: 18px
+      padding: 0 8px
 
       .fa
         color: #94a8b3
+        font-size: 17px
+        line-height: 18px
 
-      .caret
+      .caret-down
+        margin: 0 4px 4px 2px
         color: #516873
 
   ul.dropdown-menu