Break Dialog out of NotificationPopup, restore NotificationPopup to original position

client/components/dialog.jsx

@@ -0,0 +1,48 @@
+// Modal as a separate component
+const React = require('react');
+const { useState, useRef, useEffect } = React;
+
+function Modal({ dismissKey, blocking, children, ...rest }) {
+	const ref = useRef();
+
+	const [open, setOpen] = useState(false);
+
+	useEffect(()=>{
+		if(!window || !dismissKey) return;
+		if(!localStorage.getItem(dismissKey)){
+			setOpen(true);
+		}
+	}, []);
+
+	useEffect(()=>{
+		if(blocking) {
+			modal ? ref.current?.showModal() : ref.current?.show();
+		} else {
+			ref.current?.close();
+		}
+	}, [blocking]);
+
+	const dismiss = function(){
+		localStorage.setItem(dismissKey, true);
+		setOpen(false);
+	};
+
+	if(!open) return;
+	return (
+		<dialog
+			ref={ref}
+			onCancel={()=>dismiss()}
+			{...rest}
+		>
+			<button
+				className='dismiss'
+				onClick={()=>dismiss()}
+			>
+        Close
+			</button>
+			{children}
+		</dialog>
+	);
+}
+
+export default Modal;

client/components/notificationPopup/notificationPopup.jsx

@@ -1,80 +0,0 @@
-require('./notificationPopup.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
-
-const DISMISS_KEY = 'dismiss_notification12-04-23';
-
-const NotificationPopup = createClass({
-	displayName     : 'NotificationPopup',
-	getInitialState : function() {
-		return {
-			notifications : {}
-		};
-	},
-	componentDidMount : function() {
-		this.checkNotifications();
-		window.addEventListener('resize', this.checkNotifications);
-	},
-	componentWillUnmount : function() {
-		window.removeEventListener('resize', this.checkNotifications);
-	},
-	notifications : {
-		psa : function(){
-			return (
-				<>
-					<li key='psa'>
-						<em>Don't store IMAGES in Google Drive</em><br />
-						Google Drive is not an image service, and will block images from being used
-						in brews if they get more views than expected. Google has confirmed they won't fix
-						this, so we recommend you look for another image hosting service such as imgur, ImgBB or Google Photos.
-					</li>
-
-					<li key='googleDriveFolder'>
-						<em>Don't delete your Homebrewery folder on Google Drive!</em> <br />
-						We have had several reports of users losing their brews, not realizing
-						that they had deleted the files on their Google Drive. If you have a Homebrewery folder
-						on your Google Drive with *.txt files inside, <em>do not delete it</em>!
-						We cannot help you recover files that you have deleted from your own
-						Google Drive.
-					</li>
-
-					<li key='faq'>
-						<em>Protect your work! </em> <br />
-						If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews!&nbsp;
-						<a target='_blank' href='https://www.reddit.com/r/homebrewery/comments/adh6lh/faqs_psas_announcements/'>
-							See the FAQ
-						</a> to learn how to avoid losing your work!
-					</li>
-				</>
-			);
-		}
-	},
-	checkNotifications : function(){
-		const hideDismiss = localStorage.getItem(DISMISS_KEY);
-		if(hideDismiss) return this.setState({ notifications: {} });
-
-		this.setState({
-			notifications : _.mapValues(this.notifications, (fn)=>{ return fn(); })	//Convert notification functions into their return text value
-		});
-	},
-	dismiss : function(){
-		localStorage.setItem(DISMISS_KEY, true);
-		this.checkNotifications();
-	},
-	render : function(){
-		if(_.isEmpty(this.state.notifications)) return null;
-
-		return <div className='notificationPopup'>
-			<i className='fas fa-times dismiss' onClick={this.dismiss}/>
-			<i className='fas fa-info-circle info' />
-			<div className='header'>
-				<h3>Notice</h3>
-				<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
-			</div>
-			<ul>{_.values(this.state.notifications)}</ul>
-		</div>;
-	}
-});
-
-module.exports = NotificationPopup;

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -10,7 +10,7 @@ const ErrorBar = require('./errorBar/errorBar.jsx');
 
 //TODO: move to the brew renderer
 const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
-const NotificationPopup = require('../../../client/components/notificationPopup/notificationPopup.jsx');
+const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
 const Frame = require('react-frame-component').default;
 const dedent = require('dedent-tabs').default;
 const { printCurrentBrew } = require('../../../shared/helpers.js');
@@ -203,6 +203,12 @@ const BrewRenderer = (props)=>{
 				</div>
 				: null}
 
+			<ErrorBar errors={props.errors} />
+			<div className='popups'>
+				<RenderWarnings />
+				<NotificationPopup />
+			</div>
+
 			{/*render in iFrame so broken code doesn't crash the site.*/}
 			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
 				style={{ width: '100%', height: '100%', visibility: state.visibility }}
@@ -215,11 +221,6 @@ const BrewRenderer = (props)=>{
 					tabIndex={-1}
 					style={{ height: state.height }}>
 
-					<ErrorBar errors={props.errors} />
-					<div className='popups'>
-						<RenderWarnings />
-						<NotificationPopup />
-					</div>
 					<link href={`/themes/${rendererPath}/Blank/style.css`} type='text/css' rel='stylesheet'/>
 					{baseThemePath &&
 						<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} type='text/css' rel='stylesheet'/>

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -0,0 +1,43 @@
+require('./notificationPopup.less');
+const React = require('react');
+const _     = require('lodash');
+
+import Dialog from '../../../components/dialog.jsx';
+
+const DISMISS_KEY = 'dismiss_notification12-04-23';
+
+const NotificationPopup = (props)=>{
+	return <Dialog className='notificationPopup' dismissKey={DISMISS_KEY} blocking={false} {...props} >
+		<div className='header'>
+			<h3>Notice</h3>
+			<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
+		</div>
+		<ul>
+			<li key='psa'>
+				<em>Don't store IMAGES in Google Drive</em><br />
+				Google Drive is not an image service, and will block images from being used
+				in brews if they get more views than expected. Google has confirmed they won't fix
+				this, so we recommend you look for another image hosting service such as imgur, ImgBB or Google Photos.
+			</li>
+
+			<li key='googleDriveFolder'>
+				<em>Don't delete your Homebrewery folder on Google Drive!</em> <br />
+				We have had several reports of users losing their brews, not realizing
+				that they had deleted the files on their Google Drive. If you have a Homebrewery folder
+				on your Google Drive with *.txt files inside, <em>do not delete it</em>!
+				We cannot help you recover files that you have deleted from your own
+				Google Drive.
+			</li>
+
+			<li key='faq'>
+				<em>Protect your work! </em> <br />
+				If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews!&nbsp;
+				<a target='_blank' href='https://www.reddit.com/r/homebrewery/comments/adh6lh/faqs_psas_announcements/'>
+					See the FAQ
+				</a> to learn how to avoid losing your work!
+			</li>
+		</ul>
+	</Dialog>;
+};
+
+module.exports = NotificationPopup;

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -15,6 +15,7 @@
 	padding-left     : 25px;
 	background-color : @blue;
 	color            : white;
+	border           : none;
 	a{
 		color       : #e0e5c1;
 		font-weight : 800;
@@ -26,7 +27,7 @@
 		opacity   : 0.8;
 		font-size : 2.5em;
 	}
-	i.dismiss{
+	.dismiss{
 		position : absolute;
 		top      : 10px;
 		right    : 10px;