INT-110 added scout logo, updated sidebar to brand slate color

Fixes #65

Author: marcgurney

images/logo-scout-on-dark.png

@@ -14,10 +14,12 @@
     .splitter
       button.btn.btn-link.splitter-button.splitter-button-open
         i.fa.fa-caret-left
+        | 
         i.fa.fa-file-text-o
 
       button.btn.btn-link.splitter-button.splitter-button-close
         i.fa.fa-file-text-o
+        | 
         i.fa.fa-caret-right
     .column.side
       div(data-hook='documents-subview')

src/home/collection.jade

@@ -1,3 +1,3 @@
-.panel-heading.list-filter
+.list-filter
   i.search.octicon-search
   input(type='search', placeholder='filter sources', data-hook='search')

src/sidebar/collection-filter.jade

@@ -1,5 +1,6 @@
 div
   .sidebar.panel
+    div.scout-logo
     div(data-hook='collection-filter-subview')
     div(data-hook='collection-list-subview')
     div(data-hook='sidebar-control-subview')

src/sidebar/index.jade

@@ -1,4 +1,4 @@
 .sidebar-controls
-  .panel-heading.list-filter
+  .list-filter
     i.search.octicon-search
     input(type='search', placeholder='filter fields', data-hook='search')

src/sidebar/sidebar-controls.jade

@@ -2,8 +2,8 @@
 /* commented colors have been deprecated */
 @green0: #365221;
 @green1: #507b32;
-@green2: #6ba442;
-@green3: #89b668;
+@green2: #67b144;
+@green3: #86bc63;
 @green4: #a6c88e;
 @green5: #c4dbb3;
 
@@ -19,6 +19,9 @@
 @gray7: #ebebed;
 @gray8: #f5f6f7;
 
+@slate0: #4c5259;
+@slate1: #70757a;
+
 @blue3: #5b81a9; // TODO: deprecate
 @blue4: #84a1bf; // TODO: deprecate
 @blue5: #adc0d4; // TODO: deprecate

styles/palette.less

@@ -1,5 +1,4 @@
-@sidebar-bg: @pw;
-@sidebar-border: @gray7;
+@sidebar-bg: @slate0;
 @sidebar-width: 220px;
 
 .sidebar {
@@ -9,58 +8,72 @@
   -webkit-transform: translateZ(0);
   margin-bottom: 0;
 
+  .scout-logo {
+    background: @slate1 url("/images/logo-scout-on-dark.png") center center no-repeat;
+    background-size: 140px 28px;
+    width: @sidebar-width;
+    height: 72px;
+  }
+
   .list-filter {
-    margin: 12px 0;
+    padding: 12px;
+    box-shadow: 0 2px 0 rgba(0,0,0,0.2);
 
     i.search {
       .octicon;
       position: absolute;
       margin-top: 9px;
       margin-left: 10px;
-      color: @gray3;
+      color: @gray5;
     }
     input {
-      .form-control;
       padding: 5px 5px 5px 30px;
       height: auto;
-      background: @pw;
-      // border-color: @gray6;
+      background: @slate0;
+      color: @pw;
+      width: 100%;
+      border: 1px solid lighten(@slate0, 5%);
     }
     input[type=search] {
       border-radius: 18px;
     }
   }
 
+  .panel-title {
+    color: @gray5;
+  }
   .list-group {
     line-height: 24px;
-    // height: 100%;
     position: absolute;
-    top: 72px;
-    bottom: 180px;
+    top: 128px;
+    bottom: 60px;
     overflow-y: auto;
     width: 100%;
+    z-index: -1;
 
     .list-group-item {
       cursor: pointer;
       border-top-width: 0;
       border-bottom-width: 0;
-      padding: 0 6px;
-      color: @gray3;
-      border-left: 4px solid transparent;
+      padding: 0;
+      background: none;
+      color: @gray5;
 
       a {
         display: block;
-        color: @gray3;
+        color: @gray5;
+        padding: 0 6px;
         text-decoration: none;
-        max-width: 190px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        border-left: 4px solid transparent;
 
         &:hover {
-          color: @gray3;
+          color: @pw;
           text-decoration: none;
-          background: @gray8;
+          background: lighten(@slate0, 5%);
+          border-left: 4px solid lighten(@slate0, 5%);
         }
       }
       i {
@@ -70,13 +83,13 @@
       }
       &.active {
         background: none;
-        border-left: 4px solid @green2;
 
         a {
-          color: @green2;
+          color: @green3;
+          border-left: 4px solid @green3;
         }
         i {
-          color: @green2;
+          color: @green3;
         }
         .list-group-item-heading {
           color: @green2;
@@ -88,12 +101,13 @@
   }
   .sidebar-controls {
     position: absolute;
+    width: @sidebar-width;
     bottom: 0;
-    width: 218px;
-    height: 174px;
-    border-top: 2px solid @sidebar-border;
-    // background: url(/images/fake-sidebar-controls.png) 0 0 no-repeat;
-    // background-size: 218px 174px;
+    height: 60px;
+
+    .list-filter {
+      box-shadow: 0 -2px 0 rgba(0,0,0,0.2);
+    }
   }
 }
 
@@ -103,7 +117,6 @@
   bottom: 0;
   width: 220px;
   background: @sidebar-bg;
-  border-right: 2px solid @sidebar-border;
   border-left-width: 0;
   border-top-width: 0;
   border-bottom-width: 0;