New error bar made

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -0,0 +1,72 @@
+var React = require('react');
+var _     = require('lodash');
+var cx    = require('classnames');
+
+var ErrorBar = React.createClass({
+	getDefaultProps: function() {
+		return {
+			errors : []
+		};
+	},
+
+	hasOpenError : false,
+	hasCloseError : false,
+	hasMatchError : false,
+
+	renderErrors : function(){
+		this.hasOpenError = false;
+		this.hasCloseError = false;
+		this.hasMatchError = false;
+
+
+		var errors = _.map(this.props.errors, (err, idx) => {
+			if(err.id == 'OPEN') this.hasOpenError = true;
+			if(err.id == 'CLOSE') this.hasCloseError = true;
+			if(err.id == 'MISMATCH') this.hasMatchError = true;
+			return <li key={idx}>
+				Line {err.line} : {err.text}, '{err.type}' tag
+			</li>
+		});
+
+		return <ul>{errors}</ul>
+	},
+
+	renderProtip : function(){
+		var msg = [];
+		if(this.hasOpenError){
+			msg.push(<div>
+				An unmatched opening tag means there's an opened tag that isn't closed, you need to close a tag, like this {'</div>'}. Make sure to match types!
+			</div>);
+		}
+
+		if(this.hasCloseError){
+			msg.push(<div>
+				An unmatched closing tag means you closed a tag without opening it. Either remove it, you check to where you think you opened it.
+			</div>);
+		}
+
+		if(this.hasMatchError){
+			msg.push(<div>
+				A type mismatch means you closed a tag, but the last open tag was a different type.
+			</div>);
+		}
+		return <div className='protips'>
+			<h4>Protips!</h4>
+			{msg}
+		</div>
+	},
+
+	render : function(){
+		if(!this.props.errors.length) return null;
+
+		return <div className='errorBar'>
+			<i className='fa fa-exclamation-triangle' />
+			<h3> There are HTML errors in your markup</h3>
+			{this.renderErrors()}
+			<hr />
+			{this.renderProtip()}
+		</div>
+	}
+});
+
+module.exports = ErrorBar;

client/homebrew/brewRenderer/errorBar/errorBar.less

@@ -0,0 +1,56 @@
+
+.errorBar{
+	position         : absolute;
+	z-index          : 10000;
+	box-sizing       : border-box;
+	width            : 100%;
+	margin-right     : 13px;
+	padding          : 20px;
+	padding-bottom   : 10px;
+	padding-left     : 100px;
+	background-color : @red;
+	color            : white;
+	i{
+		position  : absolute;
+		left      : 30px;
+		opacity   : 0.8;
+		font-size : 3em;
+	}
+	h3{
+		font-size   : 1.1em;
+		font-weight : 800;
+	}
+	ul{
+		margin-top          : 15px;
+		font-size           : 0.8em;
+		list-style-position : inside;
+		list-style-type     : disc;
+		li{
+			line-height : 1.6em;
+		}
+	}
+	hr{
+		box-sizing       : border-box;
+		height           : 2px;
+		width            : 150%;
+		margin-top       : 25px;
+		margin-bottom    : 15px;
+		margin-left      : -100px;
+		background-color : darken(@red, 8%);
+		border           : none;
+	}
+	.protips{
+		margin-left : -80px;
+		font-size   : 0.6em;
+		&>div{
+			margin-bottom : 10px;
+			line-height   : 1.2em;
+		}
+		h4{
+			opacity        : 0.8;
+			font-weight    : 800;
+			line-height    : 1.5em;
+			text-transform : uppercase;
+		}
+	}
+}