1 files changed, 79 insertions, 33 deletions

diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index f9ceaec9418..96459fe31cc 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -2,6 +2,15 @@
 @import 'framework/tw_bootstrap_variables';
 @import "bootstrap/variables";
 
+$active-background: rgba(0,0,0,.04);
+$active-border: $indigo-500;
+$active-color: $indigo-700;
+$active-hover-background: $active-background;
+$active-hover-color: $gl-text-color;
+$inactive-badge-background: rgba(0,0,0,.08);
+$hover-background: $indigo-700;
+$hover-color: $white-light;
+$inactive-color: $gl-text-color-secondary;
 $new-sidebar-width: 220px;
 
 .page-with-new-sidebar {
@@ -17,19 +26,33 @@ $new-sidebar-width: 220px;
 }
 
 .context-header {
-  background-color: $gray-normal;
   border-bottom: 1px solid $border-color;
   font-weight: 600;
   display: flex;
   align-items: center;
-  padding: 10px 14px;
+  padding: 10px 16px 10px 10px;
+  color: $gl-text-color;
 
   .avatar-container {
     flex: 0 0 40px;
   }
 
   &:hover {
-    background-color: $border-color;
+    background-color: $hover-background;
+    color: $hover-color;
+    border-color: $hover-background;
+
+    .avatar-container {
+      border-color: transparent;
+    }
+
+    .settings-avatar {
+      background-color: $indigo-500;
+
+      i {
+        color: $hover-color;
+      }
+    }
   }
 
   .project-title,
@@ -41,6 +64,7 @@ $new-sidebar-width: 220px;
 
 .settings-avatar {
   background-color: $white-light;
+  transition: background-color 100ms linear;
 
   i {
     font-size: 20px;
@@ -48,6 +72,7 @@ $new-sidebar-width: 220px;
     color: $gl-text-color-secondary;
     text-align: center;
     align-self: center;
+    transition: color 100ms linear;
   }
 }
 
@@ -60,11 +85,15 @@ $new-sidebar-width: 220px;
   bottom: 0;
   left: 0;
   overflow: auto;
-  background-color: $gray-light;
-  border-right: 1px solid $border-color;
+  background-color: $gray-normal;
+  box-shadow: inset -2px 0 0 $border-color;
+
+  a {
+    text-decoration: none;
+  }
 
   ul {
-    padding: 0;
+    padding-left: 0;
     list-style: none;
   }
 
@@ -73,13 +102,18 @@ $new-sidebar-width: 220px;
 
     a {
       display: block;
-      padding: 12px 14px;
+      padding: 12px 16px;
+      color: $inactive-color;
     }
   }
 
-  a {
-    color: $gl-text-color;
-    text-decoration: none;
+  li.active {
+    box-shadow: inset 4px 0 0 $active-border;
+
+    > a {
+      color: $active-color;
+      font-weight: 700;
+    }
   }
 
   @media (max-width: $screen-xs-max) {
@@ -89,22 +123,28 @@ $new-sidebar-width: 220px;
 
 .sidebar-sub-level-items {
   display: none;
+  padding-bottom: 8px;
 
   > li {
     a {
-      padding: 12px 24px;
-      color: $gl-text-color-light;
+      font-size: 12px;
+      padding: 8px 16px 8px 24px;
 
-      &:hover {
-        color: $gl-text-color;
-        background-color: $border-color;
+      &:hover,
+      &:focus {
+        background: $active-hover-background;
+        color: $active-hover-color;
       }
     }
 
     &.active {
-      > a {
-        color: $purple-650;
-        font-weight: 600;
+      a {
+        &,
+        &:hover,
+        &:focus {
+          background: $active-background;
+          color: $active-color;
+        }
       }
     }
   }
@@ -114,35 +154,31 @@ $new-sidebar-width: 220px;
   > li {
     .badge {
       float: right;
-      background-color: $border-color;
-      color: $gl-text-color;
+      background-color: $inactive-badge-background;
+      color: $inactive-color;
     }
 
     &.active {
-      > a {
-        background-color: $purple-600;
-        color: $white-light;
-        font-weight: 600;
-      }
+      background: $active-background;
 
       .badge {
-        background-color: $purple-700;
-        color: $white-light;
+        color: $active-color;
+        font-weight: 600;
       }
 
       .sidebar-sub-level-items {
-        background-color: $gray-normal;
-        border-left: 6px solid $purple-600;
         display: block;
       }
     }
 
-    &:not(.active) > a:hover {
-      background-color: $border-color;
+    > a:hover {
+      background-color: $hover-background;
+      color: $hover-color;
 
       .badge {
-        transition: background-color 100ms linear;
-        background-color: $gray-normal;
+        transition: background-color 100ms linear, color 100ms linear;
+        background-color: $indigo-500;
+        color: $hover-color;
       }
     }
   }
@@ -161,3 +197,13 @@ $new-sidebar-width: 220px;
     // scss-lint:enable DuplicateProperty
   }
 }
+
+
+// Change color of all horizontal tabs to match the new indigo color
+.nav-links li.active a {
+  border-bottom-color: $active-border;
+
+  .badge {
+    font-weight: 600;
+  }
+}