From d88031e64dbae59e8391391be32f2c859c1cd6db Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Fri, 13 Jul 2018 09:57:08 +0200
Subject: [PATCH] Add circular icon for unread messages

---
 .../components/ToolArea/ToolAreaButton.jsx    | 11 +++++++---
 app/stylus/components/ToolArea.styl           | 20 ++++++++++++++-----
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/app/lib/components/ToolArea/ToolAreaButton.jsx b/app/lib/components/ToolArea/ToolAreaButton.jsx
index f45c947..fec5952 100644
--- a/app/lib/components/ToolArea/ToolAreaButton.jsx
+++ b/app/lib/components/ToolArea/ToolAreaButton.jsx
@@ -18,14 +18,19 @@ class ToolAreaButton extends React.Component
 			<div data-component='ToolAreaButton'>
 				<div
 					className={classnames('button', 'toolarea-button', {
-						on : toolAreaOpen,
-						unread
+						on : toolAreaOpen
 					})}
 					data-tip='Toggle tool area'
 					data-type='dark'
 					data-for='globaltip'
 					onClick={() => toggleToolArea()}
 				/>
+
+				{unread > 0 && (
+					<span className='badge'>
+						{unread}
+					</span>
+				)}
 			</div>
 		);
 	}
@@ -42,7 +47,7 @@ const mapStateToProps = (state) =>
 {
 	return {
 		toolAreaOpen : state.toolarea.toolAreaOpen,
-		unread       : state.toolarea.unread > 0
+		unread       : state.toolarea.unread
 	};
 };
 
diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl
index 63f7327..8c482e1 100644
--- a/app/stylus/components/ToolArea.styl
+++ b/app/stylus/components/ToolArea.styl
@@ -32,10 +32,6 @@
 			width: 32px;
 		}
 
-		&.unread {
-			background-color: #b12525;
-		}
-
 		&.on {
 			background-color: rgba(#fff, 0.7);
 		}
@@ -53,6 +49,21 @@
 			}
 		}
 	}
+
+	> .badge {
+		border-radius: 50%;
+    font-size: 1rem;
+    background: #b12525;
+    color: #fff;
+    text-align: center;
+    margin-top: -8px;
+    line-height: 1rem;
+    margin-right: -8px;
+    position: absolute;
+    padding: 0.2rem 0.4rem;
+    top: 0;
+    right: 0;
+	}
 }
 
 [data-component='ToolArea'] {
@@ -77,7 +88,6 @@
 			font-size: 1.3vmin;
 			height: 3vmin;
 
-
 			> .badge {
 				padding: 0.1vmin 1vmin;
 				text-align: center;