Merge branch 'master' into dependabot/npm_and_yarn/prod-dependencies-d59226c823

client/homebrew/pages/basePages/uiPage/uiPage.jsx

@@ -1,7 +1,4 @@
 import './uiPage.less';
-import React from 'react';
-import createReactClass from 'create-react-class';
-
 import Nav from '../../../navbar/nav.jsx';
 import Navbar from '../../../navbar/navbar.jsx';
 import NewBrewItem from '../../../navbar/newbrew.navitem.jsx';
@@ -10,30 +7,22 @@ import RecentNavItems from '../../../navbar/recent.navitem.jsx';
 const { both: RecentNavItem } = RecentNavItems;
 import Account from '../../../navbar/account.navitem.jsx';
 
+const UIPage = ({ brew, children })=><div className='sitePage uiPage'>
+	<Navbar>
+		<Nav.section>
+			<Nav.item className='brewTitle'>{brew?.title}</Nav.item>
+		</Nav.section>
+		<Nav.section>
+			<NewBrewItem />
+			<HelpNavItem />
+			<RecentNavItem />
+			<Account />
+		</Nav.section>
+	</Navbar>
 
-const UIPage = createReactClass({
+	<div className='content'>
-	displayName : 'UIPage',
+		{children}
-
+	</div>
-	render : function(){
+</div>;
-		return <div className='uiPage sitePage'>
-			<Navbar>
-				<Nav.section>
-					<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
-				</Nav.section>
-
-				<Nav.section>
-					<NewBrewItem />
-					<HelpNavItem />
-					<RecentNavItem />
-					<Account />
-				</Nav.section>
-			</Navbar>
-
-			<div className='content'>
-				{this.props.children}
-			</div>
-		</div>;
-	}
-});
 
 export default UIPage;

client/homebrew/pages/vaultPage/vaultPage.less

@@ -1,9 +1,20 @@
+@import '@themes/assets/assets.less';
 @import '@sharedStyles/core.less';
 
 .vaultPage {
 	height           : 100%;
 	overflow-y       : hidden;
 
+	--bg-clr                : white;
+	--bg-image              : @backgroundImageAlt;
+	--h1-clr                : black;
+	--h2-clr                : #000077;
+	--label-clr             : black;
+	--input-bg              : white;
+	--input-bg-hover        : #DDDDDD;
+	--input-text-clr        : black;
+	--input-placeholder-clr : grey;
+
 	*:not(input) { user-select : none; }
 
 	.form { background : white; }
@@ -13,8 +24,15 @@
 		height     : 100%;
 
 		&.form .brewLookup {
+			color                   : var(--label-clr);
+			background-color        : var(--bg-clr);
+			background-image        : var(--bg-image);
+			background-size         : cover;
+			height:100%;
+
 			position : relative;
 			padding  : 50px clamp(20px, 4vw, 50px);
+			
 
 			small {
 				font-size : 10pt;
@@ -33,6 +51,7 @@
 			h1, h2, h3, h4 {
 				font-family    : 'CodeBold';
 				letter-spacing : 2px;
+				color          : var(--h1-clr);
 			}
 				
 			legend {
@@ -87,14 +106,14 @@
 					align-items : center; 
 					margin      : 10px 0;
 				}
-				select { margin : 0 10px; }
+				input[type='text'], textarea, select {
-
-				input { 
 					margin   : 0 10px; 
-
+					color            : var(--input-text-clr);
-					&:invalid { background : rgb(255, 188, 181); }
+					background-color : var(--input-bg);
-					
+					border           : 1px solid var(--input-placeholder-clr);
-					
+					&:hover, :focus { outline          : 1px solid var(--input-placeholder-clr); background-color : var(--input-bg-hover); }
+					&::placeholder { color : var(--input-placeholder-clr); }
+					&:invalid { background : #ffbcb5; }
 				}
 
 				#searchButton {