login page created (#4444)

login page html and css created with Seavor

webclient/src/containers/Login/Login.css

@@ -49,13 +49,103 @@
 }
 
 .login-content__description {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
+  text-align: center;
   font-size: 24px;
-  text-transform: uppercase;
+  overflow: hidden;
 }
 
+.login-content__description-wrapper { 
+  position: relative;
+  width: 70%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.login-content__description-image {
+  width: 100%; 
+}
+.login-content__description-placeholder {
+  width: 100%;
+  height: 207px;
+  border: 1px solid;
+}
+.login-content__description-subtitle1 {
+  margin: 40px 0 20px;
+  font-size: 28px;
+  font-weight: bold;
+  
+}
+.login-content__description-subtitle2 {
+  font-size: 14px;
+}
+.login-content__description-square {
+  position: absolute;
+  border: 1px solid;
+  opacity: .1;
+}
+.login-content__description-bar {
+  position: absolute;
+  opacity: .2;
+  background-color: #401C7F;
+  border-radius: 8px;
+}
+
+
+.login-content__description-square.topLeft {
+  transform: rotate(27deg);
+  top: 38px;
+  left: 64px;
+  height: 134px;
+  width: 100px;
+  border-radius: 8px;
+}
+
+.login-content__description-square.topRight {
+  transform: rotate(10deg);
+  top: 74px;
+  right: 62px;
+  height: 50px;
+  width: 66px;
+  border-radius: 20px;
+}
+
+.login-content__description-square.bottomLeft {
+  transform: rotate(120deg);
+  bottom: 61px;
+  left: 66px;
+  height: 50px;
+  width: 66px;
+  border-radius: 20px;
+}
+
+.login-content__description-square.bottomRight {
+  transform: rotate(-24deg);
+  bottom: 54px;
+  right: 0;
+  height: 88px;
+  width: 66px;
+  border-radius: 8px;
+}
+.login-content__description-bar.bottomBar {
+  transform: rotate(30deg);
+  bottom: -4px;
+  left: -29px;
+  height: 50px;
+  width: 222px;
+}
+.login-content__description-bar.topBar {
+  transform: rotate(-330deg);
+  top: 10px;
+  right: -49px;
+  height: 50px;
+  width: 222px;
+}
 .login-footer {
   margin-top: 30px;
 }

webclient/src/containers/Login/Login.tsx

@@ -14,6 +14,7 @@ import { /* ServerDispatch, */ ServerSelectors } from "store";
 
 import "./Login.css";
 import logo from "images/logo.png";
+/*import loginGraphic from "images/login-graphic.png"*/
 
 const Login = ({ state, description }: LoginProps) => {
   const isConnected = AuthenticationService.isConnected(state);
@@ -61,9 +62,21 @@ const Login = ({ state, description }: LoginProps) => {
               </Typography>
             </div>
           </div>
-
           <ThemedLoginDescription className="login-content__description">
-            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">
+              { /*<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>