Change color of Todos badge

For now the Todos badge has the background color of #f8f8f8 which is fine if there's 0 todos.
But if there's 1 or more todos available, that badge does not attracts attention to itself.
What if we change the background color of Todos badge, say, to orange (#e75e40) if there's 1 or more todos available?

/cc @grzesiek, @skyruler

Added ~14281 feature proposal todos labels

@blackst0ne Thanks, we will consider changing it. What do you think @dbalexandre?

@grzesiek I think that makes sense. Wdyt @jschatz1 ? /cc @blackst0ne

Added frontend label

@dbalexandre red is danger. If we were going to change the color it would have to be a blue (or something like that) as blue demands a primary action. I'll defer to @dzaporozhets. Your thoughts dz?

@jschatz1 according to colour - grey if zero, blue if 1+.

According to counter itself - its not clear what are those numbers. Just number "3" near logout button makes no sense to me. In design it was an icon instead of numbers. Like http://fortawesome.github.io/Font-Awesome/icon/bell-o/. Since you already touch this subject can you improve it by adding icon to counter. Example:

cc @skyruler

@jschatz1 in future when left sidebar will be static and "Todo" with counter will always be visible in it - we can leave only icon and remove counter completely

@dzaporozhets, talking about a bell icon, it is closer to Notifications , not to Todos. Don't you think so?

@blackst0ne we use bell icon in sidebar for Todo's menu. So for consistency we should use same icon

In future we might change it to something more meaningful

@dzaporozhets I agree! Let's make it clear that these numbers apply to todos. I like your design. I just wanted to make sure it didn't take up too much vertical space!

Also I wanted to make sure that it draws attention. I made three mockups with three different colors. I think the orange draws the most attention but I think the green is the most positive. Your thoughts @dzaporozhets?

Here's some quick and dirty HTML and CSS as inline styles.

<a title="" data-toggle="tooltip" data-placement="bottom" data-container="body" href="/dashboard/todos" data-original-title="Todos">
  <i class="fa fa-bell"></i>
  <span class="todos-pending-count" style="
    background: #428bca;
    margin-left: -13px;
    font-size: 11px;
    color: white;
    padding: 3px;
    padding-top: 1px;
    padding-bottom: 1px;
    border-radius: 3px;
">
35
</span>
</a>

@jschatz1 I like your draws. Blue or green.

Milestone changed to 8.8

Aww shucks thanks @dzaporozhets. This is an easy one to knock out and get some UX brownie points for. Let's go for blue. This is the standard blue we use.

@jschatz1 great. Blue is more common for such things across other apps

mentioned in merge request !4077 (merged)

Status changed to closed by commit ecd7c1d2

mentioned in commit ecd7c1d2