Redesign menu bar to be a bit more compact

templates/default/css/foundation.mods.css

@@ -105,3 +105,35 @@ div.time-duration-picker-content td select {
 div.topspace {
     margin-top: 0.5rem;
 }
+
+.top-bar, .top-bar ul {
+    background-color: #252888;
+}
+
+.menu .button, .menu a {
+    padding: 0.5rem;
+}
+
+.menu.submenu.is-dropdown-submenu {
+    background-color: #e6e6e6;
+}
+
+.dropdown.menu>li.is-dropdown-submenu-parent>a::after {
+    content: none;
+}
+
+.dropdown.menu>li.is-dropdown-submenu-parent>a {
+    padding-right: 0px;
+}
+
+.is-submenu-item.is-dropdown-submenu-item:hover {
+        background-color: #efefef;
+}
+
+div.top-bar-right .menu>li {
+    margin-left: 0.2rem;
+}
+
+div.top-bar-right .dropdown.menu>li>.button{
+    padding: 0.5rem;
+}

templates/default/userbar/profile_signedin.tem

@@ -1,9 +1,10 @@
                         <ul class="dropdown menu" data-dropdown-menu>
-                            <li class="image is-dropdown-submenu-parent"><a href="#" class="nopadding"><img alt="" src="https://gravatar.com/avatar/%(gravhash)s?s=32&amp;d=mm&amp;r=g" class="avatar avatar-32" height="32" width="32" /> %(realname)s</a>
+                            <li><a href="%(url-new)s" class="button"><i class="fas fa-plus"></i></a></li>
+                            <li class="image is-dropdown-submenu-parent"><a href="#" class="nopadding"><img alt="" src="https://gravatar.com/avatar/%(gravhash)s?s=32&amp;d=mm&amp;r=g" class="avatar avatar-32" height="32" width="32" /></a>
                                 <ul class="menu">
                                     <li><a href="%(url-setpass)s">Set Password</a></li>
+                                    <li><a href="%(url-signout)s">Sign out</a></li>
                                     <!-- ... -->
                                 </ul>
                             </li>
-                            <li><a class="button failure" href="%(url-signout)s">Sign out</a></li>
                         </ul>

templates/default/userbar/userbar.tem

@@ -1,7 +1,7 @@
                 <div class="top-bar hide-for-print">
                     <div class="top-bar-left">
                         <ul class="menu">
-                            <li><button id="menubtn" class="menu-icon dark" type="button" data-open="offCanvas"></button></li>
+                            <li><button id="menubtn" class="menu-icon" type="button" data-open="offCanvas"></button></li>
                             <li><form action="%(url-search)s" method="POST"><input type="search" name="search" id="search" placeholder="Search"></form></li>
                         </ul>
                     </div>