From 8e0629062d820d8e6a1838521658e617c4f9ce80 Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Tue, 1 Mar 2022 00:34:19 -0500
Subject: [PATCH] Fully disable theme selection when in Legacy mode

Making Legacy a "theme" implies we will add more themes to Legacy, which we aren't planning to.
---
 .../editor/metadataEditor/metadataEditor.jsx  | 27 ++++++++++++++-----
 .../editor/metadataEditor/metadataEditor.less |  7 ++++-
 shared/naturalcrit/nav/nav.jsx                |  5 ++--
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 2768597da..054ce6bbe 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -144,16 +144,29 @@ const MetadataEditor = createClass({
 		};
 
 		const currentTheme = this.getThemeData(this.props.metadata.renderer, this.props.metadata.theme);
+		let dropdown;
+
+		if(this.props.metadata.renderer == 'legacy') {
+			dropdown =
+				<Nav.dropdown className='disabled' trigger='disabled'>
+					<div>
+						{`Themes are not suppdorted in the Legacy Renderer`} <i className='fas fa-caret-down'></i>
+					</div>
+				</Nav.dropdown>;
+		} else {
+			dropdown =
+				<Nav.dropdown trigger='click'>
+					<div>
+						{`${_.upperFirst(currentTheme.renderer)} : ${currentTheme.name}`} <i className='fas fa-caret-down'></i>
+					</div>
+					{/*listThemes('Legacy')*/}
+					{listThemes('V3')}
+				</Nav.dropdown>;
+		}
 
 		return <div className='field themes'>
 			<label>theme</label>
-			<Nav.dropdown trigger='click'>
-				<div>
-					{`${_.upperFirst(currentTheme.renderer)} : ${currentTheme.name}`} <i className='fas fa-caret-down'></i>
-				</div>
-				{listThemes('Legacy')}
-				{listThemes('V3')}
-			</Nav.dropdown>
+			{dropdown}
 		</div>;
 	},
 
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index b170e9517..10ae9e89a 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -86,11 +86,16 @@
 		font-size: 13.33px;
 		.navDropdownContainer {
 			background-color: white;
-
 			width: 100%;
 			&:hover {
 				background-color: rgb(187, 187, 187);
 			}
+			&.disabled {
+				font-style:italic;
+				font-style: italic;
+				background-color: darkgray;
+				color: dimgray;
+			}
 			&>div:first-child {
 				border : 2px solid rgb(118,118,118);
 				padding : 6px 3px;
diff --git a/shared/naturalcrit/nav/nav.jsx b/shared/naturalcrit/nav/nav.jsx
index 6f3e84973..20b55d005 100644
--- a/shared/naturalcrit/nav/nav.jsx
+++ b/shared/naturalcrit/nav/nav.jsx
@@ -98,17 +98,18 @@ const Nav = {
 			);
 		},
 		render : function () {
+			console.log(this.props.children);
 			const dropdownChildren = React.Children.map(this.props.children, (child, i)=>{
 				// Ignore the first child
 				if(i < 1) return;
 				return child;
 			});
 			return (
-				<div className='navDropdownContainer'
+				<div className={`navDropdownContainer ${this.props.className}`}
 					onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined}
 					onClick=     {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}
 					onMouseLeave={()=>this.handleDropdown(false)}>
-					{this.props.children[0]}
+					{this.props.children[0] || this.props.children} //children is not an array when only one child
 					{this.renderDropdown(dropdownChildren)}
 				</div>
 			);