Greatly improved the user page UI

client/homebrew/pages/userPage/brewItem/brewItem.jsx

@@ -15,23 +15,39 @@ const BrewItem = React.createClass({
 		};
 	},
 
+	renderEditLink: function(){
+		if(!this.props.brew.editId) return;
+
+		return <a href={`/edit/${this.props.brew.editId}`} target='_blank'>
+			<i className='fa fa-pencil' />
+		</a>
+	},
+
 	render : function(){
 		const brew = this.props.brew;
-		return <div className='brewItem'title={brew.description}>
-			<h4>{brew.title}</h4>
-			<p className='description' ><em>{brew.description}</em></p>
+		return <div className='brewItem'>
+			<h2>{brew.title}</h2>
+			<p className='description' >{brew.description}</p>
 			<hr />
-			<ul>
-				<li><strong>Authors: </strong> {brew.authors.join(', ')}</li>
-				<li>
-					<strong>Last updated: </strong>
-					{moment(brew.updatedAt).fromNow()}
-				</li>
-				<li><strong>Views: </strong> {brew.views} </li>
-			</ul>
 
-			<a href={`/share/${brew.shareId}`} target='_blank'>Share link</a>
-			{(!!brew.editId ? <a href={`/edit/${brew.editId}`} target='_blank'>Edit link</a> : null)}
+			<div className='info'>
+				<span>
+					<i className='fa fa-user' /> {brew.authors.join(', ')}
+				</span>
+				<span>
+					<i className='fa fa-eye' /> {brew.views}
+				</span>
+				<span>
+					<i className='fa fa-refresh' /> {moment(brew.updatedAt).fromNow()}
+				</span>
+			</div>
+
+			<div className='links'>
+				<a href={`/share/${brew.shareId}`} target='_blank'>
+					<i className='fa fa-share-alt' />
+				</a>
+				{this.renderEditLink()}
+			</div>
 		</div>
 	}
 });