re-color style of SideNav

browser/main/HomePage/SideNav/FolderItem.styl

@@ -4,9 +4,12 @@
   position relative
   cursor pointer
   &:hover
-    background-color alpha(white, 0.1)
+    background-color $nav-hover-background
     .control
       opacity 1
+  &:active
+    background-color $nav-active-background
+    color $nav-text-color
 
 .label
   position absolute
@@ -16,7 +19,7 @@
   right 48px
   padding-left 20px
   line-height 33px
-  color white
+  color $nav-inactive-text-color
 
 .control
   opacity 0
@@ -33,13 +36,12 @@
   border none
   border-radius 5px
   background-color transparent
-  color $nav-inactive-color
+  color $nav-inactive-text-color
   &:hover
-    color white
+    background-color $nav-hover-background
-    background-color alpha(white, 0.1)
   &:active
-    color white
+    background-color $nav-active-background
-    background-color $brand-color
+    color $nav-text-color
 
 .nameInput
   absolute top bottom

browser/main/HomePage/SideNav/RepositorySection.styl

@@ -2,13 +2,15 @@
   margin-top 15px
   margin-bottom 15px
   user-select none
+  color $nav-text-color
 
 .header
   position relative
   height 33px
   cursor pointer
+  color $nav-inactive-text-color
   &:hover
-    background-color alpha(white, 0.1)
+    background-color $nav-hover-background
     .header-control-button
       opacity 1
 
@@ -20,7 +22,6 @@
   right 72px
   padding-left 10px
   line-height 33px
-  color white
 
 .header-control
   position absolute
@@ -37,14 +38,13 @@
   border none
   border-radius 5px
   background-color transparent
-  color $nav-inactive-color
+  color $nav-inactive-text-color
   opacity 0
   &:hover
-    color white
+    background-color $nav-hover-background
-    background-color alpha(white, 0.1)
   &:active
-    color white
+    background-color $nav-active-background
-    background-color $brand-color
+    color $nav-text-color
 
 .header-control-button--show
   @extend .header-control-button
@@ -73,11 +73,10 @@
   border none
   padding-left 20px
   text-align left
+  color $nav-inactive-text-color
   background-color transparent
-  color $nav-inactive-color
   &:hover
-    background-color alpha(white, 0.1)
+    background-color $nav-hover-background
-    color white
   &:active
-    background-color $brand-color
+    background-color $nav-active-background
-    color white
+    color $nav-text-color

browser/main/HomePage/SideNav/SideNav.styl

@@ -4,24 +4,26 @@
   border-right solid 1px $nav-border-color
   background-color $nav-background-color
   user-select none
+  color $nav-text-color
 
 .top
   height 60px
   border-bottom solid 1px $nav-border-color
 
 .top-menu
-  height 60px
+  height 59px
   padding 0 10px
   font-size 14px
   width 100%
   text-align left
   border none
-  color white
+  color $nav-inactive-text-color
   background-color transparent
   &:hover
-    background-color alpha(white, 0.1)
+    background-color $nav-hover-background
   &:active
-    background-color $brand-color
+    background-color $nav-active-background
+    color $nav-text-color
 
 .menu
   margin-top 15px
@@ -33,12 +35,20 @@
   width 100%
   text-align left
   border none
-  color white
+  color $nav-inactive-text-color
   background-color transparent
   &:hover
-    background-color alpha(white, 0.1)
+    background-color $nav-hover-background
   &:active
-    background-color $brand-color
+    background-color $nav-active-background
+    color $nav-text-color
+
+.menu-button--active
+  @extend .menu-button
+  background-color $nav-active-background
+  color $nav-text-color
+  &:hover
+    background-color $nav-active-background
 
 .repositoryList
   absolute left right bottom

browser/styles/index.styl

@@ -56,9 +56,12 @@ $disabled-input-background = #DDD
 * Nav
 */
 
-$nav-border-color = #838383
+$nav-text-color = #515151
-$nav-background-color = #353535
+$nav-inactive-text-color = #939395
-$nav-inactive-color = #838383
+$nav-hover-background = rgba(126, 127, 129, 0.08)
+$nav-active-background = #E7E7E7
+$nav-border-color = #D1D1D2
+$nav-background-color = #FAFAFA
 
 /**
 * # Modal Stuff