From c9fbf104a6233e933f3c09d48b13eb750314c779 Mon Sep 17 00:00:00 2001 From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br> Date: Mon, 9 Aug 2021 20:40:42 -0300 Subject: [PATCH] Developing accessibility --- src/Components/ButtonGuardarColecao.js | 6 +- src/Components/CloseModalButton.js | 2 +- src/Components/ColCardOwnerOptions.js | 18 +- src/Components/ColCardPublicOptions.js | 22 +- src/Components/CollectionCardFunction.js | 10 +- src/Components/CollectionCommentSection.js | 2 + src/Components/CollectionReview.js | 3 + src/Components/Comment.js | 2 +- src/Components/ContactButtons/FollowButton.js | 16 +- .../ContactButtons/FollowingButton.js | 8 +- src/Components/ContactCardOptions.js | 30 +- src/Components/ContactForm.js | 4 +- src/Components/FollowCollectionButton.js | 2 + src/Components/GuardarModal.js | 2 +- src/Components/Header.js | 6 +- .../ComponentAlterarAvatar.js | 2 +- .../ComponentAlterarCover.js | 2 +- src/Components/ModalEditarColecao.js | 1 - src/Components/ReportButton.js | 2 +- src/Components/ReportColecaoForm.js | 4 +- src/Components/ReportRecursoForm.js | 4 +- src/Components/ReportUserForm.js | 36 +- src/Components/ResourceCardFunction.js | 4 +- src/Components/ResourceCardOptions.js | 24 +- .../ResourcePageComponents/CommentsArea.js | 4 +- .../ResourcePageComponents/Footer.js | 12 +- .../ResourcePageComponents/Sobre.js | 4 +- .../UserPageTabs/ModalExcluirConta.js | 2 +- .../UserPageTabs/PanelEditarPerfil.js | 2 + .../UserPageTabs/PanelGerenciarConta.js | 2 +- .../UploadPageComponents/ButtonsDiv.js | 1 + .../UploadPageComponents/PartThree.js | 1 + src/Components/UserPageComponents/Avatar.js | 1 + src/Components/UserPageComponents/Cover.js | 1 + src/Pages/PageProfessor.js | 2 +- src/Pages/PublicationPermissionsPage.js | 7 +- src/Pages/ResourcePage.js | 662 +++++++++--------- src/Pages/UploadPage.js | 1 + src/Pages/UserPage.js | 387 +++++----- src/Pages/UserTerms.js | 434 ++++++------ 40 files changed, 880 insertions(+), 855 deletions(-) diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js index 68a6d274..ca0729a2 100644 --- a/src/Components/ButtonGuardarColecao.js +++ b/src/Components/ButtonGuardarColecao.js @@ -46,9 +46,9 @@ export default function ButtonGuardarColecao(props) { return ( <> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar} @@ -62,7 +62,7 @@ export default function ButtonGuardarColecao(props) { <StyledButton onClick={handleGuardar} className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #f07e05", borderRadius : "5px", color :"#f07e05"} : {border: "1px solid white", borderRadius : "5px", color :"#f07e05"}} > - <CreateNewFolderIcon /> GUARDAR + <CreateNewFolderIcon className={`${props.contrast}IconColor`}/><span>GUARDAR</span> </StyledButton> </> ) diff --git a/src/Components/CloseModalButton.js b/src/Components/CloseModalButton.js index 00e8b3c3..186f36f0 100644 --- a/src/Components/CloseModalButton.js +++ b/src/Components/CloseModalButton.js @@ -6,7 +6,7 @@ import CloseIcon from '@material-ui/icons/Close'; export default function CloseModalButton (props) { return ( <StyledCloseModalButton onClick={props.handleClose}> - <CloseIcon/> + <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/> </StyledCloseModalButton> ) } diff --git a/src/Components/ColCardOwnerOptions.js b/src/Components/ColCardOwnerOptions.js index 3199c61e..2c43d644 100644 --- a/src/Components/ColCardOwnerOptions.js +++ b/src/Components/ColCardOwnerOptions.js @@ -49,16 +49,16 @@ export default function ColCardOwnerOptions (props) { return ( <> <ModalExcluirColecao id={props.id} - open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}} removeColl={props.removeColl} + contrast={props.contrast} open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}} removeColl={props.removeColl} /> <ModalEditarColecao id={props.id} - open={modalEditarOpen} handleClose={() => {toggleModalEditar(false)}} + contrast={props.contrast} open={modalEditarOpen} handleClose={() => {toggleModalEditar(false)}} changeColName={props.changeColName} changeColPrivacy={props.changeColPrivacy} /> <div style={{fontSize: "12px"}}> <Button className={`${props.contrast}LinkColor`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}> - OPÇÕES <MoreVertIcon style={{color : "inherit"}}/> + OPÇÕES <MoreVertIcon className={`${props.contrast}IconColor`}/> </Button> <Menu id="simple-menu" @@ -67,18 +67,18 @@ export default function ColCardOwnerOptions (props) { open={Boolean(anchorEl)} onClose={handleClose} > - <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast}> + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast}> <Link to={"/colecao-do-usuario/" + props.id}> - <ListItemIcon className={`${props.contrast}LinkColor`}><OpenIcon /></ListItemIcon>Abrir + <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir </Link> </StyledMenuItem> - <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {toggleModalEditar(true)}}> - <ListItemIcon className={`${props.contrast}LinkColor`}><CreateIcon /></ListItemIcon>Editar + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalEditar(true)}}> + <ListItemIcon className={`${props.contrast}IconColor`}><CreateIcon /></ListItemIcon>Editar </StyledMenuItem> - <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {toggleModalExcluir(true)}} > - <ListItemIcon className={`${props.contrast}LinkColor`}><DeleteForeverIcon /></ListItemIcon>Excluir + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalExcluir(true)}} > + <ListItemIcon className={`${props.contrast}IconColor`}><DeleteForeverIcon /></ListItemIcon>Excluir </StyledMenuItem> diff --git a/src/Components/ColCardPublicOptions.js b/src/Components/ColCardPublicOptions.js index 4e014419..88cebaf2 100644 --- a/src/Components/ColCardPublicOptions.js +++ b/src/Components/ColCardPublicOptions.js @@ -63,7 +63,7 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h onClick={handleClick} style={{ color: "#666" }} > - <MoreVertIcon className={`${contrast}LinkColor`} style={{ color: "inherit" }} /> + <MoreVertIcon className={`${contrast}IconColor`} style={{ color: "inherit" }} /> </Button> <Menu id="simple-menu" @@ -72,9 +72,9 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h open={Boolean(anchorEl)} onClose={handleClose} > - <StyledMenuItem className={`${contrast}LinkColor`} contrast={contrast}> + <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast}> <Link to={"/colecao-do-usuario/" + id}> - <ListItemIcon className={`${contrast}LinkColor`}> + <ListItemIcon className={`${contrast}IconColor`}> <OpenIcon /> </ListItemIcon> Abrir @@ -82,20 +82,20 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h </StyledMenuItem> <StyledMenuItem - className={`${contrast}LinkColor`} + className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast} onClick={() => window.open("/colecao-do-usuario/" + id, "_blank") } > - <ListItemIcon className={`${contrast}LinkColor`}> + <ListItemIcon className={`${contrast}IconColor ${contrast}Text`}> <OpenInBrowserIcon /> </ListItemIcon> Abrir em nova guia </StyledMenuItem> - <StyledMenuItem className={`${contrast}LinkColor`} contrast={contrast} onClick={handleLike}> - <ListItemIcon className={`${contrast}LinkColor`}> + <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast} onClick={handleLike}> + <ListItemIcon className={`${contrast}IconColor`}> { liked ? <FavoriteIcon /> : <FavoriteIcon /> @@ -107,8 +107,8 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h } </StyledMenuItem> - <StyledMenuItem className={`${contrast}LinkColor`} contrast={contrast} onClick={handleFollow}> - <ListItemIcon className={`${contrast}LinkColor`}> + <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast} onClick={handleFollow}> + <ListItemIcon className={`${contrast}IconColor`}> { userFollowingCol ? <ExitToAppIcon /> : <AddIcon /> @@ -121,7 +121,7 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h </StyledMenuItem> <StyledMenuItem - className={`${contrast}LinkColor`} + className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast} onClick={() => { if (currentUserId) @@ -130,7 +130,7 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h handleLogin() }} > - <ListItemIcon className={`${contrast}LinkColor`}> + <ListItemIcon className={`${contrast}IconColor`}> <ReportProblemIcon /> </ListItemIcon> Reportar diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js index e983107d..0c409dc8 100644 --- a/src/Components/CollectionCardFunction.js +++ b/src/Components/CollectionCardFunction.js @@ -92,7 +92,7 @@ export default function CollectionCardFunction(props) { const RenderFollowButton = () => { return ( <FollowButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#503096" } : {border: "1px solid white", borderRadius : "5px", color :"#503096"}} onClick={handleFollow}> - <AddIcon /><span>SEGUIR</span> + <AddIcon className={`${props.contrast}IconColor`}/><span>SEGUIR</span> </FollowButton> ) } @@ -119,7 +119,7 @@ export default function CollectionCardFunction(props) { ( [ <React.Fragment> - <CheckIcon /><span>SEGUINDO</span> + <CheckIcon className={`${props.contrast}IconColor`}/><span>SEGUINDO</span> </React.Fragment> ] ) @@ -179,9 +179,9 @@ export default function CollectionCardFunction(props) { return ( <> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar} @@ -264,7 +264,7 @@ export default function CollectionCardFunction(props) { <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}> { privacy === 'private' && - <LockIcon style={{ color: "#666" }} /> + <LockIcon className={`${props.contrast}IconColor`} /> } </Grid> <Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}> diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js index 49f8861e..5c22b01a 100644 --- a/src/Components/CollectionCommentSection.js +++ b/src/Components/CollectionCommentSection.js @@ -214,11 +214,13 @@ export default function CollectionCommentSection(props) { color={snackInfo.color} /> <SignUpModal + contrast={props.contrast} open={sign_up_open} handleClose={() => setSignUpOpen(false)} openLogin={() => setLoginOpen(true)} /> <LoginModal + contrast={props.contrast} openSnackbar={handleOpenSnackSignIn} open={log_in_open} handleClose={() => setLoginOpen(false)} diff --git a/src/Components/CollectionReview.js b/src/Components/CollectionReview.js index c037071d..6194f4f9 100644 --- a/src/Components/CollectionReview.js +++ b/src/Components/CollectionReview.js @@ -142,6 +142,7 @@ export default function CollectionReview(props) { <InfoIcon style={props.contrast === "" ? {color: "#666"} : {color: "white"}}/><span style={props.contrast === "" ? {color: "#666"} : {color: "yellow", textDecoration: "underline"}}>Reportar erro ou abuso</span> </IconButton> <ReportModal + contrast={props.contrast} open={reportOpen} handleClose={handleCloseModal} form="colecao" @@ -150,11 +151,13 @@ export default function CollectionReview(props) { /> </Grid> <SignUpModal + contrast={props.contrast} open={sign_up_open} handleClose={() => setSignUpOpen(false)} openLogin={() => setLoginOpen(true)} /> <LoginModal + contrast={props.contrast} openSnackbar={handleOpenSnackSignIn} open={log_in_open} handleClose={() => setLoginOpen(false)} diff --git a/src/Components/Comment.js b/src/Components/Comment.js index 4388ec75..5d8a2fce 100644 --- a/src/Components/Comment.js +++ b/src/Components/Comment.js @@ -124,7 +124,7 @@ export default function Comment(props) { return ( <React.Fragment> <ModalExcluir - open={modalOpen} handleClose={() => { toggleModal(false) }} + contrast={props.contrast} open={modalOpen} handleClose={() => { toggleModal(false) }} handleConfirm={deleteComment} /> <Grid container style={{ paddingLeft: "20px" }}> diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js index 9be8c975..07c7c95e 100644 --- a/src/Components/ContactButtons/FollowButton.js +++ b/src/Components/ContactButtons/FollowButton.js @@ -73,17 +73,19 @@ export default function FollowButton(props) { <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> </Snackbar> {/*-------------------------------MODALS---------------------------------------*/} - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> {/*----------------------------------------------------------------------------*/} { state.currentUser.id !== '' ? ( <StyledButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} onClick={() => handleFollow(props.followerID)}> - <PersonAddIcon style={{ + <PersonAddIcon + className={`${props.contrast}IconColor`} + style={{ fontSize: "24px", display: "inline-block", verticalAlign: "middle", @@ -96,7 +98,9 @@ export default function FollowButton(props) { <StyledButton className={`${props.contrast}LinkColor `} style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} onClick={() => handleLogin(true)}> - <PersonAddIcon style={{ + <PersonAddIcon + className={`${props.contrast}IconColor`} + style={{ fontSize: "24px", display: "inline-block", verticalAlign: "middle", @@ -147,10 +151,10 @@ export function NoIcon(props) { <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> </Snackbar> {/*-------------------------------MODALS---------------------------------------*/} - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> {/*----------------------------------------------------------------------------*/} { state.currentUser.id !== '' ? ( diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js index 229f5e44..fa2de050 100644 --- a/src/Components/ContactButtons/FollowingButton.js +++ b/src/Components/ContactButtons/FollowingButton.js @@ -49,7 +49,7 @@ export default function FollowingButton(props) { return ( <React.Fragment> - <ModalConfirmarUnfollow open={modalOpen} + <ModalConfirmarUnfollow contrast={props.contrast} open={modalOpen} handleClose={() => { toggleModal(false) }} handleConfirm={handleUnfollowPartTwo} /> @@ -76,7 +76,9 @@ export default function FollowingButton(props) { <StyledButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"white", backgroundColor: "#00bcd4"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} > - <GroupIcon style={{ + <GroupIcon + className={`${props.contrast}IconColor`} + style={{ fontSize: "24px", display: "inline-block", verticalAlign: "middle", @@ -115,7 +117,7 @@ export function NoIconFollowing(props) { return ( <React.Fragment> - <ModalConfirmarUnfollow open={modalOpen} + <ModalConfirmarUnfollow contrast={props.contrast} open={modalOpen} handleClose={() => { toggleModal(false) }} handleConfirm={handleUnfollowPartTwo} /> diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js index 76c5d05e..b22cc7b3 100644 --- a/src/Components/ContactCardOptions.js +++ b/src/Components/ContactCardOptions.js @@ -93,15 +93,15 @@ export default function SimpleMenu(props) { <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> </Snackbar> {/*-------------------------------MODALS---------------------------------------*/} - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> {/*----------------------------------------------------------------------------*/} <> { reportModal && - <ReportModal open={reportModal} handleClose={() => handleModal(false)} + <ReportModal contrast={props.contrast} open={reportModal} handleClose={() => handleModal(false)} form="user" complainableId={props.followableID} complainableType={"User"} {...props}/> @@ -117,30 +117,30 @@ export default function SimpleMenu(props) { open={Boolean(anchorEl)} onClose={handleClose} > - <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleClose}> + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleClose}> <Link to={"/usuario-publico/" + props.followableID}> - <ListItemIcon className={`${props.contrast}LinkColor`}><OpenIcon /></ListItemIcon>Abrir + <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir </Link> </StyledMenuItem> { props.followed ? ( - <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}> - <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Deixar de Seguir + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}> + <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Deixar de Seguir </StyledMenuItem> ) : ( state.currentUser.id !== '' ? ( - <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}> - <ListItemIcon className={`${props.contrast}LinkColor`}><PersonAddIcon /></ListItemIcon>Seguir + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}> + <ListItemIcon className={`${props.contrast}IconColor`}><PersonAddIcon /></ListItemIcon>Seguir </StyledMenuItem> ) : ( - <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleLogin(props.followableID)}}> - <ListItemIcon className={`${props.contrast}LinkColor`}><PersonAddIcon /></ListItemIcon>Seguir + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleLogin(props.followableID)}}> + <ListItemIcon className={`${props.contrast}IconColor`}><PersonAddIcon /></ListItemIcon>Seguir </StyledMenuItem> ) ) @@ -148,14 +148,14 @@ export default function SimpleMenu(props) { { state.currentUser.id !== '' ? ( - <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleModal(true); handleClose()}}> - <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Reportar + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleModal(true); handleClose()}}> + <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar </StyledMenuItem> ) : ( - <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleLogin(true)}}> - <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Reportar + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleLogin(true)}}> + <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar </StyledMenuItem> ) } diff --git a/src/Components/ContactForm.js b/src/Components/ContactForm.js index 3e4ea4ab..9c2d8e3f 100644 --- a/src/Components/ContactForm.js +++ b/src/Components/ContactForm.js @@ -241,10 +241,10 @@ function Formulario(props) { <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> </Snackbar> {/*-------------------------------MODALS---------------------------------------*/} - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> {/*----------------------------------------------------------------------------*/} diff --git a/src/Components/FollowCollectionButton.js b/src/Components/FollowCollectionButton.js index 666c49d9..dd85205b 100644 --- a/src/Components/FollowCollectionButton.js +++ b/src/Components/FollowCollectionButton.js @@ -199,11 +199,13 @@ export default function FollowCollectionButton(props) { <ButtonText>{button_text}</ButtonText> </FollowButton> <SignUpModal + contrast={props.contrast} open={sign_up_open} handleClose={() => setSignUpOpen(false)} openLogin={handleOpenLogin} /> <LoginModal + contrast={props.contrast} openSnackbar={handleOpenSnackSignIn} open={open_login} handleClose={() => setOpenLogin(false)} diff --git a/src/Components/GuardarModal.js b/src/Components/GuardarModal.js index 618f3c0c..ba73e5a5 100644 --- a/src/Components/GuardarModal.js +++ b/src/Components/GuardarModal.js @@ -35,7 +35,7 @@ import { getRequest, postRequest } from './HelperFunctions/getAxiosConfig' function CloseModalButton(props) { return ( <StyledCloseModalButton onClick={props.handleClose}> - <CloseIcon /> + <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/> </StyledCloseModalButton> ) } diff --git a/src/Components/Header.js b/src/Components/Header.js index 8f02c6c5..53b6100e 100644 --- a/src/Components/Header.js +++ b/src/Components/Header.js @@ -152,10 +152,10 @@ export default function Header(props) { </React.Fragment> ) } - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <SignUpModal contrast={state.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <ColaborarModal open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} /> + <ColaborarModal contrast={state.contrast} open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} /> </React.Fragment> ) } diff --git a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js index 294bcdb0..1c687601 100644 --- a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js +++ b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js @@ -113,7 +113,7 @@ export default function ComponentAlterarAvatar (props) { <span style={{width:"32px"}}/> <StyledH2>{uploadingImage ? 'Alterar foto do perfil' : 'Editar Foto'}</StyledH2> <StyledCloseModalButton onClick={props.handleClose}> - <CloseIcon style={{color : "#666"}}/> + <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/> </StyledCloseModalButton> </HeaderDiv> <DialogDiv> diff --git a/src/Components/ModalAlterarCover/ComponentAlterarCover.js b/src/Components/ModalAlterarCover/ComponentAlterarCover.js index a4059ecf..18df65d3 100644 --- a/src/Components/ModalAlterarCover/ComponentAlterarCover.js +++ b/src/Components/ModalAlterarCover/ComponentAlterarCover.js @@ -63,7 +63,7 @@ export default function ComponentAlterarCover (props) { <span style={{width:"32px"}}/> <StyledH2>Editar Capa do Perfil</StyledH2> <StyledCloseModalButton onClick={props.handleClose}> - <CloseIcon style={{color : "#666"}}/> + <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/> </StyledCloseModalButton> </HeaderDiv> <DialogDiv> diff --git a/src/Components/ModalEditarColecao.js b/src/Components/ModalEditarColecao.js index bd8511f2..6101bdbe 100644 --- a/src/Components/ModalEditarColecao.js +++ b/src/Components/ModalEditarColecao.js @@ -36,7 +36,6 @@ export default function ModalEditarColecao (props) { aria-labelledby="transition-modal-title" aria-describedby="transition-modal-description" open={props.open} - centered="true" onClose={props.handleClose} closeAfterTransition diff --git a/src/Components/ReportButton.js b/src/Components/ReportButton.js index 4dbac401..4d1bedaf 100644 --- a/src/Components/ReportButton.js +++ b/src/Components/ReportButton.js @@ -59,7 +59,7 @@ export default function ReportButton(props) { <> { reportModal && - <ReportModal open={reportModal} handleClose={() => handleModal()} + <ReportModal contrast={state.contrast} open={reportModal} handleClose={() => handleModal()} form="user" complainableId={props.complainableId} complainableType={props.complainableType} {...props} /> diff --git a/src/Components/ReportColecaoForm.js b/src/Components/ReportColecaoForm.js index 747a0c27..e03ce942 100644 --- a/src/Components/ReportColecaoForm.js +++ b/src/Components/ReportColecaoForm.js @@ -104,8 +104,8 @@ export default function ReportColecaoForm (props) { /> <ButtonsDiv> - <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar> - <ButtonEnviar type="submit">ENVIAR</ButtonEnviar> + <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar> + <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar> </ButtonsDiv> </form> ) diff --git a/src/Components/ReportRecursoForm.js b/src/Components/ReportRecursoForm.js index e811500d..fd13bf77 100644 --- a/src/Components/ReportRecursoForm.js +++ b/src/Components/ReportRecursoForm.js @@ -101,8 +101,8 @@ export default function ReportRecursoForm (props) { /> <ButtonsDiv> - <ButtonCancelar className={`${props.contrast}LinkColor`} onClick={props.handleClose}>CANCELAR</ButtonCancelar> - <ButtonEnviar className={`${props.contrast}LinkColor`} type="submit">ENVIAR</ButtonEnviar> + <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar> + <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar> </ButtonsDiv> </form> ) diff --git a/src/Components/ReportUserForm.js b/src/Components/ReportUserForm.js index 37086572..8ffa3301 100644 --- a/src/Components/ReportUserForm.js +++ b/src/Components/ReportUserForm.js @@ -26,13 +26,13 @@ import TextField from '@material-ui/core/TextField'; import { withStyles } from '@material-ui/core/styles'; const StyledRadio = withStyles({ - root: { - '&$checked': { - color: '#ff7f00 !important', + root: { + '&$checked': { + color: '#ff7f00 !important', + }, }, - }, - checked: {}, -})((props) => <Radio color="default" {...props} />); + checked: {}, +})((props) => <Radio {...props} />); export default function ReportForm (props) { const [value, setValue] = useState(-1); @@ -78,11 +78,11 @@ export default function ReportForm (props) { return ( <form onSubmit={(e) => {formSubmit(e)}}> - <StyledFormControl component="fieldset"> + <StyledFormControl contrast={props.contrast} component="fieldset"> <RadioGroup value={value} onChange={handleChange}> { options.map(option => - <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} /> + <FormControlLabel value={option.value} control={<StyledRadio contrast={props.contrast}/>} label={option.text} /> ) } </RadioGroup> @@ -103,8 +103,8 @@ export default function ReportForm (props) { /> <ButtonsDiv> - <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar> - <ButtonEnviar type="submit">ENVIAR</ButtonEnviar> + <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar> + <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar> </ButtonsDiv> </form> ); @@ -118,6 +118,8 @@ export const ButtonsDiv = styled.div` ` export const ButtonCancelar = styled(Button)` + color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; &:hover { background-color : rgba(158,158,158,0.2) !important; } @@ -126,15 +128,16 @@ export const ButtonCancelar = styled(Button)` padding-right : 16px !important; font-weight : 500 !important; border-radius : 3px !important; - color :#666 !important; background-color: transparent; min-width : 88px !important; height : 36px !important; ` export const ButtonEnviar = styled(Button)` - background-color : #ff7f00 !important; - color : #fff !important; + color: ${props => props.contrast === "" ? "white !important" : "yellow !important"}; + background-color: ${props => props.contrast === "" ? "#ff7f00 !important" : "black !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; + border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"}; font-size: 14px !important; font-weight: 500 !important; height: 36px !important; @@ -146,7 +149,6 @@ export const ButtonEnviar = styled(Button)` min-width : 88px !important; vertical-align : middle !important; margin : 6px 8px !important; - text-decoration : none !important; .MuiButton-label { padding-right : 16px; @@ -173,7 +175,11 @@ export const StyledTextField = styled(TextField)` export const StyledFormControl = styled(FormControl)` .MuiFormControlLabel-root { - color : #666; + color: ${props => props.contrast === "" ? "#666" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + } + .MuiIconButton-label { + color: ${props => props.contrast === "" ? "#666" : "white"}; } .PrivateRadioButtonIcon-checked { diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js index fe74faaf..16b4c362 100644 --- a/src/Components/ResourceCardFunction.js +++ b/src/Components/ResourceCardFunction.js @@ -134,9 +134,9 @@ export default function ResourceCardFunction(props) { return ( <React.Fragment> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar} diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js index 6d0e093d..e0a2f0ef 100644 --- a/src/Components/ResourceCardOptions.js +++ b/src/Components/ResourceCardOptions.js @@ -140,33 +140,33 @@ export default function ResourceCardOptions(props) { open={Boolean(anchorEl)} onClose={handleClose} > - <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleClose}> + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleClose}> <Link to={"/recurso/" + props.learningObjectId}> - <ListItemIcon className={`${props.contrast}LinkColor`}><OpenIcon /></ListItemIcon>Abrir + <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir </Link> </StyledMenuItem> - <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}> - <ListItemIcon className={`${props.contrast}LinkColor`}><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}> + <ListItemIcon className={`${props.contrast}IconColor`}><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia </StyledMenuItem> { props.downloadableLink && - <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => { enableDownload(); handleClose() }}> - <ListItemIcon className={`${props.contrast}LinkColor`}><DownloadIcon /></ListItemIcon>Baixar + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => { enableDownload(); handleClose() }}> + <ListItemIcon className={`${props.contrast}IconColor`}><DownloadIcon /></ListItemIcon>Baixar </StyledMenuItem> } - <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleShare}> - <ListItemIcon className={`${props.contrast}LinkColor`}><ShareIcon /></ListItemIcon>Compartilhar + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleShare}> + <ListItemIcon className={`${props.contrast}IconColor`}><ShareIcon /></ListItemIcon>Compartilhar </StyledMenuItem> - <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleGuardar}> - <ListItemIcon className={`${props.contrast}LinkColor`}><AddIcon /></ListItemIcon>Guardar + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleGuardar}> + <ListItemIcon className={`${props.contrast}IconColor`}><AddIcon /></ListItemIcon>Guardar </StyledMenuItem> - <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => { handleReport() }}> - <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Reportar + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => { handleReport() }}> + <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar </StyledMenuItem> </Menu> diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js index e68a1a23..128f1914 100644 --- a/src/Components/ResourcePageComponents/CommentsArea.js +++ b/src/Components/ResourcePageComponents/CommentsArea.js @@ -136,10 +136,10 @@ export default function CommentsArea(props) { <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> </Snackbar> {/*-------------------------------MODALS---------------------------------------*/} - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> {/*----------------------------------------------------------------------------*/} <Grid container spacing={2} style={{ padding: "10px" }}> { diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js index 021001b7..490e1b10 100644 --- a/src/Components/ResourcePageComponents/Footer.js +++ b/src/Components/ResourcePageComponents/Footer.js @@ -150,25 +150,25 @@ export default function Footer(props) { <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> </Snackbar> {/*-------------------------------MODALS---------------------------------------*/} - <ReportModal open={reportOpen} handleClose={() => { toggleReport(false) }} + <ReportModal contrast={props.contrast} open={reportOpen} handleClose={() => { toggleReport(false) }} form="recurso" complainableId={props.recursoId} complainableType={"LearningObject"} /> - <ShareModal open={shareOpen} handleClose={() => { toggleShare(false) }} + <ShareModal contrast={props.contrast} open={shareOpen} handleClose={() => { toggleShare(false) }} thumb={props.thumb} title={props.title} link={props.currPageLink} /> - <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }} + <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }} thumb={props.thumb} title={props.title} recursoId={props.recursoId} /> - <RedirectModal open={redirectOpen} handleClose={() => { toggleRedirect(false) }} + <RedirectModal contrast={props.contrast} open={redirectOpen} handleClose={() => { toggleRedirect(false) }} link={props.link} /> - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> {/*----------------------------------------------------------------------------*/} {/*-----------------------------BUTTONS----------------------------------------*/} diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js index 81db9369..8aeaeb02 100644 --- a/src/Components/ResourcePageComponents/Sobre.js +++ b/src/Components/ResourcePageComponents/Sobre.js @@ -175,10 +175,10 @@ export default function Sobre(props) { <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> </Snackbar> {/*-------------------------------MODALS---------------------------------------*/} - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <SignUpModal contrast={state.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> {/*----------------------------------------------------------------------------*/} <Grid container style={{ paddingRight: "15px", paddingLeft: "15px" }}> diff --git a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js index 1d441049..4fae72c7 100644 --- a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js +++ b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js @@ -34,7 +34,7 @@ import {deleteRequest} from '../../HelperFunctions/getAxiosConfig' function CloseModalButton (props) { return ( <StyledCloseModalButton onClick={props.handleClose}> - <CloseIcon/> + <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/> </StyledCloseModalButton> ) } diff --git a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js index aa7ee160..19fd31bb 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js +++ b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js @@ -115,12 +115,14 @@ export default function TabPanelEditarPerfil(props) { return ( <React.Fragment> <ModalAlterarCover + contrast={state.contrast} open={open} handleClose={controlModal} cover={tempCover} id={state.currentUser.id} /> <ModalAlterarAvatar + contrast={state.contrast} open={alterarAvatatarOpen} handleClose={controlModalAvatar} userAvatar={state.currentUser.avatar} diff --git a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js index e365a0b8..9cb598a7 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js +++ b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js @@ -218,7 +218,7 @@ export default function TabPanelGerenciarConta(props) { <span style={state.contrast === "" ? { margin: "0", display: "flex", justifyContent: "flex-start" } : { margin: "0", display: "flex", justifyContent: "flex-start", color: "white" }}>Antes de excluir a sua conta, saiba que ela será removida permanentemente.</span> </div> <div style={{ margin: "0", display: "flex", justifyContent: "flex-start" }}> - <ModalExcluirConta open={modalExcluir} handleClose={() => { setModalExcluir(false) }} /> + <ModalExcluirConta contrast={state.contrast} open={modalExcluir} handleClose={() => { setModalExcluir(false) }} /> <ButtonCancelar contrast={state.contrast} onClick={() => { setModalExcluir(true) }}>EXCLUIR CONTA</ButtonCancelar> </div> </div> diff --git a/src/Components/UploadPageComponents/ButtonsDiv.js b/src/Components/UploadPageComponents/ButtonsDiv.js index 8e4d1945..9e6c0f7b 100644 --- a/src/Components/UploadPageComponents/ButtonsDiv.js +++ b/src/Components/UploadPageComponents/ButtonsDiv.js @@ -28,6 +28,7 @@ export default function ButtonsDiv(props) { return ( <> <ModalCancelar + contrast={props.contrast} open={modalCancelar} handleClose={() => { toggleModalCancelar(false) }} draftID={props.draftID} diff --git a/src/Components/UploadPageComponents/PartThree.js b/src/Components/UploadPageComponents/PartThree.js index 5170659c..2067d044 100644 --- a/src/Components/UploadPageComponents/PartThree.js +++ b/src/Components/UploadPageComponents/PartThree.js @@ -99,6 +99,7 @@ export default function PartThree(props) { ( <React.Fragment> <ModalCancelar + contrast={props.contrast} open={modalCancelar} handleClose={() => { toggleModalCancelar(false) }} draftID={draft.id} diff --git a/src/Components/UserPageComponents/Avatar.js b/src/Components/UserPageComponents/Avatar.js index 8c381f19..589d5cb1 100644 --- a/src/Components/UserPageComponents/Avatar.js +++ b/src/Components/UserPageComponents/Avatar.js @@ -39,6 +39,7 @@ export default function ProfileAvatar (props) { return ( <> <ModalAlterarAvatar + contrast={props.contrast} open={open} handleClose={controlModal} userAvatar={currentAvatar} diff --git a/src/Components/UserPageComponents/Cover.js b/src/Components/UserPageComponents/Cover.js index 339c36fd..4d5e702c 100644 --- a/src/Components/UserPageComponents/Cover.js +++ b/src/Components/UserPageComponents/Cover.js @@ -48,6 +48,7 @@ export default function Cover (props) { return ( <> <ModalAlterarCover + contrast={props.contrast} open = {open} handleClose={controlModal} cover={tempCover} diff --git a/src/Pages/PageProfessor.js b/src/Pages/PageProfessor.js index 96cd46bb..b1e36026 100644 --- a/src/Pages/PageProfessor.js +++ b/src/Pages/PageProfessor.js @@ -114,7 +114,7 @@ export default function PageProfessor (props) { state.userAgreedToPublicationTerms? ( <> - <ModalConfirmarProfessor open={modalOpen} handleClose={handleModal} + <ModalConfirmarProfessor contrast={props.contrast} open={modalOpen} handleClose={handleModal} info={registerInformation} confirmar = {() => {handleFinalSubmit()}} cancelar = {() => {toggleModal()}} /> diff --git a/src/Pages/PublicationPermissionsPage.js b/src/Pages/PublicationPermissionsPage.js index 52bdbd8a..b06e2889 100644 --- a/src/Pages/PublicationPermissionsPage.js +++ b/src/Pages/PublicationPermissionsPage.js @@ -128,9 +128,10 @@ export default function PermissionsContainer(props) { [ <> <IllegalContentModal - open={modalOpen} - handleClose={closeModal} - disableBackdropClick={true} + contrast={props.contrast} + open={modalOpen} + handleClose={closeModal} + disableBackdropClick={true} /> <Background > diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js index 9a8ba409..8ddf18df 100644 --- a/src/Pages/ResourcePage.js +++ b/src/Pages/ResourcePage.js @@ -40,315 +40,317 @@ import Button from '@material-ui/core/Button'; import { Link } from 'react-router-dom'; function urlVerify(url) { - return url - ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1 - : false; + return url + ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1 + : false; } export default function LearningObjectPage(props) { - const { state } = useContext(Store); - const id = props.match.params.recursoId; - const [carregando, toggle] = useState(true); - const [erro, setErro] = useState(false); - const [recurso, setRecurso] = useState({}); + const { state } = useContext(Store); + const id = props.match.params.recursoId; + const [carregando, toggle] = useState(true); + const [erro, setErro] = useState(false); + const [recurso, setRecurso] = useState({}); - function handleSuccessfulGet(data) { - setRecurso(data); - toggle(false); - } - useEffect(() => { - const url = `/learning_objects/${id}`; - - getRequest( - url, - handleSuccessfulGet, - (error) => { - setErro(true) + function handleSuccessfulGet(data) { + setRecurso(data); toggle(false); - handleSnackbar(7) - } - ); - }, []); - - const [snackbarOpen, toggleSnackbar] = useState(false); - const handleSnackbar = (index) => { - setIndex(index); - toggleSnackbar(true); - }; - const snackbarText = [ - "Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!", - "Seu comentário foi publicado com sucesso!", - "Comentário editado com sucesso.", - "Comentário deletado com sucesso.", - "O Recurso foi guardado na coleção!", - "O recurso foi aprovado com sucesso!", - "Erro ao aprovar o recurso!", - "Erro ao carregar a página", - "Erro ao fazer o dowload do recurso", - ]; - const [snackbarIndex, setIndex] = useState(0); - const classes = useStyles(); - const [modalCuradoriaOpen, toggleModalCuradoria] = useState(false); - const handleModalCuradoria = (value) => { - toggleModalCuradoria(value); - }; - - const checkAccessLevel = (levelToCheck) => { - if (state.currentUser.id !== "") { - return checkUserRole(levelToCheck); - } else { - return false; } - }; + useEffect(() => { + const url = `/learning_objects/${id}`; - const checkUserRole = (userRole) => { - return ( - state.currentUser.roles.filter((role) => role.name === userRole).length > - 0 - ); - }; + getRequest( + url, + handleSuccessfulGet, + (error) => { + setErro(true) + toggle(false); + handleSnackbar(7) + } + ); + }, []); - const [modalConfirmarCuradoriaOpen, toggleModalConfirmarCuradoria] = useState( - false - ); - const handleModalConfirmarCuradoria = (value) => { - toggleModalConfirmarCuradoria(value); - }; - const [reportCriteria, setReportCriteria] = useState([]); - const [justificativa, setJustificativa] = useState(""); - const [submissionAccepted, setSubmissionAccepted] = useState(""); + const [snackbarOpen, toggleSnackbar] = useState(false); + const handleSnackbar = (index) => { + setIndex(index); + toggleSnackbar(true); + }; + const snackbarText = [ + "Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!", + "Seu comentário foi publicado com sucesso!", + "Comentário editado com sucesso.", + "Comentário deletado com sucesso.", + "O Recurso foi guardado na coleção!", + "O recurso foi aprovado com sucesso!", + "Erro ao aprovar o recurso!", + "Erro ao carregar a página", + "Erro ao fazer o dowload do recurso", + ]; + const [snackbarIndex, setIndex] = useState(0); + const classes = useStyles(); + const [modalCuradoriaOpen, toggleModalCuradoria] = useState(false); + const handleModalCuradoria = (value) => { + toggleModalCuradoria(value); + }; - const handleConfirm = (criteria, justification, accepted) => { - setReportCriteria(criteria); - setJustificativa(justification); - setSubmissionAccepted(accepted); - handleModalCuradoria(false); - handleModalConfirmarCuradoria(true); - }; + const checkAccessLevel = (levelToCheck) => { + if (state.currentUser.id !== "") { + return checkUserRole(levelToCheck); + } else { + return false; + } + }; - const finalizeCuratorshipFlow = () => { - handleSnackbar(5); - handleModalConfirmarCuradoria(false); - const url = `/learning_objects/${id}`; - getRequest( - url, - (data) => { - setRecurso(data); - }, - (error) => { - handleSnackbar(7) - } + const checkUserRole = (userRole) => { + return ( + state.currentUser.roles.filter((role) => role.name === userRole).length > + 0 + ); + }; + + const [modalConfirmarCuradoriaOpen, toggleModalConfirmarCuradoria] = useState( + false ); - }; + const handleModalConfirmarCuradoria = (value) => { + toggleModalConfirmarCuradoria(value); + }; + const [reportCriteria, setReportCriteria] = useState([]); + const [justificativa, setJustificativa] = useState(""); + const [submissionAccepted, setSubmissionAccepted] = useState(""); + + const handleConfirm = (criteria, justification, accepted) => { + setReportCriteria(criteria); + setJustificativa(justification); + setSubmissionAccepted(accepted); + handleModalCuradoria(false); + handleModalConfirmarCuradoria(true); + }; - if (erro) - return <LearnObjectNotFound contrast={state.contrast}> - <Grid container direction='column' justify='center' alignItems='center' spacing={1}> - <Grid item> - <p className="not-found"> - O recurso não foi encontrado em nossa base de dados. - </p> + const finalizeCuratorshipFlow = () => { + handleSnackbar(5); + handleModalConfirmarCuradoria(false); + const url = `/learning_objects/${id}`; + getRequest( + url, + (data) => { + setRecurso(data); + }, + (error) => { + handleSnackbar(7) + } + ); + }; + + if (erro) + return <LearnObjectNotFound contrast={state.contrast}> + <Grid container direction='column' justify='center' alignItems='center' spacing={1}> + <Grid item> + <p className="not-found"> + O recurso não foi encontrado em nossa base de dados. + </p> + </Grid> + <Grid item> + <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}> + <Button + variant='contained' + className="back-button" + > + Voltar para a busca de recursos. + </Button> + </Link> + </Grid> </Grid> - <Grid item> - <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}> - <Button - variant='contained' - className="back-button" + </LearnObjectNotFound> + else + return ( + <React.Fragment> + <Snackbar + open={snackbarOpen} + autoHideDuration={6000} + onClose={toggleSnackbar} + anchorOrigin={{ vertical: "top", horizontal: "right" }} > - Voltar para a busca de recursos. - </Button> - </Link> - </Grid> - </Grid> - </LearnObjectNotFound> - else - return ( - <React.Fragment> - <Snackbar - open={snackbarOpen} - autoHideDuration={6000} - onClose={toggleSnackbar} - anchorOrigin={{ vertical: "top", horizontal: "right" }} - > - <Alert severity="info" - style={{ backgroundColor: "#00acc1" }}> - {snackbarText[snackbarIndex]} - </Alert> - </Snackbar> + <Alert severity="info" + style={{ backgroundColor: "#00acc1" }}> + {snackbarText[snackbarIndex]} + </Alert> + </Snackbar> - <ModalAvaliarRecurso - open={modalCuradoriaOpen} - handleClose={() => { - handleModalCuradoria(false); - }} - title={recurso.name} - confirm={handleConfirm} - setCriteria={setReportCriteria} - /> - <ModalConfirmarCuradoria - aceito={submissionAccepted} - reportCriteria={reportCriteria} - justificativa={justificativa} - open={modalConfirmarCuradoriaOpen} - handleClose={() => { - handleModalConfirmarCuradoria(false); - }} - cancel={() => { - handleModalCuradoria(true); - }} - recursoId={recurso.submission_id} - finalizeCuratorshipFlow={finalizeCuratorshipFlow} - handleErrorAprove={() => { - handleSnackbar(6) - }} - /> - <Background contrast={state.contrast}> - {carregando ? ( - <LoadingSpinner contrast={state.contrast} text={"Carregando Recurso"} /> - ) : ( - <> - <Grid container spacing={2}> - {recurso.object_type === "Vídeo" && !recurso.link ? ( - <Grid item xs={12}> - <Card contrast={state.contrast}> - <VideoPlayer - contrast={state.contrast} - link={recurso.link} - urlVerified={false} - videoUrl={recurso.default_attachment_location} - videoType={recurso.default_mime_type} - /> - </Card> - </Grid> - ) : ( - urlVerify(recurso.link) && ( + <ModalAvaliarRecurso + contrast={state.contrast} + open={modalCuradoriaOpen} + handleClose={() => { + handleModalCuradoria(false); + }} + title={recurso.name} + confirm={handleConfirm} + setCriteria={setReportCriteria} + /> + <ModalConfirmarCuradoria + contrast={state.contrast} + aceito={submissionAccepted} + reportCriteria={reportCriteria} + justificativa={justificativa} + open={modalConfirmarCuradoriaOpen} + handleClose={() => { + handleModalConfirmarCuradoria(false); + }} + cancel={() => { + handleModalCuradoria(true); + }} + recursoId={recurso.submission_id} + finalizeCuratorshipFlow={finalizeCuratorshipFlow} + handleErrorAprove={() => { + handleSnackbar(6) + }} + /> + <Background contrast={state.contrast}> + {carregando ? ( + <LoadingSpinner contrast={state.contrast} text={"Carregando Recurso"} /> + ) : ( + <> + <Grid container spacing={2}> + {recurso.object_type === "Vídeo" && !recurso.link ? ( <Grid item xs={12}> - <Card contrast={state.contrast}> - contrast={state.contrast} - <VideoPlayer link={recurso.link} urlVerified={true} /> - </Card> + <Card contrast={state.contrast}> + <VideoPlayer + contrast={state.contrast} + link={recurso.link} + urlVerified={false} + videoUrl={recurso.default_attachment_location} + videoType={recurso.default_mime_type} + /> + </Card> </Grid> - ) - )} - - <Grid item xs={12}> - <Card contrast={state.contrast}> - <div> - {recurso.thumbnail && ( - <img alt="" src={apiDomain + recurso.thumbnail} /> + ) : ( + urlVerify(recurso.link) && ( + <Grid item xs={12}> + <Card contrast={state.contrast}> + contrast={state.contrast} + <VideoPlayer link={recurso.link} urlVerified={true} /> + </Card> + </Grid> + ) )} - <TextoObjeto - contrast={state.contrast} - name={recurso.name} - rating={recurso.review_average} - recursoId={id} - likesCount={recurso.likes_count} - likedBool={recurso.liked} - objType={recurso.object_type} - subjects={recurso.subjects} - educationalStages={recurso.educational_stages} - viewCount={recurso.views_count} - downloadCount={recurso.downloads_count} - id={recurso.publisher ? recurso.publisher.id : undefined} - stateRecurso={recurso.state} - attachments={recurso.attachments} - audioUrl={recurso.default_attachment_location} - /> - </div> + <Grid item xs={12}> + <Card contrast={state.contrast}> + <div> + {recurso.thumbnail && ( + <img alt="" src={apiDomain + recurso.thumbnail} /> + )} - <Footer - contrast={state.contrast} - recursoId={id} - downloadableLink={recurso.default_attachment_location} - handleSnackbar={handleSnackbar} - link={recurso.link} - title={recurso.name} - thumb={recurso.thumbnail} - currPageLink={window.location.href} - complained={recurso.complained} - /> - </Card> - </Grid> + <TextoObjeto + contrast={state.contrast} + name={recurso.name} + rating={recurso.review_average} + recursoId={id} + likesCount={recurso.likes_count} + likedBool={recurso.liked} + objType={recurso.object_type} + subjects={recurso.subjects} + educationalStages={recurso.educational_stages} + viewCount={recurso.views_count} + downloadCount={recurso.downloads_count} + id={recurso.publisher ? recurso.publisher.id : undefined} + stateRecurso={recurso.state} + attachments={recurso.attachments} + audioUrl={recurso.default_attachment_location} + /> + </div> - <Grid item xs={12}> - <Card contrast={state.contrast}> - {/*todo: change render method on additional item info*/} - <Sobre - avatar={ - recurso.publisher - ? recurso.publisher.avatar - ? apiDomain + recurso.publisher.avatar - : noAvatar - : noAvatar - } - publisher={ - recurso.publisher ? recurso.publisher.name : undefined - } - id={recurso.publisher ? recurso.publisher.id : undefined} - description={recurso.description} - author={recurso.author} - tags={recurso.tags} - attachments={recurso.attachments} - language={recurso.language} - mimeType={recurso.default_mime_type} - createdAt={recurso.created_at} - updatedAt={recurso.updated_at} - license={recurso.license} - followed={recurso.publisher ? recurso.publisher.followed : undefined} - /> - </Card> - </Grid> + <Footer + contrast={state.contrast} + recursoId={id} + downloadableLink={recurso.default_attachment_location} + handleSnackbar={handleSnackbar} + link={recurso.link} + title={recurso.name} + thumb={recurso.thumbnail} + currPageLink={window.location.href} + complained={recurso.complained} + /> + </Card> + </Grid> - {recurso.state !== "submitted" && ( <Grid item xs={12}> - <Card contrast={state.contrast}> - {/*adicionar funcionalidade ao botao de entrar*/} - <CommentsArea - recursoId={id} - handleSnackbar={handleSnackbar} - objType={recurso.object_type} - recurso={true} + <Card contrast={state.contrast}> + {/*todo: change render method on additional item info*/} + <Sobre + avatar={ + recurso.publisher + ? recurso.publisher.avatar + ? apiDomain + recurso.publisher.avatar + : noAvatar + : noAvatar + } + publisher={ + recurso.publisher ? recurso.publisher.name : undefined + } + id={recurso.publisher ? recurso.publisher.id : undefined} + description={recurso.description} + author={recurso.author} + tags={recurso.tags} + attachments={recurso.attachments} + language={recurso.language} + mimeType={recurso.default_mime_type} + createdAt={recurso.created_at} + updatedAt={recurso.updated_at} + license={recurso.license} + followed={recurso.publisher ? recurso.publisher.followed : undefined} /> - </Card> + </Card> + </Grid> + + {recurso.state !== "submitted" && ( + <Grid item xs={12}> + <Card contrast={state.contrast}> + {/*adicionar funcionalidade ao botao de entrar*/} + <CommentsArea + recursoId={id} + handleSnackbar={handleSnackbar} + objType={recurso.object_type} + recurso={true} + /> + </Card> + </Grid> + )} </Grid> - )} - </Grid> - {recurso.state === "submitted" && checkAccessLevel("curator") && ( - <AppBar - position="fixed" - color="primary" - className={classes.appBar} - > - <StyledAppBarContainer> - <div className="container"> - <div className="botoes"> - <ButtonAvaliarRecurso - callback={() => { - handleModalCuradoria(true); - }} - /> + {recurso.state === "submitted" && checkAccessLevel("curator") && ( + <AppBar + position="fixed" + color="primary" + className={classes.appBar} + > + <StyledAppBarContainer> + <div className="container"> + <div className="botoes"> + <ButtonAvaliarRecurso + callback={() => { + handleModalCuradoria(true); + }} + /> + </div> </div> - </div> - </StyledAppBarContainer> - </AppBar> + </StyledAppBarContainer> + </AppBar> + )} + </> )} - </> - )} - </Background> - </React.Fragment> - ); + </Background> + </React.Fragment> + ); } const useStyles = makeStyles((theme) => ({ - appBar: { - top: "auto", - bottom: 0, - height: "100px", - backgroundColor: "#fff", - boxShadow: "0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)", - }, + appBar: { + top: "auto", + bottom: 0, + height: "100px", + backgroundColor: "#fff", + boxShadow: "0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)", + }, })); const StyledAppBarContainer = styled.div` @@ -377,66 +379,66 @@ const StyledAppBarContainer = styled.div` `; const Background = styled.div` - background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; - color: #666; - font-family: "Roboto", sans serif; - padding-top: 30px; + background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; + color: #666; + font-family: "Roboto", sans serif; + padding-top: 30px; `; const LearnObjectNotFound = styled.div` - padding: 1em; - background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; - - .not-found{ - font-family: 'Roboto', sans-serif; - color: ${props => props.contrast === "" ? "#666" : "white"}; - font-weight: 500; - text-align: left; - padding: 0; - margin: 0; - } + padding: 1em; + background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; + + .not-found{ + font-family: 'Roboto', sans-serif; + color: ${props => props.contrast === "" ? "#666" : "white"}; + font-weight: 500; + text-align: left; + padding: 0; + margin: 0; + } - .back-button{ - background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"}; - color: ${props => props.contrast === "" ? "whitesmoke" : "yellow"}; - border: ${props => props.contrast === "" ? "none" : "1px solid white"}; - text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; - :hover{ - background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"}; - text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + .back-button{ + background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"}; + color: ${props => props.contrast === "" ? "whitesmoke" : "yellow"}; + border: ${props => props.contrast === "" ? "none" : "1px solid white"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + :hover{ + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + } } - } ` const Card = styled.div` - background-color: ${props => props.contrast === "" ? "#fff" : "black"}; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - border: ${props => props.contrast === "" ? "0" : "1px solid white"}; - margin-bottom: 30px; - margin-right: auto; - margin-left: auto; - display: flex; - flex-direction: column; - @media screen and (min-width: 1200px) { - width: 1170px; - } - @media screen and (min-width: 992px) and (max-width: 1199px) { - width: 970px; - } - @media screen and (min-width: 768px) and (max-width: 991px) { - width: 750px; - } + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + border: ${props => props.contrast === "" ? "0" : "1px solid white"}; + margin-bottom: 30px; + margin-right: auto; + margin-left: auto; + display: flex; + flex-direction: column; + @media screen and (min-width: 1200px) { + width: 1170px; + } + @media screen and (min-width: 992px) and (max-width: 1199px) { + width: 970px; + } + @media screen and (min-width: 768px) and (max-width: 991px) { + width: 750px; + } - img { - background-color: #e5e5e5; - height: 270px; - width: 400px; - float: left; - padding: 0; - object-fit: cover; - @media screen and (max-width: 768px) { - height: auto; - width: 100%; + img { + background-color: #e5e5e5; + height: 270px; + width: 400px; + float: left; + padding: 0; + object-fit: cover; + @media screen and (max-width: 768px) { + height: auto; + width: 100%; + } } - } `; diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js index 848b3b5b..dee57bdf 100644 --- a/src/Pages/UploadPage.js +++ b/src/Pages/UploadPage.js @@ -109,6 +109,7 @@ export default function UploadPage (props) { ( <> <ModalLearningObjectPublished + contrast={state.contrast} open={objectSubmitted} handleClose={() => {toggleModal(false); props.history.push('/')}} draftID={draft.id} diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js index b2475f4f..9de1400f 100644 --- a/src/Pages/UserPage.js +++ b/src/Pages/UserPage.js @@ -30,13 +30,13 @@ import TabPanelRede from "../Components/TabPanels/UserPageTabs/PanelRede.js"; import TabPanelCuradoria from "../Components/TabPanels/UserPageTabs/PanelCuradoria.js"; import Grid from "@material-ui/core/Grid"; import { - HeaderContainer, - UserProfileContainer, - CheckTeacherDiv, - StyledTabs, - RodapeDiv, - NavBarContentContainer, - BackgroundDiv, + HeaderContainer, + UserProfileContainer, + CheckTeacherDiv, + StyledTabs, + RodapeDiv, + NavBarContentContainer, + BackgroundDiv, } from "../Components/TabPanels/StyledComponents.js"; import CircularProgress from "@material-ui/core/CircularProgress"; import Cover from "../Components/UserPageComponents/Cover.js"; @@ -48,203 +48,204 @@ import { getRequest } from "../Components/HelperFunctions/getAxiosConfig.js"; import Typography from "@material-ui/core/Typography"; export default function UserPage(props) { - const { state, dispatch } = useContext(Store); - const id = state.currentUser.id; - - const [follows, setFollows] = useState(0); - const [following, setFollowing] = useState(0); - const [loading, setLoading] = useState(false); - const [tabValue, setTabValue] = useState(Number(props.location.state) || 0); - const [tabs, setTabs] = useState([ - "Atividades", - "Meus Recursos", - "Favoritos", - "Coleções", - "Rede", - ]); - const handleChangeTab = (event, newValue) => { - setTabValue(newValue); - }; - - function handleSuccessfulGet(data) { - console.log(data); - dispatch({ - type: "GET_USER", - user: data, - }); - - setFollows(data.follows_count); - - if (data.role_ids.includes(4)) { - setTabs([ + const { state, dispatch } = useContext(Store); + const id = state.currentUser.id; + + const [follows, setFollows] = useState(0); + const [following, setFollowing] = useState(0); + const [loading, setLoading] = useState(false); + const [tabValue, setTabValue] = useState(Number(props.location.state) || 0); + const [tabs, setTabs] = useState([ "Atividades", "Meus Recursos", "Favoritos", "Coleções", "Rede", - "Curadoria", - ]); + ]); + const handleChangeTab = (event, newValue) => { + setTabValue(newValue); + }; + + function handleSuccessfulGet(data) { + console.log(data); + dispatch({ + type: "GET_USER", + user: data, + }); + + setFollows(data.follows_count); + + if (data.role_ids.includes(4)) { + setTabs([ + "Atividades", + "Meus Recursos", + "Favoritos", + "Coleções", + "Rede", + "Curadoria", + ]); + } } - } - - function handleSuccesGetFollowing(data) { - setFollowing(data.length); - setLoading(false); - } - - useEffect(() => { - if (id !== "") { - const url = `/users/${id}`; - const url2 = `/users/${id}/following/User`; - setLoading(true); - getRequest(url, handleSuccessfulGet, (error) => { - console.log(error); - }); - getRequest(url2, handleSuccesGetFollowing, (error) => { - console.log(error); - }); + + function handleSuccesGetFollowing(data) { + setFollowing(data.length); + setLoading(false); } - }, []); - - useEffect(() => { - setTabValue(Number(props.location.state) || 0) - }, [window.history.state.key]) - - const redirect = () => { - props.history.push("/"); - }; - - const [modalOpen, toggleModal] = useState(false); - const WIDTH = window.innerWidth; - - return ( - <div> - <link - href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" - rel="stylesheet" - /> - { - state.userIsLoggedIn ? ( - [ - <React.Fragment> - <ModalAlterarAvatar - open={modalOpen} - handleClose={() => { - toggleModal(false); - }} - userAvatar={state.currentUser.avatar} - /> - - <BackgroundDiv contrast={state.contrast}> - <CustomizedBreadcrumbs contrast={state.contrast} values={["Minha área", tabs[tabValue]]} /> - <Grid container spacing={2}> - <Grid item xs={12}> - <div style={{ padding: "10px 0 8px 0" }}> - <UserProfileContainer> - <HeaderContainer contrast={state.contrast}> - <Cover id={id} /> - <ProfileAvatar id={id} /> - {WIDTH <= 600 ? null : <UserInfo />} - <EditProfileButton contrast={state.contrast} /> - </HeaderContainer> - {WIDTH <= 600 ? ( - <Grid - style={state.contrast === "" ? { marginTop: "4em" } : { paddingTop: "4em", backgroundColor: "black", borderLeft: "1px solid white", borderRight: "1px solid white", }} - container - justify="center" - alignItems="center" - direction="column" - > - <Grid item> - <Typography - variant="h4" - gutterBottom - style={state.contrast === "" ? { textAlign: "center" } : { color: "white", textAlign: "center" }} - > - {state.currentUser.name} - </Typography> - </Grid> + + useEffect(() => { + if (id !== "") { + const url = `/users/${id}`; + const url2 = `/users/${id}/following/User`; + setLoading(true); + getRequest(url, handleSuccessfulGet, (error) => { + console.log(error); + }); + getRequest(url2, handleSuccesGetFollowing, (error) => { + console.log(error); + }); + } + }, []); + + useEffect(() => { + setTabValue(Number(props.location.state) || 0) + }, [window.history.state.key]) + + const redirect = () => { + props.history.push("/"); + }; + + const [modalOpen, toggleModal] = useState(false); + const WIDTH = window.innerWidth; + + return ( + <div> + <link + href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" + rel="stylesheet" + /> + { + state.userIsLoggedIn ? ( + [ + <React.Fragment> + <ModalAlterarAvatar + contrast={state.contrast} + open={modalOpen} + handleClose={() => { + toggleModal(false); + }} + userAvatar={state.currentUser.avatar} + /> + + <BackgroundDiv contrast={state.contrast}> + <CustomizedBreadcrumbs contrast={state.contrast} values={["Minha área", tabs[tabValue]]} /> + <Grid container spacing={2}> + <Grid item xs={12}> + <div style={{ padding: "10px 0 8px 0" }}> + <UserProfileContainer> + <HeaderContainer contrast={state.contrast}> + <Cover id={id} /> + <ProfileAvatar id={id} /> + {WIDTH <= 600 ? null : <UserInfo />} + <EditProfileButton contrast={state.contrast} /> + </HeaderContainer> + {WIDTH <= 600 ? ( <Grid - style={{ - marginTop: "0.5em", - marginBottom: "0.5em", - borderTop: "1px solid white", - borderBottom: "1px solid white", - }} - container - spacing={4} - justify="center" - alignItems="center" - direction="row" + style={state.contrast === "" ? { marginTop: "4em" } : { paddingTop: "4em", backgroundColor: "black", borderLeft: "1px solid white", borderRight: "1px solid white", }} + container + justify="center" + alignItems="center" + direction="column" > - <Grid item> - <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}> - {loading ? ( - <CircularProgress size={20} /> - ) : ( - `${follows} seguidores` - )} + <Grid item> + <Typography + variant="h4" + gutterBottom + style={state.contrast === "" ? { textAlign: "center" } : { color: "white", textAlign: "center" }} + > + {state.currentUser.name} </Typography> - </Grid> - <Grid item> - <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}> - {loading ? ( - <CircularProgress size={20} /> - ) : ( - `${following} seguindo` - )} - </Typography> - </Grid> + </Grid> + <Grid + style={{ + marginTop: "0.5em", + marginBottom: "0.5em", + borderTop: "1px solid white", + borderBottom: "1px solid white", + }} + container + spacing={4} + justify="center" + alignItems="center" + direction="row" + > + <Grid item> + <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}> + {loading ? ( + <CircularProgress size={20} /> + ) : ( + `${follows} seguidores` + )} + </Typography> + </Grid> + <Grid item> + <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}> + {loading ? ( + <CircularProgress size={20} /> + ) : ( + `${following} seguindo` + )} + </Typography> + </Grid> + </Grid> </Grid> - </Grid> - ) : ( - <CheckTeacherDiv contrast={state.contrast}> - <SubmitterStatus /> - </CheckTeacherDiv> - )} - <RodapeDiv contrast={state.contrast}> - <NavBarContentContainer contrast={state.contrast}> - <StyledTabs - contrast={state.contrast} - value={tabValue} - onChange={handleChangeTab} - indicatorColor="primary" - textColor="primary" - variant="scrollable" - scrollButtons="on" - TabIndicatorProps={{ style: state.contrast === "" ? { background: "#00bcd4" } : { background: "yellow" } }} - > - {tabs.map((tab) => ( - <StyledTab contrast={state.contrast} label={tab} key={tab} /> - ))} - </StyledTabs> - </NavBarContentContainer> - </RodapeDiv> - </UserProfileContainer> - </div> - </Grid> - <Grid item xs={12}> - {tabValue === 0 && <TabPanelAtividades id={id} contrast={state.contrast} />} - {tabValue === 1 && <TabPanelMeusRecursos id={id} contrast={state.contrast} />} - {tabValue === 2 && <TabPanelFavoritos id={id} contrast={state.contrast} />} - {tabValue === 3 && <TabPanelColecoes id={id} contrast={state.contrast} />} - {tabValue === 4 && <TabPanelRede id={id} contrast={state.contrast} />} - {tabValue === 5 && <TabPanelCuradoria id={id} contrast={state.contrast} />} - </Grid> - </Grid> - </BackgroundDiv> - </React.Fragment> - ] - ) - : - ( - <> - {redirect()} - </> - ) - } - </div> - ) + ) : ( + <CheckTeacherDiv contrast={state.contrast}> + <SubmitterStatus /> + </CheckTeacherDiv> + )} + <RodapeDiv contrast={state.contrast}> + <NavBarContentContainer contrast={state.contrast}> + <StyledTabs + contrast={state.contrast} + value={tabValue} + onChange={handleChangeTab} + indicatorColor="primary" + textColor="primary" + variant="scrollable" + scrollButtons="on" + TabIndicatorProps={{ style: state.contrast === "" ? { background: "#00bcd4" } : { background: "yellow" } }} + > + {tabs.map((tab) => ( + <StyledTab contrast={state.contrast} label={tab} key={tab} /> + ))} + </StyledTabs> + </NavBarContentContainer> + </RodapeDiv> + </UserProfileContainer> + </div> + </Grid> + <Grid item xs={12}> + {tabValue === 0 && <TabPanelAtividades id={id} contrast={state.contrast} />} + {tabValue === 1 && <TabPanelMeusRecursos id={id} contrast={state.contrast} />} + {tabValue === 2 && <TabPanelFavoritos id={id} contrast={state.contrast} />} + {tabValue === 3 && <TabPanelColecoes id={id} contrast={state.contrast} />} + {tabValue === 4 && <TabPanelRede id={id} contrast={state.contrast} />} + {tabValue === 5 && <TabPanelCuradoria id={id} contrast={state.contrast} />} + </Grid> + </Grid> + </BackgroundDiv> + </React.Fragment> + ] + ) + : + ( + <> + {redirect()} + </> + ) + } + </div> + ) } const StyledTab = styled(Tab)` diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js index e3431838..55eef424 100644 --- a/src/Pages/UserTerms.js +++ b/src/Pages/UserTerms.js @@ -34,252 +34,248 @@ import Linha from "../img/termos/linha.svg"; const BannerStyle = styled.div` - background: ${props => props.contrast === "" ? "" : "black"}; - width: 100%; - background-image: ${props => props.contrast === "" ? `url(${Banner1})` : ""}; - background-size: cover; - background-position: top center; - height: 370px; - vertical-align: "middle"; + background: ${props => props.contrast === "" ? "" : "black"}; + width: 100%; + background-image: ${props => props.contrast === "" ? `url(${Banner1})` : ""}; + background-size: cover; + background-position: top center; + height: 370px; + vertical-align: "middle"; ` const AColorido = styled.a` - color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"}; - text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; ` const ImagemSeçao2 = styled.div` - font-family: "Roboto", sans-serif; - background: ${props => props.contrast === "" ? "" : "black"}; - color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"}; - - @media (min-width:1450px) { - background-image: url(${Busca}); - background-position: right; - background-size: contain; - background-repeat: no-repeat; - } - height: auto; - align-items: center; - padding-block: 30px; - h3 { - line-height: 1.1; - text-align: center; - @media (min-width: 1000px) { - font-size: 30px; + font-family: "Roboto", sans-serif; + background: ${props => props.contrast === "" ? "" : "black"}; + color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"}; + + @media (min-width:1450px) { + background-image: url(${Busca}); + background-position: right; + background-size: contain; + background-repeat: no-repeat; } + height: auto; + align-items: center; + padding-block: 30px; + h3 { + line-height: 1.1; + text-align: center; + @media (min-width: 1000px) { + font-size: 30px; + } + + @media (max-width: 1000px){ + font-size: 20px; + } + margin-top: 20px; + margin-bottom: 10px; + font-weight: 100; + padding-bottom: 20px; - @media (max-width: 1000px){ - font-size: 20px; } - margin-top: 20px; - margin-bottom: 10px; - font-weight: 100; - padding-bottom: 20px; - - } - - p { - line-height: 1.42857143; - padding-top: 20px; - font-size: 14px; - text-align: justify; - margin: 0 0 10px; - } -} -` -const Secao3 = styled.div` - background: ${props => props.contrast === "" ? "#FF7F00" : "black"}; - @media (min-width: 1000px) { - background-image: url(${CadeadoAberto}), url(${CadeadoFechado}); - background-repeat: no-repeat; - background-position: bottom left, bottom right; - background-position-y: 120%, 120%; - height:340px; - padding-block:30px; - } - - color: #fff; - - text-align: left; - - h3 { - font-family: 'Pompiere', cursive; - font-size: 46px; - padding-bottom: 20px; - margin-top: 20px; - margin-bottom: 10px; - width: 100%; - text-align: center !important; - font-weight: 500 ; - - } - - .aberto { - background-image: url(${Aberto}), url(${Linha}); - } - .fechado { - background-image: url(${Fechado}), url(${Linha}); - } - - .caixa { - background-repeat: no-repeat; - background-size: 70px 70px, auto auto; - background-position: top left; - background-position-x: 0, 35px; - padding-left: 90px; - .texto{ - background-image: url(${Linha}); - background-position: top left; - background-repeat: repeat-x; - background-size: auto auto; - span { - font-size: 26px; - } - p { - text-align: left; - font-size: 15px; + p { + line-height: 1.42857143; + padding-top: 20px; + font-size: 14px; + text-align: justify; margin: 0 0 10px; - } } - } ` -const Secao4 = styled.div` - font-size: 15px; - background: ${props => props.contrast === "" ? "" : "black"}; - - .texto { +const Secao3 = styled.div` + background: ${props => props.contrast === "" ? "#FF7F00" : "black"}; + @media (min-width: 1000px) { + background-image: url(${CadeadoAberto}), url(${CadeadoFechado}); + background-repeat: no-repeat; + background-position: bottom left, bottom right; + background-position-y: 120%, 120%; + height:340px; + padding-block:30px; + } + + color: #fff; + text-align: left; - padding-top: 20px; - padding-bottom: 20px; - color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"}; - a { - color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"}; - text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; - } + h3 { + font-family: 'Pompiere', cursive; + font-size: 46px; + padding-bottom: 20px; + margin-top: 20px; + margin-bottom: 10px; + width: 100%; + text-align: center !important; + font-weight: 500 ; - p { - font-family: 'Roboto', Bold; - color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"}; } - } + .aberto { + background-image: url(${Aberto}), url(${Linha}); + } + .fechado { + background-image: url(${Fechado}), url(${Linha}); + } - .titulo { - text-align: center; - color: ${props => props.contrast === "" ? "#666" : "white"}; - h3 { - font-size: 30px; - height: 22px; - padding-bottom: 20px; - margin-top: 20px; - margin-bottom: 10px; - font-weight: 500; - line-height: 1.1; + .caixa { + background-repeat: no-repeat; + background-size: 70px 70px, auto auto; + background-position: top left; + background-position-x: 0, 35px; + padding-left: 90px; + .texto{ + background-image: url(${Linha}); + background-position: top left; + background-repeat: repeat-x; + background-size: auto auto; + span { + font-size: 26px; + } + p { + text-align: left; + font-size: 15px; + margin: 0 0 10px; + } } - p { - height: 18px; - line-height: 1.42857143; - margin: 0 0 10px; +` + +const Secao4 = styled.div` + font-size: 15px; + background: ${props => props.contrast === "" ? "" : "black"}; + + .texto { + text-align: left; + padding-top: 20px; + padding-bottom: 20px; + color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"}; + + a { + color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + } + + p { + font-family: 'Roboto', Bold; + color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"}; + } + } + .titulo { + text-align: center; + color: ${props => props.contrast === "" ? "#666" : "white"}; + h3 { + font-size: 30px; + height: 22px; + padding-bottom: 20px; + margin-top: 20px; + margin-bottom: 10px; + font-weight: 500; + line-height: 1.1; + } + p { + height: 18px; + line-height: 1.42857143; + margin: 0 0 10px; + } + ` export default function UserTerms() { - const { state } = useContext(Store) - useEffect(() => { - window.scrollTo(0, 0) - }, []) - return ( - <div style={{ color: "rgba(0,0,0,0.87" }} > - - - <BannerStyle contrast={state.contrast}> - <h2 style={{ width: "100%", textAlign: "center", marginTop: "0px", paddingTop: "6rem", marginBottom: "16px", fontSize: "52px", fontFamily: "'Pompiere', cursive", color: "#fff", fontWeight: "500" }}>TERMOS DE USO</h2> - <Modal contrast={state.contrast} /> - </BannerStyle> - - <ImagemSeçao2 contrast={state.contrast}> - <Grid container> - <Grid item xs={12} md={1}></Grid> - <Grid item xs={12} md={10}> - <div> - <h3><strong style={{ fontWeight: "700" }}>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br />uma iniciativa do Ministério da Educação!</h3> - - <p>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <AColorido contrast={state.contrast} href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</AColorido> (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”. - </p> - <p>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domínio público ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.” <AColorido contrast={state.contrast} href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</AColorido>. - </p> - </div> - </Grid> - <Grid item xs={12} md={1}></Grid> - </Grid> - </ImagemSeçao2> - - <Secao3 contrast={state.contrast}> - <Grid container > - <h3>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h3> - <Grid item xs={12} md={1} ></Grid> - <Grid item xs={12} md={5} > - <div class="caixa aberto"> - <div class="texto"> - <span>Abertos</span> - <p>De acordo com a Declaração de Paris, são recursos que, no mínimo, têm uma licença de uso mais flexível, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p> - </div> - </div> - </Grid> - - <Grid item xs={12} md={5}> - <div class="caixa fechado"> - <div class="texto"> - <span>Fechados</span> - <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessíveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservados”, o símbolo ©). Podem ser gratuitos ou pagos.</p> - </div> - </div> - </Grid> - <Grid item xs={12} md={1} ></Grid> - </Grid> - </Secao3> - - <Grid container style={state.contrast === "" ? {} : { backgroundColor: "black" }}> - <Grid item xs={12} md={1}></Grid> - <Grid item xs={12} md={10}> - <Secao4 contrast={state.contrast}> - <div class="texto" style={{ paddingTop: "70px" }}> - <p>O <a href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2014/lei/l13005.htm" rel="noreferrer" target="_blank">Plano Nacional de Educação</a> (2014-2024) enfatiza nas metas 5 e 7 a importância dos recursos educacionais abertos para fomentar a qualidade da educação básica. A <a href="http://portal.mec.gov.br/index.php?option=com_docman&view=download&alias=35541-res-cne-ces-001-14032016-pdf&category_slug=marco-2016-pdf&Itemid=30192" rel="noreferrer" target="_blank">Resolução CNE/CES nº 1</a>, de 11 de março de 2016, também destaca a importância dos recursos educacionais abertos para as instituições de educação superior e para as atividades de educação a distância.</p> - </div> - <div class="titulo"> - <h3>TERMOS DE USO</h3> - <p>Início da vigência: agosto de 2017</p> - </div> - <div class="texto" style={{ paddingBottom: "40px" }}> - <p>Aqui estão os “Termos de Uso” da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços, e o que se espera de seus usuários. Por “usuário”, entende-se qualquer pessoa que acesse o domínio portal.mec.gov.br, tanto para pesquisa (acesso) como para a inclusão de dados e informações (participação) mediante cadastro.</p> - <p>Fazem parte dos Termos de Uso as políticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as informações sobre como reportar violações.</p> - <p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da <strong>Plataforma Integrada de RED do MEC</strong> implica aceite das condições aqui elencadas.</p> - <p>Por “serviço”, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p> - <p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler, certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos, utilize o formulário disponível em “Contato” para saná-las.</p> - </div> - </Secao4> - </Grid> - <Grid item xs={12} md={1}></Grid> - </Grid> - - - <Grid container style={state.contrast === "" ? {} : { backgroundColor: "black" }}> - <Grid item xs={12} md={1}></Grid> - <Grid item xs={12} md={10}> - <div style={{ marginBottom: "50px", paddingTop: "20px" }}> - <SimpleExpansionPanels contrast={state.contrast} /> - </div> - </Grid> - <Grid item xs={12} md={1}></Grid> - </Grid> - </div> - ); + const { state } = useContext(Store) + useEffect(() => { + window.scrollTo(0, 0) + }, []) + return ( + <div style={{ color: "rgba(0,0,0,0.87" }} > + <BannerStyle contrast={state.contrast}> + <h2 style={{ width: "100%", textAlign: "center", marginTop: "0px", paddingTop: "6rem", marginBottom: "16px", fontSize: "52px", fontFamily: "'Pompiere', cursive", color: "#fff", fontWeight: "500" }}>TERMOS DE USO</h2> + <Modal contrast={state.contrast} /> + </BannerStyle> + + <ImagemSeçao2 contrast={state.contrast}> + <Grid container> + <Grid item xs={12} md={1}></Grid> + <Grid item xs={12} md={10}> + <div> + <h3><strong style={{ fontWeight: "700" }}>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br />uma iniciativa do Ministério da Educação!</h3> + + <p>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <AColorido contrast={state.contrast} href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</AColorido> (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”. + </p> + <p>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domínio público ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.” <AColorido contrast={state.contrast} href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</AColorido>. + </p> + </div> + </Grid> + <Grid item xs={12} md={1}></Grid> + </Grid> + </ImagemSeçao2> + + <Secao3 contrast={state.contrast}> + <Grid container > + <h3>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h3> + <Grid item xs={12} md={1} ></Grid> + <Grid item xs={12} md={5} > + <div class="caixa aberto"> + <div class="texto"> + <span>Abertos</span> + <p>De acordo com a Declaração de Paris, são recursos que, no mínimo, têm uma licença de uso mais flexível, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p> + </div> + </div> + </Grid> + + <Grid item xs={12} md={5}> + <div class="caixa fechado"> + <div class="texto"> + <span>Fechados</span> + <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessíveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservados”, o símbolo ©). Podem ser gratuitos ou pagos.</p> + </div> + </div> + </Grid> + <Grid item xs={12} md={1} ></Grid> + </Grid> + </Secao3> + + <Grid container style={state.contrast === "" ? {} : { backgroundColor: "black" }}> + <Grid item xs={12} md={1}></Grid> + <Grid item xs={12} md={10}> + <Secao4 contrast={state.contrast}> + <div class="texto" style={{ paddingTop: "70px" }}> + <p>O <a href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2014/lei/l13005.htm" rel="noreferrer" target="_blank">Plano Nacional de Educação</a> (2014-2024) enfatiza nas metas 5 e 7 a importância dos recursos educacionais abertos para fomentar a qualidade da educação básica. A <a href="http://portal.mec.gov.br/index.php?option=com_docman&view=download&alias=35541-res-cne-ces-001-14032016-pdf&category_slug=marco-2016-pdf&Itemid=30192" rel="noreferrer" target="_blank">Resolução CNE/CES nº 1</a>, de 11 de março de 2016, também destaca a importância dos recursos educacionais abertos para as instituições de educação superior e para as atividades de educação a distância.</p> + </div> + <div class="titulo"> + <h3>TERMOS DE USO</h3> + <p>Início da vigência: agosto de 2017</p> + </div> + <div class="texto" style={{ paddingBottom: "40px" }}> + <p>Aqui estão os “Termos de Uso” da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços, e o que se espera de seus usuários. Por “usuário”, entende-se qualquer pessoa que acesse o domínio portal.mec.gov.br, tanto para pesquisa (acesso) como para a inclusão de dados e informações (participação) mediante cadastro.</p> + <p>Fazem parte dos Termos de Uso as políticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as informações sobre como reportar violações.</p> + <p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da <strong>Plataforma Integrada de RED do MEC</strong> implica aceite das condições aqui elencadas.</p> + <p>Por “serviço”, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p> + <p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler, certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos, utilize o formulário disponível em “Contato” para saná-las.</p> + </div> + </Secao4> + </Grid> + <Grid item xs={12} md={1}></Grid> + </Grid> + + + <Grid container style={state.contrast === "" ? {} : { backgroundColor: "black" }}> + <Grid item xs={12} md={1}></Grid> + <Grid item xs={12} md={10}> + <div style={{ marginBottom: "50px", paddingTop: "20px" }}> + <SimpleExpansionPanels contrast={state.contrast} /> + </div> + </Grid> + <Grid item xs={12} md={1}></Grid> + </Grid> + </div> + ); } -- GitLab