Merge branch 'master' into Language-Attribute

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -135,7 +135,8 @@ const BrewRenderer = createClass({
 
 	renderStyle : function() {
 		if(!this.props.style) return;
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.props.style} </style>` }} />;
+		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.props.style}\n} </style>` }} />;
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>\n${this.props.style}\n</style>` }} />;
 	},
 
 	renderPage : function(pageText, index){

client/homebrew/editor/editor.jsx

@@ -32,6 +32,7 @@ const Editor = createClass({
 			onTextChange  : ()=>{},
 			onStyleChange : ()=>{},
 			onMetaChange  : ()=>{},
+			reportError   : ()=>{},
 
 			renderer : 'legacy'
 		};
@@ -139,10 +140,10 @@ const Editor = createClass({
 
 						// Highlight injectors {style}
 						if(line.includes('{') && line.includes('}')){
-							const regex = /(?<!{){(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1}/g;
+							const regex = /(?:^|[^{\n])({(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\2})/gm;
 							let match;
 							while ((match = regex.exec(line)) != null) {
-								codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'injection' });
+								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'injection' });
 							}
 						}
 						// Highlight inline spans {{content}}
@@ -291,7 +292,8 @@ const Editor = createClass({
 					rerenderParent={this.rerenderParent} />
 				<MetadataEditor
 					metadata={this.props.brew}
-					onChange={this.props.onMetaChange} />
+					onChange={this.props.onMetaChange}
+					reportError={this.props.reportError}/>
 			</>;
 		}
 	},

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -4,18 +4,24 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
-const request = require('superagent');
+const request = require('../../utils/request-middleware.js');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Combobox = require('client/components/combobox.jsx');
 const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');
 
 const Themes = require('themes/themes.json');
-const validations = require('./validations.js')
+const validations = require('./validations.js');
 
 const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
 
 const homebreweryThumbnail = require('../../thumbnail.png');
 
+const callIfExists = (val, fn, ...args)=>{
+	if(val[fn]) {
+		val[fn](...args);
+	}
+};
+
 const MetadataEditor = createClass({
 	displayName     : 'MetadataEditor',
 	getDefaultProps : function() {
@@ -33,7 +39,8 @@ const MetadataEditor = createClass({
 				theme       : '5ePHB',
 				lang        : 'en'
 			},
-			onChange : ()=>{}
+			onChange    : ()=>{},
+			reportError : ()=>{}
 		};
 	},
 
@@ -55,15 +62,13 @@ const MetadataEditor = createClass({
 	},
 
 	handleFieldChange : function(name, e){
-		e.persist();
-
 		// load validation rules, and check input value against them
 		const inputRules = validations[name] ?? [];
 		const validationErr = inputRules.map((rule)=>rule(e.target.value)).filter(Boolean);
 
 		// if no validation rules, save to props
 		if(validationErr.length === 0){
-			e.target.setCustomValidity('');
+			callIfExists(e.target, 'setCustomValidity', '');
 			this.props.onChange({
 				...this.props.metadata,
 				[name] : e.target.value
@@ -73,10 +78,14 @@ const MetadataEditor = createClass({
 			const errMessage = validationErr.map((err)=>{
 				return `- ${err}`;
 			}).join('\n');
-			console.log(`Input error ${errMessage}`);
-			e.target.setCustomValidity(errMessage);
-			e.target.reportValidity();
-		};
+
+			// 	console.log(`Input error ${errMessage}`);
+			// 	e.target.setCustomValidity(errMessage);
+			// 	e.target.reportValidity();
+			// };
+			callIfExists(e.target, 'setCustomValidity', errMessage);
+			callIfExists(e.target, 'reportValidity');
+		}
 	},
 
 	handleSystem : function(system, e){
@@ -125,8 +134,12 @@ const MetadataEditor = createClass({
 
 		request.delete(`/api/${this.props.metadata.googleId ?? ''}${this.props.metadata.editId}`)
 			.send()
-			.end(function(err, res){
-				window.location.href = '/';
+			.end((err, res)=>{
+				if(err) {
+					this.props.reportError(err);
+				} else {
+					window.location.href = '/';
+				}
 			});
 	},
 
@@ -188,6 +201,10 @@ const MetadataEditor = createClass({
 				return <div className='item' key={''} onClick={()=>this.handleTheme(theme)} title={''}>
 					{`${theme.renderer} : ${theme.name}`}
 					<img src={`/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`}/>
+					<div className='preview'>
+						<h6>{`${theme.name}`} preview</h6>
+						<img src={`/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`}/>
+					</div>
 				</div>;
 			});
 		};
@@ -197,14 +214,14 @@ const MetadataEditor = createClass({
 
 		if(this.props.metadata.renderer == 'legacy') {
 			dropdown =
-				<Nav.dropdown className='disabled' trigger='disabled'>
+				<Nav.dropdown className='disabled value' trigger='disabled'>
 					<div>
 						{`Themes are not supported in the Legacy Renderer`} <i className='fas fa-caret-down'></i>
 					</div>
 				</Nav.dropdown>;
 		} else {
 			dropdown =
-				<Nav.dropdown trigger='click'>
+				<Nav.dropdown className='value' trigger='click'>
 					<div>
 						{`${_.upperFirst(currentTheme.renderer)} : ${currentTheme.name}`} <i className='fas fa-caret-down'></i>
 					</div>
@@ -290,6 +307,8 @@ const MetadataEditor = createClass({
 
 	render : function(){
 		return <div className='metadataEditor'>
+			<h1 className='sectionHead'>Brew</h1>
+
 			<div className='field title'>
 				<label>title</label>
 				<input type='text' className='value'
@@ -323,8 +342,6 @@ const MetadataEditor = createClass({
 				values={this.props.metadata.tags}
 				onChange={(e)=>this.handleFieldChange('tags', e)}/>
 
-			{this.renderAuthors()}
-
 			<div className='field systems'>
 				<label>systems</label>
 				<div className='value'>
@@ -338,6 +355,23 @@ const MetadataEditor = createClass({
 
 			{this.renderRenderOptions()}
 
+			<hr/>
+
+			<h1 className='sectionHead'>Authors</h1>
+
+			{this.renderAuthors()}
+
+			<StringArrayEditor label='invited authors' valuePatterns={[/.+/]}
+				validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
+				placeholder='invite author' unique={true}
+				values={this.props.metadata.invitedAuthors}
+				notes={['Invited authors are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
+				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}/>
+
+			<hr/>
+
+			<h1 className='sectionHead'>Privacy</h1>
+
 			<div className='field publish'>
 				<label>publish</label>
 				<div className='value'>

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -10,6 +10,15 @@
 	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
 	overflow-y       : auto;
 
+	.sectionHead {
+		font-weight: 1000;
+		margin: 20px 0;
+
+		&:first-of-type {
+			margin-top: 0;
+		}
+	}
+
 	& > div {
 		margin-bottom: 10px;
 	}
@@ -26,13 +35,13 @@
 		flex-direction: column;
 		flex: 5 0 200px;
 		gap: 10px;
-		
 	}
 
 
 
 	.field{
 		display       : flex;
+		flex-wrap     : wrap;
 		width         : 100%;
 		min-width     : 200px;
 		position      : relative;
@@ -89,6 +98,10 @@
 		&.language .language-dropdown {
 			max-width:150px;
 		}
+		small {
+			font-size  : 0.6em;
+			font-style : italic;
+		}
 	}
 
 
@@ -139,10 +152,6 @@
 		button.unpublish{
 			.button(@silver);
 		}
-		small{
-			font-size  : 0.6em;
-			font-style : italic;
-		}
 	}
 
 	.delete.field .value{
@@ -159,7 +168,6 @@
 		font-size : 13.33px;
 		.navDropdownContainer {
 			background-color	: white;
-			width				: 100%;
 			position			: relative;
 			z-index				: 500;
 			&.disabled {
@@ -182,24 +190,51 @@
 			}
 			.navDropdown {
 				box-shadow	: 0px 5px 10px rgba(0, 0, 0, 0.3);
-				position	: absolute;
-				width		: 100%;
+				position	  : absolute;
+				width		    : 100%;
 				.item {
-					padding				: 3px 3px;
-					border-top			: 1px solid rgb(118, 118, 118);
-					position			: relative;
-					overflow			: hidden;
+					padding           : 3px 3px;
+					border-top        : 1px solid rgb(118, 118, 118);
+					position          : relative;
+					overflow          : visible;
 					background-color	: white;
+					.preview {
+						display       : flex;
+  					flex-direction: column;
+						background    : #ccc;
+						border-radius : 5px;
+  					box-shadow    : 0 0 5px black;
+						width         : 200px;
+						color         :black;
+						position      : absolute;
+						top           : 0;
+						right         : 0;
+						opacity       : 0;
+						transition    : opacity 250ms ease;
+						z-index       : 1;
+						overflow      :hidden;
+						h6 {
+							font-weight   : 900;
+							padding-inline:1em;
+							padding-block :.5em;
+							border-bottom :2px solid hsl(0,0%,40%);
+						}
+					}
 					&:hover {
 						background-color	: @blue;
-						color				: white;
+						color				      : white;
 					}
-					img {
-						mask-image			: linear-gradient(90deg, transparent, black 20%);
+					&:hover > .preview {
+						opacity: 1;
+					}
+					>img {
+						mask-image			    : linear-gradient(90deg, transparent, black 20%);
 						-webkit-mask-image	: linear-gradient(90deg, transparent, black 20%);
-				    position	: absolute;
-				    left		: ~"max(100px, 100% - 300px)";
-				    top			: 0px;
+				    	position			    : absolute;
+				    	right				      : 0;
+				    	top					      : 0px;
+						width				        : 50%;
+						height				      : 100%;
 					}
 				}
 			}
@@ -207,6 +242,7 @@
 	}
 	.field .list {
 		display: flex;
+		flex: 1 0;
 		flex-wrap: wrap;
 
 		> * {

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -163,15 +163,23 @@ const SnippetGroup = createClass({
 			onSnippetClick : function(){},
 		};
 	},
-	handleSnippetClick : function(snippet){
+	handleSnippetClick : function(e, snippet){
+		e.stopPropagation();
 		this.props.onSnippetClick(execute(snippet.gen, this.props.brew));
 	},
-	renderSnippets : function(){
-		return _.map(this.props.snippets, (snippet)=>{
-			return <div className='snippet' key={snippet.name} onClick={()=>this.handleSnippetClick(snippet)}>
+	renderSnippets : function(snippets){
+		return _.map(snippets, (snippet)=>{
+			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
 				<i className={snippet.icon} />
-				{snippet.name}
+				<span className='name'>{snippet.name}</span>
+				{snippet.experimental && <span className='beta'>beta</span>}
+				{snippet.subsnippets && <>
+					<i className='fas fa-caret-right'></i>
+					<div className='dropdown side'>
+						{this.renderSnippets(snippet.subsnippets)}
+					</div></>}
 			</div>;
+
 		});
 	},
 
@@ -182,7 +190,7 @@ const SnippetGroup = createClass({
 				<span className='groupName'>{this.props.groupName}</span>
 			</div>
 			<div className='dropdown'>
-				{this.renderSnippets()}
+				{this.renderSnippets(this.props.snippets)}
 			</div>
 		</div>;
 	},

client/homebrew/editor/snippetbar/snippetbar.less

@@ -1,4 +1,4 @@
-
+@import (less) './client/icons/customIcons.less';
 .snippetBar{
 	@menuHeight      : 25px;
 	position         : relative;
@@ -83,7 +83,7 @@
 	.snippetGroup{
 		border-right   : 1px solid black;
 		&:hover{
-			.dropdown{
+			&>.dropdown{
 				visibility : visible;
 			}
 		}
@@ -97,15 +97,45 @@
 			background-color : #ddd;
 			.snippet{
 				.animate(background-color);
-				padding   : 5px;
-				cursor    : pointer;
-				font-size : 10px;
+				display     : flex;
+				align-items : center;
+				min-width   : max-content;
+				padding     : 5px;
+				cursor      : pointer;
+				font-size   : 10px;
 				i{
 					margin-right : 8px;
 					font-size    : 1.2em;
+					height       : 1.2em;
+					&~i{
+						margin-right: 0;
+						margin-left: 5px;
+					}
+				}
+				.name {
+					margin-right  : auto;
+				}
+				.beta {
+					color         : white;
+					padding       : 4px 6px;
+					line-height   : 1em;
+					margin-left   : 5px;
+					align-self    : center;
+					background    : grey;
+					border-radius : 12px;
+					font-family   : monospace;
 				}
 				&:hover{
 					background-color : #999;
+					&>.dropdown{
+						visibility : visible;
+						&.side {
+							left: 100%;
+							top: 0%;
+							margin-left:0;
+							box-shadow: -1px 1px 2px 0px #999;
+						}
+					}
 				}
 			}
 		}

client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx

@@ -9,7 +9,9 @@ const StringArrayEditor = createClass({
 			label         : '',
 			values        : [],
 			valuePatterns : null,
+			validators    : [],
 			placeholder   : '',
+			notes         : [],
 			unique        : false,
 			cannotEdit    : [],
 			onChange      : ()=>{}
@@ -83,7 +85,8 @@ const StringArrayEditor = createClass({
 		}
 		const matchesPatterns = !this.props.valuePatterns || this.props.valuePatterns.some((pattern)=>!!(value || '').match(pattern));
 		const uniqueIfSet = !this.props.unique || !values.includes(value);
-		return matchesPatterns && uniqueIfSet;
+		const passesValidators = !this.props.validators || this.props.validators.every((validator)=>validator(value));
+		return matchesPatterns && uniqueIfSet && passesValidators;
 	},
 
 	handleValueInputKeyDown : function(event, index) {
@@ -123,17 +126,21 @@ const StringArrayEditor = createClass({
 			</div>
 		);
 
-		return <div className='field values'>
+		return <div className='field'>
 			<label>{this.props.label}</label>
-			<div className='list'>
-				{valueElements}
-				<div className='input-group'>
-					<input type='text' className={`value ${this.valueIsValid(this.state.temporaryValue) ? '' : 'invalid'}`} placeholder={this.props.placeholder}
-						value={this.state.temporaryValue}
-						onKeyDown={(e)=>this.handleValueInputKeyDown(e)}
-						onChange={(e)=>this.setState({ temporaryValue: e.target.value })}/>
-					{this.valueIsValid(this.state.temporaryValue) ? <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.addValue(this.state.temporaryValue); }}><i className='fa fa-check fa-fw'/></div> : null}
+			<div style={{ flex: '1 0' }}>
+				<div className='list'>
+					{valueElements}
+					<div className='input-group'>
+						<input type='text' className={`value ${this.valueIsValid(this.state.temporaryValue) ? '' : 'invalid'}`} placeholder={this.props.placeholder}
+							   value={this.state.temporaryValue}
+							   onKeyDown={(e)=>this.handleValueInputKeyDown(e)}
+							   onChange={(e)=>this.setState({ temporaryValue: e.target.value })}/>
+						{this.valueIsValid(this.state.temporaryValue) ? <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.addValue(this.state.temporaryValue); }}><i className='fa fa-check fa-fw'/></div> : null}
+					</div>
 				</div>
+
+				{this.props.notes ? this.props.notes.map((n)=><p><small>{n}</small></p>) : null}
 			</div>
 		</div>;
 	}

client/homebrew/googleDrive.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg">
+	<path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
+	<path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47"/>
+	<path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#ea4335"/>
+	<path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/>
+	<path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/>
+	<path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
+</svg>

client/homebrew/navbar/error-navitem.jsx

@@ -0,0 +1,85 @@
+require('./error-navitem.less');
+const React = require('react');
+const Nav = require('naturalcrit/nav/nav.jsx');
+const createClass = require('create-react-class');
+
+const ErrorNavItem = createClass({
+	getDefaultProps : function() {
+		return {
+			error  : '',
+			parent : null
+		};
+	},
+	render : function() {
+		const clearError = ()=>{
+			const state = {
+				error : null
+			};
+			if(this.props.parent.state.isSaving) {
+				state.isSaving = false;
+			}
+			this.props.parent.setState(state);
+		};
+
+		const error = this.props.error;
+		const response = error.response;
+		const status = response.status;
+		const message = response.body?.message;
+		let errMsg = '';
+		try {
+			errMsg += `${error.toString()}\n\n`;
+			errMsg += `\`\`\`\n${error.stack}\n`;
+			errMsg += `${JSON.stringify(response.error, null, '  ')}\n\`\`\``;
+			console.log(errMsg);
+		} catch (e){}
+
+		if(status === 409) {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					{message ?? 'Conflict: please refresh to get latest changes'}
+				</div>
+			</Nav.item>;
+		} else if(status === 412) {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					{message ?? 'Your client is out of date. Please save your changes elsewhere and refresh.'}
+				</div>
+			</Nav.item>;
+		}
+
+		if(response.req.url.match(/^\/api.*Google.*$/m)){
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					Looks like your Google credentials have
+					expired! Visit our log in page to sign out
+					and sign back in with Google,
+					then try saving again!
+					<a target='_blank' rel='noopener noreferrer'
+						href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
+						<div className='confirm'>
+							Sign In
+						</div>
+					</a>
+					<div className='deny'>
+						Not Now
+					</div>
+				</div>
+			</Nav.item>;
+		}
+
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer'>
+				Looks like there was a problem saving. <br />
+				Report the issue <a target='_blank' rel='noopener noreferrer' href={`https://github.com/naturalcrit/homebrewery/issues/new?template=save_issue.yml&error-code=${encodeURIComponent(errMsg)}`}>
+				here
+				</a>.
+			</div>
+		</Nav.item>;
+	}
+});
+
+module.exports = ErrorNavItem;

client/homebrew/navbar/error-navitem.less

@@ -0,0 +1,77 @@
+.navItem {
+  &.error {
+    position         : relative;
+    background-color : @red;
+  }
+
+  .errorContainer{
+    animation-name: glideDown;
+    animation-duration: 0.4s;
+    position         : absolute;
+    top              : 100%;
+    left             : 50%;
+    z-index          : 1000;
+    width            : 140px;
+    padding          : 3px;
+    color            : white;
+    background-color : #333;
+    border           : 3px solid #444;
+    border-radius    : 5px;
+    transform        : translate(-50% + 3px, 10px);
+    text-align       : center;
+    font-size        : 10px;
+    font-weight      : 800;
+    text-transform   : uppercase;
+    a{
+      color : @teal;
+    }
+    &:before {
+      content: "";
+      width: 0px;
+      height: 0px;
+      position: absolute;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid #444;
+      left: 53px;
+      top: -23px;
+    }
+    &:after {
+      content: "";
+      width: 0px;
+      height: 0px;
+      position: absolute;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid #333;
+      left: 53px;
+      top: -19px;
+    }
+    .deny {
+      width            : 48%;
+      margin           : 1px;
+      padding          : 5px;
+      background-color : #333;
+      display          : inline-block;
+      border-left      : 1px solid #666;
+      .animate(background-color);
+      &:hover{
+        background-color : red;
+      }
+    }
+    .confirm {
+      width            : 48%;
+      margin           : 1px;
+      padding          : 5px;
+      background-color : #333;
+      display          : inline-block;
+      color            : white;
+      .animate(background-color);
+      &:hover{
+        background-color : teal;
+      }
+    }
+  }
+}

client/homebrew/pages/accountPage/accountPage.jsx

@@ -42,7 +42,6 @@ const AccountPage = createClass({
 	},
 
 	renderUiItems : function() {
-		// console.log(this.props.uiItems);
 		return 	<>
 			<div className='dataGroup'>
 				<h1>Account Information  <i className='fas fa-user'></i></h1>
@@ -51,12 +50,16 @@ const AccountPage = createClass({
 			</div>
 			<div className='dataGroup'>
 				<h3>Homebrewery Information <NaturalCritIcon /></h3>
-				<p><strong>Brews on Homebrewery: </strong> {this.props.uiItems.mongoCount || '-'}</p>
+				<p><strong>Brews on Homebrewery: </strong> {this.props.uiItems.mongoCount}</p>
 			</div>
 			<div className='dataGroup'>
 				<h3>Google Information <i className='fab fa-google-drive'></i></h3>
 				<p><strong>Linked to Google: </strong> {this.props.uiItems.googleId ? 'YES' : 'NO'}</p>
-				{this.props.uiItems.googleId ? <p><strong>Brews on Google Drive: </strong> {this.props.uiItems.fileCount || '-'}</p> : '' }
+				{this.props.uiItems.googleId &&
+					<p>
+						<strong>Brews on Google Drive: </strong> {this.props.uiItems.googleCount ?? <>Unable to retrieve files - <a href='https://github.com/naturalcrit/homebrewery/discussions/1580'>follow these steps to renew your Google credentials.</a></>}
+					</p>
+				}
 			</div>
 		</>;
 	},

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -4,9 +4,9 @@ const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
 const moment = require('moment');
-const request = require('superagent');
+const request = require('../../../../utils/request-middleware.js');
 
-const googleDriveIcon = require('../../../../googleDrive.png');
+const googleDriveIcon = require('../../../../googleDrive.svg');
 const dedent = require('dedent-tabs').default;
 
 const BrewItem = createClass({
@@ -18,7 +18,8 @@ const BrewItem = createClass({
 				description : '',
 				authors     : [],
 				stubbed     : true
-			}
+			},
+			reportError : ()=>{}
 		};
 	},
 
@@ -33,8 +34,12 @@ const BrewItem = createClass({
 
 		request.delete(`/api/${this.props.brew.googleId ?? ''}${this.props.brew.editId}`)
 			.send()
-			.end(function(err, res){
-				location.reload();
+			.end((err, res)=>{
+				if(err) {
+					this.props.reportError(err);
+				} else {
+					location.reload();
+				}
 			});
 	},
 

client/homebrew/pages/basePages/listPage/brewItem/brewItem.less

@@ -94,7 +94,7 @@
 		}
 	}
 	.googleDriveIcon {
-		height	: 20px;
+		height	: 18px;
 		padding : 0px;
 		margin  : -5px;
 	}

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -23,7 +23,8 @@ const ListPage = createClass({
 					brews : []
 				}
 			],
-			navItems : <></>
+			navItems    : <></>,
+			reportError : null
 		};
 	},
 	getInitialState : function() {
@@ -81,7 +82,7 @@ const ListPage = createClass({
 		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
 
 		return _.map(brews, (brew, idx)=>{
-			return <BrewItem brew={brew} key={idx}/>;
+			return <BrewItem brew={brew} key={idx} reportError={this.props.reportError}/>;
 		});
 	},
 
@@ -218,12 +219,13 @@ const ListPage = createClass({
 
 	render : function(){
 		return <div className='listPage sitePage'>
+			{/*<style>@layer V3_5ePHB, bundle;</style>*/}
 			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
 			{this.props.navItems}
 			{this.renderSortOptions()}
 
 			<div className='content V3'>
-				<div className='phb page'>
+				<div className='page'>
 					{this.renderBrewCollection(this.state.brewCollection)}
 				</div>
 			</div>

client/homebrew/pages/basePages/listPage/listPage.less

@@ -10,14 +10,14 @@
 	-moz-column-width    : auto;
 	-webkit-column-gap   : auto;
 	-moz-column-gap      : auto;
+	height               : auto;
+	min-height           : 279.4mm;
+	margin               : 20px auto;
 }
 .listPage{
 	.content{
-		.phb{
-			.noColumns();
-			height     : auto;
-			min-height : 279.4mm;
-			margin     : 20px auto;
+		.page{
+			.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
 			&::after{
 				display : none;
 			}

client/homebrew/pages/editPage/editPage.jsx

@@ -3,7 +3,7 @@ require('./editPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
-const request = require('superagent');
+const request = require('../../utils/request-middleware.js');
 const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
@@ -12,6 +12,7 @@ const Navbar = require('../../navbar/navbar.jsx');
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
 const PrintLink = require('../../navbar/print.navitem.jsx');
+const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 
@@ -21,8 +22,9 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const Markdown = require('naturalcrit/markdown.js');
 
-const googleDriveActive = require('../../googleDrive.png');
-const googleDriveInactive = require('../../googleDriveMono.png');
+const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
+
+const googleDriveIcon = require('../../googleDrive.svg');
 
 const SAVE_TIMEOUT = 3000;
 
@@ -30,25 +32,7 @@ const EditPage = createClass({
 	displayName     : 'EditPage',
 	getDefaultProps : function() {
 		return {
-			brew : {
-				text      : '',
-				style     : '',
-				shareId   : null,
-				editId    : null,
-				createdAt : null,
-				updatedAt : null,
-				gDrive    : false,
-				trashed   : false,
-
-				title       : '',
-				description : '',
-				tags        : '',
-				published   : false,
-				authors     : [],
-				systems     : [],
-				renderer    : 'legacy',
-				lang        : 'en'
-			}
+			brew : DEFAULT_BREW_LOAD
 		};
 	},
 
@@ -61,7 +45,7 @@ const EditPage = createClass({
 			alertLoginToTransfer   : false,
 			saveGoogle             : this.props.brew.googleId ? true : false,
 			confirmGoogleTransfer  : false,
-			errors                 : null,
+			error                  : null,
 			htmlErrors             : Markdown.validate(this.props.brew.text),
 			url                    : '',
 			autoSave               : true,
@@ -76,7 +60,6 @@ const EditPage = createClass({
 			url : window.location.href
 		});
 
-
 		this.savedBrew = JSON.parse(JSON.stringify(this.props.brew)); //Deep copy
 
 		this.setState({ autoSave: JSON.parse(localStorage.getItem('AUTOSAVE_ON')) ?? true }, ()=>{
@@ -173,7 +156,10 @@ const EditPage = createClass({
 		this.setState((prevState)=>({
 			confirmGoogleTransfer : !prevState.confirmGoogleTransfer
 		}));
-		this.clearErrors();
+		this.setState({
+			error    : null,
+			isSaving : false
+		});
 	},
 
 	closeAlerts : function(event){
@@ -189,24 +175,16 @@ const EditPage = createClass({
 		this.setState((prevState)=>({
 			saveGoogle : !prevState.saveGoogle,
 			isSaving   : false,
-			errors     : null
+			error      : null
 		}), ()=>this.save());
 	},
 
-	clearErrors : function(){
-		this.setState({
-			errors   : null,
-			isSaving : false
-
-		});
-	},
-
 	save : async function(){
 		if(this.debounceSave && this.debounceSave.cancel) this.debounceSave.cancel();
 
 		this.setState((prevState)=>({
 			isSaving   : true,
-			errors     : null,
+			error      : null,
 			htmlErrors : Markdown.validate(prevState.brew.text)
 		}));
 
@@ -221,8 +199,9 @@ const EditPage = createClass({
 			.send(brew)
 			.catch((err)=>{
 				console.log('Error Updating Local Brew');
-				this.setState({ errors: err });
+				this.setState({ error: err });
 			});
+		if(!res) return;
 
 		this.savedBrew = res.body;
 		history.replaceState(null, null, `/edit/${this.savedBrew.editId}`);
@@ -231,7 +210,8 @@ const EditPage = createClass({
 			brew : { ...prevState.brew,
 				googleId : this.savedBrew.googleId ? this.savedBrew.googleId : null,
 				editId 	 : this.savedBrew.editId,
-				shareId  : this.savedBrew.shareId
+				shareId  : this.savedBrew.shareId,
+				version  : this.savedBrew.version
 			},
 			isPending   : false,
 			isSaving    : false,
@@ -241,10 +221,7 @@ const EditPage = createClass({
 
 	renderGoogleDriveIcon : function(){
 		return <Nav.item className='googleDriveStorage' onClick={this.handleGoogleClick}>
-			{this.state.saveGoogle
-				? <img src={googleDriveActive} alt='googleDriveActive'/>
-				: <img src={googleDriveInactive} alt='googleDriveInactive'/>
-			}
+			<img src={googleDriveIcon} className={this.state.saveGoogle ? '' : 'inactive'} alt='Google Drive icon'/>
 
 			{this.state.confirmGoogleTransfer &&
 				<div className='errorContainer' onClick={this.closeAlerts}>
@@ -281,67 +258,6 @@ const EditPage = createClass({
 	},
 
 	renderSaveButton : function(){
-		if(this.state.errors){
-			let errMsg = '';
-			try {
-				errMsg += `${this.state.errors.toString()}\n\n`;
-				errMsg += `\`\`\`\n${this.state.errors.stack}\n`;
-				errMsg += `${JSON.stringify(this.state.errors.response.error, null, '  ')}\n\`\`\``;
-				console.log(errMsg);
-			} catch (e){}
-
-			// if(this.state.errors.status == '401'){
-			// 	return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			// 		Oops!
-			// 		<div className='errorContainer' onClick={this.clearErrors}>
-			// 		You must be signed in to a Google account
-			// 			to save this to<br />Google Drive!<br />
-			// 			<a target='_blank' rel='noopener noreferrer'
-			// 				href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
-			// 				<div className='confirm'>
-			// 					Sign In
-			// 				</div>
-			// 			</a>
-			// 			<div className='deny'>
-			// 				Not Now
-			// 			</div>
-			// 		</div>
-			// 	</Nav.item>;
-			// }
-
-			if(this.state.errors.response.req.url.match(/^\/api.*Google.*$/m)){
-				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-					Oops!
-					<div className='errorContainer' onClick={this.clearErrors}>
-					Looks like your Google credentials have
-					expired! Visit our log in page to sign out
-					and sign back in with Google,
-					then try saving again!
-						<a target='_blank' rel='noopener noreferrer'
-							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
-							<div className='confirm'>
-								Sign In
-							</div>
-						</a>
-						<div className='deny'>
-							Not Now
-						</div>
-					</div>
-				</Nav.item>;
-			}
-
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer'>
-					Looks like there was a problem saving. <br />
-					Report the issue <a target='_blank' rel='noopener noreferrer'
-						href={`https://github.com/naturalcrit/homebrewery/issues/new?template=save_issue.yml&error-code=${encodeURIComponent(errMsg)}`}>
-						here
-					</a>.
-				</div>
-			</Nav.item>;
-		}
-
 		if(this.state.autoSaveWarning && this.hasChanges()){
 			this.setAutosaveWarning();
 			const elapsedTime = Math.round((new Date() - this.state.unsavedTime) / 1000 / 60);
@@ -385,6 +301,12 @@ const EditPage = createClass({
 		this.warningTimer;
 	},
 
+	errorReported : function(error) {
+		this.setState({
+			error
+		});
+	},
+
 	renderAutoSaveButton : function(){
 		return <Nav.item onClick={this.handleAutoSave}>
 			Autosave <i className={this.state.autoSave ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
@@ -429,10 +351,13 @@ const EditPage = createClass({
 
 			<Nav.section>
 				{this.renderGoogleDriveIcon()}
-				<Nav.dropdown className='save-menu'>
-					{this.renderSaveButton()}
-					{this.renderAutoSaveButton()}
-				</Nav.dropdown>
+				{this.state.error ?
+					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
+					<Nav.dropdown className='save-menu'>
+						{this.renderSaveButton()}
+						{this.renderAutoSaveButton()}
+					</Nav.dropdown>
+				}
 				<NewBrew />
 				<HelpNavItem/>
 				<Nav.dropdown>
@@ -470,6 +395,7 @@ const EditPage = createClass({
 						onTextChange={this.handleTextChange}
 						onStyleChange={this.handleStyleChange}
 						onMetaChange={this.handleMetaChange}
+						reportError={this.errorReported}
 						renderer={this.state.brew.renderer}
 					/>
 					<BrewRenderer

client/homebrew/pages/editPage/editPage.less

@@ -13,87 +13,17 @@
 			cursor : initial;
 			color  : #666;
 		}
-		&.error{
-			position         : relative;
-			background-color : @red;
-		}
 	}
 	.googleDriveStorage {
 		position : relative;
 	}
 	.googleDriveStorage img{
-		height	: 20px;
+		height	: 18px;
 		padding : 0px;
 		margin  : -5px;
-	}
-	.errorContainer{
-		animation-name: glideDown;
-		animation-duration: 0.4s;
-		position         : absolute;
-		top              : 100%;
-		left             : 50%;
-		z-index          : 500;
-		width            : 140px;
-		padding          : 3px;
-		color            : white;
-		background-color : #333;
-		border           : 3px solid #444;
-		border-radius    : 5px;
-		transform        : translate(-50% + 3px, 10px);
-		text-align       : center;
-		font-size        : 10px;
-		font-weight      : 800;
-		text-transform   : uppercase;
-		a{
-			color : @teal;
-		}
-		&:before {
-			content: "";
-			width: 0px;
-			height: 0px;
-			position: absolute;
-			border-left: 10px solid transparent;
-			border-right: 10px solid transparent;
-			border-top: 10px solid transparent;
-			border-bottom: 10px solid #444;
-			left: 53px;
-			top: -23px;
-		}
-		&:after {
-			content: "";
-			width: 0px;
-			height: 0px;
-			position: absolute;
-			border-left: 10px solid transparent;
-			border-right: 10px solid transparent;
-			border-top: 10px solid transparent;
-			border-bottom: 10px solid #333;
-			left: 53px;
-			top: -19px;
-		}
-		.deny {
-			width            : 48%;
-		  margin           : 1px;
-			padding          : 5px;
-			background-color : #333;
-			display          : inline-block;
-			border-left      : 1px solid #666;
-			.animate(background-color);
-			&:hover{
-				background-color : red;
-			}
-		}
-		.confirm {
-			width            : 48%;
-			margin           : 1px;
-			padding          : 5px;
-			background-color : #333;
-			display          : inline-block;
-			color            : white;
-			.animate(background-color);
-			&:hover{
-				background-color : teal;
-			}
+
+		&.inactive {
+			filter: grayscale(1);
 		}
 	}
 }

client/homebrew/pages/homePage/homePage.jsx

@@ -3,7 +3,7 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
-const request = require('superagent');
+const request = require('../../utils/request-middleware.js');
 const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
@@ -12,35 +12,38 @@ const NewBrewItem = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
+const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 
 
 const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
-
+const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
 
 const HomePage = createClass({
 	displayName     : 'HomePage',
 	getDefaultProps : function() {
 		return {
-			brew : {
-				text : '',
-			},
-			ver : '0.0.0'
+			brew : DEFAULT_BREW,
+			ver  : '0.0.0'
 		};
 	},
 	getInitialState : function() {
 		return {
 			brew        : this.props.brew,
-			welcomeText : this.props.brew.text
+			welcomeText : this.props.brew.text,
+			error       : undefined
 		};
 	},
 	handleSave : function(){
 		request.post('/api')
 			.send(this.state.brew)
 			.end((err, res)=>{
-				if(err) return;
+				if(err) {
+					this.setState({ error: err });
+					return;
+				}
 				const brew = res.body;
 				window.location = `/edit/${brew.editId}`;
 			});
@@ -56,6 +59,10 @@ const HomePage = createClass({
 	renderNavbar : function(){
 		return <Navbar ver={this.props.ver}>
 			<Nav.section>
+				{this.state.error ?
+					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
+					null
+				}
 				<NewBrewItem />
 				<HelpNavItem />
 				<RecentNavItem />

client/homebrew/pages/homePage/homePage.less

@@ -40,4 +40,11 @@
 			right : 350px;
 		}
 	}
+
+	.navItem.save{
+		background-color: @orange;
+		&:hover{
+			background-color: @green;
+		}
+	}
 }

client/homebrew/pages/homePage/welcome_msg.md

@@ -36,7 +36,7 @@ After clicking the "Print" item in the navbar a new page will open and a print d
 If you want to save ink or have a monochrome printer, add the **PRINT → {{fas,fa-tint}} Ink Friendly** snippet to your brew!
 }}
 
-![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px}
+![homebrew mug](https://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px}
 
 {{artist,bottom:160px,left:100px
 ##### Homebrew Mug

client/homebrew/pages/newPage/newPage.jsx

@@ -3,13 +3,14 @@ require('./newPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
-const request = require('superagent');
+const request = require('../../utils/request-middleware.js');
 
 const Markdown = require('naturalcrit/markdown.js');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
+const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
 
@@ -17,6 +18,8 @@ const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
+const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
+
 const BREWKEY = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
 const METAKEY = 'homebrewery-new-meta';
@@ -26,38 +29,18 @@ const NewPage = createClass({
 	displayName     : 'NewPage',
 	getDefaultProps : function() {
 		return {
-			brew : {
-				text        : '',
-				style       : undefined,
-				title       : '',
-				description : '',
-				renderer    : 'V3',
-				theme       : '5ePHB',
-				lang        : 'en'
-			}
+			brew : DEFAULT_BREW
 		};
 	},
 
 	getInitialState : function() {
-		let brew = this.props.brew;
-
-		if(this.props.brew.shareId) {
-			brew = {
-				text        : brew.text        ?? '',
-				style       : brew.style       ?? undefined,
-				title       : brew.title       ?? '',
-				description : brew.description ?? '',
-				renderer    : brew.renderer    ?? 'legacy',
-				theme       : brew.theme       ?? '5ePHB',
-				lang        : brew.lang        ?? 'en'
-			};
-		}
+		const brew = this.props.brew;
 
 		return {
 			brew       : brew,
 			isSaving   : false,
 			saveGoogle : (global.account && global.account.googleId ? true : false),
-			errors     : null,
+			error      : null,
 			htmlErrors : Markdown.validate(brew.text)
 		};
 	},
@@ -86,7 +69,8 @@ const NewPage = createClass({
 		}
 
 		localStorage.setItem(BREWKEY, brew.text);
-		localStorage.setItem(STYLEKEY, brew.style);
+		if(brew.style)
+			localStorage.setItem(STYLEKEY, brew.style);
 		localStorage.setItem(METAKEY, JSON.stringify({ 'renderer': brew.renderer, 'theme': brew.theme, 'lang': brew.lang }));
 	},
 	componentWillUnmount : function() {
@@ -143,14 +127,6 @@ const NewPage = createClass({
 		;
 	},
 
-	clearErrors : function(){
-		this.setState({
-			errors   : null,
-			isSaving : false
-
-		});
-	},
-
 	save : async function(){
 		this.setState({
 			isSaving : true
@@ -173,7 +149,7 @@ const NewPage = createClass({
 			.send(brew)
 			.catch((err)=>{
 				console.log(err);
-				this.setState({ isSaving: false, errors: err });
+				this.setState({ isSaving: false, error: err });
 			});
 		if(!res) return;
 
@@ -185,67 +161,6 @@ const NewPage = createClass({
 	},
 
 	renderSaveButton : function(){
-		if(this.state.errors){
-			let errMsg = '';
-			try {
-				errMsg += `${this.state.errors.toString()}\n\n`;
-				errMsg += `\`\`\`\n${this.state.errors.stack}\n`;
-				errMsg += `${JSON.stringify(this.state.errors.response.error, null, '  ')}\n\`\`\``;
-				console.log(errMsg);
-			} catch (e){}
-
-			// if(this.state.errors.status == '401'){
-			// 	return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			// 		Oops!
-			// 		<div className='errorContainer' onClick={this.clearErrors}>
-			// 		You must be signed in to a Google account
-			// 			to save this to<br />Google Drive!<br />
-			// 			<a target='_blank' rel='noopener noreferrer'
-			// 				href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
-			// 				<div className='confirm'>
-			// 					Sign In
-			// 				</div>
-			// 			</a>
-			// 			<div className='deny'>
-			// 				Not Now
-			// 			</div>
-			// 		</div>
-			// 	</Nav.item>;
-			// }
-
-			if(this.state.errors.response.req.url.match(/^\/api.*Google.*$/m)){
-				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-					Oops!
-					<div className='errorContainer' onClick={this.clearErrors}>
-					Looks like your Google credentials have
-					expired! Visit our log in page to sign out
-					and sign back in with Google,
-					then try saving again!
-						<a target='_blank' rel='noopener noreferrer'
-							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
-							<div className='confirm'>
-								Sign In
-							</div>
-						</a>
-						<div className='deny'>
-							Not Now
-						</div>
-					</div>
-				</Nav.item>;
-			}
-
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer'>
-					Looks like there was a problem saving. <br />
-					Report the issue <a target='_blank' rel='noopener noreferrer'
-						href={`https://github.com/naturalcrit/homebrewery/issues/new?body=${encodeURIComponent(errMsg)}`}>
-						here
-					</a>.
-				</div>
-			</Nav.item>;
-		}
-
 		if(this.state.isSaving){
 			return <Nav.item icon='fas fa-spinner fa-spin' className='save'>
 				save...
@@ -275,7 +190,10 @@ const NewPage = createClass({
 			</Nav.section>
 
 			<Nav.section>
-				{this.renderSaveButton()}
+				{this.state.error ?
+					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
+					this.renderSaveButton()
+				}
 				{this.renderLocalPrintButton()}
 				<HelpNavItem />
 				<RecentNavItem />

client/homebrew/pages/newPage/newPage.less

@@ -4,79 +4,5 @@
 		&:hover{
 			background-color: @green;
 		}
-		&.error{
-			position         : relative;
-			background-color : @red;
-		}
-	}
-	.errorContainer{
-		animation-name: glideDown;
-		animation-duration: 0.4s;
-		position         : absolute;
-		top              : 100%;
-		left             : 50%;
-		z-index          : 100000;
-		width            : 140px;
-		padding          : 3px;
-		color            : white;
-		background-color : #333;
-		border           : 3px solid #444;
-		border-radius    : 5px;
-		transform        : translate(-50% + 3px, 10px);
-		text-align       : center;
-		font-size        : 10px;
-		font-weight      : 800;
-		text-transform   : uppercase;
-		a{
-			color : @teal;
-		}
-		&:before {
-			content: "";
-			width: 0px;
-			height: 0px;
-			position: absolute;
-			border-left: 10px solid transparent;
-			border-right: 10px solid transparent;
-			border-top: 10px solid transparent;
-			border-bottom: 10px solid #444;
-			left: 53px;
-			top: -23px;
-		}
-		&:after {
-			content: "";
-			width: 0px;
-			height: 0px;
-			position: absolute;
-			border-left: 10px solid transparent;
-			border-right: 10px solid transparent;
-			border-top: 10px solid transparent;
-			border-bottom: 10px solid #333;
-			left: 53px;
-			top: -19px;
-		}
-		.deny {
-			width            : 48%;
-			margin           : 1px;
-			padding          : 5px;
-			background-color : #333;
-			display          : inline-block;
-			border-left      : 1px solid #666;
-			.animate(background-color);
-			&:hover{
-				background-color : red;
-			}
-		}
-		.confirm {
-			width            : 48%;
-			margin           : 1px;
-			padding          : 5px;
-			background-color : #333;
-			display          : inline-block;
-			color            : white;
-			.animate(background-color);
-			&:hover{
-				background-color : teal;
-			}
-		}
 	}
 }

client/homebrew/pages/printPage/printPage.jsx

@@ -29,9 +29,10 @@ const PrintPage = createClass({
 	getInitialState : function() {
 		return {
 			brew : {
-				text     : this.props.brew.text || '',
-				style    : this.props.brew.style || undefined,
-				renderer : this.props.brew.renderer || 'legacy'
+				text     : this.props.brew.text     || '',
+				style    : this.props.brew.style    || undefined,
+				renderer : this.props.brew.renderer || 'legacy',
+				theme    : this.props.brew.theme    || '5ePHB'
 			}
 		};
 	},
@@ -48,7 +49,7 @@ const PrintPage = createClass({
 						text     : brewStorage,
 						style    : styleStorage,
 						renderer : metaStorage?.renderer || 'legacy',
-						theme    : metaStorage?.theme || '5ePHB'
+						theme    : metaStorage?.theme    || '5ePHB'
 					}
 				};
 			});
@@ -59,7 +60,8 @@ const PrintPage = createClass({
 
 	renderStyle : function() {
 		if(!this.state.brew.style) return;
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.state.brew.style} </style>` }} />;
+		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.state.brew.style}\n} </style>` }} />;
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>\n${this.state.brew.style}\n</style>` }} />;
 	},
 
 	renderPages : function(){

client/homebrew/pages/sharePage/sharePage.jsx

@@ -12,21 +12,13 @@ const Account = require('../../navbar/account.navitem.jsx');
 
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
+const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
 
 const SharePage = createClass({
 	displayName     : 'SharePage',
 	getDefaultProps : function() {
 		return {
-			brew : {
-				title     : '',
-				text      : '',
-				style     : '',
-				shareId   : null,
-				createdAt : null,
-				updatedAt : null,
-				views     : 0,
-				renderer  : ''
-			}
+			brew : DEFAULT_BREW_LOAD
 		};
 	},
 

client/homebrew/pages/userPage/userPage.jsx

@@ -12,6 +12,7 @@ const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
+const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 
 const UserPage = createClass({
 	displayName     : 'UserPage',
@@ -19,7 +20,8 @@ const UserPage = createClass({
 		return {
 			username : '',
 			brews    : [],
-			query    : ''
+			query    : '',
+			error    : null
 		};
 	},
 	getInitialState : function() {
@@ -50,10 +52,19 @@ const UserPage = createClass({
 			brewCollection : brewCollection
 		};
 	},
+	errorReported : function(error) {
+		this.setState({
+			error
+		});
+	},
 
 	navItems : function() {
 		return <Navbar>
 			<Nav.section>
+				{this.state.error ?
+					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
+					null
+				}
 				<NewBrew />
 				<HelpNavItem />
 				<RecentNavItem />
@@ -63,7 +74,7 @@ const UserPage = createClass({
 	},
 
 	render : function(){
-		return <ListPage brewCollection={this.state.brewCollection} navItems={this.navItems()} query={this.props.query}></ListPage>;
+		return <ListPage brewCollection={this.state.brewCollection} navItems={this.navItems()} query={this.props.query} reportError={this.errorReported}></ListPage>;
 	}
 });
 

client/homebrew/utils/request-middleware.js

@@ -0,0 +1,12 @@
+const request = require('superagent');
+
+const addHeader = (request)=>request.set('Homebrewery-Version', global.version);
+
+const requestMiddleware = {
+	get    : (path)=>addHeader(request.get(path)),
+	put    : (path)=>addHeader(request.put(path)),
+	post   : (path)=>addHeader(request.post(path)),
+	delete : (path)=>addHeader(request.delete(path)),
+};
+
+module.exports = requestMiddleware;