Add arrow up icon in the right of the plus icon

client/components/boards/boardColors.styl

@@ -876,7 +876,7 @@ setBoardClear(color1,color2)
     padding: 10px
     top: 0
 
-  .list-header .list-header-plus-icon
+  .list-header .list-header-plus-top
     color: #a6a6a6
 
   .list-body

client/components/lists/list.styl

@@ -91,7 +91,7 @@
     top: -7px
     right: 3px
 
-  .list-header-plus-icon,.list-header-plus-square-icon
+  .list-header-plus-top,.list-header-plus-bottom
     color: #a6a6a6
     margin-right: 15px
 
@@ -102,16 +102,22 @@
     color: #8c8c8c
     font-size: 0.8em
 
-.list-header .list-header-plus-icon, .list-header .list-header-plus-square-icon, .js-open-list-menu, .list-header-menu a
+.list-header .list-header-plus-top, .list-header .list-header-plus-bottom, .js-open-list-menu, .list-header-menu a
     color #4d4d4d
     padding-left 4px
 
-.list-header-plus-square-icon
+.list-header-plus-bottom
   border: 1px solid #a6a6a6
 
   a
     padding: 0px
 
+.list-header-plus-top
+  border: 1px solid #4d4d4d
+
+  a
+    padding: 0px
+
   .fa.fa-arrow-down
     padding-right: 1px
 

client/components/lists/listHeader.jade

@@ -28,10 +28,12 @@ template(name="listHeader")
           div.list-header-menu
             unless currentUser.isCommentOnly
               if canSeeAddCard
-                a.js-add-card.list-header-plus-square-icon(title="{{_ 'add-card-to-bottom-of-list'}}")
+                a.js-add-card.list-header-plus-bottom(title="{{_ 'add-card-to-bottom-of-list'}}")
                   a.fa.fa-plus
                   a.fa.fa-arrow-down
-                a.js-add-card.fa.fa-plus.list-header-plus-icon(title="{{_ 'add-card-to-top-of-list'}}")
+                a.js-add-card.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}")
+                  a.fa.fa-plus
+                  a.fa.fa-arrow-up
               a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}")
         else
           a.list-header-menu-icon.fa.fa-angle-right.js-select-list
@@ -42,12 +44,14 @@ template(name="listHeader")
         div.list-header-menu
           unless currentUser.isCommentOnly
             //if isBoardAdmin
-            //  a.fa.js-list-star.list-header-plus-icon(class="fa-star{{#unless starred}}-o{{/unless}}")
+            //  a.fa.js-list-star.list-header-plus-top(class="fa-star{{#unless starred}}-o{{/unless}}")
             if canSeeAddCard
-              a.js-add-card.list-header-plus-square-icon(title="{{_ 'add-card-to-bottom-of-list'}}")
+              a.js-add-card.list-header-plus-bottom(title="{{_ 'add-card-to-bottom-of-list'}}")
                 a.fa.fa-plus
                 a.fa.fa-arrow-down
-              a.js-add-card.fa.fa-plus.list-header-plus-icon(title="{{_ 'add-card-to-top-of-list'}}")
+              a.js-add-card.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}")
+                a.fa.fa-plus
+                a.fa.fa-arrow-up
             a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}")
           if currentUser.isBoardAdmin
             if isShowDesktopDragHandles

client/components/lists/listHeader.js

@@ -101,7 +101,7 @@ BlazeComponent.extendComponent({
           this.starred(!this.starred());
         },
         'click .js-open-list-menu': Popup.open('listAction'),
-        'click .js-add-card.fa-plus'(event) {
+        'click .js-add-card.list-header-plus-top'(event) {
           const listDom = $(event.target).parents(
             `#js-list-${this.currentData()._id}`,
           )[0];
@@ -110,7 +110,7 @@ BlazeComponent.extendComponent({
             position: 'top',
           });
         },
-        'click .js-add-card.list-header-plus-square-icon'(event) {
+        'click .js-add-card.list-header-plus-bottom'(event) {
           const listDom = $(event.target).parents(
             `#js-list-${this.currentData()._id}`,
           )[0];