feat: separate draft count and icon in sidebar

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;