Merge master, small refactor

2018-07-15 07:58:58 -07:00
parent a95b7fc4b6 06953acfdf
commit 5884e07c1f
179 changed files with 2521 additions and 1121 deletions
--- a/app/components/Actions/Actions.js
+++ b/app/components/Actions/Actions.js
@@ -2,15 +2,15 @@
 import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import Flex from 'shared/components/Flex';
-import { layout, color } from 'shared/styles/constants';

 export const Action = styled(Flex)`
  justify-content: center;
  align-items: center;
  padding: 0 0 0 12px;
+  font-size: 15px;

  a {
-    color: ${color.text};
+    color: ${props => props.theme.text};
    height: 24px;
  }
 `;
@@ -19,7 +19,7 @@ export const Separator = styled.div`
  margin-left: 12px;
  width: 1px;
  height: 20px;
-  background: ${color.slateLight};
+  background: ${props => props.theme.slateLight};
 `;

 const Actions = styled(Flex)`
@@ -29,7 +29,7 @@ const Actions = styled(Flex)`
  left: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.9);
-  padding: 16px;
+  padding: 12px;
  -webkit-backdrop-filter: blur(20px);

  @media print {
@@ -38,7 +38,7 @@ const Actions = styled(Flex)`

  ${breakpoint('tablet')`
    left: auto;
-    padding: ${layout.vpadding} ${layout.hpadding} 8px 8px;
+    padding: 24px;
  `};
 `;

--- a/app/components/Alert/Alert.js
+++ b/app/components/Alert/Alert.js
@@ -3,7 +3,6 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import Flex from 'shared/components/Flex';
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 type Props = {
  children: React.Node,
@@ -31,7 +30,7 @@ const Container = styled(Flex)`
  font-size: 14px;
  line-height: 1;

-  background-color: ${({ type }) => color[type]};
+  background-color: ${({ theme, type }) => theme.color[type]};
 `;

 export default Alert;
--- a/app/components/Avatar/Avatar.js
+++ b/app/components/Avatar/Avatar.js
@@ -3,7 +3,6 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { color } from 'shared/styles/constants';
 import placeholder from './placeholder.png';

 type Props = {
@@ -38,7 +37,7 @@ const CircleImg = styled.img`
  width: ${props => props.size}px;
  height: ${props => props.size}px;
  border-radius: 50%;
-  border: 2px solid ${color.white};
+  border: 2px solid ${props => props.theme.white};
  flex-shrink: 0;
 `;

--- a/app/components/Button/Button.js
+++ b/app/components/Button/Button.js
@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
 import { darken } from 'polished';

 const RealButton = styled.button`
@@ -9,8 +8,8 @@ const RealButton = styled.button`
  margin: 0;
  padding: 0;
  border: 0;
-  background: ${color.primary};
-  color: ${color.white};
+  background: ${props => props.theme.primary};
+  color: ${props => props.theme.white};
  border-radius: 4px;
  font-size: 15px;
  height: 36px;
@@ -24,7 +23,7 @@ const RealButton = styled.button`
    border: 0;
  }
  &:hover {
-    background: ${darken(0.05, color.primary)};
+    background: ${props => darken(0.05, props.theme.primary)};
  }

  svg {
@@ -40,30 +39,30 @@ const RealButton = styled.button`
  ${props =>
    props.light &&
    `
-    color: ${color.slate};
+    color: ${props.theme.slate};
    background: transparent;
-    border: 1px solid ${color.slate};
+    border: 1px solid ${props.theme.slate};

    &:hover {
      background: transparent;
-      color: ${color.slateDark};
-      border: 1px solid ${color.slateDark};
+      color: ${props.theme.slateDark};
+      border: 1px solid ${props.theme.slateDark};
    }
  `} ${props =>
      props.neutral &&
      `
-    background: ${color.slate};
+    background: ${props.theme.slate};

    &:hover {
-      background: ${darken(0.05, color.slate)};
+      background: ${darken(0.05, props.theme.slate)};
    }
  `} ${props =>
      props.danger &&
      `
-    background: ${color.danger};
+    background: ${props.theme.danger};

    &:hover {
-      background: ${darken(0.05, color.danger)};
+      background: ${darken(0.05, props.theme.danger)};
    }
  `};
 `;
--- a/app/components/ClickablePadding.js
+++ b/app/components/ClickablePadding.js
@@ -0,0 +1,10 @@
+// @flow
+import styled from 'styled-components';
+
+const ClickablePadding = styled.div`
+  min-height: 50vh;
+  cursor: ${({ onClick }) => (onClick ? 'text' : 'default')};
+  ${({ grow }) => grow && `flex-grow: 1;`};
+`;
+
+export default ClickablePadding;
--- a/app/components/Collaborators/Collaborators.js
+++ b/app/components/Collaborators/Collaborators.js
@@ -31,22 +31,21 @@ const Collaborators = ({ document }: Props) => {

  return (
    <Avatars>
-      <StyledTooltip tooltip={tooltip} placement="bottom">
-        {collaborators.map(user => (
-          <AvatarWrapper key={user.id}>
+      {collaborators.map(user => (
+        <Tooltip
+          tooltip={collaborators.length > 1 ? user.name : tooltip}
+          placement="bottom"
+          key={user.id}
+        >
+          <AvatarWrapper>
            <Avatar src={user.avatarUrl} />
          </AvatarWrapper>
-        ))}
-      </StyledTooltip>
+        </Tooltip>
+      ))}
    </Avatars>
  );
 };

-const StyledTooltip = styled(Tooltip)`
-  display: flex;
-  flex-direction: row-reverse;
-`;
-
 const AvatarWrapper = styled.div`
  width: 24px;
  height: 24px;
--- a/app/components/ColorPicker/ColorPicker.js
+++ b/app/components/ColorPicker/ColorPicker.js
@@ -5,7 +5,6 @@ import { observer } from 'mobx-react';
 import styled from 'styled-components';
 import Flex from 'shared/components/Flex';
 import { LabelText, Outline } from 'components/Input';
-import { color, fonts, fontWeight } from 'shared/styles/constants';
 import { validateColorHex } from 'shared/utils/color';

 const colors = [
@@ -165,7 +164,7 @@ const StyledOutline = styled(Outline)`
 const HexHash = styled.div`
  margin-left: 12px;
  padding-bottom: 0;
-  font-weight: ${fontWeight.medium};
+  font-weight: 500;
  user-select: none;
 `;

@@ -177,13 +176,13 @@ const CustomColorInput = styled.input`
  padding-bottom: 0;
  outline: none;
  background: none;
-  font-family: ${fonts.monospace};
-  font-weight: ${fontWeight.medium};
+  font-family: ${props => props.theme.monospaceFontFamily};
+  font-weight: 500;

  &::placeholder {
-    color: ${color.slate};
-    font-family: ${fonts.monospace};
-    font-weight: ${fontWeight.medium};
+    color: ${props => props.theme.slate};
+    font-family: ${props => props.theme.monospaceFontFamily};
+    font-weight: 500;
  }
 `;

--- a/app/components/DocumentPreview/DocumentPreview.js
+++ b/app/components/DocumentPreview/DocumentPreview.js
@@ -3,8 +3,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 import Document from 'models/Document';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
+import styled, { withTheme } from 'styled-components';
 import Flex from 'shared/components/Flex';
 import Highlight from 'components/Highlight';
 import { StarredIcon } from 'outline-icons';
@@ -15,11 +14,11 @@ type Props = {
  document: Document,
  highlight?: ?string,
  showCollection?: boolean,
-  innerRef?: Function,
+  innerRef?: *,
 };

-const StyledStar = styled(({ solid, ...props }) => (
-  <StarredIcon color={solid ? color.black : color.text} {...props} />
+const StyledStar = withTheme(styled(({ solid, theme, ...props }) => (
+  <StarredIcon color={solid ? theme.black : theme.text} {...props} />
 ))`
  opacity: ${props => (props.solid ? '1 !important' : 0)};
  transition: all 100ms ease-in-out;
@@ -30,7 +29,7 @@ const StyledStar = styled(({ solid, ...props }) => (
  &:active {
    transform: scale(0.95);
  }
-`;
+`);

 const StyledDocumentMenu = styled(DocumentMenu)`
  position: absolute;
@@ -57,8 +56,8 @@ const DocumentLink = styled(Link)`
  &:hover,
  &:active,
  &:focus {
-    background: ${color.smokeLight};
-    border: 2px solid ${color.smoke};
+    background: ${props => props.theme.smokeLight};
+    border: 2px solid ${props => props.theme.smoke};
    outline: none;

    ${StyledStar}, ${StyledDocumentMenu} {
@@ -71,7 +70,7 @@ const DocumentLink = styled(Link)`
  }

  &:focus {
-    border: 2px solid ${color.slateDark};
+    border: 2px solid ${props => props.theme.slateDark};
  }
 `;

--- a/app/components/DocumentPreview/components/PublishingInfo.js
+++ b/app/components/DocumentPreview/components/PublishingInfo.js
@@ -1,19 +1,19 @@
 // @flow
 import * as React from 'react';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
 import Collection from 'models/Collection';
 import Document from 'models/Document';
 import Flex from 'shared/components/Flex';
+import Time from 'shared/components/Time';

 const Container = styled(Flex)`
-  color: ${color.slate};
+  color: ${props => props.theme.slate};
  font-size: 13px;
 `;

 const Modified = styled.span`
-  color: ${props => (props.highlight ? color.slateDark : color.slate)};
+  color: ${props =>
+    props.highlight ? props.theme.slateDark : props.theme.slate};
  font-weight: ${props => (props.highlight ? '600' : '400')};
 `;

@@ -23,46 +23,36 @@ type Props = {
  views?: number,
 };

-class PublishingInfo extends React.Component<Props> {
-  render() {
-    const { collection, document } = this.props;
-    const {
-      modifiedSinceViewed,
-      createdAt,
-      updatedAt,
-      createdBy,
-      updatedBy,
-      publishedAt,
-    } = document;
+function PublishingInfo({ collection, document }: Props) {
+  const { modifiedSinceViewed, updatedAt, updatedBy, publishedAt } = document;

-    const timeAgo = `${distanceInWordsToNow(new Date(createdAt))} ago`;
-
-    return (
-      <Container align="center">
-        {publishedAt === updatedAt ? (
-          <span>
-            {createdBy.name} published {timeAgo}
-          </span>
-        ) : (
-          <React.Fragment>
-            {updatedBy.name}
-            {publishedAt ? (
-              <Modified highlight={modifiedSinceViewed}>
-                &nbsp;modified {timeAgo}
-              </Modified>
-            ) : (
-              <span>&nbsp;saved {timeAgo}</span>
-            )}
-          </React.Fragment>
-        )}
-        {collection && (
-          <span>
-            &nbsp;in <strong>{collection.name}</strong>
-          </span>
-        )}
-      </Container>
-    );
-  }
+  return (
+    <Container align="center">
+      {publishedAt && publishedAt === updatedAt ? (
+        <span>
+          {updatedBy.name} published <Time dateTime={publishedAt} /> ago
+        </span>
+      ) : (
+        <React.Fragment>
+          {updatedBy.name}
+          {publishedAt ? (
+            <Modified highlight={modifiedSinceViewed}>
+              &nbsp;modified <Time dateTime={updatedAt} /> ago
+            </Modified>
+          ) : (
+            <span>
+              &nbsp;saved <Time dateTime={updatedAt} /> ago
+            </span>
+          )}
+        </React.Fragment>
+      )}
+      {collection && (
+        <span>
+          &nbsp;in <strong>{collection.name}</strong>
+        </span>
+      )}
+    </Container>
+  );
 }

 export default PublishingInfo;
--- a/app/components/DropToImport/DropToImport.js
+++ b/app/components/DropToImport/DropToImport.js
@@ -3,7 +3,6 @@ import * as React from 'react';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { injectGlobal } from 'styled-components';
-import { color } from 'shared/styles/constants';
 import importFile from 'utils/importFile';
 import invariant from 'invariant';
 import _ from 'lodash';
@@ -25,12 +24,12 @@ type Props = {
 // eslint-disable-next-line
 injectGlobal`
  .activeDropZone {
-    background: ${color.slateDark};
-    svg { fill: ${color.white}; }
+    background: ${props => props.theme.slateDark};
+    svg { fill: ${props => props.theme.white}; }
  }

  .activeDropZone a {
-    color: ${color.white} !important;
+    color: ${props => props.theme.white} !important;
  }
 `;

--- a/app/components/DropdownMenu/DropdownMenu.js
+++ b/app/components/DropdownMenu/DropdownMenu.js
@@ -6,7 +6,6 @@ import { observer } from 'mobx-react';
 import styled from 'styled-components';
 import { PortalWithState } from 'react-portal';
 import Flex from 'shared/components/Flex';
-import { color } from 'shared/styles/constants';
 import { fadeAndScaleIn } from 'shared/styles/animations';

 type Props = {
@@ -90,8 +89,8 @@ const Menu = styled.div`
  right: ${({ right }) => right}px;
  top: ${({ top }) => top}px;
  z-index: 1000;
-  border: ${color.slateLight};
-  background: ${color.white};
+  border: ${props => props.theme.slateLight};
+  background: ${props => props.theme.white};
  border-radius: 2px;
  padding: 0.5em 0;
  min-width: 160px;
--- a/app/components/DropdownMenu/DropdownMenuItem.js
+++ b/app/components/DropdownMenu/DropdownMenuItem.js
@@ -1,11 +1,11 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 type Props = {
  onClick?: (SyntheticEvent<*>) => *,
  children?: React.Node,
+  disabled?: boolean,
 };

 const DropdownMenuItem = ({ onClick, children, ...rest }: Props) => {
@@ -22,24 +22,32 @@ const MenuItem = styled.a`
  padding: 6px 12px;
  height: 32px;

-  color: ${color.slateDark};
+  color: ${props =>
+    props.disabled ? props.theme.slate : props.theme.slateDark};
  justify-content: left;
  align-items: center;
-  cursor: pointer;
  font-size: 15px;
+  cursor: default;

  svg {
    margin-right: 8px;
  }

+  ${props =>
+    props.disabled
+      ? ''
+      : `
+
  &:hover {
-    color: ${color.white};
-    background: ${color.primary};
+    color: ${props.theme.white};
+    background: ${props.theme.primary};
+    cursor: pointer;

    svg {
-      fill: ${color.white};
+      fill: ${props.theme.white};
    }
  }
+  `};
 `;

 export default DropdownMenuItem;
--- a/app/components/Empty/Empty.js
+++ b/app/components/Empty/Empty.js
@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 type Props = {
  children: string,
@@ -14,7 +13,7 @@ const Empty = (props: Props) => {

 const Container = styled.div`
  display: flex;
-  color: ${color.slate};
+  color: ${props => props.theme.slate};
  text-align: center;
 `;

--- a/app/components/HelpText/HelpText.js
+++ b/app/components/HelpText/HelpText.js
@@ -1,10 +1,9 @@
 // @flow
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 const HelpText = styled.p`
  margin-top: 0;
-  color: ${color.slateDark};
+  color: ${props => props.theme.slateDark};
 `;

 export default HelpText;
--- a/app/components/Highlight/Highlight.js
+++ b/app/components/Highlight/Highlight.js
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import replace from 'string-replace-to-array';
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 type Props = {
  highlight: ?string,
@@ -28,7 +27,7 @@ function Highlight({ highlight, caseSensitive, text, ...rest }: Props) {
 }

 const Mark = styled.mark`
-  background: ${color.yellow};
+  background: ${props => props.theme.yellow};
 `;

 export default Highlight;
--- a/app/components/Input/Input.js
+++ b/app/components/Input/Input.js
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import Flex from 'shared/components/Flex';
-import { size, color } from 'shared/styles/constants';

 const RealTextarea = styled.textarea`
  border: 0;
@@ -13,7 +12,7 @@ const RealTextarea = styled.textarea`

  &:disabled,
  &::placeholder {
-    color: ${color.slate};
+    color: ${props => props.theme.slate};
  }
 `;

@@ -26,7 +25,7 @@ const RealInput = styled.input`

  &:disabled,
  &::placeholder {
-    color: ${color.slate};
+    color: ${props => props.theme.slate};
  }
 `;

@@ -37,16 +36,16 @@ const Wrapper = styled.div`
 export const Outline = styled(Flex)`
  display: flex;
  flex: 1;
-  margin: 0 0 ${size.large};
+  margin: 0 0 16px;
  color: inherit;
  border-width: 1px;
  border-style: solid;
-  border-color: ${props => (props.hasError ? 'red' : color.slateLight)};
+  border-color: ${props => (props.hasError ? 'red' : props.theme.slateLight)};
  border-radius: 4px;
  font-weight: normal;

  &:focus {
-    border-color: ${color.slate};
+    border-color: ${props => props.theme.slate};
  }
 `;

--- a/app/components/Key/key.js
+++ b/app/components/Key/key.js
@@ -1,6 +1,5 @@
 // @flow
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 const Key = styled.kbd`
  display: inline-block;
@@ -8,13 +7,13 @@ const Key = styled.kbd`
  font: 11px 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
    monospace;
  line-height: 10px;
-  color: ${color.text};
+  color: ${props => props.theme.text};
  vertical-align: middle;
-  background-color: ${color.smokeLight};
-  border: solid 1px ${color.slateLight};
-  border-bottom-color: ${color.slate};
+  background-color: ${props => props.theme.smokeLight};
+  border: solid 1px ${props => props.theme.slateLight};
+  border-bottom-color: ${props => props.theme.slate};
  border-radius: 3px;
-  box-shadow: inset 0 -1px 0 ${color.slate};
+  box-shadow: inset 0 -1px 0 ${props => props.theme.slate};
 `;

 export default Key;
--- a/app/components/Labeled/Labeled.js
+++ b/app/components/Labeled/Labeled.js
@@ -3,7 +3,6 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import Flex from 'shared/components/Flex';
 import styled from 'styled-components';
-import { size } from 'shared/styles/constants';

 type Props = {
  label: React.Node | string,
@@ -18,7 +17,7 @@ const Labeled = ({ label, children, ...props }: Props) => (
 );

 export const Label = styled(Flex)`
-  margin-bottom: ${size.medium};
+  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
--- a/app/components/Layout/Layout.js
+++ b/app/components/Layout/Layout.js
@@ -9,7 +9,6 @@ import { observer, inject } from 'mobx-react';
 import keydown from 'react-keydown';
 import Analytics from 'shared/components/Analytics';
 import Flex from 'shared/components/Flex';
-import { layout } from 'shared/styles/constants';
 import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers';

 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
@@ -39,7 +38,7 @@ type Props = {
 class Layout extends React.Component<Props> {
  scrollable: ?HTMLDivElement;

-  @keydown(['/', 't'])
+  @keydown(['/', 't', 'meta+k'])
  goToSearch(ev) {
    ev.preventDefault();
    ev.stopPropagation();
@@ -114,14 +113,14 @@ const Container = styled(Flex)`

 const Content = styled(Flex)`
  margin: 0;
-  transition: margin-left 200ms ease-in-out;
+  transition: margin-left 100ms ease-out;

  @media print {
    margin: 0;
  }

  ${breakpoint('tablet')`
-    margin-left: ${props => (props.editMode ? 0 : layout.sidebarWidth)};
+    margin-left: ${props => (props.editMode ? 0 : props.theme.sidebarWidth)};
  `};
 `;

--- a/app/components/List/Item.js
+++ b/app/components/List/Item.js
@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-import { color, fontSize } from 'shared/styles/constants';

 type Props = {
  image?: React.Node,
@@ -27,7 +26,7 @@ const Wrapper = styled.li`
  display: flex;
  padding: 12px 0;
  margin: 0;
-  border-bottom: 1px solid ${color.smokeDark};
+  border-bottom: 1px solid ${props => props.theme.smokeDark};
 `;

 const Image = styled.div`
@@ -36,7 +35,7 @@ const Image = styled.div`
 `;

 const Heading = styled.h2`
-  font-size: ${fontSize.medium};
+  font-size: 16px;
  margin: 0;
 `;

@@ -46,8 +45,8 @@ const Content = styled.div`

 const Subtitle = styled.p`
  margin: 0;
-  font-size: ${fontSize.small};
-  color: ${color.slate};
+  font-size: 14px;
+  color: ${props => props.theme.slate};
 `;

 const Actions = styled.div`
--- a/app/components/LoadingPlaceholder/components/Mask.js
+++ b/app/components/LoadingPlaceholder/components/Mask.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 { randomInteger } from 'shared/random';
 import Flex from 'shared/components/Flex';

@@ -26,7 +25,7 @@ const Redacted = styled(Flex)`
  width: ${props => (props.header ? props.width / 2 : props.width)}%;
  height: ${props => (props.header ? 28 : 18)}px;
  margin-bottom: ${props => (props.header ? 18 : 12)}px;
-  background-color: ${color.smokeDark};
+  background-color: ${props => props.theme.smokeDark};
  animation: ${pulsate} 1.3s infinite;

  &:last-child {
--- a/app/components/Modal/Modal.js
+++ b/app/components/Modal/Modal.js
@@ -5,7 +5,6 @@ import styled, { injectGlobal } from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import ReactModal from 'react-modal';
 import { CloseIcon } from 'outline-icons';
-import { color } from 'shared/styles/constants';
 import { fadeAndScaleIn } from 'shared/styles/animations';
 import Flex from 'shared/components/Flex';

@@ -84,7 +83,7 @@ const Close = styled.a`
  top: 16px;
  right: 16px;
  opacity: 0.5;
-  color: ${color.text};
+  color: ${props => props.theme.text};

  &:hover {
    opacity: 1;
--- a/app/components/Modals/Modals.js
+++ b/app/components/Modals/Modals.js
@@ -6,6 +6,7 @@ import UiStore from 'stores/UiStore';
 import CollectionNew from 'scenes/CollectionNew';
 import CollectionEdit from 'scenes/CollectionEdit';
 import CollectionDelete from 'scenes/CollectionDelete';
+import CollectionExport from 'scenes/CollectionExport';
 import DocumentDelete from 'scenes/DocumentDelete';
 import DocumentShare from 'scenes/DocumentShare';
 import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
@@ -45,6 +46,9 @@ class Modals extends React.Component<Props> {
        <Modal name="collection-delete" title="Delete collection">
          <CollectionDelete onSubmit={this.handleClose} />
        </Modal>
+        <Modal name="collection-export" title="Export collection">
+          <CollectionExport onSubmit={this.handleClose} />
+        </Modal>
        <Modal name="document-share" title="Share document">
          <DocumentShare onSubmit={this.handleClose} />
        </Modal>
--- a/app/components/ScrollToTop.js
+++ b/app/components/ScrollToTop.js
@@ -5,9 +5,16 @@ import { withRouter } from 'react-router-dom';

 class ScrollToTop extends React.Component<*> {
  componentDidUpdate(prevProps) {
-    if (this.props.location !== prevProps.location) {
-      window.scrollTo(0, 0);
-    }
+    if (this.props.location.pathname === prevProps.location.pathname) return;
+
+    // exception for when entering or exiting document edit, scroll postion should not reset
+    if (
+      this.props.location.pathname.match(/\/edit\/?$/) ||
+      prevProps.location.pathname.match(/\/edit\/?$/)
+    )
+      return;
+
+    window.scrollTo(0, 0);
  }

  render() {
--- a/app/components/Sidebar/Main.js
+++ b/app/components/Sidebar/Main.js
@@ -12,6 +12,7 @@ import Scrollable from 'components/Scrollable';
 import Collections from './components/Collections';
 import SidebarLink from './components/SidebarLink';
 import HeaderBlock from './components/HeaderBlock';
+import Bubble from './components/Bubble';

 import AuthStore from 'stores/AuthStore';
 import DocumentsStore from 'stores/DocumentsStore';
@@ -27,6 +28,10 @@ type Props = {

@observer
 class MainSidebar extends React.Component<Props> {
+  componentDidMount() {
+    this.props.documents.fetchDrafts();
+  }
+
  handleCreateCollection = () => {
    this.props.ui.setActiveModal('collection-new');
  };
@@ -67,7 +72,7 @@ class MainSidebar extends React.Component<Props> {
                  documents.active ? !documents.active.publishedAt : undefined
                }
              >
-                Drafts
+                Drafts <Bubble count={documents.drafts.length} />
              </SidebarLink>
            </Section>
            <Section>
--- a/app/components/Sidebar/Settings.js
+++ b/app/components/Sidebar/Settings.js
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { observer, inject } from 'mobx-react';
 import {
+  DocumentIcon,
  ProfileIcon,
  SettingsIcon,
  CodeIcon,
@@ -74,6 +75,11 @@ class SettingsSidebar extends React.Component<Props> {
                  Integrations
                </SidebarLink>
              )}
+              {user.isAdmin && (
+                <SidebarLink to="/settings/export" icon={<DocumentIcon />}>
+                  Export Data
+                </SidebarLink>
+              )}
            </Section>
          </Scrollable>
        </Flex>
--- a/app/components/Sidebar/Sidebar.js
+++ b/app/components/Sidebar/Sidebar.js
@@ -7,18 +7,13 @@ import breakpoint from 'styled-components-breakpoint';
 import { observer, inject } from 'mobx-react';
 import { CloseIcon, MenuIcon } from 'outline-icons';
 import Flex from 'shared/components/Flex';
-import { color, layout } from 'shared/styles/constants';

-import AuthStore from 'stores/AuthStore';
-import DocumentsStore from 'stores/DocumentsStore';
 import UiStore from 'stores/UiStore';

 type Props = {
  children: React.Node,
  history: Object,
  location: Location,
-  auth: AuthStore,
-  documents: DocumentsStore,
  ui: UiStore,
 };

@@ -59,20 +54,36 @@ const Container = styled(Flex)`
  position: fixed;
  top: 0;
  bottom: 0;
-  left: ${props => (props.editMode ? `-${layout.sidebarWidth}` : 0)};
+  left: ${props => (props.editMode ? `-${props.theme.sidebarWidth}` : 0)};
  width: 100%;
-  background: ${color.smoke};
-  transition: left 200ms ease-in-out;
+  background: ${props => props.theme.smoke};
+  transition: left 100ms ease-out;
  margin-left: ${props => (props.mobileSidebarVisible ? 0 : '-100%')};
-  z-index: 1;
+  z-index: 2;

  @media print {
    display: none;
    left: 0;
  }

+  &:before,
+  &:after {
+    content: '';
+    background: ${props => props.theme.smoke};
+    position: absolute;
+    top: -50vh;
+    left: 0;
+    width: 100%;
+    height: 50vh;
+  }
+
+  &:after {
+    top: auto;
+    bottom: -50vh;
+  }
+
  ${breakpoint('tablet')`
-    width: ${layout.sidebarWidth};
+    width: ${props => props.theme.sidebarWidth};
    margin: 0;
  `};
 `;
@@ -90,7 +101,7 @@ const Toggle = styled.a`
  left: ${props => (props.mobileSidebarVisible ? 'auto' : 0)};
  right: ${props => (props.mobileSidebarVisible ? 0 : 'auto')};
  z-index: 1;
-  margin: 16px;
+  margin: 12px;

  ${breakpoint('tablet')`
    display: none;
--- a/app/components/Sidebar/components/Bubble.js
+++ b/app/components/Sidebar/components/Bubble.js
@@ -0,0 +1,31 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import { fadeAndScaleIn } from 'shared/styles/animations';
+
+type Props = {
+  count: number,
+};
+
+const Bubble = ({ count }: Props) => {
+  return !!count && <Wrapper>{count}</Wrapper>;
+};
+
+const Wrapper = styled.div`
+  animation: ${fadeAndScaleIn} 200ms ease;
+
+  border-radius: 100%;
+  color: ${props => props.theme.white};
+  background: ${props => props.theme.slateDark};
+  display: inline-block;
+  min-width: 15px;
+  padding: 0 5px;
+  font-size: 10px;
+  position: relative;
+  top: -2px;
+  left: 2px;
+}
+
+`;
+
+export default Bubble;
--- a/app/components/Sidebar/components/Header.js
+++ b/app/components/Sidebar/components/Header.js
@@ -1,13 +1,12 @@
 // @flow
 import Flex from 'shared/components/Flex';
 import styled from 'styled-components';
-import { color, fontWeight } from 'shared/styles/constants';

 const Header = styled(Flex)`
  font-size: 11px;
-  font-weight: ${fontWeight.semiBold};
+  font-weight: 600;
  text-transform: uppercase;
-  color: ${color.slateDark};
+  color: ${props => props.theme.slateDark};
  letter-spacing: 0.04em;
  margin-bottom: 4px;
 `;
--- a/app/components/Sidebar/components/HeaderBlock.js
+++ b/app/components/Sidebar/components/HeaderBlock.js
@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
+import styled, { withTheme } from 'styled-components';
 import { ExpandedIcon } from 'outline-icons';
 import Flex from 'shared/components/Flex';
 import TeamLogo from './TeamLogo';
@@ -11,6 +10,7 @@ type Props = {
  subheading: string,
  showDisclosure?: boolean,
  logoUrl: string,
+  theme: Object,
 };

 function HeaderBlock({
@@ -18,15 +18,16 @@ function HeaderBlock({
  teamName,
  subheading,
  logoUrl,
+  theme,
  ...rest
 }: Props) {
  return (
    <Header justify="flex-start" align="center" {...rest}>
-      <TeamLogo src={logoUrl} />
+      <TeamLogo alt={`${teamName} logo`} src={logoUrl} />
      <Flex align="flex-start" column>
        <TeamName showDisclosure>
          {teamName}{' '}
-          {showDisclosure && <StyledExpandedIcon color={color.text} />}
+          {showDisclosure && <StyledExpandedIcon color={theme.text} />}
        </TeamName>
        <Subheading>{subheading}</Subheading>
      </Flex>
@@ -45,7 +46,7 @@ const Subheading = styled.div`
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 500;
-  color: ${color.slateDark};
+  color: ${props => props.theme.slateDark};
 `;

 const TeamName = styled.div`
@@ -53,7 +54,7 @@ const TeamName = styled.div`
  padding-left: 10px;
  padding-right: 24px;
  font-weight: 600;
-  color: ${color.text};
+  color: ${props => props.theme.text};
  text-decoration: none;
  font-size: 16px;
 `;
@@ -72,4 +73,4 @@ const Header = styled(Flex)`
  }
 `;

-export default HeaderBlock;
+export default withTheme(HeaderBlock);
--- a/app/components/Sidebar/components/SidebarLink.js
+++ b/app/components/Sidebar/components/SidebarLink.js
@@ -4,15 +4,9 @@ import { observable, action } from 'mobx';
 import { observer } from 'mobx-react';
 import { withRouter, NavLink } from 'react-router-dom';
 import { CollapsedIcon } from 'outline-icons';
-import { color, fontWeight } from 'shared/styles/constants';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 import Flex from 'shared/components/Flex';

-const activeStyle = {
-  color: color.black,
-  fontWeight: fontWeight.medium,
-};
-
 const StyledGoTo = styled(CollapsedIcon)`
  margin-bottom: -4px;
  margin-left: 1px;
@@ -34,12 +28,12 @@ const StyledNavLink = styled(NavLink)`
  text-overflow: ellipsis;
  padding: 4px 0;
  margin-left: ${({ icon }) => (icon ? '-20px;' : '0')};
-  color: ${color.slateDark};
+  color: ${props => props.theme.slateDark};
  font-size: 15px;
  cursor: pointer;

  &:hover {
-    color: ${color.text};
+    color: ${props => props.theme.text};
  }
 `;

@@ -57,11 +51,22 @@ type Props = {
  hideExpandToggle?: boolean,
  iconColor?: string,
  active?: boolean,
+  theme: Object,
 };

@observer
 class SidebarLink extends React.Component<Props> {
  @observable expanded: boolean = false;
+  activeStyle: Object;
+
+  constructor(props) {
+    super(props);
+
+    this.activeStyle = {
+      color: props.theme.black,
+      fontWeight: 500,
+    };
+  }

  componentDidMount() {
    if (this.props.expand) this.handleExpand();
@@ -104,8 +109,8 @@ class SidebarLink extends React.Component<Props> {
      <Wrapper menuOpen={menuOpen} column>
        <Component
          icon={showExpandIcon}
-          activeStyle={activeStyle}
-          style={active ? activeStyle : undefined}
+          activeStyle={this.activeStyle}
+          style={active ? this.activeStyle : undefined}
          onClick={onClick}
          to={to}
          exact
@@ -128,7 +133,7 @@ const Action = styled.span`
  position: absolute;
  right: 0;
  top: 2px;
-  color: ${color.slate};
+  color: ${props => props.theme.slate};
  svg {
    opacity: 0.75;
  }
@@ -158,4 +163,4 @@ const Content = styled.div`
  width: 100%;
 `;

-export default withRouter(SidebarLink);
+export default withRouter(withTheme(SidebarLink));
--- a/app/components/Sidebar/components/TeamLogo.js
+++ b/app/components/Sidebar/components/TeamLogo.js
@@ -1,13 +1,12 @@
 // @flow
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 const TeamLogo = styled.img`
  width: 38px;
  height: 38px;
  border-radius: 4px;
-  background: ${color.white};
-  border: 1px solid ${color.slateLight};
+  background: ${props => props.theme.white};
+  border: 1px solid ${props => props.theme.slateLight};
 `;

 export default TeamLogo;
--- a/app/components/Subheading.js
+++ b/app/components/Subheading.js
@@ -1,14 +1,13 @@
 // @flow
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 const Subheading = styled.h3`
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
-  color: ${color.slate};
+  color: ${props => props.theme.slate};
  letter-spacing: 0.04em;
-  border-bottom: 1px solid ${color.slateLight};
+  border-bottom: 1px solid ${props => props.theme.slateLight};
  padding-bottom: 8px;
  margin-top: 30px;
  margin-bottom: 10px;
--- a/app/components/Toasts/Toasts.js
+++ b/app/components/Toasts/Toasts.js
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
-import { layout } from 'shared/styles/constants';
 import Toast from './components/Toast';
 import UiStore from '../../stores/UiStore';

@@ -34,8 +33,8 @@ class Toasts extends React.Component<Props> {

 const List = styled.ol`
  position: fixed;
-  left: ${layout.hpadding};
-  bottom: ${layout.vpadding};
+  left: ${props => props.theme.hpadding};
+  bottom: ${props => props.theme.vpadding};
  list-style: none;
  margin: 0;
  padding: 0;
--- a/app/components/Toasts/components/Toast.js
+++ b/app/components/Toasts/components/Toast.js
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { darken } from 'polished';
-import { color } from 'shared/styles/constants';
 import { fadeAndScaleIn } from 'shared/styles/animations';
 import type { Toast as TToast } from '../../../types';

@@ -51,14 +50,14 @@ const Container = styled.li`
  animation: ${fadeAndScaleIn} 100ms ease;
  margin: 8px 0;
  padding: 8px;
-  color: ${color.white};
-  background: ${props => color[props.type]};
+  color: ${props => props.theme.white};
+  background: ${props => props.theme[props.type]};
  font-size: 15px;
  border-radius: 5px;
  cursor: default;

  &:hover {
-    background: ${props => darken(0.05, color[props.type])};
+    background: ${props => darken(0.05, props.theme[props.type])};
  }
 `;