Login.js

import React, { Component } from 'react';
import styled from 'styled-components';
import shortid from 'shortid';

// Assets //
import BackgroundImg from 'assets/bg.jpg';
import StreamLogo from 'assets/stream.svg';

// Forms //
import LoginForm from 'forms/LoginForm';

// Components //
import Logo from 'components/Logo';
import Text from 'components/Text';

const Root = styled.div`
    display: flex;
    flex: 1;
    background-image: url(${BackgroundImg});
    background-size: cover;
`;

const Overlay = styled.div`
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: ${({ theme }) => theme.colorUtils.fade(theme.color.background, 0.88)};
`;

const Container = styled.div`
    max-width: 1280px;
    width: 100%;
    padding: 0px 24px;
    margin: 0 auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    align-self: center;
`;

const Title = styled(Text)`
    margin-top: 16px;
    text-transform: capitalize;
`;

const Header = styled.div`
    display: flex;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 80px 24px 40px 24px;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
`;

const Stream = styled.img`
    max-height: 96px;
    margin-left: 40px;
`;

class Login extends Component {
    handleLogin = (val) => {
        console.log('login', val);
    };

    renderForm = () => {
        return (
            <Container>
                <Title size={40} weight='600'>
                    Welcome.
                </Title>
                <Text size={16}>Enter a username to get started.</Text>
                <LoginForm conferenceAlias={this.conferenceAlias} onSubmit={this.handleLogin} />
            </Container>
        );
    };

    render() {
        return (
            <Root>
                <Overlay />
                <Header>
                    <Logo color='white' size={56} />
                    <Stream src={StreamLogo} />
                </Header>
                {this.renderForm()}
            </Root>
        );
    }
}

export default Login;