Develop copy to implement accessibility

src/Components/PageProfessorComponents/PartOne.js

-import React, {useState, useEffect} from 'react'
+import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import Stepper from '../Stepper.js'
 import FormControl from '@material-ui/core/FormControl';
 import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-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 './PartTwo.js'
+import { Button } from '@material-ui/core'
+import { RightSideStrikedH3, LeftSideStrikedH3 } from '../LoginContainerFunction.js'
+import { ButtonCancelar } from './PartTwo.js'
 import axios from 'axios'
 import FormInput from '../FormInput.js'
+import TextField from '@material-ui/core/TextField';
+import { makeStyles } from "@material-ui/styles";
 
-export function sortDict (dict) {
+
+const useStyles = makeStyles(theme => ({
+    darkTextField: {
+        maxWidth: "100%",
+        fontSize: "15px",
+        fontWeight: "lighter",
+        color: "white",
+        width: "100%"
+    },
+    lightTextField: {
+        maxWidth: "100%",
+        fontSize: "15px",
+        fontWeight: "lighter",
+        color: "black",
+        width: "100%"
+    }
+}));
+
+export function sortDict(dict) {
     const newDict = dict.sort((a, b) => (a.name) > (b.name) ? 1 : -1)
     return newDict
 
@@ -27,13 +44,14 @@ const extractUFInfo = (ufs, name) => {
             abbreviation = obj.abbreviation
         }
     }
-    return {id : id, abbreviation : abbreviation}
+    return { id: id, abbreviation: abbreviation }
 }
 
-export default function PartOne (props) {
+export default function PartOne(props) {
+    const classes = useStyles();
     //stores initial get response (list of states, sorted alphabetically)
     const [ufList, setStates] = useState([])
-    const handleSetStates = (states) => {setStates(states)}
+    const handleSetStates = (states) => { setStates(states) }
 
     //stores list of cities sorted alphabetically
     const [municipioList, setMunicipioList] = useState([])
@@ -42,33 +60,34 @@ export default function PartOne (props) {
     //stores a single user selected state
     const [uf, setUF] = useState(
         {
-            algumFoiEscolhido : false,
-            name : '',
-            abbreviation : ''
+            algumFoiEscolhido: false,
+            name: '',
+            abbreviation: ''
         }
     )
 
     //stores a single user selected city
     const [municipio, setMunicipio] = useState(
         {
-            algumFoiEscolhido : false,
-            name : ''
+            algumFoiEscolhido: false,
+            name: ''
         }
     )
 
     const [codigoINEP, setCodigoINEP] = useState(
         {
-            codigoInvalido : false,
-            value : ''
+            codigoInvalido: false,
+            value: ''
         }
     )
 
     const handleCodigoINEP = (event) => {
         const code = event.target.value
 
-        setCodigoINEP({...codigoINEP,
-            codigoInvalido : false,
-            value : code
+        setCodigoINEP({
+            ...codigoINEP,
+            codigoInvalido: false,
+            value: code
         })
     }
 
@@ -76,12 +95,13 @@ export default function PartOne (props) {
         const code = codigoINEP.value
 
         axios.get(('https://www.simcaq.c3sl.ufpr.br/api/v1/portal_mec_inep?filter=school_cod:' + code)
-        ).then( (response) => {
+        ).then((response) => {
             handleSubmit()
         }, (error) => {
-            setCodigoINEP({...codigoINEP,
-                codigoInvalido : true,
-                value : ''
+            setCodigoINEP({
+                ...codigoINEP,
+                codigoInvalido: true,
+                value: ''
             })
         }
         )
@@ -92,128 +112,152 @@ export default function PartOne (props) {
     }
 
     //on render component, call simcaq api and update ufList
-    useEffect ( () => {
+    useEffect(() => {
         axios.get(('https://simcaq.c3sl.ufpr.br/api/v1/state')
-        ).then( (response) => {
+        ).then((response) => {
             console.log(sortDict(response.data.result))
             handleSetStates(sortDict(response.data.result))
         },
-        (error) => console.log('erro acessando api do simcaq (estados)'))
+            (error) => console.log('erro acessando api do simcaq (estados)'))
     }, [])
 
     const handleChooseUF = (event) => {
         const ufName = event.target.value
-        const {id, abbreviation} = extractUFInfo(ufList, ufName)
+        const { id, abbreviation } = extractUFInfo(ufList, ufName)
         console.log(id, abbreviation)
 
-        setUF({...uf,
-                algumFoiEscolhido : true,
-                name : ufName,
-                abbreviation : abbreviation
-            }
+        setUF({
+            ...uf,
+            algumFoiEscolhido: true,
+            name: ufName,
+            abbreviation: abbreviation
+        }
         )
 
         axios.get(('https://simcaq.c3sl.ufpr.br/api/v1/city?filter=state:' + id)
-        ).then( (response) => {
+        ).then((response) => {
             handleSetMunicipioList(sortDict(response.data.result))
-            }, (error) => console.log('erro acessando api do simcaq (cidades)')
+        }, (error) => console.log('erro acessando api do simcaq (cidades)')
         )
     }
 
     const handleChooseCity = (event) => {
         const cityName = event.target.value
         console.log(cityName)
-        setMunicipio({...municipio,
-                 algumFoiEscolhido : true,
-                 name : cityName
-             }
+        setMunicipio({
+            ...municipio,
+            algumFoiEscolhido: true,
+            name: cityName
+        }
         )
     }
 
     return (
         <>
-        {/*/////////////////////////////PRIMEIRA PARTE/////////////////////////////*/}
-        <Content>
-            <h4>Vamos localizar o seu cadastro:</h4>
-            <Stepper items={props.stepper}/>
-            <form style={{textAlign:"start"}}>
-                <p>Localize pelo menos uma escola em que você tenha atuado até maio de 2017:</p>
-                <FormControl required style={{width:"100%"}}>
-                     <InputLabel>Procure sua UF</InputLabel>
-                     <Select
-                       labelId="demo-simple-select-label"
-                       id="demo-simple-select"
-                       value={uf.name}
-                       onChange={handleChooseUF}
-                     >
-                     {
-                        ufList.map( (ufs)=>
-                            <MenuItem key={ufs.name} value={ufs.name}>{ufs.name}</MenuItem>
-                        )
-                     }
-                     </Select>
-                </FormControl>
-                <FormControl required style={{width:"100%"}}>
-                     <InputLabel>Busque o seu município</InputLabel>
-                     <Select
-                       labelId="demo-simple-select-label"
-                       id="demo-simple-select"
-                       value={municipio.name}
-                       onChange={handleChooseCity}
-                     >
-                     {
-                        municipioList.map( (cidades)=>
-                            <MenuItem key={cidades.name} value={cidades.name}>{cidades.name}</MenuItem>
-                        )
-                     }
-                     </Select>
-                </FormControl>
-                <div style={{display:"flex", justifyContent:"center",paddingTop:"10px", paddingBottom:"10px"}}>
-                    <ButtonConfirmar
-                    onClick={ ( (uf.algumFoiEscolhido && municipio.algumFoiEscolhido) ? handleSubmit : '')}
-                    >
-                    BUSCAR</ButtonConfirmar>
-                </div>
-            </form>
+            {/*/////////////////////////////PRIMEIRA PARTE/////////////////////////////*/}
+            <Content>
+                <h4>Vamos localizar o seu cadastro:</h4>
+                <Stepper items={props.stepper} />
+                <form style={{ textAlign: "start" }}>
+                    <p>Localize pelo menos uma escola em que você tenha atuado até maio de 2017:</p>
+                    <FormControl required style={{ width: "100%", marginTop: '1em' }}>
+                        <h5> Procure sua UF </h5>
+                        <StyledTextField
+                            helperText={<span style={props.contrast === "" ? {} : { color: "white" }}>Clique aqui para selecionar sua UF</span>}
+                            contrast={props.contrast}
+                            select
+                            fullWidth
+                            value={uf.name}
+                            onChange={handleChooseUF}
+                            variant="outlined"
+                            InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+                        >
+                            {
+                                ufList.map((ufs) =>
+                                    <MenuItem style={props.contrast === "" ? {} : { backgroundColor: "black", color: "yellow", textDecoration: "underline" }} key={ufs.name} value={ufs.name}>{ufs.name}</MenuItem>
+                                )
+                            }
+                        </StyledTextField>
+                    </FormControl>
+                    <FormControl required style={{ width: "100%", marginTop: '1em' }}>
+                        <h5> Busque o seu município </h5>
+                        <StyledTextField
+                            helperText={<span style={props.contrast === "" ? {} : { color: "white" }}>Clique aqui para selecionar seu município</span>}
+                            contrast={props.contrast}
+                            select
+                            fullWidth
+                            value={municipio.name}
+                            onChange={handleChooseCity}
+                            variant="outlined"
+                            InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+                        >
+                            {
+                                municipioList.map((cidades) =>
+                                    <MenuItem style={props.contrast === "" ? {} : { backgroundColor: "black", color: "yellow", textDecoration: "underline" }} key={cidades.name} value={cidades.name}>{cidades.name}</MenuItem>
+                                )
+                            }
+                        </StyledTextField>
+                    </FormControl>
+                    <div style={{ display: "flex", justifyContent: "center", paddingTop: "10px", paddingBottom: "10px" }}>
+                        <ButtonConfirmar
+                            contrast={props.contrast}
+                            onClick={((uf.algumFoiEscolhido && municipio.algumFoiEscolhido) ? handleSubmit : '')}
+                        >
+                            BUSCAR</ButtonConfirmar>
+                    </div>
+                </form>
             </Content>
 
-            <div style={{display:"flex", justifyContent:"center", alignItems:"center"}}>
-                <LeftSideStrikedH3/><StrikeSpan>ou</StrikeSpan><RightSideStrikedH3/>
+            <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+                <LeftSideStrikedH3 contrast={props.contrast} /><StrikeSpan>ou</StrikeSpan><RightSideStrikedH3 contrast={props.contrast} />
             </div>
 
             {/*/////////////////////////////SEGUNDA PARTE/////////////////////////////*/}
             <Content>
                 <form>
                     <p>Localize pelo código INEP da escola:</p>
-                    <FormControl required style={{width:"100%"}}>
-                         <FormInput
-                           inputType={'text'}
-                           name={'Código INEP'}
-                           value={codigoINEP.value}
-                           handleChange = {handleCodigoINEP}
-                           placeholder={'Código INEP'}
-                           required={true}
-                           error={codigoINEP.codigoInvalido}
-                           help={codigoINEP.codigoInvalido ? <span style={{color:'red'}}>código INEP inválido</span> : ''}
-                         >
-                         </FormInput>
+                    <FormControl required style={{ width: "100%" }}>
+                        <FormInput
+                            contrast={props.contrast}
+                            inputType={'text'}
+                            name={'Código INEP'}
+                            value={codigoINEP.value}
+                            handleChange={handleCodigoINEP}
+                            placeholder={'Código INEP'}
+                            required={true}
+                            error={codigoINEP.codigoInvalido}
+                            help={codigoINEP.codigoInvalido ? <span style={{ color: 'red' }}>código INEP inválido</span> : ''}
+                        >
+                        </FormInput>
                     </FormControl>
-                    <div style={{display:"flex", justifyContent:"center",paddingTop:"10px", paddingBottom:"10px"}}>
+                    <div style={{ display: "flex", justifyContent: "center", paddingTop: "10px", paddingBottom: "10px" }}>
                         <ButtonConfirmar
-                        onClick={validateINEP}
+                            contrast={props.contrast}
+                            onClick={validateINEP}
                         >
-                        BUSCAR</ButtonConfirmar>
+                            BUSCAR</ButtonConfirmar>
                     </div>
                 </form>
             </Content>
-            <Divider/>
+            <hr style={props.contrast === "" ? { color: "#666" } : { color: "white" }} />
             <ButtonsArea>
-                <ButtonCancelar onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
+                <ButtonCancelar contrast={props.contrast} onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
             </ButtonsArea>
         </>
     )
 }
 
+const StyledTextField = styled(TextField)`
+    .MuiOutlinedInput-root {
+        &.Mui-focused fieldset {
+            border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+        }
+        fieldset {
+            border-color: ${props => props.contrast === "" ? "#666" : "white"};
+        }
+    }
+`
+
 export const ButtonsArea = styled.div`
     display : flex;
     justify-content : center;
@@ -257,34 +301,19 @@ export const Content = styled.div`
     }
 `
 export const ButtonConfirmar = styled(Button)`
-    background-color : #00bcd4 !important;
-    color : #fff !important;
+    :hover{
+        background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+    }
+    background: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+    border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+    color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+    text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
     font-family : 'Roboto',sans-serif !important;
-    font-size : 14px !important;
-    font-weight : bolder !important;
-    padding-left : 16px !important;
-    padding-right : 16px !important;
     outline : none !important;
     margin : 6px 8px !important;
     white-space : nowrap !important;
     text-transform : uppercase !important;
     font-weight : bold !important;
-    font-size : 14px !important;
-    font-style : inherit !important;
-    font-variant : inherit !important;
-    font-family : inherit !important;
-    text-decoration : none !important;
-    overflow : hidden !important;
-    display : inline-block !important;
-    position : relative !important;
     cursor : pointer !important;
-    min-height : 36px !important;
-    min-width : 88px !important;
-    line-height : 36px !important;
-    vertical-align : middle !important;
-    align-items : center !important;
     text-align : center !important;
-    border-radius : 3px !important;
-    box-sizing : border-box !important;
-    border : 0 !important;
 `