checkbox color fixed

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>}

src/Components/ColaborarModal.js

-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>

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)}} />
 
       </>
   )