Add left nav (#4705)

* Automated translation update ( bf08a04cda ) * Add Layout component wip * finish layout implementation * convert header to left nav * better nav item spacing * return source files to original glory * lint fix * Remove height limit on login screen * fix top spacing on 3-panel layout --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Brent Clark <brent@backboneiq.com>
2023-03-15 22:45:55 -05:00 · 2023-03-15 22:45:55 -05:00 · cef99cba71
commit cef99cba71
parent cab5f29b57
18 changed files with 280 additions and 201 deletions
--- a/webclient/src/components/ThreePaneLayout/ThreePaneLayout.css
+++ b/webclient/src/components/ThreePaneLayout/ThreePaneLayout.css
@ -33,4 +33,5 @@
 .three-pane-layout .grid-main__bottom.fixedHeight {
  height: 50%;
  overflow: visible;
+  padding: 0 0 16px;
 }
--- a/webclient/src/components/ThreePaneLayout/ThreePaneLayout.tsx
+++ b/webclient/src/components/ThreePaneLayout/ThreePaneLayout.tsx
@ -1,5 +1,4 @@
-// eslint-disable-next-line
-import React, { Component, CElement } from "react";
+import { Component, CElement } from "react";
 import { connect } from 'react-redux';
 import Grid from '@mui/material/Grid';
 import Hidden from '@mui/material/Hidden';
@ -12,7 +11,7 @@ class ThreePaneLayout extends Component<ThreePaneLayoutProps> {
  render() {
    return (
      <div className="three-pane-layout">
-        <Grid container spacing={2} className="grid">
+        <Grid container rowSpacing={0} columnSpacing={2} className="grid">
          <Grid item xs={12} md={9} lg={10} className="grid-main">
            <Grid item className={
              'grid-main__top'
--- a/webclient/src/components/index.ts
+++ b/webclient/src/components/index.ts
@ -2,7 +2,6 @@
 export { default as Card } from './Card/Card';
 export { default as CardDetails } from './CardDetails/CardDetails';
 export { default as CountryDropdown } from './CountryDropdown/CountryDropdown';
-export { default as Header } from './Header/Header';
 export { default as InputField } from './InputField/InputField';
 export { default as InputAction } from './InputAction/InputAction';
 export { default as KnownHosts } from './KnownHosts/KnownHosts';
--- a/webclient/src/containers/Account/Account.tsx
+++ b/webclient/src/containers/Account/Account.tsx
@ -11,6 +11,7 @@ import { UserDisplay, VirtualList, AuthGuard, LanguageDropdown } from 'component
 import { AuthenticationService, SessionService } from 'api';
 import { ServerSelectors } from 'store';
 import { User } from 'types';
+import Layout from 'containers/Layout/Layout';

 import AddToBuddies from './AddToBuddies';
 import AddToIgnore from './AddToIgnore';
@ -33,7 +34,7 @@ const Account = (props: AccountProps) => {
  };

  return (
-    <div className="account">
+    <Layout className="account">
      <AuthGuard />
      <div className="account-column">
        <Paper className="account-list">
@ -96,7 +97,7 @@ const Account = (props: AccountProps) => {
          </div>
        </Paper>
      </div>
-    </div>
+    </Layout>
  )
 }

--- a/webclient/src/containers/App/AppShell.tsx
+++ b/webclient/src/containers/App/AppShell.tsx
@ -3,7 +3,6 @@ import { Provider } from 'react-redux';
 import { MemoryRouter as Router } from 'react-router-dom';
 import CssBaseline from '@mui/material/CssBaseline';
 import { store } from 'store';
-import { Header } from 'components';
 import Routes from './AppShellRoutes';
 import FeatureDetection from './FeatureDetection';

@ -29,8 +28,6 @@ class AppShell extends Component {
          <ToastProvider>
            <div className="AppShell" onContextMenu={this.handleContextMenu}>
              <Router>
-                <Header />
-
                <FeatureDetection />
                <Routes />
              </Router>
--- a/webclient/src/containers/Decks/Decks.tsx
+++ b/webclient/src/containers/Decks/Decks.tsx
@ -2,16 +2,17 @@
 import React, { Component } from "react";

 import { AuthGuard } from 'components/index';
+import Layout from 'containers/Layout/Layout';

 import './Decks.css';

 class Decks extends Component {
  render() {
    return (
-      <div>
+      <Layout>
        <AuthGuard />
        <span>"Decks"</span>
-      </div>
+      </Layout>
    )
  }
 }
--- a/webclient/src/containers/Game/Game.tsx
+++ b/webclient/src/containers/Game/Game.tsx
@ -2,16 +2,17 @@
 import React, { Component } from "react";

 import { AuthGuard } from 'components';
+import Layout from 'containers/Layout/Layout';

 import './Game.css';

 class Game extends Component {
  render() {
    return (
-      <div>
+      <Layout>
        <AuthGuard />
        <span>"Game"</span>
-      </div>
+      </Layout>
    )
  }
 }
--- a/webclient/src/containers/Initialize/Initialize.tsx
+++ b/webclient/src/containers/Initialize/Initialize.tsx
@ -8,6 +8,7 @@ import Typography from '@mui/material/Typography';
 import { Images } from 'images';
 import { ServerSelectors } from 'store';
 import { RouteEnum } from 'types';
+import Layout from 'containers/Layout/Layout';

 import './Initialize.css';

@ -35,25 +36,27 @@ const Initialize = ({ initialized }: InitializeProps) => {
  return initialized
    ? <Navigate to={RouteEnum.LOGIN} />
    : (
-      <Root className={'Initialize ' + classes.root}>
-        <div className='Initialize-content'>
-          <img src={Images.Logo} alt="logo" />
-          <Typography variant="subtitle1" className='subtitle'>{ t('InitializeContainer.title') }</Typography>
-          <Trans i18nKey="InitializeContainer.subtitle">
-            <Typography variant="subtitle2"></Typography>
-            <Typography variant="subtitle2"></Typography>
-          </Trans>
-        </div>
+      <Layout>
+        <Root className={'Initialize ' + classes.root}>
+          <div className='Initialize-content'>
+            <img src={Images.Logo} alt="logo" />
+            <Typography variant="subtitle1" className='subtitle'>{ t('InitializeContainer.title') }</Typography>
+            <Trans i18nKey="InitializeContainer.subtitle">
+              <Typography variant="subtitle2"></Typography>
+              <Typography variant="subtitle2"></Typography>
+            </Trans>
+          </div>

-        <div className="Initialize-graphics">
-          <div className="topLeft Initialize-graphics__square" />
-          <div className="topRight Initialize-graphics__square" />
-          <div className="bottomRight Initialize-graphics__square" />
-          <div className="bottomLeft Initialize-graphics__square" />
-          <div className="topBar Initialize-graphics__bar" />
-          <div className="bottomBar Initialize-graphics__bar" />
-        </div>
-      </Root>
+          <div className="Initialize-graphics">
+            <div className="topLeft Initialize-graphics__square" />
+            <div className="topRight Initialize-graphics__square" />
+            <div className="bottomRight Initialize-graphics__square" />
+            <div className="bottomLeft Initialize-graphics__square" />
+            <div className="topBar Initialize-graphics__bar" />
+            <div className="bottomBar Initialize-graphics__bar" />
+          </div>
+        </Root>
+      </Layout>
    );
 }

--- a/webclient/src/containers/Layout/Layout.css
+++ b/webclient/src/containers/Layout/Layout.css
@ -0,0 +1,31 @@
+.layout {
+    height: 100%;
+    max-height: 100%;
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    overflow: hidden;
+}
+
+.layout--no-height-limit {
+    height: initial;
+    max-height: initial;
+}
+
+.bottom-bar__container {
+    background: #555;
+    height: 50px;
+    width: 100%;
+}
+
+.page__body {
+    flex: 1;
+    max-height: calc(100% - 50px);
+}
+
+.page {
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+}
--- a/webclient/src/containers/Layout/Layout.tsx
+++ b/webclient/src/containers/Layout/Layout.tsx
@ -0,0 +1,39 @@
+import LeftNav from './LeftNav';
+
+import './Layout.css'
+
+function Layout(props:LayoutProps) {
+  const { children, className, showNav = true, noHeightLimit = false } = props;
+  const containerClasses = ['layout']
+  if (noHeightLimit === true) {
+    containerClasses.push('layout--no-height-limit')
+  }
+
+  return (
+    <div className={containerClasses.join(" ")}>
+      {showNav && <LeftNav />}
+      <section className="page">
+        <div className={`page__body ${className}`}>
+          {children}
+        </div>
+        {showNav && <BottomBar />}
+      </section>
+    </div>
+  )
+}
+
+function BottomBar(props) {
+  return (
+    <div className="bottom-bar__container">
+    </div>
+  )
+}
+
+interface LayoutProps {
+    showNav?: boolean;
+    children: any;
+    className?: string;
+    noHeightLimit?: boolean
+}
+
+export default Layout;
--- a/webclient/src/containers/Layout/LeftNav.css
+++ b/webclient/src/containers/Layout/LeftNav.css
@ -1,31 +1,34 @@
-.Header {
+.LeftNav__container {
+  background: #7033DB;
+  width: 100px;
+  min-width: 100px;
+  height: 100%;
 }

-.Header__logo {
+.LeftNav__logo {
  display: flex;
  align-items: center;
+  justify-content: center;
+  padding: 16px 0;
 }

-.Header__logo a {
+.LeftNav__logo a {
  line-height: 1;
 }

-.Header__logo img {
+.LeftNav__logo img {
  height: 32px;
 }

-.Header-content {
-  display: flex;
-  align-items: center;
-  width: 100%;
+.LeftNav-content {
  color: white;
 }

-.Header-serverDetails {
+.LeftNav-serverDetails {
  font-size: 12px;
 }

-.Header-server__indicator {
+.LeftNav-server__indicator {
  display: inline-block;
  height: 12px;
  width: 12px;
@ -35,46 +38,43 @@
  margin-left: 10px;
 }

-.Header-nav {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
+.LeftNav-nav {
 }

-.Header-nav__links {
-  width: 100%;
+.LeftNav-nav__links {
  display: flex;
-  padding-left: 50px;
+  flex-flow: column;
  align-items: center;
+  gap: 16px;
 }

-.Header-nav__link {
+.LeftNav-nav__link {
  position: relative;
  height: 100%;
 }

-.Header-nav__link:hover {
+.LeftNav-nav__link:hover {
  background: rgba(0, 0, 0, .125);
 }

-.Header-nav__link:hover .Header-nav__link-menu {
+.LeftNav-nav__link:hover .LeftNav-nav__link-menu {
  display: block;
 }

-.Header-nav__link-btn {
+.LeftNav-nav__link-btn {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
-  padding: 5px 10px;
+  padding: 5px 20px;
  font-weight: bold;
 }

-.Header-nav__link-btn__icon {
+.LeftNav-nav__link-btn__icon {
  margin-left: 5px;
 }

-.Header-nav__link-menu {
+.LeftNav-nav__link-menu {
  display: none;
  position: absolute;
  bottom: 0;
@ -82,13 +82,14 @@
  min-width: 150px;
  background: #3f51b5;
  box-shadow: 1px 1px 2px 0px black;
+  z-index: 1;
 }

-.Header-nav__link-menu__item {
+.LeftNav-nav__link-menu__item {
  padding: 0 !important;
 }

-.Header-nav__link-menu__btn {
+.LeftNav-nav__link-menu__btn {
  padding: 6px 16px;
  width: 100%;
  color: white;
@ -96,15 +97,16 @@
  justify-content: space-between;
 }

-.Header-nav__actions {
+.LeftNav-nav__actions {
  display: flex;
+  justify-content: center;
 }

-.Header-nav__action {
+.LeftNav-nav__action {

 }

-.Header-nav__action button {
+.LeftNav-nav__action button {
  color: white;
 }

@ -124,4 +126,3 @@
 .temp-chip > div {
  cursor: inherit;
 }
-
--- a/webclient/src/containers/Layout/LeftNav.tsx
+++ b/webclient/src/containers/Layout/LeftNav.tsx
@ -1,11 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { NavLink, useNavigate, generatePath } from 'react-router-dom';
-import AppBar from '@mui/material/AppBar';
 import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import Toolbar from '@mui/material/Toolbar';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import CloseIcon from '@mui/icons-material/Close';
 import MailOutlineRoundedIcon from '@mui/icons-material/MailOutline';
@ -18,11 +16,11 @@ import { Images } from 'images';
 import { RoomsSelectors, ServerSelectors } from 'store';
 import { Room, RouteEnum, User } from 'types';

-import './Header.css';
+import './LeftNav.css';

-const Header = ({ joinedRooms, serverState, user }: HeaderProps) => {
+const LeftNav = ({ joinedRooms, serverState, user }: LeftNavProps) => {
  const navigate = useNavigate();
-  const [state, setState] = useState<HeaderState>({
+  const [state, setState] = useState<LeftNavState>({
    anchorEl: null,
    showCardImportDialog: false,
    options: [],
@ -73,23 +71,23 @@ const Header = ({ joinedRooms, serverState, user }: HeaderProps) => {
  }

  return (
-    <AppBar className="Header" position="static">
-      <Toolbar variant="dense">
-        <div className="Header__logo">
+    <div className="LeftNav__container">
+      <div>
+        <div className="LeftNav__logo">
          <NavLink to={RouteEnum.SERVER}>
            <img src={Images.Logo} alt="logo" />
          </NavLink>
          { AuthenticationService.isConnected(serverState) && (
-            <span className="Header-server__indicator"></span>
+            <span className="LeftNav-server__indicator"></span>
          ) }
        </div>
        { AuthenticationService.isConnected(serverState) && (
-          <div className="Header-content">
-            <nav className="Header-nav">
-              <nav className="Header-nav__links">
-                <div className="Header-nav__link">
+          <div className="LeftNav-content">
+            <nav className="LeftNav-nav">
+              <nav className="LeftNav-nav__links">
+                <div className="LeftNav-nav__link">
                  <NavLink
-                    className="Header-nav__link-btn"
+                    className="LeftNav-nav__link-btn"
                    to={
                      joinedRooms.length
                        ? generatePath(RouteEnum.ROOM, { roomId: joinedRooms[0].roomId.toString() })
@ -97,42 +95,42 @@ const Header = ({ joinedRooms, serverState, user }: HeaderProps) => {
                    }
                  >
                    Rooms
-                    <ArrowDropDownIcon className="Header-nav__link-btn__icon" fontSize="small" />
+                    <ArrowDropDownIcon className="LeftNav-nav__link-btn__icon" fontSize="small" />
                  </NavLink>
-                  <div className="Header-nav__link-menu">
+                  <div className="LeftNav-nav__link-menu">
                    {joinedRooms.map(({ name, roomId }) => (
-                      <MenuItem className="Header-nav__link-menu__item" key={roomId}>
-                        <NavLink className="Header-nav__link-menu__btn" to={ generatePath(RouteEnum.ROOM, { roomId: roomId.toString() }) }>
+                      <div className="LeftNav-nav__link-menu__item" key={roomId}>
+                        <NavLink className="LeftNav-nav__link-menu__btn" to={ generatePath(RouteEnum.ROOM, { roomId: roomId.toString() }) }>
                          {name}

                          <IconButton size="small" edge="end" onClick={event => leaveRoom(event, roomId)}>
                            <CloseIcon style={{ fontSize: 10, color: 'white' }} />
                          </IconButton>
                        </NavLink>
-                      </MenuItem>
+                      </div>
                    ))}
                  </div>
                </div>
-                <div className="Header-nav__link">
-                  <NavLink className="Header-nav__link-btn" to={ RouteEnum.GAME }>
+                <div className="LeftNav-nav__link">
+                  <NavLink className="LeftNav-nav__link-btn" to={ RouteEnum.GAME }>
                    Games
-                    <ArrowDropDownIcon className="Header-nav__link-btn__icon" fontSize="small" />
+                    <ArrowDropDownIcon className="LeftNav-nav__link-btn__icon" fontSize="small" />
                  </NavLink>
                </div>
-                <div className="Header-nav__link">
-                  <NavLink className="Header-nav__link-btn" to={ RouteEnum.DECKS }>
+                <div className="LeftNav-nav__link">
+                  <NavLink className="LeftNav-nav__link-btn" to={ RouteEnum.DECKS }>
                    Decks
-                    <ArrowDropDownIcon className="Header-nav__link-btn__icon" fontSize="small" />
+                    <ArrowDropDownIcon className="LeftNav-nav__link-btn__icon" fontSize="small" />
                  </NavLink>
                </div>
              </nav>
-              <div className="Header-nav__actions">
-                <div className="Header-nav__action">
+              <div className="LeftNav-nav__actions">
+                <div className="LeftNav-nav__action">
                  <IconButton size="large">
                    <MailOutlineRoundedIcon style={{ color: 'inherit' }} />
                  </IconButton>
                </div>
-                <div className="Header-nav__action">
+                <div className="LeftNav-nav__action">
                  <IconButton onClick={handleMenuOpen} size="large">
                    <MenuRoundedIcon style={{ color: 'inherit' }} />
                  </IconButton>
@ -163,24 +161,25 @@ const Header = ({ joinedRooms, serverState, user }: HeaderProps) => {
            </nav>
          </div>
        ) }
-      </Toolbar>
+      </div>

      <CardImportDialog
        isOpen={state.showCardImportDialog}
        handleClose={closeImportCardWizard}
      ></CardImportDialog>
-    </AppBar>
+    </div>
  );
 }

-interface HeaderProps {
+interface LeftNavProps {
  serverState: number;
  server: string;
  user: User;
  joinedRooms: Room[];
+  showNav?: boolean;
 }

-interface HeaderState {
+interface LeftNavState {
  anchorEl: Element;
  showCardImportDialog: boolean;
  options: string[];
@ -193,4 +192,4 @@ const mapStateToProps = state => ({
  joinedRooms: RoomsSelectors.getJoinedRooms(state),
 });

-export default connect(mapStateToProps)(Header);
+export default connect(mapStateToProps)(LeftNav);
--- a/webclient/src/containers/Layout/logo.png
+++ b/webclient/src/containers/Layout/logo.png
--- a/webclient/src/containers/Login/Login.tsx
+++ b/webclient/src/containers/Login/Login.tsx
@ -16,6 +16,7 @@ import { Images } from 'images';
 import { HostDTO, serverProps } from 'services';
 import { RouteEnum, WebSocketConnectOptions, getHostPort } from 'types';
 import { ServerSelectors, ServerTypes } from 'store';
+import Layout from 'containers/Layout/Layout';

 import './Login.css';
 import { useToast } from 'components/Toast';
@ -225,120 +226,122 @@ const Login = ({ state, description, connectOptions }: LoginProps) => {
  };

  return (
-    <Root className={'login overflow-scroll ' + classes.root}>
-      { isConnected && <Navigate to={RouteEnum.SERVER} />}
+    <Layout showNav={false} noHeightLimit={true}>
+      <Root className={'login overflow-scroll ' + classes.root}>
+        { isConnected && <Navigate to={RouteEnum.SERVER} />}

-      <div className="login__wrapper">
-        <Paper className="login-content">
-          <div className="login-content__form">
-            <div className="login-content__header">
-              <img src={Images.Logo} alt="logo" />
-              <span>COCKATRICE</span>
-            </div>
-            <Typography variant="h1">{ t('LoginContainer.header.title') }</Typography>
-            <Typography variant="subtitle1">{ t('LoginContainer.header.subtitle') }</Typography>
-            <div className="login-form">
-              <LoginForm
-                onSubmit={handleLogin}
-                onResetPassword={openRequestPasswordResetDialog}
-                disableSubmitButton={submitButtonDisabled}
-              />
-            </div>
-
-            {
-              showDescription() && (
-                <Paper className="login-content__connectionStatus">
-                  {description}
-                </Paper>
-              )
-            }
-
-            <div className="login-footer">
-              <div className="login-footer__register">
-                <span>{ t('LoginContainer.footer.registerPrompt') }</span>
-                <Button color="primary" onClick={openRegistrationDialog}>{ t('LoginContainer.footer.registerAction') }</Button>
+        <div className="login__wrapper">
+          <Paper className="login-content">
+            <div className="login-content__form">
+              <div className="login-content__header">
+                <img src={Images.Logo} alt="logo" />
+                <span>COCKATRICE</span>
+              </div>
+              <Typography variant="h1">{ t('LoginContainer.header.title') }</Typography>
+              <Typography variant="subtitle1">{ t('LoginContainer.header.subtitle') }</Typography>
+              <div className="login-form">
+                <LoginForm
+                  onSubmit={handleLogin}
+                  onResetPassword={openRequestPasswordResetDialog}
+                  disableSubmitButton={submitButtonDisabled}
+                />
              </div>
-              <Typography variant="subtitle2">
-                { t('LoginContainer.footer.credit') } - { new Date().getUTCFullYear() }
-              </Typography>

              {
-                serverProps.REACT_APP_VERSION && (
-                  <Typography variant="subtitle2">
-                    { t('LoginContainer.footer.version') }: { serverProps.REACT_APP_VERSION }
-                  </Typography>
+                showDescription() && (
+                  <Paper className="login-content__connectionStatus">
+                    {description}
+                  </Paper>
                )
              }

-              <div className="login-footer__language">
-                <LanguageDropdown />
-              </div>
-            </div>
-          </div>
-          <div className="login-content__description">
-            <div className="login-content__description-graphics">
-              <div className="topLeft login-content__description-square" />
-              <div className="topRight login-content__description-square" />
-              <div className="bottomRight login-content__description-square" />
-              <div className="bottomLeft login-content__description-square" />
-              <div className="topBar login-content__description-bar" />
-              <div className="bottomBar login-content__description-bar" />
-            </div>
-            <div className="login-content__description-wrapper">
-              <div className="login-content__description-cards">
-                <div className="login-content__description-cards__card leftCard">
-                  <div className="login-content__description-cards__card-wrapper">
-                    <img src={Images.Faces.face1} alt='Stock Player' />
-                    <span>1mrlee</span>
-                  </div>
+              <div className="login-footer">
+                <div className="login-footer__register">
+                  <span>{ t('LoginContainer.footer.registerPrompt') }</span>
+                  <Button color="primary" onClick={openRegistrationDialog}>{ t('LoginContainer.footer.registerAction') }</Button>
                </div>
-                <div className="login-content__description-cards__card rightCard">
-                  <div className="login-content__description-cards__card-wrapper">
-                    <img src={Images.Faces.face2} alt='Stock Player' />
-                    <span>CyberX</span>
-                  </div>
-                </div>
-                <div className="login-content__description-cards__card topCard">
-                  <div className="login-content__description-cards__card-wrapper">
-                    <img src={Images.Faces.face3} alt='Stock Player' />
-                    <span>Gamer69</span>
-                  </div>
+                <Typography variant="subtitle2">
+                  { t('LoginContainer.footer.credit') } - { new Date().getUTCFullYear() }
+                </Typography>
+
+                {
+                  serverProps.REACT_APP_VERSION && (
+                    <Typography variant="subtitle2">
+                      { t('LoginContainer.footer.version') }: { serverProps.REACT_APP_VERSION }
+                    </Typography>
+                  )
+                }
+
+                <div className="login-footer__language">
+                  <LanguageDropdown />
                </div>
              </div>
-              { /*<img src={loginGraphic} className="login-content__description-image"/>*/}
-              <p className="login-content__description-subtitle1">{ t('LoginContainer.content.subtitle1') }</p>
-              <p className="login-content__description-subtitle2">{ t('LoginContainer.content.subtitle2') }</p>
            </div>
-          </div>
-        </Paper>
-      </div>
+            <div className="login-content__description">
+              <div className="login-content__description-graphics">
+                <div className="topLeft login-content__description-square" />
+                <div className="topRight login-content__description-square" />
+                <div className="bottomRight login-content__description-square" />
+                <div className="bottomLeft login-content__description-square" />
+                <div className="topBar login-content__description-bar" />
+                <div className="bottomBar login-content__description-bar" />
+              </div>
+              <div className="login-content__description-wrapper">
+                <div className="login-content__description-cards">
+                  <div className="login-content__description-cards__card leftCard">
+                    <div className="login-content__description-cards__card-wrapper">
+                      <img src={Images.Faces.face1} alt='Stock Player' />
+                      <span>1mrlee</span>
+                    </div>
+                  </div>
+                  <div className="login-content__description-cards__card rightCard">
+                    <div className="login-content__description-cards__card-wrapper">
+                      <img src={Images.Faces.face2} alt='Stock Player' />
+                      <span>CyberX</span>
+                    </div>
+                  </div>
+                  <div className="login-content__description-cards__card topCard">
+                    <div className="login-content__description-cards__card-wrapper">
+                      <img src={Images.Faces.face3} alt='Stock Player' />
+                      <span>Gamer69</span>
+                    </div>
+                  </div>
+                </div>
+                { /*<img src={loginGraphic} className="login-content__description-image"/>*/}
+                <p className="login-content__description-subtitle1">{ t('LoginContainer.content.subtitle1') }</p>
+                <p className="login-content__description-subtitle2">{ t('LoginContainer.content.subtitle2') }</p>
+              </div>
+            </div>
+          </Paper>
+        </div>

-      <RegistrationDialog
-        isOpen={dialogState.registrationDialog}
-        onSubmit={handleRegistrationDialogSubmit}
-        handleClose={closeRegistrationDialog}
-      />
+        <RegistrationDialog
+          isOpen={dialogState.registrationDialog}
+          onSubmit={handleRegistrationDialogSubmit}
+          handleClose={closeRegistrationDialog}
+        />

-      <RequestPasswordResetDialog
-        isOpen={dialogState.passwordResetRequestDialog}
-        onSubmit={handleRequestPasswordResetDialogSubmit}
-        handleClose={closeRequestPasswordResetDialog}
-        skipTokenRequest={skipTokenRequest}
-      />
+        <RequestPasswordResetDialog
+          isOpen={dialogState.passwordResetRequestDialog}
+          onSubmit={handleRequestPasswordResetDialogSubmit}
+          handleClose={closeRequestPasswordResetDialog}
+          skipTokenRequest={skipTokenRequest}
+        />

-      <ResetPasswordDialog
-        isOpen={dialogState.resetPasswordDialog}
-        onSubmit={handleResetPasswordDialogSubmit}
-        handleClose={closeResetPasswordDialog}
-        userName={userToResetPassword}
-      />
+        <ResetPasswordDialog
+          isOpen={dialogState.resetPasswordDialog}
+          onSubmit={handleResetPasswordDialogSubmit}
+          handleClose={closeResetPasswordDialog}
+          userName={userToResetPassword}
+        />

-      <AccountActivationDialog
-        isOpen={dialogState.activationDialog}
-        onSubmit={handleAccountActivationDialogSubmit}
-        handleClose={closeActivateAccountDialog}
-      />
-    </Root>
+        <AccountActivationDialog
+          isOpen={dialogState.activationDialog}
+          onSubmit={handleAccountActivationDialogSubmit}
+          handleClose={closeActivateAccountDialog}
+        />
+      </Root>
+    </Layout>
  );
 }

--- a/webclient/src/containers/Player/Player.tsx
+++ b/webclient/src/containers/Player/Player.tsx
@ -1,15 +1,16 @@
 // eslint-disable-next-line
 import React, { Component } from "react";
+import Layout from 'containers/Layout/Layout';

 import { AuthGuard } from 'components';

 class Player extends Component {
  render() {
    return (
-      <div>
+      <Layout>
        <AuthGuard />
        <span>"Player"</span>
-      </div>
+      </Layout>
    )
  }
 }
--- a/webclient/src/containers/Room/Room.tsx
+++ b/webclient/src/containers/Room/Room.tsx
@ -9,6 +9,7 @@ import { RoomsService } from 'api';
 import { ScrollToBottomOnChanges, ThreePaneLayout, UserDisplay, VirtualList, AuthGuard } from 'components';
 import { RoomsStateMessages, RoomsStateRooms, JoinedRooms, RoomsSelectors, RoomsTypes } from 'store';
 import { RouteEnum } from 'types';
+import Layout from 'containers/Layout/Layout';

 import OpenGames from './OpenGames';
 import Messages from './Messages';
@ -40,7 +41,7 @@ const Room = (props) => {
  }

  return (
-    <div className="room-view">
+    <Layout className="room-view">
      <AuthGuard />

      <div className="room-view__main">
@ -84,7 +85,7 @@ const Room = (props) => {
          )}
        />
      </div>
-    </div>
+    </Layout>
  );
 }

--- a/webclient/src/containers/Server/Server.tsx
+++ b/webclient/src/containers/Server/Server.tsx
@ -11,6 +11,7 @@ import { useReduxEffect } from 'hooks';
 import { RoomsSelectors, RoomsTypes, ServerSelectors } from 'store';
 import { Room, RouteEnum, User } from 'types';
 import Rooms from './Rooms';
+import Layout from 'containers/Layout/Layout';

 import './Server.css';

@ -23,7 +24,7 @@ const Server = ({ message, rooms, joinedRooms, users }: ServerProps) => {
  }, RoomsTypes.JOIN_ROOM, []);

  return (
-    <div className="server-rooms">
+    <Layout className="server-rooms">
      <AuthGuard />

      <ThreePaneLayout
@ -55,7 +56,7 @@ const Server = ({ message, rooms, joinedRooms, users }: ServerProps) => {
          </Paper>
        )}
      />
-    </div>
+    </Layout>
  );
 }

--- a/webclient/src/containers/Unsupported/Unsupported.tsx
+++ b/webclient/src/containers/Unsupported/Unsupported.tsx
@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
+import Layout from 'containers/Layout/Layout';

 import './Unsupported.css';

@ -9,7 +10,7 @@ const Unsupported = () => {
  const { t } = useTranslation();

  return (
-    <div className='Unsupported'>
+    <Layout className='Unsupported'>
      <Paper className='Unsupported-paper'>
        <div className='Unsupported-paper__header'>
          <Typography variant="h1">{ t('UnsupportedContainer.title') }</Typography>
@ -18,7 +19,7 @@ const Unsupported = () => {

        <Typography variant="subtitle2">{ t('UnsupportedContainer.subtitle2') }</Typography>
      </Paper>
-    </div>
+    </Layout>
  );
 };