From 7b8e398891a85d82fdf12cff2d0c132c9f61d55d Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Fri, 22 Dec 2023 22:58:13 -0600
Subject: [PATCH] improve simple styling on theme selector. nest inside toggle.

---
 .../homebrew/editor/snippetbar/snippetbar.jsx |  3 +-
 .../editor/snippetbar/snippetbar.less         | 28 +++++++++++--------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index d60e51388..d4de1d2f5 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -176,8 +176,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')}>
diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index 8dc6a8b9d..aca598025 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -61,13 +61,14 @@
 					color : black;
 				}
 			}
-			&.editorTheme{
+			&.editorTheme {
 				.tooltipLeft('Editor Themes');
 				font-size : 0.75em;
 				color     : black;
-				&.active{
-					color : white;
-					background-color: black;
+				&.active {
+					position         : relative;
+					color            : white;
+					background-color : black;
 				}
 			}
 			&.divider {
@@ -78,14 +79,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{