Rearrange CSS and small HTML changes

Simplified and unified some font-size declarations, adjusted the "descriptions" for various inputs to be similar structure and appearance, change the components h1 label from "Brew" to "Properties Editor", updated the comment about Publishing.

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -304,17 +304,14 @@ const MetadataEditor = createClass({
 						onChange={(e)=>this.handleRenderer('V3', e)} />
 					V3
 				</label>
-
-				<a href='/legacy' target='_blank' rel='noopener noreferrer'>
-					Click here to see the demo page for the old Legacy renderer!
-				</a>
+				<small><a href='/legacy' target='_blank' rel='noopener noreferrer'>Click here to see the demo page for the old Legacy renderer!</a></small>
 			</div>
 		</div>;
 	},
 
 	render : function(){
 		return <div className='metadataEditor'>
-			<h1 className='sectionHead'>Brew</h1>
+			<h1 className='sectionHead'>Properties Editor</h1>
 
 			<div className='field title'>
 				<label>title</label>
@@ -383,7 +380,7 @@ const MetadataEditor = createClass({
 				<label>publish</label>
 				<div className='value'>
 					{this.renderPublish()}
-					<small>Published homebrews will be publicly viewable and searchable (eventually...)</small>
+					<small>Published brews are searchable in <a href='/vault'>the Vault</a> and visible on your user page.  Unpublished brews are not indexed in the Vault or visible on your user page, but can still be shared and indexed by search engines.  You can unpublish a brew any time.</small>
 				</div>
 			</div>
 

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -1,5 +1,6 @@
 @import 'naturalcrit/styles/colors.less';
 
+
 .metadataEditor {
 	position         : absolute;
 	z-index          : 5;
@@ -9,6 +10,7 @@
 	padding          : 25px;
 	overflow-y       : auto;
 	background-color : #999999;
+	font-size		 : 13px;
 
 	.sectionHead {
 		margin      : 20px 0;
@@ -43,15 +45,21 @@
 		min-width     : 200px;
 		& > label {
 			width          : 80px;
-			font-size      : 11px;
 			font-weight    : 800;
 			line-height    : 1.8em;
 			text-transform : uppercase;
+			font-size: .9em;
 		}
 		& > .value {
 			flex           : 1 1 auto;
 			width          : 50px;
 			&:invalid { background : #FFB9B9; }
+			small {
+				display     : block;
+				font-size   : 0.9em;
+				font-style  : italic;
+				line-height : 1.4em;
+			}
 		}
 		input[type='text'], textarea {
 			border : 1px solid gray;
@@ -78,7 +86,6 @@
 			textarea.value {
 				height      : auto;
 				font-family : 'Open Sans', sans-serif;
-				font-size   : 0.8em;
 				resize      : none;
 			}
 		}
@@ -87,12 +94,6 @@
 			z-index   : 200;
 			max-width : 150px;
 		}
-		small {
-			display     : inline-block;
-			font-size   : 0.6em;
-			font-style  : italic;
-			line-height : 1.4em;
-		}
 	}
 
 
@@ -113,18 +114,13 @@
 			display        : inline-flex;
 			align-items    : center;
 			margin-right   : 15px;
-			font-size      : 0.7em;
+			font-size      : 0.9em;
 			font-weight    : 800;
 			white-space    : nowrap;
 			vertical-align : middle;
 			cursor         : pointer;
 			user-select    : none;
 		}
-		a {
-			display     : inline-flex;
-			font-size   : 0.7em;
-			font-weight : 800;
-		}
 		input {
 			margin         : 3px;
 			vertical-align : middle;
@@ -149,12 +145,10 @@
 		}
 	}
 	.authors.field .value {
-		font-size      : 0.8em;
 		line-height    : 1.5em;
 	}
 
 	.themes.field {
-		font-size : 13.33px;
 		.navDropdownContainer {
 			position         : relative;
 			z-index          : 100;
@@ -165,9 +159,9 @@
 				background-color : darkgray;
 			}
 			& > div:first-child {
-				padding           : 6px 3px;
+				padding           : 3px 3px;
 				background-color  : inherit;
-				border            : 2px solid rgb(118,118,118);
+				border            : 1px solid gray;
 				i { float	: right; }
 				&:hover {
 					color            : white;
@@ -240,30 +234,38 @@
 			}
 		}
 	}
-	.field .list {
-		display   : flex;
-		flex      : 1 0;
-		flex-wrap : wrap;
+	#groupedIcon {
+		#backgroundColors;
+		position   : relative;
+		top        : -0.3em;
+		right      : -0.3em;
+		display    : inline-block;
+		min-width  : 20px;
+		height     : ~'calc(100% + 0.6em)';
+		color      : white;
+		text-align : center;
+		cursor     : pointer;
 
-		> * { flex : 0 0 auto; }
+		i {
+			position  : relative;
+			top       : 50%;
+			transform : translateY(-50%);
+		}
 
-		#groupedIcon {
-			#backgroundColors;
-			position   : relative;
-			top        : -0.3em;
-			right      : -0.3em;
-			display    : inline-block;
-			min-width  : 20px;
-			height     : ~'calc(100% + 0.6em)';
-			color      : white;
-			text-align : center;
-			cursor     : pointer;
+		&:not(:last-child) { border-right : 1px solid black; }
+
+		&:last-child { border-radius : 0 0.5em 0.5em 0; }
+	}
+	.field .tag-input {
+		flex: 1 0;
+		.list {
+			display   : flex;
+			flex      : 1 0;
+			flex-wrap : wrap;
+	
+			> * { flex : 0 0 auto; }
+	
 
-			i {
-				position  : relative;
-				top       : 50%;
-				transform : translateY(-50%);
-			}
 
 			&:not(:last-child) { border-right : 1px solid black; }
 
@@ -277,8 +279,7 @@
 			background-color : #DDDDDD;
 			border-radius    : 0.5em;
 
-			.icon {
-				#groupedIcon; }
+			.icon { #groupedIcon; }
 		}
 
 		.input-group {
@@ -293,18 +294,32 @@
 				min-width : 75px;
 				height    : 100%;
 			}
-
-			.invalid:focus { background-color : pink; }
-
-			.icon {
-				#groupedIcon;
-				top       : -0.54em;
-				right     : 1px;
-				height    : 97%;
-				font-size : 0.8em;
-
-				i { font-size : 1.125em; }
+	
+			.input-group {
+				height : ~'calc(.9em + 4px + .6em)';
+	
+				input { border-radius : 0.5em 0 0 0.5em; }
+	
+				input:last-child { border-radius : 0.5em; }
+	
+				.value {
+					width     : 7.5vw;
+					min-width : 75px;
+					height    : 100%;
+				}
+	
+				.invalid:focus { background-color : pink; }
+	
+				.icon {
+					#groupedIcon;
+					top       : -0.54em;
+					right     : 1px;
+					height    : 97%;
+	
+					i { font-size : 1.125em; }
+				}
 			}
 		}
+
 	}
-}
+}