createnewmodal: refactor ui

src/components/CreateNewModal.jsx

@@ -2,6 +2,7 @@ import { h, Component } from 'preact';
 import Modal from './Modal';
 import { ItemTile } from './ItemTile';
 import templates from '../templateList';
+import { Divider } from './common';
 
 export class CreateNewModal extends Component {
 	render() {
@@ -15,14 +16,44 @@ export class CreateNewModal extends Component {
 		} = this.props;
 		return (
 			<Modal show={show} closeHandler={closeHandler}>
+				<div class="flex">
+					<div>
+						<button className="btn" onClick={onBlankTemplateSelect}>
+							Start a blank creation
+						</button>
+						<p>
+							This gives you 3 separate panes to write HTML, CSS and JavaScript.
+							Good for quickly testing something.
+						</p>
+						<Divider />
+						Or choose from a template:
+						<div class="saved-items-pane__container">
+							{templates.map(template => (
+								<ItemTile
+									inline
+									item={template}
+									focusable
+									onClick={onTemplateSelect.bind(null, template)}
+								/>
+							))}
+						</div>
+					</div>
+					<div>
+						<Divider vertical />
+					</div>
+					<div>
+						<button className="btn" onClick={onBlankFileTemplateSelect}>
+							Start a blank creation with files (beta)
+						</button>
+						<p>
+							Manage your code in files. Just like you would have files on your
+							local machine.
+						</p>
+						<Divider />
+						Templates coming soon!
+					</div>
+				</div>
 				<div class="tac">
-					<button className="btn" onClick={onBlankTemplateSelect}>
-						Start a blank creation
-					</button>
-					<button className="btn" onClick={onBlankFileTemplateSelect}>
-						Start a blank files creation (beta)
-					</button>
-
 					<p>
 						{/*<button
 							className="btn"
@@ -50,18 +81,6 @@ export class CreateNewModal extends Component {
 						) : null}
 					</p>
 				</div>
-				<hr />
-				Or choose from a template:
-				<div class="saved-items-pane__container">
-					{templates.map(template => (
-						<ItemTile
-							inline
-							item={template}
-							focusable
-							onClick={onTemplateSelect.bind(null, template)}
-						/>
-					))}
-				</div>
 			</Modal>
 		);
 	}

src/components/common.jsx

@@ -34,5 +34,5 @@ export function AutoFocusInput(props) {
 }
 
 export function Divider(props) {
-	return <div class="divider" />;
+	return <div class={`divider ${props.vertical ? 'divider--vertical' : ''}`} />;
 }

src/style.css

@@ -218,11 +218,15 @@ label {
 	cursor: pointer;
 }
 .divider {
-	margin: 10px 0;
+	margin: 1rem 2rem;
 	height: 1px;
-	background: rgba(255, 255, 255, 0.1);
+	background: rgba(255, 255, 255, 0.15);
+}
+.divider--vertical {
+	width: 1px;
+	height: 100%;
+	margin: 2rem 1rem;
 }
-
 [class*='hint--']:after {
 	text-transform: none;
 	font-weight: normal;