refactor to func comp and using dialog

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -1,75 +1,87 @@
 require('./errorBar.less');
 const React = require('react');
-const createClass = require('create-react-class');
+const _ = require('lodash');
-const _     = require('lodash');
 
-const ErrorBar = createClass({
+import Dialog from '../../../components/dialog.jsx';
-	displayName     : 'ErrorBar',
-	getDefaultProps : function() {
-		return {
-			errors : []
-		};
-	},
-
-	hasOpenError  : false,
-	hasCloseError : false,
-	hasMatchError : false,
-
-	renderErrors : function(){
-		this.hasOpenError = false;
-		this.hasCloseError = false;
-		this.hasMatchError = false;
 
 
-		const errors = _.map(this.props.errors, (err, idx)=>{
+const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
-			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>;
+const ErrorBar = ( props ) => {
-	},
+    let hasOpenError = false;
+    let hasCloseError = false;
+    let hasMatchError = false;
 
-	renderProtip : function(){
+    const renderErrors = () => {
-		const msg = [];
+        hasOpenError = false;
-		if(this.hasOpenError){
+        hasCloseError = false;
-			msg.push(<div>
+        hasMatchError = false;
-				An unmatched opening tag means there's an opened tag that isn't closed. You need to close your tags, like this {'</div>'}. Make sure to match types!
-			</div>);
-		}
 
-		if(this.hasCloseError){
+        const errors = _.map(props.errors, (err, idx) => {
-			msg.push(<div>
+            if (err.id === 'OPEN') hasOpenError = true;
-				An unmatched closing tag means you closed a tag without opening it. Either remove it, or check to where you think you opened it.
+            if (err.id === 'CLOSE') hasCloseError = true;
-			</div>);
+            if (err.id === 'MISMATCH') hasMatchError = true;
-		}
 
-		if(this.hasMatchError){
+            return (
-			msg.push(<div>
+                <li key={idx}>
-				A type mismatch means you closed a tag, but the last open tag was a different type.
+                    Line {err.line} : {err.text}, '{err.type}' tag
-			</div>);
+                </li>
-		}
+            );
-		return <div className='protips'>
+        });
-			<h4>Protips!</h4>
-			{msg}
-		</div>;
-	},
 
-	render : function(){
+        return <ul>{errors}</ul>;
-		if(!this.props.errors.length) return null;
+    };
 
-		return <div className='errorBar'>
+    const renderProtip = () => {
-			<i className='fas fa-exclamation-triangle' />
+        const msg = [];
-			<h3> There are HTML errors in your markup</h3>
+        if (hasOpenError) {
-			<small>If these aren't fixed your brew will not render properly when you print it to PDF or share it</small>
+            msg.push(
-			{this.renderErrors()}
+                <div key="openError">
-			<hr />
+                    An unmatched opening tag means there's an opened tag that isn't closed. You need to close your tags, like this {'</div>'}. Make sure to match types!
-			{this.renderProtip()}
+                </div>
-		</div>;
+            );
-	}
+        }
-});
+
+        if (hasCloseError) {
+            msg.push(
+                <div key="closeError">
+                    An unmatched closing tag means you closed a tag without opening it. Either remove it, or check to where you think you opened it.
+                </div>
+            );
+        }
+
+        if (hasMatchError) {
+            msg.push(
+                <div key="matchError">
+                    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>
+        );
+    };
+
+    if (!props.errors.length) return null;
+
+    return (
+        <Dialog className="errorBar" closeText={DISMISS_BUTTON} >
+			<div className="content">
+				<i className="fas fa-exclamation-triangle" />
+				<h3> There are HTML errors in your markup</h3>
+            	<small>
+                	If these aren't fixed your brew will not render properly when you print it to PDF or share it
+            	</small>
+            	{renderErrors()}
+			</div>
+            <hr />
+            {renderProtip()}
+        </Dialog>
+	);
+};
 
 module.exports = ErrorBar;

client/homebrew/brewRenderer/errorBar/errorBar.less

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