1 files changed, 42 insertions, 35 deletions

diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss
index bfb7a0c7e25..73cb3a7cf4c 100644
--- a/app/assets/stylesheets/new_nav.scss
+++ b/app/assets/stylesheets/new_nav.scss
@@ -4,7 +4,7 @@
 
 header.navbar-gitlab-new {
   color: $white-light;
-  background-color: $purple-900;
+  background: linear-gradient(to right, $indigo-900, $indigo-800);
   border-bottom: 0;
 
   .header-content {
@@ -24,11 +24,9 @@ header.navbar-gitlab-new {
       > a {
         display: flex;
         align-items: center;
-        padding-top: 3px;
         padding-right: $gl-padding;
         padding-left: $gl-padding;
         margin-left: -$gl-padding;
-        border-bottom: 3px solid transparent;
 
         @media (min-width: $screen-sm-min) {
           padding-right: $gl-padding;
@@ -45,9 +43,8 @@ header.navbar-gitlab-new {
 
         &:hover,
         &:focus {
-          color: currentColor;
+          color: $tanuki-yellow;
           text-decoration: none;
-          border-bottom-color: $white-light;
         }
       }
     }
@@ -71,7 +68,7 @@ header.navbar-gitlab-new {
 
   .navbar-collapse {
     padding-left: 0;
-    color: $white-light;
+    color: $indigo-200;
     box-shadow: 0;
 
     @media (max-width: $screen-xs-max) {
@@ -101,7 +98,7 @@ header.navbar-gitlab-new {
       font-size: 14px;
       text-align: center;
       color: currentColor;
-      border-left: 1px solid lighten($purple-700, 10%);
+      border-left: 1px solid lighten($indigo-700, 10%);
 
       &:hover,
       &:focus,
@@ -120,6 +117,7 @@ header.navbar-gitlab-new {
       li {
         .badge {
           box-shadow: none;
+          font-weight: 600;
         }
       }
     }
@@ -133,12 +131,11 @@ header.navbar-gitlab-new {
 
       > a {
         background: none;
-        opacity: .9;
-        will-change: opacity;
+        will-change: color;
 
         &.header-user-dropdown-toggle {
           .header-user-avatar {
-            border-color: $white-light;
+            border-color: $indigo-200;
           }
         }
 
@@ -165,29 +162,34 @@ header.navbar-gitlab-new {
 .navbar-sub-nav {
   display: flex;
   margin-bottom: 0;
-  color: $white-light;
+  color: $indigo-200;
 
   > li {
-    &.active > a,
-    a:hover,
-    a:focus {
-      border-bottom-color: $white-light;
+    > a:hover,
+    > a:focus {
+      box-shadow: inset 0 -3px 0 rgba($indigo-200, .4);
       text-decoration: none;
       outline: 0;
-      opacity: 1;
+      color: $white-light;
+    }
+
+    &.active > a {
+      box-shadow: inset 0 -3px 0 $indigo-500;
+      color: $white-light;
+      font-weight: 700;
     }
 
     > a {
       display: block;
-      padding: 16px 10px 13px;
+      padding: 16px 10px;
       font-size: 13px;
       color: currentColor;
-      border-bottom: 3px solid transparent;
-      opacity: .9;
-      will-change: opacity;
+      box-shadow: inset 0 0 0 transparent;
+      will-change: box-shadow;
+      transition: box-shadow 0.15s;
 
       @media (min-width: $screen-sm-min) {
-        padding: 15px $gl-padding 12px;
+        padding: 15px $gl-padding;
         font-size: 14px;
       }
     }
@@ -207,55 +209,60 @@ header.navbar-gitlab-new {
 
 .search {
   form {
-    border-color: $purple-800;
+    border: 0;
+    background-color: rgba($indigo-200, .2);
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, background-color ease-in-out 0.15s;
 
     &:hover {
-      border-color: rgba($white-light, .6);
+      background-color: rgba($indigo-200, .3);
       box-shadow: none;
     }
   }
 
   &.search-active form {
-    border-color: $white-light;
-  }
-
-  form,
-  .search-input {
-    background-color: $purple-700;
+    background-color: rgba($indigo-200, .3);
+    box-shadow: none;
   }
 
   .search-input {
     color: $white-light;
+    background: none;
   }
 
   .search-input::placeholder {
-    color: rgba($white-light, .6);
+    color: rgba($indigo-200, .8);
   }
 
   .location-badge {
     font-size: 12px;
-    color: rgba($white-light, .6);
-    background-color: $purple-800;
+    color: $indigo-100;
+    background-color: rgba($indigo-200, .1);
     transition: color 0.15s;
     will-change: color;
+    margin: -4px 4px -4px -4px;
+    line-height: 25px;
+    padding: 4px 8px;
+    border-radius: 2px 0 0 2px;
+    border-right: 1px solid $indigo-800;
+    height: 34px;
   }
 
   .search-input-wrap {
     .search-icon,
     .clear-icon {
-      color: rgba($white-light, .6);
+      color: rgba($indigo-200, .8);
     }
   }
 
   &.search-active {
     .location-badge {
       color: $white-light;
-      background-color: $purple-800;
+      background-color: rgba($indigo-200, .2);
     }
 
     .search-input-wrap {
       .search-icon {
-        color: rgba($white-light, .6);
+        color: rgba($indigo-200, .8);
       }
 
       .clear-icon {