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.

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>;
 	},
 

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;

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>
 			);