feat: improve physicality of draft bubble (it's the little details)

app/components/Sidebar/components/Bubble.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-import { fadeAndScaleIn } from 'shared/styles/animations';
+import { bounceIn } from 'shared/styles/animations';
 
 type Props = {
   count: number,
@@ -12,7 +12,8 @@ const Bubble = ({ count }: Props) => {
 };
 
 const Count = styled.div`
-  animation: ${fadeAndScaleIn} 200ms ease;
+  animation: ${bounceIn} 600ms;
+  transform-origin: center center;
   border-radius: 100%;
   color: ${props => props.theme.white};
   background: ${props => props.theme.slateDark};
@@ -21,11 +22,14 @@ const Count = styled.div`
   font-weight: 600;
   font-size: 9px;
   line-height: 16px;
+  white-space: nowrap;
+  vertical-align: baseline;
   min-width: 16px;
   min-height: 16px;
   text-align: center;
   padding: 0 4px;
   margin-left: 8px;
+  user-select: none;
 `;
 
 export default Bubble;