[REF] web, mail: change minors top-menu design

- Remove carets
- Fix badges position
- Vertical align user avatar
- If a dropdown is open, the menu-toggle should appear active
- Dropdown menus' widths should be at least as the dropdown-toggle

addons/mail/static/src/less/systray.less

@@ -3,11 +3,15 @@
     > a {
         opacity: 1;
         > i {
+            .o-transform(translateY(4px));
             font-size: larger;
         }
     }
     &.o_no_notification > a {
         opacity: 0.5;
+        > i {
+            .o-transform(translateY(0px));
+        }
         .o_notification_counter {
             display: none;
         }
@@ -21,9 +25,9 @@
         color: white;
         padding: 0em 0.3em;
         font-size: 0.7em;
-        top: 7%;
+        top: 19%;
         position: absolute;
-        margin: 0px 0px 0px 8px;
+        margin: 0px 0px 0px 6px;
     }
     .o_mail_navbar_dropdown {
         width: 350px;

addons/web/static/src/less/navbar.less

@@ -122,6 +122,7 @@
 
     .open .dropdown-menu {
         max-height: 90vh; // the dropdown should not overstep the viewport
+        min-width: 100%;
         overflow: auto;
         margin-top: 0;
 
@@ -134,8 +135,16 @@
         .o-menu-indentation(3);
     }
 
-    .oe_topbar_avatar {
-        height: 15px;
+    .open .dropdown-toggle {
+        background-color: @odoo-navbar-inverse-link-hover-bg;
+    }
+    .o_user_menu {
+        margin-left: 6px;
+
+        .oe_topbar_avatar {
+            height: 17px;
+            .o-transform(translateY(-2px));
+        }
     }
 
     @media (max-width: @screen-xs-max) {

addons/web/static/src/xml/base.xml

@@ -214,7 +214,6 @@
     <li class="o_debug_manager">
         <a href="#" title="Open Developer Tools" class="dropdown-toggle" data-toggle="dropdown">
             <span class="fa fa-bug"/>
-            <b class="caret"/>
         </a>
         <ul class="dropdown-menu o_debug_dropdown" role="menu"/>
     </li>
@@ -1353,7 +1352,7 @@
     <li class="o_user_menu">
         <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">
             <img class="img-circle oe_topbar_avatar" t-att-src="_s + '/web/static/src/img/user_menu_avatar.png'"/>
-            <span class="oe_topbar_name"/> <span class="caret"></span>
+            <span class="oe_topbar_name"/>
         </a>
         <ul class="dropdown-menu" role="menu">
             <li><a href="#" data-menu="documentation">Documentation</a></li>