From e42043aad70cfdfd8bd1f60b91d2b9f128ff4b61 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Sat, 2 Mar 2019 23:49:26 +0530
Subject: [PATCH] createnewmodal: refactor ui

---
 src/components/CreateNewModal.jsx | 57 ++++++++++++++++++++-----------
 src/components/common.jsx         |  2 +-
 src/style.css                     | 10 ++++--
 3 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/src/components/CreateNewModal.jsx b/src/components/CreateNewModal.jsx
index dcd4448..088c4bc 100644
--- a/src/components/CreateNewModal.jsx
+++ b/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>
 		);
 	}
diff --git a/src/components/common.jsx b/src/components/common.jsx
index 90e7b31..eb13646 100644
--- a/src/components/common.jsx
+++ b/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' : ''}`} />;
 }
diff --git a/src/style.css b/src/style.css
index 1438168..d123fa6 100644
--- a/src/style.css
+++ b/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;