Redesign the card design header and change header menu icon

client/components/cards/cardDetails.jade

@@ -7,19 +7,12 @@ template(name="cardDetails")
           button.primary.confirm(type="submit") {{_ 'save'}}
           a.fa.fa-times-thin.js-close-inlined-form
       else
-        a.fa.fa-angle-left.close-card-details.js-close-card-details
+        a.fa.fa-times-thin.close-card-details.js-close-card-details
         if currentUser.isBoardMember
-          a.fa.fa-bars.card-details-menu.js-open-card-details-menu
+          a.fa.fa-ellipsis-v.card-details-menu.js-open-card-details-menu
         h2.card-details-title.js-card-title(
           class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}")
             = title
-        p.card-details-list
-          | {{_ 'in-list'}}
-          a.card-details-list-title(
-            class="{{#if currentUser.isBoardMember}}js-move-card is-editable{{/if}}")
-            = list.title
-            if currentUser.isBoardMember
-              i.fa.fa-chevron-down
 
     .card-details-items
       .card-details-item.card-details-item-members
@@ -79,7 +72,7 @@ template(name="cardDetailsActionsPopup")
     li: a.js-attachments Edit Attachments…
   hr
   ul.pop-over-list
-    li: a.js-copy Copy Card
+    li: a.js-move-card Move card
     unless archived
       li: a.js-archive Archive Card
     li: a.js-more More

client/components/cards/cardDetails.js

@@ -56,7 +56,6 @@ BlazeComponent.extendComponent({
       'click .js-close-card-details': function() {
         Utils.goBoardId(this.data().boardId);
       },
-      'click .js-move-card': Popup.open('moveCard'),
       'click .js-open-card-details-menu': Popup.open('cardDetailsActions'),
       'submit .js-card-description': function(evt) {
         evt.preventDefault();
@@ -85,6 +84,7 @@ Template.cardDetailsActionsPopup.events({
   'click .js-members': Popup.open('cardMembers'),
   'click .js-labels': Popup.open('cardLabels'),
   'click .js-attachments': Popup.open('cardAttachments'),
+  'click .js-move-card': Popup.open('moveCard'),
   // 'click .js-copy': Popup.open(),
   'click .js-archive': function(evt) {
     evt.preventDefault();

client/components/cards/cardDetails.styl

@@ -7,7 +7,7 @@
   flex-basis: 470px
   will-change: flex-basis
   overflow: hidden
-  background: darken(white, 2%)
+  background: darken(white, 3%)
   border-radius: bottom 3px
   z-index: 20 !important
   animation: flexGrowIn 0.1s
@@ -19,30 +19,30 @@
 
   .card-details-header
     margin: 0 -20px 5px
-    padding 7px 20px 0
-    border-bottom: 1px solid darken(white, 10%)
-    min-height: 38px
-    position: relative
+    padding 7px 16px
+    background: darken(white, 7%)
+    border-bottom: 1px solid darken(white, 14%)
+
+    .close-card-details,
+    .card-details-menu
+      float: right
 
     .close-card-details
-      float: left
       font-size: 24px
-      padding: 8px
-      padding-right: 11px
-      margin-left: -18px
+      padding: 5px
+      margin-right: -8px
 
     .card-details-menu
-      float: right
-      position: absolute
-      bottom: 6px
-      right: 15px
+      font-size: 17px
+      padding: 10px
 
     .card-details-title
       font-weight: bold
       font-size: 1.33em
-      margin: 3px 0
+      margin: 7px 0 0
       padding: 0
 
+
     form.inlined-form
       margin-top: 5px
       margin-bottom: 10px

client/components/cards/minicard.styl

@@ -52,10 +52,10 @@
   &:hover:not(.minicard-composer),
   .is-selected &,
   .draggable-hover-card &
-    background: darken(white, 2%)
+    background: darken(white, 3%)
 
   .draggable-hover-card &
-    background: darken(white, 4%)
+    background: darken(white, 7%)
 
   .minicard-cover
     background-position: center

client/components/lists/list.styl

@@ -81,6 +81,7 @@
   .list-header-menu-icon
     position: absolute
     padding: 7px
+    margin-top: 1px
     top: -@padding
     right: -@padding
 

client/components/lists/listHeader.jade

@@ -7,7 +7,7 @@ template(name="listHeader")
         class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}")
         = title
       if currentUser.isBoardMember
-        a.list-header-menu-icon.fa.fa-bars.js-open-list-menu
+        a.list-header-menu-icon.fa.fa-ellipsis-v.js-open-list-menu
 
 template(name="editListTitleForm")
   .list-composer

i18n/en.i18n.json

@@ -192,6 +192,7 @@
     "changePasswordPopup-title": "Change Password",
     "avatar-too-big": "The avatar is too large (70Kb max)",
     "cardDetailsActionsPopup-title": "Card Actions",
+    "moveCardPopup-title": "Move Card",
     "disambiguateMultiLabelPopup-title": "Disambiguate Label Action",
     "disambiguateMultiMemberPopup-title": "Disambiguate Member Action"
 }