updates to spacing & alignment

combine logo & wordmark
mobile improvements

app/assets/stylesheets/framework/header.scss

@@ -98,6 +98,12 @@ header {
           font-size: 14px;
         }
 
+        .fa-chevron-down {
+          position: relative;
+          top: -3px;
+          font-size: 10px;
+        }
+
         svg {
           position: relative;
           top: 2px;

app/assets/stylesheets/new_nav.scss

@@ -5,6 +5,7 @@
 header.navbar-gitlab-new {
   color: $gray-normal;
   background-color: $purple-900;
+  border-bottom: 0;
 
   .header-content {
     padding-left: 0;
@@ -15,19 +16,37 @@ header.navbar-gitlab-new {
     }
 
     .title {
-      padding-top: 14px;
-      padding-right: 9px;
+      display: block;
+      height: 100%;
+      padding-right: 0;
       color: currentColor;
 
-      @media (min-width: $screen-sm-min) {
-        padding-right: $gl-padding;
-      }
+      > a {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding-top: 3px;
+        padding-left: 9px;
+        padding-right: 9px;
+        margin-left: -9px;
+        border-bottom: 3px solid transparent;
+
+        @media (min-width: $screen-sm-min) {
+          padding-right: $gl-padding;
+          padding-left: $gl-padding;
+          margin-left: -16px;
+        }
+
+        svg {
+          margin-top: -3px;
+          margin-right: 10px;
+        }
 
-      a {
         &:hover,
         &:focus {
           color: currentColor;
           text-decoration: none;
+          border-bottom-color: $white-light;
         }
       }
     }
@@ -52,6 +71,20 @@ header.navbar-gitlab-new {
   .navbar-collapse {
     padding-left: 0;
     color: $white-light;
+
+    @media (max-width: $screen-xs-max) {
+      margin-left: -$gl-padding;
+      margin-right: -10px;
+    }
+
+    .nav {
+      > li:not(.hidden-xs) a {
+        @media (max-width: $screen-xs-max) {
+          margin-left: 0;
+          min-width: 100%;
+        }
+      }
+    }
   }
 
   .container-fluid {
@@ -76,6 +109,12 @@ header.navbar-gitlab-new {
       @media (max-width: $screen-xs-max) {
         padding-right: 10px;
       }
+
+      li {
+        .badge {
+          box-shadow: none;
+        }
+      }
     }
 
     .nav > li > a {
@@ -90,6 +129,12 @@ header.navbar-gitlab-new {
         > svg {
           fill: $white-light;
         }
+
+        &.header-user-dropdown-toggle {
+          .header-user-avatar {
+            border: 0;
+          }
+        }
       }
     }
   }
@@ -127,11 +172,14 @@ header.navbar-gitlab-new {
   }
 
   .dropdown-chevron {
+    position: relative;
+    top: -1px;
     font-size: 10px;
   }
 }
 
-.header-user .dropdown-menu-nav {
+.header-user .dropdown-menu-nav,
+.header-new .dropdown-menu-nav {
   margin-top: 4px;
 }
 
@@ -140,7 +188,8 @@ header.navbar-gitlab-new {
     border-color: $purple-800;
 
     &:hover {
-      border-color: rgba($white-light, .5);
+      border-color: rgba($white-light, .6);
+      box-shadow: none;
     }
   }
 
@@ -158,7 +207,7 @@ header.navbar-gitlab-new {
   }
 
   .search-input::placeholder {
-    color: $white-light;
+    color: rgba($white-light, .6);
   }
 
   .location-badge {
@@ -166,9 +215,19 @@ header.navbar-gitlab-new {
     background-color: $purple-900;
   }
 
+  .search-input-wrap {
+    .search-icon {
+      color: rgba($white-light, .6);
+    }
+  }
+
   &.search-active {
     .search-input-wrap {
-      i {
+      .search-icon {
+        color: rgba($white-light, .6);
+      }
+
+      .clear-icon {
         color: $white-light;
       }
     }

app/views/layouts/header/_new.html.haml

@@ -2,14 +2,12 @@
   %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
   .container-fluid
     .header-content
-      .header-logo
-        = link_to root_path, class: 'home', title: 'Dashboard', id: 'logo' do
-          = brand_header_logo
-
       .title-container
         %h1.title
           = link_to root_path, title: 'Dashboard' do
-            GitLab
+            = brand_header_logo
+            %span.hidden-xs
+              GitLab
 
         - if current_user
           = render "layouts/nav/new_dashboard"
@@ -58,7 +56,7 @@
             %li.header-user.dropdown
               = link_to current_user, class: "header-user-dropdown-toggle", data: { toggle: "dropdown" } do
                 = image_tag avatar_icon(current_user, 26), width: 26, height: 26, class: "header-user-avatar"
-                = icon('caret-down')
+                = icon('chevron-down')
               .dropdown-menu-nav.dropdown-menu-align-right
                 %ul
                   %li.current-user

app/views/layouts/header/_new_dropdown.haml

@@ -1,7 +1,11 @@
 %li.header-new.dropdown
   = link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip", title: "New...", ref: 'tooltip', aria: { label: "New..." }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body' } do
-    = icon('plus fw')
-    = icon('caret-down')
+    - if show_new_nav?
+      = icon('plus')
+      = icon('chevron-down')
+    - else
+      = icon('plus fw')
+      = icon('caret-down')
   .dropdown-menu-nav.dropdown-menu-align-right
     %ul
       - if @group