fix(SDW): Styling of various controls and buttons. See description

- Message reply dropdown uses new images. Fixes T2355
- New hover actions which are darker. Fixes T2358
- New reply icon in the message footer. Fixes T2359
- Toolbar buttons are the correct height. Fixes T2360
- Thread list selection state changes mail label style
- Removed dead assets

internal_packages/message-list/lib/message-controls.cjsx

@@ -1,7 +1,7 @@
 remote = require 'remote'
 React = require 'react'
 {Actions, NylasAPI, NamespaceStore} = require 'nylas-exports'
-{RetinaImg, ButtonDropdown} = require 'nylas-component-kit'
+{RetinaImg, ButtonDropdown, Menu} = require 'nylas-component-kit'
 
 class MessageControls extends React.Component
   @displayName: "MessageControls"
@@ -12,44 +12,38 @@ class MessageControls extends React.Component
   constructor: (@props) ->
 
   render: =>
-    button = []
-
-    if @_replyType() is "reply"
-      button = <ButtonDropdown
-        primaryItem={<RetinaImg name="reply-footer.png" mode={RetinaImg.Mode.ContentIsMask}/>}
-        primaryClick={@_onReply}
-        secondaryItems={@_secondaryMessageActions()}/>
-    else
-      button = <ButtonDropdown
-        primaryItem={<RetinaImg name="reply-all-footer.png" mode={RetinaImg.Mode.ContentIsMask}/>}
-        primaryClick={@_onReplyAll}
-        secondaryItems={@_secondaryMessageActions()}/>
-
     <div className="message-actions-wrap">
       <div className="message-actions-ellipsis" onClick={@_onShowActionsMenu}>
         <RetinaImg name={"message-actions-ellipsis.png"} mode={RetinaImg.Mode.ContentIsMask}/>
       </div>
-      {button}
+      <ButtonDropdown
+        primaryItem={<RetinaImg name="ic-message-button-reply.png" mode={RetinaImg.Mode.ContentIsMask}/>}
+        primaryClick={@_onReply}
+        menu={@_dropdownMenu()}/>
     </div>
 
-  _secondaryMessageActions: ->
-    if @_replyType() is "reply"
-      return [@_replyAllAction(), @_forwardAction()]
-    else #if "reply-all"
-      return [@_replyAction(), @_forwardAction()]
+  _dropdownMenu: ->
+    items = [{
+      name: 'Reply All',
+      image: 'ic-dropdown-replyall.png'
+      select: @_onReplyAll
+    },{
+      name: 'Forward',
+      image: 'ic-dropdown-forward.png'
+      select: @_onForward
+    }]
 
-  _forwardAction: ->
-    <span onClick={@_onForward}>
-      <RetinaImg name="icon-dropdown-forward.png" mode={RetinaImg.Mode.ContentIsMask}/>&nbsp;&nbsp;Forward
-    </span>
-  _replyAction: ->
-    <span onClick={@_onReply}>
-      <RetinaImg name="icon-dropdown-reply.png" mode={RetinaImg.Mode.ContentIsMask}/>&nbsp;&nbsp;Reply
-    </span>
-  _replyAllAction: ->
-    <span onClick={@_onReplyAll}>
-      <RetinaImg name="icon-dropdown-replyall.png" mode={RetinaImg.Mode.ContentIsMask}/>&nbsp;&nbsp;Reply All
-    </span>
+    itemContent = (item) ->
+      <span>
+        <RetinaImg name={item.image} mode={RetinaImg.Mode.ContentIsMask}/>
+        &nbsp;&nbsp;{item.name}
+      </span>
+
+    <Menu items={items}
+          itemKey={ (item) -> item.name }
+          itemContent={itemContent}
+          onSelect={ (item) => item.select() }
+          />
 
   _onReply: =>
     Actions.composeReply(thread: @props.thread, message: @props.message)
@@ -124,18 +118,3 @@ class MessageControls extends React.Component
 
 
 module.exports = MessageControls
-
-      # <InjectedComponentSet className="message-actions"
-      #                       inline={true}
-      #                       matching={role:"MessageAction"}
-      #                       exposedProps={thread:@props.thread, message: @props.message}>
-      #   <button className="btn btn-icon" onClick={@_onReply}>
-      #     <RetinaImg name={"message-reply.png"} mode={RetinaImg.Mode.ContentIsMask}/>
-      #   </button>
-      #   <button className="btn btn-icon" onClick={@_onReplyAll}>
-      #     <RetinaImg name={"message-reply-all.png"} mode={RetinaImg.Mode.ContentIsMask}/>
-      #   </button>
-      #   <button className="btn btn-icon" onClick={@_onForward}>
-      #     <RetinaImg name={"message-forward.png"} mode={RetinaImg.Mode.ContentIsMask}/>
-      #   </button>
-      # </InjectedComponentSet>

internal_packages/mode-switch/stylesheets/mode-switch.less

@@ -3,7 +3,7 @@
 .mode-toggle {
     z-index: 1000;
     position: relative;
-    padding-top:5px;
+    padding-top:4px;
     .content-mask {
       background-color: @text-color-subtle;
     }

internal_packages/thread-list/stylesheets/thread-list.less

@@ -25,6 +25,15 @@
   .thread-icon, .draft-icon {
     -webkit-filter: brightness(600%) grayscale(100%);
   }
+
+  .mail-label {
+    // Note - these !important styles override values set by a style tag
+    // since the color of the label is detemined programatically.
+    background: none !important;
+    box-shadow: 0 0.5px 0 @text-color-inverse, 0 -0.5px 0 @text-color-inverse, 0.5px 0 0 @text-color-inverse, -0.5px 0 0 @text-color-inverse !important;
+    -webkit-filter: brightness(600%) grayscale(100%);
+  }
+
 }
 
 // STYLES
@@ -193,21 +202,21 @@
     display:inline-block;
     background-size: 100%;
     zoom:0.5;
-    width:48px;
-    height:48px;
+    width:42px;
+    height:42px;
     margin:16px;
   }
   .action:last-child {
     margin-right:40px;
   }
   .action.action-reply {
-    background: url(../static/images/toolbar/toolbar-reply@2x.png) top left no-repeat;
+    background: url(../static/images/thread-list-quick-actions/ic-quick-button-reply@2x.png) top left no-repeat;
   }
   .action.action-forward {
-    background: url(../static/images/toolbar/toolbar-forward@2x.png) top left no-repeat;
+    background: url(../static/images/thread-list-quick-actions/ic-quick-button-forward@2x.png) top left no-repeat;
   }
   .action.action-archive {
-    background: url(../static/images/toolbar/toolbar-archive@2x.png) top left no-repeat;
+    background: url(../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png) top left no-repeat;
   }
 }
 .thread-list .list-item:hover .list-column-HoverActions {

src/components/button-dropdown.cjsx

@@ -7,23 +7,24 @@ class ButtonDropdown extends React.Component
   @propTypes:
     primaryItem: React.PropTypes.element
     primaryClick: React.PropTypes.func
-    secondaryItems: React.PropTypes.arrayOf(React.PropTypes.element)
+    menu: React.PropTypes.element
 
   constructor: (@props) ->
     @state = showing: false
 
   render: =>
-    <div ref="button" onBlur={@_onBlur} tabIndex={999} className="#{@props.className ? ''} button-dropdown" >
+    classnames = "button-dropdown #{@props.className ? ''}"
+    classnames += "open" if @state.showing
+
+    <div ref="button" onBlur={@_onBlur} tabIndex={999} className={classnames}>
       <div className="primary-item" onClick={@props.primaryClick}>
         {@props.primaryItem}
       </div>
       <div className="secondary-picker" onClick={@_toggleDropdown}>
         <RetinaImg name={"icon-thread-disclosure.png"} mode={RetinaImg.Mode.ContentIsMask}/>
       </div>
-      <div className="secondary-items" style={display: if @state.showing then "block" else "none"}>
-        {@props.secondaryItems.map (item) ->
-          <div key={Utils.generateTempId()} className="secondary-item">{item}</div>
-        }
+      <div className="secondary-items">
+        {@props.menu}
       </div>
     </div>
 

static/components/button-dropdown.less

@@ -3,11 +3,22 @@
 .button-dropdown {
   position: relative;
   display: inline-block;
+
+  &.open {
+    .secondary-picker {
+      border-bottom-right-radius: 0;
+    }
+    .secondary-items {
+      display:block;
+    }
+  }
+
   .primary-item {
     .btn();
     height: 32px;
     border-radius: 4px 0 0 4px;
     padding-top: 7px;
+    vertical-align:top;
   }
   .secondary-picker {
     .btn();
@@ -15,6 +26,8 @@
     border-radius: 0 4px 4px 0;
     border-left: 0;
     padding: 7px 8px 3px 8px;
+    vertical-align:top;
+    img { vertical-align: baseline; }
   }
   .secondary-items {
     &:hover {
@@ -28,26 +41,43 @@
     line-height: 14px;
     position: absolute;
     width: 110px;
-    right: 0;
+    right: -1px; // -1, because of the border above
 
-    .secondary-item {
-      padding: 6px 15px;
-      img {
-        margin-right:4px;
-        vertical-align: text-bottom;
+    display:none;
+
+    .menu {
+      .footer-container,
+      .header-container {
+        display:none;
+      }
+      .content-container {
+        background: transparent;
+        margin-top:0;
+      }
+      .item {
+        padding: 6px 15px;
+        img {
+          margin-right:4px;
+          vertical-align: text-bottom;
+        }
+        &.selected {
+          background-color: inherit;
+          color:@text-color;
+        }
+      }
+      .item:first-child {
+        padding-top: 9px;
+        border-top-left-radius: 4px;
+      }
+      .item:last-child {
+        padding-bottom: 9px;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+      .item:hover {
+        background-color: darken(@background-primary, 3%);
+        color:inherit;
       }
-    }
-    .secondary-item:first-child {
-      padding-top: 9px;
-      border-top-left-radius: 4px;
-    }
-    .secondary-item:last-child {
-      padding-bottom: 9px;
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
-    }
-    .secondary-item:hover {
-      background-color: darken(@background-primary, 3%);
     }
   }
   img {

static/workspace.less

@@ -202,11 +202,11 @@ body.is-blurred {
   }
 
   .btn-toolbar {
-    margin-top: @spacing-half;
+    margin-top: @spacing-three-quarters;
     margin-left: @spacing-three-quarters;
     margin-right: @spacing-three-quarters;
     flex-shrink: 0;
-    height:32px;
+    height:28px;
   }
   .btn-toolbar:last-child {
     margin-left: 0;