diff --git a/src/Components/PageProfessorComponents/PartOne.js b/src/Components/PageProfessorComponents/PartOne.js index d3e604a1c699ff5286525f5bf7012d3390cc0a19..497ee82307905dc25c61dfa69f820a3718dd4636 100644 --- a/src/Components/PageProfessorComponents/PartOne.js +++ b/src/Components/PageProfessorComponents/PartOne.js @@ -8,7 +8,7 @@ import InputLabel from '@material-ui/core/InputLabel'; import {Button} from '@material-ui/core' import {RightSideStrikedH3, LeftSideStrikedH3} from '../LoginContainerFunction.js' import Divider from '@material-ui/core/Divider'; -import {ButtonCancelar} from '../TabPanels/TabPanelEditarPerfil.js' +import {ButtonCancelar} from './PartTwo.js' export default function PartOne (props) { const [uf, setUF] = useState('') @@ -87,7 +87,7 @@ export default function PartOne (props) { ) } -const ButtonsArea = styled.div` +export const ButtonsArea = styled.div` display : flex; justify-content : center; padding-top : 10px; diff --git a/src/Components/PageProfessorComponents/PartTwo.js b/src/Components/PageProfessorComponents/PartTwo.js index 8ad76c9fe3951a4abc7db09bfbbe9d1f414094d3..33941abdc3fee8a86ea592825e614c053b461deb 100644 --- a/src/Components/PageProfessorComponents/PartTwo.js +++ b/src/Components/PageProfessorComponents/PartTwo.js @@ -1,7 +1,63 @@ import React from 'react' +import {Content, ButtonsArea} from './PartOne.js' +import Divider from '@material-ui/core/Divider'; +import Stepper from '../Stepper.js' +import CustomizedTables from '../Table.js' +import styled from 'styled-components' +import {Button} from '@material-ui/core' export default function PartTwo (props) { return ( - <span>Part Two</span> + <> + <Content> + <h4>Vamos localizar o seu cadastro:</h4> + <Stepper items={props.stepper}/> + </Content> + <Content> + <InputContainer> + <p>Selecione a sua escola:</p> + <CustomizedTables/> + </InputContainer> + </Content> + <Divider/> + <ButtonsArea> + <ButtonGrey>VOLTAR</ButtonGrey><ButtonCancelar>CANCELAR VERIFICAÇÃO</ButtonCancelar> + </ButtonsArea> + </> ) } + +export const ButtonCancelar = styled(Button)` + color: #666 !important; + font-family: 'Roboto',sans-serif !important; + font-size: 14px !important; + font-weight: bold !important; + height: 36px !important; + border-radius: 3px !important; + padding-left: 16px !important; + padding-right: 16px !important; +` + +const ButtonGrey = styled(Button)` + background-color : #fff !important; + border : 1.5px #666 solid !important; + color : #666 !important; + box-shadow : none !important; + font-family : 'Roboto',sans-serif !important; + font-size : 14px !important; + font-weight : bold !important; + height : 36px !important; + border-radius : 3px !important; + padding-left : 16px !important; + padding-right : 16px !important; + vertical-align : middle !important; + text-align : center !important; + align-items : center !important; + +` + +const InputContainer = styled.div` + max-width : 970px; + display : block; + flex : auto; +` diff --git a/src/Components/Table.js b/src/Components/Table.js new file mode 100644 index 0000000000000000000000000000000000000000..8fe88f90fdb6142bb88761031d318600df482387 --- /dev/null +++ b/src/Components/Table.js @@ -0,0 +1,81 @@ +import React from 'react'; +import { withStyles, makeStyles } from '@material-ui/core/styles'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableContainer from '@material-ui/core/TableContainer'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import Paper from '@material-ui/core/Paper'; + +const StyledTableCell = withStyles(theme => ({ + head: { + backgroundColor: '#00bcd4', + color: '#ffffff', + fontFamily: 'Roboto', + fontStyle: 'normal', + fontWeight: 500, + fontSize: 15, + letterSpacing: .01 + }, + body: { + fontSize: 14, + }, +}))(TableCell); + +const StyledTableRow = withStyles(theme => ({ + root: { + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.background.default, + }, + }, +}))(TableRow); + +function createData(name, calories, fat, carbs) { + return { name, calories, fat, carbs}; +} + +const rows = [ + createData('Frozen yoghurt', 159, 6.0, 24), + createData('Ice cream sandwich', 237, 9.0, 37), + createData('Eclair', 262, 16.0, 24), + createData('Cupcake', 305, 3.7, 67), + createData('Gingerbread', 356, 16.0, 49), +]; + +const useStyles = makeStyles({ + table: { + minWidth: 970, + }, +}); + +export default function CustomizedTables() { + const classes = useStyles(); + + return ( + <TableContainer component={Paper}> + <Table className={classes.table} aria-label="customized table"> + <TableHead> + <TableRow> + <StyledTableCell>Codigo INEP</StyledTableCell> + <StyledTableCell align="right">Escola</StyledTableCell> + <StyledTableCell align="right">UF</StyledTableCell> + <StyledTableCell align="right">Cidade</StyledTableCell> + </TableRow> + </TableHead> + <TableBody> + {rows.map(row => ( + <StyledTableRow key={row.name}> + <StyledTableCell component="th" scope="row"> + {row.name} + </StyledTableCell> + <StyledTableCell align="right">{row.calories}</StyledTableCell> + <StyledTableCell align="right">{row.fat}</StyledTableCell> + <StyledTableCell align="right">{row.carbs}</StyledTableCell> + </StyledTableRow> + ))} + </TableBody> + </Table> + </TableContainer> + ); +} diff --git a/src/Pages/PageProfessor.js b/src/Pages/PageProfessor.js index 4905f415faafcb4f0fc50e406106528638f850dc..e26be44d3f4102ddc2d307153233c956d20c76bd 100644 --- a/src/Pages/PageProfessor.js +++ b/src/Pages/PageProfessor.js @@ -38,7 +38,7 @@ export default function PageProfessor (props) { <Paper elevation={3} style= {{width:"max-content"}}> <div style={{paddingRight:"15px", paddingLeft:"15px"}}> {stepper[0].selected && <PartOne stepper={stepper} handleBuscar={handleBuscar} handleCancelar={handleCancelar}/>} - {stepper[1].selected && <PartTwo/>} + {stepper[1].selected && <PartTwo stepper={stepper}/>} {stepper[2].selected && <PartThree/>} </div> </Paper>