move all to homebrew.jsx

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -288,13 +288,6 @@ const BrewRenderer = (props)=>{
 		rowGap    : `${displayOptions.rowGap}px`
 	};
 
-	const styleObject = {};
-
-	console.log(global.config);
-	if(global.config.deployment) {
-		styleObject.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='200px'><text x='0' y='15' fill='%23fff7' font-size='20'>${global.config.deployment}</text></svg>")`;
-	}
-
 	const renderedStyle = useMemo(()=>renderStyle(), [props.style, props.themeBundle]);
 	renderedPages = useMemo(()=>renderPages(), [props.text, displayOptions]);
 
@@ -323,10 +316,9 @@ const BrewRenderer = (props)=>{
 				contentDidMount={frameDidMount}
 				onClick={()=>{emitClick();}}
 			>
-				<div className={`brewRenderer ${global.config.deployment && 'deployment'}`}
+				<div className='brewRenderer'
 					onKeyDown={handleControlKeys}
 					tabIndex={-1}
-					style={ styleObject }
 				>
 
 					{/* Apply CSS from Style tab and render pages from Markdown tab */}

client/homebrew/brewRenderer/brewRenderer.less

@@ -6,7 +6,6 @@
 	overflow-y    : scroll;
 	will-change   : transform;
 	&:has(.facing, .flow) { padding : 60px 30px; }
-	&.deployment { background-color : darkred; }
 	:where(.pages) {
 		&.facing {
 			display               : grid; 

client/homebrew/homebrew.jsx

@@ -63,13 +63,36 @@ const Homebrew = createClass({
 		global.enable_themes = this.props.enable_themes;
 		global.config = this.props.config;
 
-		return {};
+		return { isClient: false };
 	},
 
+	componentDidMount : function() {
+		this.setState({ isClient: true });
+	},
+
+	backgroundObject : function() {
+		if(!this.state.isClient) return null;
+
+		if(this.props.config.deployment) {
+			return {
+				backgroundImage : `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='200px'><text x='0' y='15' fill='%23fff7' font-size='20'>${this.props.config.deployment}</text></svg>")`
+			};
+		} else if(this.props.config.local) {
+			return {
+				backgroundImage : `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='200px'><text x='0' y='15' fill='%23fff7' font-size='20'>Local</text></svg>")`
+			};
+		}
+
+		return null;
+	},
+
+
 	render : function (){
 		return (
 			<Router location={this.props.url}>
-				<div className='homebrew'>
+				<div className={`homebrew${this.state.isClient && (this.props.config.deployment || this.props.config.local) ? ' deployment' : ''}`}
+					style={ this.backgroundObject() }
+				>
 					<Routes>
 						<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={this.props.brew} userThemes={this.props.userThemes}/>} />
 						<Route path='/share/:id' element={<WithRoute el={SharePage} brew={this.props.brew} />} />

client/homebrew/homebrew.less

@@ -1,12 +1,14 @@
 @import 'naturalcrit/styles/core.less';
 .homebrew {
 	height : 100%;
+	&.deployment { background-color : darkred; }
+
 	.sitePage {
 		display          : flex;
 		flex-direction   : column;
 		height           : 100%;
 		overflow-y       : hidden;
-		background-color : @steel;
+		//background-color : @steel;
 		.content {
 			position   : relative;
 			flex       : auto;

client/homebrew/pages/vaultPage/vaultPage.less

@@ -1,14 +1,16 @@
 .vaultPage {
 	height           : 100%;
 	overflow-y       : hidden;
-	background-color : #2C3E50;
 
 	*:not(input) { user-select : none; }
 
+	.form {
+		background:white;
+	}
+
 	:where(.content .dataGroup) {
 		width      : 100%;
 		height     : 100%;
-		background : white;
 
 		&.form .brewLookup {
 			position : relative;
@@ -171,7 +173,6 @@
 				max-height       : 100%;
 				padding          : 70px 50px;
 				overflow-y       : scroll;
-				background-color : #2C3E50;
 				container-type   : inline-size;
 
 				h3 { font-size : 25px; }