fix(composer): Redo toolbar styling with theme variables + minor fixes

build/config/eslint.json

@@ -11,7 +11,7 @@
   },
   "rules": {
     "react/prop-types": [2, {"ignore": ["children"]}],
-    "react/no-multi-comp": [1],
+    "react/no-multi-comp": [0],
     "eqeqeq": [2, "smart"],
     "id-length": [0],
     "object-curly-spacing": [0],

internal_packages/composer/stylesheets/composer.less

@@ -6,7 +6,8 @@
 @compose-width: 800px;
 @compose-min-height: 150px;
 
-@blurred-bg-color: mix(@background-primary, #ffbb00, 96%);
+@blurred-primary-color: mix(@background-primary, #ffbb00, 96%);
+@blurred-off-primary-color: mix(@background-off-primary, #ffbb00, 96%);
 
 body.platform-win32 {
   .composer-inner-wrap {
@@ -15,11 +16,6 @@ body.platform-win32 {
     }
     .composer-action-bar-wrap {
       border-radius: 0;
-      .btn.btn-toolbar {
-        &.btn-emphasis {
-          .btn.btn-emphasis;
-        }
-      }
     }
     input, input:focus {
       box-shadow: none;
@@ -65,14 +61,25 @@ body.platform-win32 {
     border-radius: @border-radius-base;
 
     // Buttons in the composer footer
-    .btn.btn-toolbar {
+    .btn.btn-toolbar:not(.btn-emphasis) {
       background: transparent;
       box-shadow: 0 0 0;
       margin: 0;
       padding: 0 9px;
 
-      &.btn-emphasis {
-        .btn.btn-emphasis;
+      img.content-mask {
+        background-color: fadeout(mix(@btn-default-text-color, @component-active-color, 88%), 30%);
+      }
+      &:hover {
+        img.content-mask {
+          background-color: fadeout(mix(@btn-default-text-color, @component-active-color, 88%), 5%);
+        }
+      }
+      &.btn-enabled {
+        color: @component-active-color;
+        img.content-mask {
+          background-color: @component-active-color;
+        }
       }
     }
 
@@ -80,16 +87,6 @@ body.platform-win32 {
       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;
@@ -313,9 +310,16 @@ body.platform-win32 {
 #message-list {
   .message-item-wrap {
     .message-item-white-wrap.composer-outer-wrap {
-      background: @blurred-bg-color;
+      background: @blurred-primary-color;
+
+      .btn.btn-toolbar.btn-trash {
+        padding-right: 0;
+      }
       .show-more-fade {
-        background: linear-gradient(to right, fade(@blurred-bg-color, 0%) 0%, fade(@blurred-bg-color, 100%) 40%);
+        background: linear-gradient(to right, fade(@blurred-primary-color, 0%) 0%, fade(@blurred-primary-color, 100%) 40%);
+      }
+      .composer-action-bar-wrap {
+        background: @blurred-off-primary-color;
       }
     }
     .message-item-white-wrap.composer-outer-wrap.focused {
@@ -324,6 +328,9 @@ body.platform-win32 {
       .show-more-fade {
         background: linear-gradient(to right, fade(@background-primary, 0%) 0%, fade(@background-primary, 100%) 40%);
       }
+      .composer-action-bar-wrap {
+        background: @background-off-primary;
+      }
     }
   }
 }

internal_packages/preferences/stylesheets/preferences.less

@@ -29,7 +29,7 @@
   }
 
   .preferences-sidebar {
-    background: @background-secondary;
+    background-color: @source-list-bg;
     border-right: 1px solid @border-color-divider;
     flex: 1;
     max-width:350px;

internal_packages/send-later/lib/send-later-popover.jsx

@@ -21,9 +21,6 @@ const SendLaterOptions = {
 
 class SendLaterPopover extends Component {
   static displayName = 'SendLaterPopover';
-  static containerStyles = {
-    order: -99,
-  };
 
   static propTypes = {
     draftClientId: PropTypes.string,
@@ -50,7 +47,6 @@ class SendLaterPopover extends Component {
 
   componentWillUnmount() {
     this._subscription.dispose();
-    this.unsubscribe();
   }
 
   onSelectMenuOption = (optionKey)=> {
@@ -85,7 +81,7 @@ class SendLaterPopover extends Component {
         <input
           tabIndex={1}
           type="text"
-          placeholder="Or type a time"
+          placeholder="Or type a time..."
           onChange={event=> updateInputDateValue(event.target.value)}/>
         {dateInterpretation}
       </div>
@@ -102,6 +98,7 @@ class SendLaterPopover extends Component {
 
   renderButton() {
     const {scheduledDate} = this.state;
+    let className = 'btn btn-toolbar btn-send-later';
 
     if (scheduledDate === 'saving') {
       return (
@@ -114,10 +111,9 @@ class SendLaterPopover extends Component {
       );
     }
 
-    let className = 'btn btn-toolbar btn-send-later';
     let dateInterpretation = false;
     if (scheduledDate) {
-      className += ' scheduled';
+      className += ' btn-enabled';
       const momentDate = DateUtils.fromString(scheduledDate);
       if (momentDate) {
         dateInterpretation = <span className="at">Sending in {momentDate.fromNow(true)}</span>;
@@ -168,4 +164,8 @@ class SendLaterPopover extends Component {
 
 }
 
+SendLaterPopover.containerStyles = {
+  order: -99,
+};
+
 export default SendLaterPopover

internal_packages/send-later/lib/send-later-store.js

@@ -20,6 +20,9 @@ class SendLaterStore extends NylasStore {
   }
 
   getScheduledDateForMessage = (message)=> {
+    if (!message) {
+      return null;
+    }
     const metadata = message.metadataForPluginId(this.pluginId) || {};
     return metadata.sendLaterDate || null;
   };
@@ -36,7 +39,7 @@ class SendLaterStore extends NylasStore {
       })
       .catch((error)=> {
         NylasEnv.reportError(error);
-        NylasEnv.showErrorDialog(error.message);
+        NylasEnv.showErrorDialog(`Sorry, we were unable to schedule this message. ${error.message}`);
       })
     );
   };

internal_packages/send-later/stylesheets/send-later.less

@@ -35,6 +35,9 @@
   }
   .custom-time-section {
     padding: @padding-base-vertical  @padding-base-horizontal;
+    em {
+      color: @text-color-subtle;
+    }
   }
   .cancel-section {
     padding: @padding-base-vertical  @padding-base-horizontal;
@@ -46,12 +49,8 @@
 }
 
 .btn-send-later {
-  &.scheduled {
-    img { background-color: @component-active-color; margin-right: 5px; }
-    color: @component-active-color;
-    .at {
-      margin-left: 3px;
-    }
+  .at {
+    margin-left: 3px;
   }
 }
 

src/components/list-tabular.cjsx

@@ -80,6 +80,13 @@ class ListTabular extends React.Component
           idx: previousIdx
           end: Date.now() + 125
 
+      # If we think /all/ the items are animating out, or a lot of them,
+      # the user probably switched to an entirely different perspective.
+      # Don't bother trying to animate.
+      animatingCount = Object.keys(animatingOut).length
+      if animatingCount > 8 or animatingCount is Object.keys(@state.items).length
+        animatingOut = {}
+
     renderedRangeStart: start
     renderedRangeEnd: end
     count: dataSource.count()

static/components/menu.less

@@ -88,7 +88,6 @@
   .item:not(.active):not(.selected):hover {
     text-decoration: none;
     background-color: fade(@black, 3%);
-    color:inherit;
   }
 
 }

static/components/popover.less

@@ -34,8 +34,9 @@
     input[type=text] {
       border: 1px solid darken(@background-secondary, 10%);
       border-radius: 3px;
-      background-color: white;
+      background-color: @background-primary;
       box-shadow: inset 0 1px 0 rgba(0,0,0,0.05), 0 1px 0 rgba(0,0,0,0.05);
+      color: @text-color;
 
       &.search {
         padding-left: 0;