Distribute settings in categories and fixes in tab/switch

src/components/Settings.jsx

@@ -2,6 +2,7 @@ import { h, Component } from 'preact';
 import { editorThemes } from '../editorThemes';
 import Switch from './Switch';
 import Tabs, { TabPanel } from './Tabs';
+import { Divider } from './common';
 
 function CheckboxSetting({
 	title,
@@ -42,6 +43,56 @@ export default class Settings extends Component {
 				<h1>Settings</h1>
 
 				<Tabs>
+					<TabPanel label="General">
+						<CheckboxSetting
+							name="preserveLastCode"
+							title="Loads the last open creation when app starts"
+							label="Preserve last written code"
+							pref={prefs.preserveLastCode}
+							onChange={this.updateSetting.bind(this)}
+						/>
+						<Divider />
+						<CheckboxSetting
+							name="lightVersion"
+							title="Switch to lighter version for better performance. Removes things like blur etc."
+							label="Fast/light version"
+							pref={prefs.lightVersion}
+							onChange={this.updateSetting.bind(this)}
+						/>
+						<Divider />
+						<CheckboxSetting
+							name="autoPreview"
+							title="Refreshes the preview as you code. Otherwise use the Run button"
+							label="Auto-preview"
+							pref={prefs.autoPreview}
+							onChange={this.updateSetting.bind(this)}
+						/>
+						<Divider />
+						<CheckboxSetting
+							name="autoSave"
+							title="Auto-save keeps saving your code at regular intervals after you hit the first save manually"
+							label="Auto-save"
+							pref={prefs.autoSave}
+							onChange={this.updateSetting.bind(this)}
+						/>
+						<Divider />
+						<CheckboxSetting
+							name="replaceNewTab"
+							title="Turning this on will start showing Web Maker in every new tab you open"
+							label="Replace new tab page"
+							pref={prefs.replaceNewTab}
+							onChange={this.updateSetting.bind(this)}
+							showWhenExtension
+						/>
+						<Divider />
+						<CheckboxSetting
+							name="preserveConsoleLogs"
+							title="Preserves the console logs across your preview refreshes"
+							label="Preserve console logs"
+							pref={prefs.preserveConsoleLogs}
+							onChange={this.updateSetting.bind(this)}
+						/>
+					</TabPanel>
 					<TabPanel label="Indentation">
 						<div
 							class="line"
@@ -218,6 +269,7 @@ export default class Settings extends Component {
 									pref={prefs.lineWrap}
 									onChange={this.updateSetting.bind(this)}
 								/>
+								<Divider />
 								<CheckboxSetting
 									name="refreshOnResize"
 									title="Your Preview will refresh when you resize the preview split"
@@ -225,6 +277,7 @@ export default class Settings extends Component {
 									pref={prefs.refreshOnResize}
 									onChange={this.updateSetting.bind(this)}
 								/>
+								<Divider />
 								<CheckboxSetting
 									name="autoComplete"
 									title="Turns on the auto-completion suggestions as you type"
@@ -232,70 +285,25 @@ export default class Settings extends Component {
 									pref={prefs.autoComplete}
 									onChange={this.updateSetting.bind(this)}
 								/>
-								<CheckboxSetting
-									name="autoPreview"
-									title="Refreshes the preview as you code. Otherwise use the Run button"
-									label="Auto-preview"
-									pref={prefs.autoPreview}
-									onChange={this.updateSetting.bind(this)}
-								/>
-								<CheckboxSetting
-									name="autoSave"
-									title="Auto-save keeps saving your code at regular intervals after you hit the first save manually"
-									label="Auto-save"
-									pref={prefs.autoSave}
-									onChange={this.updateSetting.bind(this)}
-								/>
-								<CheckboxSetting
-									name="preserveLastCode"
-									title="Loads the last open creation when app starts"
-									label="Preserve last written code"
-									pref={prefs.preserveLastCode}
-									onChange={this.updateSetting.bind(this)}
-								/>
-								<CheckboxSetting
-									name="replaceNewTab"
-									title="Turning this on will start showing Web Maker in every new tab you open"
-									label="Replace new tab page"
-									pref={prefs.replaceNewTab}
-									onChange={this.updateSetting.bind(this)}
-									showWhenExtension
-								/>
-								<CheckboxSetting
-									name="preserveConsoleLogs"
-									title="Preserves the console logs across your preview refreshes"
-									label="Preserve console logs"
-									pref={prefs.preserveConsoleLogs}
-									onChange={this.updateSetting.bind(this)}
-								/>
-								<CheckboxSetting
-									name="lightVersion"
-									title="Switch to lighter version for better performance. Removes things like blur etc."
-									label="Fast/light version"
-									pref={prefs.lightVersion}
-									onChange={this.updateSetting.bind(this)}
-								/>
 							</div>
 						</div>
 					</TabPanel>
 					<TabPanel label="Fun">
-						<p>
+						<CheckboxSetting
-							<CheckboxSetting
+							title="Enjoy wonderful particle blasts while you type"
-								title="Enjoy wonderful particle blasts while you type"
+							label="Code blast!"
-								label="Code blast!"
+							name="isCodeBlastOn"
-								name="isCodeBlastOn"
+							pref={prefs.isCodeBlastOn}
-								pref={prefs.isCodeBlastOn}
+							onChange={this.updateSetting.bind(this)}
-								onChange={this.updateSetting.bind(this)}
+						/>
-							/>
+						<Divider />
-
+						<CheckboxSetting
-							<CheckboxSetting
+							title="Get ready to build some games at JS13KGames"
-								title="Get ready to build some games at JS13KGames"
+							label="Js13kGames Mode"
-								label="Js13kGames Mode"
+							name="isJs13kModeOn"
-								name="isJs13kModeOn"
+							pref={prefs.isJs13kModeOn}
-								pref={prefs.isJs13kModeOn}
+							onChange={this.updateSetting.bind(this)}
-								onChange={this.updateSetting.bind(this)}
+						/>
-							/>
-						</p>
 					</TabPanel>
 					<TabPanel label="Advanced">
 						<p>

src/components/Switch.jsx

@@ -4,12 +4,26 @@ export default class Switch extends Component {
 	render() {
 		return (
 			<label class="check-switch">
-				{this.props.children}
 				<input role="switch" type="checkbox" checked={this.props.checked} />
-				<span aria-hidden="true" class="check-switch__toggle" />
+				<div class="check-switch__toggle-wrap">
-				<span aria-hidden="true" class="check-switch__status">
+					<span
-					{this.props.checked ? 'on' : 'off'}
+						aria-hidden="true"
-				</span>
+						class="check-switch__status"
+						style={`visibility:${this.props.checked ? 'hidden' : 'visible'}`}
+					>
+						Off
+					</span>
+					<span aria-hidden="true" class="check-switch__toggle" />
+					<span
+						aria-hidden="true"
+						class="check-switch__status"
+						style={`visibility:${this.props.checked ? 'visible' : 'hidden'}`}
+					>
+						On
+					</span>
+				</div>
+
+				{this.props.children}
 			</label>
 		);
 	}

src/components/Tabs.jsx

@@ -44,7 +44,8 @@ export default class Tabs extends Component {
 		let { selectedTab } = this.state;
 		if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
 			selectedTab--;
-			selectedTab = selectedTab < 0 ? this.props.length - 1 : selectedTab;
+			selectedTab =
+				selectedTab < 0 ? this.props.children.length - 1 : selectedTab;
 			this.setState({ selectedTab: selectedTab });
 			e.preventDefault();
 		} else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {

src/components/common.jsx

@@ -32,3 +32,7 @@ export function AutoFocusInput(props) {
 		<input ref={el => el && setTimeout(() => el.focus(), 100)} {...props} />
 	);
 }
+
+export function Divider(props) {
+	return <div class="divider" />;
+}

src/style.css

@@ -212,6 +212,11 @@ hr {
 label {
 	cursor: pointer;
 }
+.divider {
+	margin: 10px 0;
+	height: 1px;
+	background: rgba(255, 255, 255, 0.1);
+}
 
 [class*='hint--']:after {
 	text-transform: none;
@@ -260,31 +265,35 @@ a > svg {
 	background: rgba(0, 0, 0, 0.1);
 }
 
+.check-switch .check-switch__toggle {
+	position: relative;
+	margin: 0 5px;
+}
 .check-switch .check-switch__toggle:after {
 	background: #fff;
+	position: absolute;
 	border-radius: 100%;
-	height: 1.5em;
+	width: 1.1em;
+	height: 1.1em;
+	top: 3px;
 	right: 1.5em;
+	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
 	transition: right 0.1825s ease-in-out;
-	width: 1.5em;
 }
 
 .check-switch .check-switch__toggle:before,
 .check-switch .check-switch__toggle:after {
-	border: 1px solid #565656;
 	content: '';
-	position: absolute;
+	display: block;
-	top: 50%;
-	transform: translateY(-50%);
 }
 
 .check-switch .check-switch__toggle:before {
-	background: #eee;
+	background: rgba(255, 255, 255, 0.2);
 	border-radius: 1.75em;
-	height: 1.75em;
+	width: 2.75em;
+	height: 1.45em;
 	right: 0.25em;
 	transition: background 0.2s ease-in-out;
-	width: 2.75em;
 }
 
 .check-switch input:not([role='button']) {
@@ -292,31 +301,38 @@ a > svg {
 }
 
 .check-switch input {
+	width: 100%;
 	height: 100%;
+	top: 0;
 	left: 0;
 	opacity: 0.0001;
 	position: absolute;
-	top: 0;
-	width: 100%;
 }
 
 .check-switch__status {
 	text-transform: uppercase;
 	font-size: 14px;
+	font-weight: 600;
 }
 
-.check-switch input:focus + .check-switch__toggle:before {
+.check-switch input:focus + * .check-switch__toggle:before {
 	outline: 2px solid;
 	outline-color: var(--color-focus-outline);
 }
 
-.check-switch input:checked + .check-switch__toggle:after {
+.check-switch input:checked + * .check-switch__toggle:after {
-	right: 0.25em;
+	right: 0.15em;
+	left: auto;
 }
 
-.check-switch input:checked + .check-switch__toggle:before {
+.check-switch input:checked + * .check-switch__toggle:before {
 	background: #61ad1c;
 }
+.check-switch__toggle-wrap {
+	float: right;
+	display: flex;
+	align-items: center;
+}
 
 .btn {
 	display: inline-block;
@@ -1907,7 +1923,7 @@ while the theme CSS file is loading */
 	color: inherit;
 }
 .tabs__tab--selected {
-	background-color: rgba(0, 0, 0, 0.3);
+	background-color: rgba(0, 0, 0, 0.5);
 }
 .tabs__tabpanel-wrap {
 	flex: 1;