Merge master

frontend/components/Alert/Alert.js

@@ -1,36 +1,37 @@
 // @flow
-import React, { PropTypes } from 'react';
+import React from 'react';
+import { observer } from 'mobx-react';
 import Flex from 'components/Flex';
-import classNames from 'classnames/bind';
+import styled from 'styled-components';
-import styles from './Alert.scss';
+import { color } from 'styles/constants';
 
-const cx = classNames.bind(styles);
+type Props = {
+  children: React.Element<*>,
+  type?: 'info' | 'success' | 'warning' | 'danger' | 'offline',
+};
 
-class Alert extends React.Component {
+@observer class Alert extends React.Component {
-  static propTypes = {
+  props: Props;
-    children: PropTypes.node.isRequired,
+  defaultProps = {
-    danger: PropTypes.bool,
+    type: 'info',
-    warning: PropTypes.bool,
-    success: PropTypes.bool,
   };
 
   render() {
-    let alertType;
-    if (this.props.danger) alertType = 'danger';
-    if (this.props.warning) alertType = 'warning';
-    if (this.props.success) alertType = 'success';
-    if (!alertType) alertType = 'info'; // default
-
     return (
-      <Flex
+      <Container align="center" justify="center" type={this.props.type}>
-        align="center"
-        justify="center"
-        className={cx(styles.container, styles[alertType])}
-      >
         {this.props.children}
-      </Flex>
+      </Container>
     );
   }
 }
 
+const Container = styled(Flex)`
+  height: $headerHeight;
+  color: #ffffff;
+  font-size: 14px;
+  line-height: 1;
+
+  background-color: ${({ type }) => color[type]};
+`;
+
 export default Alert;

frontend/components/Alert/Alert.scss

@@ -1,28 +0,0 @@
-@import '~styles/constants.scss';
-
-.container {
-  height: $headerHeight;
-  color: #ffffff;
-  font-size: 14px;
-  line-height: 1;
-}
-
-.danger {
-  background-color: #f04124;
-}
-
-.warning {
-  background-color: #f08a24;
-}
-
-.success {
-  background-color: #43AC6A;
-}
-
-.info {
-  background-color: #a0d3e8;
-}
-
-.offline {
-  background-color: #000000;
-}

frontend/components/Alert/Alert.test.js

@@ -1,23 +0,0 @@
-/* eslint-disable */
-import React from 'react';
-import Alert from '.';
-
-test('renders default as info', () => {
-  snap(<Alert>default</Alert>);
-});
-
-test('renders success', () => {
-  snap(<Alert success>success</Alert>);
-});
-
-test('renders info', () => {
-  snap(<Alert info>info</Alert>);
-});
-
-test('renders warning', () => {
-  snap(<Alert warning>warning</Alert>);
-});
-
-test('renders danger', () => {
-  snap(<Alert danger>danger</Alert>);
-});

frontend/components/Alert/__snapshots__/Alert.test.js.snap

@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders danger 1`] = `
-<Flex
-  align="center"
-  className="container danger"
-  justify="center"
->
-  danger
-</Flex>
-`;
-
-exports[`renders default as info 1`] = `
-<Flex
-  align="center"
-  className="container info"
-  justify="center"
->
-  default
-</Flex>
-`;
-
-exports[`renders info 1`] = `
-<Flex
-  align="center"
-  className="container info"
-  justify="center"
->
-  info
-</Flex>
-`;
-
-exports[`renders success 1`] = `
-<Flex
-  align="center"
-  className="container success"
-  justify="center"
->
-  success
-</Flex>
-`;
-
-exports[`renders warning 1`] = `
-<Flex
-  align="center"
-  className="container warning"
-  justify="center"
->
-  warning
-</Flex>
-`;

frontend/components/Collaborators/Collaborators.js

@@ -25,15 +25,20 @@ const Collaborators = function({ document }: { document: Document }) {
 
   return (
     <Avatars>
-      <Tooltip tooltip={tooltip} placement="bottom">
+      <StyledTooltip tooltip={tooltip} placement="bottom">
         {collaborators.map(user => (
           <Avatar key={user.id} src={user.avatarUrl} />
         ))}
-      </Tooltip>
+      </StyledTooltip>
     </Avatars>
   );
 };
 
+const StyledTooltip = styled(Tooltip)`
+  display: flex;
+  flex-direction: row-reverse;
+`;
+
 const Avatars = styled(Flex)`
   flex-direction: row-reverse;
   height: 26px;
@@ -45,7 +50,7 @@ const Avatar = styled.img`
   flex-shrink: 0;
   border-radius: 50%;
   border: 2px solid ${color.white};
-  margin-right: -13px;
+  margin-right: -10px;
 
   &:first-child {
     margin-right: 0;

frontend/components/Collection/Collection.js

@@ -1,48 +0,0 @@
-// @flow
-import React from 'react';
-import { observer } from 'mobx-react';
-import { Link } from 'react-router-dom';
-import moment from 'moment';
-
-import styles from './Collection.scss';
-
-@observer class Collection extends React.Component {
-  static propTypes = {
-    data: React.PropTypes.object.isRequired,
-  };
-
-  render() {
-    const data = this.props.data;
-
-    return (
-      <div className={styles.container}>
-        <h2>
-          <Link to={data.url} className={styles.atlasLink}>{data.name}</Link>
-        </h2>
-        {data.recentDocuments.length > 0
-          ? data.recentDocuments.map(document => {
-              return (
-                <Link
-                  key={document.id}
-                  to={document.url}
-                  className={styles.link}
-                >
-                  <h3 className={styles.title}>{document.title}</h3>
-                  <span className={styles.timestamp}>
-                    {moment(document.updatedAt).fromNow()}
-                  </span>
-                </Link>
-              );
-            })
-          : <div className={styles.description}>
-              No documents. Why not
-              {' '}
-              <Link to={`${data.url}/new`}>create one</Link>
-              ?
-            </div>}
-      </div>
-    );
-  }
-}
-
-export default Collection;

frontend/components/Collection/Collection.scss

@@ -1,41 +0,0 @@
-@import '~styles/constants.scss';
-
-.container {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  padding-bottom: 40px;
-  margin-bottom: 20px;
-  border-bottom: 1px solid #eee;
-}
-
-.atlasLink {
-  text-decoration: none;
-  color: $textColor;
-}
-
-.description {
-  color: #aaa;
-}
-
-.link {
-  display: flex;
-  flex: 1;
-  justify-content: space-between;
-
-  margin-bottom: 20px;
-  text-decoration: none;
-}
-
-.title {
-  font-weight: normal;
-  font-size: 15px;
-  color: $textColor;
-
-  margin: 0;
-}
-
-.timestamp {
-  font-size: 13px;
-  color: #ccc;
-}

frontend/components/Collection/components/DocumentLink/DocumentLink.js

@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import { observer } from 'mobx-react';
-
-import moment from 'moment';
-import { Link } from 'react-router-dom';
-
-import styles from './DocumentLink.scss';
-
-const DocumentLink = observer(props => {
-  return (
-    <Link to={props.document.url} className={styles.link}>
-      <h3 className={styles.title}>{props.document.title}</h3>
-      <span className={styles.timestamp}>
-        {moment(props.document.updatedAt).fromNow()}
-      </span>
-    </Link>
-  );
-});
-
-export default DocumentLink;

frontend/components/Collection/components/DocumentLink/DocumentLink.scss

@@ -1,23 +0,0 @@
-@import '~styles/constants.scss';
-
-.link {
-  display: flex;
-  flex: 1;
-  justify-content: space-between;
-
-  margin-bottom: 20px;
-  text-decoration: none;
-}
-
-.title {
-  font-weight: normal;
-  font-size: 15px;
-  color: $textColor;
-
-  margin: 0;
-}
-
-.timestamp {
-  font-size: 13px;
-  color: #ccc;
-}

frontend/components/Collection/components/DocumentLink/index.js

@@ -1,3 +0,0 @@
-// @flow
-import DocumentLink from './DocumentLink';
-export default DocumentLink;

frontend/components/Collection/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Collection from './Collection';
-export default Collection;

frontend/components/Divider/Divider.js

@@ -1,10 +1,17 @@
 // @flow
 import React from 'react';
-
+import styled from 'styled-components';
-import styles from './Divider.scss';
+import Flex from 'components/Flex';
 
 const Divider = () => {
-  return <div className={styles.divider}><span /></div>;
+  return <Flex auto justify="center"><Content /></Flex>;
 };
 
+const Content = styled.span`
+  display: flex;
+  width: 50%;
+  margin: 20px 0;
+  border-bottom: 1px solid #eee;
+`;
+
 export default Divider;

frontend/components/Divider/Divider.scss

@@ -1,13 +0,0 @@
-.divider {
-  display: flex;
-  flex: 1;
-  justify-content: center;
-
-  span {
-    display: flex;
-    width: 50%;
-    margin: 20px 0;
-
-    border-bottom: 1px solid #eee;
-  }
-}

frontend/components/DocumentPreview/DocumentPreview.js

@@ -15,13 +15,18 @@ type Props = {
   innerRef?: Function,
 };
 
-const StyledStar = styled(Icon).attrs({
+const StyledStar = styled(({ solid, ...props }) => <Icon {...props} />).attrs({
   type: 'Star',
   color: color.text,
 })`
+  width: 16px;
+  height: 16px;
+  top: 1px;
   margin-left: 4px;
   opacity: ${props => (props.solid ? '1 !important' : 0)};
   transition: opacity 100ms ease-in-out;
+
+  ${props => props.solid && 'polygon { fill: #000};'}
 `;
 
 const DocumentLink = styled(Link)`

frontend/components/Editor/Editor.js

@@ -3,20 +3,17 @@ import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { Editor, Plain } from 'slate';
 import keydown from 'react-keydown';
-import classnames from 'classnames/bind';
 import type { Document, State, Editor as EditorType } from './types';
 import getDataTransferFiles from 'utils/getDataTransferFiles';
 import Flex from 'components/Flex';
 import ClickablePadding from './components/ClickablePadding';
 import Toolbar from './components/Toolbar';
+import Placeholder from './components/Placeholder';
 import Markdown from './serializer';
 import createSchema from './schema';
 import createPlugins from './plugins';
 import insertImage from './insertImage';
 import styled from 'styled-components';
-import styles from './Editor.scss';
-
-const cx = classnames.bind(styles);
 
 type Props = {
   text: string,
@@ -188,11 +185,10 @@ type KeyData = {
         <MaxWidth column auto>
           <Header onClick={this.focusAtStart} readOnly={this.props.readOnly} />
           <Toolbar state={this.state.state} onChange={this.onChange} />
-          <Editor
+          <StyledEditor
-            ref={ref => (this.editor = ref)}
+            innerRef={ref => (this.editor = ref)}
             placeholder="Start with a title…"
             bodyPlaceholder="Insert witty platitude here"
-            className={cx(styles.editor, { readOnly: this.props.readOnly })}
             schema={this.schema}
             plugins={this.plugins}
             emoji={this.props.emoji}
@@ -225,4 +221,106 @@ const Header = styled(Flex)`
   ${({ readOnly }) => !readOnly && 'cursor: text;'}
 `;
 
+const StyledEditor = styled(Editor)`
+  font-weight: 400;
+  font-size: 1em;
+  line-height: 1.7em;
+  width: 100%;
+  color: #1b2830;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 500;
+
+    .anchor {
+      visibility: hidden;
+      color: #dedede;
+      padding-left: 0.25em;
+    }
+
+    &:hover {
+      .anchor {
+        visibility: visible;
+
+        &:hover {
+          color: #cdcdcd;
+        }
+      }
+    }
+  }
+
+  h1:first-of-type {
+    ${Placeholder} {
+      visibility: visible;
+    }
+  }
+
+  p:first-of-type {
+    ${Placeholder} {
+      visibility: visible;
+    }
+  }
+
+  ul,
+  ol {
+    margin: 1em 0.1em;
+    padding-left: 1em;
+
+    ul,
+    ol {
+      margin: 0.1em;
+    }
+  }
+
+  p {
+    position: relative;
+  }
+
+  li p {
+    display: inline;
+    margin: 0;
+  }
+
+  .todoList {
+    list-style: none;
+    padding-left: 0;
+
+    .todoList {
+      padding-left: 1em;
+    }
+  }
+
+  .todo {
+    span:last-child:focus {
+      outline: none;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid #efefef;
+    padding-left: 10px;
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+
+  tr {
+    border-bottom: 1px solid #eee;
+  }
+
+  th {
+    font-weight: bold;
+  }
+
+  th,
+  td {
+    padding: 5px 20px 5px 0;
+  }
+`;
+
 export default MarkdownEditor;

frontend/components/Editor/Editor.scss

@@ -1,131 +0,0 @@
-.editor {
-  font-weight: 400;
-  font-size: 1em;
-  line-height: 1.7em;
-  width: 100%;
-  color: #1b2830;
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: 500;
-
-    .anchor {
-      visibility: hidden;
-      color: #dedede;
-      padding-left: .25em;
-    }
-
-    &:hover {
-      .anchor {
-        visibility: visible;
-
-        &:hover {
-          color: #cdcdcd;
-        }
-      }
-    }
-  }
-
-  h1:first-of-type {
-    .placeholder {
-      visibility: visible;
-    }
-  }
-
-  p:first-of-type {
-    .placeholder {
-      visibility: visible;
-    }
-  }
-
-  ul,
-  ol {
-    margin: 1em .1em;
-    padding-left: 1em;
-
-    ul,
-    ol {
-      margin: .1em;
-    }
-  }
-
-  p {
-    position: relative;
-  }
-
-  li p {
-    display: inline;
-    margin: 0;
-  }
-
-  .todoList {
-    list-style: none;
-    padding-left: 0;
-
-    .todoList {
-      padding-left: 1em;
-    }
-  }
-
-  .todo {
-    span:last-child:focus {
-      outline: none;
-    }
-  }
-
-  blockquote {
-    border-left: 3px solid #efefef;
-    padding-left: 10px;
-  }
-
-  table {
-    border-collapse: collapse;
-  }
-
-  tr {
-    border-bottom: 1px solid #eee;
-  }
-
-  th {
-    font-weight: bold;
-  }
-
-  th,
-  td {
-    padding: 5px 20px 5px 0;
-  }
-}
-
-.readOnly {
-  cursor: default;
-}
-
-.title {
-  position: relative;
-}
-
-.placeholder {
-  position: absolute;
-  top: 0;
-  visibility: hidden;
-  pointer-events: none;
-  user-select: none;
-  color: #B1BECC;
-}
-
-@media all and (max-width: 2000px) and (min-width: 960px) {
-  .container {
-    // margin-top: 48px;
-    font-size: 1.1em;
-  }
-}
-
-@media all and (max-width: 960px) {
-  .container {
-    font-size: 0.9em;
-  }
-}

frontend/components/Editor/components/Heading.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import _ from 'lodash';
 import slug from 'slug';
 import type { Node, Editor } from '../types';
-import styles from '../Editor.scss';
+import Placeholder from './Placeholder';
 
 type Props = {
   children: React$Element<any>,
@@ -22,6 +22,27 @@ const Wrapper = styled.div`
   margin-left: ${props => (props.hasEmoji ? '-1.2em' : 0)}
 `;
 
+const Anchor = styled.a`
+  visibility: hidden;
+  padding-left: .25em;
+  color: #dedede;
+
+  &:hover {
+    color: #cdcdcd;
+  }
+`;
+
+// $FlowIssue I don't know
+const titleStyles = component => styled(component)`
+  position: relative;
+
+  &:hover {
+    ${Anchor} {
+      visibility: visible;
+    }
+  }
+`;
+
 function Heading(props: Props) {
   const {
     parent,
@@ -37,21 +58,20 @@ function Heading(props: Props) {
   const showPlaceholder = placeholder && firstHeading && !node.text;
   const slugish = _.escape(`${component}-${slug(node.text)}`);
   const showHash = readOnly && !!slugish;
-  const Component = component;
+  const Component = titleStyles(component);
   const emoji = editor.props.emoji || '';
   const title = node.text.trim();
   const startsWithEmojiAndSpace =
     emoji && title.match(new RegExp(`^${emoji}\\s`));
 
   return (
-    <Component className={styles.title}>
+    <Component>
       <Wrapper hasEmoji={startsWithEmojiAndSpace}>{children}</Wrapper>
       {showPlaceholder &&
-        <span className={styles.placeholder} contentEditable={false}>
+        <Placeholder contentEditable={false}>
           {editor.props.placeholder}
-        </span>}
+        </Placeholder>}
-      {showHash &&
+      {showHash && <Anchor name={slugish} href={`#${slugish}`}>#</Anchor>}
-        <a name={slugish} className={styles.anchor} href={`#${slugish}`}>#</a>}
     </Component>
   );
 }

frontend/components/Editor/components/Paragraph.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { Document } from 'slate';
 import type { Props } from '../types';
-import styles from '../Editor.scss';
+import Placeholder from './Placeholder';
 
 export default function Link({
   attributes,
@@ -26,9 +26,9 @@ export default function Link({
     <p>
       {children}
       {showPlaceholder &&
-        <span className={styles.placeholder} contentEditable={false}>
+        <Placeholder contentEditable={false}>
           {editor.props.bodyPlaceholder}
-        </span>}
+        </Placeholder>}
     </p>
   );
 }

frontend/components/Editor/components/Placeholder.js

@@ -0,0 +1,11 @@
+// @flow
+import styled from 'styled-components';
+
+export default styled.span`
+  position: absolute;
+  top: 0;
+  visibility: hidden;
+  pointer-events: none;
+  user-select: none;
+  color: #B1BECC;
+`;

frontend/components/Editor/components/TodoItem.js

@@ -1,7 +1,7 @@
 // @flow
 import React, { Component } from 'react';
+import styled from 'styled-components';
 import type { Props } from '../types';
-import styles from '../Editor.scss';
 
 export default class TodoItem extends Component {
   props: Props & { checked: boolean };
@@ -22,7 +22,7 @@ export default class TodoItem extends Component {
     const { children, checked, readOnly } = this.props;
 
     return (
-      <li contentEditable={false} className={styles.todo}>
+      <StyledLi contentEditable={false}>
         <input
           type="checkbox"
           checked={checked}
@@ -33,7 +33,17 @@ export default class TodoItem extends Component {
         <span contentEditable={!readOnly} suppressContentEditableWarning>
           {children}
         </span>
-      </li>
+      </StyledLi>
     );
   }
 }
+
+const StyledLi = styled.li`
+  input {
+    margin-right: 0.25em;
+  }
+
+  &:last-child:focus {
+    outline: none;
+  }
+`;

frontend/components/Editor/components/Toolbar/Toolbar.js

@@ -1,12 +1,11 @@
 // @flow
 import React, { Component } from 'react';
 import Portal from 'react-portal';
-import classnames from 'classnames';
+import styled from 'styled-components';
 import _ from 'lodash';
 import type { State } from '../../types';
 import FormattingToolbar from './components/FormattingToolbar';
 import LinkToolbar from './components/LinkToolbar';
-import styles from './Toolbar.scss';
 
 export default class Toolbar extends Component {
   props: {
@@ -112,9 +111,6 @@ export default class Toolbar extends Component {
 
   render() {
     const link = this.state.link;
-    const classes = classnames(styles.menu, {
-      [styles.active]: this.state.active,
-    });
 
     const style = {
       top: this.state.top,
@@ -123,7 +119,7 @@ export default class Toolbar extends Component {
 
     return (
       <Portal isOpened>
-        <div className={classes} style={style} ref={this.setRef}>
+        <Menu active={this.state.active} innerRef={this.setRef} style={style}>
           {link &&
             <LinkToolbar
               {...this.props}
@@ -135,8 +131,28 @@ export default class Toolbar extends Component {
               onCreateLink={this.handleFocus}
               {...this.props}
             />}
-        </div>
+        </Menu>
       </Portal>
     );
   }
 }
+
+const Menu = styled.div`
+  padding: 8px 16px;
+  position: absolute;
+  z-index: 1;
+  top: -10000px;
+  left: -10000px;
+  opacity: 0;
+  background-color: #222;
+  border-radius: 4px;
+  transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
+  line-height: 0;
+  height: 40px;
+  min-width: 260px;
+
+  ${({ active }) => active && `
+    transform: translateY(-6px);
+    opacity: 1;
+  `}
+`;

frontend/components/Editor/components/Toolbar/Toolbar.scss

@@ -1,62 +0,0 @@
-.menu {
-  padding: 8px 16px;
-  position: absolute;
-  z-index: 1;
-  top: -10000px;
-  left: -10000px;
-  opacity: 0;
-  background-color: #222;
-  border-radius: 4px;
-  transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
-  line-height: 0;
-  height: 40px;
-  min-width: 260px;
-}
-
-.active {
-  transform: translateY(-6px);
-  opacity: 1;
-}
-
-.linkEditor {
-  display: flex;
-  margin-left: -8px;
-  margin-right: -8px;
-
-  input {
-    background: rgba(255,255,255,.1);
-    border-radius: 2px;
-    padding: 5px 8px;
-    border: 0;
-    margin: 0;
-    outline: none;
-    color: #fff;
-    flex-grow: 1;
-  }
-}
-
-.button {
-  display: inline-block;
-  flex: 0;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  margin-left: 10px;
-  border: none;
-  background: none;
-  transition: opacity 100ms ease-in-out;
-  padding: 0;
-  opacity: .7;
-
-  &:first-child {
-    margin-left: 0;
-  }
-
-  &:hover {
-    opacity: 1;
-  }
-
-  &[data-active="true"] {
-    opacity: 1;
-  }
-}

frontend/components/Editor/components/Toolbar/components/FormattingToolbar.js

@@ -1,7 +1,7 @@
 // @flow
 import React, { Component } from 'react';
-import styles from '../Toolbar.scss';
 import type { State } from '../../../types';
+import ToolbarButton from './ToolbarButton';
 import BoldIcon from 'components/Icon/BoldIcon';
 import CodeIcon from 'components/Icon/CodeIcon';
 import Heading1Icon from 'components/Icon/Heading1Icon';
@@ -68,13 +68,9 @@ export default class FormattingToolbar extends Component {
     const onMouseDown = ev => this.onClickMark(ev, type);
 
     return (
-      <button
+      <ToolbarButton onMouseDown={onMouseDown} active={isActive}>
-        className={styles.button}
-        onMouseDown={onMouseDown}
-        data-active={isActive}
-      >
         <IconClass light />
-      </button>
+      </ToolbarButton>
     );
   };
 
@@ -84,13 +80,9 @@ export default class FormattingToolbar extends Component {
       this.onClickBlock(ev, isActive ? 'paragraph' : type);
 
     return (
-      <button
+      <ToolbarButton onMouseDown={onMouseDown} active={isActive}>
-        className={styles.button}
-        onMouseDown={onMouseDown}
-        data-active={isActive}
-      >
         <IconClass light />
-      </button>
+      </ToolbarButton>
     );
   };
 
@@ -103,9 +95,9 @@ export default class FormattingToolbar extends Component {
         {this.renderBlockButton('heading2', Heading2Icon)}
         {this.renderBlockButton('bulleted-list', BulletedListIcon)}
         {this.renderMarkButton('code', CodeIcon)}
-        <button className={styles.button} onMouseDown={this.onCreateLink}>
+        <ToolbarButton onMouseDown={this.onCreateLink}>
           <LinkIcon light />
-        </button>
+        </ToolbarButton>
       </span>
     );
   }

frontend/components/Editor/components/Toolbar/components/LinkToolbar.js

@@ -1,9 +1,11 @@
 // @flow
 import React, { Component } from 'react';
+import styled from 'styled-components';
+import ToolbarButton from './ToolbarButton';
 import type { State } from '../../../types';
 import keydown from 'react-keydown';
-import styles from '../Toolbar.scss';
 import Icon from 'components/Icon';
+import Flex from 'components/Flex';
 
 @keydown
 export default class LinkToolbar extends Component {
@@ -20,7 +22,7 @@ export default class LinkToolbar extends Component {
       case 13: // enter
         ev.preventDefault();
         return this.save(ev.target.value);
-      case 26: // escape
+      case 27: // escape
         return this.input.blur();
       default:
     }
@@ -48,19 +50,35 @@ export default class LinkToolbar extends Component {
   render() {
     const href = this.props.link.data.get('href');
     return (
-      <span className={styles.linkEditor}>
+      <LinkEditor>
-        <input
+        <Input
-          ref={ref => (this.input = ref)}
+          innerRef={ref => (this.input = ref)}
           defaultValue={href}
           placeholder="http://"
           onBlur={this.props.onBlur}
           onKeyDown={this.onKeyDown}
           autoFocus
         />
-        <button className={styles.button} onMouseDown={this.removeLink}>
+        <ToolbarButton onMouseDown={this.removeLink}>
           <Icon type="X" light />
-        </button>
+        </ToolbarButton>
-      </span>
+      </LinkEditor>
     );
   }
 }
+
+const LinkEditor = styled(Flex)`
+  margin-left: -8px;
+  margin-right: -8px;
+`;
+
+const Input = styled.input`
+  background: rgba(255,255,255,.1);
+  border-radius: 2px;
+  padding: 5px 8px;
+  border: 0;
+  margin: 0;
+  outline: none;
+  color: #fff;
+  flex-grow: 1;
+`;

frontend/components/Editor/components/Toolbar/components/ToolbarButton.js

@@ -0,0 +1,26 @@
+// @flow
+import styled from 'styled-components';
+
+export default styled.button`
+  display: inline-block;
+  flex: 0;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  margin-left: 10px;
+  border: none;
+  background: none;
+  transition: opacity 100ms ease-in-out;
+  padding: 0;
+  opacity: .7;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+
+  ${({ active }) => active && 'opacity: 1;'}
+`;

frontend/components/Editor/schema.js

@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import styled from 'styled-components';
 import Code from './components/Code';
 import InlineCode from './components/InlineCode';
 import Image from './components/Image';
@@ -8,7 +9,15 @@ import ListItem from './components/ListItem';
 import Heading from './components/Heading';
 import Paragraph from './components/Paragraph';
 import type { Props, Node, Transform } from './types';
-import styles from './Editor.scss';
+
+const TodoList = styled.ul`
+  list-style: none;
+  padding-left: 0;
+
+  ul {
+    padding-left: 1em;
+  }
+`;
 
 const createSchema = () => {
   return {
@@ -29,9 +38,7 @@ const createSchema = () => {
       'horizontal-rule': (props: Props) => <hr />,
       'bulleted-list': (props: Props) => <ul>{props.children}</ul>,
       'ordered-list': (props: Props) => <ol>{props.children}</ol>,
-      'todo-list': (props: Props) => (
+      'todo-list': (props: Props) => <TodoList>{props.children}</TodoList>,
-        <ul className={styles.todoList}>{props.children}</ul>
-      ),
       table: (props: Props) => <table>{props.children}</table>,
       'table-row': (props: Props) => <tr>{props.children}</tr>,
       'table-head': (props: Props) => <th>{props.children}</th>,

frontend/components/HelpText/HelpText.js

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import { color } from 'styles/constants';
 
 const HelpText = styled.p`
-  user-select: none;
   color: ${color.slateDark};
 `;
 

frontend/components/LoadingPlaceholder/ListPlaceholder.js

@@ -1,11 +1,16 @@
 // @flow
 import React from 'react';
+import _ from 'lodash';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import styled from 'styled-components';
 import Mask from './components/Mask';
 import Flex from 'components/Flex';
 
-export default (props: Object) => {
+type Props = {
+  count?: number,
+};
+
+const ListPlaceHolder = ({ count }: Props) => {
   return (
     <ReactCSSTransitionGroup
       transitionName="fadeIn"
@@ -16,14 +21,12 @@ export default (props: Object) => {
       transitionEnter
       transitionLeave
     >
-      <Item column auto>
+      {_.times(count || 2, index => (
-        <Mask header />
+        <Item key={index} column auto>
-        <Mask />
+          <Mask header />
-      </Item>
+          <Mask />
-      <Item column auto>
+        </Item>
-        <Mask header />
+      ))}
-        <Mask />
-      </Item>
     </ReactCSSTransitionGroup>
   );
 };
@@ -31,3 +34,5 @@ export default (props: Object) => {
 const Item = styled(Flex)`
   padding: 18px 0;
 `;
+
+export default ListPlaceHolder;

frontend/components/Markdown/Markdown.js

@@ -1,77 +0,0 @@
-// @flow
-import React from 'react';
-import { State, Document, Editor } from 'slate';
-import MarkdownSerializer from '../Editor/serializer';
-import type { State as StateType } from '../Editor/types';
-import schema from '../Editor/schema';
-import styles from '../Editor/Editor.scss';
-
-type Props = {
-  text: string,
-  className: string,
-  limit: number,
-};
-
-function filterDocumentState({ state, characterLimit, nodeLimit }) {
-  const { document } = state;
-  if (document.text.length <= characterLimit) {
-    return state;
-  }
-
-  let totalCharacters = 0;
-  let totalNodes = 0;
-  const nodes = document.nodes.filter(childNode => {
-    if (childNode.text.length + totalCharacters <= characterLimit) {
-      totalCharacters += childNode.text.length;
-
-      if (totalNodes++ <= nodeLimit) {
-        return true;
-      }
-    }
-    return false;
-  });
-
-  return State.create({
-    document: Document.create({
-      ...document,
-      nodes: nodes,
-    }),
-  });
-}
-
-class Markdown extends React.Component {
-  props: Props;
-
-  state: {
-    state: StateType,
-  };
-
-  constructor(props: Props) {
-    super(props);
-    const state = MarkdownSerializer.deserialize(props.text);
-    const options = {
-      state,
-      characterLimit: props.limit,
-      nodeLimit: 5,
-    };
-
-    this.state = {
-      state: filterDocumentState(options),
-    };
-  }
-
-  render() {
-    return (
-      <span className={this.props.className}>
-        <Editor
-          className={styles.editor}
-          schema={schema}
-          state={this.state.state}
-          readOnly
-        />
-      </span>
-    );
-  }
-}
-
-export default Markdown;

frontend/components/Markdown/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Markdown from './Markdown';
-export default Markdown;

frontend/index.js

@@ -16,11 +16,11 @@ import CollectionsStore from 'stores/CollectionsStore';
 import CacheStore from 'stores/CacheStore';
 
 import 'normalize.css/normalize.css';
-import 'styles/base.scss';
+import 'styles/base.css';
 import 'styles/fonts.css';
-import 'styles/transitions.scss';
+import 'styles/transitions.css';
-import 'styles/prism-tomorrow.scss';
+import 'styles/prism-tomorrow.css';
-import 'styles/hljs-github-gist.scss';
+import 'styles/hljs-github-gist.css';
 
 import Home from 'scenes/Home';
 import Dashboard from 'scenes/Dashboard';

frontend/scenes/Dashboard/Dashboard.js

@@ -1,9 +1,11 @@
 // @flow
 import React from 'react';
+import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import styled from 'styled-components';
 
 import DocumentsStore from 'stores/DocumentsStore';
+import Flex from 'components/Flex';
 import DocumentList from 'components/DocumentList';
 import PageTitle from 'components/PageTitle';
 import CenteredContent from 'components/CenteredContent';
@@ -26,29 +28,33 @@ type Props = {
 
 @observer class Dashboard extends React.Component {
   props: Props;
+  @observable isLoaded = false;
 
   componentDidMount() {
-    this.props.documents.fetchAll();
+    this.loadContent();
-    this.props.documents.fetchRecentlyViewed();
   }
 
-  get showPlaceholder() {
+  loadContent = async () => {
-    const { isLoaded, isFetching } = this.props.documents;
+    await Promise.all([
-    return !isLoaded && isFetching;
+      this.props.documents.fetchRecentlyModified({ limit: 5 }),
-  }
+      this.props.documents.fetchRecentlyViewed({ limit: 5 }),
+    ]);
+    this.isLoaded = true;
+  };
 
   render() {
     return (
       <CenteredContent>
         <PageTitle title="Home" />
         <h1>Home</h1>
-        <Subheading>Recently viewed</Subheading>
+        {this.isLoaded
-        {this.showPlaceholder && <ListPlaceholder />}
+          ? <Flex column>
-        <DocumentList documents={this.props.documents.recentlyViewed} />
+              <Subheading>Recently viewed</Subheading>
-
+              <DocumentList documents={this.props.documents.recentlyViewed} />
-        <Subheading>Recently edited</Subheading>
+              <Subheading>Recently edited</Subheading>
-        <DocumentList documents={this.props.documents.recentlyEdited} />
+              <DocumentList documents={this.props.documents.recentlyEdited} />
-        {this.showPlaceholder && <ListPlaceholder />}
+            </Flex>
+          : <ListPlaceholder count={5} />}
       </CenteredContent>
     );
   }

frontend/scenes/Document/Document.js

@@ -6,6 +6,7 @@ import { observer, inject } from 'mobx-react';
 import { withRouter, Prompt } from 'react-router';
 import Flex from 'components/Flex';
 import { color, layout } from 'styles/constants';
+import { collectionUrl } from 'utils/routeHelpers';
 
 import Document from 'models/Document';
 import UiStore from 'stores/UiStore';
@@ -19,6 +20,7 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import Collaborators from 'components/Collaborators';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
+import Search from 'scenes/Search';
 
 const DISCARD_CHANGES = `
 You have unsaved changes.
@@ -46,6 +48,7 @@ type Props = {
     isSaving: false,
     newDocument: undefined,
     showAsSaved: false,
+    notFound: false,
   };
 
   componentDidMount() {
@@ -57,6 +60,7 @@ type Props = {
       nextProps.match.params.documentSlug !==
       this.props.match.params.documentSlug
     ) {
+      this.setState({ notFound: false });
       this.loadDocument(nextProps);
     }
   }
@@ -86,6 +90,9 @@ type Props = {
       if (document) {
         this.props.ui.setActiveDocument(document);
         document.view();
+      } else {
+        // Render 404 with search
+        this.setState({ notFound: true });
       }
     }
   };
@@ -146,7 +153,13 @@ type Props = {
   };
 
   onCancel = () => {
-    this.props.history.goBack();
+    let url;
+    if (this.document && this.document.url) {
+      url = this.document.url;
+    } else {
+      url = collectionUrl(this.props.match.params.id);
+    }
+    this.props.history.push(url);
   };
 
   onStartDragging = () => {
@@ -157,6 +170,10 @@ type Props = {
     this.setState({ isDragging: false });
   };
 
+  renderNotFound() {
+    return <Search notFound />;
+  }
+
   render() {
     const isNew = this.props.newDocument;
     const isEditing = !!this.props.match.params.edit || isNew;
@@ -164,6 +181,10 @@ type Props = {
     const titleText = get(this.document, 'title', '');
     const document = this.document;
 
+    if (this.state.notFound) {
+      return this.renderNotFound();
+    }
+
     return (
       <Container column auto>
         {this.state.isDragging &&

frontend/scenes/Home/Home.js

@@ -26,9 +26,7 @@ type Props = {
     if (state && state.nextPathname) {
       sessionStorage.removeItem('redirectTo');
       sessionStorage.setItem('redirectTo', state.nextPathname);
-      notifications.push(
+      notifications.push(<Alert key="login">Please login to continue</Alert>);
-        <Alert key="login" info>Please login to continue</Alert>
-      );
     }
 
     return notifications;

frontend/scenes/Settings/components/ApiKeyRow/ApiKeyRow.js

@@ -1,48 +1,49 @@
 // @flow
-import React, { PropTypes } from 'react';
+import React from 'react';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import styled from 'styled-components';
+import { color } from 'styles/constants';
 
-import styles from './ApiKeyRow.scss';
+type Props = {
-import classNames from 'classnames/bind';
+  id: string,
-const cx = classNames.bind(styles);
+  name: ?string,
+  secret: string,
+  onDelete: Function,
+};
 
-class ApiKeyRow extends React.Component {
+@observer class ApiKeyRow extends React.Component {
-  static propTypes = {
+  props: Props;
-    id: PropTypes.string.isRequired,
+  @observable disabled: boolean;
-    name: PropTypes.string.isRequired,
-    secret: PropTypes.string.isRequired,
-    onDelete: PropTypes.func.isRequired,
-  };
-
-  state = {
-    disabled: false,
-  };
 
   onClick = () => {
     this.props.onDelete(this.props.id);
-    this.setState({ disabled: true });
+    this.disabled = true;
   };
 
   render() {
     const { name, secret } = this.props;
-
+    const { disabled } = this;
-    const { disabled } = this.state;
 
     return (
       <tr>
         <td>{name}</td>
         <td><code>{secret}</code></td>
         <td>
-          <span
+          <Action role="button" onClick={this.onClick} disabled={disabled}>
-            role="button"
+            Action
-            onClick={this.onClick}
+          </Action>
-            className={cx(styles.deleteAction, { disabled })}
-          >
-            Delete
-          </span>
         </td>
       </tr>
     );
   }
 }
 
+const Action = styled.span`
+  font-size: 14px;
+  color: ${color.text};
+
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+`;
+
 export default ApiKeyRow;

frontend/scenes/Settings/components/ApiKeyRow/ApiKeyRow.scss

@@ -1,10 +0,0 @@
-@import '~styles/constants.scss';
-
-.deleteAction {
-  font-size: 14px;
-  color: $textColor;
-}
-
-.disabled {
-  opacity: 0.5;
-}

frontend/stores/DocumentsStore.js

@@ -38,14 +38,17 @@ class DocumentsStore extends BaseStore {
   /* Computed */
 
   @computed get recentlyViewed(): Array<Document> {
-    return _.filter(this.data.values(), ({ id }) =>
+    return _.take(
-      this.recentlyViewedIds.includes(id)
+      _.filter(this.data.values(), ({ id }) =>
+        this.recentlyViewedIds.includes(id)
+      ),
+      5
     );
   }
 
   @computed get recentlyEdited(): Array<Document> {
     // $FlowIssue
-    return this.data.values();
+    return _.take(this.data.values(), 5);
   }
 
   @computed get starred(): Array<Document> {
@@ -60,11 +63,14 @@ class DocumentsStore extends BaseStore {
 
   /* Actions */
 
-  @action fetchAll = async (request: string = 'list'): Promise<*> => {
+  @action fetchAll = async (
+    request: string = 'list',
+    options: ?Object
+  ): Promise<*> => {
     this.isFetching = true;
 
     try {
-      const res = await client.post(`/documents.${request}`);
+      const res = await client.post(`/documents.${request}`, options);
       invariant(res && res.data, 'Document list not available');
       const { data } = res;
       runInAction('DocumentsStore#fetchAll', () => {
@@ -81,12 +87,17 @@ class DocumentsStore extends BaseStore {
     }
   };
 
-  @action fetchRecentlyViewed = async (): Promise<*> => {
+  @action fetchRecentlyModified = async (options: ?Object): Promise<*> => {
-    const data = await this.fetchAll('viewed');
+    return await this.fetchAll('list', options);
+  };
+
+  @action fetchRecentlyViewed = async (options: ?Object): Promise<*> => {
+    const data = await this.fetchAll('viewed', options);
 
     runInAction('DocumentsStore#fetchRecentlyViewed', () => {
       this.recentlyViewedIds = _.map(data, 'id');
     });
+    return data;
   };
 
   @action fetchStarred = async (): Promise<*> => {

frontend/styles/base.css

@@ -1,5 +1,3 @@
-@import './constants.scss';
-
 * {
   box-sizing: border-box;
 }
@@ -10,18 +8,21 @@
   --line-height-3: 1.25;
   --line-height-4: 1.5;
   --letter-spacing: 1;
-  --caps-letter-spacing: .2em;
+  --caps-letter-spacing: 0.2em;
   --bold-font-weight: bold;
 }
 
-html, body, .viewport {
+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-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 16px;
   line-height: 1.5;
   margin: 0;
@@ -41,42 +42,59 @@ svg {
   max-height: 100%;
 }
 a {
-  color: #005AA6;
+  color: #005aa6;
   text-decoration: none;
   cursor: pointer;
 }
-h1, h2, h3,
+h1,
-h4, h5, h6 {
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-weight: 500;
   line-height: 1.25;
   margin-top: 1em;
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
   color: #1f2429;
 }
-h1 { font-size: 2em }
+h1 {
-h2 { font-size: 1.5em }
+  font-size: 2em;
-h3 { font-size: 1.25em }
+}
-h4 { font-size: 1em }
+h2 {
-h5 { font-size: .875em }
+  font-size: 1.5em;
-h6 { font-size: .75em }
+}
-p, dl, ol, ul, pre, blockquote {
+h3 {
+  font-size: 1.25em;
+}
+h4 {
+  font-size: 1em;
+}
+h5 {
+  font-size: 0.875em;
+}
+h6 {
+  font-size: 0.75em;
+}
+p,
+dl,
+ol,
+ul,
+pre,
+blockquote {
   margin-top: 1em;
   margin-bottom: 1em;
 }
 code,
 pre,
 samp {
-  font-family:
+  font-family: 'Atlas Typewriter', 'Source Code Pro', Menlo, Consolas,
-    'Atlas Typewriter',
+    'Liberation Mono', monospace;
-    'Source Code Pro',
-    Menlo,
-    Consolas,
-    'Liberation Mono',
-    monospace;
 }
-code, samp {
+code,
+samp {
   font-size: 87.5%;
-  padding: .125em;
+  padding: 0.125em;
 }
 pre {
   font-size: 87.5%;
@@ -94,14 +112,12 @@ hr {
   border-bottom-style: solid;
   border-bottom-color: #dedede;
 }
-*[role=button] {
+*[role='button'] {
   cursor: pointer;
 }
 
-:global {
+.hljs {
-  .hljs {
+  border: 1px solid rgba(0, 0, 0, 0.0625);
-    border: 1px solid rgba(0,0,0,.0625);
+  padding: 1em;
-    padding: 1em;
+  border-radius: 0.25em;
-    border-radius: 0.25em;
-  }
 }

frontend/styles/constants.js

@@ -42,6 +42,10 @@ export const color = {
   /* Brand */
   primary: '#2B8FBF',
   danger: '#D0021B',
+  warning: '#f08a24' /* replace */,
+  success: '#43AC6A' /* replace */,
+  info: '#a0d3e8' /* replace */,
+  offline: '#000000',
 
   /* Dark Grays */
   slate: '#9BA6B2',
@@ -56,4 +60,6 @@ export const color = {
   /* Misc */
   white: '#FFFFFF',
   black: '#000000',
+
+  /* Alert colors */
 };

frontend/styles/constants.scss

@@ -1,15 +0,0 @@
-$textColor: #171B35;
-$actionColor: #3AA3E3;
-
-$darkGray: #333;
-$gray: #ccc;
-$lightGray: #eee;
-
-$headerHeight: 42px;
-
-:export {
-  textColor: $textColor;
-  actionColor: $actionColor;
-
-  headerHeight: $headerHeight;
-}

frontend/styles/hljs-github-gist.css

@@ -0,0 +1,71 @@
+/**
+  * GitHub Gist Theme
+  * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
+  */
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}

frontend/styles/hljs-github-gist.scss

@@ -1,73 +0,0 @@
-:global {
-  /**
-   * GitHub Gist Theme
-   * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
-   */
-
-  .hljs {
-    display: block;
-    background: white;
-    padding: 0.5em;
-    color: #333333;
-    overflow-x: auto;
-  }
-
-  .hljs-comment,
-  .hljs-meta {
-    color: #969896;
-  }
-
-  .hljs-string,
-  .hljs-variable,
-  .hljs-template-variable,
-  .hljs-strong,
-  .hljs-emphasis,
-  .hljs-quote {
-    color: #df5000;
-  }
-
-  .hljs-keyword,
-  .hljs-selector-tag,
-  .hljs-type {
-    color: #a71d5d;
-  }
-
-  .hljs-literal,
-  .hljs-symbol,
-  .hljs-bullet,
-  .hljs-attribute {
-    color: #0086b3;
-  }
-
-  .hljs-section,
-  .hljs-name {
-    color: #63a35c;
-  }
-
-  .hljs-tag {
-    color: #333333;
-  }
-
-  .hljs-title,
-  .hljs-attr,
-  .hljs-selector-id,
-  .hljs-selector-class,
-  .hljs-selector-attr,
-  .hljs-selector-pseudo {
-    color: #795da3;
-  }
-
-  .hljs-addition {
-    color: #55a532;
-    background-color: #eaffea;
-  }
-
-  .hljs-deletion {
-    color: #bd2c00;
-    background-color: #ffecec;
-  }
-
-  .hljs-link {
-    text-decoration: underline;
-  }
-}

frontend/styles/prism-tomorrow.css

@@ -0,0 +1,120 @@
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #ccc;
+  background: none;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: #2d2d2d;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #999;
+}
+
+.token.punctuation {
+  color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+  color: #e2777a;
+}
+
+.token.function-name {
+  color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+  color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+  color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+  color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+  color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+  color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token.inserted {
+  color: green;
+}

frontend/styles/prism-tomorrow.scss

@@ -1,123 +0,0 @@
-/**
- * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
- * Based on https://github.com/chriskempson/tomorrow-theme
- * @author Rose Pritchard
- */
-
-:global {
-  code[class*="language-"],
-  pre[class*="language-"] {
-    color: #ccc;
-    background: none;
-    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    line-height: 1.5;
-
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-
-  }
-
-  /* Code blocks */
-  pre[class*="language-"] {
-    padding: 1em;
-    margin: .5em 0;
-    overflow: auto;
-  }
-
-  :not(pre) > code[class*="language-"],
-  pre[class*="language-"] {
-    background: #2d2d2d;
-  }
-
-  /* Inline code */
-  :not(pre) > code[class*="language-"] {
-    padding: .1em;
-    border-radius: .3em;
-    white-space: normal;
-  }
-
-  .token.comment,
-  .token.block-comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: #999;
-  }
-
-  .token.punctuation {
-    color: #ccc;
-  }
-
-  .token.tag,
-  .token.attr-name,
-  .token.namespace,
-  .token.deleted {
-    color: #e2777a;
-  }
-
-  .token.function-name {
-    color: #6196cc;
-  }
-
-  .token.boolean,
-  .token.number,
-  .token.function {
-    color: #f08d49;
-  }
-
-  .token.property,
-  .token.class-name,
-  .token.constant,
-  .token.symbol {
-    color: #f8c555;
-  }
-
-  .token.selector,
-  .token.important,
-  .token.atrule,
-  .token.keyword,
-  .token.builtin {
-    color: #cc99cd;
-  }
-
-  .token.string,
-  .token.char,
-  .token.attr-value,
-  .token.regex,
-  .token.variable {
-    color: #7ec699;
-  }
-
-  .token.operator,
-  .token.entity,
-  .token.url {
-    color: #67cdcc;
-  }
-
-  .token.important,
-  .token.bold {
-    font-weight: bold;
-  }
-  .token.italic {
-    font-style: italic;
-  }
-
-  .token.entity {
-    cursor: help;
-  }
-
-  .token.inserted {
-    color: green;
-  }
-}

frontend/styles/transitions.css

@@ -0,0 +1,27 @@
+.fadeIn-appear {
+  opacity: 0.01;
+}
+
+.fadeIn-appear.fadeIn-appear-active {
+  opacity: 1;
+  transition: opacity 250ms ease-in;
+  transition-delay: 0.35s;
+}
+
+.fadeIn-enter {
+  opacity: 0.01;
+}
+
+.fadeIn-enter.fadeIn-enter-active {
+  opacity: 1;
+  transition: opacity 200ms ease-in;
+}
+
+.fadeIn-leave {
+  opacity: 1;
+}
+
+.fadeIn-leave.fadeIn-leave-active {
+  opacity: 0.01;
+  transition: opacity 200ms ease-in;
+}

frontend/styles/transitions.scss

@@ -1,29 +0,0 @@
-:global {
-  .fadeIn-appear {
-    opacity: 0.01;
-  }
-
-  .fadeIn-appear.fadeIn-appear-active {
-    opacity: 1;
-    transition: opacity 250ms ease-in;
-    transition-delay: 0.35s;
-  }
-
-  .fadeIn-enter {
-    opacity: 0.01;
-  }
-
-  .fadeIn-enter.fadeIn-enter-active {
-    opacity: 1;
-    transition: opacity 200ms ease-in;
-  }
-
-  .fadeIn-leave {
-    opacity: 1;
-  }
-
-  .fadeIn-leave.fadeIn-leave-active {
-    opacity: 0.01;
-    transition: opacity 200ms ease-in;
-  }
-}

frontend/utils/ApiClient.js

@@ -89,11 +89,11 @@ class ApiClient {
     });
   };
 
-  get = (path: string, data?: Object, options?: Object) => {
+  get = (path: string, data: ?Object, options?: Object) => {
     return this.fetch(path, 'GET', data, options);
   };
 
-  post = (path: string, data?: Object, options?: Object) => {
+  post = (path: string, data: ?Object, options?: Object) => {
     return this.fetch(path, 'POST', data, options);
   };
 

frontend/utils/routeHelpers.js

@@ -14,6 +14,10 @@ export function newCollectionUrl(): string {
   return '/collections/new';
 }
 
+export function collectionUrl(collectionId: string): string {
+  return `/collections/${collectionId}`;
+}
+
 export function documentUrl(doc: Document): string {
   return doc.url;
 }

package.json

@@ -81,9 +81,8 @@
     "boundless-arrow-key-navigation": "^1.0.4",
     "boundless-popover": "^1.0.4",
     "bugsnag": "^1.7.0",
-    "classnames": "2.2.3",
     "copy-to-clipboard": "^3.0.6",
-    "css-loader": "0.23.1",
+    "css-loader": "^0.28.7",
     "debug": "2.2.0",
     "dotenv": "^4.0.0",
     "emoji-name-map": "1.1.2",
@@ -97,7 +96,6 @@
     "eslint-plugin-prettier": "^2.0.1",
     "eslint-plugin-react": "^6.10.3",
     "exports-loader": "0.6.3",
-    "extract-text-webpack-plugin": "1.0.1",
     "fbemitter": "^2.1.1",
     "file-loader": "0.9.0",
     "flow-typed": "^2.1.2",
@@ -132,8 +130,7 @@
     "mobx-react-devtools": "^4.2.11",
     "moment": "2.13.0",
     "node-dev": "3.1.0",
-    "node-sass": "^4.5.2",
+    "normalize.css": "^7.0.0",
-    "normalize.css": "4.1.1",
     "normalizr": "2.0.1",
     "pg": "^6.1.5",
     "pg-hstore": "2.3.2",
@@ -156,7 +153,6 @@
     "redis-lock": "^0.1.0",
     "rimraf": "^2.5.4",
     "safestart": "1.1.0",
-    "sass-loader": "4.0.0",
     "sequelize": "^4.3.1",
     "sequelize-cli": "^2.7.0",
     "sequelize-encrypted": "0.1.0",
@@ -170,7 +166,7 @@
     "slate-trailing-block": "^0.2.4",
     "slug": "0.9.1",
     "string-hash": "^1.1.0",
-    "style-loader": "0.13.0",
+    "style-loader": "^0.18.2",
     "styled-components": "^2.0.0",
     "truncate-html": "https://github.com/jorilallo/truncate-html/tarball/master",
     "url-loader": "0.5.7",

server/api/middlewares/pagination.js

@@ -10,8 +10,9 @@ export default function pagination(options) {
     };
 
     let query = ctx.request.query;
-    let limit = parseInt(query.limit, 10);
+    let body = ctx.request.body;
-    let offset = parseInt(query.offset, 10);
+    let limit = parseInt(query.limit || body.limit, 10);
+    let offset = parseInt(query.offset || body.offset, 10);
     limit = isNaN(limit) ? opts.defaultLimit : limit;
     offset = isNaN(offset) ? 0 : offset;
 

webpack.config.dev.js

@@ -15,10 +15,6 @@ const developmentWebpackConfig = Object.assign(commonWebpackConfig, {
   ],
 });
 
-developmentWebpackConfig.module.loaders.push({
-  test: /\.s?css$/,
-  loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass?sourceMap',
-});
 developmentWebpackConfig.plugins.push(
   new webpack.optimize.OccurenceOrderPlugin()
 );

webpack.config.js

@@ -29,7 +29,7 @@ module.exports = {
         include: [
           path.join(__dirname, 'frontend'),
           path.join(__dirname, 'shared'),
-        ]
+        ],
       },
       { test: /\.json$/, loader: 'json-loader' },
       // inline base64 URLs for <=8k images, direct URLs for the rest
@@ -38,6 +38,10 @@ module.exports = {
         test: /\.woff$/,
         loader: 'url-loader?limit=1&mimetype=application/font-woff&name=public/fonts/[name].[ext]',
       },
+      {
+        test: /\.css$/,
+        loader: 'style-loader!css-loader?sourceMap',
+      },
       { test: /\.md/, loader: 'raw-loader' },
     ],
     // Silence warning https://github.com/localForage/localForage/issues/599

webpack.config.prod.js

@@ -2,7 +2,6 @@
 var path = require('path');
 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 commonWebpackConfig = require('./webpack.config');
 
@@ -16,21 +15,11 @@ productionWebpackConfig = Object.assign(commonWebpackConfig, {
     publicPath: '/static/',
   },
 });
-productionWebpackConfig.module.loaders.push({
-  test: /\.s?css$/,
-  loader: ExtractTextPlugin.extract(
-    'style-loader',
-    'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass?sourceMap'
-  ),
-});
 productionWebpackConfig.plugins.push(
   new HtmlWebpackPlugin({
     template: 'server/static/index.html',
   })
 );
-productionWebpackConfig.plugins.push(
-  new ExtractTextPlugin('styles.[hash].css')
-);
 productionWebpackConfig.plugins.push(
   new webpack.optimize.OccurenceOrderPlugin()
 );

yarn.lock

@@ -94,6 +94,15 @@ ajv@^4.7.0, ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
+ajv@^5.0.0:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.2.tgz#47c68d69e86f5d953103b0074a9430dc63da5e39"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    json-schema-traverse "^0.3.0"
+    json-stable-stringify "^1.0.1"
+
 align-text@^0.1.1, align-text@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@@ -293,15 +302,11 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
-async-foreach@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
-
 async@^0.9.0:
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
 
-async@^1.3.0, async@^1.4.0, async@^1.5.0:
+async@^1.3.0, async@^1.4.0:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
@@ -350,7 +355,7 @@ babel-code-frame@6.22.0:
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
-babel-code-frame@^6.16.0, babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
+babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
   dependencies:
@@ -1373,8 +1378,8 @@ caniuse-api@^1.5.2:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000721"
+  version "1.0.30000726"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000721.tgz#cdc52efe8f82dd13916615b78e86f704ece61802"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000726.tgz#9bb742f8d026a62df873bc03c06843d2255b60d7"
 
 caniuse-lite@^1.0.30000718:
   version "1.0.30000721"
@@ -1506,7 +1511,7 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
-classnames@2.2.3, classnames@^2.1.5, classnames@^2.2.0:
+classnames@^2.1.5, classnames@^2.2.0:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.3.tgz#551b774b6762a0c0a997187f7ba4f1d603961ac5"
 
@@ -1936,13 +1941,6 @@ create-react-class@^15.6.0:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-cross-spawn@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
-  dependencies:
-    lru-cache "^4.0.1"
-    which "^1.2.9"
-
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -2000,21 +1998,24 @@ css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
-css-loader@0.23.1:
+css-loader@^0.28.7:
-  version "0.23.1"
+  version "0.28.7"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.23.1.tgz#9fa23f2b5c0965235910ad5ecef3b8a36390fe50"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
   dependencies:
-    css-selector-tokenizer "^0.5.1"
+    babel-code-frame "^6.11.0"
+    css-selector-tokenizer "^0.7.0"
     cssnano ">=2.6.1 <4"
-    loader-utils "~0.2.2"
+    icss-utils "^2.1.0"
-    lodash.camelcase "^3.0.1"
+    loader-utils "^1.0.2"
+    lodash.camelcase "^4.3.0"
     object-assign "^4.0.1"
     postcss "^5.0.6"
     postcss-modules-extract-imports "^1.0.0"
     postcss-modules-local-by-default "^1.0.1"
     postcss-modules-scope "^1.0.0"
     postcss-modules-values "^1.1.0"
-    source-list-map "^0.1.4"
+    postcss-value-parser "^3.3.0"
+    source-list-map "^2.0.0"
 
 css-select@^1.1.0, css-select@~1.2.0:
   version "1.2.0"
@@ -2025,13 +2026,6 @@ css-select@^1.1.0, css-select@~1.2.0:
     domutils "1.5.1"
     nth-check "~1.0.1"
 
-css-selector-tokenizer@^0.5.1:
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.5.4.tgz#139bafd34a35fd0c1428487049e0699e6f6a2c21"
-  dependencies:
-    cssesc "^0.1.0"
-    fastparse "^1.1.1"
-
 css-selector-tokenizer@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
@@ -2482,7 +2476,11 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
-electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.18:
+electron-to-chromium@^1.2.7:
+  version "1.3.21"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.21.tgz#a967ebdcfe8ed0083fc244d1894022a8e8113ea2"
+
+electron-to-chromium@^1.3.18:
   version "1.3.20"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.20.tgz#2eedd5ccbae7ddc557f68ad1fce9c172e915e4e5"
 
@@ -3037,14 +3035,6 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
-extract-text-webpack-plugin@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-1.0.1.tgz#c95bf3cbaac49dc96f1dc6e072549fbb654ccd2c"
-  dependencies:
-    async "^1.5.0"
-    loader-utils "^0.2.3"
-    webpack-sources "^0.1.0"
-
 extsprintf@1.3.0, extsprintf@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
@@ -3065,6 +3055,10 @@ fancy-log@^1.1.0:
     chalk "^1.1.1"
     time-stamp "^1.0.0"
 
+fast-deep-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+
 fast-diff@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.1.tgz#0aea0e4e605b6a2189f0e936d4b7fbaf1b7cfd9b"
@@ -3424,12 +3418,6 @@ gaze@^0.5.1:
   dependencies:
     globule "~0.1.0"
 
-gaze@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.2.tgz#847224677adb8870d679257ed3388fdb61e40105"
-  dependencies:
-    globule "^1.0.0"
-
 generate-function@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
@@ -3545,7 +3533,7 @@ glob@^4.3.1:
     minimatch "^2.0.1"
     once "^1.3.0"
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@~7.1.1:
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
   dependencies:
@@ -3602,14 +3590,6 @@ globby@^5.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-globule@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.0.tgz#1dc49c6822dd9e8a2fa00ba2a295006e8664bd09"
-  dependencies:
-    glob "~7.1.1"
-    lodash "~4.17.4"
-    minimatch "~3.0.2"
-
 globule@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/globule/-/globule-0.1.0.tgz#d9c8edde1da79d125a151b79533b978676346ae5"
@@ -4091,6 +4071,12 @@ icss-replace-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
 
+icss-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
+  dependencies:
+    postcss "^6.0.1"
+
 identity-obj-proxy@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
@@ -4140,10 +4126,6 @@ imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
 
-in-publish@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
-
 indent-string@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
@@ -4859,9 +4841,9 @@ joi@^6.10.1, joi@~6.10.1:
     moment "2.x.x"
     topo "1.x.x"
 
-js-base64@^2.1.8, js-base64@^2.1.9:
+js-base64@^2.1.9:
-  version "2.1.9"
+  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.2.0.tgz#5e8a8d193a908198dd23d1704826d207b0e5a8f6"
 
 js-beautify@^1.6.11:
   version "1.6.14"
@@ -4938,6 +4920,10 @@ json-loader@0.5.4:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.4.tgz#8baa1365a632f58a3c46d20175fc6002c96e37de"
 
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
 json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
@@ -5312,7 +5298,7 @@ load-json-file@^2.0.0:
     pify "^2.0.0"
     strip-bom "^3.0.0"
 
-loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.14, loader-utils@^0.2.15, loader-utils@^0.2.3, loader-utils@^0.2.7, loader-utils@~0.2.2, loader-utils@~0.2.5:
+loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.14, loader-utils@~0.2.5:
   version "0.2.17"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
   dependencies:
@@ -5321,6 +5307,14 @@ loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.14, loader-utils@^0.
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
+loader-utils@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+
 localforage@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.5.0.tgz#6b994e19b56611fa85df3992df397ac4ab66e815"
@@ -5406,13 +5400,6 @@ lodash._createassigner@^3.0.0:
     lodash._isiterateecall "^3.0.0"
     lodash.restparam "^3.0.0"
 
-lodash._createcompounder@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lodash._createcompounder/-/lodash._createcompounder-3.0.0.tgz#5dd2cb55372d6e70e0e2392fb2304d6631091075"
-  dependencies:
-    lodash.deburr "^3.0.0"
-    lodash.words "^3.0.0"
-
 lodash._getnative@^3.0.0:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
@@ -5469,11 +5456,9 @@ lodash.bind@^4.1.4:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/lodash.bind/-/lodash.bind-4.2.1.tgz#7ae3017e939622ac31b7d7d7dcb1b34db1690d35"
 
-lodash.camelcase@^3.0.1:
+lodash.camelcase@^4.3.0:
-  version "3.0.1"
+  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-3.0.1.tgz#932c8b87f8a4377897c67197533282f97aeac298"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
-  dependencies:
-    lodash._createcompounder "^3.0.0"
 
 lodash.chunk@^4.2.0:
   version "4.2.0"
@@ -5486,20 +5471,10 @@ lodash.clonedeep@^3.0.0:
     lodash._baseclone "^3.0.0"
     lodash._bindcallback "^3.0.0"
 
-lodash.clonedeep@^4.3.2:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
-
 lodash.cond@^4.3.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
 
-lodash.deburr@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.deburr/-/lodash.deburr-3.2.0.tgz#6da8f54334a366a7cf4c4c76ef8d80aa1b365ed5"
-  dependencies:
-    lodash._root "^3.0.0"
-
 lodash.defaults@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-3.1.2.tgz#c7308b18dbf8bc9372d701a73493c61192bd2e2c"
@@ -5580,10 +5555,6 @@ lodash.merge@^4.4.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5"
 
-lodash.mergewith@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
-
 lodash.omitby@^4.5.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.omitby/-/lodash.omitby-4.6.0.tgz#5c15ff4754ad555016b53c041311e8f079204791"
@@ -5652,13 +5623,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash.words@^3.0.0:
+lodash@^4.0.0, lodash@^4.11.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.1, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.6.1:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.words/-/lodash.words-3.2.0.tgz#4e2a8649bc08745b17c695b1a3ce8fee596623b3"
-  dependencies:
-    lodash._root "^3.0.0"
-
-lodash@^4.0.0, lodash@^4.11.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.1, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.6.1, lodash@~4.17.4:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -5848,7 +5813,7 @@ memory-fs@~0.4.1:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
-meow@^3.3.0, meow@^3.7.0:
+meow@^3.3.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
   dependencies:
@@ -5955,7 +5920,7 @@ minimatch@^2.0.1:
   dependencies:
     brace-expansion "^1.0.0"
 
-minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
+minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   dependencies:
@@ -6057,7 +6022,7 @@ mz@2:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nan@2.3.5, nan@^2.3.0, nan@^2.3.2:
+nan@2.3.5, nan@^2.3.0:
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.3.5.tgz#822a0dc266290ce4cd3a12282ca3e7e364668a08"
 
@@ -6131,24 +6096,6 @@ node-fetch@^1.0.1, node-fetch@^1.5.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
-node-gyp@^3.3.1:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60"
-  dependencies:
-    fstream "^1.0.0"
-    glob "^7.0.3"
-    graceful-fs "^4.1.2"
-    minimatch "^3.0.2"
-    mkdirp "^0.5.0"
-    nopt "2 || 3"
-    npmlog "0 || 1 || 2 || 3 || 4"
-    osenv "0"
-    request "2"
-    rimraf "2"
-    semver "~5.3.0"
-    tar "^2.0.0"
-    which "1"
-
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -6244,29 +6191,6 @@ node-pre-gyp@^0.6.36:
     tar "^2.2.1"
     tar-pack "^3.4.0"
 
-node-sass@^4.5.2:
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.3.tgz#d09c9d1179641239d1b97ffc6231fdcec53e1568"
-  dependencies:
-    async-foreach "^0.1.3"
-    chalk "^1.1.1"
-    cross-spawn "^3.0.0"
-    gaze "^1.0.0"
-    get-stdin "^4.0.1"
-    glob "^7.0.3"
-    in-publish "^2.0.0"
-    lodash.assign "^4.2.0"
-    lodash.clonedeep "^4.3.2"
-    lodash.mergewith "^4.6.0"
-    meow "^3.7.0"
-    mkdirp "^0.5.1"
-    nan "^2.3.2"
-    node-gyp "^3.3.1"
-    npmlog "^4.0.0"
-    request "^2.79.0"
-    sass-graph "^2.1.1"
-    stdout-stream "^1.4.0"
-
 nodemon@1.11.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-1.11.0.tgz#226c562bd2a7b13d3d7518b49ad4828a3623d06c"
@@ -6282,12 +6206,6 @@ nodemon@1.11.0:
     undefsafe "0.0.3"
     update-notifier "0.5.0"
 
-"nopt@2 || 3", nopt@~3.0.1:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
-  dependencies:
-    abbrev "1"
-
 nopt@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
@@ -6301,6 +6219,12 @@ nopt@~1.0.10:
   dependencies:
     abbrev "1"
 
+nopt@~3.0.1:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  dependencies:
+    abbrev "1"
+
 normalize-git-url@3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/normalize-git-url/-/normalize-git-url-3.0.2.tgz#8e5f14be0bdaedb73e07200310aa416c27350fc4"
@@ -6333,9 +6257,9 @@ normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
-normalize.css@4.1.1:
+normalize.css@^7.0.0:
-  version "4.1.1"
+  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-4.1.1.tgz#4f0b1d5a235383252b04d8566b866cc5fcad9f0c"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-7.0.0.tgz#abfb1dd82470674e0322b53ceb1aaf412938e4bf"
 
 normalizr@2.0.1:
   version "2.0.1"
@@ -6363,7 +6287,7 @@ npm-which@^3.0.1:
     npm-path "^2.0.2"
     which "^1.2.10"
 
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2:
+npmlog@^4.0.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   dependencies:
@@ -6573,7 +6497,7 @@ os-tmpdir@^1.0.0, os-tmpdir@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
 
-osenv@0, osenv@^0.1.0, osenv@^0.1.4:
+osenv@^0.1.0, osenv@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
   dependencies:
@@ -7099,12 +7023,12 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     supports-color "^3.2.3"
 
 postcss@^6.0.1:
-  version "6.0.10"
+  version "6.0.11"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.10.tgz#c311b89734483d87a91a56dc9e53f15f4e6e84e4"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.11.tgz#f48db210b1d37a7f7ab6499b7a54982997ab6f72"
   dependencies:
     chalk "^2.1.0"
     source-map "^0.5.7"
-    supports-color "^4.2.1"
+    supports-color "^4.4.0"
 
 postgres-array@~1.0.0:
   version "1.0.2"
@@ -7756,7 +7680,7 @@ replace-ext@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
 
-request@2, request@^2.79.0, request@^2.81.0:
+request@^2.79.0, request@^2.81.0:
   version "2.81.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
   dependencies:
@@ -7922,33 +7846,15 @@ sanitize-html@^1.5.2:
     regexp-quote "0.0.0"
     xtend "^4.0.0"
 
-sass-graph@^2.1.1:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49"
-  dependencies:
-    glob "^7.0.0"
-    lodash "^4.0.0"
-    scss-tokenizer "^0.2.3"
-    yargs "^7.0.0"
-
-sass-loader@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-4.0.0.tgz#ba217b2b4a001670ad79cfd9a6caa30ac7b80e60"
-  dependencies:
-    async "^1.4.0"
-    loader-utils "^0.2.15"
-    object-assign "^4.1.0"
-
 sax@^1.2.1, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
-scss-tokenizer@^0.2.3:
+schema-utils@^0.3.0:
-  version "0.2.3"
+  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
   dependencies:
-    js-base64 "^2.1.8"
+    ajv "^5.0.0"
-    source-map "^0.4.2"
 
 select@^1.1.2:
   version "1.1.2"
@@ -7972,7 +7878,7 @@ semver@4.3.2, semver@^4.1.0:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.2.tgz#c7a07158a80bedd052355b770d82d6640f803be7"
 
-semver@5.3.0, semver@~5.3.0:
+semver@5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
 
@@ -8248,7 +8154,11 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-source-list-map@^0.1.4, source-list-map@~0.1.7:
+source-list-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
+
+source-list-map@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
 
@@ -8270,7 +8180,7 @@ source-map@0.1.x:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@0.4.x, source-map@^0.4.2, source-map@^0.4.4, source-map@~0.4.1:
+source-map@0.4.x, source-map@^0.4.4, source-map@~0.4.1:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
   dependencies:
@@ -8280,7 +8190,7 @@ source-map@0.5.6:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
-source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3:
+source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
@@ -8364,12 +8274,6 @@ statuses@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.2.1.tgz#dded45cc18256d51ed40aec142489d5c61026d28"
 
-stdout-stream@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.0.tgz#a2c7c8587e54d9427ea9edb3ac3f2cd522df378b"
-  dependencies:
-    readable-stream "^2.0.1"
-
 stream-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-1.0.0.tgz#bf9b4abfb42b274d751479e44e0ff2656b6f1193"
@@ -8504,11 +8408,12 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
-style-loader@0.13.0:
+style-loader@^0.18.2:
-  version "0.13.0"
+  version "0.18.2"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.13.0.tgz#abac11a20450f3ddea222b44c0c6342a8862db47"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb"
   dependencies:
-    loader-utils "^0.2.7"
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
 
 styled-components@^2.0.0:
   version "2.1.2"
@@ -8538,7 +8443,7 @@ supports-color@^3.1.0, supports-color@^3.1.2, supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
-supports-color@^4.0.0, supports-color@^4.2.1:
+supports-color@^4.0.0, supports-color@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.4.0.tgz#883f7ddabc165142b2a61427f3352ded195d1a3e"
   dependencies:
@@ -8610,7 +8515,7 @@ tar-pack@^3.4.0:
     tar "^2.2.1"
     uid-number "^0.0.6"
 
-tar@^2.0.0, tar@^2.2.1:
+tar@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
   dependencies:
@@ -9195,13 +9100,6 @@ webpack-hot-middleware@2.x:
     querystring "^0.2.0"
     strip-ansi "^3.0.0"
 
-webpack-sources@^0.1.0:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.5.tgz#aa1f3abf0f0d74db7111c40e500b84f966640750"
-  dependencies:
-    source-list-map "~0.1.7"
-    source-map "~0.5.3"
-
 webpack@1.13.2:
   version "1.13.2"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.13.2.tgz#f11a96f458eb752970a86abe746c0704fabafaf3"
@@ -9255,7 +9153,7 @@ which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
-which@1, which@^1.0.5, which@^1.2.10, which@^1.2.12, which@^1.2.14, which@^1.2.9:
+which@^1.0.5, which@^1.2.10, which@^1.2.12, which@^1.2.14, which@^1.2.9:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
   dependencies:
@@ -9400,7 +9298,7 @@ yargs@^4.2.0:
     y18n "^3.2.1"
     yargs-parser "^2.4.1"
 
-yargs@^7.0.0, yargs@^7.0.2:
+yargs@^7.0.2:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
   dependencies: