Skip to content

Commit

Permalink
Merge pull request #20 from ranjithprabhuk/development
Browse files Browse the repository at this point in the history 
Development -> Master
  • Loading branch information
@ranjithprabhuk
ranjithprabhuk authored Jul 9, 2018
2 parents 09d519d + 542d1b7 commit 7fe1a46
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 86 deletions.
13 changes: 13 additions & 0 deletions src/app/login/ILogin.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { Theme } from '@material-ui/core';

interface ILoginOwnProps {
classes: any;
}
interface ILoginStateProps {
theme: Theme;
}

export type ILoginProps = ILoginOwnProps & ILoginStateProps;

export interface ILoginState {
}
77 changes: 77 additions & 0 deletions src/app/login/Login.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { Card, Grid, TextField, CardContent, Typography, Button } from '@material-ui/core';
import { loginStyles } from './login.styles';
import { ILoginProps, ILoginState } from './ILogin';
import AccountCircle from '@material-ui/icons/AccountCircle';
import Lock from '@material-ui/icons/Lock';
import Star from '@material-ui/icons/Star';
import { Link } from 'react-router-dom';

class Home extends React.Component<ILoginProps, ILoginState> {
public render(): React.ReactElement<Home> {
const { classes } = this.props;

return (
<div className={classes.root}>
<Card className={classes.login}>
<Grid container spacing={8} justify='center' alignItems='flex-end'>
<Grid item className={classes.headerIconGrid}>
<AccountCircle style={{fontSize: 100}} />
</Grid>
</Grid>
<CardContent>
<Grid container spacing={8} justify='center' alignItems='flex-end'>
<Grid item xs={1}>
<AccountCircle />
</Grid>
<Grid item xs={8}>
<TextField className={classes.inputFields} id='username' label='Username' />
</Grid>
</Grid>
<Grid container spacing={8} justify='center' alignItems='flex-end'>
<Grid item xs={1}>
<Lock />
</Grid>
<Grid item xs={8}>
<TextField className={classes.inputFields} id='password' type='password' label='Password' />
</Grid>
</Grid>
<Grid className={classes.loginButtonContainer} container spacing={8} justify='space-around'>
<Link to='/dashboard'>
<Button variant='contained' color='primary'>
Sign In
</Button>
</Link>
<Link to='/signup'>
<Button variant='contained' color='secondary'>
Sign Up
</Button>
</Link>
</Grid>
<Grid container spacing={8} justify='center'>
<Typography className={classes.socialLoginLabel}> Sign in with: </Typography>
</Grid>
</CardContent>
<Card>
<CardContent>
<Grid container spacing={8} justify='space-around'>
<Button variant='raised' color='primary' size='small'>
<Star />
</Button>
<Button variant='raised' color='secondary' size='small'>
<Star />
</Button>
<Button variant='raised' color='default' size='small'>
<Star />
</Button>
</Grid>
</CardContent>
</Card>
</Card>
</div>
);
}
}

export default withStyles(loginStyles, {withTheme: true})(Home);
68 changes: 1 addition & 67 deletions src/app/login/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1 @@
import * as React from 'react';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import FavoriteIcon from '@material-ui/icons/Favorite';
import ShareIcon from '@material-ui/icons/Share';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import {styles} from './login.styles';

class Login extends React.Component<object, object> {

public render():React.ReactElement<Login> {

return (
<div>
<Card style={styles.card}>
<CardHeader
avatar={
<Avatar aria-label='Recipe' style={styles.avatar}>
R
</Avatar>
}
action={
<IconButton>
<MoreVertIcon />
</IconButton>
}
title='Shrimp and Chorizo Paella'
subheader='September 14, 2016'
/>
<CardMedia
style={styles.media}
image='/static/images/cards/paella.jpg'
title='Contemplative Reptile'
/>
<CardContent>
<Typography component='p'>
This impressive paella is a perfect party dish and a fun meal to cook together with
your guests. Add 1 cup of frozen peas along with the mussels, if you like.
</Typography>
</CardContent>
<CardActions style={styles.actions} disableActionSpacing>
<IconButton aria-label='Add to favorites'>
<FavoriteIcon />
</IconButton>
<IconButton aria-label='Share'>
<ShareIcon />
</IconButton>
<IconButton
aria-label='Show more'
>
<ExpandMoreIcon />
</IconButton>
</CardActions>
</Card>
</div>
);
}
}

export default Login;
export { default } from './Login';
55 changes: 36 additions & 19 deletions src/app/login/login.styles.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,37 @@
import red from '@material-ui/core/colors/red';
import { Theme } from '@material-ui/core';
import { ThemeConfig, defineColours } from '../../theme';

export const styles = {
card: {
maxWidth: 400,
},
media: {
height: 0,
paddingTop: '56.25%', // 16:9
},
actions: {
display: 'flex',
},
expandOpen: {
transform: 'rotate(180deg)',
},
avatar: {
backgroundColor: red[500],
},
};
export const loginStyles = (theme: Theme): any => ({
root: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexGrow: 1,
width: '100vw',
height: '100vh',
background: defineColours(ThemeConfig.primaryColor),
},
login: {
width: '100%',
maxWidth: '400px',
overflow: 'visible',
},
socialLoginLabel: {
backgroundColor: '#eee',
padding: '2px 118px',
marginTop: 10,
},
loginButtonContainer: {
padding: '30px 5px 20px',
},
headerIconGrid: {
border: '5px solid white',
borderRadius: '50%',
padding: 0,
background: defineColours(ThemeConfig.primaryColor),
marginTop: -50,
},
inputFields: {
width: '100%',
},
});

0 comments on commit 7fe1a46

Please sign in to comment.