From 40f6eabdd9afa4b463877de09702c2a4adc87218 Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Thu, 12 Jul 2018 17:50:47 +0200
Subject: [PATCH] Make the sidebar badge red if there are unread messages

---
 app/lib/components/ToolArea/ToolAreaButton.jsx | 12 ++++++++----
 app/stylus/components/ToolArea.styl            |  4 ++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/lib/components/ToolArea/ToolAreaButton.jsx b/app/lib/components/ToolArea/ToolAreaButton.jsx
index b158ba4..f45c947 100644
--- a/app/lib/components/ToolArea/ToolAreaButton.jsx
+++ b/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
 	};
 };
 
diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl
index 16fe8c5..63f7327 100644
--- a/app/stylus/components/ToolArea.styl
+++ b/app/stylus/components/ToolArea.styl
@@ -32,6 +32,10 @@
 			width: 32px;
 		}
 
+		&.unread {
+			background-color: #b12525;
+		}
+
 		&.on {
 			background-color: rgba(#fff, 0.7);
 		}