Move renderWarnings to use Dialog

shared/homebrewery/renderWarnings/renderWarnings.jsx

@@ -3,7 +3,7 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
 
-const DISMISS_KEY = 'dismiss_render_warning';
+import Dialog from '../../../client/components/dialog.jsx';
 
 const RenderWarnings = createClass({
 	displayName     : 'RenderWarnings',
@@ -34,9 +34,6 @@ const RenderWarnings = createClass({
 		},
 	},
 	checkWarnings : function(){
-		const hideDismiss = localStorage.getItem(DISMISS_KEY);
-		if(hideDismiss) return this.setState({ warnings: {} });
-
 		this.setState({
 			warnings : _.reduce(this.warnings, (r, fn, type)=>{
 				const element = fn();
@@ -45,20 +42,18 @@ const RenderWarnings = createClass({
 			}, {})
 		});
 	},
-	dismiss : function(){
-		localStorage.setItem(DISMISS_KEY, true);
-		this.checkWarnings();
-	},
 	render : function(){
 		if(_.isEmpty(this.state.warnings)) return null;
 
-		return <div className='renderWarnings'>
-			<i className='fas fa-times dismiss' onClick={this.dismiss}/>
+		const DISMISS_KEY = 'dismiss_render_warning';
+		const DISMISS_TEXT = <i className='fas fa-times dismiss' />;
+
+		return <Dialog className='renderWarnings' dismissKey={DISMISS_KEY} closeText={DISMISS_TEXT}>
 			<i className='fas fa-exclamation-triangle ohno' />
 			<h3>Render Warnings</h3>
 			<small>If this homebrew is rendering badly if might be because of the following:</small>
 			<ul>{_.values(this.state.warnings)}</ul>
-		</div>;
+		</Dialog>;
 	}
 });
 

shared/homebrewery/renderWarnings/renderWarnings.less

@@ -1,7 +1,6 @@
 .renderWarnings{
 	position		 : relative;
 	float			 : right;
-	display          : inline-block;
 	width            : 350px;
 	padding          : 20px;
 	padding-bottom   : 10px;
@@ -9,6 +8,7 @@
 	margin-bottom    : 10px;
 	background-color : @yellow;
 	color            : white;
+	border           : none;
 	a{
 		font-weight : 800;
 	}
@@ -19,12 +19,13 @@
 		opacity   : 0.8;
 		font-size : 2.5em;
 	}
-	i.dismiss{
+	button.dismiss{
 		position : absolute;
 		top      : 10px;
 		right    : 10px;
 		cursor   : pointer;
 		opacity  : 0.6;
+		background-color: transparent;
 		&:hover{
 			opacity : 1;
 		}