Fixed linting errors and warnings

frontend/components/Document/Document.js

@@ -2,11 +2,13 @@
 import React from 'react';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react';
-import type { Document as DocumentType } from 'types';
+
 import PublishingInfo from '../PublishingInfo';
 import styles from './Document.scss';
 import DocumentHtml from './components/DocumentHtml';
 
+import type { Document as DocumentType } from 'types';
+
 @observer class Document extends React.Component {
   props: {
     document: DocumentType,

frontend/components/DocumentPreview/DocumentPreview.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import { toJS } from 'mobx';
-
 import { Link } from 'react-router';
 
-import PublishingInfo from 'components/PublishingInfo';
-
 import styles from './DocumentPreview.scss';
 
+import PublishingInfo from 'components/PublishingInfo';
+
 class Document extends React.Component {
   static propTypes = {
     document: React.PropTypes.object.isRequired,

frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.js

@@ -2,8 +2,14 @@ import React from 'react';
 
 import styles from './MoreIcon.scss';
 
-const MoreIcon = props => {
-  return <img src={require('./assets/more.svg')} className={styles.icon} />;
+const MoreIcon = () => {
+  return (
+    <img
+      alt="More"
+      src={require('./assets/more.svg')}
+      className={styles.icon}
+    />
+  );
 };
 
 export default MoreIcon;

frontend/components/Layout/Layout.js

@@ -5,11 +5,11 @@ import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import keydown from 'react-keydown';
 import _ from 'lodash';
+import { Flex } from 'reflexbox';
 
 import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
-import { Flex } from 'reflexbox';
+
 import LoadingIndicator from 'components/LoadingIndicator';
-import Alert from 'components/Alert';
 
 import styles from './Layout.scss';
 import classNames from 'classnames/bind';

frontend/components/Layout/components/Title/Title.js

@@ -1,16 +1,16 @@
+// @flow
 import React from 'react';
 import _ from 'lodash';
+import styled from 'styled-components';
 
-import styles from './Title.scss';
-import classNames from 'classnames/bind';
-const cx = classNames.bind(styles);
+type Props = {
+  children: string,
+  truncate?: number,
+  placeholder: string,
+};
 
 class Title extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.string,
-    truncate: React.PropTypes.number,
-    placeholder: React.PropTypes.string,
-  };
+  props: Props;
 
   render() {
     let title;
@@ -29,15 +29,16 @@ class Title extends React.Component {
     return (
       <span>
         {title && <span>&nbsp;/&nbsp;</span>}
-        <span
-          title={this.props.children}
-          className={cx(styles.title, { untitled: usePlaceholder })}
-        >
+        <TitleText title={this.props.children} untitled={usePlaceholder}>
           {title}
-        </span>
+        </TitleText>
       </span>
     );
   }
 }
 
+const TitleText = styled.span`
+  opacity: ${props => (props.untitled ? 0.5 : 1)};
+`;
+
 export default Title;

frontend/components/Layout/components/Title/Title.scss

@@ -1,7 +0,0 @@
-.title {
-
-}
-
-.untitled {
-  color: #ccc;
-}

frontend/components/Layout/components/Title/index.js

@@ -1,2 +1,3 @@
+// @flow
 import Title from './Title';
 export default Title;

frontend/components/Tree/Node.js

@@ -25,7 +25,7 @@ class Node extends React.Component {
           }}
           onClick={this.handleCollapse}
         >
-          <img src={require('./assets/chevron.svg')} />
+          <img alt="Expand" src={require('./assets/chevron.svg')} />
         </span>
       );
     }
@@ -82,7 +82,6 @@ class Node extends React.Component {
   };
 
   render() {
-    const tree = this.props.tree;
     const index = this.props.index;
     const dragging = this.props.dragging;
     const node = index.node;

frontend/components/Tree/UiTree.js

@@ -4,7 +4,7 @@ const Node = require('./Node');
 
 import styles from './Tree.scss';
 
-module.exports = React.createClass({
+export default React.createClass({
   displayName: 'UITree',
 
   propTypes: {
@@ -175,14 +175,14 @@ module.exports = React.createClass({
     } else if (diffY > dragging.h) {
       // down
       if (index.next) {
-        var below = tree.getIndex(index.next);
+        let below = tree.getIndex(index.next);
         if (below.children && below.children.length && !below.node.collapsed) {
           newIndex = tree.move(index.id, index.next, 'prepend');
         } else {
           newIndex = tree.move(index.id, index.next, 'after');
         }
       } else {
-        var below = tree.getNodeByTop(index.top + index.height);
+        let below = tree.getNodeByTop(index.top + index.height);
         if (below && below.parent !== index.id) {
           if (below.children && below.children.length) {
             newIndex = tree.move(index.id, below.id, 'prepend');