[WIP] Create UI base page

[G-Ambatte]

Resolves #2049.

This PR adds a UI base page and associated LESS styling file. The UI base page takes props that allows for the display of user information in a format that is visually distinct from the standard Homebrewery brew format.

[G-Ambatte]

I have been developing the Account information (from PR#2047) to identify and style elements that can be expected to be commonly used in the base UI Page.

This is the current state of the Account page:

This is achieved by passing the following data to the new UIPage:

<>
	<h1>Account Information</h1>
	<p><strong>Username: </strong> {this.props.uiItems.username || 'No user currently logged in'}</p>
	<p><strong>Issued: </strong> {this.props.uiItems.issued || '-'}</p>
	<p></p>
	<h3>Google Information</h3>
	<p><strong>Linked to Google: </strong> {this.props.uiItems.googleId ? 'YES' : 'NO'}</p>
	{this.props.uiItems.googleId ? <p><strong>Brews on Google: </strong> {this.props.uiItems.fileCount}</p> : '' }
	<p></p>
	<h3>MongoDB Information</h3>
	<p><strong>Brews on MongoDB: </strong> {this.props.uiItems.mongoCount || '-'}</p>
</>

When logged in with an account connected to Google:

When logged out:

[G-Ambatte]

This one's been sitting for a minute, so I've brought it up to the current master, and added all of the suggested fixes. Still not 100% about the best way to pass the data from AccountPage to the base UIPage, currently it's a list of React <></> elements, each list item is rendered into a dataGroup.

[G-Ambatte]

Changed the date format to something significantly more human readable:

[G-Ambatte]

Account not logged in to Google:

[calculuschild]

Still not 100% about the best way to pass the data from AccountPage to the base UIPage, currently it's a list of React <></> elements, each list item is rendered into a dataGroup.

Yeah, that is a little unusual but each datagroup is different enough there's not really a standard set of data to pass in. This might be fine as-is. I guess it depends on how much of the UIPage as a basepage should be handling common elements like generating headers, etc. and how much it should be handled as a special case by the AccountPage.

That does bring up a question though: Are all "UIPage"-type pages going to be the same "white page with dataGroup blocks?"

[calculuschild]

We also need to add a button to the User Nav dropdown to be able to reach this.

[G-Ambatte]

Added an Account button in the account menu (between Brews and Logout).

[G-Ambatte]

That does bring up a question though: Are all "UIPage"-type pages going to be the same "white page with dataGroup blocks?"

I mean, that's the idea, right? The idea being that in the future, we can just push a data object to it to for whatever reason we might have, without having to go through the whole process of creating an entirely new page from scratch.

[G-Ambatte]

I've added a couple of additional Nav bar items to the UI base page, to mirror the Home page Nav bar.

[G-Ambatte]

With the additional work done here, this PR will also fix #2043.

[calculuschild]

I mean, that's the idea, right? The idea being that in the future, we can just push a data object to it to for whatever reason we might have, without having to go through the whole process of creating an entirely new page from scratch.

Sorry, what I meant was is this UI layout too specific? For instance, it was suggested before that we should make a better Error page for when users try to access a deleted brew, and that Error Page could use this UI theme https://github.com/naturalcrit/homebrewery/issues/1924. Do we want the Error page to also be limited to dataGroup boxes?

In other words, should we be limited to passing in an array of elements that must be displayed as white dataGroup boxes, or should we instead allow passing in a more custom set of contents (perhaps including some dataGroup blocks) and the UI page can just be a wrapper that provides the basic CSS, a title, nav bar, etc.?

Because we can always do something like this inside of a page that uses UIPage as a base and not have to be passing around all sorts of crazy renderer functions:

	render : function(){
		return <UIPage >
			<div class='dataGroup'>
				Datagroup 1 stuff
			</div>
			<div class='dataGroup'>
				Datagroup 2 stuff
			</div>
			Some not datagroup stuff
			
			<button>A button</button>
		</UIPage>;
	}

[G-Ambatte]

I've modified how data is passed into the base UI Page, let me know what you think.

[calculuschild]

Yeah, I like this better. Anything left you want to add before I merge this? We don't have any navigation button to access the account page, but we can handle that in a different PR with this basepage ready.

[G-Ambatte]

I think it's good to go! The current state of the PR (as of 26/9/22) should add an Account button to the nav bar.

[calculuschild]

Ah good. I must have been stuck on an older copy. I'll merge this now. 🎉 💯