Move draft bubble inline with menu icons

app/components/Sidebar/Main.js

@@ -42,6 +42,8 @@ class MainSidebar extends React.Component<Props> {
     const { user, team } = auth;
     if (!user || !team) return null;
 
+    const draftDocumentsCount = documents.drafts.length;
+
     return (
       <Sidebar>
         <AccountMenu
@@ -72,15 +74,17 @@ class MainSidebar extends React.Component<Props> {
               />
               <SidebarLink
                 to="/drafts"
-                icon={<EditIcon />}
+                icon={
+                  draftDocumentsCount > 0 && draftDocumentsCount < 10 ? (
+                    <Bubble count={draftDocumentsCount} />
+                  ) : (
+                    <EditIcon />
+                  )
+                }
+                label="Drafts"
                 active={
                   documents.active ? !documents.active.publishedAt : undefined
                 }
-                label={
-                  <React.Fragment>
-                    Drafts <Bubble count={documents.drafts.length} />
-                  </React.Fragment>
-                }
               />
             </Section>
             <Section>

app/components/Sidebar/components/Bubble.js

@@ -2,32 +2,39 @@
 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 !!count && <Wrapper>{count}</Wrapper>;
+  return (
+    <Wrapper align="center" justify="center">
+      <Count>{count}</Count>
+    </Wrapper>
+  );
 };
 
-const Wrapper = styled.div`
-  animation: ${fadeAndScaleIn} 200ms ease;
+const Wrapper = styled(Flex)`
+  width: 24px;
+  height: 24px;
+`;
 
+const Count = styled.div`
+  animation: ${fadeAndScaleIn} 200ms ease;
   border-radius: 100%;
   color: ${props => props.theme.white};
   background: ${props => props.theme.slateDark};
   display: inline-block;
-  font-feature-settings: "tnum";
-  font-weight: 500;
-  font-size: 10px;
-  min-width: 15px;
+  font-feature-settings: 'tnum';
+  font-weight: 600;
+  font-size: 9px;
+  line-height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+  text-align: center;
   padding: 0 4px;
-  position: relative;
-  top: -2px;
-  left: 2px;
-}
-
 `;
 
 export default Bubble;