Added a notification popup similar to the "YOU ARE NOT USING CHROME" message. Can be used to notify users of current known issues, updates, etc.

Currently just reminds users to back up documents with a link to the Reddit FAQ.

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -8,6 +8,7 @@ const ErrorBar = require('./errorBar/errorBar.jsx');
 
 //TODO: move to the brew renderer
 const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
+const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
 
 const PAGE_HEIGHT = 1056;
 const PPR_THRESHOLD = 50;
@@ -132,7 +133,10 @@ const BrewRenderer = createClass({
 					style={{ height: this.state.height }}>
 
 					<ErrorBar errors={this.props.errors} />
-					<RenderWarnings />
+					<div className='popups'>
+						<RenderWarnings />
+						<NotificationPopup />
+					</div>
 
 					<div className='pages' ref='pages'>
 						{this.renderPages()}

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -0,0 +1,58 @@
+
+const React = require('react');
+const createClass = require('create-react-class');
+const _     = require('lodash');
+const cx    = require('classnames');	//Unused variable
+
+const DISMISS_KEY = 'dismiss_notification';
+
+const NotificationPopup = createClass({
+	getInitialState : function() {
+		return {
+			notifications : {}
+		};
+	},
+	componentDidMount : function() {
+		this.checkNotifications();
+		window.addEventListener('resize', this.checkNotifications);
+	},
+	componentWillUnmount : function() {
+		window.removeEventListener('resize', this.checkNotifications);
+	},
+	notifications : {
+		faq : function(){
+			return <li key='faq'>
+				<em>Protect your work! </em> <br />
+				At the moment we do not save a history of your projects, so 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='fa fa-times dismiss' onClick={this.dismiss}/>
+			<i className='fa fa-info-circle info' />
+			<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>
+			<ul>{_.values(this.state.notifications)}</ul>
+		</div>;
+	}
+});
+
+module.exports = NotificationPopup;

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -0,0 +1,61 @@
+.popups{
+	position         : fixed;
+	top				 : @navbarHeight;
+	right            : 15px;
+	z-index          : 10001;
+	width            : 350px;
+}
+
+.notificationPopup{
+	position		 : relative;
+	float			 : right;
+	display          : inline-block;	
+	width            : 350px;
+	padding          : 20px;
+	padding-bottom   : 10px;
+	padding-left     : 85px;
+	background-color : @blue;
+	color            : white;
+	a{
+		color       : @steel;
+		font-weight : 800;
+	}
+	i.info{
+		position  : absolute;
+		top       : 24px;
+		left      : 24px;
+		opacity   : 0.8;
+		font-size : 2.5em;
+	}
+	i.dismiss{
+		position : absolute;
+		top      : 10px;
+		right    : 10px;
+		cursor   : pointer;
+		opacity  : 0.6;
+		&:hover{
+			opacity : 1;
+		}
+	}
+	small{
+		opacity   : 0.7;
+		font-size : 0.6em;
+	}
+	h3{
+		font-size   : 1.1em;
+		font-weight : 800;
+	}
+	ul{
+		margin-top          : 15px;
+		font-size           : 0.8em;
+		list-style-position : outside;
+		list-style-type     : disc;
+		li{
+			font-size   : 0.8em;
+			line-height : 1.6em;
+			em{
+				font-weight : 800;
+			}
+		}
+	}
+}

shared/homebrewery/renderWarnings/renderWarnings.jsx

@@ -25,7 +25,7 @@ const RenderWarnings = createClass({
 			if(!isChrome){
 				return <li key='chrome'>
 					<em>Built for Chrome </em> <br />
-					Other browsers do not support
+					Other browsers do not support &nbsp;
 					<a target='_blank' href='https://developer.mozilla.org/en-US/docs/Web/CSS/column-span#Browser_compatibility'>
 						key features
 					</a> this site uses.

shared/homebrewery/renderWarnings/renderWarnings.less

@@ -1,16 +1,17 @@
-
 .renderWarnings{
-	position         : fixed;
+	position		 : relative;
+	float			 : right;
 	display          : inline-block;
-	top              : @navbarHeight;
-	right            : 15px;
-	z-index          : 10001;
 	width            : 350px;
 	padding          : 20px;
 	padding-bottom   : 10px;
 	padding-left     : 85px;
+	margin-bottom    : 10px;
 	background-color : @yellow;
 	color            : white;
+	a{
+		font-weight : 800;
+	}
 	i.ohno{
 		position  : absolute;
 		top       : 24px;