diff --git a/src/Components/AchievementDescriptionCard.js b/src/Components/AchievementDescriptionCard.js index ebe9e5cdf370f828e7b0ee97dedab0b11b2429fb..50be1eee03b08a49f4ce9f58668cd93e5596e0a2 100644 --- a/src/Components/AchievementDescriptionCard.js +++ b/src/Components/AchievementDescriptionCard.js @@ -3,17 +3,26 @@ import styled from 'styled-components' import { Container } from 'react-grid-system' import Paper from '@material-ui/core/Paper'; import { Grid } from '@material-ui/core' +import RequirementDialog from './RequirementsDialog.js'; export default function AchievementDescriptionCard(props) { + var teste = [ + {name: "Casas", description: "Construa três casas"} + ]; return ( <Paper elevation={3}> <Grid container direction="row" justify="space-around" alignItems="center"> - <Grid item xs={5}> + <Grid item xs={3}> <AchievementImg src={props.src ? props.src : "https://material-ui.com/static/images/grid/complex.jpg"}/> </Grid> - <Grid item xs={5}> + <Grid item xs={7}> <AchievementTitle>{props.title ? props.title : "Conquistador de conquistas"}</AchievementTitle> <AchievementDescription>{props.description ? props.description : "Conquiste conquistas"}</AchievementDescription> + <RequirementDialog + title="Conquistador de conquistas" + description="Conquiste conquistas" + requirements={teste} + /> </Grid> </Grid> </Paper> @@ -24,10 +33,11 @@ const AchievementImg = styled.img` border-radius: 100px; width: 100px; height: 100px; + margin: 30px; ` -const AchievementTitle = styled.h1` +const AchievementTitle = styled.h2` ` const AchievementDescription = styled.p` -` \ No newline at end of file +` diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js index 2349423ea145361e3f9d2900c8207d536fce2d5c..cb2ab0923bdf3214e1f1f002e68c2d2305380bf9 100644 --- a/src/Components/MenuBar.js +++ b/src/Components/MenuBar.js @@ -126,7 +126,10 @@ export default function MenuBar(props){ <Dropdown name="Ajuda" items={menuAjuda}/> <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" > <ButtonStyled >Educação Conectada</ButtonStyled> - </a> + </a> + <a href="/store"> + <ButtonStyled>Lojinha</ButtonStyled> + </a> <ButtonStyled onClick={props.openSearchBar} ><IconSearchStyled />Buscar</ButtonStyled> </Left> <Right> diff --git a/src/Components/RequirementsDialog.js b/src/Components/RequirementsDialog.js new file mode 100644 index 0000000000000000000000000000000000000000..7299b51fe046596f9333e81b3d2d3b27ba99ba3f --- /dev/null +++ b/src/Components/RequirementsDialog.js @@ -0,0 +1,104 @@ +import React from 'react'; +import { withStyles } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; +import Dialog from '@material-ui/core/Dialog'; +import MuiDialogTitle from '@material-ui/core/DialogTitle'; +import MuiDialogContent from '@material-ui/core/DialogContent'; +import MuiDialogActions from '@material-ui/core/DialogActions'; +import IconButton from '@material-ui/core/IconButton'; +import CloseIcon from '@material-ui/icons/Close'; +import Typography from '@material-ui/core/Typography'; +import DetailsIcon from '@material-ui/icons/Details'; +import styled from 'styled-components' +import { spacing } from '@material-ui/system' + +const styles = theme => ({ + root: { + margin: 0, + padding: theme.spacing(2), + }, + closeButton: { + position: 'absolute', + right: theme.spacing(1), + top: theme.spacing(1), + color: theme.palette.grey[500], + }, +}); + +const DialogTitle = withStyles(styles)(props => { + const { children, classes, onClose, ...other } = props; + return ( + <MuiDialogTitle disableTypography className={classes.root} {...other}> + <Typography variant="h6" mr={8} pr={8}>{children}</Typography> + {onClose ? ( + <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}> + <CloseIcon /> + </IconButton> + ) : null} + </MuiDialogTitle> + ); +}); + +const DialogContent = withStyles(theme => ({ + root: { + padding: theme.spacing(2), + }, +}))(MuiDialogContent); + +const DialogActions = withStyles(theme => ({ + root: { + margin: 0, + padding: theme.spacing(1), + }, +}))(MuiDialogActions); + +export default function RequirementDialog(props) { + const [open, setOpen] = React.useState(false); + + const handleClickOpen = () => { + setOpen(true); + }; + const handleClose = () => { + setOpen(false); + }; + + return ( + <div> + <Button variant="outlined" color="primary" onClick={handleClickOpen}> + <DetailsIcon /> Saiba mais + </Button> + <Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={open}> + <DialogTitle pr={5} mr={5} w-75 id="customized-dialog-title" onClose={handleClose}> + {props.title} + </DialogTitle> + <DialogContent dividers> + <Typography gutterBottom> + {props.description} + <h2>Requisitos</h2> + {props.requirements.map( + (r) => { + return (<div> + <RequirementTitle>{r.name}</RequirementTitle> + <RequirementDescription>{r.description}</RequirementDescription> + </div> + );} + )} + </Typography> + </DialogContent> + <DialogActions> + <Button autoFocus onClick={handleClose} color="primary"> + Save changes + </Button> + </DialogActions> + </Dialog> + </div> + ); +} + +const RequirementDescription = styled.p` + margin-left: 20px; + margin-right: 20px; +` + +const RequirementTitle = styled.h3` +` \ No newline at end of file