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')}