update style of buttons in SideNav

browser/main/SideNav/FolderItem.styl

@@ -12,8 +12,13 @@
   &:hover
     background-color $ui-button--active-backgroundColor
     color $ui-button--active-color
-  .control
+  .control-button
     opacity 1
+    color white
+    &:hover
+      background-color alpha(white, 30%)
+    &:active, &:hover:active
+      background-color alpha(white, 15%)
 
 .label
   position absolute
@@ -29,20 +34,21 @@
   margin-left 5px
 
 .control
-  opacity 0
   position absolute
   top 0
   bottom 0
   right 5px
   width 24px
-  transition opacity 0.15s
 
 .control-button
+  opacity 0
   navButtonColor()
   width 24px
   height 24px
   margin-top 4.5px
   border-radius 5px
+  transition opacity 0.15s
+
 .root--edit
   @extend .root
 

browser/main/SideNav/RepositorySection.styl

@@ -3,25 +3,33 @@
   color $nav-text-color
 
 .header
-  navButtonColor()
   position relative
   width 100%
   height 33px
   cursor pointer
   text-align left
   font-size 14px
+  color $ui-inactive-text-color
   &:hover .header-control-button
     opacity 1
+  &:active
+    background-color $ui-button--active-backgroundColor !important
+    color $ui-button--active-color
+    .header-control-button, .header-control-button--show
+      color white
 
-.header--active
+.header--active, .header--active:hover, .header--active:active
   @extend .header
   background-color $ui-button--active-backgroundColor
   color $ui-button--active-color
-  .header-control-button
+  .header-control-button,
+  .header-control-button--show
+    color white
     opacity 1
-  &:hover
-    background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
+    &:hover
+      background-color alpha(white, 30%)
+    &:active
+      background-color alpha(white, 15%)
 
 .header-name
   position absolute
@@ -43,13 +51,18 @@
   width 48px
 
 .header-control-button
-  navButtonColor()
+  border none
+  background-color transparent
   width 24px
   height 24px
   padding 0
   margin-top 4.5px
   border-radius 5px
   opacity 0
+  color $ui-inactive-text-color
+  transition color background-color 0.15s
+  &:hover
+    background-color $ui-button--hover-backgroundColor
 
 .header-control-button--show
   @extend .header-control-button
@@ -77,7 +90,7 @@
   height 34px
   width 100%
   border none
-  padding-left 20px
+  padding 0 0 0 20px
   text-align left
   line-height 34px
 

browser/main/SideNav/SideNav.styl

@@ -1,7 +1,7 @@
 .root
   absolute top left
-  bottom 24px
-  width 200px
+  bottom $statusBar-height
+  width $sideNav-width
   border-right $ui-border
   background-color $ui-backgroundColor
   user-select none
@@ -44,7 +44,8 @@
   margin-left 5px
 
 .repositoryList
-  absolute left right bottom
+  absolute left right
+  bottom 44px
   top 178px
   overflow-y auto
 
@@ -61,8 +62,10 @@
   right 5px
   bottom 5px
   border-radius 16.5px
-  height 33px
-  width 33px
+  height 34px
+  width 34px
+  line-height 32px
+  padding 0
 
 .root-folded
   @extend .root