Merge branch 'master' into dashboard-improves

2017-09-09 07:35:24 -07:00
parent 6cb740f18c d5f0dcb74c
commit 9f7fbbd1d3
30 changed files with 295 additions and 303 deletions
--- a/frontend/components/CenteredContent/CenteredContent.js
+++ b/frontend/components/CenteredContent/CenteredContent.js
@@ -8,11 +8,11 @@ type Props = {

 const Container = styled.div`
  width: 100%;
-  margin: 40px 20px;
+  margin: 60px 20px;
 `;

 const Content = styled.div`
-  max-width: 740px;
+  max-width: 50em;
  margin: 0 auto;
 `;

--- a/frontend/components/Collaborators/Collaborators.js
+++ b/frontend/components/Collaborators/Collaborators.js
@@ -0,0 +1,56 @@
+// @flow
+import React from 'react';
+import moment from 'moment';
+import styled from 'styled-components';
+import { color } from 'styles/constants';
+import Flex from 'components/Flex';
+import Tooltip from 'components/Tooltip';
+import Document from 'models/Document';
+
+const Collaborators = function({ document }: { document: Document }) {
+  const {
+    createdAt,
+    updatedAt,
+    createdBy,
+    updatedBy,
+    collaborators,
+  } = document;
+  let tooltip;
+
+  if (createdAt === updatedAt) {
+    tooltip = `${createdBy.name} published ${moment(createdAt).fromNow()}`;
+  } else {
+    tooltip = `${updatedBy.name} modified ${moment(updatedAt).fromNow()}`;
+  }
+
+  return (
+    <Avatars>
+      <Tooltip tooltip={tooltip} placement="bottom">
+        {collaborators.map(user => (
+          <Avatar key={user.id} src={user.avatarUrl} />
+        ))}
+      </Tooltip>
+    </Avatars>
+  );
+};
+
+const Avatars = styled(Flex)`
+  flex-direction: row-reverse;
+  margin-right: 10px;
+  height: 26px;
+`;
+
+const Avatar = styled.img`
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  border: 2px solid ${color.white};
+  margin-right: -13px;
+
+  &:first-child {
+    margin-right: 0;
+  }
+`;
+
+export default Collaborators;
--- a/frontend/components/Collaborators/index.js
+++ b/frontend/components/Collaborators/index.js
@@ -0,0 +1,3 @@
+// @flow
+import Collaborators from './Collaborators';
+export default Collaborators;
--- a/frontend/components/DocumentPreview/DocumentPreview.js
+++ b/frontend/components/DocumentPreview/DocumentPreview.js
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import Document from 'models/Document';
 import styled from 'styled-components';
 import { color } from 'styles/constants';
-import PublishingInfo from 'components/PublishingInfo';
+import PublishingInfo from './components/PublishingInfo';
 import StarIcon from 'components/Icon/StarIcon';

 type Props = {
--- a/frontend/components/DocumentPreview/components/PublishingInfo.js
+++ b/frontend/components/DocumentPreview/components/PublishingInfo.js
@@ -5,7 +5,6 @@ import styled from 'styled-components';
 import { color } from 'styles/constants';
 import Collection from 'models/Collection';
 import Document from 'models/Document';
-import type { User } from 'types';
 import Flex from 'components/Flex';

 const Container = styled(Flex)`
@@ -13,24 +12,6 @@ const Container = styled(Flex)`
  font-size: 13px;
 `;

-const Avatars = styled(Flex)`
-  flex-direction: row-reverse;
-  margin-right: 10px;
-`;
-
-const Avatar = styled.img`
-  width: 26px;
-  height: 26px;
-  flex-shrink: 0;
-  border-radius: 50%;
-  border: 2px solid ${color.white};
-  margin-right: -13px;
-
-  &:first-child {
-    margin-right: 0;
-  }
-`;
-
 const Modified = styled.span`
  color: ${props => (props.highlight ? color.slateDark : color.slate)};
  font-weight: ${props => (props.highlight ? '600' : '400')};
@@ -38,14 +19,13 @@ const Modified = styled.span`

 class PublishingInfo extends Component {
  props: {
-    collaborators?: Array<User>,
    collection?: Collection,
    document: Document,
    views?: number,
  };

  render() {
-    const { collaborators, collection, document } = this.props;
+    const { collection, document } = this.props;
    const {
      modifiedSinceViewed,
      createdAt,
@@ -56,12 +36,6 @@ class PublishingInfo extends Component {

    return (
      <Container align="center">
-        {collaborators &&
-          <Avatars>
-            {collaborators.map(user => (
-              <Avatar key={user.id} src={user.avatarUrl} title={user.name} />
-            ))}
-          </Avatars>}
        {createdAt === updatedAt
          ? <span>
              {createdBy.name}
--- a/frontend/components/DropdownMenu/DropdownMenu.js
+++ b/frontend/components/DropdownMenu/DropdownMenu.js
@@ -22,6 +22,7 @@ const DropdownMenuItem = ({ onClick, children }: MenuItemProps) => {
 type DropdownMenuProps = {
  label: React.Element<any>,
  children?: React.Element<any>,
+  style?: Object,
 };

@observer class DropdownMenu extends React.Component {
@@ -42,7 +43,7 @@ type DropdownMenuProps = {
        </Label>

        {this.menuOpen &&
-          <Menu>
+          <Menu style={this.props.style}>
            {this.props.children}
          </Menu>}
      </MenuContainer>
@@ -65,9 +66,7 @@ const Label = styled(Flex).attrs({
 })`
  cursor: pointer;
  z-index: 1000;
-
  min-height: 43px;
-  margin: 0 5px;
 `;

 const MenuContainer = styled.div`
--- a/frontend/components/Editor/Editor.js
+++ b/frontend/components/Editor/Editor.js
@@ -27,7 +27,6 @@ type Props = {
  onImageUploadStop: Function,
  emoji: string,
  readOnly: boolean,
-  heading?: ?React.Element<*>,
 };

 type KeyData = {
@@ -187,12 +186,7 @@ type KeyData = {
        auto
      >
        <MaxWidth column auto>
-          <HeaderContainer
-            onClick={this.focusAtStart}
-            readOnly={this.props.readOnly}
-          >
-            {this.props.heading}
-          </HeaderContainer>
+          <Header onClick={this.focusAtStart} readOnly={this.props.readOnly} />
          <Toolbar state={this.state.state} onChange={this.onChange} />
          <Editor
            ref={ref => (this.editor = ref)}
@@ -224,11 +218,10 @@ const MaxWidth = styled(Flex)`
  height: 100%;
 `;

-const HeaderContainer = styled(Flex).attrs({
-  align: 'flex-end',
-})`
-  height: 100px;
+const Header = styled(Flex)`
+  height: 60px;
  flex-shrink: 0;
+  align-items: flex-end;
  ${({ readOnly }) => !readOnly && 'cursor: text;'}
 `;

--- a/frontend/components/Editor/Editor.scss
+++ b/frontend/components/Editor/Editor.scss
@@ -1,9 +1,9 @@
 .editor {
  font-weight: 400;
  font-size: 1em;
-  line-height: 1.5em;
+  line-height: 1.7em;
  width: 100%;
-  color: #1b2631;
+  color: #1b2830;

  h1,
  h2,
--- a/frontend/components/Layout/Layout.js
+++ b/frontend/components/Layout/Layout.js
@@ -10,11 +10,11 @@ import keydown from 'react-keydown';
 import Flex from 'components/Flex';
 import { color, layout } from 'styles/constants';
 import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers';
-
 import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
+
+import Avatar from 'components/Avatar';
 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
 import Scrollable from 'components/Scrollable';
-import Avatar from 'components/Avatar';
 import Modal from 'components/Modal';
 import AddIcon from 'components/Icon/AddIcon';
 import MoreIcon from 'components/Icon/MoreIcon';
@@ -26,8 +26,8 @@ import Settings from 'scenes/Settings';
 import SidebarCollection from './components/SidebarCollection';
 import SidebarCollectionList from './components/SidebarCollectionList';
 import SidebarLink from './components/SidebarLink';
+import HeaderBlock from './components/HeaderBlock';

-import UserStore from 'stores/UserStore';
 import AuthStore from 'stores/AuthStore';
 import UiStore from 'stores/UiStore';
 import CollectionsStore from 'stores/CollectionsStore';
@@ -40,7 +40,6 @@ type Props = {
  children?: ?React.Element<any>,
  actions?: ?React.Element<any>,
  title?: ?React.Element<any>,
-  user: UserStore,
  auth: AuthStore,
  ui: UiStore,
  search: ?boolean,
@@ -108,7 +107,8 @@ type Props = {
  };

  render() {
-    const { user, auth, documents, collections, history, ui } = this.props;
+    const { auth, documents, collections, history, ui } = this.props;
+    const { user, team } = auth;

    return (
      <Container column auto>
@@ -129,34 +129,35 @@ type Props = {
        <Flex auto>
          {auth.authenticated &&
            user &&
+            team &&
            <Sidebar column editMode={ui.editMode}>
-              <Header justify="space-between">
-                <Flex align="center">
-                  <LogoLink to="/">Atlas</LogoLink>
-                </Flex>
-                <DropdownMenu label={<Avatar src={user.user.avatarUrl} />}>
-                  <DropdownMenuItem onClick={this.handleOpenSettings}>
-                    Settings
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}>
-                    Keyboard shortcuts
-                  </DropdownMenuItem>
-                  <MenuLink to="/developers">
-                    <DropdownMenuItem>API</DropdownMenuItem>
-                  </MenuLink>
-                  <DropdownMenuItem onClick={this.handleLogout}>
-                    Logout
-                  </DropdownMenuItem>
-                </DropdownMenu>
-              </Header>
+              <DropdownMenu
+                style={{ marginRight: 10, marginTop: -10 }}
+                label={
+                  <HeaderBlock user={user} team={team}>
+                    <Avatar src={user.avatarUrl} />
+                  </HeaderBlock>
+                }
+              >
+                <DropdownMenuItem onClick={this.handleOpenSettings}>
+                  Settings
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}>
+                  Keyboard shortcuts
+                </DropdownMenuItem>
+                <MenuLink to="/developers">
+                  <DropdownMenuItem>API</DropdownMenuItem>
+                </MenuLink>
+                <DropdownMenuItem onClick={this.handleLogout}>
+                  Logout
+                </DropdownMenuItem>
+              </DropdownMenu>

              <Flex column>
                <Scrollable>
-                  <LinkSection>
-                    <SidebarLink to="/search">Search</SidebarLink>
-                  </LinkSection>
                  <LinkSection>
                    <SidebarLink to="/dashboard">Home</SidebarLink>
+                    <SidebarLink to="/search">Search</SidebarLink>
                    <SidebarLink to="/starred">Starred</SidebarLink>
                  </LinkSection>
                  <LinkSection>
@@ -228,7 +229,7 @@ type Props = {

 const CollectionAction = styled.a`
  position: absolute;
-  top: 8px;
+  top: -2px;
  right: ${layout.hpadding};

  svg {
@@ -250,46 +251,28 @@ const Container = styled(Flex)`
  height: 100%;
 `;

-const LogoLink = styled(Link)`
-  margin-top: 15px;
-  font-family: 'Atlas Grotesk';
-  font-weight: bold;
-  color: ${color.text};
-  text-decoration: none;
-  font-size: 16px;
+const Content = styled(Flex)`
+  margin-left: ${props => (props.editMode ? 0 : layout.sidebarWidth)};
+  transition: margin-left 200ms ease-in-out;
 `;

 const MenuLink = styled(Link)`
  color: ${color.text};
 `;

-const Content = styled(Flex)`
-  overflow: scroll;
-  position: absolute;
+const Sidebar = styled(Flex)`
+  position: fixed;
  top: 0;
  bottom: 0;
-  right: 0;
-  left: ${props => (props.editMode ? 0 : layout.sidebarWidth)};
-  transition: left 200ms ease-in-out;
-`;
-
-const Sidebar = styled(Flex)`
+  left: ${props => (props.editMode ? `-${layout.sidebarWidth}` : 0)};
  width: ${layout.sidebarWidth};
-  margin-left: ${props => (props.editMode ? `-${layout.sidebarWidth}` : 0)};
-  background: rgba(250, 251, 252, 0.71);
-  border-right: 1px solid #eceff3;
-  transition: margin-left 200ms ease-in-out;
-`;
-
-const Header = styled(Flex)`
-  flex-shrink: 0;
-  padding: ${layout.padding};
-  padding-bottom: 10px;
+  background: ${color.smoke};
+  transition: left 200ms ease-in-out;
 `;

 const LinkSection = styled(Flex)`
  flex-direction: column;
-  padding: 10px 0;
+  margin: 24px 0;
  position: relative;
 `;

--- a/frontend/components/Layout/components/HeaderBlock.js
+++ b/frontend/components/Layout/components/HeaderBlock.js
@@ -0,0 +1,61 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import { color, layout } from 'styles/constants';
+import type { User, Team } from 'types';
+import Flex from 'components/Flex';
+
+type Props = {
+  user: User,
+  team: Team,
+  children?: React$Element<any>,
+};
+
+function HeaderBlock({ user, team, children }: Props) {
+  return (
+    <Header justify="space-between" align="center">
+      <Flex align="flex-start" column>
+        <TeamName>{team.name}</TeamName>
+        <UserName>{user.name}</UserName>
+      </Flex>
+      {children}
+    </Header>
+  );
+}
+
+const UserName = styled.div`
+  font-size: 13px;
+`;
+
+const TeamName = styled.div`
+  font-family: 'Atlas Grotesk';
+  font-weight: bold;
+  color: ${color.text};
+  text-decoration: none;
+  font-size: 16px;
+`;
+
+const Header = styled(Flex)`
+  flex-shrink: 0;
+  padding: ${layout.padding};
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+
+  &:active,
+  &:hover {
+    background: rgba(0,0,0,.05);
+  }
+
+  &::after {
+    content: "";
+    left: ${layout.hpadding};
+    right: ${layout.hpadding};
+    background: rgba(0,0,0,.075);
+    height: 1px;
+    position: absolute;
+    bottom: 0;
+  }
+`;
+
+export default HeaderBlock;
--- a/frontend/components/Layout/components/SidebarLink/SidebarLink.js
+++ b/frontend/components/Layout/components/SidebarLink/SidebarLink.js
@@ -17,6 +17,7 @@ const StyledNavLink = styled(NavLink)`
  display: block;
  padding: 5px ${layout.hpadding};
  color: ${color.slateDark};
+  font-size: 15px;

  &:hover {
    color: ${darken(0.1, color.slateDark)};
--- a/frontend/components/Layout/index.js
+++ b/frontend/components/Layout/index.js
@@ -2,8 +2,7 @@
 import Layout from './Layout';
 import Title from './components/Title';
 import HeaderAction from './components/HeaderAction';
-import SaveAction from './components/SaveAction';

 export default Layout;

-export { Title, HeaderAction, SaveAction };
+export { Title, HeaderAction };
--- a/frontend/components/PublishingInfo/index.js
+++ b/frontend/components/PublishingInfo/index.js
@@ -1,3 +0,0 @@
-// @flow
-import PublishingInfo from './PublishingInfo';
-export default PublishingInfo;
--- a/frontend/components/Tooltip/index.js
+++ b/frontend/components/Tooltip/index.js
@@ -0,0 +1,11 @@
+// @flow
+import { TooltipTrigger } from 'pui-react-tooltip';
+import { injectGlobal } from 'styled-components';
+
+injectGlobal([
+  `
+  .tooltip:hover .tooltip-container:not(.tooltip-container-hidden){visibility:visible;opacity:1}.tooltip-container{visibility:hidden;-webkit-transition:opacity ease-out 0.2s;transition:opacity ease-out 0.2s;z-index:10;position:absolute;bottom:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin:0 0 8px 0;text-align:left}.tooltip-container.tooltip-container-visible{visibility:visible}.tooltip-container.tooltip-hoverable:after{content:"";position:absolute;width:calc(100% + 16px);height:calc(100% + 16px);top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.tooltip-container .tooltip-content{white-space:nowrap;padding:4px 8px;font-size:12px;line-height:16px;font-weight:400;letter-spacing:0;text-transform:none;background-color:#243641;color:#fff;border-radius:2px;border:1px solid #243641;box-shadow:0px 2px 2px 0px rgba(36, 54, 65, .1),0px 0px 2px 0px rgba(36, 54, 65, .1)}.tooltip-container .tooltip-content:before{content:"";z-index:1;position:absolute;bottom:-4px;left:50%;-webkit-transform:translateX(-50%) rotateZ(45deg);transform:translateX(-50%) rotateZ(45deg);background-color:#243641;border-bottom:1px solid #243641;border-right:1px solid #243641;width:8px;height:8px}.tooltip-container .tooltip-content:after{content:"";box-sizing:content-box;z-index:-1;position:absolute;bottom:-4px;left:50%;-webkit-transform:translateX(-50%) rotateZ(45deg);transform:translateX(-50%) rotateZ(45deg);background-color:#243641;box-shadow:0px 2px 2px 0px rgba(36, 54, 65, .1),0px 0px 2px 0px rgba(36, 54, 65, .1);width:8px;height:8px}.tooltip{position:relative;display:inline-block}.tooltip.tooltip-light .tooltip-content{background-color:#fff;color:#243641;border:1px solid #DFE5E8}.tooltip.tooltip-light .tooltip-content:before{background-color:#fff;border-bottom:1px solid #DFE5E8;border-right:1px solid #DFE5E8}.tooltip.tooltip-light .tooltip-content:after{background-color:#fff}.tooltip.tooltip-bottom .tooltip-container{top:100%;bottom:auto;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin:8px 0 0 0}.tooltip.tooltip-bottom .tooltip-container .tooltip-content:before{bottom:auto;top:-4px;border-top:1px solid #243641;border-right:none;border-bottom:none;border-left:1px solid #243641}.tooltip.tooltip-bottom .tooltip-container .tooltip-content:after{bottom:auto;top:-4px}.tooltip.tooltip-bottom.tooltip-light .tooltip-content:before{border-top:1px solid #DFE5E8;border-left:1px solid #DFE5E8}.tooltip.tooltip-right .tooltip-container{top:50%;bottom:auto;left:100%;-webkit-transform:translatey(-50%);transform:translatey(-50%);margin:0 0 0 8px}.tooltip.tooltip-right .tooltip-container .tooltip-content:before{bottom:auto;left:-4px;top:50%;-webkit-transform:translatey(-50%) rotateZ(45deg);transform:translatey(-50%) rotateZ(45deg);border-top:none;border-right:none;border-bottom:1px solid #243641;border-left:1px solid #243641}.tooltip.tooltip-right .tooltip-container .tooltip-content:after{bottom:auto;left:-4px;top:50%;-webkit-transform:translatey(-50%) rotateZ(45deg);transform:translatey(-50%) rotateZ(45deg)}.tooltip.tooltip-right.tooltip-light .tooltip-content:before{border-bottom:1px solid #DFE5E8;border-left:1px solid #DFE5E8}.tooltip.tooltip-left .tooltip-container{top:50%;bottom:auto;right:100%;left:auto;-webkit-transform:translatey(-50%);transform:translatey(-50%);margin:0 8px 0 0}.tooltip.tooltip-left .tooltip-container .tooltip-content:before{bottom:auto;right:-4px;left:auto;top:50%;-webkit-transform:translatey(-50%) rotateZ(45deg);transform:translatey(-50%) rotateZ(45deg);border-top:1px solid #243641;border-right:1px solid #243641;border-bottom:none;border-left:none}.tooltip.tooltip-left .tooltip-container .tooltip-content:after{bottom:auto;right:-4px;left:auto;top:50%;-webkit-transform:translatey(-50%) rotateZ(45deg);transform:translatey(-50%) rotateZ(45deg)}.tooltip.tooltip-left.tooltip-light .tooltip-content:before{border-top:1px solid #DFE5E8;border-right:1px solid #DFE5E8}.tooltip-sm.tooltip-container{width:120px}.tooltip-sm.tooltip-container .tooltip-content{white-space:normal}.tooltip-md.tooltip-container{width:240px}.tooltip-md.tooltip-container .tooltip-content{white-space:normal}.tooltip-lg.tooltip-container{width:360px}.tooltip-lg.tooltip-container .tooltip-content{white-space:normal}.tether-element{z-index:99}.overlay-trigger{color:#1B78B3;-webkit-transition:all 300ms ease-out;transition:all 300ms ease-out;-webkit-transition-property:background-color, color, opacity;transition-property:background-color, color, opacity}.overlay-trigger:hover,.overlay-trigger:focus{color:#1f8ace;cursor:pointer;outline:none;text-decoration:none}.overlay-trigger:active,.overlay-trigger.active{color:#176698}
+`,
+]);
+
+export default TooltipTrigger;
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -51,23 +51,22 @@ type AuthProps = {
 };

 const Auth = ({ children }: AuthProps) => {
-  if (stores.auth.authenticated && stores.auth.team) {
+  if (stores.auth.authenticated && stores.auth.team && stores.auth.user) {
    // Only initialize stores once. Kept in global scope
    // because otherwise they will get overriden on route
    // change
    if (!authenticatedStores) {
      // Stores for authenticated user
-      const user = stores.auth.getUserStore();
-      const cache = new CacheStore(user.user.id);
+      const { user, team } = stores.auth;
+      const cache = new CacheStore(user.id);
      authenticatedStores = {
-        user,
        documents: new DocumentsStore({
          ui: stores.ui,
          cache,
        }),
        collections: new CollectionsStore({
          ui: stores.ui,
-          teamId: user.team.id,
+          teamId: team.id,
          cache,
        }),
      };
--- a/frontend/scenes/Document/Document.js
+++ b/frontend/scenes/Document/Document.js
@@ -6,18 +6,18 @@ 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';
 import DocumentsStore from 'stores/DocumentsStore';
 import Menu from './components/Menu';
+import SaveAction from './components/SaveAction';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import Editor from 'components/Editor';
 import DropToImport from 'components/DropToImport';
-import { HeaderAction, SaveAction } from 'components/Layout';
+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';

@@ -44,6 +44,7 @@ type Props = {
  state = {
    isDragging: false,
    isLoading: false,
+    isSaving: false,
    newDocument: undefined,
    showAsSaved: false,
  };
@@ -108,7 +109,7 @@ type Props = {
    let document = this.document;

    if (!document) return;
-    this.setState({ isLoading: true });
+    this.setState({ isLoading: true, isSaving: true });
    document = await document.save();
    this.setState({ isLoading: false });

@@ -120,7 +121,7 @@ type Props = {
  };

  showAsSaved() {
-    this.setState({ showAsSaved: true });
+    this.setState({ showAsSaved: true, isSaving: false });
    this.savedTimeout = setTimeout(
      () => this.setState({ showAsSaved: false }),
      2000
@@ -152,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;
@@ -209,21 +196,31 @@ 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
-                          showCheckmark={this.state.showAsSaved}
+                          isSaving={this.state.isSaving}
                          onClick={this.onSave.bind(this, true)}
-                          disabled={!(this.document && this.document.allowSave)}
+                          disabled={
+                            !(this.document && this.document.allowSave) ||
+                              this.state.isSaving
+                          }
                          isNew={!!isNew}
                        />
                      : <a onClick={this.onClickEdit}>Edit</a>}
                  </HeaderAction>
+                  {isEditing &&
+                    <HeaderAction>
+                      <a onClick={this.onCancel}>Cancel</a>
+                    </HeaderAction>}
                  {!isEditing && <Menu document={document} />}
                </Flex>
              </Meta>
@@ -254,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%;
--- a/frontend/scenes/Document/components/Breadcrumbs/Breadcrumbs.js
+++ b/frontend/scenes/Document/components/Breadcrumbs/Breadcrumbs.js
@@ -1,35 +0,0 @@
-// @flow
-import React from 'react';
-import { Link } from 'react-router-dom';
-import type { Document, NavigationNode } from 'types';
-
-type Props = {
-  document: Document,
-  pathToDocument: Array<NavigationNode>,
-};
-
-const Breadcrumbs = ({ document, pathToDocument }: Props) => {
-  if (document && document.collection) {
-    const titleSections = pathToDocument
-      ? pathToDocument.map(node => (
-          <Link key={node.id} to={node.url}>{node.title}</Link>
-        ))
-      : [];
-    titleSections.unshift(
-      <Link key={document.collection.id} to={document.collection.url}>
-        {document.collection.name}
-      </Link>
-    );
-
-    return (
-      <span>
-        &nbsp;/&nbsp;
-        {titleSections.reduce((prev, curr) => [prev, ' / ', curr])}
-        {` / ${document.title}`}
-      </span>
-    );
-  }
-  return null;
-};
-
-export default Breadcrumbs;
--- a/frontend/scenes/Document/components/Breadcrumbs/index.js
+++ b/frontend/scenes/Document/components/Breadcrumbs/index.js
@@ -1,3 +0,0 @@
-// @flow
-import Breadcrumbs from './Breadcrumbs';
-export default Breadcrumbs;
--- a/frontend/components/Layout/components/SaveAction/SaveAction.js
+++ b/frontend/components/Layout/components/SaveAction/SaveAction.js
@@ -1,28 +1,26 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import CheckIcon from 'components/Icon/CheckIcon';
-import { fadeAndScaleIn } from 'styles/animations';

 type Props = {
  onClick: Function,
-  showCheckmark: boolean,
  disabled?: boolean,
  isNew?: boolean,
+  isSaving?: boolean,
 };

 class SaveAction extends React.Component {
  props: Props;

-  onClick = (event: MouseEvent) => {
+  onClick = (ev: MouseEvent) => {
    if (this.props.disabled) return;

-    event.preventDefault();
+    ev.preventDefault();
    this.props.onClick();
  };

  render() {
-    const { showCheckmark, disabled, isNew } = this.props;
+    const { isSaving, isNew, disabled } = this.props;

    return (
      <Link
@@ -30,8 +28,9 @@ class SaveAction extends React.Component {
        title="Save changes (Cmd+Enter)"
        disabled={disabled}
      >
-        {showCheckmark && <SavedIcon />}
-        {isNew ? 'Publish' : 'Save'}
+        {isNew
+          ? isSaving ? 'Publishing…' : 'Publish'
+          : isSaving ? 'Saving…' : 'Save'}
      </Link>
    );
  }
@@ -45,17 +44,4 @@ const Link = styled.a`
  cursor: ${props => (props.disabled ? 'default' : 'pointer')};
 `;

-const SavedIcon = styled(CheckIcon)`
-  animation: ${fadeAndScaleIn} 250ms ease;
-  display: inline-block;
-  margin-right: 4px;
-  width: 18px;
-  height: 18px;
-
-  svg {
-    width: 18px;
-    height: 18px;
-  }
-`;
-
 export default SaveAction;
--- a/frontend/components/Layout/components/SaveAction/index.js
+++ b/frontend/components/Layout/components/SaveAction/index.js
--- a/frontend/stores/AuthStore.js
+++ b/frontend/stores/AuthStore.js
@@ -2,7 +2,6 @@
 import { observable, action, computed, autorunAsync } from 'mobx';
 import invariant from 'invariant';
 import { client } from 'utils/ApiClient';
-import UserStore from 'stores/UserStore';
 import type { User, Team } from 'types';

 const AUTH_STORE = 'AUTH_STORE';
@@ -72,17 +71,6 @@ class AuthStore {
    };
  };

-  getUserStore(): UserStore {
-    invariant(
-      this.user && this.team,
-      'Tried to create a user store without data'
-    );
-    return new UserStore({
-      user: this.user,
-      team: this.team,
-    });
-  }
-
  constructor() {
    // Rehydrate
    const data = JSON.parse(localStorage.getItem(AUTH_STORE) || '{}');
--- a/frontend/stores/UserStore.js
+++ b/frontend/stores/UserStore.js
@@ -1,32 +0,0 @@
-// @flow
-import { observable, computed } from 'mobx';
-import type { User, Team } from 'types';
-
-type Options = {
-  user: User,
-  team: Team,
-};
-
-class UserStore {
-  @observable user: User;
-  @observable team: Team;
-
-  @observable isLoading: boolean = false;
-
-  /* Computed */
-
-  @computed get asJson(): string {
-    return JSON.stringify({
-      user: this.user,
-      team: this.team,
-    });
-  }
-
-  constructor(options: Options) {
-    // Rehydrate
-    this.user = options.user;
-    this.team = options.team;
-  }
-}
-
-export default UserStore;
--- a/frontend/styles/base.scss
+++ b/frontend/styles/base.scss
@@ -16,22 +16,18 @@

 html, body, .viewport {
  width: 100%;
+  min-height: 100vh;
  margin: 0;
 }

 body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 15px;
+  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #617180;
  background-color: #fff;
  display: flex;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;

  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;