Style user options

ui/scripts/ui/core.js

@@ -332,6 +332,10 @@
                     return false;
                 });
             }
+            if (this == 'label.logout') {
+                $link.addClass('logout');
+
+            }
         });
 
         // Initialize browser
@@ -463,8 +467,14 @@
             }
 
             // User options
-            if ($target.closest('#user div.icon.options').size()) {
-                $('#user-options').toggle();
+            if ($target.closest('#user').size()) {
+                var $options = $('#user-options');
+
+                $options.css({
+                    top: $target.offset().top + $target.height(),
+                    left: $target.offset().left
+                });
+                $options.toggle();
 
                 return false;
             }

ui/stylesheets/cloudstack.scss

@@ -202,10 +202,21 @@ body {
 
 .ui-dialog, .notification-box, #user-options {
     @include dialog;
+
+    display: none;
 }
 
 #user-options {
-    display: none;
+    a {
+        @include csui-hyperlink;
+        @include row;
+
+        &.logout {
+            font-weight: bold;
+            border-bottom: 1px solid gray;
+            margin-bottom: 25px;
+        }
+    }
 }
 
 // List view widget

ui/stylesheets/csui/_csui.scss

@@ -22,6 +22,15 @@ html, body {
     font-size: 13px;
 }
 
+@mixin csui-hyperlink {
+    color: black;
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
 // Sub-components
 @import "login";
 @import "button";