ui a11y improvements

src/components/ContentWrapFiles.jsx

@@ -20,6 +20,7 @@ import { Console } from './Console';
 import { SWITCH_FILE_EVENT } from '../commands';
 import { commandPaletteService } from '../commandPaletteService';
 import { PreviewDimension } from './PreviewDimension';
+import { FileIcon } from './FileIcon';
 
 const minCodeWrapSize = 33;
 const PREVIEW_FRAME_HOST = window.DEBUG
@@ -668,9 +669,10 @@ export default class ContentWrapFiles extends Component {
 							class="js-code-wrap__header  code-wrap__header"
 							title="Double click to toggle code pane"
 						>
-							<label class="btn-group" dropdow title="Click to change">
+							<div class="flex flex-v-center">
+								<FileIcon file={this.state.selectedFile} />
 								{this.state.selectedFile ? this.state.selectedFile.name : ''}
-							</label>
+							</div>
 							<div class="code-wrap__header-right-options">
 								<button
 									class="btn btn--dark"

src/components/FileIcon.jsx

@@ -2,6 +2,9 @@ import { h } from 'preact';
 import { getExtensionFromFileName } from '../fileUtils';
 
 export function FileIcon({ file }) {
+	if (!file) {
+		return null;
+	}
 	let path;
 	if (file.isFolder) {
 		if (!file.children.length) {

src/components/HelpModal.jsx

@@ -7,7 +7,7 @@ export function HelpModal(props) {
 		<Modal show={props.show} closeHandler={props.closeHandler}>
 			<h1>
 				<div class="web-maker-with-tag">Web Maker</div>
-				<small style="font-size:14px;">{props.version}</small>
+				<small style="font-size:14px;">{props.version} (beta)</small>
 			</h1>
 
 			<div>
@@ -25,7 +25,8 @@ export function HelpModal(props) {
 				<p>
 					<a href="/docs" target="_blank" rel="noopener noreferrer">
 						Read the documentation
-					</a>.
+					</a>
+					.
 				</p>
 				<p>
 					Tweet out your feature requests, comments & suggestions to{' '}
@@ -35,7 +36,8 @@ export function HelpModal(props) {
 						href="https://twitter.com/webmakerApp"
 					>
 						@webmakerApp
-					</a>.
+					</a>
+					.
 				</p>
 				<p class="show-when-extension">
 					Like this extension? Please{' '}
@@ -45,7 +47,8 @@ export function HelpModal(props) {
 						rel="noopener noreferrer"
 					>
 						rate it here
-					</a>.
+					</a>
+					.
 				</p>
 				<p>
 					<Button
@@ -57,7 +60,8 @@ export function HelpModal(props) {
 					>
 						<svg>
 							<use xlinkHref="#gift-icon" />
-						</svg>Support the developer
+						</svg>
+						Support the developer
 					</Button>{' '}
 					<a
 						aria-label="Rate Web Maker"
@@ -68,7 +72,8 @@ export function HelpModal(props) {
 					>
 						<svg>
 							<use xlinkHref="#heart-icon" />
-						</svg>Review Web Maker
+						</svg>
+						Review Web Maker
 					</a>{' '}
 					<a
 						aria-label="Chat"
@@ -79,7 +84,8 @@ export function HelpModal(props) {
 					>
 						<svg>
 							<use xlinkHref="#chat-icon" />
-						</svg>Chat
+						</svg>
+						Chat
 					</a>{' '}
 					<a
 						aria-label="Report a Bug"
@@ -90,7 +96,8 @@ export function HelpModal(props) {
 					>
 						<svg>
 							<use xlinkHref="#bug-icon" />
-						</svg>Report a bug
+						</svg>
+						Report a bug
 					</a>
 				</p>
 
@@ -200,7 +207,8 @@ export function HelpModal(props) {
 						rel="noopener noreferrer"
 					>
 						MIT License
-					</a>.
+					</a>
+					.
 				</p>
 			</div>
 		</Modal>

src/components/Settings.jsx

@@ -125,6 +125,9 @@ export default class Settings extends Component {
 								</label>
 							</div>
 						</div>
+
+						<Divider />
+
 						<label class="line" title="">
 							Indentation Size
 							<div>

src/components/SidePane.jsx

@@ -110,13 +110,12 @@ function Folder(props) {
 		<div>
 			<File {...props} file={props.file} />
 			<div class="sidebar__folder-wrap" data-collapsed={props.file.isCollapsed}>
-				{props.file.children.map(
+				{props.file.children.map(childFile =>
-					childFile =>
+					childFile.isFolder ? (
-						childFile.isFolder ? (
+						<Folder {...props} file={childFile} />
-							<Folder {...props} file={childFile} />
+					) : (
-						) : (
+						<File {...props} file={childFile} />
-							<File {...props} file={childFile} />
+					)
-						)
 				)}
 			</div>
 		</div>
@@ -237,7 +236,7 @@ export class SidePane extends Component {
 				onDragOver={this.dragOverHandler.bind(this)}
 				onDrop={this.dropHandler.bind(this)}
 			>
-				<div class="flex jc-sb" style="padding: 5px 4px">
+				<div class="flex jc-sb" style="padding: 5px 10px">
 					Files
 					<div class="flex flex-v-center">
 						<button
@@ -281,13 +280,12 @@ export class SidePane extends Component {
 						/>
 					</div>
 				) : null}
-				{files.map(
+				{files.map(file =>
-					file =>
+					file.isFolder ? (
-						file.isFolder ? (
+						<Folder {...this.props} {...moreProps} file={file} />
-							<Folder {...this.props} {...moreProps} file={file} />
+					) : (
-						) : (
+						<File {...this.props} {...moreProps} file={file} />
-							<File {...this.props} {...moreProps} file={file} />
+					)
-						)
 				)}
 			</div>
 		);

src/components/app.jsx

@@ -77,7 +77,7 @@ const LocalStorageKeys = {
 	ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations'
 };
 const UNSAVED_WARNING_COUNT = 15;
-const version = '3.6.2';
+const version = '4.0.0';
 
 export default class App extends Component {
 	constructor() {

src/style.css

@@ -9,9 +9,15 @@
 	--color-form-control-bg: #2c214b;
 
 	--footer-height: 37px;
-	--console-height: 30px;
+	--console-height: 32px;
+
+	--duration-modal-show: 0.3s;
+	--duration-modal-overlay-show: 0.2s;
 }
 
+html {
+	font-size: 1em;
+}
 body {
 	margin: 0;
 	padding: 0;
@@ -19,7 +25,6 @@ body {
 	background: var(--color-bg);
 	color: rgba(255, 255, 255, 0.9);
 	min-height: 100vh;
-	font-size: 87.5%;
 	/* speocifically for mobile when keyboard is open */
 	position: relative;
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
@@ -244,7 +249,7 @@ label {
 }
 
 a > svg {
-	fill: rgba(255, 255, 255, 0.2);
+	fill: rgba(255, 255, 255, 0.35);
 }
 
 .hidden-select {
@@ -560,7 +565,7 @@ body:not(.light-version).overlay-visible .main-container {
 	background: rgba(0, 0, 0, 0.2);
 	color: #888;
 	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-	font-weight: bold;
+	font-weight: 600;
 	user-select: none;
 }
 
@@ -605,12 +610,12 @@ body:not(.light-version).overlay-visible .main-container {
 
 .code-wrap__collapse-btn:before {
 	/* maximize icon */
-	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z" /></svg>');
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.35)" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z" /></svg>');
 }
 
 .is-maximized .code-wrap__collapse-btn:before {
 	/* minimize icon */
-	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z" /></svg>');
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.35)" d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z" /></svg>');
 }
 
 @keyframes pop-in {
@@ -690,7 +695,7 @@ li.CodeMirror-hint-active {
 #demo-frame {
 	border: 0;
 	width: 100%;
-	height: calc(100% - 29px);
+	height: calc(100% - var(--console-height));
 	/*  minus minimized console height */
 	position: absolute;
 	z-index: 1;
@@ -730,9 +735,9 @@ body > #demo-frame {
 .btn--dark,
 .main-header__btn-wrap > button {
 	box-sizing: content-box;
-	text-transform: uppercase;
+	/* text-transform: uppercase; */
-	font-size: 12px;
+	/* font-size: 0.875rem; */
-	font-weight: bold;
+	font-weight: 500;
 	line-height: 20px;
 	height: 20px;
 	letter-spacing: 0.6px;
@@ -950,15 +955,16 @@ body > #demo-frame {
 	box-sizing: border-box;
 	overflow-y: auto;
 	pointer-events: auto;
-	transform: translateY(50px) scale(0.95);
+	transform: scale(0.98);
-	animation: anim-modal 300ms ease forwards;
+	animation: anim-modal var(--duration-modal-show) cubic-bezier(0.4, 0, 0.2, 1)
-	animation-delay: 150ms;
+		forwards;
+	/* animation-delay: 150ms; */
 }
 
 @keyframes anim-modal {
 	to {
 		opacity: 1;
-		transform: translateY(0) scale(1);
+		transform: scale(1);
 	}
 }
 
@@ -989,7 +995,7 @@ body > #demo-frame {
 	opacity: 0;
 	will-change: opacity;
 	background: rgba(0, 0, 0, 0.6);
-	transition: opacity 0.3s;
+	transition: opacity var(--duration-modal-overlay-show);
 }
 
 /* Make settings modal smaller */
@@ -1194,7 +1200,7 @@ body > #demo-frame {
 .saved-item-tile__meta {
 	margin-top: 8px;
 	pointer-events: none;
-	opacity: 0.3;
+	opacity: 0.6;
 }
 
 .saved-items-pane__container {
@@ -1418,7 +1424,7 @@ body > #demo-frame {
 	background: rgba(255, 255, 255, 0.53);
 	border-radius: 5px;
 	padding: 1px 6px;
-	font-weight: bold;
+	font-weight: 600;
 }
 
 .onboard-step {
@@ -1510,7 +1516,7 @@ body > #demo-frame {
 }
 
 .console.is-minimized {
-	transform: translateY(calc(100% - 29px));
+	transform: translateY(calc(100% - var(--console-height)));
 }
 
 .console__log {