Merge branch 'master' into jori/document-404

2017-09-11 01:31:29 -04:00
parent 2b9ab3aa85 ff8bfd0c07
commit a552b7bb39
51 changed files with 401 additions and 492 deletions
--- a/frontend/assets/icons/menu.svg
+++ b/frontend/assets/icons/menu.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><path d="M18.7,27.5h62.7c2.5,0,4.5-2,4.5-4.5s-2-4.5-4.5-4.5H18.7c-2.5,0-4.5,2-4.5,4.5S16.2,27.5,18.7,27.5z"/><path d="M81.4,45.5H18.7c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5h62.7c2.5,0,4.5-2,4.5-4.5S83.9,45.5,81.4,45.5z"/><path d="M81.4,72.5H18.7c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5h62.7c2.5,0,4.5-2,4.5-4.5S83.9,72.5,81.4,72.5z"/></g></svg>
--- a/frontend/assets/icons/search.svg
+++ b/frontend/assets/icons/search.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 40 50" enable-background="new 0 0 40 40" xml:space="preserve"><g><path fill="#000000" d="M35.9,39.3l-12-12c-0.9-0.9-0.9-2.5,0-3.4l0,0c0.9-0.9,2.5-0.9,3.4,0l12,12c0.9,0.9,0.9,2.5,0,3.4l0,0   C38.3,40.2,36.8,40.2,35.9,39.3z"/><path fill="#000000" d="M4.7,4.7c-6.2,6.2-6.2,16.3,0,22.5s16.3,6.2,22.5,0s6.2-16.3,0-22.5S10.9-1.6,4.7,4.7z M23.8,24   c-4.3,4.3-11.4,4.3-15.7,0s-4.3-11.4,0-15.7s11.4-4.3,15.7,0S28.1,19.6,23.8,24z"/></g></svg>
--- a/frontend/components/Button/Button.js
+++ b/frontend/components/Button/Button.js
@@ -1,17 +1,18 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { size, color } from 'styles/constants';
-import { darken } from 'polished';
+import { color } from 'styles/constants';
+import { darken, lighten } from 'polished';

 const RealButton = styled.button`
  display: inline-block;
-  margin: 0 ${size.medium} ${size.large} 0;
+  margin: 0;
  padding: 0;
  border: 0;
-  background: ${props => (props.neutral ? color.slate : props.danger ? color.danger : color.primary)};
+  background: ${color.primary};
  color: ${color.white};
  border-radius: 4px;
+  font-size: 15px;
  min-width: 32px;
  min-height: 32px;
  text-decoration: none;
@@ -23,30 +24,70 @@ const RealButton = styled.button`
    border: 0;
  }
  &:hover {
-    background: ${props => darken(0.05, props.neutral ? color.slate : props.danger ? color.danger : color.primary)};
+    background: ${darken(0.05, color.primary)};
  }
+
+  svg {
+    position: relative;
+    top: .05em;
+  }
+
+  ${props => props.light && `
+    color: ${color.text};
+    background: ${lighten(0.08, color.slateLight)};
+
+    &:hover {
+      background: ${color.slateLight};
+    }
+  `}
+
+  ${props => props.neutral && `
+    background: ${color.slate};
+
+    &:hover {
+      background: ${darken(0.05, color.slate)};
+    }
+  `}
+
+  ${props => props.danger && `
+    background: ${color.danger};
+
+    &:hover {
+      background: ${darken(0.05, color.danger)};
+    }
+  `}
+
  &:disabled {
    background: ${color.slateLight};
  }
 `;

 const Label = styled.span`
-  padding: 4px 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
-  font-weight: 500;
+
+  ${props => props.hasIcon && 'padding-left: 2px;'}
 `;

 const Inner = styled.span`
+  padding: 4px 16px;
  display: flex;
  line-height: 28px;
  justify-content: center;
+  align-items: center;
+
+  ${props => props.small && `
+    padding: 1px 10px;
+  `}
+
+  ${props => props.hasIcon && (props.small ? 'padding-left: 6px;' : 'padding-left: 10px;')}
 `;

 export type Props = {
  type?: string,
  value?: string,
+  small?: boolean,
  icon?: React$Element<any>,
  className?: string,
  children?: React$Element<any>,
@@ -56,6 +97,7 @@ export default function Button({
  type = 'text',
  icon,
  children,
+  small,
  value,
  ...rest
 }: Props) {
@@ -64,9 +106,9 @@ export default function Button({

  return (
    <RealButton {...rest}>
-      <Inner>
+      <Inner hasIcon={hasIcon} small={small}>
        {hasIcon && icon}
-        {hasText && <Label>{children || value}</Label>}
+        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
      </Inner>
    </RealButton>
  );
--- a/frontend/components/CenteredContent/CenteredContent.js
+++ b/frontend/components/CenteredContent/CenteredContent.js
@@ -12,7 +12,7 @@ const Container = styled.div`
 `;

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

--- a/frontend/components/Collaborators/Collaborators.js
+++ b/frontend/components/Collaborators/Collaborators.js
@@ -36,7 +36,6 @@ const Collaborators = function({ document }: { document: Document }) {

 const Avatars = styled(Flex)`
  flex-direction: row-reverse;
-  margin-right: 10px;
  height: 26px;
 `;

--- a/frontend/components/DocumentPreview/DocumentPreview.js
+++ b/frontend/components/DocumentPreview/DocumentPreview.js
@@ -5,8 +5,8 @@ import { Link } from 'react-router-dom';
 import Document from 'models/Document';
 import styled from 'styled-components';
 import { color } from 'styles/constants';
+import Icon from 'components/Icon';
 import PublishingInfo from './components/PublishingInfo';
-import StarIcon from 'components/Icon/StarIcon';

 type Props = {
  document: Document,
@@ -15,17 +15,13 @@ type Props = {
  innerRef?: Function,
 };

-const StyledStar = styled(StarIcon)`
-  top: 2px;
-  position: relative;
+const StyledStar = styled(Icon).attrs({
+  type: 'Star',
+  color: color.text,
+})`
  margin-left: 4px;
  opacity: ${props => (props.solid ? '1 !important' : 0)};
  transition: opacity 100ms ease-in-out;
-
-  svg {
-    width: 1em;
-    height: 1em;
-  }
 `;

 const DocumentLink = styled(Link)`
@@ -46,7 +42,7 @@ const DocumentLink = styled(Link)`
    outline: none;

    ${StyledStar} {
-      opacity: .25;
+      opacity: .5;

      &:hover {
        opacity: 1;
@@ -87,8 +83,12 @@ const DocumentLink = styled(Link)`
        <h3>
          {document.title}
          {document.starred
-            ? <a onClick={this.unstar}><StyledStar solid /></a>
-            : <a onClick={this.star}><StyledStar /></a>}
+            ? <a onClick={this.unstar}>
+                <StyledStar solid />
+              </a>
+            : <a onClick={this.star}>
+                <StyledStar />
+              </a>}
        </h3>
        <PublishingInfo
          document={document}
--- a/frontend/components/DropdownMenu/DropdownMenu.js
+++ b/frontend/components/DropdownMenu/DropdownMenu.js
@@ -22,6 +22,7 @@ const DropdownMenuItem = ({ onClick, children }: MenuItemProps) => {
 type DropdownMenuProps = {
  label: React.Element<any>,
  children?: React.Element<any>,
+  style?: Object,
 };

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

        {this.menuOpen &&
-          <Menu>
+          <Menu style={this.props.style}>
            {this.props.children}
          </Menu>}
      </MenuContainer>
@@ -63,11 +64,8 @@ const Label = styled(Flex).attrs({
  justify: 'center',
  align: 'center',
 })`
-  cursor: pointer;
  z-index: 1000;
-
-  min-height: 43px;
-  margin: 0 5px;
+  cursor: pointer;
 `;

 const MenuContainer = styled.div`
--- a/frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.js
+++ b/frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.js
@@ -1,16 +0,0 @@
-// @flow
-import React from 'react';
-
-import styles from './MoreIcon.scss';
-
-const MoreIcon = () => {
-  return (
-    <img
-      alt="More"
-      src={require('./assets/more.svg')}
-      className={styles.icon}
-    />
-  );
-};
-
-export default MoreIcon;
--- a/frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.scss
+++ b/frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.scss
@@ -1,4 +0,0 @@
-.icon {
-  width: 21px;
-  margin-top: 6px;
-}
--- a/frontend/components/DropdownMenu/components/MoreIcon/assets/more.svg
+++ b/frontend/components/DropdownMenu/components/MoreIcon/assets/more.svg
@@ -1 +0,0 @@
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 125"><g transform="translate(0,-952.36218)"><path style="color:#000000;enable-background:accumulate;" d="M 17 41 C 12.029437 41 8 45.029437 8 50 C 8 54.970563 12.029437 59 17 59 C 21.970563 59 26 54.970563 26 50 C 26 45.029437 21.970563 41 17 41 z M 50 41 C 45.029437 41 41 45.029437 41 50 C 41 54.970563 45.029437 59 50 59 C 54.970563 59 59 54.970563 59 50 C 59 45.029437 54.970563 41 50 41 z M 83 41 C 78.029437 41 74 45.029437 74 50 C 74 54.970563 78.029437 59 83 59 C 87.970563 59 92 54.970563 92 50 C 92 45.029437 87.970563 41 83 41 z " transform="translate(0,952.36218)" fill="#000000" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"/></g></svg>
--- a/frontend/components/DropdownMenu/components/MoreIcon/index.js
+++ b/frontend/components/DropdownMenu/components/MoreIcon/index.js
@@ -1,3 +0,0 @@
-// @flow
-import MoreIcon from './MoreIcon';
-export default MoreIcon;
--- a/frontend/components/DropdownMenu/index.js
+++ b/frontend/components/DropdownMenu/index.js
@@ -1,4 +1,2 @@
 // @flow
-import { DropdownMenu, DropdownMenuItem } from './DropdownMenu';
-import MoreIcon from './components/MoreIcon';
-export { DropdownMenu, DropdownMenuItem, MoreIcon };
+export { DropdownMenu, DropdownMenuItem } from './DropdownMenu';
--- a/frontend/components/Editor/Editor.scss
+++ b/frontend/components/Editor/Editor.scss
@@ -1,9 +1,9 @@
 .editor {
  font-weight: 400;
  font-size: 1em;
-  line-height: 1.5em;
+  line-height: 1.7em;
  width: 100%;
-  color: #1b2631;
+  color: #1b2830;

  h1,
  h2,
--- a/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js
+++ b/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import type { State } from '../../../types';
 import keydown from 'react-keydown';
 import styles from '../Toolbar.scss';
-import CloseIcon from 'components/Icon/CloseIcon';
+import Icon from 'components/Icon';

@keydown
 export default class LinkToolbar extends Component {
@@ -58,7 +58,7 @@ export default class LinkToolbar extends Component {
          autoFocus
        />
        <button className={styles.button} onMouseDown={this.removeLink}>
-          <CloseIcon light />
+          <Icon type="X" light />
        </button>
      </span>
    );
--- a/frontend/components/Icon/AddIcon.js
+++ b/frontend/components/Icon/AddIcon.js
@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function AddIcon(props: Props) {
-  return (
-    <Icon {...props}>
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
-      </svg>
-    </Icon>
-  );
-}
--- a/frontend/components/Icon/CheckIcon.js
+++ b/frontend/components/Icon/CheckIcon.js
@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function CheckIcon(props: Props) {
-  return (
-    <Icon {...props}>
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
-      </svg>
-    </Icon>
-  );
-}
--- a/frontend/components/Icon/CloseIcon.js
+++ b/frontend/components/Icon/CloseIcon.js
@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function CloseIcon(props: Props) {
-  return (
-    <Icon {...props}>
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-        <path d="M0 0h24v24H0z" fill="none" />
-      </svg>
-    </Icon>
-  );
-}
--- a/frontend/components/Icon/Icon.js
+++ b/frontend/components/Icon/Icon.js
@@ -1,9 +1,11 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
+import * as Icons from 'react-feather';

 export type Props = {
  className?: string,
+  type?: string,
  light?: boolean,
 };

@@ -11,16 +13,40 @@ type BaseProps = {
  children?: React$Element<any>,
 };

-export default function Icon({ children, ...rest }: Props & BaseProps) {
+export default function Icon({
+  children,
+  light,
+  type,
+  ...rest
+}: Props & BaseProps) {
+  if (type) {
+    children = React.createElement(Icons[type], {
+      size: '1em',
+      color: light ? '#FFFFFF' : undefined,
+      ...rest,
+    });
+
+    return (
+      <FeatherWrapper {...rest}>
+        {children}
+      </FeatherWrapper>
+    );
+  }
+
  return (
-    <Wrapper {...rest}>
+    <Wrapper light={light} {...rest}>
      {children}
    </Wrapper>
  );
 }

+const FeatherWrapper = styled.span`
+  position: relative;
+  top: .1em;
+`;
+
 const Wrapper = styled.span`
  svg {
-    fill: ${props => (props.light ? '#fff' : '#000')};
+    fill: ${props => (props.light ? '#FFF' : '#000')}
  }
 `;
--- a/frontend/components/Icon/Icon.scss
+++ b/frontend/components/Icon/Icon.scss
@@ -1,9 +0,0 @@
-.icon {
-
-}
-
-.light {
-  svg {
-    fill: #fff;
-  }
-}
--- a/frontend/components/Icon/MoreIcon.js
+++ b/frontend/components/Icon/MoreIcon.js
@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function MoreIcon(props: Props) {
-  return (
-    <Icon {...props}>
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
-      </svg>
-    </Icon>
-  );
-}
--- a/frontend/components/Icon/QuoteIcon.js
+++ b/frontend/components/Icon/QuoteIcon.js
@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function QuoteIcon(props: Props) {
-  return (
-    <Icon {...props}>
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" />
-        <path d="M0 0h24v24H0z" fill="none" />
-      </svg>
-    </Icon>
-  );
-}
--- a/frontend/components/Icon/StarIcon.js
+++ b/frontend/components/Icon/StarIcon.js
@@ -1,43 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function StarIcon(props: Props & { solid?: boolean }) {
-  let icon;
-
-  if (props.solid) {
-    icon = (
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
-        <path d="M0 0h24v24H0z" fill="none" />
-      </svg>
-    );
-  } else {
-    icon = (
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" />
-        <path d="M0 0h24v24H0z" fill="none" />
-      </svg>
-    );
-  }
-
-  return (
-    <Icon {...props}>
-      {icon}
-    </Icon>
-  );
-}
--- a/frontend/components/Layout/Layout.js
+++ b/frontend/components/Layout/Layout.js
@@ -10,14 +10,13 @@ import keydown from 'react-keydown';
 import Flex from 'components/Flex';
 import { color, layout } from 'styles/constants';
 import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers';
-
 import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
+
+import Avatar from 'components/Avatar';
 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
 import Scrollable from 'components/Scrollable';
-import Avatar from 'components/Avatar';
 import Modal from 'components/Modal';
-import AddIcon from 'components/Icon/AddIcon';
-import MoreIcon from 'components/Icon/MoreIcon';
+import Icon from 'components/Icon';
 import CollectionNew from 'scenes/CollectionNew';
 import CollectionEdit from 'scenes/CollectionEdit';
 import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
@@ -26,8 +25,8 @@ import Settings from 'scenes/Settings';
 import SidebarCollection from './components/SidebarCollection';
 import SidebarCollectionList from './components/SidebarCollectionList';
 import SidebarLink from './components/SidebarLink';
+import HeaderBlock from './components/HeaderBlock';

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

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

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

              <Flex column>
                <Scrollable>
                  <LinkSection>
-                    <SidebarLink to="/search">Search</SidebarLink>
-                  </LinkSection>
-                  <LinkSection>
-                    <SidebarLink to="/dashboard">Home</SidebarLink>
-                    <SidebarLink to="/starred">Starred</SidebarLink>
+                    <SidebarLink to="/dashboard">
+                      <Icon type="Home" /> Home
+                    </SidebarLink>
+                    <SidebarLink to="/search">
+                      <Icon type="Search" /> Search
+                    </SidebarLink>
+                    <SidebarLink to="/starred">
+                      <Icon type="Star" /> Starred
+                    </SidebarLink>
                  </LinkSection>
                  <LinkSection>
                    {collections.active
                      ? <CollectionAction onClick={this.handleEditCollection}>
-                          <MoreIcon />
+                          <Icon type="MoreHorizontal" />
                        </CollectionAction>
                      : <CollectionAction onClick={this.handleCreateCollection}>
-                          <AddIcon />
+                          <Icon type="PlusCircle" />
                        </CollectionAction>}
                    {collections.active
                      ? <SidebarCollection
@@ -228,19 +234,13 @@ type Props = {

 const CollectionAction = styled.a`
  position: absolute;
-  top: 8px;
+  top: -4px;
  right: ${layout.hpadding};
-
-  svg {
-    opacity: .35;
-    width: 16px;
-    height: 16px;
-  }
+  color: ${color.slate};
+  svg { opacity: .75; }

  &:hover {
-    svg {
-      opacity: 1;
-    }
+    svg { opacity: 1; }
  }
 `;

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

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

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

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

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

--- a/frontend/components/Layout/components/HeaderAction/HeaderAction.js
+++ b/frontend/components/Layout/components/HeaderAction/HeaderAction.js
@@ -1,16 +0,0 @@
-// @flow
-import React from 'react';
-
-import styles from './HeaderAction.scss';
-
-type Props = { onClick?: ?Function, children?: ?React.Element<any> };
-
-const HeaderAction = (props: Props) => {
-  return (
-    <div onClick={props.onClick} className={styles.container}>
-      {props.children}
-    </div>
-  );
-};
-
-export default HeaderAction;
--- a/frontend/components/Layout/components/HeaderAction/HeaderAction.scss
+++ b/frontend/components/Layout/components/HeaderAction/HeaderAction.scss
@@ -1,11 +0,0 @@
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 43px;
-  padding: 0 0.5rem;
-
-  a {
-    color: #171B35;
-  }
-}
--- a/frontend/components/Layout/components/HeaderAction/index.js
+++ b/frontend/components/Layout/components/HeaderAction/index.js
@@ -1,3 +0,0 @@
-// @flow
-import HeaderAction from './HeaderAction';
-export default HeaderAction;
--- a/frontend/components/Layout/components/HeaderBlock.js
+++ b/frontend/components/Layout/components/HeaderBlock.js
@@ -0,0 +1,61 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import { color, layout } from 'styles/constants';
+import type { User, Team } from 'types';
+import Flex from 'components/Flex';
+
+type Props = {
+  user: User,
+  team: Team,
+  children?: React$Element<any>,
+};
+
+function HeaderBlock({ user, team, children }: Props) {
+  return (
+    <Header justify="space-between" align="center">
+      <Flex align="flex-start" column>
+        <TeamName>{team.name}</TeamName>
+        <UserName>{user.name}</UserName>
+      </Flex>
+      {children}
+    </Header>
+  );
+}
+
+const UserName = styled.div`
+  font-size: 13px;
+`;
+
+const TeamName = styled.div`
+  font-family: 'Atlas Grotesk';
+  font-weight: bold;
+  color: ${color.text};
+  text-decoration: none;
+  font-size: 16px;
+`;
+
+const Header = styled(Flex)`
+  flex-shrink: 0;
+  padding: ${layout.padding};
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+
+  &:active,
+  &:hover {
+    background: rgba(0,0,0,.05);
+  }
+
+  &::after {
+    content: "";
+    left: ${layout.hpadding};
+    right: ${layout.hpadding};
+    background: rgba(0,0,0,.075);
+    height: 1px;
+    position: absolute;
+    bottom: 0;
+  }
+`;
+
+export default HeaderBlock;
--- a/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js
+++ b/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import Flex from 'components/Flex';
 import styled from 'styled-components';
-import { layout } from 'styles/constants';
+import { color, layout } from 'styles/constants';
 import SidebarLink from '../SidebarLink';
 import DropToImport from 'components/DropToImport';

@@ -18,8 +18,8 @@ type Props = {
 };

 const activeStyle = {
-  color: '#000',
-  background: '#E1E1E1',
+  color: color.black,
+  background: color.slateDark,
 };

@observer class SidebarCollection extends React.Component {
@@ -72,7 +72,7 @@ const Header = styled(Flex)`
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
-  color: #9FA6AB;
+  color: ${color.slate};
  letter-spacing: 0.04em;
  padding: 0 ${layout.hpadding};
 `;
--- a/frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js
+++ b/frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { observer, inject } from 'mobx-react';
 import Flex from 'components/Flex';
 import styled from 'styled-components';
-import { layout } from 'styles/constants';
+import { color, layout, fontWeight } from 'styles/constants';

 import SidebarLink from '../SidebarLink';
 import DropToImport from 'components/DropToImport';
@@ -16,8 +16,8 @@ type Props = {
 };

 const activeStyle = {
-  color: '#000',
-  background: '#E1E1E1',
+  color: color.black,
+  background: color.slateDark,
 };

 const SidebarCollectionList = observer(({ history, collections }: Props) => {
@@ -42,9 +42,9 @@ const SidebarCollectionList = observer(({ history, collections }: Props) => {

 const Header = styled(Flex)`
  font-size: 11px;
-  font-weight: 500;
+  font-weight: ${fontWeight.semiBold};
  text-transform: uppercase;
-  color: #9FA6AB;
+  color: ${color.slate};
  letter-spacing: 0.04em;
  padding: 0 ${layout.hpadding};
 `;
--- a/frontend/components/Layout/components/SidebarLink/SidebarLink.js
+++ b/frontend/components/Layout/components/SidebarLink/SidebarLink.js
@@ -1,25 +1,28 @@
 // @flow
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { layout, color } from 'styles/constants';
-import { darken } from 'polished';
+import { layout, color, fontWeight } from 'styles/constants';
 import styled from 'styled-components';

 const activeStyle = {
-  color: '#000000',
+  color: color.black,
+  fontWeight: fontWeight.semiBold,
 };

 function SidebarLink(props: Object) {
-  return <StyledNavLink exact {...props} activeStyle={activeStyle} />;
+  return <StyledNavLink exact activeStyle={activeStyle} {...props} />;
 }

 const StyledNavLink = styled(NavLink)`
  display: block;
-  padding: 5px ${layout.hpadding};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 5px ${layout.hpadding};
  color: ${color.slateDark};
+  font-size: 15px;

  &:hover {
-    color: ${darken(0.1, color.slateDark)};
+    color: ${color.text};
  }
 `;

--- a/frontend/components/Layout/index.js
+++ b/frontend/components/Layout/index.js
@@ -1,8 +1,7 @@
 // @flow
 import Layout from './Layout';
 import Title from './components/Title';
-import HeaderAction from './components/HeaderAction';

 export default Layout;

-export { Title, HeaderAction };
+export { Title };
--- a/frontend/components/Modal/Modal.js
+++ b/frontend/components/Modal/Modal.js
@@ -2,9 +2,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import ReactModal from 'react-modal';
+import { color } from 'styles/constants';
 import { fadeAndScaleIn } from 'styles/animations';
-
-import CloseIcon from 'components/Icon/CloseIcon';
+import Icon from 'components/Icon';
 import Flex from 'components/Flex';

 type Props = {
@@ -32,7 +32,7 @@ const Modal = ({
    >
      <Content column>
        {title && <h1>{title}</h1>}
-        <Close onClick={onRequestClose}><CloseIcon /></Close>
+        <Close onClick={onRequestClose}><Icon type="X" size={32} /></Close>
        {children}
      </Content>
    </StyledModal>
@@ -68,6 +68,7 @@ const Close = styled.a`
  top: 3rem;
  right: 3rem;
  opacity: .5;
+  color: ${color.text};

  &:hover {
    opacity: 1;
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -51,23 +51,22 @@ type AuthProps = {
 };

 const Auth = ({ children }: AuthProps) => {
-  if (stores.auth.authenticated && stores.auth.team) {
+  if (stores.auth.authenticated && stores.auth.team && stores.auth.user) {
    // Only initialize stores once. Kept in global scope
    // because otherwise they will get overriden on route
    // change
    if (!authenticatedStores) {
      // Stores for authenticated user
-      const user = stores.auth.getUserStore();
-      const cache = new CacheStore(user.user.id);
+      const { user, team } = stores.auth;
+      const cache = new CacheStore(user.id);
      authenticatedStores = {
-        user,
        documents: new DocumentsStore({
          ui: stores.ui,
          cache,
        }),
        collections: new CollectionsStore({
          ui: stores.ui,
-          teamId: user.team.id,
+          teamId: team.id,
          cache,
        }),
      };
--- a/frontend/scenes/Dashboard/Dashboard.js
+++ b/frontend/scenes/Dashboard/Dashboard.js
@@ -28,8 +28,8 @@ type Props = {
  props: Props;

  componentDidMount() {
-    this.props.documents.fetchAll();
-    this.props.documents.fetchRecentlyViewed();
+    this.props.documents.fetchRecentlyModified({ limit: 5 });
+    this.props.documents.fetchRecentlyViewed({ limit: 5 });
  }

  get showPlaceholder() {
--- a/frontend/scenes/Document/Document.js
+++ b/frontend/scenes/Document/Document.js
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import { withRouter, Prompt } from 'react-router';
 import Flex from 'components/Flex';
-import { layout } from 'styles/constants';
+import { color, layout } from 'styles/constants';

 import Document from 'models/Document';
 import UiStore from 'stores/UiStore';
@@ -15,7 +15,6 @@ import SaveAction from './components/SaveAction';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import Editor from 'components/Editor';
 import DropToImport from 'components/DropToImport';
-import { HeaderAction } from 'components/Layout';
 import LoadingIndicator from 'components/LoadingIndicator';
 import Collaborators from 'components/Collaborators';
 import CenteredContent from 'components/CenteredContent';
@@ -110,6 +109,11 @@ type Props = {
    this.props.history.push(url);
  };

+  onClickNew = () => {
+    if (!this.document) return;
+    this.props.history.push(`${this.document.collection.url}/new`);
+  };
+
  onSave = async (redirect: boolean = false) => {
    if (this.document && !this.document.allowSave) return;
    let document = this.document;
@@ -230,13 +234,22 @@ type Props = {
                          }
                          isNew={!!isNew}
                        />
-                      : <a onClick={this.onClickEdit}>Edit</a>}
+                      : <a onClick={this.onClickEdit}>
+                          Edit
+                        </a>}
+                  </HeaderAction>
+                  <HeaderAction>
+                    {isEditing
+                      ? <a onClick={this.onCancel}>Cancel</a>
+                      : <Menu document={document} />}
+                  </HeaderAction>
+                  {!isEditing && <Separator />}
+                  <HeaderAction>
+                    {!isEditing &&
+                      <a onClick={this.onClickNew}>
+                        New
+                      </a>}
                  </HeaderAction>
-                  {isEditing &&
-                    <HeaderAction>
-                      <a onClick={this.onCancel}>Cancel</a>
-                    </HeaderAction>}
-                  {!isEditing && <Menu document={document} />}
                </Flex>
              </Meta>
            </Flex>
@@ -246,6 +259,32 @@ type Props = {
  }
 }

+const Separator = styled.div`
+  margin-left: 12px;
+  width: 1px;
+  height: 20px;
+  background: ${color.slateLight};
+`;
+
+const HeaderAction = styled(Flex)`
+  justify-content: center;
+  align-items: center;
+  min-height: 43px;
+  color: ${color.text};
+  padding: 0 0 0 14px;
+
+  a,
+  svg {
+    color: ${color.text};
+    opacity: .8;
+    transition: opacity 100ms ease-in-out;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+`;
+
 const DropHere = styled(Flex)`
  pointer-events: none;
  position: fixed;
--- a/frontend/scenes/Document/components/Menu.js
+++ b/frontend/scenes/Document/components/Menu.js
@@ -5,11 +5,8 @@ import get from 'lodash/get';
 import { withRouter } from 'react-router-dom';
 import { observer } from 'mobx-react';
 import Document from 'models/Document';
-import {
-  DropdownMenu,
-  DropdownMenuItem,
-  MoreIcon,
-} from 'components/DropdownMenu';
+import Icon from 'components/Icon';
+import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';

 type Props = {
  history: Object,
@@ -65,7 +62,7 @@ type Props = {
        collection.documents.length > 1;

      return (
-        <DropdownMenu label={<MoreIcon />}>
+        <DropdownMenu label={<Icon type="MoreHorizontal" />}>
          {collection &&
            <div>
              <DropdownMenuItem onClick={this.onCreateDocument}>
--- a/frontend/scenes/Search/components/SearchField/SearchField.js
+++ b/frontend/scenes/Search/components/SearchField/SearchField.js
@@ -1,8 +1,9 @@
 // @flow
 import React, { Component } from 'react';
+import Icon from 'components/Icon';
 import Flex from 'components/Flex';
+import { color } from 'styles/constants';
 import styled from 'styled-components';
-import searchImg from 'assets/icons/search.svg';

 const Field = styled.input`
  width: 100%;
@@ -12,17 +13,10 @@ const Field = styled.input`
  outline: none;
  border: 0;

-  ::-webkit-input-placeholder { color: #ccc; }
-  :-moz-placeholder { color: #ccc; }
-  ::-moz-placeholder { color: #ccc; }
-  :-ms-input-placeholder { color: #ccc; }
-`;
-
-const Icon = styled.img`
-  width: 38px;
-  margin-bottom: -5px;
-  margin-right: 10px;
-  opacity: 0.15;
+  ::-webkit-input-placeholder { color: ${color.slate}; }
+  :-moz-placeholder { color: ${color.slate}; }
+  ::-moz-placeholder { color: ${color.slate}; }
+  :-ms-input-placeholder { color: ${color.slate}; }
 `;

 class SearchField extends Component {
@@ -45,13 +39,18 @@ class SearchField extends Component {

  render() {
    return (
-      <Flex>
-        <Icon src={searchImg} alt="Search" onClick={this.focusInput} />
+      <Flex align="center">
+        <Icon
+          type="Search"
+          size={48}
+          color="#C9CFD6"
+          onClick={this.focusInput}
+        />
        <Field
          {...this.props}
          innerRef={this.setRef}
          onChange={this.handleChange}
-          placeholder="Search"
+          placeholder="Search…"
          autoFocus
        />
      </Flex>
--- a/frontend/stores/AuthStore.js
+++ b/frontend/stores/AuthStore.js
@@ -2,7 +2,6 @@
 import { observable, action, computed, autorunAsync } from 'mobx';
 import invariant from 'invariant';
 import { client } from 'utils/ApiClient';
-import UserStore from 'stores/UserStore';
 import type { User, Team } from 'types';

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

-  getUserStore(): UserStore {
-    invariant(
-      this.user && this.team,
-      'Tried to create a user store without data'
-    );
-    return new UserStore({
-      user: this.user,
-      team: this.team,
-    });
-  }
-
  constructor() {
    // Rehydrate
    const data = JSON.parse(localStorage.getItem(AUTH_STORE) || '{}');
--- a/frontend/stores/DocumentsStore.js
+++ b/frontend/stores/DocumentsStore.js
@@ -38,14 +38,17 @@ class DocumentsStore extends BaseStore {
  /* Computed */

  @computed get recentlyViewed(): Array<Document> {
-    return _.filter(this.data.values(), ({ id }) =>
-      this.recentlyViewedIds.includes(id)
+    return _.take(
+      _.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<*> => {
-    const data = await this.fetchAll('viewed');
+  @action fetchRecentlyModified = async (options: ?Object): Promise<*> => {
+    return 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<*> => {
--- a/frontend/stores/UserStore.js
+++ b/frontend/stores/UserStore.js
@@ -1,32 +0,0 @@
-// @flow
-import { observable, computed } from 'mobx';
-import type { User, Team } from 'types';
-
-type Options = {
-  user: User,
-  team: Team,
-};
-
-class UserStore {
-  @observable user: User;
-  @observable team: Team;
-
-  @observable isLoading: boolean = false;
-
-  /* Computed */
-
-  @computed get asJson(): string {
-    return JSON.stringify({
-      user: this.user,
-      team: this.team,
-    });
-  }
-
-  constructor(options: Options) {
-    // Rehydrate
-    this.user = options.user;
-    this.team = options.team;
-  }
-}
-
-export default UserStore;
--- a/frontend/styles/base.scss
+++ b/frontend/styles/base.scss
@@ -16,22 +16,18 @@

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

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

  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
--- a/frontend/styles/constants.js
+++ b/frontend/styles/constants.js
@@ -31,7 +31,7 @@ export const fontWeight = {
  light: 300,
  regular: 400,
  medium: 500,
-  demiBold: 600,
+  semiBold: 600,
  bold: 700,
  heavy: 800,
 };
--- a/frontend/utils/ApiClient.js
+++ b/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);
  };

--- a/package.json
+++ b/package.json
@@ -146,6 +146,7 @@
    "react-addons-css-transition-group": "15.3.2",
    "react-dom": "^15.6.1",
    "react-dropzone": "3.6.0",
+    "react-feather": "^1.0.7",
    "react-helmet": "3.1.0",
    "react-keydown": "^1.7.3",
    "react-modal": "^2.2.1",
--- a/server/api/auth.js
+++ b/server/api/auth.js
@@ -1,11 +1,9 @@
 // @flow
 import Router from 'koa-router';
-import apiError, { httpErrors } from '../errors';
-import fetch from 'isomorphic-fetch';
-import querystring from 'querystring';
-
+import apiError from '../errors';
 import { presentUser, presentTeam } from '../presenters';
 import { User, Team } from '../models';
+import * as Slack from '../slack';

 const router = new Router();

@@ -88,24 +86,7 @@ router.post('auth.slack', async ctx => {
  const { code } = ctx.body;
  ctx.assertPresent(code, 'code is required');

-  const body = {
-    client_id: process.env.SLACK_KEY,
-    client_secret: process.env.SLACK_SECRET,
-    redirect_uri: `${process.env.URL || ''}/auth/slack`,
-    code,
-  };
-
-  let data;
-  try {
-    const response = await fetch(
-      `https://slack.com/api/oauth.access?${querystring.stringify(body)}`
-    );
-    data = await response.json();
-  } catch (e) {
-    throw httpErrors.BadRequest();
-  }
-
-  if (!data.ok) throw httpErrors.BadRequest(data.error);
+  const data = await Slack.oauthAccess(code);

  // Temp to block
  const allowedSlackDomains = (process.env.ALLOWED_SLACK_DOMAINS || '')
@@ -118,22 +99,20 @@ router.post('auth.slack', async ctx => {
    );
  }

-  // User
  let user = await User.findOne({ where: { slackId: data.user.id } });
-
-  // Team
  let team = await Team.findOne({ where: { slackId: data.team.id } });
  const teamExisted = !!team;
-  if (!team) {
+
+  if (team) {
+    team.name = data.team.name;
+    team.slackData = data.team;
+    await team.save();
+  } else {
    team = await Team.create({
      name: data.team.name,
      slackId: data.team.id,
      slackData: data.team,
    });
-  } else {
-    team.name = data.team.name;
-    team.slackData = data.team;
-    team = await team.save();
  }

  if (user) {
@@ -143,7 +122,6 @@ router.post('auth.slack', async ctx => {
  } else {
    user = await User.create({
      slackId: data.user.id,
-      username: data.user.name,
      name: data.user.name,
      email: data.user.email,
      teamId: team.id,
@@ -169,24 +147,7 @@ router.post('auth.slackCommands', async ctx => {
  const { code } = ctx.body;
  ctx.assertPresent(code, 'code is required');

-  const body = {
-    client_id: process.env.SLACK_KEY,
-    client_secret: process.env.SLACK_SECRET,
-    redirect_uri: `${process.env.URL || ''}/auth/slack/commands`,
-    code,
-  };
-
-  let data;
-  try {
-    const response = await fetch(
-      `https://slack.com/api/oauth.access?${querystring.stringify(body)}`
-    );
-    data = await response.json();
-  } catch (e) {
-    throw httpErrors.BadRequest();
-  }
-
-  if (!data.ok) throw httpErrors.BadRequest(data.error);
+  await Slack.oauthAccess(code, `${process.env.URL || ''}/auth/slack/commands`);
 });

 export default router;
--- a/server/api/middlewares/pagination.js
+++ b/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 offset = parseInt(query.offset, 10);
+    let body = ctx.request.body;
+    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;

--- a/server/migrations/20170904202454-allow-null-username.js
+++ b/server/migrations/20170904202454-allow-null-username.js
@@ -0,0 +1,15 @@
+module.exports = {
+  up: async function(queryInterface, Sequelize) {
+    await queryInterface.changeColumn('users', 'username', {
+      type: Sequelize.STRING,
+      allowNull: true,
+    });
+  },
+
+  down: async function(queryInterface, Sequelize) {
+    await queryInterface.changeColumn('users', 'username', {
+      type: Sequelize.STRING,
+      allowNull: false,
+    });
+  },
+};
--- a/server/slack.js
+++ b/server/slack.js
@@ -0,0 +1,34 @@
+// @flow
+import fetch from 'isomorphic-fetch';
+import querystring from 'querystring';
+import { httpErrors } from './errors';
+
+const SLACK_API_URL = 'https://slack.com/api';
+
+export async function request(endpoint: string, body: Object) {
+  let data;
+  try {
+    const response = await fetch(
+      `${SLACK_API_URL}/${endpoint}?${querystring.stringify(body)}`
+    );
+    data = await response.json();
+  } catch (e) {
+    throw httpErrors.BadRequest();
+  }
+  console.log('DATA', data);
+  if (!data.ok) throw httpErrors.BadRequest(data.error);
+
+  return data;
+}
+
+export async function oauthAccess(
+  code: string,
+  redirect_uri: string = `${process.env.URL || ''}/auth/slack`
+) {
+  return request('oauth.access', {
+    client_id: process.env.SLACK_KEY,
+    client_secret: process.env.SLACK_SECRET,
+    redirect_uri: `${process.env.URL || ''}/auth/slack`,
+    code,
+  });
+}
--- a/server/static/dev.html
+++ b/server/static/dev.html
@@ -20,7 +20,7 @@

  #root {
    flex: 1;
-    height: 100%;
+    min-height: 100vh;
  }
 </style>
 </head>
@@ -30,4 +30,4 @@
  <script src="/static/bundle.js"></script>
 </body>

-</html>
+</html>
--- a/server/static/index.html
+++ b/server/static/index.html
@@ -18,7 +18,7 @@

    #root {
      flex: 1;
-      height: 100%;
+      min-height: 100vh;
    }
  </style>
 </head>
@@ -28,4 +28,4 @@
 </body>
 <script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-3.min.js" data-apikey="8165e2069605bc20ccd0792dbbfae7bf"></script>

-</html>
+</html>
--- a/yarn.lock
+++ b/yarn.lock
@@ -7391,6 +7391,10 @@ react-dropzone@3.6.0:
  dependencies:
    attr-accept "^1.0.3"

+react-feather@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-1.0.7.tgz#f2118f1d2402b0c1e6f23c732f9e7f9fd4ca61e2"
+
 react-helmet@3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-3.1.0.tgz#63486194682f33004826f3687dc49a138b557050"
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><path d="M18.7,27.5h62.7c2.5,0,4.5-2,4.5-4.5s-2-4.5-4.5-4.5H18.7c-2.5,0-4.5,2-4.5,4.5S16.2,27.5,18.7,27.5z"/><path d="M81.4,45.5H18.7c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5h62.7c2.5,0,4.5-2,4.5-4.5S83.9,45.5,81.4,45.5z"/><path d="M81.4,72.5H18.7c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5h62.7c2.5,0,4.5-2,4.5-4.5S83.9,72.5,81.4,72.5z"/></g></svg>
				`@@ -1 +0,0 @@`
				<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 125"><g transform="translate(0,-952.36218)"><path style="color:#000000;enable-background:accumulate;" d="M 17 41 C 12.029437 41 8 45.029437 8 50 C 8 54.970563 12.029437 59 17 59 C 21.970563 59 26 54.970563 26 50 C 26 45.029437 21.970563 41 17 41 z M 50 41 C 45.029437 41 41 45.029437 41 50 C 41 54.970563 45.029437 59 50 59 C 54.970563 59 59 54.970563 59 50 C 59 45.029437 54.970563 41 50 41 z M 83 41 C 78.029437 41 74 45.029437 74 50 C 74 54.970563 78.029437 59 83 59 C 87.970563 59 92 54.970563 92 50 C 92 45.029437 87.970563 41 83 41 z " transform="translate(0,952.36218)" fill="#000000" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"/></g></svg>