Theme switches on click

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -21,7 +21,8 @@ const MetadataEditor = createClass({
 				published   : false,
 				authors     : [],
 				systems     : [],
-				renderer    : 'legacy'
+				renderer    : 'legacy',
+				theme       : '5ePHB'
 			},
 			onChange : ()=>{}
 		};
@@ -52,6 +53,12 @@ const MetadataEditor = createClass({
 		}));
 	},
 
+	handleTheme : function(theme){
+		this.props.metadata.renderer = theme.renderer;
+		this.props.metadata.theme    = theme.name;
+		this.props.onChange(this.props.metadata);
+	},
+
 	handleDelete : function(){
 		if(this.props.metadata.authors && this.props.metadata.authors.length <= 1){
 			if(!confirm('Are you sure you want to delete this brew? Because you are the only owner of this brew, the document will be deleted permanently.')) return;
@@ -121,7 +128,7 @@ const MetadataEditor = createClass({
 	renderThemeDropdown : function(){
 		const listThemes = (renderer)=>{
 			return _.map(Themes[renderer], (theme)=>{
-				return <div href={''} className='item' key={''} target='_blank' rel='noopener noreferrer' title={''}>
+				return <div href={''} className='item' key={''} onClick={()=>this.handleTheme(theme)} title={''}>
 					{`${theme.renderer} : ${theme.name}`}
 				</div>;
 			});
@@ -131,7 +138,7 @@ const MetadataEditor = createClass({
 			<label>theme</label>
 			<Nav.dropdown trigger='click'>
 				<div>
-					share <i class='fas fa-caret-down'></i>
+					{`${this.props.metadata.renderer} : ${this.props.metadata.theme}`} <i className='fas fa-caret-down'></i>
 				</div>
 				{listThemes('Legacy')}
 				{listThemes('V3')}

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -93,7 +93,7 @@
 			}
 			&>div:first-child {
 				border : 2px solid rgb(118,118,118);
-				padding : 6px 2px;
+				padding : 6px 3px;
 				background-color : inherit;
 				i {
 					float: right;
@@ -101,8 +101,8 @@
 			}
 			.navDropdown {
 				box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
-				* {
-					padding: 3px 2px;
+				.item {
+					padding: 3px 3px;
 					border-top: 1px solid rgb(118, 118, 118);
 					&:hover {
 						background-color: @blue;