Move collaborators to top right (#201)

* Hopefully the last time we rejig this before launch

* Improved spacing

* Move to injectGlobal, alignment fixes

frontend/components/DocumentPreview/components/PublishingInfo.js

@@ -0,0 +1,62 @@
+// @flow
+import React, { Component } from 'react';
+import moment from 'moment';
+import styled from 'styled-components';
+import { color } from 'styles/constants';
+import Collection from 'models/Collection';
+import Document from 'models/Document';
+import Flex from 'components/Flex';
+
+const Container = styled(Flex)`
+  color: ${color.slate};
+  font-size: 13px;
+`;
+
+const Modified = styled.span`
+  color: ${props => (props.highlight ? color.slateDark : color.slate)};
+  font-weight: ${props => (props.highlight ? '600' : '400')};
+`;
+
+class PublishingInfo extends Component {
+  props: {
+    collection?: Collection,
+    document: Document,
+    views?: number,
+  };
+
+  render() {
+    const { collection, document } = this.props;
+    const {
+      modifiedSinceViewed,
+      createdAt,
+      updatedAt,
+      createdBy,
+      updatedBy,
+    } = document;
+
+    return (
+      <Container align="center">
+        {createdAt === updatedAt
+          ? <span>
+              {createdBy.name}
+              {' '}
+              published
+              {' '}
+              {moment(createdAt).fromNow()}
+            </span>
+          : <span>
+              {updatedBy.name}
+              <Modified highlight={modifiedSinceViewed}>
+                {' '}
+                modified
+                {' '}
+                {moment(updatedAt).fromNow()}
+              </Modified>
+            </span>}
+        {collection && <span>&nbsp;in <strong>{collection.name}</strong></span>}
+      </Container>
+    );
+  }
+}
+
+export default PublishingInfo;