Move collaborators to top right (#201)

* Hopefully the last time we rejig this before launch

* Improved spacing

* Move to injectGlobal, alignment fixes

frontend/scenes/Document/Document.js

@@ -6,7 +6,6 @@ import { observer, inject } from 'mobx-react';
 import { withRouter, Prompt } from 'react-router';
 import Flex from 'components/Flex';
 import { layout } from 'styles/constants';
-import invariant from 'invariant';
 
 import Document from 'models/Document';
 import UiStore from 'stores/UiStore';
@@ -18,7 +17,7 @@ import Editor from 'components/Editor';
 import DropToImport from 'components/DropToImport';
 import { HeaderAction } from 'components/Layout';
 import LoadingIndicator from 'components/LoadingIndicator';
-import PublishingInfo from 'components/PublishingInfo';
+import Collaborators from 'components/Collaborators';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 
@@ -154,20 +153,6 @@ type Props = {
     this.setState({ isDragging: false });
   };
 
-  renderHeading(isEditing: boolean) {
-    invariant(this.document, 'document not available');
-    if (this.props.newDocument) return;
-
-    return (
-      <InfoWrapper visible={!isEditing}>
-        <PublishingInfo
-          collaborators={this.document.collaborators}
-          document={this.document}
-        />
-      </InfoWrapper>
-    );
-  }
-
   render() {
     const isNew = this.props.newDocument;
     const isEditing = !!this.props.match.params.edit || isNew;
@@ -211,11 +196,14 @@ type Props = {
                 onChange={this.onChange}
                 onSave={this.onSave}
                 onCancel={this.onCancel}
-                heading={this.renderHeading(!!isEditing)}
                 readOnly={!isEditing}
               />
               <Meta align="center" justify="flex-end" readOnly={!isEditing}>
                 <Flex align="center">
+                  {document &&
+                    !isNew &&
+                    !isEditing &&
+                    <Collaborators document={document} />}
                   <HeaderAction>
                     {isEditing
                       ? <SaveAction
@@ -263,11 +251,6 @@ const Meta = styled(Flex)`
   padding: ${layout.padding};
 `;
 
-const InfoWrapper = styled(Flex)`
-  opacity: ${({ visible }) => (visible ? '1' : '0')};
-  transition: all 100ms ease-in-out;
-`;
-
 const Container = styled(Flex)`
   position: relative;
   width: 100%;