From 77a5241cf94d6bcd82db4754bc1b7262dd6be60b Mon Sep 17 00:00:00 2001 From: Lucas Schoenfelder <les17@inf.ufpr.br> Date: Tue, 11 Feb 2020 17:30:35 -0300 Subject: [PATCH] checkbox color fixed --- src/Components/Checkbox.js | 9 +++------ src/Components/ColaborarModal.js | 9 ++++++--- src/Components/Header.js | 3 ++- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/Components/Checkbox.js b/src/Components/Checkbox.js index d2d9b96e..3e0be625 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 29d6dc49..0a4fdd48 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 386a3e4a..475572e1 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)}} /> </> ) -- GitLab