Skip to content
This repository has been archived by the owner on Sep 26, 2024. It is now read-only.

Commit

Permalink
Merge pull request #139 from bored-engineers/TRA-112-Redesign_Landing…
Browse files Browse the repository at this point in the history 
…_Page

Ajit | Updated landing page
  • Loading branch information
@as-ajitsingh
as-ajitsingh authored May 7, 2021
2 parents 2d4caa2 + 92eeda5 commit 6ab4e67
Show file tree
Hide file tree
Showing 9 changed files with 258 additions and 127 deletions.
4 changes: 3 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,4 +109,6 @@ dist
# react build folder
**/build/

packages/webservice/src/public
packages/webservice/src/public

.idea
2 changes: 2 additions & 0 deletions packages/webapp/.gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,5 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*

.idea/
Binary file added packages/webapp/src/assets/Logo-old.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/webapp/src/assets/Logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 55 additions & 0 deletions packages/webapp/src/assets/main-image.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions packages/webapp/src/assets/waves.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/webapp/src/components/common/navbar/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Avatar from "@material-ui/core/Avatar";
import { useHistory } from 'react-router';
import HomeLogo from '../../../assets/Logo.png';
import HomeLogo from '../../../assets/Logo-old.png';
import BoardInfo from './board-info/BoardInfo';

import './Navbar.scss';
Expand Down
162 changes: 90 additions & 72 deletions packages/webapp/src/components/landing-page/LandingPage.scss
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,99 @@
.landingPage{
background-image: url(https://source.unsplash.com/user/bored_engineer/likes);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
.main {
flex-grow: 1;
width:100%;
height: 100%;
overflow: hidden;
.form{
max-width: 30em;
// background-color: transparentize($color:black, $amount: 0.5);
align-items: center;
display: flex;
flex-direction: column;
padding: 2vh 5vh;
.title-sup{
font-size: 14;
padding: 46px 65px;
z-index: 10;
flex-wrap: nowrap !important;
}

}
.title-main{
align-self: center;
}
.image {
width: 15em;
img {
width: 100%;
height: 100%;
}
}
.create-board{
margin-top: 5vh;
margin-bottom: 1vh;
width: 100%;
.row{
align-items: center;
}

Button{
width: 100%;
margin-bottom: 1vh;
}
}
.main-image{
width: 35vw;
}

.join-board{
width: 100%;
margin-bottom: 2vh;

.join-board-title{
text-align: center;
}
Button{
margin-top: 2vh;
margin-bottom: 1vh;
width: 100%;
.form{
height: 100%;
width: 400px;
background: white;
border: 1px solid black;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-items: center;
justify-content: space-evenly;
padding: 0px 30px;
}

.form > * {
margin-top: 30px !important;
}

.join-text{
text-align: center;
color: #5a5858;
}

.input{
margin-top: 50px !important;
}

.button{
height: 50px;
background-color: #3E64C7;
}

.caption{
text-align: center;
margin-bottom: 20px !important;
}

}
}
hr {
width: 100%;
border: none;
border-top: 1px solid #333;
color: #333;
overflow: visible;
text-align: center;
height: 1px;
margin: 20px;
align-self: center;
.ocean {
z-index: -5;
height: 20%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #FF6584;
}

&:after {
width: 100%;
background: #fff;
content: 'or';
padding: 0 4px;
position: relative;
top: -13px;

}
}
.footer{
margin: 0% !important
}

.wave {
z-index: -5;
background: url(../../assets/waves.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 250px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}

.wave:nth-of-type(2) {
z-index: -5;
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
opacity: 0.7;
}

@keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}

@keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
151 changes: 98 additions & 53 deletions packages/webapp/src/components/landing-page/LandingPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,25 @@
import { v4 as uuid } from 'uuid';
import React, { useState, useEffect } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'react-redux';
import { TState, TAction } from '../../store/interfaces';
import {v4 as uuid} from 'uuid';
import React, {useEffect, useState} from 'react';
import {Dispatch} from 'redux';
import {connect} from 'react-redux';
import {TAction, TState} from '../../store/interfaces';
import * as ActionTypes from '../../store/actions';
import Grid from '@material-ui/core/Grid';
import Divider from '@material-ui/core/Divider';
import FormControl from '@material-ui/core/FormControl'
import InputLabel from '@material-ui/core/InputLabel'
import Input from '@material-ui/core/Input'
import LinearProgress from '@material-ui/core/LinearProgress'
import FormHelperText from '@material-ui/core/FormHelperText'
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import { useHistory, useLocation } from 'react-router';

import { createBoard, joinBoard } from '../../services/board.service';
import {useHistory, useLocation} from 'react-router';
import {createBoard, joinBoard} from '../../services/board.service';
import './LandingPage.scss';
import boardImage from '../../assets/board.svg';
import { getUserIDStorageKey } from '../../common-utils';
import { Box, Link } from '@material-ui/core';
import {getUserIDStorageKey} from '../../common-utils';
import {Input, LinearProgress, Link} from '@material-ui/core';
import LogoImage from '../../assets/Logo.png'
import MainImage from '../../assets/main-image.svg'
import IconButton from '@material-ui/core/IconButton';
import TwitterIcon from '@material-ui/icons/Twitter';
import FacebookIcon from '@material-ui/icons/Facebook';
import Divider from '@material-ui/core/Divider';
import {makeStyles} from '@material-ui/core/styles';

type TLandingPageDispatchProps = {
setUserId: Function,
Expand All @@ -35,8 +33,35 @@ type TLandingPageStateProps = {

type TLandingPageProps = TLandingPageDispatchProps & TLandingPageStateProps;

const useStyles = makeStyles(theme => ({
mainImageContainer: {
position: 'relative',
'&::before': {
content: '""',
left: '7.5vw',
top: '-1vh',
position: 'absolute',
width: '6vw',
height: '6vw',
borderRadius: '6vw',
backgroundColor: '#F2F2F2',
zIndex: '-5',
animation: '$grow 10s infinite'
},
[theme.breakpoints.down("sm")]: {
display: 'none'
}
},
'@keyframes grow': {
'0%': {transform: 'scale(0.5)'},
'50%': {transform: 'scale(1)'},
'100%': {transform: 'scale(0.5)'}
}
}))


const LandingPage = (props: TLandingPageProps) => {
const classes = useStyles();
const {setUserId, setBoardId, boardId} = props;
const browserHistory = useHistory();
const location = useLocation();
Expand Down Expand Up @@ -119,51 +144,71 @@ const LandingPage = (props: TLandingPageProps) => {

function Branding() {
return (
<Typography variant="body2" color="textSecondary" align="center">
<Typography variant="body1" color="textSecondary" align="center">
{'From the minds of '}
<Link color="primary" href="https://github.com/orgs/bored-engineers/people" target="_black">
<b>Bored Engineers</b>
</Link>{' '}
</Typography>
);
}

return (
<React.Fragment>
<Grid container direction="column" justify="center" alignItems="center" className="landingPage">
<Card className='form'>
<CardContent>
<Typography className='title-sup' color="textSecondary" gutterBottom>
Welcome to
</Typography>
<Typography variant="h5" component="h2" className="title-main">
The Retro App
</Typography>
</CardContent>
<div className="image"><img src={boardImage} alt="" /></div>
<div className="create-board">
<Button variant="contained" color="primary" onClick={createBoardHandler} disabled={createBoardProgress} >Create a New Board</Button>
{createBoardProgress && <LinearProgress />}
{createBoardError && <FormHelperText error>There is some problem creating board. Try Again Later...</FormHelperText>}
{createBoardSuccess && getSuccessElements()}
</div>
<Divider variant="middle" flexItem />
<div className="join-board">
<Typography className='join-board-title' color="textSecondary" gutterBottom >
Join an existing board
</Typography>
<FormControl fullWidth>
<InputLabel htmlFor="boardId" variant="standard" margin="dense">Board ID</InputLabel>
<Input id="boardId" fullWidth value={boardId} onChange={event => setBoardId(event.target.value)} disabled={createBoardProgress || joinBoardProgress} error={joinBoardError.errorField === 'boardId'} />
</FormControl>
<Button variant="contained" color="primary" onClick={joinBoardHandler} disabled={createBoardProgress || joinBoardProgress} >Join Now</Button>
{joinBoardProgress && <LinearProgress />}
{joinBoardError && <FormHelperText error>{joinBoardError.message}</FormHelperText>}
</div>
<Box mt={2} className="footer">
<Branding />
</Box>
</Card>
<div className="ocean">
<div className="wave"></div>
</div>
<Grid container className="main" justify="space-between" direction="column">
<Grid container item justify="space-between" direction="row">
<Grid item sm={6}><img src={LogoImage} alt="logo" width="256" height="60"/></Grid>
<Grid container item sm={6} direction="row-reverse">
<IconButton><TwitterIcon fontSize="large"/></IconButton>
<IconButton><FacebookIcon fontSize="large"/></IconButton>

</Grid>
</Grid>
<Grid container item className="row" justify="space-evenly" direction="row">
<Grid container md={6} item justify="center" className={classes.mainImageContainer}>
<img className="main-image" src={MainImage} alt="main" width="550"/>
</Grid>
<Grid container md={6} item justify="center">
<div className="form">
<Typography variant="h5">Let's get started...</Typography>
<Button
className="button"
variant="contained"
color="primary"
onClick={createBoardHandler}
disabled={createBoardProgress}
>Create New Board</Button>
{createBoardProgress && <LinearProgress />}
{createBoardError && <FormHelperText error>There is some problem creating board. Try Again Later...</FormHelperText>}
{createBoardSuccess && getSuccessElements()}
<Divider/>
<Typography className="join-text">Or Join An Existing Board</Typography>
<Input
className="input" placeholder="Board Id"
value={boardId}
onChange={event => setBoardId(event.target.value)}
disabled={createBoardProgress || joinBoardProgress}
error={joinBoardError.errorField === 'boardId'}/>
<Button className="button"
variant="contained"
color="primary"
onClick={joinBoardHandler}
disabled={createBoardProgress || joinBoardProgress}
>Join Now</Button>
{joinBoardProgress && <LinearProgress/>}
{joinBoardError && <FormHelperText error>{joinBoardError.message}</FormHelperText>}
<Typography variant="caption" className="caption">By joining, I agree to the Terms and
Privacy Policy.</Typography>
</div>
</Grid>
</Grid>
<Grid container item/>
<Grid container item justify="flex-end"><Branding/></Grid>
</Grid>

</React.Fragment>
);
}
Expand Down

0 comments on commit 6ab4e67

Please sign in to comment.