From 9af194769b6ee106fe880d06b176fb0b3dee4c00 Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Thu, 12 Jul 2018 17:39:53 +0200
Subject: [PATCH] Style the unread message as a badge

---
 app/lib/components/ToolArea/ToolArea.jsx |  6 +++++-
 app/stylus/components/ToolArea.styl      | 14 +++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/lib/components/ToolArea/ToolArea.jsx b/app/lib/components/ToolArea/ToolArea.jsx
index 46b1d3d..0a5a2d7 100644
--- a/app/lib/components/ToolArea/ToolArea.jsx
+++ b/app/lib/components/ToolArea/ToolArea.jsx
@@ -35,7 +35,11 @@ class ToolArea extends React.Component
 						checked={currentToolTab === 'chat'}
 					/>
 					<label htmlFor='tab-chat'>
-						Chat ({unread} new)
+						Chat
+						
+						{unread > 0 && (
+							<span className='badge'>{unread}</span>
+						)}
 					</label>
 
 					<div className='tab'>
diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl
index d106d0b..16fe8c5 100644
--- a/app/stylus/components/ToolArea.styl
+++ b/app/stylus/components/ToolArea.styl
@@ -63,7 +63,7 @@
 		> label {
 			order: 1;
 			display: block;
-			padding: 1vmin 0 1vmin 0;
+			padding: 1vmin 0 0.8vmin 0;
 			cursor: pointer;
 			background: rgba(#000, 0.3);
 			font-weight: bold;
@@ -72,6 +72,18 @@
 			width: 33.33%;
 			font-size: 1.3vmin;
 			height: 3vmin;
+
+
+			> .badge {
+				padding: 0.1vmin 1vmin;
+				text-align: center;
+				font-weight: 300;
+				font-size: 1.2vmin;
+				color: #fff;
+				background-color: #b12525;
+				border-radius: 2px;
+				margin-left: 1vmin;
+			}
 		}
 
 		> .tab {