diff options
Diffstat (limited to 'src/pages/HomePage/HomePage.tsx')
| -rw-r--r-- | src/pages/HomePage/HomePage.tsx | 128 |
1 files changed, 67 insertions, 61 deletions
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index 8995630..f00289a 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -16,6 +16,10 @@ import { useAuth } from '../../hooks/useAuth'; import { get } from '../../requests'; const useStyles = makeStyles(theme => ({ + root: { + overflow: 'hidden', + padding: theme.spacing(0, 2) + }, logo: { width: theme.spacing(20), height: theme.spacing(20) @@ -60,77 +64,79 @@ const HomePage: React.FC = () => { const MUILink = <Link href="https://material-ui.com">Material-UI</Link>; return ( - <Grid container spacing={4}> - <Grid item xs={4}> - <Grid container direction="column" spacing={1} alignItems="center"> - <Grid item> - <img src={`${process.env.PUBLIC_URL}/which-logo-512.png`} alt="logo" className={classes.logo} /> - </Grid> - <Grid item> - <Rating value={rating} readOnly size="large" /> - </Grid> - <Grid item> - <Typography variant="h5" className={classes.score}> - User score: {rating.toFixed(1)} - </Typography> + <div className={classes.root}> + <Grid container spacing={4}> + <Grid item xs={12} md={4}> + <Grid container direction="column" spacing={1} alignItems="center"> + <Grid item> + <img src={`${process.env.PUBLIC_URL}/which-logo-512.png`} alt="logo" className={classes.logo} /> + </Grid> + <Grid item> + <Rating value={rating} readOnly size="large" /> + </Grid> + <Grid item> + <Typography variant="h5" className={classes.score}> + User score: {rating.toFixed(1)} + </Typography> + </Grid> </Grid> </Grid> - </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> - {!isAuthenticated() && ( + <Grid item xs={12} md={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> + {!isAuthenticated() && ( + <Button + variant="outlined" + color="primary" + size="large" + className={classes.signup} + onClick={handleSignUp} + > + sign up + </Button> + )} + </Typography> + </Grid> + <Grid item> + <Typography variant="h4"> About the project </Typography> + <Divider /> + <Typography> + <p> + The project is written in {TypescriptLink} and features {ReactLink}, {FeathersLink}, and {MUILink}. + It is currently open-source and you can visit our {GithubLink} (make sure to star our repositories)! + </p> + <p> + We encourage any developer to check it out. Feel free to open issues and create Pull Requests! + </p> + <p> + All the development process is being tracked on the KanBan board (thanks GitHub). + You can always check it to see what is the current state of the project. + </p> <Button variant="outlined" color="primary" - size="large" - className={classes.signup} - onClick={handleSignUp} + startIcon={<TrendingUpIcon />} + href="https://github.com/orgs/which-ecosystem/projects/1" > - sign up + track our progress </Button> - )} - </Typography> - </Grid> - <Grid item> - <Typography variant="h4"> About the project </Typography> - <Divider /> - <Typography> - <p> - The project is written in {TypescriptLink} and features {ReactLink}, {FeathersLink}, and {MUILink}. - It is currently open-source and you can visit our {GithubLink} (make sure to star our repositories)! - </p> - <p> - We encourage any developer to check it out. Feel free to open issues and create Pull Requests! - </p> - <p> - All the development process is being tracked on the KanBan board (thanks GitHub). - You can always check it to see what is the current state of the project. - </p> - <Button - variant="outlined" - color="primary" - startIcon={<TrendingUpIcon />} - href="https://github.com/orgs/which-ecosystem/projects/1" - > - track our progress - </Button> - </Typography> + </Typography> + </Grid> </Grid> </Grid> </Grid> - </Grid> + </div> ); }; |