Upgrade prettier

2017-11-10 14:14:30 -08:00
parent c737b613e4
commit ab13f51d5d
79 changed files with 780 additions and 533 deletions
--- a/app/components/Alert/Alert.js
+++ b/app/components/Alert/Alert.js
@@ -10,7 +10,8 @@ type Props = {
  type?: 'info' | 'success' | 'warning' | 'danger' | 'offline',
 };

-@observer class Alert extends React.Component {
+@observer
+class Alert extends React.Component {
  props: Props;
  defaultProps = {
    type: 'info',
--- a/app/components/Button/Button.js
+++ b/app/components/Button/Button.js
@@ -29,35 +29,35 @@ const RealButton = styled.button`

  svg {
    position: relative;
-    top: .05em;
+    top: 0.05em;
  }

-  ${props => props.light && `
+  ${props =>
+    props.light &&
+    `
    color: ${color.text};
    background: ${lighten(0.08, color.slateLight)};

    &:hover {
      background: ${color.slateLight};
    }
-  `}
-
-  ${props => props.neutral && `
+  `} ${props =>
+      props.neutral &&
+      `
    background: ${color.slate};

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

    &:hover {
      background: ${darken(0.05, color.danger)};
    }
-  `}
-
-  &:disabled {
+  `} &:disabled {
    background: ${color.slateLight};
    cursor: default;
  }
@@ -68,7 +68,7 @@ const Label = styled.span`
  white-space: nowrap;
  text-overflow: ellipsis;

-  ${props => props.hasIcon && 'padding-left: 2px;'}
+  ${props => props.hasIcon && 'padding-left: 2px;'};
 `;

 const Inner = styled.span`
@@ -78,7 +78,9 @@ const Inner = styled.span`
  justify-content: center;
  align-items: center;

-  ${props => props.hasIcon && (props.small ? 'padding-left: 6px;' : 'padding-left: 10px;')}
+  ${props =>
+    props.hasIcon &&
+    (props.small ? 'padding-left: 6px;' : 'padding-left: 10px;')};
 `;

 export type Props = {
--- a/app/components/CenteredContent/CenteredContent.js
+++ b/app/components/CenteredContent/CenteredContent.js
@@ -19,9 +19,7 @@ const Content = styled.div`
 const CenteredContent = ({ children, ...rest }: Props) => {
  return (
    <Container {...rest}>
-      <Content>
-        {children}
-      </Content>
+      <Content>{children}</Content>
    </Container>
  );
 };
--- a/app/components/ColorPicker/ColorPicker.js
+++ b/app/components/ColorPicker/ColorPicker.js
@@ -25,7 +25,8 @@ type Props = {
  value?: string,
 };

-@observer class ColorPicker extends React.Component {
+@observer
+class ColorPicker extends React.Component {
  props: Props;

  @observable selectedColor: string = colors[0];
@@ -52,26 +53,30 @@ type Props = {
    );
  };

-  @computed get customColor(): string {
+  @computed
+  get customColor(): string {
    return this.customColorValue &&
      validateColorHex(`#${this.customColorValue}`)
      ? `#${this.customColorValue}`
      : colors[0];
  }

-  @action setColor = (color: string) => {
+  @action
+  setColor = (color: string) => {
    this.selectedColor = color;
    this.customColorSelected = false;
    this.fireCallback();
  };

-  @action focusOnCustomColor = (event: SyntheticEvent) => {
+  @action
+  focusOnCustomColor = (event: SyntheticEvent) => {
    this.selectedColor = '';
    this.customColorSelected = true;
    this.fireCallback();
  };

-  @action setCustomColor = (event: SyntheticEvent) => {
+  @action
+  setCustomColor = (event: SyntheticEvent) => {
    let target = event.target;
    if (target instanceof HTMLInputElement) {
      const color = target.value;
@@ -137,9 +142,7 @@ const SwatchOutset = styled(Flex)`
  border: 2px solid ${({ active, color }) => (active ? color : 'transparent')};
  border-radius: 2px;
  background: ${({ color }) => color};
-  ${({ onClick }) => onClick && `cursor: pointer;`}
-
-  &:last-child {
+  ${({ onClick }) => onClick && `cursor: pointer;`} &:last-child {
    margin-right: 0;
  }
 `;
--- a/app/components/Divider/Divider.js
+++ b/app/components/Divider/Divider.js
@@ -4,7 +4,11 @@ import styled from 'styled-components';
 import Flex from 'shared/components/Flex';

 const Divider = () => {
-  return <Flex auto justify="center"><Content /></Flex>;
+  return (
+    <Flex auto justify="center">
+      <Content />
+    </Flex>
+  );
 };

 const Content = styled.span`
--- a/app/components/DocumentPreview/DocumentPreview.js
+++ b/app/components/DocumentPreview/DocumentPreview.js
@@ -49,7 +49,7 @@ const DocumentLink = styled(Link)`
    outline: none;

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

      &:hover {
        opacity: 1;
@@ -63,11 +63,12 @@ const DocumentLink = styled(Link)`

  h3 {
    margin-top: 0;
-    margin-bottom: .25em;
+    margin-bottom: 0.25em;
  }
 `;

-@observer class DocumentPreview extends Component {
+@observer
+class DocumentPreview extends Component {
  props: Props;

  star = (ev: SyntheticEvent) => {
@@ -89,13 +90,15 @@ const DocumentLink = styled(Link)`
      <DocumentLink to={document.url} innerRef={innerRef} {...rest}>
        <h3>
          {document.title}
-          {document.starred
-            ? <a onClick={this.unstar}>
-                <StyledStar solid />
-              </a>
-            : <a onClick={this.star}>
-                <StyledStar />
-              </a>}
+          {document.starred ? (
+            <a onClick={this.unstar}>
+              <StyledStar solid />
+            </a>
+          ) : (
+            <a onClick={this.star}>
+              <StyledStar />
+            </a>
+          )}
        </h3>
        <PublishingInfo
          document={document}
--- a/app/components/DocumentPreview/components/PublishingInfo.js
+++ b/app/components/DocumentPreview/components/PublishingInfo.js
@@ -36,24 +36,24 @@ class PublishingInfo extends Component {

    return (
      <Container align="center">
-        {createdAt === updatedAt
-          ? <span>
-              {createdBy.name}
+        {createdAt === updatedAt ? (
+          <span>
+            {createdBy.name} published {moment(createdAt).fromNow()}
+          </span>
+        ) : (
+          <span>
+            {updatedBy.name}
+            <Modified highlight={modifiedSinceViewed}>
              {' '}
-              published
-              {' '}
-              {moment(createdAt).fromNow()}
-            </span>
-          : <span>
-              {updatedBy.name}
-              <Modified highlight={modifiedSinceViewed}>
-                {' '}
-                modified
-                {' '}
-                {moment(updatedAt).fromNow()}
-              </Modified>
-            </span>}
-        {collection && <span>&nbsp;in <strong>{collection.name}</strong></span>}
+              modified {moment(updatedAt).fromNow()}
+            </Modified>
+          </span>
+        )}
+        {collection && (
+          <span>
+            &nbsp;in <strong>{collection.name}</strong>
+          </span>
+        )}
      </Container>
    );
  }
--- a/app/components/DocumentViews/DocumentViewersStore.js
+++ b/app/components/DocumentViews/DocumentViewersStore.js
@@ -14,7 +14,8 @@ class DocumentViewersStore {
  @observable viewers: Array<View>;
  @observable isFetching: boolean;

-  @action fetchViewers = async () => {
+  @action
+  fetchViewers = async () => {
    this.isFetching = true;

    try {
--- a/app/components/DocumentViews/DocumentViews.js
+++ b/app/components/DocumentViews/DocumentViews.js
@@ -25,7 +25,8 @@ type Props = {
  count: number,
 };

-@observer class DocumentViews extends Component {
+@observer
+class DocumentViews extends Component {
  anchor: HTMLElement;
  store: DocumentViewersStore;
  props: Props;
@@ -55,19 +56,16 @@ type Props = {
    return (
      <Container align="center">
        <a ref={this.setRef} onClick={this.openPopover}>
-          Viewed
-          {' '}
-          {this.props.count}
-          {' '}
-          {this.props.count === 1 ? 'time' : 'times'}
+          Viewed {this.props.count} {this.props.count === 1 ? 'time' : 'times'}
        </a>
-        {this.state.opened &&
+        {this.state.opened && (
          <Popover anchor={this.anchor} onClose={this.closePopover}>
            <DocumentViewers
              onMount={this.store.fetchViewers}
              viewers={this.store.viewers}
            />
-          </Popover>}
+          </Popover>
+        )}
      </Container>
    );
  }
--- a/app/components/DocumentViews/components/DocumentViewers/DocumentViewers.js
+++ b/app/components/DocumentViews/components/DocumentViewers/DocumentViewers.js
@@ -40,8 +40,7 @@ class DocumentViewers extends Component {
          {map(this.props.viewers, view => (
            <li key={view.user.id}>
              <Flex align="center">
-                <Avatar src={view.user.avatarUrl} />
-                {' '}
+                <Avatar src={view.user.avatarUrl} />{' '}
                <UserName>{view.user.name}</UserName>
              </Flex>
            </li>
--- a/app/components/DropdownMenu/DropdownMenu.js
+++ b/app/components/DropdownMenu/DropdownMenu.js
@@ -17,7 +17,8 @@ type Props = {
  style?: Object,
 };

-@observer class DropdownMenu extends Component {
+@observer
+class DropdownMenu extends Component {
  props: Props;
  @observable top: number;
  @observable left: number;
@@ -93,7 +94,8 @@ const Menu = styled.div`
  border-radius: 2px;
  min-width: 160px;
  overflow: hidden;
-  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.08);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08),
+    0 2px 4px rgba(0, 0, 0, 0.08);
 `;

 export default DropdownMenu;
--- a/app/components/DropdownMenu/DropdownMenuItem.js
+++ b/app/components/DropdownMenu/DropdownMenuItem.js
@@ -11,11 +11,7 @@ const DropdownMenuItem = ({
  onClick?: SyntheticEvent => void,
  children?: React.Element<any>,
 }) => {
-  return (
-    <MenuItem onClick={onClick}>
-      {children}
-    </MenuItem>
-  );
+  return <MenuItem onClick={onClick}>{children}</MenuItem>;
 };

 const MenuItem = styled(Flex)`
--- a/app/components/Editor/Editor.js
+++ b/app/components/Editor/Editor.js
@@ -34,7 +34,8 @@ type KeyData = {
  key: string,
 };

-@observer class MarkdownEditor extends Component {
+@observer
+class MarkdownEditor extends Component {
  props: Props;
  editor: EditorType;
  schema: Object;
@@ -193,14 +194,16 @@ type KeyData = {
        <MaxWidth column auto>
          <Header onClick={this.focusAtStart} readOnly={readOnly} />
          <Contents state={this.editorState} />
-          {!readOnly &&
-            <Toolbar state={this.editorState} onChange={this.onChange} />}
-          {!readOnly &&
+          {!readOnly && (
+            <Toolbar state={this.editorState} onChange={this.onChange} />
+          )}
+          {!readOnly && (
            <BlockInsert
              state={this.editorState}
              onChange={this.onChange}
              onInsertImage={this.insertImageFile}
-            />}
+            />
+          )}
          <StyledEditor
            innerRef={ref => (this.editor = ref)}
            placeholder="Start with a title…"
@@ -234,7 +237,7 @@ const Header = styled(Flex)`
  height: 60px;
  flex-shrink: 0;
  align-items: flex-end;
-  ${({ readOnly }) => !readOnly && 'cursor: text;'}
+  ${({ readOnly }) => !readOnly && 'cursor: text;'};
 `;

 const StyledEditor = styled(Editor)`
@@ -326,7 +329,8 @@ const StyledEditor = styled(Editor)`
    padding: 5px 20px 5px 0;
  }

-  b, strong {
+  b,
+  strong {
    font-weight: 600;
  }
 `;
--- a/app/components/Editor/components/BlockInsert.js
+++ b/app/components/Editor/components/BlockInsert.js
@@ -126,20 +126,23 @@ const Trigger = styled.div`
  z-index: 1;
  opacity: 0;
  background-color: ${color.white};
-  transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  line-height: 0;
  margin-left: -10px;
  box-shadow: inset 0 0 0 2px ${color.slate};
  border-radius: 100%;
-  transform: scale(.9);
+  transform: scale(0.9);
  cursor: pointer;

  &:hover {
    background-color: ${color.smokeDark};
  }

-  ${({ active }) => active && `
+  ${({ active }) =>
+    active &&
+    `
    transform: scale(1);
    opacity: .9;
-  `}
+  `};
 `;
--- a/app/components/Editor/components/ClickablePadding/ClickablePadding.js
+++ b/app/components/Editor/components/ClickablePadding/ClickablePadding.js
@@ -16,7 +16,7 @@ const Container = styled.div`
  padding-top: 50px;
  cursor: ${({ onClick }) => (onClick ? 'text' : 'default')};

-  ${({ grow }) => grow && `flex-grow: 1;`}
+  ${({ grow }) => grow && `flex-grow: 1;`};
 `;

 export default ClickablePadding;
--- a/app/components/Editor/components/Code.js
+++ b/app/components/Editor/components/Code.js
@@ -12,16 +12,14 @@ export default function Code({ children, node, readOnly, attributes }: Props) {
    <Container {...attributes}>
      {readOnly && <CopyButton text={node.text} />}
      <Pre className={`language-${language}`}>
-        <code className={`language-${language}`}>
-          {children}
-        </code>
+        <code className={`language-${language}`}>{children}</code>
      </Pre>
    </Container>
  );
 }

 const Pre = styled.pre`
-  padding: .5em 1em;
+  padding: 0.5em 1em;
  background: ${color.smokeLight};
  border-radius: 4px;
  border: 1px solid ${color.smokeDark};
--- a/app/components/Editor/components/Contents.js
+++ b/app/components/Editor/components/Contents.js
@@ -12,7 +12,8 @@ type Props = {
  state: State,
 };

-@observer class Contents extends Component {
+@observer
+class Contents extends Component {
  props: Props;
  @observable activeHeading: ?string;

--- a/app/components/Editor/components/CopyButton.js
+++ b/app/components/Editor/components/CopyButton.js
@@ -6,7 +6,8 @@ import { color } from 'shared/styles/constants';
 import styled from 'styled-components';
 import CopyToClipboard from 'components/CopyToClipboard';

-@observer class CopyButton extends Component {
+@observer
+class CopyButton extends Component {
  @observable copied: boolean = false;
  copiedTimeout: ?number;

--- a/app/components/Editor/components/Heading.js
+++ b/app/components/Editor/components/Heading.js
@@ -41,26 +41,29 @@ function Heading(props: Props) {

  return (
    <Component {...attributes} id={slugish}>
-      <Wrapper hasEmoji={startsWithEmojiAndSpace}>
-        {children}
-      </Wrapper>
-      {showPlaceholder &&
+      <Wrapper hasEmoji={startsWithEmojiAndSpace}>{children}</Wrapper>
+      {showPlaceholder && (
        <Placeholder contentEditable={false}>
          {editor.props.placeholder}
-        </Placeholder>}
-      {showHash && <Anchor name={slugish} href={`#${slugish}`}>#</Anchor>}
+        </Placeholder>
+      )}
+      {showHash && (
+        <Anchor name={slugish} href={`#${slugish}`}>
+          #
+        </Anchor>
+      )}
    </Component>
  );
 }

 const Wrapper = styled.div`
  display: inline;
-  margin-left: ${(props: Props) => (props.hasEmoji ? '-1.2em' : 0)}
+  margin-left: ${(props: Props) => (props.hasEmoji ? '-1.2em' : 0)};
 `;

 const Anchor = styled.a`
  visibility: hidden;
-  padding-left: .25em;
+  padding-left: 0.25em;
  color: #dedede;

  &:hover {
--- a/app/components/Editor/components/HorizontalRule.js
+++ b/app/components/Editor/components/HorizontalRule.js
@@ -11,10 +11,11 @@ function HorizontalRule(props: Props) {
 }

 const StyledHr = styled.hr`
-  padding-top: .75em;
+  padding-top: 0.75em;
  margin: 0;
  border: 0;
-  border-bottom: 1px solid ${props => (props.active ? color.slate : color.slateLight)};
+  border-bottom: 1px solid
+    ${props => (props.active ? color.slate : color.slateLight)};
 `;

 export default HorizontalRule;
--- a/app/components/Editor/components/Image.js
+++ b/app/components/Editor/components/Image.js
@@ -35,26 +35,28 @@ class Image extends Component {

    return (
      <CenteredImage>
-        {!readOnly
-          ? <StyledImg
-              {...attributes}
-              src={src}
-              alt={caption}
-              active={active}
-              loading={loading}
-            />
-          : <ImageZoom
-              image={{
-                src,
-                alt: caption,
-                style: {
-                  maxWidth: '100%',
-                },
-                ...attributes,
-              }}
-              shouldRespectMaxDimension
-            />}
-        {showCaption &&
+        {!readOnly ? (
+          <StyledImg
+            {...attributes}
+            src={src}
+            alt={caption}
+            active={active}
+            loading={loading}
+          />
+        ) : (
+          <ImageZoom
+            image={{
+              src,
+              alt: caption,
+              style: {
+                maxWidth: '100%',
+              },
+              ...attributes,
+            }}
+            shouldRespectMaxDimension
+          />
+        )}
+        {showCaption && (
          <Caption
            type="text"
            placeholder="Write a caption"
@@ -64,7 +66,8 @@ class Image extends Component {
            contentEditable={false}
            disabled={readOnly}
            tabIndex={-1}
-          />}
+          />
+        )}
      </CenteredImage>
    );
  }
--- a/app/components/Editor/components/InlineCode.js
+++ b/app/components/Editor/components/InlineCode.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { color } from 'shared/styles/constants';

 const InlineCode = styled.code`
-  padding: .25em;
+  padding: 0.25em;
  background: ${color.smoke};
  border-radius: 4px;
  border: 1px solid ${color.smokeDark};
--- a/app/components/Editor/components/Link.js
+++ b/app/components/Editor/components/Link.js
@@ -31,8 +31,16 @@ export default function Link({ attributes, node, children, readOnly }: Props) {
  const path = getPathFromUrl(href);

  if (isOutlineUrl(href) && readOnly) {
-    return <InternalLink {...attributes} to={path}>{children}</InternalLink>;
+    return (
+      <InternalLink {...attributes} to={path}>
+        {children}
+      </InternalLink>
+    );
  } else {
-    return <a {...attributes} href={href} target="_blank">{children}</a>;
+    return (
+      <a {...attributes} href={href} target="_blank">
+        {children}
+      </a>
+    );
  }
 }
--- a/app/components/Editor/components/Paragraph.js
+++ b/app/components/Editor/components/Paragraph.js
@@ -25,10 +25,11 @@ export default function Link({
  return (
    <p {...attributes}>
      {children}
-      {showPlaceholder &&
+      {showPlaceholder && (
        <Placeholder contentEditable={false}>
          {editor.props.bodyPlaceholder}
-        </Placeholder>}
+        </Placeholder>
+      )}
    </p>
  );
 }
--- a/app/components/Editor/components/Placeholder.js
+++ b/app/components/Editor/components/Placeholder.js
@@ -7,5 +7,5 @@ export default styled.span`
  visibility: hidden;
  pointer-events: none;
  user-select: none;
-  color: #B1BECC;
+  color: #b1becc;
 `;
--- a/app/components/Editor/components/Toolbar/BlockToolbar.js
+++ b/app/components/Editor/components/Toolbar/BlockToolbar.js
@@ -170,7 +170,7 @@ const Bar = styled(Flex)`

  &:before,
  &:after {
-    content: "";
+    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
--- a/app/components/Editor/components/Toolbar/Toolbar.js
+++ b/app/components/Editor/components/Toolbar/Toolbar.js
@@ -99,7 +99,9 @@ export default class Toolbar extends Component {

      const left =
        rect.left + window.scrollX - this.menu.offsetWidth / 2 + rect.width / 2;
-      data.top = `${Math.round(rect.top + window.scrollY - this.menu.offsetHeight)}px`;
+      data.top = `${Math.round(
+        rect.top + window.scrollY - this.menu.offsetHeight
+      )}px`;
      data.left = `${Math.round(Math.max(padding, left))}px`;
      this.setState(data);
    }
@@ -120,17 +122,15 @@ export default class Toolbar extends Component {
    return (
      <Portal>
        <Menu active={this.state.active} innerRef={this.setRef} style={style}>
-          {link &&
-            <LinkToolbar
-              {...this.props}
-              link={link}
-              onBlur={this.handleBlur}
-            />}
-          {!link &&
+          {link && (
+            <LinkToolbar {...this.props} link={link} onBlur={this.handleBlur} />
+          )}
+          {!link && (
            <FormattingToolbar
              onCreateLink={this.handleFocus}
              {...this.props}
-            />}
+            />
+          )}
        </Menu>
      </Portal>
    );
@@ -144,16 +144,19 @@ const Menu = styled.div`
  top: -10000px;
  left: -10000px;
  opacity: 0;
-  background-color: #2F3336;
+  background-color: #2f3336;
  border-radius: 4px;
-  transform: scale(.95);
-  transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transform: scale(0.95);
+  transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  line-height: 0;
  height: 40px;
  min-width: 260px;

-  ${({ active }) => active && `
+  ${({ active }) =>
+    active &&
+    `
    transform: translateY(-6px) scale(1);
    opacity: 1;
-  `}
+  `};
 `;
--- a/app/components/Editor/components/Toolbar/components/DocumentResult.js
+++ b/app/components/Editor/components/Toolbar/components/DocumentResult.js
@@ -14,7 +14,9 @@ type Props = {
 function DocumentResult({ document, ...rest }: Props) {
  return (
    <ListItem {...rest} href="">
-      <i><NextIcon light /></i>
+      <i>
+        <NextIcon light />
+      </i>
      {document.title}
    </ListItem>
  );
--- a/app/components/Editor/components/Toolbar/components/FormattingToolbar.js
+++ b/app/components/Editor/components/Toolbar/components/FormattingToolbar.js
@@ -42,7 +42,10 @@ class FormattingToolbar extends Component {
    ev.preventDefault();
    let { state } = this.props;

-    state = state.transform().toggleMark(type).apply();
+    state = state
+      .transform()
+      .toggleMark(type)
+      .apply();
    this.props.onChange(state);
  };

@@ -50,7 +53,10 @@ class FormattingToolbar extends Component {
    ev.preventDefault();
    let { state } = this.props;

-    state = state.transform().setBlock(type).apply();
+    state = state
+      .transform()
+      .setBlock(type)
+      .apply();
    this.props.onChange(state);
  };

@@ -59,7 +65,10 @@ class FormattingToolbar extends Component {
    ev.stopPropagation();
    let { state } = this.props;
    const data = { href: '' };
-    state = state.transform().wrapInline({ type: 'link', data }).apply();
+    state = state
+      .transform()
+      .wrapInline({ type: 'link', data })
+      .apply();
    this.props.onChange(state);
    this.props.onCreateLink();
  };
@@ -109,8 +118,8 @@ class FormattingToolbar extends Component {
 const Separator = styled.div`
  height: 100%;
  width: 1px;
-  background: #FFF;
-  opacity: .2;
+  background: #fff;
+  opacity: 0.2;
  display: inline-block;
  margin-left: 10px;
 `;
--- a/app/components/Editor/components/Toolbar/components/LinkToolbar.js
+++ b/app/components/Editor/components/Toolbar/components/LinkToolbar.js
@@ -39,7 +39,8 @@ class LinkToolbar extends Component {
    this.isEditing = !!this.props.link.data.get('href');
  }

-  @action search = async () => {
+  @action
+  search = async () => {
    this.isFetching = true;

    if (this.searchTerm) {
@@ -144,15 +145,16 @@ class LinkToolbar extends Component {
            onChange={this.onChange}
            autoFocus
          />
-          {this.isEditing &&
+          {this.isEditing && (
            <ToolbarButton onMouseDown={this.openLink}>
              <OpenIcon light />
-            </ToolbarButton>}
+            </ToolbarButton>
+          )}
          <ToolbarButton onMouseDown={this.removeLink}>
            {this.isEditing ? <TrashIcon light /> : <CloseIcon light />}
          </ToolbarButton>
        </LinkEditor>
-        {hasResults &&
+        {hasResults && (
          <SearchResults>
            <ArrowKeyNavigation
              mode={ArrowKeyNavigation.mode.VERTICAL}
@@ -165,7 +167,8 @@ class LinkToolbar extends Component {
                return (
                  <DocumentResult
                    innerRef={ref =>
-                      index === 0 && this.setFirstDocumentRef(ref)}
+                      index === 0 && this.setFirstDocumentRef(ref)
+                    }
                    document={document}
                    key={document.id}
                    onClick={ev => this.selectDocument(ev, document)}
@@ -173,14 +176,15 @@ class LinkToolbar extends Component {
                );
              })}
            </ArrowKeyNavigation>
-          </SearchResults>}
+          </SearchResults>
+        )}
      </span>
    );
  }
 }

 const SearchResults = styled.div`
-  background: #2F3336;
+  background: #2f3336;
  position: absolute;
  top: 100%;
  width: 100%;
@@ -199,7 +203,7 @@ const LinkEditor = styled(Flex)`

 const Input = styled.input`
  font-size: 15px;
-  background: rgba(255,255,255,.1);
+  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  padding: 4px 8px;
  border: 0;
--- a/app/components/Editor/components/Toolbar/components/ToolbarButton.js
+++ b/app/components/Editor/components/Toolbar/components/ToolbarButton.js
@@ -12,7 +12,7 @@ export default styled.button`
  background: none;
  transition: opacity 100ms ease-in-out;
  padding: 0;
-  opacity: .7;
+  opacity: 0.7;

  &:first-child {
    margin-left: 0;
@@ -22,5 +22,5 @@ export default styled.button`
    opacity: 1;
  }

-  ${({ active }) => active && 'opacity: 1;'}
+  ${({ active }) => active && 'opacity: 1;'};
 `;
--- a/app/components/Editor/plugins/KeyboardShortcuts.js
+++ b/app/components/Editor/plugins/KeyboardShortcuts.js
@@ -37,7 +37,10 @@ export default function KeyboardShortcuts() {
      const firstNode = state.document.nodes.first();
      if (firstNode === state.startBlock) return;

-      state = state.transform().toggleMark(type).apply();
+      state = state
+        .transform()
+        .toggleMark(type)
+        .apply();
      return state;
    },
  };
--- a/app/components/Editor/plugins/MarkdownShortcuts.js
+++ b/app/components/Editor/plugins/MarkdownShortcuts.js
@@ -64,7 +64,10 @@ export default function MarkdownShortcuts() {
          }
        }

-        state = transform.extendToStartOf(startBlock).delete().apply();
+        state = transform
+          .extendToStartOf(startBlock)
+          .delete()
+          .apply();
        return state;
      }

@@ -113,7 +116,10 @@ export default function MarkdownShortcuts() {
            lastCodeTagIndex - shortcut.length
          );
          transform.addMark(mark);
-          state = transform.collapseToEnd().removeMark(mark).apply();
+          state = transform
+            .collapseToEnd()
+            .removeMark(mark)
+            .apply();
          return state;
        }
      }
@@ -212,7 +218,11 @@ export default function MarkdownShortcuts() {
    onTab(ev: SyntheticEvent, state: Object) {
      if (state.startBlock.type === 'heading1') {
        ev.preventDefault();
-        return state.transform().splitBlock().setBlock('paragraph').apply();
+        return state
+          .transform()
+          .splitBlock()
+          .setBlock('paragraph')
+          .apply();
      }
    },

@@ -253,7 +263,11 @@ export default function MarkdownShortcuts() {
      }

      ev.preventDefault();
-      return state.transform().splitBlock().setBlock('paragraph').apply();
+      return state
+        .transform()
+        .splitBlock()
+        .setBlock('paragraph')
+        .apply();
    },

    /**
--- a/app/components/Icon/CheckboxIcon.js
+++ b/app/components/Icon/CheckboxIcon.js
@@ -9,12 +9,14 @@ export default function CheckboxIcon({
 }: Props & { checked: boolean }) {
  return (
    <Icon {...rest}>
-      {checked
-        ? <path d="M8,5 L16,5 L16,5 C17.6568542,5 19,6.34314575 19,8 L19,16 C19,17.6568542 17.6568542,19 16,19 L8,19 L8,19 C6.34314575,19 5,17.6568542 5,16 L5,8 L5,8 C5,6.34314575 6.34314575,5 8,5 L8,5 Z M10.958729,12.8883948 L9.26824635,10.8598156 C8.91468227,10.4355387 8.28411757,10.3782146 7.85984067,10.7317787 C7.43556378,11.0853428 7.37823971,11.7159075 7.73180379,12.1401844 L10.2318038,15.1401844 C10.6450125,15.6360348 11.4127535,15.616362 11.8000251,15.1 L16.3000251,9.1 C16.6313959,8.6581722 16.5418529,8.03137085 16.1000251,7.7 C15.6581973,7.36862915 15.0313959,7.4581722 14.7000251,7.9 L10.958729,12.8883948 Z" />
-        : <path
-            d="M8,5 L16,5 L16,5 C17.6568542,5 19,6.34314575 19,8 L19,16 C19,17.6568542 17.6568542,19 16,19 L8,19 L8,19 C6.34314575,19 5,17.6568542 5,16 L5,8 L5,8 C5,6.34314575 6.34314575,5 8,5 L8,5 Z M8,7 C7.44771525,7 7,7.44771525 7,8 L7,16 C7,16.5522847 7.44771525,17 8,17 L16,17 C16.5522847,17 17,16.5522847 17,16 L17,8 C17,7.44771525 16.5522847,7 16,7 L8,7 Z"
-            id="path-1"
-          />}
+      {checked ? (
+        <path d="M8,5 L16,5 L16,5 C17.6568542,5 19,6.34314575 19,8 L19,16 C19,17.6568542 17.6568542,19 16,19 L8,19 L8,19 C6.34314575,19 5,17.6568542 5,16 L5,8 L5,8 C5,6.34314575 6.34314575,5 8,5 L8,5 Z M10.958729,12.8883948 L9.26824635,10.8598156 C8.91468227,10.4355387 8.28411757,10.3782146 7.85984067,10.7317787 C7.43556378,11.0853428 7.37823971,11.7159075 7.73180379,12.1401844 L10.2318038,15.1401844 C10.6450125,15.6360348 11.4127535,15.616362 11.8000251,15.1 L16.3000251,9.1 C16.6313959,8.6581722 16.5418529,8.03137085 16.1000251,7.7 C15.6581973,7.36862915 15.0313959,7.4581722 14.7000251,7.9 L10.958729,12.8883948 Z" />
+      ) : (
+        <path
+          d="M8,5 L16,5 L16,5 C17.6568542,5 19,6.34314575 19,8 L19,16 C19,17.6568542 17.6568542,19 16,19 L8,19 L8,19 C6.34314575,19 5,17.6568542 5,16 L5,8 L5,8 C5,6.34314575 6.34314575,5 8,5 L8,5 Z M8,7 C7.44771525,7 7,7.44771525 7,8 L7,16 C7,16.5522847 7.44771525,17 8,17 L16,17 C16.5522847,17 17,16.5522847 17,16 L17,8 C17,7.44771525 16.5522847,7 16,7 L8,7 Z"
+          id="path-1"
+        />
+      )}
    </Icon>
  );
 }
--- a/app/components/Icon/CollectionIcon.js
+++ b/app/components/Icon/CollectionIcon.js
@@ -9,9 +9,11 @@ export default function CollectionIcon({
 }: Props & { expanded: boolean }) {
  return (
    <Icon {...rest}>
-      {expanded
-        ? <path d="M16.701875,4.16415178 L17,4.14285714 C18.1045695,4.06395932 19,5.02334914 19,6.28571429 L19,17.7142857 C19,18.9766509 18.1045695,19.9360407 17,19.8571429 L16.701875,19.8358482 C16.8928984,19.371917 17,18.8348314 17,18.25 L17,5.75 C17,5.16516859 16.8928984,4.62808299 16.701875,4.16415178 Z M14,3.36363636 C15.1045695,3.16280555 16,4.15126779 16,5.57142857 L16,18.4285714 C16,19.8487322 15.1045695,20.8371945 14,20.6363636 L7,19.3636364 C5.8954305,19.1628055 5,18.1045695 5,17 L5,7 C5,5.8954305 5.8954305,4.83719445 7,4.63636364 L14,3.36363636 Z M7.5,6.67532468 C7.22385763,6.71118732 7,6.97574633 7,7.26623377 L7,16.7337662 C7,17.0242537 7.22385763,17.2888127 7.5,17.3246753 L8.5,17.4545455 C8.77614237,17.4904081 9,17.272365 9,16.9675325 L9,7.03246753 C9,6.72763504 8.77614237,6.5095919 8.5,6.54545455 L7.5,6.67532468 Z" />
-        : <path d="M7,4 L17,4 C18.1045695,4 19,4.8954305 19,6 L19,18 C19,19.1045695 18.1045695,20 17,20 L7,20 C5.8954305,20 5,19.1045695 5,18 L5,6 L5,6 C5,4.8954305 5.8954305,4 7,4 L7,4 Z M7.5,6 C7.22385763,6 7,6.22385763 7,6.5 L7,17.5 C7,17.7761424 7.22385763,18 7.5,18 L8.5,18 C8.77614237,18 9,17.7761424 9,17.5 L9,6.5 C9,6.22385763 8.77614237,6 8.5,6 L7.5,6 Z" />}
+      {expanded ? (
+        <path d="M16.701875,4.16415178 L17,4.14285714 C18.1045695,4.06395932 19,5.02334914 19,6.28571429 L19,17.7142857 C19,18.9766509 18.1045695,19.9360407 17,19.8571429 L16.701875,19.8358482 C16.8928984,19.371917 17,18.8348314 17,18.25 L17,5.75 C17,5.16516859 16.8928984,4.62808299 16.701875,4.16415178 Z M14,3.36363636 C15.1045695,3.16280555 16,4.15126779 16,5.57142857 L16,18.4285714 C16,19.8487322 15.1045695,20.8371945 14,20.6363636 L7,19.3636364 C5.8954305,19.1628055 5,18.1045695 5,17 L5,7 C5,5.8954305 5.8954305,4.83719445 7,4.63636364 L14,3.36363636 Z M7.5,6.67532468 C7.22385763,6.71118732 7,6.97574633 7,7.26623377 L7,16.7337662 C7,17.0242537 7.22385763,17.2888127 7.5,17.3246753 L8.5,17.4545455 C8.77614237,17.4904081 9,17.272365 9,16.9675325 L9,7.03246753 C9,6.72763504 8.77614237,6.5095919 8.5,6.54545455 L7.5,6.67532468 Z" />
+      ) : (
+        <path d="M7,4 L17,4 C18.1045695,4 19,4.8954305 19,6 L19,18 C19,19.1045695 18.1045695,20 17,20 L7,20 C5.8954305,20 5,19.1045695 5,18 L5,6 L5,6 C5,4.8954305 5.8954305,4 7,4 L7,4 Z M7.5,6 C7.22385763,6 7,6.22385763 7,6.5 L7,17.5 C7,17.7761424 7.22385763,18 7.5,18 L8.5,18 C8.77614237,18 9,17.7761424 9,17.5 L9,6.5 C9,6.22385763 8.77614237,6 8.5,6 L7.5,6 Z" />
+      )}
    </Icon>
  );
 }
--- a/app/components/Input/Input.js
+++ b/app/components/Input/Input.js
@@ -28,9 +28,7 @@ const RealInput = styled.input`
  }
 `;

-const Wrapper = styled.div`
-
-`;
+const Wrapper = styled.div``;

 export const Outline = styled(Flex)`
  display: flex;
@@ -44,7 +42,7 @@ export const Outline = styled(Flex)`
  font-weight: normal;

  &:focus {
-    border-color: ${color.slate}
+    border-color: ${color.slate};
  }
 `;

--- a/app/components/Key/key.js
+++ b/app/components/Key/key.js
@@ -5,7 +5,8 @@ import { color } from 'shared/styles/constants';
 const Key = styled.kbd`
  display: inline-block;
  padding: 4px 6px;
-  font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  font: 11px 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
+    monospace;
  line-height: 10px;
  color: ${color.text};
  vertical-align: middle;
--- a/app/components/Labeled/Labeled.js
+++ b/app/components/Labeled/Labeled.js
@@ -18,11 +18,11 @@ const Labeled = ({ label, children, ...props }: Props) => (
 );

 export const Label = styled(Flex)`
-  margin-bottom: ${size.medium};  
+  margin-bottom: ${size.medium};
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
-  color: #9FA6AB;
+  color: #9fa6ab;
  letter-spacing: 0.04em;
 `;

--- a/app/components/Layout/Layout.js
+++ b/app/components/Layout/Layout.js
@@ -43,7 +43,8 @@ type Props = {
  notifications?: React.Element<any>,
 };

-@observer class Layout extends React.Component {
+@observer
+class Layout extends React.Component {
  props: Props;
  scrollable: ?HTMLDivElement;

@@ -117,41 +118,42 @@ type Props = {
        <Flex auto>
          {auth.authenticated &&
            user &&
-            team &&
-            <Sidebar column editMode={ui.editMode}>
-              <AccountMenu
-                label={
-                  <HeaderBlock user={user} team={team}>
-                    <Avatar src={user.avatarUrl} />
-                  </HeaderBlock>
-                }
-              />
+            team && (
+              <Sidebar column editMode={ui.editMode}>
+                <AccountMenu
+                  label={
+                    <HeaderBlock user={user} team={team}>
+                      <Avatar src={user.avatarUrl} />
+                    </HeaderBlock>
+                  }
+                />

-              <Flex auto column>
-                <Scrollable innerRef={this.setScrollableRef}>
-                  <LinkSection>
-                    <SidebarLink to="/dashboard" icon={<HomeIcon />}>
-                      Home
-                    </SidebarLink>
-                    <SidebarLink to="/search" icon={<SearchIcon />}>
-                      Search
-                    </SidebarLink>
-                    <SidebarLink to="/starred" icon={<StarredIcon />}>
-                      Starred
-                    </SidebarLink>
-                  </LinkSection>
-                  <LinkSection>
-                    <SidebarCollections
-                      history={this.props.history}
-                      location={this.props.location}
-                      activeDocument={documents.active}
-                      onCreateCollection={this.handleCreateCollection}
-                      activeDocumentRef={this.scrollToActiveDocument}
-                    />
-                  </LinkSection>
-                </Scrollable>
-              </Flex>
-            </Sidebar>}
+                <Flex auto column>
+                  <Scrollable innerRef={this.setScrollableRef}>
+                    <LinkSection>
+                      <SidebarLink to="/dashboard" icon={<HomeIcon />}>
+                        Home
+                      </SidebarLink>
+                      <SidebarLink to="/search" icon={<SearchIcon />}>
+                        Search
+                      </SidebarLink>
+                      <SidebarLink to="/starred" icon={<StarredIcon />}>
+                        Starred
+                      </SidebarLink>
+                    </LinkSection>
+                    <LinkSection>
+                      <SidebarCollections
+                        history={this.props.history}
+                        location={this.props.location}
+                        activeDocument={documents.active}
+                        onCreateCollection={this.handleCreateCollection}
+                        activeDocumentRef={this.scrollToActiveDocument}
+                      />
+                    </LinkSection>
+                  </Scrollable>
+                </Flex>
+              </Sidebar>
+            )}

          <Content auto justify="center" editMode={ui.editMode}>
            {this.props.children}
--- a/app/components/Layout/components/HeaderBlock.js
+++ b/app/components/Layout/components/HeaderBlock.js
@@ -43,14 +43,14 @@ const Header = styled(Flex)`

  &:active,
  &:hover {
-    background: rgba(0,0,0,.05);
+    background: rgba(0, 0, 0, 0.05);
  }

  &::after {
-    content: "";
+    content: '';
    left: 24px;
    right: 24px;
-    background: rgba(0,0,0,.075);
+    background: rgba(0, 0, 0, 0.075);
    height: 1px;
    position: absolute;
    bottom: 0;
--- a/app/components/Layout/components/Modals.js
+++ b/app/components/Layout/components/Modals.js
@@ -10,7 +10,8 @@ import DocumentDelete from 'scenes/DocumentDelete';
 import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
 import Settings from 'scenes/Settings';

-@observer class Modals extends Component {
+@observer
+class Modals extends Component {
  props: {
    ui: UiStore,
  };
--- a/app/components/Layout/components/SidebarCollections.js
+++ b/app/components/Layout/components/SidebarCollections.js
@@ -31,7 +31,8 @@ type Props = {
  ui: UiStore,
 };

-@observer class SidebarCollections extends Component {
+@observer
+class SidebarCollections extends Component {
  props: Props;

  render() {
@@ -61,13 +62,14 @@ type Props = {
          />
        ))}

-        {collections.isLoaded &&
+        {collections.isLoaded && (
          <SidebarLink
            onClick={this.props.onCreateCollection}
            icon={<PlusIcon />}
          >
            New collection…
-          </SidebarLink>}
+          </SidebarLink>
+        )}
      </Flex>
    );
  }
@@ -82,7 +84,8 @@ type CollectionLinkProps = {
  prefetchDocument: (id: string) => Promise<void>,
 };

-@observer class CollectionLink extends Component {
+@observer
+class CollectionLink extends Component {
  props: CollectionLinkProps;
  dropzoneRef;

@@ -133,7 +136,7 @@ type CollectionLinkProps = {
            </CollectionAction>
          </Flex>

-          {expanded &&
+          {expanded && (
            <Children column>
              {collection.documents.map(document => (
                <DocumentLink
@@ -146,7 +149,8 @@ type CollectionLinkProps = {
                  depth={0}
                />
              ))}
-            </Children>}
+            </Children>
+          )}
        </SidebarLink>
      </StyledDropToImport>
    );
@@ -172,11 +176,13 @@ const DocumentLink = observer(
  }: DocumentLinkProps) => {
    const isActiveDocument =
      activeDocument && activeDocument.id === document.id;
-    const showChildren = !!(activeDocument &&
+    const showChildren = !!(
+      activeDocument &&
      (activeDocument.pathToDocument
        .map(entry => entry.id)
        .includes(document.id) ||
-        isActiveDocument));
+        isActiveDocument)
+    );

    const handleMouseEnter = (event: SyntheticEvent) => {
      event.stopPropagation();
@@ -200,20 +206,22 @@ const DocumentLink = observer(
            to={document.url}
            expand={showChildren}
            expandedContent={
-              document.children.length
-                ? <Children column>
-                    {document.children.map(childDocument => (
-                      <DocumentLink
-                        key={childDocument.id}
-                        history={history}
-                        document={childDocument}
-                        activeDocument={activeDocument}
-                        prefetchDocument={prefetchDocument}
-                        depth={depth + 1}
-                      />
-                    ))}
-                  </Children>
-                : undefined
+              document.children.length ? (
+                <Children column>
+                  {document.children.map(childDocument => (
+                    <DocumentLink
+                      key={childDocument.id}
+                      history={history}
+                      document={childDocument}
+                      activeDocument={activeDocument}
+                      prefetchDocument={prefetchDocument}
+                      depth={depth + 1}
+                    />
+                  ))}
+                </Children>
+              ) : (
+                undefined
+              )
            }
          >
            {document.title}
@@ -228,10 +236,14 @@ const CollectionAction = styled.a`
  position: absolute;
  right: 0;
  color: ${color.slate};
-  svg { opacity: .75; }
+  svg {
+    opacity: 0.75;
+  }

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

--- a/app/components/Layout/components/SidebarLink.js
+++ b/app/components/Layout/components/SidebarLink.js
@@ -17,7 +17,7 @@ const StyledGoTo = styled(CollapsedIcon)`
  margin-bottom: -4px;
  margin-left: 1px;
  margin-right: -3px;
-  ${({ expanded }) => !expanded && 'transform: rotate(-90deg);'}
+  ${({ expanded }) => !expanded && 'transform: rotate(-90deg);'};
 `;

 const IconWrapper = styled.span`
@@ -55,7 +55,8 @@ type Props = {
  iconColor?: string,
 };

-@observer class SidebarLink extends Component {
+@observer
+class SidebarLink extends Component {
  props: Props;
  @observable expanded: boolean = false;

@@ -67,13 +68,15 @@ type Props = {
    if (nextProps.expand) this.handleExpand();
  }

-  @action handleClick = (event: SyntheticEvent) => {
+  @action
+  handleClick = (event: SyntheticEvent) => {
    event.preventDefault();
    event.stopPropagation();
    this.expanded = !this.expanded;
  };

-  @action handleExpand = () => {
+  @action
+  handleExpand = () => {
    this.expanded = true;
  };

@@ -91,8 +94,9 @@ type Props = {
          exact
        >
          {icon && <IconWrapper>{icon}</IconWrapper>}
-          {expandedContent &&
-            <StyledGoTo expanded={this.expanded} onClick={this.handleClick} />}
+          {expandedContent && (
+            <StyledGoTo expanded={this.expanded} onClick={this.handleClick} />
+          )}
          <Content onClick={this.handleExpand}>{children}</Content>
        </Component>
        {this.expanded && expandedContent}
--- a/app/components/LoadingIndicator/LoadingIndicator.js
+++ b/app/components/LoadingIndicator/LoadingIndicator.js
@@ -2,7 +2,8 @@
 import React from 'react';
 import { inject, observer } from 'mobx-react';

-@observer class LoadingIndicator extends React.Component {
+@observer
+class LoadingIndicator extends React.Component {
  componentDidMount() {
    this.props.ui.enableProgressBar();
  }
--- a/app/components/LoadingIndicator/LoadingIndicatorBar.js
+++ b/app/components/LoadingIndicator/LoadingIndicatorBar.js
@@ -20,7 +20,7 @@ const Container = styled.div`
  top: 0;
  z-index: 9999;

-  background-color: #03A9F4;
+  background-color: #03a9f4;
  width: 100%;
  animation: ${loadingFrame} 4s ease-in-out infinite;
  animation-delay: 250ms;
@@ -30,7 +30,7 @@ const Container = styled.div`
 const Loader = styled.div`
  width: 100%;
  height: 2px;
-  background-color: #03A9F4;
+  background-color: #03a9f4;
 `;

 export default LoadingIndicatorBar;
--- a/app/components/Modal/Modal.js
+++ b/app/components/Modal/Modal.js
@@ -43,7 +43,9 @@ const Modal = ({
    >
      <Content column>
        {title && <h1>{title}</h1>}
-        <Close onClick={onRequestClose}><CloseIcon size={32} /></Close>
+        <Close onClick={onRequestClose}>
+          <CloseIcon size={32} />
+        </Close>
        {children}
      </Content>
    </StyledModal>
@@ -79,7 +81,7 @@ const Close = styled.a`
  position: fixed;
  top: 3rem;
  right: 3rem;
-  opacity: .5;
+  opacity: 0.5;
  color: ${color.text};

  &:hover {
--- a/app/components/PageTitle/PageTitle.js
+++ b/app/components/PageTitle/PageTitle.js
@@ -7,7 +7,9 @@ type Props = {
 };

 const PageTitle = ({ title }: Props) => (
-  <Helmet><title>{`${title} - Outline`}</title></Helmet>
+  <Helmet>
+    <title>{`${title} - Outline`}</title>
+  </Helmet>
 );

 export default PageTitle;
--- a/app/components/Popover/Popover.js
+++ b/app/components/Popover/Popover.js
@@ -30,18 +30,19 @@ const StyledPopover = styled(BoundlessPopover)`
    position: absolute;

    polygon:first-child {
-      fill: rgba(0,0,0,.075);
+      fill: rgba(0, 0, 0, 0.075);
    }
    polygon {
-      fill: #FFF;
+      fill: #fff;
    }
  }
 `;

 const Dialog = styled.div`
  outline: none;
-  background: #FFF;
-  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 8px 16px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.1);
+  background: #fff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.1),
+    0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  line-height: 1.5;
  padding: 16px;
--- a/app/components/SlackAuthLink/SlackAuthLink.js
+++ b/app/components/SlackAuthLink/SlackAuthLink.js
@@ -10,7 +10,8 @@ type Props = {
  redirectUri: string,
 };

-@observer class SlackAuthLink extends React.Component {
+@observer
+class SlackAuthLink extends React.Component {
  props: Props;

  static defaultProps = {
--- a/app/components/Toasts/Toasts.js
+++ b/app/components/Toasts/Toasts.js
@@ -5,7 +5,8 @@ import styled from 'styled-components';
 import { layout } from 'shared/styles/constants';
 import Toast from './components/Toast';

-@observer class Toasts extends Component {
+@observer
+class Toasts extends Component {
  handleClose = index => {
    this.props.errors.remove(index);
  };