Merge pull request #3972 from G-Ambatte/pr/3841

Error Bar refactor - fixes

client/components/dialog.jsx

@@ -6,10 +6,8 @@ function Dialog({ dismisskeys = [], closeText = 'Close', blocking = false, ...re
 	const dialogRef = useRef(null);
 
 	useEffect(()=>{
-		if(dismisskeys.length !== 0) {
+		blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
-			blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
+	}, []);
-		}
-	}, [dialogRef.current, dismisskeys]);
 
 	const dismiss = ()=>{
 		dismisskeys.forEach((key)=>{

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -1,75 +1,53 @@
 require('./errorBar.less');
 const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
 
-const ErrorBar = createClass({
+import Dialog from '../../../components/dialog.jsx';
-	displayName     : 'ErrorBar',
-	getDefaultProps : function() {
-		return {
-			errors : []
-		};
-	},
 
-	hasOpenError  : false,
+const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
-	hasCloseError : false,
-	hasMatchError : false,
 
-	renderErrors : function(){
+const ErrorBar = (props)=>{
-		this.hasOpenError = false;
+	if(!props.errors.length) return null;
-		this.hasCloseError = false;
+	let hasOpenError = false, hasCloseError = false, hasMatchError = false;
-		this.hasMatchError = false;
 
+	props.errors.map((err)=>{
+		if(err.id === 'OPEN')     hasOpenError  = true;
+		if(err.id === 'CLOSE')    hasCloseError = true;
+		if(err.id === 'MISMATCH') hasMatchError = true;
+	});
 
-		const errors = _.map(this.props.errors, (err, idx)=>{
+	const renderErrors = ()=>(
-			if(err.id == 'OPEN') this.hasOpenError = true;
+		<ul>
-			if(err.id == 'CLOSE') this.hasCloseError = true;
+			{props.errors.map((err, idx)=>{
-			if(err.id == 'MISMATCH') this.hasMatchError = true;
+				return <li key={idx}>
-			return <li key={idx}>
+					Line {err.line} : {err.text}, '{err.type}' tag
-				Line {err.line} : {err.text}, '{err.type}' tag
+				</li>;
-			</li>;
+			})}
-		});
+		</ul>
+	);
 
-		return <ul>{errors}</ul>;
+	const renderProtip = ()=>(
-	},
+		<div className='protips'>
-
-	renderProtip : function(){
-		const 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 your tags, 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, or 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}
+			{hasOpenError  && <div>Unmatched opening tag. Close your tags, like this {'</div>'}. Match types!</div>}
-		</div>;
+			{hasCloseError && <div>Unmatched closing tag. Either remove it or check where it was opened.</div>}
-	},
+			{hasMatchError && <div>Type mismatch. Closed a tag with a different type.</div>}
+		</div>
+	);
 
-	render : function(){
+	return (
-		if(!this.props.errors.length) return null;
+		<Dialog className='errorBar' closeText={DISMISS_BUTTON} >
-
+			<div>
-		return <div className='errorBar'>
+				<i className='fas fa-exclamation-triangle' />
-			<i className='fas fa-exclamation-triangle' />
+				<h2> There are HTML errors in your markup</h2>
-			<h3> There are HTML errors in your markup</h3>
+				<small>
-			<small>If these aren't fixed your brew will not render properly when you print it to PDF or share it</small>
+					If these aren't fixed your brew will not render properly when you print it to PDF or share it
-			{this.renderErrors()}
+				</small>
+				{renderErrors()}
+			</div>
 			<hr />
-			{this.renderProtip()}
+			{renderProtip()}
-		</div>;
+		</Dialog>
-	}
+	);
-});
+};
 
 module.exports = ErrorBar;

client/homebrew/brewRenderer/errorBar/errorBar.less

@@ -1,60 +1,58 @@
 
-.errorBar{
+.errorBar {
 	position         : absolute;
-	z-index          : 10000;
+	top              : 32px;
-	box-sizing       : border-box;
+	z-index          : 1;
 	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;
+	div {
-		font-size : 3em;
+		> i {
-	}
+			float         : left;
-	h3{
+			margin-right  : 10px;
-		font-size   : 1.1em;
+			margin-bottom : 20px;
-		font-weight : 800;
+			font-size     : 3em;
-	}
+			opacity       : 0.8;
-	ul{
+		}
-		margin-top          : 15px;
+		h2 { font-weight : 800; }
-		font-size           : 0.8em;
+		ul {
-		list-style-position : inside;
+			margin-top          : 15px;
-		list-style-type     : disc;
+			font-size           : 0.8em;
-		li{
+			list-style-position : inside;
-			line-height : 1.6em;
+			list-style-type     : disc;
+			li { line-height : 1.6em; }
 		}
 	}
-	hr{
+	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;
 	}
-	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;
-		font-size   : 0.6em;
+		line-height   : 1.2em;
-		&>div{
+		h4 {
-			margin-bottom : 10px;
-			line-height   : 1.2em;
-		}
-		h4{
-			opacity        : 0.8;
 			font-weight    : 800;
 			line-height    : 1.5em;
 			text-transform : uppercase;
 		}
 	}
+	button.dismiss {
+		position         : absolute;
+		top              : 20px;
+		right            : 30px;
+		padding          : unset;
+		font-size        : 40px;
+		background-color : transparent;
+		opacity          : 0.6;
+		&:hover { opacity : 1; }
+	}
 }

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -49,6 +49,7 @@ const NotificationPopup = ()=>{
 		));
 	};
 
+	if(!notifications.length) return;
 	return <Dialog className='notificationPopup' dismisskeys={dissmissKeyList} closeText={DISMISS_BUTTON} >
 		<div className='header'>
 			<i className='fas fa-info-circle info'></i>