feat(composer): new composer footer and icon design

internal_packages/composer-templates/lib/template-picker.jsx

@@ -25,8 +25,6 @@ class TemplatePicker extends React.Component {
     if (this.unsubscribe) this.unsubscribe();
   }
 
-  static containerStyles = {order: 2};
-
   _filteredTemplates(search = this.state.searchValue) {
     const items = TemplateStore.items();
 
@@ -66,7 +64,7 @@ class TemplatePicker extends React.Component {
 
   render() {
     const button = (
-      <button className="btn btn-toolbar narrow">
+      <button className="btn btn-toolbar narrow" title="Insert email template">
         <RetinaImg url="nylas://composer-templates/assets/icon-composer-templates@2x.png" mode={RetinaImg.Mode.ContentIsMask}/>
         &nbsp;
         <RetinaImg name="icon-composer-dropdown.png" mode={RetinaImg.Mode.ContentIsMask}/>

internal_packages/composer-translate/lib/main.cjsx

@@ -71,8 +71,9 @@ class TranslateButton extends React.Component
   #
   _renderButton: =>
     <button className="btn btn-toolbar" title="Translate">
-      <RetinaImg mode={RetinaImg.Mode.ContentIsMask} url="nylas://composer-translate/assets/translate-icon@2x.png" />
-      <span style={fontSize: "9px", verticalAlign: "top"}>▼</span>
+      <RetinaImg mode={RetinaImg.Mode.ContentIsMask} url="nylas://composer-translate/assets/icon-composer-translate@2x.png" />
+      &nbsp;
+      <RetinaImg name="icon-composer-dropdown.png" mode={RetinaImg.Mode.ContentIsMask}/>
     </button>
 
   _onTranslate: (lang) =>

internal_packages/composer/lib/send-action-button.cjsx

@@ -8,8 +8,12 @@ class SendActionButton extends React.Component
 
   @propTypes:
     draft: React.PropTypes.object
+    style: React.PropTypes.object
     isValidDraft: React.PropTypes.func
 
+  @defaultProps:
+    style: {}
+
   @CONFIG_KEY: "core.sending.defaultSendType"
 
   constructor: (@props) ->

internal_packages/composer/stylesheets/composer.less

@@ -13,6 +13,9 @@ body.platform-win32 {
     .composer-drop-cover {
       border-radius: 0;
     }
+    .composer-action-bar-wrap {
+      border-radius: 0;
+    }
     input, input:focus {
       box-shadow: none;
     }
@@ -50,20 +53,40 @@ body.platform-win32 {
   .composer-action-bar-wrap {
     position: relative;
     width: 100%;
-    background: transparent;
+    background: @background-off-primary;
+    border-top: 1px solid darken(@background-off-primary, 7%);
+    box-shadow: inset 0px 2px 1px rgba(0,0,0,0.03);
     border-bottom: 0;
+    border-radius: @border-radius-base;
+
+    // Buttons in the composer footer
+    .btn.btn-toolbar {
+      background: transparent;
+      box-shadow: 0 0 0;
+      margin: 0;
+      padding: 0 9px;
+    }
+
+    .btn-send {
+      margin-right: 10px;
+    }
+
+    .btn img.content-mask {
+      background-color: #6b777d;
+    }
+
+    .btn.btn-enabled {
+      img.content-mask {
+        background-color: @text-color-link;
+      }
+    }
 
     .composer-action-bar-content {
       display:flex;
       margin: 0 auto;
       flex-direction:row;
       max-width: @compose-width;
-      padding: @spacing-standard;
-
-      > * {
-        margin-left: @spacing-standard / 2;
-        margin-right: @spacing-standard / 2;
-      }
+      padding: 9px 22.5px;
     }
   }
 

internal_packages/link-tracking/lib/link-tracking-button.jsx

@@ -44,10 +44,11 @@ export default class LinkTrackingButton extends React.Component {
   };
 
   render() {
+    const title = this.state.enabled ? "Disable" : "Enable"
     return (
       <button
-        title="Link Tracking"
-        className={`btn btn-toolbar ${this.state.enabled ? "btn-action" : ""}`}
+        title={`${title} link tracking`}
+        className={`btn btn-toolbar ${this.state.enabled ? "btn-enabled" : ""}`}
         onClick={this._onClick}>
         <RetinaImg
           url="nylas://link-tracking/assets/linktracking-icon@2x.png"

internal_packages/open-tracking/lib/open-tracking-button.jsx

@@ -45,9 +45,10 @@ export default class OpenTrackingButton extends React.Component {
   };
 
   render() {
-    return (<button className={`btn btn-toolbar ${this.state.enabled ? "btn-action" : ""}`}
-                   onClick={this._onClick} title="Open Tracking">
-      <RetinaImg url="nylas://open-tracking/assets/envelope-open-icon@2x.png"
+    const title = this.state.enabled ? "Disable" : "Enable";
+    return (<button className={`btn btn-toolbar ${this.state.enabled ? "btn-enabled" : ""}`}
+                   onClick={this._onClick} title={`${title} read receipts`}>
+      <RetinaImg url="nylas://open-tracking/assets/icon-composer-eye@2x.png"
                  mode={RetinaImg.Mode.ContentIsMask} />
     </button>)
   }

internal_packages/open-tracking/lib/open-tracking-icon.jsx

@@ -27,17 +27,11 @@ export default class OpenTrackingIcon extends React.Component {
   _renderIcon = () => {
     if (this.state.opened == null) {
       return <span />;
-    } else if (this.state.opened) {
-      return (
-        <RetinaImg
-          url="nylas://open-tracking/assets/envelope-open-icon@2x.png"
-          mode={RetinaImg.Mode.ContentIsMask} />
-      );
     }
     return (
       <RetinaImg
-        className="unopened"
-        url="nylas://open-tracking/assets/envelope-closed-icon@2x.png"
+        className={this.state.opened ? "opened" : "unopened"}
+        url="nylas://open-tracking/assets/icon-composer-eye@2x.png"
         mode={RetinaImg.Mode.ContentIsMask} />
     );
   };

internal_packages/quick-schedule/lib/calendar-button.cjsx

@@ -5,8 +5,8 @@ class CalendarButton extends React.Component
   @displayName: 'CalendarButton'
 
   render: =>
-    <button className="btn btn-toolbar" onClick={@_onClick} title="QuickSchedule">
-      <RetinaImg url="nylas://quick-schedule/assets/quickschedule-icon@2x.png" mode={RetinaImg.Mode.ContentIsMask} />
+    <button className="btn btn-toolbar" onClick={@_onClick} title="Quick schedule">
+      <RetinaImg url="nylas://quick-schedule/assets/icon-composer-quickschedule@2x.png" mode={RetinaImg.Mode.ContentIsMask} />
     </button>
 
   _onClick: =>

static/buttons.less

@@ -140,6 +140,7 @@ body.platform-win32 {
   &.narrow {
     padding: 0 9px;
   }
+
 }
 
 .btn-gradient {