small improvements (#4452)

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/containers/App/AppShellRoutes.tsx

@@ -24,7 +24,8 @@ const Routes = () => (
       {<Route path={RouteEnum.ROOM} render={() => <Room />} />}
       <Route path={RouteEnum.SERVER} render={() => <Server />} />
       <Route path={RouteEnum.LOGIN} render={() => <Login />} />
-      <Redirect from="/" to={RouteEnum.LOGIN} />
+
+      <Redirect from="*" to={RouteEnum.LOGIN} />
     </Switch>
   </div>
 );

webclient/src/containers/Login/Login.css

@@ -11,32 +11,28 @@
 
 .login-content {
   width: 100%;
-  max-width: 1000px;
+  max-width: 500px;
   display: flex;
   border-radius: 8px;
   overflow: hidden;
 }
 
 .login-content__header {
-  font-family: Teko, sans-serif;
+  font-family: 'Teko', sans-serif;
   font-size: 34px;
   font-weight: bold;
   display: flex;
   align-items: center;
+  margin-bottom: 20px;
 }
 
 .login-content__header img {
   height: 60px;
   margin-right: 15px;
-  margin-bottom: 20px;
-}
-
-.login-content__form,
-.login-content__description {
-  width: 50%;
 }
 
 .login-content__form {
+  width: 100%;
   padding: 50px 50px 33px;
 }
 
@@ -49,8 +45,8 @@
 }
 
 .login-content__description {
+  display: none;
   position: relative;
-  display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
@@ -67,14 +63,54 @@
   align-items: center;
 }
 
-.login-content__description-image {
-  width: 100%; 
-}
-.login-content__description-placeholder {
+.login-content__description-cards {
   width: 100%;
-  height: 207px;
-  border: 1px solid;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
 }
+
+.login-content__description-cards__card {
+  position: relative;
+  width: 34%;
+  padding-bottom: 46%;
+  border-radius: 8px;
+  box-shadow: 0 5px 10px 2px rgba(0,0,0,0.20);
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.login-content__description-cards__card-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.login-content__description-cards__card img {
+  width: 70%;
+  border-radius: 50%;
+  margin: 21% 0 9%;
+}
+
+.login-content__description-cards__card.leftCard {
+  transform: rotate(-12deg);
+}
+
+.login-content__description-cards__card.rightCard {
+  transform: rotate(12deg);
+}
+
+.login-content__description-cards__card.topCard {
+  width: 44%;
+  padding-bottom: 59%;
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .login-content__description-subtitle1 {
   margin: 40px 0 20px;
   font-size: 28px;
@@ -91,8 +127,7 @@
 }
 .login-content__description-bar {
   position: absolute;
-  opacity: .2;
-  background-color: #401C7F;
+  opacity: .1;
   border-radius: 8px;
 }
 
@@ -159,4 +194,5 @@
   text-align: center;
   margin: 20px 0;
   padding: 20px;
+  font-weight: bold;
 }

webclient/src/containers/Login/Login.tsx

@@ -2,21 +2,58 @@
 import React from "react";
 import { connect } from "react-redux";
 import { Redirect } from "react-router-dom";
-import { styled } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 
 import { AuthenticationService } from "api";
 import { LoginForm } from "forms";
+import { Images } from "images";
 import { RouteEnum } from "types";
 import { /* ServerDispatch, */ ServerSelectors } from "store";
 
 import "./Login.css";
-import logo from "images/logo.png";
-/*import loginGraphic from "images/login-graphic.png"*/
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& .login-content__header': {
+      color: theme.palette.success.light
+    },
+
+    '& .login-content__description': {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+    },
+
+    '& .login-content__description-bar': {
+      backgroundColor: theme.palette.primary.dark,
+    },
+
+    '& .login-content__description-cards__card': {
+      backgroundColor: theme.palette.background.paper,
+      color: theme.palette.primary.main,
+    },
+
+    [theme.breakpoints.up('lg')]: {
+      '& .login-content': {
+        maxWidth: '1000px',
+      },
+
+      '& .login-content__form': {
+        width: '50%',
+      },
+
+      '& .login-content__description': {
+        width: '50%',
+        display: 'flex',
+      },
+    },
+  },
+}));
 
 const Login = ({ state, description }: LoginProps) => {
+  const classes = useStyles();
   const isConnected = AuthenticationService.isConnected(state);
 
   const showDescription = () => {
@@ -28,16 +65,16 @@ const Login = ({ state, description }: LoginProps) => {
   };
 
   return (
-    <div className="login overflow-scroll">
+    <div className={'login overflow-scroll ' + classes.root}>
       { isConnected && <Redirect from="*" to={RouteEnum.SERVER} />}
 
       <div className="login__wrapper">
-        <ThemedLoginContent className="login-content">
+        <Paper className="login-content">
           <div className="login-content__form">
-            <ThemedLoginHeader className="login-content__header">
-              <img src={logo} alt="logo" />
+            <div className="login-content__header">
+              <img src={Images.Logo} alt="logo" />
               <span>COCKATRICE</span>
-            </ThemedLoginHeader>
+            </div>
             <Typography variant="h1">Login</Typography>
             <Typography variant="subtitle1">A cross-platform virtual tabletop for multiplayer card games.</Typography>
             <div className="login-form">
@@ -58,11 +95,11 @@ const Login = ({ state, description }: LoginProps) => {
                 <Button color="primary" onClick={createAccount}>Create an account</Button>
               </div>
               <Typography variant="subtitle2" className="login-footer__copyright">
-                Cockatrice is an open source project @{ new Date().getUTCFullYear() }
+                Cockatrice is an open source project. { new Date().getUTCFullYear() }
               </Typography>
             </div>
           </div>
-          <ThemedLoginDescription className="login-content__description">
+          <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" />
@@ -72,31 +109,37 @@ const Login = ({ state, description }: LoginProps) => {
               <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"/>*/}
-              <div className="login-content__description-placeholder"/>
               <p className="login-content__description-subtitle1">Play multiplayer card games online.</p>
               <p className="login-content__description-subtitle2">Cross-platform virtual tabletop for multiplayer card games. Forever free.</p>
             </div>
-          </ThemedLoginDescription>
-        </ThemedLoginContent>
+          </div>
+        </Paper>
       </div>
     </div>
   );
 }
 
-const ThemedLoginContent = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper
-}));
-
-const ThemedLoginDescription = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.primary.main,
-  color: theme.palette.primary.contrastText,
-}));
-
-const ThemedLoginHeader = styled('div')(({ theme }) => ({
-  color: theme.palette.success.light
-}));
-
 interface LoginProps {
   state: number;
   description: string;

webclient/src/containers/Server/Server.tsx

@@ -8,7 +8,7 @@ import Paper from "@material-ui/core/Paper";
 
 import { RoomsSelectors, ServerSelectors } from "store";
 
-import { ThreePaneLayout, UserDisplay, VirtualList } from "components";
+import { AuthGuard, ThreePaneLayout, UserDisplay, VirtualList } from "components";
 import { Room, User } from "types";
 import Rooms from './Rooms';
 
@@ -20,6 +20,8 @@ class Server extends Component<ServerProps, ServerState> {
 
     return (
       <div className="server-rooms">
+        <AuthGuard />
+
         <ThreePaneLayout
           top={(
             <Paper className="serverRoomWrapper overflow-scroll">