lists-color: only colorize the bottom border

And make the background clearer to visually separate the header from
the list of cards

client/components/lists/list.styl

@@ -46,11 +46,19 @@
 .list-header-card-count
   height: 35px
 
+.list-header-add
+  flex: 0 0 auto
+  padding: 20px 12px 4px
+  position: relative
+  min-height: 20px
+
 .list-header
   flex: 0 0 auto
   padding: 20px 12px 4px
   position: relative
   min-height: 20px
+  background-color: #e4e4e4;
+  border-bottom: 6px solid #e4e4e4;
 
 
   &.ui-sortable-handle
@@ -204,9 +212,7 @@
   overflow: hidden
 
 list-header-color(background, color...)
-  background: background !important
+  border-bottom: 6px solid background
-  if color
-    color: color !important //overwrite text for better visibility
 
 .list-header-white
   list-header-color(#ffffff, #4d4d4d) //Black text for better visibility

client/components/lists/listHeader.jade

@@ -120,7 +120,8 @@ template(name="wipLimitErrorPopup")
 template(name="setListColorPopup")
   form.edit-label
     .palette-colors: each colors
-      span.card-label.palette-color.js-palette-color(class="list-header-{{color}}")
+      // note: we use the swimlane palette to have more than just the border
+      span.card-label.palette-color.js-palette-color(class="swimlane-{{color}}")
         if(isSelected color)
           i.fa.fa-check
     button.primary.confirm.js-submit {{_ 'save'}}

client/components/swimlanes/swimlanes.jade

@@ -38,7 +38,7 @@ template(name="listsGroup")
 
 template(name="addListForm")
   .list.list-composer.js-list-composer
-    .list-header
+    .list-header-add
       +inlinedForm(autoclose=false)
         input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}"
           autocomplete="off" autofocus)