createnewmodal: change ux

src/components/CreateNewModal.jsx

@@ -2,9 +2,9 @@ import { h, Component } from 'preact';
 import Modal from './Modal';
 import { ItemTile } from './ItemTile';
 import templates from '../templateList';
-import { Divider } from './common';
+import { BetaTag } from './common';
-import Switch from './Switch';
 import { trackEvent } from '../analytics';
+import Tabs, { TabPanel } from './Tabs';
 
 export class CreateNewModal extends Component {
 	constructor(props) {
@@ -30,10 +30,7 @@ export class CreateNewModal extends Component {
 			onImportGithubRepoSelect,
 			onTemplateSelect
 		} = this.props;
-		return (
+		const option1 = (
-			<Modal show={show} closeHandler={closeHandler}>
-				<h1 class="mt-0">Create New</h1>
-				<div class="flex">
 			<div style="flex:1;" class="tac">
 				<svg
 					width="287px"
@@ -45,6 +42,7 @@ export class CreateNewModal extends Component {
 					onClick={() => {
 						this.setState({ isFileModeSelected: false });
 					}}
+					aria-hidden="true"
 				>
 					<g
 						id="Page-1"
@@ -54,42 +52,21 @@ export class CreateNewModal extends Component {
 						fill-rule="evenodd"
 					>
 						<g id="codepane" fill="#C5C5C5">
-									<rect
+							<rect id="Rectangle" x="0" y="0" width="89" height="80" rx="5" />
-										id="Rectangle"
-										x="0"
-										y="0"
-										width="89"
-										height="80"
-										rx="5"
-									/>
 						</g>
 						<g
 							id="codepane"
 							transform="translate(99.000000, 0.000000)"
 							fill="#C5C5C5"
 						>
-									<rect
+							<rect id="Rectangle" x="0" y="0" width="89" height="80" rx="5" />
-										id="Rectangle"
-										x="0"
-										y="0"
-										width="89"
-										height="80"
-										rx="5"
-									/>
 						</g>
 						<g
 							id="codepane"
 							transform="translate(198.000000, 0.000000)"
 							fill="#C5C5C5"
 						>
-									<rect
+							<rect id="Rectangle" x="0" y="0" width="89" height="80" rx="5" />
-										id="Rectangle"
-										x="0"
-										y="0"
-										width="89"
-										height="80"
-										rx="5"
-									/>
 						</g>
 						<g
 							id="codepane"
@@ -107,19 +84,13 @@ export class CreateNewModal extends Component {
 						</g>
 					</g>
 				</svg>
-						<p>
+				<p class="mb-0">
-							3 separate panes to write HTML, CSS and JavaScript. Good for
+					3 separate panes to write HTML, CSS and JavaScript. Good for quickly
-							quickly testing something.
+					testing something.
 				</p>
 			</div>
-					<div class="tac ml-2" style="margin-top:100px;">
+		);
-						<Switch
+		const option2 = (
-							checked={this.state.isFileModeSelected}
-							labels={['3 panes', 'Files (beta)']}
-							onChange={this.modeChangeHandler}
-							showBothLabels
-						/>
-					</div>
 			<div style="flex:1" class="tac ml-2">
 				<svg
 					width="286px"
@@ -131,6 +102,7 @@ export class CreateNewModal extends Component {
 					onClick={() => {
 						this.setState({ isFileModeSelected: true });
 					}}
+					aria-hidden="true"
 				>
 					<g
 						id="Page-1"
@@ -174,53 +146,74 @@ export class CreateNewModal extends Component {
 						</g>
 					</g>
 				</svg>
-						<p>
+				<p class="mb-0">
 					Manage your code in files. Just like you would have files on your
-							local machine.
+					local machine. <BetaTag />
 				</p>
 			</div>
-				</div>
+		);
-				<Divider />
 
-				<div class="tac">
+		return (
+			<Modal show={show} closeHandler={closeHandler}>
+				<h1 class="mt-0">Create New</h1>
+				<Tabs horizontal>
+					<TabPanel label={option1}>
+						<div class="d-f fxw-w">
 							<button
 								type="button"
 								class="btn btn--primary"
+								style="margin:20px 10px"
 								onClick={() => {
 									trackEvent('ui', 'startBlankBtnClick');
-							this.state.isFileModeSelected
+									onBlankTemplateSelect();
-								? onBlankFileTemplateSelect()
-								: onBlankTemplateSelect();
 								}}
 							>
 								Start Blank
 							</button>
-					<p>Or choose from a template:</p>
-					<div class="saved-items-pane__container">
 							{templates.map(template => {
-							if (
-								!this.state.isFileModeSelected ||
-								template.isFileModeSupported
-							) {
 								return (
 									<ItemTile
 										inline
 										item={template}
 										focusable
-										onClick={onTemplateSelect.bind(
+										onClick={onTemplateSelect.bind(null, template)}
-											null,
+									/>
-											template,
+								);
-											this.state.isFileModeSelected
+							})}
-										)}
+						</div>
+					</TabPanel>
+					<TabPanel label={option2}>
+						<div class="d-f fxw-w">
+							<button
+								type="button"
+								class="btn btn--primary"
+								style="margin:20px 10px"
+								onClick={() => {
+									trackEvent('ui', 'startBlankFileBtnClick');
+									onBlankFileTemplateSelect();
+								}}
+							>
+								Start Blank in File Mode
+							</button>
+							{templates.map(template => {
+								if (template.isFileModeSupported) {
+									return (
+										<ItemTile
+											inline
+											item={template}
+											focusable
+											onClick={onTemplateSelect.bind(null, template, true)}
 										/>
 									);
 								}
 							})}
 						</div>
-				</div>
+					</TabPanel>
-				<div class="tac">
+				</Tabs>
+
+				{/*<div class="tac">
 					<p>
-						{/*<button
+						<button
 							className="btn"
 							onClick={() =>
 								this.setState({
@@ -229,7 +222,7 @@ export class CreateNewModal extends Component {
 							}
 						>
 							Import Github Repository
-						</button>*/}
+						</button>
 
 						{this.state.isGhRepoInputVisible ? (
 							<div>
@@ -245,7 +238,7 @@ export class CreateNewModal extends Component {
 							</div>
 						) : null}
 					</p>
-				</div>
+				</div>*/}
 			</Modal>
 		);
 	}

src/components/Tabs.jsx

@@ -1,8 +1,11 @@
 import { h, Component } from 'preact';
 
 function hyphenate(text) {
+	if (text.replace) {
 		return text.replace(/\s/g, '-');
 	}
+	return '';
+}
 const ID_PREFIX = 'tab-panel-';
 
 export function TabPanel({ label }) {
@@ -63,7 +66,7 @@ export default class Tabs extends Component {
 	render() {
 		const tabs = this.props.children;
 		return (
-			<div class="tabs">
+			<div class={`tabs ${this.props.horizontal ? 'tabs--horizontal' : ''}`}>
 				<div
 					class="tabs__tablist"
 					role="tablist"
@@ -79,8 +82,8 @@ export default class Tabs extends Component {
 					))}
 				</div>
 				<div class="tabs__tabpanel-wrap">
-					{tabs.map(
+					{tabs.map((child, index) =>
-						(child, index) => (this.state.selectedTab === index ? child : null)
+						this.state.selectedTab === index ? child : null
 					)}
 				</div>
 			</div>

src/components/common.jsx

@@ -36,3 +36,7 @@ export function AutoFocusInput(props) {
 export function Divider(props) {
 	return <div class={`divider ${props.vertical ? 'divider--vertical' : ''}`} />;
 }
+
+export function BetaTag() {
+	return <span class="beta-tag">Beta</span>;
+}

src/style.css

@@ -123,6 +123,12 @@ button {
 .jc-sb {
 	justify-content: space-between;
 }
+.fxd-c {
+	flex-direction: column;
+}
+.fxw-w {
+	flex-wrap: wrap;
+}
 
 .fr {
 	float: right;
@@ -1610,19 +1616,15 @@ body > #demo-frame {
 	display: inline-block;
 }
 
-/*
+.beta-tag {
-.web-maker-with-tag:after {
-	content: 'BETA';
-	position: relative;
-	left: 3px;
-	top: -7px;
 	border-radius: 4px;
-	background: #b76b29;
+	text-transform: uppercase;
+	background: #c68955;
 	color: white;
 	letter-spacing: 0.6px;
-	padding: 2px;
+	padding: 2px 5px;
-	font-size: 10px;
+	font-size: 0.9em;
-} */
+}
 
 .is-extension .web-maker-with-tag:after {
 	display: none;
@@ -1948,7 +1950,7 @@ while the theme CSS file is loading */
 	display: flex;
 }
 .tabs__tablist {
-	margin-right: 40px;
+	/* margin-right: 40px; */
 	flex-shrink: 0;
 }
 .tabs__tab {
@@ -1961,11 +1963,23 @@ while the theme CSS file is loading */
 	color: inherit;
 }
 .tabs__tab--selected {
-	background-color: rgba(0, 0, 0, 0.5);
+	background-color: rgba(0, 0, 0, 0.2);
 }
 .tabs__tabpanel-wrap {
 	flex: 1;
 }
+.tabs__tabpanel {
+	padding: 2em;
+	background-color: rgba(0, 0, 0, 0.2);
+	border-radius: 5px;
+}
+.tabs--horizontal {
+	flex-direction: column;
+}
+.tabs--horizontal .tabs__tablist {
+	display: flex;
+	justify-content: center;
+}
 
 @media screen and (max-width: 600px) {
 	body {