diff options
| -rw-r--r-- | src/components/Header/Header.js | 20 | ||||
| -rw-r--r-- | src/components/Scoreboard/Scoreboard.js | 2 |
2 files changed, 14 insertions, 8 deletions
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 9c286f7..26ba45c 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -3,14 +3,18 @@ import { AppBar, Tabs, Tab, - Typography + Typography, + Toolbar, } from "@material-ui/core"; import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles(theme => ({ logo: { color: theme.palette.secondary.main, - margin: theme.spacing(2, 3, 2, 2) + margin: theme.spacing(0, 2, 0, 3) + }, + tab: { + padding: theme.spacing(3, 0, 3, 0) }, })); @@ -26,12 +30,14 @@ const Header = ({ page, setPage }) => { return ( <AppBar position="sticky" className={classes.header}> - <Tabs onChange={handleChange} value={page}> + <Toolbar> <Typography variant="h4" className={classes.logo}> ChronoCube </Typography> - { menuItems.map(menuItem => ( - <Tab label={menuItem} value={menuItem}/> - ))} - </Tabs> + <Tabs onChange={handleChange} value={page}> + { menuItems.map(menuItem => ( + <Tab label={menuItem} value={menuItem} key={menuItem} className={classes.tab}/> + ))} + </Tabs> + </Toolbar> </AppBar> ); }; diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js index d55944d..47e306e 100644 --- a/src/components/Scoreboard/Scoreboard.js +++ b/src/components/Scoreboard/Scoreboard.js @@ -42,7 +42,7 @@ const Scoreboard = () => { </Typography> <Grid container justify="center" direction="column" spacing={3}> {solutions.map(solution => ( - <Grid item> + <Grid item key={solution.id}> <SolutionCard data={solution} removeThisCard={removeSolution}/> </Grid> ))} |