Merge branch 'develop' into workflows

packages/web/src/components/common/logo/logo.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { getTheme } from "../../../utils/getTheme";
+
+const theme = getTheme();
+
+// 1st pannel component for home page
+
+interface LogoSvgProps {
+    viewBox: string;
+}
+
+export const LogoSvg = (props: LogoSvgProps) => {
+    return (
+        <svg
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox={props.viewBox}
+        >
+            <path
+                d="M522 399.24H0V86.366l147.746 158.067L261.815 0l126.562 244.433L522 86.366V399.24z"
+                fill={theme.secondary}
+            />
+            <path
+                d="M436.72 297.163l27.535-52.73 26.783 52.73-26.783 53.734-27.535-53.734zM39.11 297.163l27.534-52.73 26.784 52.73-26.784 53.734-27.535-53.734zM206.41 243.347l59.75-114.069 58.121 114.069-58.121 116.241-59.75-116.241z"
+                fill={theme.primary}
+                stroke={theme.tertiary}
+            />
+        </svg>
+    );
+};

packages/web/src/components/common/logo/logoStyle.tsx

@@ -0,0 +1,2 @@
+import styled from "@emotion/styled";
+import { getTheme } from "../../../utils/getTheme";

packages/web/src/components/common/navbar/navBar.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { Link } from "react-router-dom";
 
-import { Ul, Li, Fix } from "./style";
+import { Ul, Li, Fix, LoginLi } from "./style";
 
 // Navbar component
 
@@ -19,6 +19,10 @@ export const Navbar = () => {
                 <Li>
                     <Link to="/stats">Statistics</Link>
                 </Li>
+                <LoginLi>
+                    {" "}
+                    <Link to="/loginregister/login">Login</Link>
+                </LoginLi>
             </Ul>
         </Fix>
     );

packages/web/src/components/common/navbar/style.tsx

@@ -39,3 +39,23 @@ export const Li = styled.li`
         filter: brightness(${theme.brightness.lighter});
     }
 `;
+export const LoginLi = styled.li`
+    position: absolute;
+    right: 0;
+    a {
+        display: block;
+        color: ${theme.text.secondary};
+        text-align: center;
+        padding: 18px 28px;
+        text-decoration: none;
+        height: 18px;
+    }
+
+    a:hover {
+        border-top: 2px solid ${theme.background.primary};
+        height: 20px;
+        padding-top: 14px;
+        background-color: ${theme.primary};
+        filter: brightness(${theme.brightness.lighter});
+    }
+`;

packages/web/src/components/frontPage/components/pannel1/pannel1.tsx

@@ -5,6 +5,8 @@ const ReactRotatingText = require("react-rotating-text");
 
 import { getRandomText } from "../../../../utils/randomText";
 
+import { LogoSvg } from "../../../common/logo/logo";
+
 import {
     SvgCrown,
     StyledPannel1,
@@ -31,21 +33,7 @@ export const Pannel1 = () => {
             <FixCrown>
                 <VerticallyCenteredDiv>
                     <SvgCrown>
-                        <svg
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 522 400"
-                        >
-                            <path
-                                d="M522 399.24H0V86.366l147.746 158.067L261.815 0l126.562 244.433L522 86.366V399.24z"
-                                fill={theme.secondary}
-                            />
-                            <path
-                                d="M436.72 297.163l27.535-52.73 26.783 52.73-26.783 53.734-27.535-53.734zM39.11 297.163l27.534-52.73 26.784 52.73-26.784 53.734-27.535-53.734zM206.41 243.347l59.75-114.069 58.121 114.069-58.121 116.241-59.75-116.241z"
-                                fill={theme.primary}
-                                stroke={theme.tertiary}
-                            />
-                        </svg>
+                        <LogoSvg viewBox="0 0 522 400"></LogoSvg>
                     </SvgCrown>
                 </VerticallyCenteredDiv>
             </FixCrown>

packages/web/src/components/loginPage/loginPage.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState, useRef } from "react";
+import { Link, Route, Switch } from "react-router-dom";
+
+import {
+    BackgroundTriangle,
+    Wrapper,
+    LoginBox,
+    LoginLogoBox,
+    FixCrown,
+    Title,
+    FormWrapper,
+    Button
+} from "./style";
+import { LogoSvg } from "../common/logo/logo";
+
+const LoginForm = () => {
+    return (
+        <FormWrapper>
+            <form
+                onSubmit={() => {
+                    alert("works fine");
+                }}
+            >
+                <label>
+                    <input type="text" placeholder="Username" />
+                </label>
+                <label>
+                    <input type="password" placeholder="Password" />
+                </label>
+                <input type="submit" value="Login" />
+            </form>
+        </FormWrapper>
+    );
+};
+
+const RegiserForm = () => {
+    return (
+        <FormWrapper>
+            <form
+                onSubmit={() => {
+                    alert("works fine");
+                }}
+            >
+                <label>
+                    <input type="text" placeholder="Username" />
+                </label>
+                <label>
+                    <input type="email" placeholder="Email" />
+                </label>
+                <label>
+                    <input type="password" placeholder="Password" />
+                </label>
+                <label>
+                    <input type="password" placeholder="Confirm Password" />
+                </label>
+                <input type="submit" value="Register" />
+            </form>
+        </FormWrapper>
+    );
+};
+
+export const LoginRegisterPage = () => {
+    return (
+        <Wrapper>
+            <BackgroundTriangle></BackgroundTriangle>
+            <LoginBox>
+                <LoginLogoBox>
+                    <FixCrown>
+                        <LogoSvg viewBox="0 0 522 400"></LogoSvg>
+                        <Title>King Typer</Title>
+                        <Button>
+                            <Switch>
+                                <Route exact path="/loginregister/register">
+                                    <Link to="/loginregister/login">Login</Link>
+                                </Route>
+                                <Route exact path="/loginregister/login">
+                                    <Link to="/loginregister/register">
+                                        Register
+                                    </Link>
+                                </Route>
+                            </Switch>
+                        </Button>
+                    </FixCrown>
+                </LoginLogoBox>
+                <Switch>
+                    <Route exact path="/loginregister/register">
+                        <RegiserForm></RegiserForm>
+                    </Route>
+                    <Route exact path="/loginregister/login">
+                        <LoginForm></LoginForm>
+                    </Route>
+                </Switch>
+            </LoginBox>
+        </Wrapper>
+    );
+};

packages/web/src/components/loginPage/style.tsx

@@ -0,0 +1,139 @@
+import styled from "@emotion/styled";
+import { getTheme } from "../../utils/getTheme";
+
+const theme = getTheme();
+
+export const BackgroundTriangle = styled.div`
+    position: absolute;
+    width: 0;
+    height: 0;
+    z-index: -5;
+    left: 0;
+    border-style: solid;
+    border-width: 94vh 100vw 0 0;
+    border-color: ${theme.primary} transparent transparent transparent;
+    box-shadow: 5px 10px #888888;
+`;
+export const Wrapper = styled.div`
+    background-color: ${theme.background.primary};
+    min-width: 100%;
+    min-height: 100%;
+`;
+
+export const LoginBox = styled.div`
+    display: inline-flex;
+    position: absolute;
+    top: 25%;
+    left: 22%;
+    width: 56%;
+    height: 50%;
+
+    min-width: 700px;
+    min-height: 500px;
+    max-height: 600px;
+    max-width: 2000px;
+
+    background: ${theme.primary};
+    -webkit-box-shadow: 9px 9px 31px 4px rgba(0, 0, 0, 0.51);
+    -moz-box-shadow: 9px 9px 31px 4px rgba(0, 0, 0, 0.51);
+    box-shadow: 9px 9px 31px 4px rgba(0, 0, 0, 0.51);
+`;
+
+export const LoginLogoBox = styled.div`
+    position: relative;
+    height: 100%;
+    width: 40%;
+    background: ${theme.background.primary};
+`;
+
+export const FixCrown = styled.div`
+    position: absolute;
+    height: 40%;
+    width: 60%;
+    top: 10%;
+    left: 20%;
+`;
+
+export const Title = styled.div`
+    padding: 20px;
+    color: ${theme.text.primary};
+    font-family: "Verdana";
+    font-weight: bold;
+    text-align: center;
+    font-size: 44px;
+    text-overflow: nowrap;
+`;
+
+export const FormWrapper = styled.div`
+    font-family: "Verdana";
+    position: relative;
+    display: block;
+    width: 60%;
+    height: 100%;
+    color: ${theme.text.primary};
+
+    form {
+        width: 80%;
+        margin: auto;
+    }
+
+    input,
+    select {
+        width: 100%;
+        padding: 12px 20px;
+        margin: auto;
+        margin-top: 40px;
+        display: inline-block;
+        border-radius: 2px;
+        box-sizing: border-box;
+        border: 1px solid lightgrey;
+    }
+
+    input[type="submit"] {
+        font-family: "Verdana";
+        font-size: 17px;
+        width: 100%;
+        background-color: ${theme.secondary};
+        color: ${theme.text.primary};
+        padding: 10px;
+        margin-top: 90px;
+        border: none;
+        border-radius: 2px;
+
+        text-align: center;
+        transition-duration: 0.3s;
+    }
+
+    input[type="submit"]:hover {
+        filter: brightness(${theme.brightness.lighter});
+        -webkit-box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.36);
+        -moz-box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.36);
+        box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.36);
+    }
+`;
+
+export const Button = styled.div`
+    position: relative;
+    font-family: "Verdana";
+    width: 200px;
+    padding: 10px;
+    margin-top: 20px;
+    color: ${theme.text.secondary};
+    background: ${theme.primary};
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+
+    transition-duration: 0.3s;
+    &:hover {
+        filter: brightness(${theme.brightness.lighter});
+        -webkit-box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.36);
+        -moz-box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.36);
+        box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.36);
+    }
+    a {
+        text-decoration: none;
+        padding: 15px 70px;
+        color: ${theme.text.secondary};
+    }
+`;

packages/web/src/components/startTypingPage/components/navBar/style.tsx

@@ -10,7 +10,7 @@ export const Wrapper = styled.div`
 
 export const NavBar = styled.div`
     height: 100%;
-    width: 200px;
+    width: 0px;
     position: absolute;
     z-index: 100;
     top: 54px;

packages/web/src/index.tsx

@@ -9,9 +9,11 @@ import { Footer } from "./components/common/footer/footer";
 import { StatisticsPage } from "./components/statisticsPage/statisticsPage";
 import { StartTypingPage } from "./components/startTypingPage/startTypingPage";
 
+import { LoginRegisterPage } from "./components/loginPage/loginPage";
+
+
 import { Global } from "@emotion/core";
 import { globalStyle, Container, Content } from "./style";
-import { TypingBox } from "./components/common/typingBox/typingBox";
 
 // Create the SPA component.
 const App = () => {
@@ -33,6 +35,9 @@ const App = () => {
                             <Route exact path="/stats">
                                 <StatisticsPage />
                             </Route>
+                            <Route path="/loginregister">
+                                <LoginRegisterPage />
+                            </Route>
                         </Switch>
                     </HashRouter>
                 </Content>

packages/web/src/utils/randomText.ts

@@ -47,7 +47,8 @@ const randomText = [
     `The qwerty layout was designed for manual typewriters initially by Christopher Sholes in 1872. That means that humanity has used virtually the same design for almost 150 years!`,
     `Keyboards were originally the only way to interact with a computer, since they were invented before the invention of the mouse.`,
     `The longest English word that you can type using only your left hand is "stewardesses".`,
-    `The right name for the “#” symbol on your keyboard is “octothorpe”. Not as nice-sounding as “hashtag”.`
+    `The right name for the “#” symbol on your keyboard is “octothorpe”. Not as nice-sounding as “hashtag”.`,
+    `In memory of Reckful, a popular twitch streamer that inspired me the most to learn touchtyping, RIP, dead on 2nd of July 2020.`
 ];
 
 export const getRandomText = (): Array<string> => {