feat(inbox-zero): add minimal graphic to inbox when no threads

internal_packages/thread-list/lib/empty-state.cjsx

@@ -6,6 +6,7 @@ classNames = require 'classnames'
  NylasAPI,
  NylasSyncStatusStore,
  Message,
+ FocusedPerspectiveStore,
  WorkspaceStore} = require 'nylas-exports'
 
 EmptyMessages = [{
@@ -64,6 +65,18 @@ class ContentQuotes extends React.Component
         </div>
       </div>
 
+class InboxZero extends React.Component
+  @displayName = "Inbox Zero"
+
+  render: ->
+    msg = @props.messageOverride ? "No more messages"
+    <div className="inbox-zero">
+      <div className="inbox-zero-plain">
+        <RetinaImg mode={RetinaImg.Mode.ContentPreserve}
+                   name="inbox-zero-plain.png"/>
+        <div className="message">Hooray! You’re done.</div>
+      </div>
+    </div>
 
 class EmptyState extends React.Component
   @displayName = 'EmptyState'
@@ -107,6 +120,9 @@ class EmptyState extends React.Component
     if @state.syncing
       messageOverride = "Please wait while we prepare your mailbox."
 
+    if FocusedPerspectiveStore.current()?.name is "Inbox"
+      ContentComponent = InboxZero
+
     classes = classNames
       'empty-state': true
       'visible': @props.visible

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

@@ -19,6 +19,26 @@
     height: 100%;
   }
 
+  .inbox-zero {
+    text-align: center;
+    position: relative;
+    .inbox-zero-plain {
+      position: relative;
+      top: 50%;
+      transform: translate(0, -50%);
+      img {
+      }
+      .message {
+        margin-top: 70px;
+      }
+    }
+    .message {
+      font-size: 28px;
+      color: @text-color-subtle;
+      font-weight: @font-weight-thin;
+    }
+  }
+
   // Generic Mode
   .generic {
     text-align: center;

static/variables/ui-variables.less

@@ -97,6 +97,7 @@
 @font-family-heading:     @font-family-sans-serif;
 
 // ----- Font Weights -----
+@font-weight-thin:        200;
 @font-weight-blond:       300;
 @font-weight-normal:      400;
 @font-weight-medium:      500;