Collection Create is a modal

client/modules/User/components/CollectionCreate.jsx

@@ -61,49 +61,43 @@ 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="sketches-table-container">
-        <div className="dashboard-header__header">
+          <form className="form" onSubmit={this.handleCreateCollection}>
-          <h2 className="dashboard-header__header__title">Create collection</h2>
+            {creationError && <span className="form-error">Couldn&apos;t create collection</span>}
+            <p className="form__field">
+              <label htmlFor="name" className="form__label">Collection name</label>
+              <input
+                className="form__input"
+                aria-label="name"
+                type="text"
+                id="name"
+                value={name}
+                placeholder={generatedCollectionName}
+                onChange={this.handleTextChange('name')}
+              />
+              {invalid && <span className="form-error">Collection name is required</span>}
+            </p>
+            <p className="form__field">
+              <label htmlFor="description" className="form__label">Description (optional)</label>
+              <textarea
+                className="form__input form__input-flexible-height"
+                aria-label="description"
+                type="text"
+                id="description"
+                value={description}
+                onChange={this.handleTextChange('description')}
+                placeholder="My fave sketches"
+                rows="4"
+              />
+            </p>
+            <input type="submit" disabled={invalid} value="Create collection" aria-label="create collection" />
+          </form>
         </div>
-        <div className="dashboard-content">
+      </div>
-          <div className="sketches-table-container">
-            <form className="form" onSubmit={this.handleCreateCollection}>
-              {creationError && <span className="form-error">Couldn&apos;t create collection</span>}
-              <p className="form__field">
-                <label htmlFor="name" className="form__label">Collection name</label>
-                <input
-                  className="form__input"
-                  aria-label="name"
-                  type="text"
-                  id="name"
-                  value={name}
-                  placeholder={generatedCollectionName}
-                  onChange={this.handleTextChange('name')}
-                />
-                {invalid && <span className="form-error">Collection name is required</span>}
-              </p>
-              <p className="form__field">
-                <label htmlFor="description" className="form__label">Description (optional)</label>
-                <textarea
-                  className="form__input form__input-flexible-height"
-                  aria-label="description"
-                  type="text"
-                  id="description"
-                  value={description}
-                  onChange={this.handleTextChange('description')}
-                  placeholder="My fave sketches"
-                  rows="4"
-                />
-              </p>
-              <input type="submit" disabled={invalid} value="Create collection" aria-label="create collection" />
-            </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';