GUAC-1120: Improve user menu style. Add dark icons.

guacamole/src/main/webapp/app/userMenu/styles/user-menu.css

@@ -21,28 +21,90 @@
  */
 
 .user-menu {
-    padding: 0.45em;
     float: right;
+    position: relative;
 }
 
 .user-menu a.username {
+
     display: block;
-    margin-left: 0;
-    margin-right: 0;
-    margin-bottom: 0;
+
+    margin: 0;
+    min-width: 1.75in;
+
+    font-size: 1.25em;
+    font-weight: bold;
+    padding: .75em .5em;
+    border-left: 1px solid rgba(0,0,0,0.125);
+    background: rgba(0,0,0,0.04);
+
+    padding-left: 2em;
+    background-repeat: no-repeat;
+    background-size: 1em;
+    background-position: 0.5em 0.75em;
+    background-image: url('images/user-icons/guac-user.png');
+
 }
 
 .user-menu .options {
+
+    position: absolute;
+    right: 0;
     margin: 0;
     padding: 0;
-    background: gray;
+    min-width: 100%;
+
+    background: #EEE;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.125);
+    border-left: 1px solid rgba(0,0,0,0.125);
+    border-bottom: 1px solid rgba(0,0,0,0.125);
+    z-index: 0;
+
 }
 
 .user-menu .options li {
-    padding: 0.25em 0.5em;
+    padding: 0;
     list-style-type: none;
 }
 
+.user-menu .options li a {
+    display: block;
+    cursor: default;
+    color: black;
+    text-decoration: none;
+    padding: 0.35em 0.5em;
+}
+
+.user-menu .options li a:hover {
+    background: rgba(0, 0, 0, 0.125);
+}
+
+.user-menu .options li a.home,
+.user-menu .options li a.manage,
+.user-menu .options li a.change-password,
+.user-menu .options li a.logout {
+    background-repeat: no-repeat;
+    background-size: 1em;
+    background-position: 0.5em 0.45em;
+    padding-left: 2em;
+}
+
+.user-menu .options li a.home {
+    background-image: url('images/action-icons/guac-home-dark.png');
+}
+
+.user-menu .options li a.manage {
+    background-image: url('images/action-icons/guac-config-dark.png');
+}
+
+.user-menu .options li a.change-password {
+    background-image: url('images/action-icons/guac-key-dark.png');
+}
+
+.user-menu .options li a.logout {
+    background-image: url('images/action-icons/guac-logout-dark.png');
+}
+
 .user-menu .password-dialog {
     visibility: hidden;
     opacity: 0;

guacamole/src/main/webapp/app/userMenu/templates/guacUserMenu.html

@@ -21,7 +21,7 @@
        THE SOFTWARE.
     -->
 
-    <a class="username button">{{username}}</a>
+    <a class="username">{{username}}</a>
     
     <!-- Menu options -->
     <ul class="options">