fix(sidebar): Swap out + image, tweak CSS for unread

internal_packages/account-sidebar/lib/account-sidebar-section.cjsx

@@ -1,9 +1,10 @@
 React              = require 'react'
 _                  = require 'underscore'
 _str               = require 'underscore.string'
-{RetinaImg}        = require 'nylas-component-kit'
 AccountSidebarItem = require './account-sidebar-item'
 
+{RetinaImg,
+ DisclosureTriangle} = require 'nylas-component-kit'
 
 class AccountSidebarSection extends React.Component
   @displayName: "AccountSidebarSection"
@@ -36,9 +37,8 @@ class AccountSidebarSection extends React.Component
       onClick={@_onCreateButtonClicked.bind(@, label)}>
       <RetinaImg
         url="nylas://account-sidebar/assets/icon-sidebar-addcategory@2x.png"
-        fallback="icon-sidebar-addcategory.png"
         style={height: 14, width: 14}
-        mode={RetinaImg.Mode.ContentPreserve} />
+        mode={RetinaImg.Mode.ContentIsMask} />
     </div>
 
   _createItemInput: (section) ->
@@ -46,6 +46,7 @@ class AccountSidebarSection extends React.Component
     placeholder = "Create new #{label}"
     <span className="item-container">
       <div className="item add-item-container">
+        <DisclosureTriangle collapsed={false} visible={false} />
         <div className="icon">
           <RetinaImg
             name="#{section.iconName}"
@@ -58,6 +59,7 @@ class AccountSidebarSection extends React.Component
           className="input-bordered add-item-input"
           autoFocus={true}
           onKeyDown={_.partial @_onInputKeyDown, _, section}
+          onBlur={ => @setState(showCreateInput: false) }
           placeholder={placeholder}/>
       </div>
     </span>

internal_packages/account-sidebar/stylesheets/account-sidebar.less

@@ -1,6 +1,8 @@
 @import "ui-variables";
 @import "ui-mixins";
 
+@unread-count-color: fadeout(@text-color-subtle, 40%);
+
 #account-switcher,
 #account-sidebar {
   order: 1;
@@ -30,18 +32,19 @@
     display: inline-block;
     margin-left: @padding-small-horizontal;
     cursor: pointer;
+    img {background: @text-color-very-subtle; }
   }
 
   .add-item-container {
-    padding-left: @padding-small-horizontal;
     align-items: center;
 
     .add-item-input {
       order: 2;
       font-size: @font-size-small;
-      margin-left: @padding-small-horizontal * 0.85;
+      margin-left: @padding-small-horizontal * 0.3;
       height: 22px;
-      text-indent: 4px;
+      padding-left: 0;
+      text-indent: @padding-small-horizontal * 0.55;
       width: 85%;
     }
   }
@@ -108,9 +111,10 @@
       order: 3;
       flex-shrink: 0;
       font-weight: @font-weight-semi-bold;
-      color: fadeout(@text-color-subtle, 50%);
+      color: @unread-count-color;
       margin-left: @padding-small-horizontal * 0.8;
-      box-shadow: inset 0 0 1px @text-color-subtle;
+      box-shadow: 0 0.5px 0 @unread-count-color, 0 -0.5px 0 @unread-count-color, 0.5px 0 0 @unread-count-color, -0.5px 0 0 @unread-count-color;
+
     }
     .item-count-box.inbox {
       color: @source-list-active-bg;

src/flux/stores/unread-badge-store.coffee

@@ -26,9 +26,14 @@ class UnreadBadgeStore extends NylasStore
 
   _onCategoriesChanged: =>
     cat = CategoryStore.getStandardCategory('inbox')
-    return if @_category and cat.id is @_category.id
-    @_category = cat
-    @_updateCount()
+    if not cat
+      @_count = 0
+      @_category = null
+      @_setBadgeForCount()
+      @trigger()
+    else if not @_category or cat.id isnt @_category.id
+      @_category = cat
+      @_updateCount()
 
   _onCountsChanged: =>
     @_updateCount()