From c18e4cd43ebe212bd1dd9a37997abfcbc1cfcedd Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 5 Aug 2019 23:17:41 -0700
Subject: [PATCH] feat: separate draft count and icon in sidebar

---
 app/components/Sidebar/Main.js              | 19 ++++++++++++-------
 app/components/Sidebar/components/Bubble.js | 13 ++-----------
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/app/components/Sidebar/Main.js b/app/components/Sidebar/Main.js
index 363dbb37..b8f168c5 100644
--- a/app/components/Sidebar/Main.js
+++ b/app/components/Sidebar/Main.js
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
 import { observer, inject } from 'mobx-react';
+import styled from 'styled-components';
 import {
   ArchiveIcon,
   HomeIcon,
@@ -98,14 +99,14 @@ class MainSidebar extends React.Component<Props> {
               />
               <SidebarLink
                 to="/drafts"
-                icon={
-                  draftDocumentsCount > 0 && draftDocumentsCount < 10 ? (
-                    <Bubble count={draftDocumentsCount} />
-                  ) : (
-                    <EditIcon />
-                  )
+                icon={<EditIcon />}
+                label={
+                  <Drafts align="center">
+                    Drafts{draftDocumentsCount > 0 && (
+                      <Bubble count={draftDocumentsCount} />
+                    )}
+                  </Drafts>
                 }
-                label="Drafts"
                 active={
                   documents.active ? !documents.active.publishedAt : undefined
                 }
@@ -146,4 +147,8 @@ class MainSidebar extends React.Component<Props> {
   }
 }
 
+const Drafts = styled(Flex)`
+  height: 24px;
+`;
+
 export default inject('documents', 'auth', 'ui')(MainSidebar);
diff --git a/app/components/Sidebar/components/Bubble.js b/app/components/Sidebar/components/Bubble.js
index 5eb325de..a2574c70 100644
--- a/app/components/Sidebar/components/Bubble.js
+++ b/app/components/Sidebar/components/Bubble.js
@@ -2,25 +2,15 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { fadeAndScaleIn } from 'shared/styles/animations';
-import Flex from 'shared/components/Flex';
 
 type Props = {
   count: number,
 };
 
 const Bubble = ({ count }: Props) => {
-  return (
-    <Wrapper align="center" justify="center">
-      <Count>{count}</Count>
-    </Wrapper>
-  );
+  return <Count>{count}</Count>;
 };
 
-const Wrapper = styled(Flex)`
-  width: 24px;
-  height: 24px;
-`;
-
 const Count = styled.div`
   animation: ${fadeAndScaleIn} 200ms ease;
   border-radius: 100%;
@@ -35,6 +25,7 @@ const Count = styled.div`
   min-height: 16px;
   text-align: center;
   padding: 0 4px;
+  margin-left: 8px;
 `;
 
 export default Bubble;