Add circular icon for unread messages

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
 	};
 };
 

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;