Merge master, small refactor

app/scenes/Document/Document.js

@@ -18,10 +18,11 @@ import {
   matchDocumentMove,
 } from 'utils/routeHelpers';
 import { uploadFile } from 'utils/uploadFile';
+import { emojiToUrl } from 'utils/emoji';
 import isInternalUrl from 'utils/isInternalUrl';
 
 import Document from 'models/Document';
-import Actions from './components/Actions';
+import Header from './components/Header';
 import DocumentMove from './components/DocumentMove';
 import UiStore from 'stores/UiStore';
 import AuthStore from 'stores/AuthStore';
@@ -40,6 +41,10 @@ const DISCARD_CHANGES = `
 You have unsaved changes.
 Are you sure you want to discard them?
 `;
+const UPLOADING_WARNING = `
+Image are still uploading.
+Are you sure you want to discard them?
+`;
 
 type Props = {
   match: Object,
@@ -51,25 +56,6 @@ type Props = {
   ui: UiStore,
 };
 
-function toCodePoint(unicodeSurrogates, sep) {
-  var r = [],
-    c = 0,
-    p = 0,
-    i = 0;
-  while (i < unicodeSurrogates.length) {
-    c = unicodeSurrogates.charCodeAt(i++);
-    if (p) {
-      r.push((0x10000 + ((p - 0xd800) << 10) + (c - 0xdc00)).toString(16));
-      p = 0;
-    } else if (0xd800 <= c && c <= 0xdbff) {
-      p = c;
-    } else {
-      r.push(c.toString(16));
-    }
-  }
-  return r.join(sep || '-');
-}
-
 @observer
 class DocumentScene extends React.Component<Props> {
   savedTimeout: TimeoutID;
@@ -79,7 +65,7 @@ class DocumentScene extends React.Component<Props> {
   @observable editCache: ?string;
   @observable document: ?Document;
   @observable newDocument: ?Document;
-  @observable isLoading = false;
+  @observable isUploading = false;
   @observable isSaving = false;
   @observable isPublishing = false;
   @observable notFound = false;
@@ -155,7 +141,7 @@ class DocumentScene extends React.Component<Props> {
   };
 
   loadEditor = async () => {
-    const EditorImport = await import('rich-markdown-editor');
+    const EditorImport = await import('./components/Editor');
     this.editorComponent = EditorImport.default;
   };
 
@@ -199,11 +185,11 @@ class DocumentScene extends React.Component<Props> {
   }, AUTOSAVE_INTERVAL);
 
   onImageUploadStart = () => {
-    this.isLoading = true;
+    this.isUploading = true;
   };
 
   onImageUploadStop = () => {
-    this.isLoading = false;
+    this.isUploading = false;
   };
 
   onChange = text => {
@@ -249,7 +235,14 @@ class DocumentScene extends React.Component<Props> {
 
   onClickLink = (href: string) => {
     if (isInternalUrl(href)) {
-      this.props.history.push(href);
+      // relative
+      if (href[0] === '/') {
+        this.props.history.push(href);
+      }
+
+      // absolute
+      const url = new URL(href);
+      this.props.history.push(url.pathname);
     } else {
       window.open(href, '_blank');
     }
@@ -260,8 +253,6 @@ class DocumentScene extends React.Component<Props> {
     const Editor = this.editorComponent;
     const isMoving = match.path === matchDocumentMove;
     const document = this.document;
-    const titleFromState = location.state ? location.state.title : '';
-    const titleText = document ? document.title : titleFromState;
     const isShare = match.params.shareId;
 
     if (this.notFound) {
@@ -276,82 +267,82 @@ class DocumentScene extends React.Component<Props> {
       );
     }
 
-    let favicon;
-    if (document && document.emoji) {
-      favicon = `https://twemoji.maxcdn.com/2/72x72/${toCodePoint(
-        document.emoji
-      )}.png`;
-    }
-
-    return (
-      <Container key={document ? document.id : undefined} column auto>
-        {isMoving && document && <DocumentMove document={document} />}
-        {titleText && (
-          <PageTitle
-            title={titleText.replace(document.emoji, '')}
-            favicon={favicon}
-          />
-        )}
-        {(this.isLoading || this.isSaving) && <LoadingIndicator />}
-        {!document || !Editor ? (
+    if (!document || !Editor) {
+      return (
+        <Container column auto>
+          <PageTitle title={location.state ? location.state.title : ''} />
           <CenteredContent>
             <LoadingState />
           </CenteredContent>
-        ) : (
-          <Flex justify="center" auto>
-            {this.isEditing && (
+        </Container>
+      );
+    }
+
+    return (
+      <Container key={document.id} column auto>
+        {isMoving && <DocumentMove document={document} />}
+        <PageTitle
+          title={document.title.replace(document.emoji, '')}
+          favicon={document.emoji ? emojiToUrl(document.emoji) : undefined}
+        />
+        {(this.isUploading || this.isSaving) && <LoadingIndicator />}
+
+        <Container justify="center" column auto>
+          {this.isEditing && (
+            <React.Fragment>
               <Prompt
                 when={document.hasPendingChanges}
                 message={DISCARD_CHANGES}
               />
-            )}
-            <MaxWidth column auto>
-              <Editor
-                titlePlaceholder="Start with a title…"
-                bodyPlaceholder="…the rest is your canvas"
-                defaultValue={document.text}
-                pretitle={document.emoji}
-                uploadImage={this.onUploadImage}
-                onImageUploadStart={this.onImageUploadStart}
-                onImageUploadStop={this.onImageUploadStop}
-                onSearchLink={this.onSearchLink}
-                onClickLink={this.onClickLink}
-                onChange={this.onChange}
-                onSave={this.onSave}
-                onCancel={this.onDiscard}
-                readOnly={!this.isEditing}
-                toc
-              />
-            </MaxWidth>
-            {document &&
-              !isShare && (
-                <Actions
-                  document={document}
-                  isDraft={!document.publishedAt}
-                  isEditing={this.isEditing}
-                  isSaving={this.isSaving}
-                  isPublishing={this.isPublishing}
-                  savingIsDisabled={!document.allowSave}
-                  history={this.props.history}
-                  onDiscard={this.onDiscard}
-                  onSave={this.onSave}
-                />
-              )}
-          </Flex>
-        )}
+              <Prompt when={this.isUploading} message={UPLOADING_WARNING} />
+            </React.Fragment>
+          )}
+          {!isShare && (
+            <Header
+              document={document}
+              isDraft={!document.publishedAt}
+              isEditing={this.isEditing}
+              isSaving={this.isSaving}
+              isPublishing={this.isPublishing}
+              savingIsDisabled={!document.allowSave}
+              history={this.props.history}
+              onDiscard={this.onDiscard}
+              onSave={this.onSave}
+            />
+          )}
+          <MaxWidth column auto>
+            <Editor
+              titlePlaceholder="Start with a title…"
+              bodyPlaceholder="…the rest is your canvas"
+              defaultValue={document.text}
+              pretitle={document.emoji}
+              uploadImage={this.onUploadImage}
+              onImageUploadStart={this.onImageUploadStart}
+              onImageUploadStop={this.onImageUploadStop}
+              onSearchLink={this.onSearchLink}
+              onClickLink={this.onClickLink}
+              onChange={this.onChange}
+              onSave={this.onSave}
+              onCancel={this.onDiscard}
+              readOnly={!this.isEditing}
+              toc
+            />
+          </MaxWidth>
+        </Container>
       </Container>
     );
   }
 }
 
 const MaxWidth = styled(Flex)`
-  padding: 0 20px;
+  padding: 0 16px;
   max-width: 100vw;
+  width: 100%;
   height: 100%;
 
   ${breakpoint('tablet')`	
     padding: 0;
-    margin: 60px;
+    margin: 12px auto;
     max-width: 46em;
   `};
 `;
@@ -361,7 +352,7 @@ const Container = styled(Flex)`
 `;
 
 const LoadingState = styled(LoadingPlaceholder)`
-  margin: 90px 0;
+  margin: 40px 0;
 `;
 
 export default withRouter(inject('ui', 'auth', 'documents')(DocumentScene));

app/scenes/Document/components/Actions.js

@@ -1,132 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import { NewDocumentIcon } from 'outline-icons';
-
-import { color } from 'shared/styles/constants';
-import Document from 'models/Document';
-import { documentEditUrl, documentNewUrl } from 'utils/routeHelpers';
-
-import DocumentMenu from 'menus/DocumentMenu';
-import Collaborators from 'components/Collaborators';
-import Actions, { Action, Separator } from 'components/Actions';
-
-type Props = {
-  document: Document,
-  isDraft: boolean,
-  isEditing: boolean,
-  isSaving: boolean,
-  isPublishing: boolean,
-  savingIsDisabled: boolean,
-  onDiscard: () => *,
-  onSave: ({
-    done?: boolean,
-    publish?: boolean,
-    autosave?: boolean,
-  }) => *,
-  history: Object,
-};
-
-class DocumentActions extends React.Component<Props> {
-  handleNewDocument = () => {
-    this.props.history.push(documentNewUrl(this.props.document));
-  };
-
-  handleEdit = () => {
-    this.props.history.push(documentEditUrl(this.props.document));
-  };
-
-  handleSave = () => {
-    this.props.onSave({ done: true });
-  };
-
-  handlePublish = () => {
-    this.props.onSave({ done: true, publish: true });
-  };
-
-  render() {
-    const {
-      document,
-      isEditing,
-      isDraft,
-      isPublishing,
-      isSaving,
-      savingIsDisabled,
-    } = this.props;
-
-    return (
-      <Actions align="center" justify="flex-end" readOnly={!isEditing}>
-        {!isDraft && !isEditing && <Collaborators document={document} />}
-        {isDraft && (
-          <Action>
-            <Link
-              onClick={this.handlePublish}
-              title="Publish document (Cmd+Enter)"
-              disabled={savingIsDisabled}
-              highlight
-            >
-              {isPublishing ? 'Publishing…' : 'Publish'}
-            </Link>
-          </Action>
-        )}
-        {isEditing && (
-          <React.Fragment>
-            <Action>
-              <Link
-                onClick={this.handleSave}
-                title="Save changes (Cmd+Enter)"
-                disabled={savingIsDisabled}
-                isSaving={isSaving}
-                highlight={!isDraft}
-              >
-                {isSaving && !isPublishing ? 'Saving…' : 'Save'}
-              </Link>
-            </Action>
-            {isDraft && <Separator />}
-          </React.Fragment>
-        )}
-        {!isEditing && (
-          <Action>
-            <a onClick={this.handleEdit}>Edit</a>
-          </Action>
-        )}
-        {isEditing && (
-          <Action>
-            <a onClick={this.props.onDiscard}>
-              {document.hasPendingChanges ? 'Discard' : 'Done'}
-            </a>
-          </Action>
-        )}
-        {!isEditing && (
-          <Action>
-            <DocumentMenu document={document} showPrint />
-          </Action>
-        )}
-        {!isEditing &&
-          !isDraft && (
-            <React.Fragment>
-              <Separator />
-              <Action>
-                <a onClick={this.handleNewDocument}>
-                  <NewDocumentIcon />
-                </a>
-              </Action>
-            </React.Fragment>
-          )}
-      </Actions>
-    );
-  }
-}
-
-const Link = styled.a`
-  display: flex;
-  align-items: center;
-  font-weight: ${props => (props.highlight ? 500 : 'inherit')};
-  color: ${props =>
-    props.highlight ? `${color.primary} !important` : 'inherit'};
-  opacity: ${props => (props.disabled ? 0.5 : 1)};
-  pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
-  cursor: ${props => (props.disabled ? 'default' : 'pointer')};
-`;
-
-export default DocumentActions;

app/scenes/Document/components/Breadcrumb.js

@@ -0,0 +1,76 @@
+// @flow
+import * as React from 'react';
+import { observer, inject } from 'mobx-react';
+import breakpoint from 'styled-components-breakpoint';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { CollectionIcon, GoToIcon } from 'outline-icons';
+
+import Document from 'models/Document';
+import CollectionsStore from 'stores/CollectionsStore';
+import { collectionUrl } from 'utils/routeHelpers';
+import Flex from 'shared/components/Flex';
+
+type Props = {
+  document: Document,
+  collections: CollectionsStore,
+};
+
+const Breadcrumb = observer(({ document, collections }: Props) => {
+  const path = document.pathToDocument.slice(0, -1);
+  const collection =
+    collections.getById(document.collection.id) || document.collection;
+
+  return (
+    <Wrapper justify="flex-start" align="center">
+      <CollectionName to={collectionUrl(collection.id)}>
+        <CollectionIcon color={collection.color} expanded />{' '}
+        <span>{collection.name}</span>
+      </CollectionName>
+      {path.map(n => (
+        <React.Fragment key={n.id}>
+          <Slash /> <Crumb to={n.url}>{n.title}</Crumb>
+        </React.Fragment>
+      ))}
+    </Wrapper>
+  );
+});
+
+const Wrapper = styled(Flex)`
+  width: 33.3%;
+  display: none;
+
+  ${breakpoint('tablet')`	
+    display: flex;
+  `};
+`;
+
+const Slash = styled(GoToIcon)`
+  flex-shrink: 0;
+  opacity: 0.25;
+`;
+
+const Crumb = styled(Link)`
+  color: ${props => props.theme.text};
+  font-size: 15px;
+  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const CollectionName = styled(Link)`
+  display: flex;
+  flex-shrink: 0;
+  color: ${props => props.theme.text};
+  font-size: 15px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+export default inject('collections')(Breadcrumb);

app/scenes/Document/components/DocumentMove/DocumentMove.js

@@ -8,7 +8,6 @@ import { Search } from 'js-search';
 import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
 import _ from 'lodash';
 import styled from 'styled-components';
-import { size } from 'shared/styles/constants';
 
 import Modal from 'components/Modal';
 import Input from 'components/Input';
@@ -181,7 +180,7 @@ class DocumentMove extends React.Component<Props> {
 }
 
 const Section = styled(Flex)`
-  margin-bottom: ${size.huge};
+  margin-bottom: 24px;
 `;
 
 const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`

app/scenes/Document/components/DocumentMove/components/PathToDocument.js

@@ -4,8 +4,6 @@ import { observer } from 'mobx-react';
 import invariant from 'invariant';
 import styled from 'styled-components';
 import { GoToIcon } from 'outline-icons';
-
-import { color } from 'shared/styles/constants';
 import Flex from 'shared/components/Flex';
 
 import Document from 'models/Document';
@@ -14,7 +12,7 @@ const ResultWrapper = styled.div`
   display: flex;
   margin-bottom: 10px;
 
-  color: ${color.text};
+  color: ${props => props.theme.text};
   cursor: default;
 `;
 
@@ -30,13 +28,13 @@ const ResultWrapperLink = ResultWrapper.withComponent('a').extend`
   &:focus {
     margin-left: 0px;
     border-radius: 2px;
-    background: ${color.black};
-    color: ${color.smokeLight};
+    background: ${props => props.theme.black};
+    color: ${props => props.theme.smokeLight};
     outline: none;
     cursor: pointer;
 
     ${StyledGoToIcon} {
-      fill: ${color.white};
+      fill: ${props => props.theme.white};
     }
   }
 `;

app/scenes/Document/components/Editor.js

@@ -0,0 +1,111 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import { Block, Change, Node, Mark, Text } from 'slate';
+import RichMarkdownEditor, { Placeholder, schema } from 'rich-markdown-editor';
+import ClickablePadding from 'components/ClickablePadding';
+
+type Props = {
+  titlePlaceholder: string,
+  bodyPlaceholder: string,
+  readOnly: boolean,
+};
+
+// add rules to the schema to ensure the first node is a heading
+schema.document.nodes.unshift({ types: ['heading1'], min: 1, max: 1 });
+schema.document.normalize = (
+  change: Change,
+  reason: string,
+  {
+    node,
+    child,
+    mark,
+    index,
+  }: { node: Node, mark?: Mark, child: Node, index: number }
+) => {
+  switch (reason) {
+    case 'child_type_invalid': {
+      return change.setNodeByKey(
+        child.key,
+        index === 0 ? 'heading1' : 'paragraph'
+      );
+    }
+    case 'child_required': {
+      const block = Block.create(index === 0 ? 'heading1' : 'paragraph');
+      return change.insertNodeByKey(node.key, index, block);
+    }
+    default:
+  }
+};
+
+class Editor extends React.Component<Props> {
+  editor: *;
+
+  setEditorRef = (ref: RichMarkdownEditor) => {
+    this.editor = ref;
+  };
+
+  focusAtEnd = () => {
+    if (this.editor) this.editor.focusAtEnd();
+  };
+
+  renderPlaceholder = (props: *) => {
+    const { editor, node } = props;
+
+    if (editor.state.isComposing) return;
+    if (node.object !== 'block') return;
+    if (!Text.isTextList(node.nodes)) return;
+    if (node.text !== '') return;
+
+    const index = editor.value.document.getBlocks().indexOf(node);
+    if (index > 1) return;
+
+    const text =
+      index === 0 ? this.props.titlePlaceholder : this.props.bodyPlaceholder;
+
+    return <Placeholder>{editor.props.readOnly ? '' : text}</Placeholder>;
+  };
+
+  render() {
+    const { readOnly } = this.props;
+
+    return (
+      <React.Fragment>
+        <StyledEditor
+          innerRef={this.setEditorRef}
+          renderPlaceholder={this.renderPlaceholder}
+          schema={schema}
+          {...this.props}
+        />
+        <ClickablePadding
+          onClick={!readOnly ? this.focusAtEnd : undefined}
+          grow
+        />
+      </React.Fragment>
+    );
+  }
+}
+
+// additional styles account for placeholder nodes not always re-rendering
+const StyledEditor = styled(RichMarkdownEditor)`
+  display: flex;
+  flex: 0;
+
+  ${Placeholder} {
+    visibility: hidden;
+  }
+
+  h1:first-of-type {
+    ${Placeholder} {
+      visibility: visible;
+    }
+  }
+
+  p:nth-child(2):last-child {
+    ${Placeholder} {
+      visibility: visible;
+    }
+  }
+`;
+
+export default Editor;

app/scenes/Document/components/Header.js

@@ -0,0 +1,232 @@
+// @flow
+import * as React from 'react';
+import { throttle } from 'lodash';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import styled from 'styled-components';
+import breakpoint from 'styled-components-breakpoint';
+import { NewDocumentIcon } from 'outline-icons';
+import Document from 'models/Document';
+import { documentEditUrl, documentNewUrl } from 'utils/routeHelpers';
+
+import Flex from 'shared/components/Flex';
+import Breadcrumb from './Breadcrumb';
+import DocumentMenu from 'menus/DocumentMenu';
+import Collaborators from 'components/Collaborators';
+import { Action, Separator } from 'components/Actions';
+
+type Props = {
+  document: Document,
+  isDraft: boolean,
+  isEditing: boolean,
+  isSaving: boolean,
+  isPublishing: boolean,
+  savingIsDisabled: boolean,
+  onDiscard: () => *,
+  onSave: ({
+    done?: boolean,
+    publish?: boolean,
+    autosave?: boolean,
+  }) => *,
+  history: Object,
+};
+
+@observer
+class Header extends React.Component<Props> {
+  @observable isScrolled = false;
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  updateIsScrolled = () => {
+    this.isScrolled = window.scrollY > 75;
+  };
+
+  handleScroll = throttle(this.updateIsScrolled, 50);
+
+  handleNewDocument = () => {
+    this.props.history.push(documentNewUrl(this.props.document));
+  };
+
+  handleEdit = () => {
+    this.props.history.push(documentEditUrl(this.props.document));
+  };
+
+  handleSave = () => {
+    this.props.onSave({ done: true });
+  };
+
+  handlePublish = () => {
+    this.props.onSave({ done: true, publish: true });
+  };
+
+  handleClickTitle = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  render() {
+    const {
+      document,
+      isEditing,
+      isDraft,
+      isPublishing,
+      isSaving,
+      savingIsDisabled,
+    } = this.props;
+
+    return (
+      <Actions
+        align="center"
+        justify="space-between"
+        readOnly={!isEditing}
+        isCompact={this.isScrolled}
+      >
+        <Breadcrumb document={document} />
+        <Title isHidden={!this.isScrolled} onClick={this.handleClickTitle}>
+          {document.title}
+        </Title>
+        <Wrapper align="center" justify="flex-end">
+          {!isDraft && !isEditing && <Collaborators document={document} />}
+          {isSaving &&
+            !isPublishing && (
+              <Action>
+                <Status>Saving…</Status>
+              </Action>
+            )}
+          {isDraft && (
+            <Action>
+              <Link
+                onClick={this.handlePublish}
+                title="Publish document (Cmd+Enter)"
+                disabled={savingIsDisabled}
+                highlight
+              >
+                {isPublishing ? 'Publishing…' : 'Publish'}
+              </Link>
+            </Action>
+          )}
+          {isEditing && (
+            <React.Fragment>
+              <Action>
+                <Link
+                  onClick={this.handleSave}
+                  title="Save changes (Cmd+Enter)"
+                  disabled={savingIsDisabled}
+                  isSaving={isSaving}
+                  highlight={!isDraft}
+                >
+                  {isDraft ? 'Save Draft' : 'Done'}
+                </Link>
+              </Action>
+            </React.Fragment>
+          )}
+          {!isEditing && (
+            <Action>
+              <Link onClick={this.handleEdit}>Edit</Link>
+            </Action>
+          )}
+          {isEditing &&
+            !isSaving &&
+            document.hasPendingChanges && (
+              <Action>
+                <Link onClick={this.props.onDiscard}>Discard</Link>
+              </Action>
+            )}
+          {!isEditing && (
+            <Action>
+              <DocumentMenu document={document} showPrint />
+            </Action>
+          )}
+          {!isEditing &&
+            !isDraft && (
+              <React.Fragment>
+                <Separator />
+                <Action>
+                  <a onClick={this.handleNewDocument}>
+                    <NewDocumentIcon />
+                  </a>
+                </Action>
+              </React.Fragment>
+            )}
+        </Wrapper>
+      </Actions>
+    );
+  }
+}
+
+const Status = styled.div`
+  color: ${props => props.theme.slate};
+`;
+
+const Wrapper = styled(Flex)`
+  width: 100%;
+  align-self: flex-end;
+
+  ${breakpoint('tablet')`	
+    width: 33.3%;
+  `};
+`;
+
+const Actions = styled(Flex)`
+  position: sticky;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  background: rgba(255, 255, 255, 0.9);
+  border-bottom: 1px solid
+    ${props => (props.isCompact ? props.theme.smoke : 'transparent')};
+  padding: 12px;
+  transition: all 100ms ease-out;
+  transform: translate3d(0, 0, 0);
+  -webkit-backdrop-filter: blur(20px);
+
+  @media print {
+    display: none;
+  }
+
+  ${breakpoint('tablet')`
+    padding: ${props => (props.isCompact ? '12px' : `24px 24px 0`)};
+  `};
+`;
+
+const Title = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  justify-content: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  transition: opacity 100ms ease-in-out;
+  opacity: ${props => (props.isHidden ? '0' : '1')};
+  cursor: ${props => (props.isHidden ? 'default' : 'pointer')};
+  display: none;
+  width: 0;
+
+  ${breakpoint('tablet')`	
+    display: block;
+    width: 33.3%;
+  `};
+`;
+
+const Link = styled.a`
+  display: flex;
+  align-items: center;
+  font-weight: ${props => (props.highlight ? 500 : 'inherit')};
+  color: ${props =>
+    props.highlight ? `${props.theme.primary} !important` : 'inherit'};
+  opacity: ${props => (props.disabled ? 0.5 : 1)};
+  pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
+  cursor: ${props => (props.disabled ? 'default' : 'pointer')};
+`;
+
+export default Header;

app/scenes/Document/components/LoadingPlaceholder.js

@@ -2,7 +2,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { pulsate } from 'shared/styles/animations';
-import { color } from 'shared/styles/constants';
 import Flex from 'shared/components/Flex';
 import Fade from 'components/Fade';
 
@@ -29,7 +28,7 @@ const LoadingPlaceholder = (props: Object) => {
 const Mask = styled(Flex)`
   height: ${props => (props.header ? 28 : 18)}px;
   margin-bottom: ${props => (props.header ? 32 : 14)}px;
-  background-color: ${color.smoke};
+  background-color: ${props => props.theme.smoke};
   animation: ${pulsate} 1.3s infinite;
 `;