diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js
index 68a6d2742ad5256c6fe717a85225593f50ff5df5..ca0729a269e8d756bfc4686eb04acded43dbce12 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 00e8b3c34553c1ced9ba1b6e397fd5f404ef571d..186f36f06da8c452037c20df5093dd01780d984c 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 3199c61edb4b9487cc18f6f041771971adbdfdeb..2c43d64484d75fbfbc27533157a83e9de6103097 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 4e014419bfb43a8b7e256edf43781564cfd9fbe8..88cebaf2b2373b45e0c5a5c3749533e7b933b4a6 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 e983107dc8e5f1fb5bac97fd9ce9716d175038c3..0c409dc824705aa7d90cb1901e81df3e4f459d46 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 49f8861e07ab19e2403bad1e0a64fcee929b9f33..5c22b01ab724dfebfdca97b0887068dcc34ccc42 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 c037071df59ed871b086fb9b905a90c3e5ecba6f..6194f4f9c49172727129ebeaf52b86ee417322fc 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 4388ec758a2cdc81a97f8b61f7fb3765b3ef5805..5d8a2fce0e01b322b45aef2918604f05f4011766 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 9be8c975f8f4f2f3f28a60540db0288c7c9e0616..07c7c95eca02f384715e32f4bdf156480af915c6 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 229f5e44f4eb8dec105371f6e4e8787c60be9c76..fa2de050827af539a1c4758a1e4656375a8cc7b4 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 76c5d05ee47bc35067d89940dbd156691398599a..b22cc7b3a40771d5b573fbdc1eee6d8c1f05f1e4 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 3e4ea4abdc7985754789751137deef337a2d4224..9c2d8e3f4914d837974baf18f709b84f89004f9f 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 666c49d96c16f4973a5ca4d2232222ac0884e0c6..dd85205b87de4f0a58bdd833c877aa95fba5ebda 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 618f3c0c2142afb195dcf20078cc37f1abbc1b20..ba73e5a500ceb8aed345f6bca85ab1458ea1dc35 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 8f02c6c55f6b121aedf847deda14e61ba74767ff..53b6100ecc007f37b3ce0e817dcb367b70ec8a0c 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 294bcdb0630ca4f6dceaaec40f1665973dc97e85..1c6876010b03b2e8be31358d89ec41e5de8fd7a2 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 a4059ecfa2e5c180382a354f92728e19217198ee..18df65d36472f89da154e944bfa22c153305bc4a 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 bd8511f2d867bd1bd45198e086c11dd788ad0f99..6101bdbe1746da9cad4d1ef9f0506aec7180da1b 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 4dbac401d7dce5baad49dff0db0aa2bb5e514c69..4d1bedaf1c80aa2d6822d5e6b4892ec8f6b1c63b 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 747a0c27bed2fd8105193f764b9314d059651080..e03ce942de226f8ee2c0735c2fa1a35f373f16ad 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 e811500d1ceadc32accc29287863f31c71781893..fd13bf77da6382bdd70de4f0a0a730b6a6fc4568 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 370865722d5a85cb2b458f326b891dbfe962a3e8..8ffa33010de2cd6f1ab54be81472615cff4551d9 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 fe74faaf51718b3332a1c9bfb69e32fdd4ba64de..16b4c362ac8c6a832f81d1487873cc967bb4f6ea 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 6d0e093d7adc4d962d5178217a56813e50bb3602..e0a2f0eff01375b05430c609fea816b67d7b455a 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 e68a1a23893fa698241899c5a969005e0402e526..128f1914d21a864694add5f06a3168956c560d5b 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 021001b7b188c06109d7853ae7b0828bb426bb6c..490e1b10e2ccd806d972611c7170f7926634c670 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 81db93694c786dfc5b8f46f4a738c7419708f1f1..8aeaeb02269bf1a4c2219d53f23867583c924b88 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 1d4410498bd71d489e4d8ccd9a3284bb8f890662..4fae72c7d3eae0e30a6c206ea7d8b0fe8315a569 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 aa7ee16049c14310e70f1ab83b69f8b12f4860bf..19fd31bbe28f42c4cab259617bba9f6ed17497f5 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 e365a0b86a7805b8102e0981f45c350bce1ee444..9cb598a73d580fb96b60dc398f55e50332342bea 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 8e4d194578dc53db54ff9934e9aef996e4582026..9e6c0f7b6e8c7841b7407913a31df22162bfaad2 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 5170659ca6f2e961a14e314a827656737def4000..2067d044e0a307a5b204f4c76b1ae58e79756c45 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 8c381f197741f833d9171c58b780ffb37bb8ad1b..589d5cb10c758bf0f63147a94e37647556fe3998 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 339c36fd612cb3dc1a595c9a994a775af089c886..4d5e702ca9a14b3120e93dda0282aa2876866408 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 96cd46bb141e537274c606200855b89428a8e54a..b1e360262cb0a7c910a75575041e7f7e6939cf0d 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 52bdbd8a8caf5b3b2ff7cfb465b230ac120206bb..b06e2889af5bea8fcd18223a7690cbbf4aafcd8d 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 9a8ba4093cca97439be9fd96a16bbae29271e431..8ddf18dfea59395d838004398c3b3030d936f8b7 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 848b3b5b76edf5f975011b676dcfc021bbcd701e..dee57bdfa9650836cca49bf8e782c56bcb53b8f2 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 b2475f4f433e747c3cdd933c405acad284fdd200..9de1400f65abd87b3e85a25d4531892eed25cc8c 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 e34318389e644af900c76581db2107b9525bb109..55eef42430e78465f1b08c4d4ebe12ecbba4387e 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>
+ );
}