use common CSS

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines */
-import './metadataEditor.less';
+import '../uiEditor.less';
 import React from 'react';
 import createReactClass from 'create-react-class';
 import _ from 'lodash';
@@ -355,7 +355,7 @@ const MetadataEditor = createReactClass({
 	},
 
 	render : function(){
-		return <div className='metadataEditor'>
+		return <div className='metadataEditor ui-editor'>
 			<h1>Properties Editor</h1>
 
 			<div className='field title'>

client/homebrew/editor/settingsEditor/settingsEditor.jsx

@@ -1,15 +1,15 @@
-import './settingsEditor.less';
+import '../uiEditor.less';
 import React, { useState } from 'react';
 
-const SettingsEditor = ({settings, updateSettings = () => {} }) => {
+const SettingsEditor = ({ settings, updateSettings = ()=>{} })=>{
 	const [currentSettings, setCurrentSettings] = useState(settings);
 
 	const validations = {
-		fontSize: [
-			(value) => {
+		fontSize : [
+			(value)=>{
 				const number = Number(value);
 
-				if (number < 9 || number > 30) {
+				if(number < 9 || number > 30) {
 					return 'Font size must be between 9 and 30.';
 				}
 
@@ -18,7 +18,7 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
 		],
 	};
 
-	const handleFieldChange = (setting, e) => {
+	const handleFieldChange = (setting, e)=>{
 		const value =
 			e.target.type === 'checkbox'
 				? e.target.checked
@@ -27,10 +27,10 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
 		const inputRules = validations[setting] ?? [];
 
 		const validationErrors = inputRules
-			.map((rule) => rule(value))
+			.map((rule)=>rule(value))
 			.filter(Boolean);
 
-		if (validationErrors.length > 0) {
+		if(validationErrors.length > 0) {
 			e.target.setCustomValidity(validationErrors.join('\n'));
 			e.target.reportValidity();
 			return;
@@ -40,7 +40,7 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
 
 		const updatedSettings = {
 			...currentSettings,
-			[setting]: e.target.type === 'number'
+			[setting] : e.target.type === 'number'
 				? Number(value)
 				: value,
 		};
@@ -50,9 +50,9 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
 	};
 
 	return (
-		<div className='settingsEditor'>
+		<div className='settingsEditor ui-editor'>
 			<h1>Editor Settings</h1>
-{/* 
+			{/*
 			<div className='field title'>
 				<label htmlFor='blockShading'>
 					Background Shading of blocks in editor
@@ -66,69 +66,80 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
 				/>
 			</div> */}
 
-			<div className='field title'>
+			<div className='field'>
 				<label htmlFor='autoCloseBrackets'>
 					Automatically close brackets
 				</label>
-				<input
-					id='autoCloseBrackets'
-					type='checkbox'
-					name='autoCloseBrackets'
-					checked={currentSettings.autoCloseBrackets}
-					onChange={(e) => handleFieldChange('autoCloseBrackets', e)}
-				/>
+				<div className='value'>
+					<input
+						id='autoCloseBrackets'
+						type='checkbox'
+						name='autoCloseBrackets'
+						checked={currentSettings.autoCloseBrackets}
+						onChange={(e)=>handleFieldChange('autoCloseBrackets', e)}
+					/>
+				</div>
 			</div>
 
-			<div className='field title'>
+			<div className='field'>
 				<label htmlFor='showImagePreviews'>
 					Show Image Previews when hovering a link
 				</label>
-				<input
-					id='showImagePreviews'
-					type='checkbox'
-					name='showImagePreviews'
-					checked={currentSettings.showImagePreviews}
-					onChange={(e) => handleFieldChange('showImagePreviews', e)}
-				/>
+				<div className='value'>
+					<input
+						id='showImagePreviews'
+						type='checkbox'
+						name='showImagePreviews'
+						checked={currentSettings.showImagePreviews}
+						onChange={(e)=>handleFieldChange('showImagePreviews', e)}
+					/>
+				</div>
 			</div>
 
-			<div className='field title'>
+			<div className='field'>
 				<label htmlFor='activeLineShading'>
 					Background shading of active line
 				</label>
-				<input
-					id='activeLineShading'
-					type='checkbox'
-					name='activeLineShading'
-					checked={currentSettings.activeLineShading}
-					onChange={(e) => handleFieldChange('activeLineShading', e)}
-				/>
+				<div className='value'>
+					<input
+						id='activeLineShading'
+						type='checkbox'
+						name='activeLineShading'
+						checked={currentSettings.activeLineShading}
+						onChange={(e)=>handleFieldChange('activeLineShading', e)}
+					/>
+				</div>
+
 			</div>
 
-			<div className='field title'>
+			<div className='field'>
 				<label htmlFor='lineNumbers'>Show Line Numbers</label>
-				<input
-					id='lineNumbers'
-					type='checkbox'
-					name='lineNumbers'
-					checked={currentSettings.lineNumbers}
-					onChange={(e) => handleFieldChange('lineNumbers', e)}
-				/>
+				<div className='value'>
+					<input
+						id='lineNumbers'
+						type='checkbox'
+						name='lineNumbers'
+						checked={currentSettings.lineNumbers}
+						onChange={(e)=>handleFieldChange('lineNumbers', e)}
+					/>
+				</div>
 			</div>
 
-			<div className='field title'>
+			<div className='field'>
 				<label htmlFor='fontSize'>
 					Editor Font Size (in px)
 				</label>
-				<input
-					id='fontSize'
-					type='number'
-					min={9}
-					max={30}
-					name='fontSize'
-					value={currentSettings.fontSize}
-					onChange={(e) => handleFieldChange('fontSize', e)}
-				/>
+				<div className='value'>
+					<input
+						id='fontSize'
+						type='number'
+						min={9}
+						max={30}
+						name='fontSize'
+						value={currentSettings.fontSize}
+						onChange={(e)=>handleFieldChange('fontSize', e)}
+					/>
+				</div>
 			</div>
 		</div>
 	);

client/homebrew/editor/uiEditor.less

@@ -5,7 +5,7 @@
 	padding-left  : 10px;
 }
 
-.metadataEditor {
+.ui-editor {
 	position         : absolute;
 	box-sizing       : border-box;
 	width            : 100%;
@@ -60,6 +60,7 @@
 		& > .value {
 			flex           : 1 1 auto;
 			width          : 50px;
+			justify-self: end;
 			&[data-tooltip-right] { max-width : 380px; }
 			&:invalid { background : #FFB9B9; }
 			small {
@@ -68,6 +69,11 @@
 				font-style  : italic;
 				line-height : 1.4em;
 			}
+
+			input[type='checkbox'] {
+				display:block;
+				margin-left:auto;
+			}
 		}
 		input[type='text'], textarea {
 			border : 1px solid gray;
@@ -371,4 +377,11 @@
 			}
 		}
 	}
+}
+
+
+.settingsEditor .field {
+	> label {
+		width:200px;
+	}
 }