layout das 3 paginas de /professor prontos

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;

src/Components/PageProfessorComponents/PartTwo.js

 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;
+`

src/Components/Table.js

+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>
+  );
+}

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>