Make the sidebar badge red if there are unread messages

app/lib/components/ToolArea/ToolAreaButton.jsx

@@ -10,14 +10,16 @@ class ToolAreaButton extends React.Component
 	{
 		const {
 			toolAreaOpen,
-			toggleToolArea
+			toggleToolArea,
+			unread
 		} = this.props;
 
 		return (
 			<div data-component='ToolAreaButton'>
 				<div
 					className={classnames('button', 'toolarea-button', {
-						on : toolAreaOpen
+						on : toolAreaOpen,
+						unread
 					})}
 					data-tip='Toggle tool area'
 					data-type='dark'
@@ -32,13 +34,15 @@ class ToolAreaButton extends React.Component
 ToolAreaButton.propTypes =
 {
 	toolAreaOpen   : PropTypes.bool.isRequired,
-	toggleToolArea : PropTypes.func.isRequired
+	toggleToolArea : PropTypes.func.isRequired,
+	unread         : PropTypes.bool.isRequired
 };
 
 const mapStateToProps = (state) =>
 {
 	return {
-		toolAreaOpen : state.toolarea.toolAreaOpen
+		toolAreaOpen : state.toolarea.toolAreaOpen,
+		unread       : state.toolarea.unread > 0
 	};
 };
 

app/stylus/components/ToolArea.styl

@@ -32,6 +32,10 @@
 			width: 32px;
 		}
 
+		&.unread {
+			background-color: #b12525;
+		}
+
 		&.on {
 			background-color: rgba(#fff, 0.7);
 		}