Removed custom Flex component

frontend/components/Flex.js

@@ -1,34 +0,0 @@
-import React from 'react';
-
-const Flex = (props) => {
-  const style = {
-    display: 'flex',
-    flex: props.flex ? '1' : null,
-    flexDirection: props.direction,
-    justifyContent: props.justify,
-    alignItems: props.align,
-  };
-
-  return (
-    <div style={ style } {...props}>
-      { props.children }
-    </div>
-  );
-};
-
-Flex.defaultProps = {
-  direction: 'row',
-  justify: null,
-  align: null,
-  flex: null,
-};
-
-Flex.propTypes = {
-  children: React.PropTypes.node,
-  direction: React.PropTypes.string,
-  justify: React.PropTypes.string,
-  align: React.PropTypes.string,
-  flex: React.PropTypes.bool,
-};
-
-export default Flex;

frontend/components/Layout/Layout.js

@@ -6,7 +6,7 @@ import keydown from 'react-keydown';
 import _ from 'lodash';
 
 import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
-import Flex from 'components/Flex';
+import { Flex } from 'reflexbox';
 import LoadingIndicator from 'components/LoadingIndicator';
 import Alert from 'components/Alert';
 import { Avatar } from 'rebass';
@@ -66,7 +66,7 @@ class Layout extends React.Component {
               { this.props.title && (<span>&nbsp;/&nbsp;</span>) }{ this.props.title }
             </span>
           </div>
-          <Flex direction="row" className={ styles.headerRight }>
+          <Flex className={ styles.headerRight }>
             <Flex align="center" className={ styles.actions }>
               { this.props.actions }
             </Flex>

frontend/components/PublishingInfo/PublishingInfo.js

@@ -2,7 +2,7 @@ import React from 'react';
 import moment from 'moment';
 
 import { Avatar } from 'rebass';
-import Flex from 'components/Flex';
+import { Flex } from 'reflexbox';
 
 import styles from './PublishingInfo.scss';
 
@@ -29,4 +29,4 @@ PublishingInfo.propTypes = {
   updatedAt: React.PropTypes.string.isRequired,
 };
 
-export default PublishingInfo;
+export default PublishingInfo;

frontend/scenes/Atlas/Atlas.js

@@ -12,7 +12,7 @@ import CenteredContent from 'components/CenteredContent';
 import DocumentList from 'components/DocumentList';
 import Divider from 'components/Divider';
 import DropdownMenu, { MenuItem, MoreIcon } from 'components/DropdownMenu';
-import Flex from 'components/Flex';
+import { Flex } from 'reflexbox';
 
 import styles from './Atlas.scss';
 
@@ -53,7 +53,7 @@ class Atlas extends React.Component {
 
     if (collection) {
       actions = (
-        <Flex direction="row">
+        <Flex>
           <DropdownMenu label={ <MoreIcon /> } >
             <MenuItem onClick={ this.onCreate }>
               New document

frontend/scenes/Dashboard/Dashboard.js

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 
 import store from './DashboardStore';
 
-import Flex from 'components/Flex';
+import { Flex } from 'reflexbox';
 import Layout from 'components/Layout';
 import AtlasPreview from 'components/AtlasPreview';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
@@ -35,7 +35,7 @@ class Dashboard extends React.Component {
 
   render() {
     const actions = (
-      <Flex direction="row">
+      <Flex>
         <DropdownMenu label={ <MoreIcon /> } >
           <MenuItem onClick={ this.onClickNewAtlas }>
             New Atlas
@@ -45,7 +45,7 @@ class Dashboard extends React.Component {
     );
 
     return (
-      <Flex flex>
+      <Flex auto>
         <Layout
           actions={ actions }
         >

frontend/scenes/DocumentEdit/DocumentEdit.js

@@ -9,7 +9,7 @@ import DocumentEditStore, {
 
 import Switch from 'components/Switch';
 import Layout, { Title, HeaderAction, SaveAction } from 'components/Layout';
-import Flex from 'components/Flex';
+import { Flex } from 'reflexbox';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 import CenteredContent from 'components/CenteredContent';
 import DropdownMenu, { MenuItem, MoreIcon } from 'components/DropdownMenu';
@@ -131,7 +131,7 @@ class DocumentEdit extends Component {
     let titleText = this.store.title;
 
     const actions = (
-      <Flex direction="row">
+      <Flex>
         <HeaderAction>
           <SaveAction
             onClick={ this.onSave }

frontend/scenes/Search/Search.js

@@ -2,12 +2,11 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import _debounce from 'lodash/debounce';
 
-import Flex from 'components/Flex';
+import { Flex } from 'reflexbox';
 import Layout from 'components/Layout';
 import CenteredContent from 'components/CenteredContent';
 import SearchField from './components/SearchField';
 import DocumentPreview from 'components/DocumentPreview';
-import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 
 import styles from './Search.scss';
 
@@ -35,11 +34,12 @@ class Search extends React.Component {
         loading={ this.store.isFetching }
       >
         <CenteredContent>
-          <Flex direction="column" flex={ true }>
+          <Flex column auto>
-            <Flex flex={ true }>
+            <Flex auto>
               <img
                 src={ require('assets/icons/search.svg') }
                 className={ styles.icon }
+                alt="Search"
               />
               <SearchField
                 searchTerm={ this.store.searchTerm }
@@ -47,7 +47,7 @@ class Search extends React.Component {
               />
             </Flex>
             { this.store.documents && this.store.documents.map((document) => {
-             return  (<DocumentPreview key={ document.id } document={ document } />);
+              return (<DocumentPreview key={ document.id } document={ document } />);
             }) }
           </Flex>
         </CenteredContent>

frontend/scenes/Search/components/SearchField/SearchField.js

@@ -1,8 +1,6 @@
 import React, { PropTypes } from 'react';
 import { observer } from 'mobx-react';
 
-import Flex from 'components/Flex';
-
 import styles from './SearchField.scss';
 
 @observer