Improve list title form

client/components/boards/boardBody.jade

@@ -27,13 +27,14 @@ template(name="boardBody")
 
 template(name="addListForm")
   .list.js-list.list-composer.js-list-composer
+    .list-header
       +inlinedForm(autoclose=false)
-      input.list-name-input(type="text" placeholder="{{_ 'add-list'}}"
+        input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}"
           autocomplete="off" autofocus)
         .edit-controls.clearfix
           button.primary.confirm(type="submit") {{_ 'save'}}
           a.fa.fa-times-thin.js-close-inlined-form
       else
-      a.js-open-inlined-form
+        a.open-list-composer.js-open-inlined-form
           i.fa.fa-plus
           | {{_ 'add-list'}}

client/components/boards/boardBody.styl

@@ -17,23 +17,9 @@ position()
     position: cover
     transition: margin .1s
 
-    .board-overlay
-      position: cover
-      top: -100px
-      right: -400px
-      background: black
-      opacity: 0.33
-      animation: fadeIn 0.2s
-      z-index: 16
-
     &.is-sibling-sidebar-open
       margin-right: 248px
 
-    &.is-dragging-active
-      .open-minicard-composer,
-      .minicard-wrapper.is-checked
-        display: none
-
     .lists
       align-items: flex-start
       display: flex
@@ -43,3 +29,17 @@ position()
       overflow-x: auto
       overflow-y: hidden
       position: cover
+
+    .board-overlay
+      position: cover
+      top: -100px
+      right: -400px
+      background: black
+      opacity: 0.33
+      animation: fadeIn 0.2s
+      z-index: 16
+
+    &.is-dragging-active
+      .open-minicard-composer,
+      .minicard-wrapper.is-checked
+        display: none

client/components/forms/forms.styl

@@ -110,7 +110,6 @@ button
   background: #cfcfcf
   background: linear-gradient(#cfcfcf, #c2c2c2)
   border: none
-  box-shadow: 0 1px 0 #8c8c8c
   cursor: pointer
   display: inline-block
   font-weight: 700

client/components/lists/list.styl

@@ -12,6 +12,7 @@
   height: 100%
   border-left: 1px solid darken(white, 20%)
   padding: 0
+  float: left
 
   &:first-child
     margin-left: 5px
@@ -35,27 +36,13 @@
     box-shadow: none
     height: 100px
 
-  &.list-composer, & list-composer
+  &.list-composer, & .list-composer
-    padding: 17px
+    .open-list-composer
-
+      color: #8c8c8c
-    form
-      margin-top: -5px
 
     .list-name-input
-      background: rgba(255, 255, 255, .4)
+      background: white
-      border-color: #aaa
+      margin: -3px 0 8px
-      display: block
-      margin: 0
-      transition: margin 85ms ease-in,
-        background 85ms ease-in
-      width: 100%
-
-    .edit-controls
-      height: 32px
-      transition: margin 85ms ease-in,
-        height 85ms ease-in
-      overflow: hidden
-      margin: 4px 0 0
 
 .list-header
   flex: 0 0 auto

client/components/lists/listHeader.jade

@@ -11,7 +11,7 @@ template(name="listHeader")
 
 template(name="editListTitleForm")
   .list-composer
-    input.full-line(type="text" value="{{../trySomething}}" autofocus)
+    input.list-name-input.full-line(type="text" value=title autofocus)
     .edit-controls.clearfix
       button.primary.confirm(type="submit") {{_ 'save'}}
       a.fa.fa-times-thin.js-close-inlined-form

client/components/sidebar/sidebar.styl

@@ -89,10 +89,10 @@
   height: @width
   left: -@width
   position: absolute
-  top: 12px
+  top: 0px
   z-index: 15
   background: darken(white, 3%)
-  border-radius: left 3px
+  border-bottom-left-radius: 3px
   box-shadow: -4px 0px 7px -4px darken(white, 30%)
   color: darken(white, 50%)
   transition: left .1s