WIP

frontend/components/Layout/components/Modals.js

@@ -1,7 +1,7 @@
 // @flow
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
-import Modal from 'components/Modal';
+import BaseModal from 'components/Modal';
 import UiStore from 'stores/UiStore';
 import CollectionNew from 'scenes/CollectionNew';
 import CollectionEdit from 'scenes/CollectionEdit';
@@ -22,48 +22,36 @@ import Settings from 'scenes/Settings';
   render() {
     const { activeModalName, activeModalProps } = this.props.ui;
 
+    const Modal = ({ name, children, ...rest }) => {
+      return (
+        <BaseModal
+          isOpen={activeModalName === name}
+          onRequestClose={this.handleClose}
+          {...rest}
+        >
+          {React.cloneElement(children, activeModalProps)}
+        </BaseModal>
+      );
+    };
+
     return (
       <span>
-        <Modal
-          isOpen={activeModalName === 'collection-new'}
-          onRequestClose={this.handleClose}
-          title="Create a collection"
-        >
-          <CollectionNew onSubmit={this.handleClose} {...activeModalProps} />
+        <Modal name="collection-new" title="Create a collection">
+          <CollectionNew onSubmit={this.handleClose} />
         </Modal>
-        <Modal
-          isOpen={activeModalName === 'collection-edit'}
-          onRequestClose={this.handleClose}
-          title="Edit collection"
-        >
-          <CollectionEdit onSubmit={this.handleClose} {...activeModalProps} />
+        <Modal name="collection-edit" title="Edit collection">
+          <CollectionEdit onSubmit={this.handleClose} />
         </Modal>
-        <Modal
-          isOpen={activeModalName === 'collection-delete'}
-          onRequestClose={this.handleClose}
-          title="Delete collection"
-        >
-          <CollectionDelete onSubmit={this.handleClose} {...activeModalProps} />
+        <Modal name="collection-delete" title="Delete collection">
+          <CollectionDelete onSubmit={this.handleClose} />
         </Modal>
-        <Modal
-          isOpen={activeModalName === 'document-delete'}
-          onRequestClose={this.handleClose}
-          title="Delete document"
-        >
-          <DocumentDelete onSubmit={this.handleClose} {...activeModalProps} />
+        <Modal name="document-delete" title="Delete document">
+          <DocumentDelete onSubmit={this.handleClose} />
         </Modal>
-        <Modal
-          isOpen={activeModalName === 'keyboard-shortcuts'}
-          onRequestClose={this.handleClose}
-          title="Keyboard shortcuts"
-        >
+        <Modal name="keyboard-shortcuts" title="Keyboard shortcuts">
           <KeyboardShortcuts />
         </Modal>
-        <Modal
-          isOpen={activeModalName === 'settings'}
-          onRequestClose={this.handleClose}
-          title="Settings"
-        >
+        <Modal name="settings" title="Settings">
           <Settings />
         </Modal>
       </span>

frontend/scenes/CollectionEdit/CollectionEdit.js

@@ -48,7 +48,7 @@ type Props = {
       <Flex column>
         <form onSubmit={this.handleSubmit}>
           <HelpText>
-            You can edit a collections name at any time, however doing so might
+            You can edit a collection's name at any time, however doing so might
             confuse your team mates.
           </HelpText>
           <Input