Collection Create is a modal

client/modules/User/components/CollectionCreate.jsx

@@ -61,15 +61,10 @@ class CollectionCreate extends React.Component {
     const invalid = name === '' || name == null;
 
     return (
-      <section className="dashboard-header">
+      <div className="collection-create">
         <Helmet>
           <title>{this.getTitle()}</title>
         </Helmet>
-
-        <div className="dashboard-header__header">
-          <h2 className="dashboard-header__header__title">Create collection</h2>
-        </div>
-        <div className="dashboard-content">
         <div className="sketches-table-container">
           <form className="form" onSubmit={this.handleCreateCollection}>
             {creationError && <span className="form-error">Couldn&apos;t create collection</span>}
@@ -103,7 +98,6 @@ class CollectionCreate extends React.Component {
           </form>
         </div>
       </div>
-      </section>
     );
   }
 }

client/modules/User/pages/DashboardView.jsx

@@ -5,12 +5,14 @@ import { bindActionCreators } from 'redux';
 import { browserHistory, Link } from 'react-router';
 import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions';
 import Nav from '../../../components/Nav';
+import Overlay from '../../App/components/Overlay';
 
 import AssetList from '../../IDE/components/AssetList';
 import CollectionList from '../../IDE/components/CollectionList';
 import SketchList from '../../IDE/components/SketchList';
 import Searchbar from '../../IDE/components/Searchbar';
 
+import CollectionCreate from '../components/CollectionCreate';
 import DashboardTabSwitcher, { TabKey } from '../components/DashboardTabSwitcher';
 
 class DashboardView extends React.Component {
@@ -60,6 +62,15 @@ class DashboardView extends React.Component {
     return this.props.user.username === this.props.params.username;
   }
 
+  isCollectionCreate() {
+    const path = this.props.location.pathname;
+    return /collections\/create$/.test(path);
+  }
+
+  returnToDashboard = () => {
+    browserHistory.push(`/${this.ownerName()}/collections`);
+  }
+
   renderActionButton(tabKey, username) {
     if (!this.isOwner()) {
       return null;
@@ -111,6 +122,14 @@ class DashboardView extends React.Component {
             {this.renderContent(currentTab, username)}
           </div>
         </section>
+        {this.isCollectionCreate() &&
+          <Overlay
+            title="Create collection"
+            closeOverlay={this.returnToDashboard}
+          >
+            <CollectionCreate />
+          </Overlay>
+        }
       </div>
     );
   }

client/routes.jsx

@@ -46,7 +46,7 @@ const routes = store => (
     <Route path="/:username/sketches/:project_id/add-to-collection" component={IDEView} />
     <Route path="/:username/sketches" component={DashboardView} />
     <Route path="/:username/collections" component={DashboardView} />
-    <Route path="/:username/collections/create" component={CollectionView} />
+    <Route path="/:username/collections/create" component={DashboardView} />
     <Route path="/:username/collections/:collection_id" component={CollectionView} />
     <Route path="/about" component={IDEView} />
     <Route path="/feedback" component={IDEView} />

client/styles/components/_collection-create.scss

@@ -0,0 +1,3 @@
+.collection-create {
+  padding: #{24 / $base-font-size}rem;
+}

client/styles/main.scss

@@ -50,6 +50,7 @@
 @import 'components/dashboard-header';
 @import 'components/editable-input';
 @import 'components/collection';
+@import 'components/collection-create';
 
 @import 'layout/dashboard';
 @import 'layout/ide';