Merge pull request #3202 from Gazook89/theme-selector-styling

Improve Theme selector styling

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -74,6 +74,7 @@ const Snippetbar = createClass({
 		}
 	},
 
+
 	mergeCustomizer : function(valueA, valueB, key) {
 		if(key == 'snippets') {
 			const result = _.reverse(_.unionBy(_.reverse(valueB), _.reverse(valueA), 'name')); // Join snippets together, with preference for the current theme over the base theme
@@ -102,10 +103,12 @@ const Snippetbar = createClass({
 		this.props.onInject(injectedText);
 	},
 
-	toggleThemeSelector : function(){
-		this.setState({
-			themeSelector : !this.state.themeSelector
-		});
+	toggleThemeSelector : function(e){
+		if(e.target.tagName != 'SELECT'){
+			this.setState({
+				themeSelector : !this.state.themeSelector
+			});
+		}
 	},
 
 	changeTheme : function(e){
@@ -119,7 +122,7 @@ const Snippetbar = createClass({
 
 	renderThemeSelector : function(){
 		return <div className='themeSelector'>
-			<select value={this.props.currentEditorTheme} onChange={this.changeTheme} onMouseDown={(this.changeTheme)}>
+			<select value={this.props.currentEditorTheme} onChange={this.changeTheme} >
 				{EditorThemes.map((theme, key)=>{
 					return <option key={key} value={theme}>{theme}</option>;
 				})}
@@ -176,8 +179,9 @@ const Snippetbar = createClass({
 			<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
 				onClick={this.toggleThemeSelector} >
 				<i className='fas fa-palette' />
+				{this.state.themeSelector && this.renderThemeSelector()}
 			</div>
-			{this.state.themeSelector && this.renderThemeSelector()}
+			
 			<div className='divider'></div>
 			<div className={cx('text', { selected: this.props.view === 'text' })}
 				 onClick={()=>this.props.onViewChange('text')}>

client/homebrew/editor/snippetbar/snippetbar.less

@@ -57,13 +57,13 @@
 				font-size : 0.75em;
 				color     : inherit;
 			}
-			&.editorTheme{
+			&.editorTheme {
 				.tooltipLeft('Editor Themes');
 				font-size : 0.75em;
-				color     : inherit;
-				&.active{
-					color : white;
-					background-color: black;
+				color     : black;
+				&.active {
+					position         : relative;
+					background-color : #999;
 				}
 			}
 			&.divider {
@@ -74,14 +74,17 @@
 				}
 			}
 		}
-		.themeSelector{
-			position: absolute;
-			left: -65px;
-			top: 30px;
-			z-index: 999;
-			width: 170px;
-			background-color: black;
-    		border-radius: 5px;
+		.themeSelector {
+			position : absolute;
+			top : 25px;
+			right : 0;
+			z-index : 1;
+			display : flex;
+			align-items : center;
+			justify-content : center;
+			width : 170px;
+			height : inherit;
+			background-color : inherit;
 		}
 	}
 	.snippetBarButton{