diff --git a/internal_packages/account-sidebar/assets/icon-sidebar-addcategory@2x.png b/internal_packages/account-sidebar/assets/icon-sidebar-addcategory@2x.png index e2afaa2cc..a151a8924 100644 Binary files a/internal_packages/account-sidebar/assets/icon-sidebar-addcategory@2x.png and b/internal_packages/account-sidebar/assets/icon-sidebar-addcategory@2x.png differ diff --git a/internal_packages/account-sidebar/lib/account-sidebar-section.cjsx b/internal_packages/account-sidebar/lib/account-sidebar-section.cjsx index 6360477dd..bc2adf7f3 100644 --- a/internal_packages/account-sidebar/lib/account-sidebar-section.cjsx +++ b/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)}> + mode={RetinaImg.Mode.ContentIsMask} /> _createItemInput: (section) -> @@ -46,6 +46,7 @@ class AccountSidebarSection extends React.Component placeholder = "Create new #{label}"
+
@setState(showCreateInput: false) } placeholder={placeholder}/>
diff --git a/internal_packages/account-sidebar/stylesheets/account-sidebar.less b/internal_packages/account-sidebar/stylesheets/account-sidebar.less index c1c8edc4b..833583676 100644 --- a/internal_packages/account-sidebar/stylesheets/account-sidebar.less +++ b/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; diff --git a/src/flux/stores/unread-badge-store.coffee b/src/flux/stores/unread-badge-store.coffee index 75f457a40..6fbb949e4 100644 --- a/src/flux/stores/unread-badge-store.coffee +++ b/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()