"Refactored Snippetbar component: updated JSX structure, added div wrapper for snippets, changed CSS styles for editors and snippets"

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -125,19 +125,23 @@ const Snippetbar = createClass({
 	renderSnippetGroups : function(){
 		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
 
-		return _.map(snippets, (snippetGroup)=>{
+		return <div className="snippets">
-			return <SnippetGroup
+			{_.map(snippets, (snippetGroup)=>{
-				brew={this.props.brew}
+				return <SnippetGroup
-				groupName={snippetGroup.groupName}
+					brew={this.props.brew}
-				icon={snippetGroup.icon}
+					groupName={snippetGroup.groupName}
-				snippets={snippetGroup.snippets}
+					icon={snippetGroup.icon}
-				key={snippetGroup.groupName}
+					snippets={snippetGroup.snippets}
-				onSnippetClick={this.handleSnippetClick}
+					key={snippetGroup.groupName}
-				cursorPos={this.props.cursorPos}
+					onSnippetClick={this.handleSnippetClick}
-			/>;
+					cursorPos={this.props.cursorPos}
-		});
+					/>;
+				})
+			}
+		</div>
 	},
 
+
 	renderEditorButtons : function(){
 		if(!this.props.showEditButtons) return;
 
@@ -158,23 +162,6 @@ const Snippetbar = createClass({
 		}
 
 		return <div className='editors'>
-			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
-				onClick={this.props.undo} >
-				<i className='fas fa-undo' />
-			</div>
-			<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
-				onClick={this.props.redo} >
-				<i className='fas fa-redo' />
-			</div>
-			<div className='divider'></div>
-			{foldButtons}
-			<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
-				onClick={this.toggleThemeSelector} >
-				<i className='fas fa-palette' />
-				{this.state.themeSelector && this.renderThemeSelector()}
-			</div>
-
-			<div className='divider'></div>
 			<div className={cx('text', { selected: this.props.view === 'text' })}
 				 onClick={()=>this.props.onViewChange('text')}>
 				<i className='fa fa-beer' />
@@ -186,14 +173,33 @@ const Snippetbar = createClass({
 			<div className={cx('meta', { selected: this.props.view === 'meta' })}
 				onClick={()=>this.props.onViewChange('meta')}>
 				<i className='fas fa-info-circle' />
+			</div>			
+			<div className='divider'></div>
+			{foldButtons}
+			<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
+				onClick={this.toggleThemeSelector} >
+				<i className='fas fa-palette' />
+				{this.state.themeSelector && this.renderThemeSelector()}
 			</div>
+
+			<div className='divider'></div>
+			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
+				onClick={this.props.undo} >
+				<i className='fas fa-undo' />
+			</div>
+			<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
+				onClick={this.props.redo} >
+				<i className='fas fa-redo' />
+			</div>
+			
 		</div>;
 	},
 
 	render : function(){
 		return <div className='snippetBar'>
-			{this.renderSnippetGroups()}
 			{this.renderEditorButtons()}
+			{this.renderSnippetGroups()}
+			
 		</div>;
 	}
 });

client/homebrew/editor/snippetbar/snippetbar.less

@@ -8,11 +8,15 @@
 	height           : @menuHeight;
 	color            : black;
 	background-color : #DDDDDD;
+	display: flex;
 
-	.editors {
+	.snippets {
 		position        : absolute;
 		top             : 0px;
 		right           : 0px;
+	}
+
+	.editors {
 		display         : flex;
 		justify-content : space-between;
 		height          : @menuHeight;
@@ -107,7 +111,7 @@
 		.tooltipLeft('Edit Brew Properties');
 	}
 	.snippetGroup {
-		border-right   : 1px solid currentColor;
+		border-left   : 1px solid currentColor;
 		&:hover {
 			& > .dropdown { visibility : visible; }
 		}
@@ -200,7 +204,7 @@
 		flex-wrap : wrap;
 		height : 50px;
 
-		.editors {
+		.snippets {
 			position : static;
 		}
 	}