diff options
| author | eug-vs <eug-vs@keemail.me> | 2020-07-03 20:06:57 +0300 |
|---|---|---|
| committer | eug-vs <eug-vs@keemail.me> | 2020-07-03 20:07:08 +0300 |
| commit | 020356cb5588c2fd4d12dd91d60fe082eb4c69a2 (patch) | |
| tree | 147250552c26b67036a6005f0bf9c3d03d532e05 | |
| parent | 68de14f03ec3cba9937669535783956766363462 (diff) | |
| download | which-ui-020356cb5588c2fd4d12dd91d60fe082eb4c69a2.tar.gz | |
feat: create basic markup
| -rw-r--r-- | public/index.html | 1 | ||||
| -rw-r--r-- | public/which-logo-512.png | bin | 0 -> 22412 bytes | |||
| -rw-r--r-- | src/components/Header/Header.tsx | 2 | ||||
| -rw-r--r-- | src/pages/HomePage/HomePage.tsx | 58 |
4 files changed, 53 insertions, 8 deletions
diff --git a/public/index.html b/public/index.html index c3d52e2..001cbac 100644 --- a/public/index.html +++ b/public/index.html @@ -2,6 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8" /> + <link rel="icon" type="image/png" sizes="16x16" href="./which-logo-64.png" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Which</title> </head> diff --git a/public/which-logo-512.png b/public/which-logo-512.png Binary files differnew file mode 100644 index 0000000..ddcbd9f --- /dev/null +++ b/public/which-logo-512.png diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 339f322..294c250 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -69,7 +69,7 @@ const Header: React.FC = () => { </IconButton> <IconButton onClick={handleProfile}> { - user?.avatarUrl?.match(/\.(jpeg|jpg|gif|png)$/) + user?.avatarUrl ? <Avatar className={classes.avatar} src={user?.avatarUrl} /> : <AccountCircle /> } diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index 6930cc8..d0e29f5 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -1,18 +1,62 @@ import React, { useState } from 'react'; -import { Typography } from '@material-ui/core/'; +import { Typography, Divider, Grid, Button } from '@material-ui/core/'; import { makeStyles } from '@material-ui/core/styles'; +import { useNavigate } from '../../hooks/useNavigate'; -const useStyles = makeStyles({ -}); +const useStyles = makeStyles(theme => ({ + logo: { + width: theme.spacing(32), + height: theme.spacing(32) + }, + leftColumn: { + display: 'flex', + justifyContent: 'center' + }, + title: { + fontWeight: 'bold' + } +})); const HomePage: React.FC = () => { const classes = useStyles(); + const { navigate } = useNavigate(); - return ( - <> - <Typography variant="h3"> Which one to choose? </Typography> + const handleLetsGo = () => { + navigate('feed'); + }; - </> + return ( + <Grid container spacing={4}> + <Grid item xs={4} className={classes.leftColumn}> + <img src={process.env.PUBLIC_URL + '/which-logo-512.png'} alt="logo" className={classes.logo}/> + </Grid> + <Grid item xs={5}> + <Grid container direction="column" spacing={6}> + <Grid item> + <Typography variant="h4"> Which one to choose? </Typography> + <Divider /> + <Typography> + <p>Have you ever found yourself stuck between two options, not being able to choose any? This is exactly the problem we are going to solve!</p> + <p>Share your minor everyday uncertainties with the whole world and see what others think!</p> + <Button variant="contained" color="primary" size="large" onClick={handleLetsGo}> + let's go! + </Button> + </Typography> + </Grid> + <Grid item> + <Typography variant="h4"> About the project </Typography> + <Divider /> + <p> + Visit our <a href="https://github.com/">GitHub</a> + </p> + </Grid> + <Grid item> + <Typography variant="h4"> Leave feedback </Typography> + <Divider /> + </Grid> + </Grid> + </Grid> + </Grid> ); }; |
