diff --git a/src/Components/Checkbox.js b/src/Components/Checkbox.js index d2d9b96ee7647fe8d452a97e4fa789c44a16c11b..3e0be625c424542d75bd13680417450a409f410d 100644 --- a/src/Components/Checkbox.js +++ b/src/Components/Checkbox.js @@ -25,10 +25,9 @@ const StyledFormControlLabel = styled(FormControlLabel)` .label { font-size : 12px !important; } -` - -const StyledCheckbox = styled(Checkbox)` - color : #00bcd4 !important; + .MuiCheckbox-colorSecondary.Mui-checked { + color : #00bcd4 !important; + } ` export default function LabeledCheckbox(props) { @@ -37,10 +36,8 @@ export default function LabeledCheckbox(props) { <StyledFormControlLabel control={ <Checkbox - disabled = {props.disabledCheckbox} value = {props.checked} onChange = {props.handleChange} - style = { { color : props.disabledCheckbox ? "#000" : "#00bcd4"}} /> } label={<span style={{ fontSize: '12px' }}>{props.label}</span>} diff --git a/src/Components/ColaborarModal.js b/src/Components/ColaborarModal.js index 29d6dc499501ed400765614c4c1d7d310b5f761c..0a4fdd48d7b8e849385ad7d620b9096e2fa9226e 100644 --- a/src/Components/ColaborarModal.js +++ b/src/Components/ColaborarModal.js @@ -1,4 +1,4 @@ -import React, {useContext} from 'react'; +import React, {useContext, useState} from 'react'; import Modal from '@material-ui/core/Modal'; import Fade from '@material-ui/core/Fade'; import styled from 'styled-components' @@ -9,7 +9,7 @@ import CloseIcon from '@material-ui/icons/Close'; import LabeledCheckbox from "../Components/Checkbox.js" const StyledDivContainer = styled.div` - background-color : rgb(255,255,255);; + background-color : rgb(255,255,255); border-radius : 4px; border-shadow : #000; color : rgb(102,102,102); @@ -77,6 +77,8 @@ const Styledspan = styled.span` export default function ColaborarModal (props) { const {state, dispatch} = useContext(Store) + const [checkbox, controlCheckbox] = useState(false) + const handleCheckbox = () => controlCheckbox(!checkbox) return ( <StyledModal @@ -94,6 +96,7 @@ export default function ColaborarModal (props) { > <Fade in={props.open}> <StyledDivContainer> + <span style={{width:"32px"}}/> <StyledDivHeader> <StyledH2> Você é professor(a), da educação básica, e gostaria de colaborar com a Plataforma? @@ -126,7 +129,7 @@ export default function ColaborarModal (props) { </StyledButtonsDiv> </div> <div style={{display:"flex", alignItems:"flex-start"}}> - <LabeledCheckbox label={<Styledspan>Não perguntar novamente</Styledspan>} /> + <LabeledCheckbox label={<Styledspan>Não perguntar novamente</Styledspan>} checked={checkbox} handleChange={handleCheckbox}/> </div> </StyledDivContentInformation> </StyledDivDialogContent> diff --git a/src/Components/Header.js b/src/Components/Header.js index 386a3e4afd50c508a94a90fc4a72e86b7481d263..475572e173b047446d39a61e1677669c57ca9ed3 100644 --- a/src/Components/Header.js +++ b/src/Components/Header.js @@ -42,6 +42,7 @@ export default function Header(props){ const [signUpOpen, setSignUp] = useState(false) const [loginOpen, setLogin] = useState(false) const [successfulLoginOpen, handleSuccessfulLogin] = useState(false) + const [modalColaborar, setModalColaborar] = useState(true) const toggleSnackbar = (event, reason) => { if (reason === 'clickaway') { @@ -80,7 +81,7 @@ export default function Header(props){ } <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}/> <LoginModal open={loginOpen} handleClose={handleLogin} openSignUp={handleSignUp} openSnackbar = {() => {handleSuccessfulLogin(true)}}/> - {/*<ColaborarModal open={state.modalColaborarPlataformaOpen} handleClose={handleKyloren} />*/} + <ColaborarModal open={modalColaborar} handleClose={() => {setModalColaborar(!modalColaborar)}} /> </> )