From f3eb899dc47439c2a71686ac3374567098ba5e07 Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Fri, 13 Jul 2018 10:07:14 +0200
Subject: [PATCH] Make the badge more oblong shaped for larger numbers

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

diff --git a/app/lib/components/ToolArea/ToolAreaButton.jsx b/app/lib/components/ToolArea/ToolAreaButton.jsx
index fec5952..3133f9c 100644
--- a/app/lib/components/ToolArea/ToolAreaButton.jsx
+++ b/app/lib/components/ToolArea/ToolAreaButton.jsx
@@ -27,7 +27,7 @@ class ToolAreaButton extends React.Component
 				/>
 
 				{unread > 0 && (
-					<span className='badge'>
+					<span className={classnames('badge', { long: unread >= 10 })}>
 						{unread}
 					</span>
 				)}
diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl
index 8c482e1..a8de7c1 100644
--- a/app/stylus/components/ToolArea.styl
+++ b/app/stylus/components/ToolArea.styl
@@ -63,6 +63,10 @@
     padding: 0.2rem 0.4rem;
     top: 0;
     right: 0;
+
+		&.long {
+			border-radius: 25% / 50%;
+		}
 	}
 }