Merge pull request #2344 from naturalcrit/StyleBrewitemTags

Add Styling to Tags on userpage

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -95,6 +95,9 @@ const BrewItem = createClass({
 
 	render : function(){
 		const brew = this.props.brew;
+		if(Array.isArray(brew.tags)) {               // temporary fix until dud tags are cleaned
+			brew.tags = brew.tags?.filter(tag => tag); //remove tags that are empty strings
+		}
 		const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
 
 		return <div className='brewItem'>
@@ -104,11 +107,15 @@ const BrewItem = createClass({
 			</div>
 			<hr />
 			<div className='info'>
-				{brew.tags ? <>
-					<span className='brewTags' title={`Tags:\n${brew.tags.join('\n')}`}>
-						<i className='fas fa-tags'/> {brew.tags.join(', ')}
-					</span>
-					<br />
+
+				{brew.tags?.length ? <>
+					<div className='brewTags' title={`Tags:\n${brew.tags.join('\n')}`}>
+						<i className='fas fa-tags'/>
+						{brew.tags.map((tag, idx)=>{
+							let matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
+							return <span className={matches[1]}>{matches[2]}</span>;
+						})}
+					</div>
 				</> : <></>
 				}
 				<span title={`Authors:\n${brew.authors?.join('\n')}`}>

client/homebrew/pages/basePages/listPage/brewItem/brewItem.less

@@ -29,13 +29,23 @@
 	.info{
 		position: initial;
 		bottom: 2px;
-		font-family : ScalySans;
+		font-family : ScalySansRemake;
 		font-size   : 1.2em;
 		&>span{
 			margin-right : 12px;
 			line-height  : 1.5em;
 		}
 	}
+	.brewTags span {
+		background-color: #c8ac6e3b;
+		margin: 2px;
+		padding: 2px;
+		border: 1px solid #c8ac6e;
+		border-radius: 4px;
+		white-space: nowrap;
+		display: inline-block;
+		font-weight: bold;
+	}
 	&:hover{
 		.links{
 			opacity : 1;