Merge branch 'master' of https://github.com/naturalcrit/homebrewery into change-metadata-ui-theme

client/homebrew/editor/editor.jsx

@@ -113,6 +113,10 @@ const Editor = forwardRef(
 		useEffect(()=>{ if(liveScroll) brewJump(currentEditorViewPageNum, false); }, [currentEditorViewPageNum, liveScroll]);
 		useEffect(()=>{ if(liveScroll) brewJump(currentEditorCursorPageNum, false); }, [currentEditorCursorPageNum, liveScroll]);
 
+		const handleFormatCode = () => {
+			codeEditor.current?.formatCode();
+		};
+
 		const handleControlKeys = (e)=>{
 			if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return;
 			const LEFTARROW_KEY = 37;
@@ -324,6 +328,7 @@ const Editor = forwardRef(
 					redo={redo}
 					foldCode={foldCode}
 					unfoldCode={unfoldCode}
+					formatCode={isStyle() ? handleFormatCode : null}
 					historySize={historySize()}
 					currentEditorTheme={currentEditorTheme}
 					updateEditorTheme={updateEditorTheme}

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -65,6 +65,7 @@ const Snippetbar = createReactClass({
 			historySize       : ()=>{},
 			foldCode          : ()=>{},
 			unfoldCode        : ()=>{},
+			formatCode        : ()=>{},
 			updateEditorTheme : ()=>{},
 			cursorPos         : {},
 			themeBundle       : [],
@@ -269,6 +270,10 @@ const Snippetbar = createReactClass({
 						onClick={this.props.unfoldCode} >
 						<i className='fas fa-expand-alt' />
 					</div>
+					<div className={`editorTool formatCode ${this.props.formatCode ? 'active' : ''}`}
+						onClick={this.props.formatCode} >
+						<i className='fas fa-wand-magic-sparkles' />
+					</div>
 					<div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
 						onClick={this.toggleThemeSelector} >
 						<i className='fas fa-palette' />

client/homebrew/editor/snippetbar/snippetbar.less

@@ -25,7 +25,7 @@
 	.editors {
 		display         : flex;
 		justify-content : flex-end;
-		min-width       : 250px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
+		min-width       : 275px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
 		font-size: .85rem;
 		&:only-child {min-width   : unset; margin-left : auto;}
 
@@ -79,6 +79,11 @@
 					color     : grey;
 					&.active { color : inherit; }
 				}
+				&.formatCode {
+					.tooltipLeft('Clean your Code');
+					color     : grey;
+					&.active { color : inherit; }
+				}
 				&.history {
 					.tooltipLeft('History');
 					position  : relative;
@@ -212,8 +217,8 @@
 		}
 	}
 }
-@container editor (width < 816px) {
-	.snippetBar {
+@container editor (width < 841px) {
+ 	.snippetBar {
 		.editors { 
 			flex            : 1;
 			justify-content : space-between;