diff --git a/src/Components/Checkbox.js b/src/Components/Checkbox.js
index b3626f391bd73b4167907e5c1058b5aab9b20b51..6aaa04c7632f0ee9d67b3560bf671b41cb126690 100644
--- a/src/Components/Checkbox.js
+++ b/src/Components/Checkbox.js
@@ -19,16 +19,34 @@ import React from 'react';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import styled from 'styled-components'
+import { yellow, blue } from "@material-ui/core/colors";
+import { withStyles } from '@material-ui/core/styles';
const StyledFormControlLabel = styled(FormControlLabel)`
font-size : 12px !important;
.label {
font-size : 12px !important;
}
- .MuiCheckbox-colorSecondary.Mui-checked {
- color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
- }
`
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+const NormalCheckBox = withStyles({
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
export default function LabeledCheckbox(props) {
@@ -36,10 +54,16 @@ export default function LabeledCheckbox(props) {
<StyledFormControlLabel
contrast={props.contrast}
control={
- <Checkbox
- value={props.checked}
- onChange={props.handleChange}
- />
+ props.contrast === "" ?
+ <NormalCheckBox
+ value={props.checked}
+ onChange={props.handleChange}
+ />
+ :
+ <ContrastCheckBox
+ value={props.checked}
+ onChange={props.handleChange}
+ />
}
label={<span style={{ fontSize: '12px' }}>{props.label}</span>}
/>
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index eb5a75eb0d22ab1c68162339db26ad1491a15fc7..21caf2bd1b53f295f53eea0a5603d9fab3d24df0 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -172,7 +172,7 @@ export default function CollectionCardFunction(props) {
function toggleLoginSnackbar(reason) {
if (reason === 'clickaway') {
- return;
+ return;
}
handleSuccessfulLogin(false);
}
@@ -222,46 +222,6 @@ export default function CollectionCardFunction(props) {
<div className="Text" style={{ width: "100%" }}>
{SlideAnimationContent(props.contrast)}
</div>
- </div>
- }
- </Header>
- </Link>
-
- <Description className={`${props.contrast}BackColor`}> {/*renders rating, number of learning objects and likes count*/}
- {
- props.authorID !== state.currentUser.id &&
- <Rating
- style={props.contrast === "" ? {} : {color: "white"}}
- name="customized-empty"
- value={props.rating}
- readOnly
- emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />}
- />
- }
-
- <Footer className={`${props.contrast}Text`}>
- <Type>
- <FolderIcon style={props.contrast === "" ? {} : {color: "white"}} />
- <span style={{ fontWeight: "bold" }}>{props.collections ? props.collections.length : 0} </span>
- <span>{props.collections ? props.collections.length !== 1 ? "Recursos" : "Recurso" : 0}</span>
- </Type>
- <LikeCounter>
- <span>{likesCount}</span>
- <ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon className={`${props.contrast}LinkColor`} style={ props.contrast === "" ? {color: liked ? "red" : "#666"} : {color: liked ? "red" : "white"} } />
- </ButtonNoWidth>
- </LikeCounter>
- </Footer>
- </Description>
-
- </CardReaDiv>
-
- {
- props.authorID === state.currentUser.id ?
- (
- <CardReaFooter className={`${props.contrast}BackColor`} style={{ justifyContent: "space-between" }}> {/*renders following/unfollow and follow button*/}
- <Grid container>
- <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}>
{
privacy === 'private' &&
<LockIcon className={`${props.contrast}IconColor`} />
diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js
index 5c22b01ab724dfebfdca97b0887068dcc34ccc42..7f86b8dcb64f48fff7e6d7e9953ca308bfdbe828 100644
--- a/src/Components/CollectionCommentSection.js
+++ b/src/Components/CollectionCommentSection.js
@@ -116,47 +116,52 @@ export default function CollectionCommentSection(props) {
}
}
- const NoCommentsMessage = () => {
+ const NoCommentsMessage = (contrast) => {
const NoCommentsContainer = styled.div`
text-align: center;
margin-left: 9vw;
margin-right: 9vw;
`
const BlueTitle = styled.h2`
- color: #673ab7;
+ color: ${props => props.contrast === "" ? "#673ab7" : "white"};
`
const Secondary = styled.h3`
font-weight: 100;
+ color: ${props => props.contrast === "" ? "black" : "white"};
`
const ButtonText = styled.span`
font-weight: 900;
+ color: ${props => props.contrast === "" ? "white" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
`
const Image = styled.img`
`
return (
<NoCommentsContainer>
<Image src={Comentario} style={{ width: "100%", maxWidth: 234 }} />
- <BlueTitle>Compartilhe sua opinião com a rede!</BlueTitle>
- <Secondary>Gostou desta coleção? Comente e compartilhe com a rede sua opinião. Interagindo com a rede, você contribui para que mais coleções como esta sejam criadas.</Secondary>
+ <BlueTitle contrast={contrast}>Compartilhe sua opinião com a rede!</BlueTitle>
+ <Secondary contrast={contrast}>Gostou desta coleção? Comente e compartilhe com a rede sua opinião. Interagindo com a rede, você contribui para que mais coleções como esta sejam criadas.</Secondary>
<Button
variant="contained"
color="primary"
+ style={contrast.contrast === "" ? {} : { backgroundColor: "black", border: "1px solid white" }}
startIcon={<EditIcon />}
onClick={handleScrollToCommentForm}
>
- <ButtonText>Relatar experiência</ButtonText>
+ <ButtonText contrast={contrast}>Relatar experiência</ButtonText>
</Button>
</NoCommentsContainer>
);
}
- const CollectionComments = () => {
+ const CollectionComments = (contrast) => {
return (
- <ComentariosBox>
+ <ComentariosBox contrast={contrast}>
<h3>{totalReviews} {totalReviews !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
{reviews.map(r => {
return (
<div className="comentario-template" key={r.created_at}>
<Comment
+ contrast={contrast}
isCollection={false}
rerenderCallback={forceUpdate}
objectID={props.id}
@@ -205,7 +210,7 @@ export default function CollectionCommentSection(props) {
}, [render_state, currPageReviews]);
return (
- <CommentAreaContainer container xs={12} direction="row" justify="center" alignItems="center">
+ <CommentAreaContainer contrast={props.contrast} container xs={12} direction="row" justify="center" alignItems="center">
<SnackBarComponent
snackbarOpen={snackInfo.open}
handleClose={handleCloseSnack}
@@ -227,11 +232,11 @@ export default function CollectionCommentSection(props) {
openSignUp={handleOpenSignUp}
/>
<Grid item xs={12} ref={comment_ref}>
- <CommentAreaCard>
+ <CommentAreaCard contrast={props.contrast}>
{
props.currentUserId ?
<Fragment>
- <Title>Conte sua experiência com a coleção</Title>
+ <Title contrast={props.contrast}>Conte sua experiência com a coleção</Title>
<Grid container style={{ paddingTop: "20px" }} spacing={1}>
<Grid item xs={12} sm={2} style={{ paddingLeft: "15px", paddingRight: "15px" }}>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
@@ -240,6 +245,7 @@ export default function CollectionCommentSection(props) {
</Grid>
<Grid item xs={12} sm={10}>
<CommentForm
+ contrast={props.contrast}
colecao
recursoId={props.id}
handleSnackbar={handlePostSnackbar}
@@ -250,9 +256,9 @@ export default function CollectionCommentSection(props) {
</Fragment>
:
<Grid item xs={12}>
- <LogInToComment>
+ <LogInToComment contrast={props.contrast}>
<span className="span-purple">Você precisa entrar para comentar</span>
- <Button onClick={() => setSignUpOpen(true)} style={{ textTransform: "uppercase", color: "#666", fontWeight: "700" }}>
+ <Button onClick={() => setSignUpOpen(true)} style={props.contrast === "" ? { textTransform: "uppercase", color: "#666", fontWeight: "700" } : { textTransform: "uppercase", color: "yellow", fontWeight: "700", textDecoration: "underline" }}>
<ExitToAppIcon />ENTRAR
</Button>
</LogInToComment>
@@ -264,7 +270,7 @@ export default function CollectionCommentSection(props) {
<CircularProgress className="loading" />
</LoadingDiv>
:
- reviews.length ? CollectionComments() : NoCommentsMessage()
+ reviews.length ? CollectionComments(props.contrast) : NoCommentsMessage(props.contrast)
}
</CommentAreaCard>
</Grid>
@@ -302,7 +308,7 @@ const ComentariosBox = styled.div`
font-family: 'Roboto Light','Roboto Regular',Roboto;
font-weight: 300;
font-style: normal;
- color:#666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size: 1.857em;
margin: 15px 2%;
text-align : flex-start;
@@ -357,7 +363,7 @@ const LogInToComment = styled.div`
font-size : 24px;
font-weight : 700;
padding-bottom : 5px;
- color : #673ab7;
+ color: ${props => props.contrast === "" ? "#673ab7" : "white"};
}
img {
@@ -368,12 +374,15 @@ const LogInToComment = styled.div`
const CommentAreaContainer = styled(Grid)`
padding: 10px;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
`
const CommentAreaCard = styled(Card)`
padding: 45px;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black !important"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white!important"};
`
const Title = styled.h1`
text-align: center;
font-weight: 100;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
diff --git a/src/Components/Comment.js b/src/Components/Comment.js
index 5d8a2fce0e01b322b45aef2918604f05f4011766..c7b10d30918f416f00adee00630eaa0cb2e16bd8 100644
--- a/src/Components/Comment.js
+++ b/src/Components/Comment.js
@@ -16,26 +16,44 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useContext } from 'react'
-import { Store } from '../Store.js'
-import styled from 'styled-components'
-import Grid from '@material-ui/core/Grid';
-import { Button } from '@material-ui/core';
-import { Link } from 'react-router-dom'
-import { apiDomain } from '../env';
+import React, { useState, useContext } from "react";
+import { Store } from "../Store.js";
+import styled from "styled-components";
+import Grid from "@material-ui/core/Grid";
+import { Button } from "@material-ui/core";
+import { Link } from "react-router-dom";
+import { apiDomain } from "../env";
import noAvatar from "../img/default_profile.png";
-import Rating from '@material-ui/lab/Rating';
-import StarBorderIcon from '@material-ui/icons/StarBorder';
-import EditIcon from '@material-ui/icons/Edit';
+import Rating from "@material-ui/lab/Rating";
+import StarBorderIcon from "@material-ui/icons/StarBorder";
+import EditIcon from "@material-ui/icons/Edit";
import TextField from "@material-ui/core/TextField";
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import ModalExcluir from './ModalExcluirComentario.js'
-import { putRequest, deleteRequest } from './HelperFunctions/getAxiosConfig'
+import Menu from "@material-ui/core/Menu";
+import MenuItem from "@material-ui/core/MenuItem";
+import ModalExcluir from "./ModalExcluirComentario.js";
+import { putRequest, deleteRequest } from "./HelperFunctions/getAxiosConfig";
+import { makeStyles } from "@material-ui/styles";
+
+const useStyles = makeStyles((theme) => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%",
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%",
+ },
+}));
+
export default function Comment(props) {
- console.log(props)
- /*
+ /*
Required props:
rerenderCallback = callback function to trigger re-render on parent component
reviewRatings = required to update comment even though the user cannot update their rating score...
@@ -50,271 +68,392 @@ export default function Comment(props) {
createdAt
recurso : boolean; determines whether to display orange or purple font
*/
- var moment = require('moment')
-
- const { state } = useContext(Store)
- const [displayedComment, setDisplayedComment] = useState(props.description)
- const [editando, setEditando] = useState(false)
- const [anchorEl, setAnchorEl] = React.useState(null);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
- const [modalOpen, toggleModal] = useState(false)
-
- const [comment, setComment] = useState({
- error: false,
- value: props.description
- })
- const handleChange = (e) => {
- const userInput = e.target.value
- const flag = (userInput.length === 0 ? true : false);
- setComment({ ...comment, error: flag, value: userInput })
- }
-
- function handleOnSuccessfulComment(data) {
- setDisplayedComment(comment.value)
- setEditando(false)
- props.handlePost()
- }
-
- const updateComment = () => {
- const finalComment = comment
- let url;
-
- if (props.isCollection)
- url = `/collections/${props.objectID}/reviews/${props.reviewID}`
- else
- url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`
-
- if (!finalComment.error) {
-
- let payload = {
- "review": {
- "description": finalComment.value,
- "review_ratings_attributes": props.reviewRatings
- }
- }
- putRequest(url, payload, handleOnSuccessfulComment, (error) => { console.log(error) })
-
- }
+ var moment = require("moment");
+ const classes = useStyles();
+ const { state } = useContext(Store);
+ const [displayedComment, setDisplayedComment] = useState(props.description);
+ const [editando, setEditando] = useState(false);
+ const [anchorEl, setAnchorEl] = React.useState(null);
+ const handleClick = (event) => {
+ setAnchorEl(event.currentTarget);
+ };
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+ const [modalOpen, toggleModal] = useState(false);
+
+ const [comment, setComment] = useState({
+ error: false,
+ value: props.description,
+ });
+ const handleChange = (e) => {
+ const userInput = e.target.value;
+ const flag = userInput.length === 0 ? true : false;
+ setComment({ ...comment, error: flag, value: userInput });
+ };
+
+ function handleOnSuccessfulComment(data) {
+ setDisplayedComment(comment.value);
+ setEditando(false);
+ props.handlePost();
+ }
+
+ const updateComment = () => {
+ const finalComment = comment;
+ let url;
+
+ if (props.isCollection)
+ url = `/collections/${props.objectID}/reviews/${props.reviewID}`;
+ else url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`;
+
+ if (!finalComment.error) {
+ let payload = {
+ review: {
+ description: finalComment.value,
+ review_ratings_attributes: props.reviewRatings,
+ },
+ };
+ putRequest(url, payload, handleOnSuccessfulComment, (error) => {
+ console.log(error);
+ });
}
-
- function handleSuccessDeleteComment(data) {
- props.rerenderCallback()
- props.handleSnackbar(3)
- }
-
- const deleteComment = () => {
- let url;
-
- if (props.isCollection)
- url = `/collections/${props.objectID}/reviews/${props.reviewID}`
- else
- url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`
-
- deleteRequest(url, handleSuccessDeleteComment, (error) => { console.log(error) })
-
- toggleModal(false)
-
- }
- if (props.authorID)
- return (
- <React.Fragment>
- <ModalExcluir
- contrast={props.contrast} open={modalOpen} handleClose={() => { toggleModal(false) }}
- handleConfirm={deleteComment}
+ };
+
+ function handleSuccessDeleteComment(data) {
+ props.rerenderCallback();
+ props.handleSnackbar(3);
+ }
+
+ const deleteComment = () => {
+ let url;
+
+ if (props.isCollection)
+ url = `/collections/${props.objectID}/reviews/${props.reviewID}`;
+ else url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`;
+
+ deleteRequest(url, handleSuccessDeleteComment, (error) => {
+ console.log(error);
+ });
+
+ toggleModal(false);
+ };
+ if (props.authorID)
+ return (
+ <React.Fragment>
+ <ModalExcluir
+ open={modalOpen}
+ handleClose={() => {
+ toggleModal(false);
+ }}
+ handleConfirm={deleteComment}
+ />
+ <Grid container style={{ paddingLeft: "20px" }}>
+ <Grid item xs={1}>
+ {props.authorID && (
+ <AvatarDiv>
+ <Link to={"/usuario-publico/" + props.authorID}>
+ <img
+ src={
+ props.authorAvatar
+ ? apiDomain + props.authorAvatar
+ : noAvatar
+ }
+ alt="author avatar"
+ />
+ </Link>
+ </AvatarDiv>
+ )}
+ </Grid>
+
+ <Grid item xs={10}>
+ <Comentario contrast={state.contrast}>
+ <div className="star-rating-container">
+ <Rating
+ name="read-only"
+ value={props.rating}
+ readOnly
+ size="small"
+ style={
+ state.contrast === ""
+ ? { color: "#666" }
+ : { color: "yellow" }
+ }
+ emptyIcon={
+ <StarBorderIcon
+ fontSize="inherit"
+ style={
+ state.contrast === ""
+ ? { color: "#a5a5a5" }
+ : { color: "yellow" }
+ }
+ />
+ }
/>
- <Grid container style={{ paddingLeft: "20px" }}>
-
- <Grid item xs={1}>
- {
- props.authorID &&
- <AvatarDiv>
- <Link to={'/usuario-publico/' + props.authorID}>
- <img src={props.authorAvatar ? apiDomain + props.authorAvatar : noAvatar} alt="author avatar" />
- </Link>
- </AvatarDiv>
+ </div>
+
+ {props.name && <strong>{props.name}</strong>}
+
+ <div>
+ {editando ? (
+ <React.Fragment>
+ <div style={{ marginTop: "5%", padding: "2px" }}>
+ <StyledTextField
+ contrast={props.contrast}
+ colecao={!props.recurso}
+ id="input-comentario"
+ label={"Editar Comentário"}
+ margin="normal"
+ value={comment.value}
+ InputProps={
+ props.contrast === ""
+ ? { className: classes.lightTextField }
+ : { className: classes.darkTextField }
}
- </Grid>
-
- <Grid item xs={10}>
- <Comentario>
- <div className="star-rating-container">
- <Rating
- name="read-only"
- value={props.rating}
- readOnly
- size="small"
- style={{ color: "#666" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" style={{ color: "#a5a5a5" }} />}
- />
- </div>
-
- {
- props.name &&
- <strong>{props.name}</strong>
+ variant="outlined"
+ multiline={true}
+ rows="5"
+ onChange={(e) => {
+ handleChange(e);
+ }}
+ style={{ width: "100%" }}
+ />
+ </div>
+ <div style={{ float: "right" }}>
+ <StyledButton
+ contrast={state.contrast}
+ style={
+ state.contrast === ""
+ ? props.recurso
+ ? { backgroundColor: "#ff7f00" }
+ : { backgroundColor: "#673ab7" }
+ : {
+ backgroundColor: "black",
+ border: "1px solid white",
+ textDecoration: "underline",
}
-
- <div>
- {
- editando ?
- (
- <React.Fragment>
- <div style={{ marginTop: "5%", padding: "2px" }}>
- <StyledTextField
- colecao={!props.recurso}
- id="input-comentario"
- label={"Editar Comentário"}
- margin="normal"
- value={comment.value}
- multiline={true}
- rows="5"
- onChange={(e) => { handleChange(e) }}
- style={{ width: "100%" }}
- />
- </div>
- <div style={{ float: "right" }}>
- <StyledButton
- style={props.recurso ? { backgroundColor: "#ff7f00" } : { backgroundColor: "#673ab7" }}
- onClick={() => { setEditando(false) }}
- >
- Fechar
- </StyledButton>
- <StyledButton
- style={props.recurso ? { backgroundColor: "#ff7f00" } : { backgroundColor: "#673ab7" }}
- onClick={() => updateComment()}
- >
- Salvar
- </StyledButton>
- </div>
- </React.Fragment>
- )
- :
- (
- <React.Fragment>
- <p>
- {
- props.authorID &&
- <Link
- to={'/usuario-publico/' + props.authorID}
- style={{
- fontWeight: "bolder",
- color: props.recurso ? "#ff7f00" : "#673ab7"
- }}
- >
- {props.authorName}
- </Link>
- }
- : {displayedComment}
- </p>
- <span className="date">
- {moment(props.createdAt).format("DD/MM/YYYY")}
- </span>
- </React.Fragment>
- )
- }
- </div>
-
- </Comentario>
- </Grid>
-
- {
- props.authorID === state.currentUser.id &&
- <Grid item xs={1}>
- <StyledDiv>
- <Button onClick={handleClick}><EditIcon /></Button>
- <Menu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- >
- <MenuItem onClick={() => { setEditando(true); handleClose() }}>Editar</MenuItem>
- <MenuItem onClick={() => { toggleModal(true); handleClose() }}>Excluir</MenuItem>
- </Menu>
- </StyledDiv>
- </Grid>
+ }
+ onClick={() => {
+ setEditando(false);
+ }}
+ >
+ Fechar
+ </StyledButton>
+ <StyledButton
+ contrast={state.contrast}
+ style={
+ state.contrast === ""
+ ? props.recurso
+ ? { backgroundColor: "#ff7f00" }
+ : { backgroundColor: "#673ab7" }
+ : {
+ backgroundColor: "black",
+ border: "1px solid white",
+ textDecoration: "underline",
+ }
+ }
+ onClick={() => updateComment()}
+ >
+ Salvar
+ </StyledButton>
+ </div>
+ </React.Fragment>
+ ) : (
+ <React.Fragment>
+ <p>
+ {props.authorID && (
+ <Link
+ to={"/usuario-publico/" + props.authorID}
+ style={{
+ fontWeight: "bolder",
+ color:
+ state.contrast === ""
+ ? props.recurso
+ ? "#ff7f00"
+ : "#673ab7"
+ : "white",
+ }}
+ >
+ {props.authorName}
+ </Link>
+ )}
+ : {displayedComment}
+ </p>
+ <span className="date">
+ {moment(props.createdAt).format("DD/MM/YYYY")}
+ </span>
+ </React.Fragment>
+ )}
+ </div>
+ </Comentario>
+ </Grid>
+
+ {props.authorID === state.currentUser.id && (
+ <Grid item xs={1}>
+ <StyledDiv>
+ <Button onClick={handleClick}>
+ <EditIcon
+ style={state.contrast === "" ? {} : { color: "white" }}
+ />
+ </Button>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ <MenuItem
+ style={
+ state.contrast === ""
+ ? {}
+ : {
+ backgroundColor: "black",
+ color: "yellow",
+ textDecoration: "underline",
+ }
}
- </Grid>
- </React.Fragment>
- )
- else
- return (
- <Grid container style={{ paddingLeft: "20px" }} justify='center' alignItems='center '>
-
- <Grid item xs={1}>
- {
- <AvatarDiv>
- <img src={noAvatar} alt="author avatar" />
- </AvatarDiv>
+ onClick={() => {
+ setEditando(true);
+ handleClose();
+ }}
+ >
+ Editar
+ </MenuItem>
+ <MenuItem
+ style={
+ state.contrast === ""
+ ? {}
+ : {
+ backgroundColor: "black",
+ color: "yellow",
+ textDecoration: "underline",
+ }
}
- </Grid>
-
- <Grid item xs={10}>
- <Comentario>
- <p>
- O usuário que fez esse comentário deletou a conta.
- </p>
- </Comentario>
- </Grid>
+ onClick={() => {
+ toggleModal(true);
+ handleClose();
+ }}
+ >
+ Excluir
+ </MenuItem>
+ </Menu>
+ </StyledDiv>
</Grid>
- )
+ )}
+ </Grid>
+ </React.Fragment>
+ );
+ else
+ return (
+ <Grid
+ container
+ style={{ paddingLeft: "20px" }}
+ justify="center"
+ alignItems="center "
+ >
+ <Grid item xs={1}>
+ {
+ <AvatarDiv>
+ <img src={noAvatar} alt="author avatar" />
+ </AvatarDiv>
+ }
+ </Grid>
+
+ <Grid item xs={10}>
+ <Comentario contrast={state.contrast}>
+ <p>O usuário que fez esse comentário deletou a conta.</p>
+ </Comentario>
+ </Grid>
+ </Grid>
+ );
}
const StyledTextField = styled(TextField)`
- label.Mui-focused {
- color : ${props => props.colecao ? "rgb(103,58,183)" : "rgb(255,127,0)"};
+ .MuiInputBase-root {
+ margin-bottom: 5px;
+ }
+
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${(props) =>
+ props.contrast === ""
+ ? props.colecao
+ ? "#673ab7"
+ : "rgb(255,127,0)"
+ : "yellow"};
}
-
- .MuiInput-underline::after {
- border-bottom: ${props => props.colecao ? "2px solid rgb(103,58,183)" : "2px solid rgb(255,127,0)"};
+ fieldset {
+ border-color: ${(props) => (props.contrast === "" ? "#666" : "white")};
}
+ }
-`
-
-const StyledDiv = styled.div`
- text-align : center;
- .MuiButton-root {
- @media screen and (max-width: 990px) {
- padding-right : 35px !important;
- }
- }
-`
-const StyledButton = styled(Button)`
- color : rgba(255,255,255,0.87) !important;
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
- margin : 6px 8px !important;
- font-weight : 600 !important;
-`
+ label {
+ color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+ }
-const Comentario = styled.div`
- padding-left : 55px !important;
- font-size : 14px;
+ label.Mui-focused {
+ color: ${(props) =>
+ props.contrast === ""
+ ? props.colecao
+ ? "#673ab7"
+ : "rgb(255,127,0)"
+ : "yellow"};
+ }
- .star-rating-container {
- width : 100px;
- }
+ label.Mui-focused.Mui-error {
+ color: red;
+ }
- p {
- margin : 0 0 10px;
- padding-left : 2px
- }
+ width: 95%;
+`;
- a {
- text-decoration : none !important;
+const StyledDiv = styled.div`
+ text-align: center;
+ .MuiButton-root {
+ @media screen and (max-width: 990px) {
+ padding-right: 35px !important;
}
+ }
+`;
+const StyledButton = styled(Button)`
+ color: ${(props) =>
+ props.contrast === ""
+ ? "rgba(255,255,255,0.87) !important"
+ : "yellow !important"};
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
+ margin: 6px 8px !important;
+ font-weight: 600 !important;
+ :hover {
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+`;
- .date {
- color : #ababab;
- font-size : 12px;
- font-weight : lighter;
- padding-left : 3px;
- }
-`
+const Comentario = styled.div`
+ padding-left: 55px !important;
+ font-size: 14px;
+ color: ${(props) => (props.contrast === "" ? "#ababab" : "white")};
+
+ .star-rating-container {
+ width: 100px;
+ }
+
+ p {
+ margin: 0 0 10px;
+ padding-left: 2px;
+ }
+
+ a {
+ text-decoration: none !important;
+ }
+
+ .date {
+ color: ${(props) => (props.contrast === "" ? "#ababab" : "white")};
+ font-size: 12px;
+ font-weight: lighter;
+ padding-left: 3px;
+ }
+`;
const AvatarDiv = styled.div`
text-align : center;
@@ -332,4 +471,4 @@ const AvatarDiv = styled.div`
border-radius : 100%
vertical-align : middle;
}
-`
+`;
diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index 138afd0ccea3bc46c5e1ce7dec60cbbd8bdaf563..ba7b9a256418b4888deb2f31ca41a4d356bc6252 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/src/Components/ContactButtons/FollowButton.js
@@ -158,9 +158,7 @@ export function NoIcon(props) {
{/*----------------------------------------------------------------------------*/}
{
state.currentUser.id !== '' ? (
- <NoIconButton 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.followableID)}>seguir</NoIconButton>
+ <NoIconButton contrast={state.contrast} onClick={() => handleFollow(props.followableID)}>seguir</NoIconButton>
)
:
(
@@ -174,6 +172,14 @@ export function NoIcon(props) {
}
const NoIconButton = styled(Button)`
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ .MuiButton-label {
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ }
+ background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "solid 1px rgba(0,188,212,.85) !important" : "solid 1px white !important"};
font-size : 14px !important;
border-radius : 3px !important;
height : 36px !important;
@@ -183,6 +189,8 @@ const NoIconButton = styled(Button)`
text-align : center !important;
padding : 0 6px !important;
margin : 6px 8px !important;
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
`
const StyledButton = styled(Button)`
diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js
index 94d5700bfa4443d1a12197a007d98d26ab0861f0..fd30943f896adf3349bf3b893afa5f4c88fb8ac6 100644
--- a/src/Components/ContactButtons/FollowingButton.js
+++ b/src/Components/ContactButtons/FollowingButton.js
@@ -121,8 +121,8 @@ export function NoIconFollowing(props) {
handleClose={() => { toggleModal(false) }}
handleConfirm={handleUnfollowPartTwo}
/>
- <NoIconButton 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"}}
+ <NoIconButton
+ contrast={props.contrast}
onMouseOver={() => toggleFollowingHover(true)}
onMouseLeave={() => toggleFollowingHover(false)}
onClick={() => handleUnfollowPartOne(props.followedID)}
@@ -160,6 +160,14 @@ export const StyledButton = styled(Button)`
`
const NoIconButton = styled(Button)`
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ .MuiButton-label {
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ }
+ background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "solid 1px rgba(0,188,212,.85) !important" : "solid 1px white !important"};
font-size : 14px !important;
border-radius : 3px !important;
height : 36px !important;
@@ -169,4 +177,8 @@ const NoIconButton = styled(Button)`
text-align : center !important;
padding : 0 6px !important;
margin : 6px 8px !important;
+
+ span{
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ }
`
diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js
index b22cc7b3a40771d5b573fbdc1eee6d8c1f05f1e4..84fc512edfd3a667ca63ec75b43684d7efb0d630 100644
--- a/src/Components/ContactCardOptions.js
+++ b/src/Components/ContactCardOptions.js
@@ -16,8 +16,8 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useContext, useState} from 'react';
-import {Store} from '../Store'
+import React, { useContext, useState } from 'react';
+import { Store } from '../Store'
import styled from 'styled-components'
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
@@ -29,7 +29,7 @@ import ReportIcon from '@material-ui/icons/Error';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import { putRequest } from './HelperFunctions/getAxiosConfig'
import ReportModal from './ReportModal.js'
-import {Link} from 'react-router-dom'
+import { useHistory } from 'react-router-dom'
import LoginModal from './LoginModal.js'
import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './SignUpModal'
@@ -40,7 +40,8 @@ function Alert(props) {
}
export default function SimpleMenu(props) {
- const {state} = useContext(Store)
+ const history = useHistory();
+ const { state } = useContext(Store)
const [anchorEl, setAnchorEl] = React.useState(null);
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
@@ -58,8 +59,8 @@ export default function SimpleMenu(props) {
if (reason === 'clickaway') {
return;
}
-
- handleSuccessfulLogin(false);
+
+ handleSuccessfulLogin(false);
}
function handleClick(event) {
@@ -157,13 +158,48 @@ export default function SimpleMenu(props) {
<StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleLogin(true)}}>
<ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar
</StyledMenuItem>
- )
- }
- </Menu>
- </div>
- </>
- </React.Fragment>
- );
+
+ {
+ props.followed ?
+ (
+ <StyledMenuItem contrast={state.contrast} onClick={() => { handleFollow(props.followableID) }}>
+ <ListItemIcon><ReportIcon /></ListItemIcon>Deixar de Seguir
+ </StyledMenuItem>
+ )
+ :
+ (
+ state.currentUser.id !== '' ? (
+ <StyledMenuItem contrast={state.contrast} onClick={() => { handleFollow(props.followableID) }}>
+ <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
+ </StyledMenuItem>
+ )
+ :
+ (
+ <StyledMenuItem contrast={state.contrast} onClick={() => { handleLogin(props.followableID) }}>
+ <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
+ </StyledMenuItem>
+ )
+ )
+ }
+
+ {
+ state.currentUser.id !== '' ? (
+ <StyledMenuItem contrast={state.contrast} onClick={() => { handleModal(true); handleClose() }}>
+ <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+ </StyledMenuItem>
+ )
+ :
+ (
+ <StyledMenuItem contrast={state.contrast} onClick={() => { handleLogin(true) }}>
+ <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+ </StyledMenuItem>
+ )
+ }
+ </Menu>
+ </div>
+ </>
+ </React.Fragment >
+ );
}
const ButtonNoWidth = styled(Button)`
@@ -171,8 +207,7 @@ const ButtonNoWidth = styled(Button)`
min-width : 24px !important;
max-height : 24px !important;
padding : 0 !important;
- background-color : #fff !important;
- color : #a5a5a5 !important;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
border : 0 !important;
.MuiButton-root {
@@ -183,6 +218,7 @@ const ButtonNoWidth = styled(Button)`
.MuiSvgIcon-root {
padding-right : 0 !important;
vertical-align : middle;
+ color: ${props => props.contrast === "" ? "#a5a5a5 !important" : "yellow"};
}
.MuiButton-label {
@@ -194,8 +230,12 @@ const StyledMenuItem = styled(MenuItem)`
background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
.MuiSvgIcon-root {
vertical-align : middle !important;
+ color: ${props => props.contrast === "" ? "inherit" : "white"} !important;
}
a {
- color : inherit !important;
+ color: ${props => props.contrast === "" ? "inherit" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
}
+ color: ${props => props.contrast === "" ? "inherit" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
`
diff --git a/src/Components/ExpandedMaterials.js b/src/Components/ExpandedMaterials.js
index fa2dec028df55b29c81435ca9064b6537ca4b4ae..767f0a0fccbf7889e09625d25e6575175b0a9a3e 100644
--- a/src/Components/ExpandedMaterials.js
+++ b/src/Components/ExpandedMaterials.js
@@ -24,7 +24,7 @@ const ExpandedMaterial = (props) => {
const classes = useStyles();
return (
- <Paper className={`${props.contrast}Border`} elevation={3} style={ props.contrast === "" ? {backgroundColor: "#444444", padding: "20px" } : {backgroundColor: "black", padding: "20px" }}>
+ <Paper className={`${props.contrast}Border`} elevation={3} style={props.contrast === "" ? { backgroundColor: "#444444", padding: "20px" } : { backgroundColor: "black", padding: "20px" }}>
<Grid container direction="row" spacing={2}>
<Grid item direction="column" xs={12} md={4}>
<Grid item>
@@ -40,7 +40,7 @@ const ExpandedMaterial = (props) => {
{
material.tags.map((tag, index) => {
return (
- <Chip className={`${props.contrast}Text ${props.contrast}BackColor`} label={tag.name} key={index} style={{ padding: "0.5px" }} />
+ <Chip className={`${props.contrast}Text ${props.contrast}BackColor`} label={tag.name} key={index} style={props.contrast === "" ? { padding: "0.5px" } : {border: "1px solid white"}} />
)
})
}
@@ -55,7 +55,7 @@ const ExpandedMaterial = (props) => {
</DevelopedByDiv>
<SizedHeightBox3 />
<StyledLink to={`/colecao?colecao=${material.id}`}>
- <Button className={`${props.contrast}LinkColor ContrastText`} variant="contained" style={props.contrast === "" ? {background: "#e8224f"} : {background: "black"}}>
+ <Button className={`${props.contrast}LinkColor ContrastText`} variant="contained" style={props.contrast === "" ? { background: "#e8224f" } : { background: "black" }}>
Ver todos
</Button>
</StyledLink>
diff --git a/src/Components/FormationMaterialDescription.js b/src/Components/FormationMaterialDescription.js
index 5771aef3448785bc86fc45db7f65a3a10e353bdc..ea5cf2e06b58562fb24f2c8d2d21db5c76ef7ff7 100644
--- a/src/Components/FormationMaterialDescription.js
+++ b/src/Components/FormationMaterialDescription.js
@@ -22,31 +22,32 @@ export default function FormationMaterialDescription(props) {
const topico_obj = props.topico_obj;
return (
- <WrappingCard>
+ <WrappingCard contrast={props.contrast}>
<Grid container
+ style={props.contrast === "" ? {} : {backgroundColor: "black"}}
direction="row"
justify="flex-start"
alignItems="center"
>
<Grid item xs={12} md={8}>
- <TextContainer>
- <Title>
+ <TextContainer contrast={props.contrast}>
+ <Title contrast={props.contrast}>
{colecao ?
"Sobre o Material"
: "Resumo do " + props.colecao_obj.topic_name.slice(0, -1)
}
</Title>
- <Description>
+ <Description contrast={props.contrast}>
{colecao ?
colecao_obj.description
: topico_obj.description
}
</Description>
{colecao ?
- <SubTitle>Histórico do Curso</SubTitle>
- : <Strong>Autoria (autores):</Strong>
+ <SubTitle contrast={props.contrast}>Histórico do Curso</SubTitle>
+ : <Strong contrast={props.contrast}>Autoria (autores):</Strong>
}
- <Description>
+ <Description contrast={props.contrast}>
{colecao ?
colecao_obj.historic
: topico_obj.author
@@ -55,17 +56,17 @@ export default function FormationMaterialDescription(props) {
</TextContainer>
</Grid>
<Grid item xs={12} md={3}>
- <IconList>
- <IconItem>
+ <IconList contrast={props.contrast}>
+ <IconItem contrast={props.contrast}>
<LibraryBooksIcon />
- <Strong>Tipo de recurso: </Strong>
+ <Strong contrast={props.contrast}>Tipo de recurso: </Strong>
Material de Formação
<br />
</IconItem>
- <IconItem>
+ <IconItem contrast={props.contrast}>
<MoveToInboxIcon />
- <Strong>Ano de publicação: </Strong>
+ <Strong contrast={props.contrast}>Ano de publicação: </Strong>
{colecao ?
colecao_obj.created_at.split('-')[0]
: topico_obj.created_at.split('-')[0]
@@ -82,24 +83,24 @@ export default function FormationMaterialDescription(props) {
topico_obj.language[i].name
: '')
return (
- <IconItem>
+ <IconItem contrast={props.contrast}>
<TranslateIcon />
- <Strong>Idioma: </Strong>
+ <Strong contrast={props.contrast}>Idioma: </Strong>
{content}
<br />
</IconItem>
);
})}
- <IconItem>
- <Strong>{colecao ? "Criado" : "Enviado"} por:</Strong>
+ <IconItem contrast={props.contrast}>
+ <Strong contrast={props.contrast}>{colecao ? "Criado" : "Enviado"} por:</Strong>
<br />
<StyledAnchor href={colecao_obj.developedurl}>
{
colecao_obj.id === 3 ? <LongUserIcon src={require("../img/logo_parceiros/ic_peninsula.png")} />
: <div>
<UserIcon src={require("../img/logo_parceiros/ic_nute.png")} />
- <Red>
+ <Red contrast={props.contrast}>
{colecao_obj.developed}
</Red>
</div>
@@ -115,12 +116,14 @@ export default function FormationMaterialDescription(props) {
const Title = styled.h1`
font-weight: 100;
- color: rgb(102, 102, 102);
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+
`
const SubTitle = styled.h3`
font-weight: 900;
padding-top: 10px;
- color: rgb(102, 102, 102);
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+
`
const UserIcon = styled.img`
width: 50px;
@@ -133,9 +136,10 @@ const LongUserIcon = styled.img`
margin: 10px;
`
const Description = styled.p`
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const TextContainer = styled.div`
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
margin: 15px;
height: 100%;
@media screen and (max-width: 768px) {
@@ -156,12 +160,14 @@ const TextContainer = styled.div`
padding : 0 15px 0 0
}
`
-
-const WrappingCard = styled(Card)`
+export const WrappingCard = styled(Card)`
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
border-radius: 0;
margin-right : auto;
margin-left : auto;
margin-bottom: 30px;
+ margin-top: 30px;
@media screen and (max-width: 768px) {
width : 100% !important;
@@ -173,18 +179,21 @@ const WrappingCard = styled(Card)`
width : 970px !important;
}
`
+
const IconList = styled.div`
margin: 15px;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
`
const IconItem = styled.span`
width: 100%;
display: inline-block;
margin-bottom: 15px;
font-size : 14px;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
.MuiSvgIcon-root {
vertical-align : middle
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
img {
@@ -194,10 +203,11 @@ const IconItem = styled.span`
`
const Strong = styled.span`
font-weight: bold;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const Red = styled.span`
- color: #e81f4f;
+ color: ${props => props.contrast === "" ? "#e81f4f" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
`
const StyledAnchor = styled.a`
text-decoration: none !important;
diff --git a/src/Components/FormationMaterialHeader.js b/src/Components/FormationMaterialHeader.js
index 0c49772337828e81ec2ccfb9b045d3cb4f7ef2b9..af2417ff6835208ee354dc70f514e34c51205d3b 100644
--- a/src/Components/FormationMaterialHeader.js
+++ b/src/Components/FormationMaterialHeader.js
@@ -38,13 +38,13 @@ export default function FormationMaterialHeader(props) {
}
const getThumb = () => {
- return colecao ?
+ return colecao ?
require(`../../public/${colecao_obj.img}`)
: require(`../../public/${topico_obj.img}`)
}
return (
- <WrappingCard>
+ <WrappingCard contrast={props.contrast}>
<Grid container
direction="row"
justify="flex-start"
@@ -57,38 +57,42 @@ export default function FormationMaterialHeader(props) {
direction="column"
justify="flex-start"
alignItems="stretch"
- style={{ padding: "8px 10px" }}
+ style={props.contrast === "" ? { padding: "8px 10px" } : { backgroundColor: "black" }}
>
<Grid item>
- <Title>{get_title()}</Title>
+ <Title contrast={props.contrast}>{get_title()}</Title>
</Grid>
<Grid item>
- <SubTitle>
+ <SubTitle contrast={props.contrast}>
{colecao ?
get_subtitle()
- : <StyledLink to={'/colecao?id=' + colecao_obj.id}>{get_subtitle()}</StyledLink>}
+ : <StyledLink contrast={props.contrast} to={'/colecao?id=' + colecao_obj.id}>{get_subtitle()}</StyledLink>}
</SubTitle>
</Grid>
<Grid item>
<ChipsDiv className={classes.root}>
{colecao_obj.tags.map((t, index) => {
- return (<Chip color="default" label={t.name} key={index} style={{ padding: "0.5px" }} />);
+ return (<Chip color="default" label={t.name} key={index} style={props.contrast === "" ? { padding: "0.5px" } : { border: "1px solid white", padding: "0.5px", backgroundColor: "black", color: "white" }} />);
})}
</ChipsDiv>
</Grid>
<Grid item>
{colecao ?
- <Button
- variant="contained"
- color="secondary"
- style={{ marginLeft: '15px' }}
- onClick={props.handleClick}
- >
- {props.colecao ? "Ver todos os módulos" : "Iniciar leitura"}
- </Button>
+ <StyledLink contrast={props.contrast}>
+ <Button
+ className="button"
+ variant="contained"
+ color="secondary"
+ style={{ marginLeft: '15px' }}
+ onClick={props.handleClick}
+ >
+ {props.colecao ? "Ver todos os módulos" : "Iniciar leitura"}
+ </Button>
+ </StyledLink>
:
- <StyledLink to={'/iframe-colecao?colecao=' + colecao_obj.id + '&topico=' + topico_obj.id}>
+ <StyledLink contrast={props.contrast} to={'/iframe-colecao?colecao=' + colecao_obj.id + '&topico=' + topico_obj.id}>
<Button
+ className="button"
variant="contained"
color="secondary"
style={{ marginLeft: '15px', marginTop: '10px' }}
@@ -119,15 +123,18 @@ const Img = styled.img`
const Title = styled.h2`
font-weight: 100;
margin: 15px;
- color: rgb(102, 102, 102);
+ color: ${props => props.contrast === "" ? "rgb(102, 102, 102)" : "white"};
+
`
const SubTitle = styled.h4`
font-weight: 50;
margin: 15px;;
margin-top: 0;
- color: rgb(102, 102, 102);
+ color: ${props => props.contrast === "" ? "rgb(102, 102, 102)" : "white"};
`
export const WrappingCard = styled(Card)`
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
border-radius: 0;
margin-right : auto;
margin-left : auto;
@@ -146,6 +153,15 @@ export const WrappingCard = styled(Card)`
`
const StyledLink = styled(Link)`
- text-decoration: none !important;
- color: #e81f4f !important;
+ color: ${props => props.contrast === "" ? "#e81f4f !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+
+ .button{
+ background-color: ${props => props.contrast === "" ? "" : "black "};
+ color: ${props => props.contrast === "" ? "white" : "yellow"};
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ }
+ }
`
diff --git a/src/Components/PublicationPermissionsContent.js b/src/Components/PublicationPermissionsContent.js
index 2f404e49217f7c9c83541ed84c3852ce94d06b65..d235cc3a2b48d6e56484668138708089f542bdbf 100644
--- a/src/Components/PublicationPermissionsContent.js
+++ b/src/Components/PublicationPermissionsContent.js
@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
import Typography from '@material-ui/core/Typography';
import CardContent from '@material-ui/core/CardContent';
import styled from 'styled-components'
@@ -8,7 +8,8 @@ import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
-import {getRequest} from './HelperFunctions/getAxiosConfig'
+import { getRequest } from './HelperFunctions/getAxiosConfig';
+import { yellow } from "@material-ui/core/colors";
const StyledFormControl = styled(FormControl)`
display: "block ruby";
@@ -16,74 +17,84 @@ const StyledFormControl = styled(FormControl)`
`
const BlueRadio = withStyles({
- root: {
- color: '#666',
- '&$checked': {
- color: '#00bcd4',
+ root: {
+ color: '#666',
+ '&$checked': {
+ color: '#00bcd4',
+ },
},
- },
- checked: {},
+ checked: {},
})((props) => <Radio color="default" {...props} />);
-export default function PublicationPermissionsContent (props) {
+const ContrastRadio = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Radio color="default" {...props} />);
+
+export default function PublicationPermissionsContent(props) {
const [questionsArr, setQuestionsArr] = useState([])
- const handleSetQuestionsArr = (newArr) => {setQuestionsArr(newArr)}
+ const handleSetQuestionsArr = (newArr) => { setQuestionsArr(newArr) }
- function handleSuccess (data) {
+ function handleSuccess(data) {
handleSetQuestionsArr(data)
}
useEffect(() => {
const url = `/questions/`
- getRequest(url, handleSuccess, (error) => {console.log(error)})
+ getRequest(url, handleSuccess, (error) => { console.log(error) })
}, [])
return (
- <CardContent style={{textAlign: "start", marginBottom: "10px", lineHeight:"21px", color:"rgb(102, 102, 102)", padding:"65px"}}>
- <Typography variant="h4" style={{textAlign:"center", color:"rgb(102, 102, 102)", fontSize:"26px"}}> É necessário que você declare a permissão de publicação do seu Recurso:</Typography>
- <div classname="texto-termos">
- <div classname="title">
- <Typography variant = "h3" style={{textAlign:"center", fontSize:"30px", marginTop:"20px", marginBottom:"10px", color:"rgb(102, 102, 102)"}}>
- PERMISSÃO DE PUBLICAÇÃO
- </Typography>
- </div>
- <p>Ao prosseguir você concede a permissão de publicação do seu recurso ao nosso portal e se compromete a não infringir as políticas de conteúdos, estando então,
+ <div style={props.contrast === "" ? { textAlign: "start", lineHeight: "21px", color: "rgb(102, 102, 102)", padding: "65px" } : { textAlign: "start", lineHeight: "21px", color: "white", padding: "65px", backgroundColor: "black" }}>
+ <Typography variant="h4" style={props.contrast === "" ? { textAlign: "center", color: "rgb(102, 102, 102)", fontSize: "26px" } : { textAlign: "center", color: "white", fontSize: "26px" }}> É necessário que você declare a permissão de publicação do seu Recurso:</Typography>
+ <div classname="texto-termos">
+ <div classname="title">
+ <Typography variant="h3" style={props.contrast === "" ? { textAlign: "center", fontSize: "30px", marginTop: "20px", marginBottom: "10px", color: "rgb(102, 102, 102)" } : { textAlign: "center", fontSize: "30px", marginTop: "20px", marginBottom: "10px", color: "white" }}>
+ PERMISSÃO DE PUBLICAÇÃO
+ </Typography>
+ </div>
+ <p>Ao prosseguir você concede a permissão de publicação do seu recurso ao nosso portal e se compromete a não infringir as políticas de conteúdos, estando então,
a partir desse momento passível de responsabilização pelo conteúdo a ser integrado a nossa rede. Para tanto atente-se as pontuações abaixo e verifique se o seu
recurso está de acordo, antecipadamente, com as nossas condições. É recomendável a leitura das políticas de conteúdo estabelecidas
- (<a href="/termos" style={{color:"initial"}}><strong>Políticas de Conteúdo</strong></a>)
- </p>
- <Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)", fontSize:"22px"}}>
+ (<a href="/termos" style={props.contrast === "" ? { color: "initial" } : { color: "yellow", textDecoration: "underline" }}><strong>Políticas de Conteúdo</strong></a>)
+ </p>
+ <Typography variant="h5" style={props.contrast === "" ? { fontWeight: "300", color: "rgb(102, 102, 102)", fontSize: "22px" } : { fontWeight: "300", color: "white", fontSize: "22px" }}>
Para que o recurso seja publicado na plataforma é preciso que ele esteja de acordo com as diretrizes abaixo, a presença de quaisquer dos itens a seguir
inviabiliza a publicação do recurso em nossa rede.
- </Typography>
- <p><strong>No seu recurso está presente algum destes itens abaixo?</strong></p>
+ </Typography>
+ <p><strong>No seu recurso está presente algum destes itens abaixo?</strong></p>
- <StyledFormControl component="fieldset" style={{display:"BlockRuby"}} margin='dense' fullWidth={true}>
- <Grid container>
+ <StyledFormControl component="fieldset" style={{ display: "BlockRuby" }} margin='dense' fullWidth={true}>
+ <Grid container>
{
questionsArr.map((question, index) =>
- (question.status === 'active' && question.id !== 4) &&
- <React.Fragment key={question.id}>
- <Grid item xs={10}>
- <p>{question.description}</p>
- </Grid>
- <Grid item xs={2}>
- <RadioGroup row name={"radio" + (question.id)} onChange={props.handleRadios}>
- <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
- </RadioGroup>
- </Grid>
- </React.Fragment>
-
- )
+ (question.status === 'active' && question.id !== 4) &&
+ <React.Fragment key={question.id}>
+ <Grid item xs={10}>
+ <p>{question.description}</p>
+ </Grid>
+ <Grid item xs={2}>
+ <RadioGroup row name={"radio" + (question.id)} onChange={props.handleRadios}>
+ <FormControlLabel value="Sim" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Sim</span>} /> <FormControlLabel value="Não" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Não</span>} />
+ </RadioGroup>
+ </Grid>
+ </React.Fragment>
+
+ )
}
</Grid>
- </StyledFormControl>
- </div>
- </CardContent>
+ </StyledFormControl>
+ </div>
+ </div>
)
}
diff --git a/src/Components/ResourcePageComponents/CommentForm.js b/src/Components/ResourcePageComponents/CommentForm.js
index 0272d76fc6f63b264b9197d390818729caa46cc1..d25d8d080113f93b188b9a63f24090aa9d0eb44d 100644
--- a/src/Components/ResourcePageComponents/CommentForm.js
+++ b/src/Components/ResourcePageComponents/CommentForm.js
@@ -1,65 +1,86 @@
-import React, { useState } from 'react'
-import styled from 'styled-components'
-import Rating from '@material-ui/lab/Rating';
-import StarIcon from '@material-ui/icons/Star';
+import React, { useState } from "react";
+import styled from "styled-components";
+import Rating from "@material-ui/lab/Rating";
+import StarIcon from "@material-ui/icons/Star";
import TextField from "@material-ui/core/TextField";
-import { Button } from '@material-ui/core';
-import EditIcon from '@material-ui/icons/Edit';
-import Grid from '@material-ui/core/Grid';
-import { postRequest } from '../HelperFunctions/getAxiosConfig'
+import { Button } from "@material-ui/core";
+import EditIcon from "@material-ui/icons/Edit";
+import Grid from "@material-ui/core/Grid";
+import { postRequest } from "../HelperFunctions/getAxiosConfig";
+import { makeStyles } from "@material-ui/styles";
+
+const useStyles = makeStyles((theme) => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%",
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%",
+ },
+}));
export default function CommentForm(props) {
+ const classes = useStyles();
+
const [rating, setRating] = useState({
error: true,
- value: 0
- })
+ value: 0,
+ });
const [comment, setComment] = useState({
error: false,
- value: ''
- })
+ value: "",
+ });
const handleChange = (e) => {
- const userInput = e.target.value
- const flag = (userInput.length === 0 ? true : false);
- setComment({ ...comment, error: flag, value: userInput })
- }
+ const userInput = e.target.value;
+ const flag = userInput.length === 0 ? true : false;
+ setComment({ ...comment, error: flag, value: userInput });
+ };
- const [attemptedSubmit, setAttempt] = useState(false)
+ const [attemptedSubmit, setAttempt] = useState(false);
function handleSuccess(data) {
- props.handleSnackbar(1)
- props.rerenderCallback()
+ props.handleSnackbar(1);
+ props.rerenderCallback();
}
const handleSubmit = (e) => {
- e.preventDefault()
- const finalRating = rating
- const finalComment = comment
+ e.preventDefault();
+ const finalRating = rating;
+ const finalComment = comment;
if (!(finalRating.error || finalComment.error)) {
- let type = props.recurso ? 'learning_objects' : 'collections'
- const url = `/${type}/${props.recursoId}/reviews`
+ let type = props.recurso ? "learning_objects" : "collections";
+ const url = `/${type}/${props.recursoId}/reviews`;
let payload = {
- "review": {
- "description": finalComment.value,
- "review_ratings_attributes": [
+ review: {
+ description: finalComment.value,
+ review_ratings_attributes: [
{
- "rating_id": 1,
- "value": finalRating.value
- }
- ]
- }
- }
+ rating_id: 1,
+ value: finalRating.value,
+ },
+ ],
+ },
+ };
- postRequest(url, payload, handleSuccess, (error) => { console.log(error) })
- }
- else {
- setAttempt(true)
+ postRequest(url, payload, handleSuccess, (error) => {
+ console.log(error);
+ });
+ } else {
+ setAttempt(true);
}
- }
+ };
return (
- <StyledForm onSubmit={handleSubmit}>
+ <StyledForm onSubmit={handleSubmit} contrast={props.contrast}>
<label htmlFor="avaliacao-estrelas" className="start-label">
{props.recurso ? "Este recurso foi útil?*" : "Esta coleção foi útil?*"}
</label>
@@ -68,96 +89,185 @@ export default function CommentForm(props) {
name="avaliacao-estrelas"
value={rating.value}
precision={0.5}
- style={{ color: "#ff9226" }}
- onChange={(e, newValue) => { setRating({ ...rating, error: newValue === null ? true : false, value: newValue }) }}
- emptyIcon={<StarIcon fontSize="inherit" style={{ color: "#666" }} />}
- getLabelText={(value) => { return (value + ' Estrela' + (value !== 1 ? 's' : '')) }}
+ style={
+ props.contrast === "" ? { color: "#ff9226" } : { color: "yellow" }
+ }
+ onChange={(e, newValue) => {
+ setRating({
+ ...rating,
+ error: newValue === null ? true : false,
+ value: newValue,
+ });
+ }}
+ emptyIcon={
+ <StarIcon
+ fontSize="inherit"
+ style={
+ props.contrast === "" ? { color: "#666" } : { color: "white" }
+ }
+ />
+ }
+ getLabelText={(value) => {
+ return value + " Estrela" + (value !== 1 ? "s" : "");
+ }}
/>
</div>
- <div className="star-alert" style={attemptedSubmit ? { visibility: "visible" } : { visibility: "hidden" }}>{props.recurso ? "Avalie se o recurso foi útil." : "Avalie se esta coleção foi útil."}</div>
+ <div
+ className="star-alert"
+ style={
+ attemptedSubmit ? { visibility: "visible" } : { visibility: "hidden" }
+ }
+ >
+ {props.recurso
+ ? "Avalie se o recurso foi útil."
+ : "Avalie se esta coleção foi útil."}
+ </div>
<Grid container>
<Grid item xs={12} md={9}>
<StyledTextField
+ contrast={props.contrast}
colecao={!props.recurso}
value={comment.value}
+ InputProps={
+ props.contrast === ""
+ ? { className: classes.lightTextField }
+ : { className: classes.darkTextField }
+ }
multiline
rows="5"
+ variant="outlined"
error={comment.error}
label="Relate sua experiência"
- onChange={e => handleChange(e)}
+ onChange={(e) => handleChange(e)}
required={true}
- help={comment.error ? (props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção") : ''}
+ help={
+ comment.error
+ ? props.recurso
+ ? "Escreva aqui a sua experiência com este Recurso"
+ : "Escreva aqui a sua experiência com esta Coleção"
+ : ""
+ }
/>
</Grid>
<Grid item xs={12} md={3}>
- <div style={{ height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
- {
- props.recurso ?
- (
- <OrangeButton type="submit">Publicar</OrangeButton>
- )
- :
- (
- <PurpleButton type="submit"><EditIcon />Enviar</PurpleButton>
- )
- }
+ <div
+ style={{
+ height: "100%",
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "flex-end",
+ }}
+ >
+ {props.recurso ? (
+ <OrangeButton contrast={props.contrast} type="submit">
+ Publicar
+ </OrangeButton>
+ ) : (
+ <PurpleButton contrast={props.contrast} type="submit">
+ <EditIcon style={props.contrast === "" ? { marginRight: "0.3em" } : { color: "white", marginRight: "0.3em" }} />
+ Enviar
+ </PurpleButton>
+ )}
</div>
</Grid>
<div className="campos-obrigatorios">* Campos obrigatórios.</div>
- </Grid >
+ </Grid>
</StyledForm>
- )
+ );
}
const PurpleButton = styled(Button)`
- background-color : #673ab7 !important;
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
- font-weight : 600 !important;
- color : #fff !important;
- .icon {
- vertical-align : middle !important;
- font-weight : normal !important;
- font-style : normal !important;
- font-size : 24px !important;
- line-height : 1 !important;
- letter-spacing : normal !important;
- text-transform : none !important;
- display : inline-block !important;
- white-space : nowrap !important;
- word-wrap : normal !important;
- direction : ltr !important;
- padding-right : 2px;
- }
-`
+ color: ${(props) =>
+ props.contrast === ""
+ ? "rgba(255,255,255,0.87) !important"
+ : "yellow !important"};
+ text-decoration: ${(props) =>
+ props.contrast === "" ? "none !important" : "underline !important"};
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
+ font-weight: 600 !important;
+ background-color: ${(props) =>
+ props.contrast === "" ? "#673ab7 !important" : "black !important"};
+ border: ${(props) =>
+ props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ :hover {
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ .icon {
+ vertical-align: middle !important;
+ font-weight: normal !important;
+ font-style: normal !important;
+ font-size: 24px !important;
+ line-height: 1 !important;
+ letter-spacing: normal !important;
+ text-transform: none !important;
+ display: inline-block !important;
+ white-space: nowrap !important;
+ word-wrap: normal !important;
+ direction: ltr !important;
+ padding-right: 2px;
+ }
+`;
const OrangeButton = styled(Button)`
- color : rgba(255,255,255,0.87) !important;
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
- font-weight : 600 !important;
- background-color : #ff7f00 !important;
-`
+ color: ${(props) =>
+ props.contrast === ""
+ ? "rgba(255,255,255,0.87) !important"
+ : "yellow !important"};
+ text-decoration: ${(props) =>
+ props.contrast === "" ? "none !important" : "underline !important"};
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
+ font-weight: 600 !important;
+ background-color: ${(props) =>
+ props.contrast === "" ? "#ff7f00 !important" : "black !important"};
+ border: ${(props) =>
+ props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ :hover {
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+`;
const StyledTextField = styled(TextField)`
- .MuiInputBase-root {
- margin-bottom : 5px;
- }
+ .MuiInputBase-root {
+ margin-bottom: 5px;
+ }
- label.Mui-focused {
- color : ${props => props.colecao ? "#673ab7" : "rgb(255,127,0)"}
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${(props) =>
+ props.contrast === ""
+ ? props.colecao
+ ? "#673ab7"
+ : "rgb(255,127,0)"
+ : "yellow"};
}
-
- .MuiInput-underline::after {
- border-bottom: ${props => props.colecao ? "2px solid #673ab7" : "2px solid rgb(255,127,0)"};
+ fieldset {
+ border-color: ${(props) => (props.contrast === "" ? "#666" : "white")};
}
+ }
- label.Mui-focused.Mui-error {
- color : red;
- }
+ label {
+ color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+ }
+
+ label.Mui-focused {
+ color: ${(props) =>
+ props.contrast === ""
+ ? props.colecao
+ ? "#673ab7"
+ : "rgb(255,127,0)"
+ : "yellow"};
+ }
- width: 95%;
-`
+ label.Mui-focused.Mui-error {
+ color: red;
+ }
+
+ width: 95%;
+`;
const StyledForm = styled.form`
display : flex;
@@ -169,7 +279,7 @@ const StyledForm = styled.form`
max-width : 100%;
display : inline-block;
margin-bottom : 0;
- color : #a5a5a5;
+ color : ${(props) => (props.contrast === "" ? "#666" : "white")}
font-weight : 400;
}
@@ -194,4 +304,4 @@ const StyledForm = styled.form`
font-size : 12px;
color :#a5a5a5;
}
-`
+`;
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
index 128f1914d21a864694add5f06a3168956c560d5b..f6d38cf4f59de812a3bf65041cc2f558514823f9 100644
--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -146,7 +146,7 @@ export default function CommentsArea(props) {
(state.currentUser.id !== '') ?
(
<Grid item xs={12} >
- <GrayContainer>
+ <GrayContainer contrast={state.contrast}>
<h3>Conte sua experiência com o Recurso</h3>
<Grid container style={{ paddingTop: "20px" }} spacing={1}>
<Grid item xs={12} sm={2} style={{ paddingLeft: "15px", paddingRight: "15px" }}>
@@ -156,6 +156,7 @@ export default function CommentsArea(props) {
</Grid>
<Grid item xs={12} sm={10}>
<CommentForm
+ contrast={state.contrast}
recursoId={props.recursoId}
handleSnackbar={props.handleSnackbar}
rerenderCallback={forceUpdate}
@@ -169,10 +170,10 @@ export default function CommentsArea(props) {
:
(
<Grid item xs={12}>
- <LogInToComment>
+ <LogInToComment contrast={state.contrast}>
<span className="span-laranja">Você precisa entrar para comentar</span>
- <Button onClick={() => handleLogin(true)} style={{ textTransform: "uppercase", color: "#666", fontWeight: "700" }}>
- <ExitToAppIcon />ENTRAR
+ <Button onClick={() => handleLogin(true)} style={state.contrast === "" ? { textTransform: "uppercase", color: "#666", fontWeight: "700" } : { textTransform: "uppercase", color: "yellow", fontWeight: "700", textDecoration: "underline" }}>
+ <ExitToAppIcon style={state.contrast === "" ? { color: "inherit" } : { color: "white" }} />ENTRAR
</Button>
</LogInToComment>
</Grid>
@@ -180,18 +181,19 @@ export default function CommentsArea(props) {
}
{
isLoading ?
- <LoadingDiv>
+ <LoadingDiv contrast={state.contrast}>
<CircularProgress className="loading" />
</LoadingDiv>
:
totalReviews !== 0 ?
(
- <ComentariosBox>
+ <ComentariosBox contrast={state.contrast}>
<h3>{totalReviews} {totalReviews !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
{
comentarios.map(comentario =>
<div className="comentario-template" key={comentario.id}>
<Comment
+ contrast={state.contrast}
isCollection={false}
authorID={comentario.user ? comentario.user.id : null}
authorAvatar={comentario.user ? comentario.user.avatar : null}
@@ -213,7 +215,7 @@ export default function CommentsArea(props) {
}
<div className="load-more">
<IconButton className="button" onClick={handleLoadMoreReviews}>
- <KeyboardArrowDownIcon />
+ <KeyboardArrowDownIcon className="icon" />
</IconButton>
</div>
</ComentariosBox>
@@ -221,12 +223,12 @@ export default function CommentsArea(props) {
:
(
<Grid item xs={12}>
- <LogInToComment>
+ <LogInToComment contrast={state.contrast}>
<img alt="" src={Comentarios} />
<span className="span-laranja">Compartilhe sua experiência com a Rede!</span>
- <AoRelatar>
+ <AoRelatar contrast={state.contrast}>
Ao relatar sua experiência de uso do Recurso você estará auxiliando professores de todo país.
- </AoRelatar>
+ </AoRelatar>
</LogInToComment>
</Grid>
)
@@ -244,7 +246,7 @@ const LoadingDiv = styled.div`
align-items: center;
.loading{
align-self: center;
- color: #ff7f00;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
size: 24px;
}
`
@@ -259,7 +261,7 @@ const ComentariosBox = styled.div`
font-family: 'Roboto Light','Roboto Regular',Roboto;
font-weight: 300;
font-style: normal;
- color:#666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size: 1.857em;
margin: 15px 2%;
text-align : flex-start;
@@ -272,6 +274,7 @@ const ComentariosBox = styled.div`
}
.load-more{
+ margin-top : 10px;
width: 100%;
display: flex;
flex-direction: row;
@@ -280,8 +283,16 @@ const ComentariosBox = styled.div`
}
.button{
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ }
}
+
+ .icon{
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ }
`
const AoRelatar = styled.div`
width : 70%;
@@ -289,6 +300,7 @@ const AoRelatar = styled.div`
font-weight : 300;
text-align : center;
padding-bottom : 20px;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const LogInToComment = styled.div`
@@ -302,7 +314,7 @@ const LogInToComment = styled.div`
font-size : 24px;
font-weight : 700;
padding-bottom : 5px;
- color : #ff7f00;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
}
img {
@@ -312,7 +324,7 @@ const LogInToComment = styled.div`
`
const GrayContainer = styled.div`
- background-color : #fafafa;
+ background-color: ${props => props.contrast === "" ? "#fafafa" : "black"};
font-weight : 400;
font-size : 14px;
padding-bottom : 20px;
@@ -329,7 +341,7 @@ const GrayContainer = styled.div`
text-align: center;
font-weight: 300;
font-style: normal;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size: 1.857em;
margin-bottom : 10px;
margin-left : 2%;
diff --git a/src/Components/SearchBar.js b/src/Components/SearchBar.js
index be81cfa490acb38f26f6783ef394c0caad6b31c1..adc31726ba6eb71b1add5a632d8fd937dbee9977 100644
--- a/src/Components/SearchBar.js
+++ b/src/Components/SearchBar.js
@@ -40,6 +40,23 @@ const dividerStyled = {
margin: '0 20px'
}
+const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%"
+ }
+}));
+
const DividerVertical = () => <em style={dividerStyled}></em>
const ButtonStyled = styled(Button)`
diff --git a/src/Components/TermsPageContent.js b/src/Components/TermsPageContent.js
index 918e040b626542c98ed6ecd83c739ac7d199ec0b..a71a66b915a70fc0bdaea36918381ba780b95d97 100644
--- a/src/Components/TermsPageContent.js
+++ b/src/Components/TermsPageContent.js
@@ -2,168 +2,168 @@ import React from 'react';
import Typography from '@material-ui/core/Typography';
import CardContent from '@material-ui/core/CardContent';
-export default function TermsPageContent () {
+export default function TermsPageContent({ contrast }) {
return (
- <CardContent style={{textAlign: "start", marginBottom: "10px", lineHeight:"21px", color:"rgb(102, 102, 102)", padding:"65px"}}>
- <Typography variant="h4" style={{textAlign:"center", color:"rgb(102, 102, 102)"}}> Antes de Prosseguir, é importante que você leia os <strong>Termos de Uso</strong></Typography>
- <div classname="texto-termos">
- <div classname="title">
- <Typography variant = "h3" style={{textAlign:"center", fontSize:"23px", marginTop:"20px", marginBottom:"10px"}}>
+ <div style={contrast === "" ? { textAlign: "start", lineHeight: "21px", color: "rgb(102, 102, 102)", padding: "65px" } : { textAlign: "start", lineHeight: "21px", color: "white", padding: "65px", backgroundColor: "black" }}>
+ <Typography variant="h4" style={contrast === "" ? { textAlign: "center", color: "rgb(102, 102, 102)" } : { textAlign: "center", color: "white" }}> Antes de Prosseguir, é importante que você leia os <strong>Termos de Uso</strong></Typography>
+ <div>
+ <div>
+ <Typography variant="h3" style={{ textAlign: "center", fontSize: "23px", marginTop: "20px", marginBottom: "10px" }}>
<strong>TERMOS DE USO </strong>
</Typography>
- <Typography variant="body2" style={{fontSize:"15px",textAlign:"center", color:"rgb(102, 102, 102)"}}>Início da vigência: agosto de 2017</Typography>
+ <Typography variant="body2" style={contrast === "" ? { textAlign: "center", color: "rgb(102, 102, 102)" } : { textAlign: "center", color: "white" }}>Início da vigência: agosto de 2017</Typography>
</div>
<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>
+ 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>
+ 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 Plataforma Integrada de
- RED do MEC implica aceite das condições aqui elencadas.</p>
+ RED do MEC 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>
+ 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>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 1.Características da <strong>Plataforma Integrada de RED do MEC</strong>
+ 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>
+ <Typography variant="h4" style={contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 1.Características da <strong>Plataforma Integrada de RED do MEC</strong>
</Typography>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> é um é sítio (website) em formato de plataforma interativa colaborativa para propiciar a formação de uma
- rede de pessoas interessadas em usar, criar e compartilhar recursos e materiais educacionais. Seu objetivo é reunir e disponibilizar conteúdos do
- acervo do MEC, antes distribuídos em diferentes portais (Portal do Professor, Banco Internacional de Objetos Educacionais, Domínio Público e TV Escola),
- conteúdo de organizações parceiras, bem como fomentar espaços de participação, criação e compartilhamento de conhecimento entre usuários para temas
- relacionados à educação básica brasileira.</p>
+ rede de pessoas interessadas em usar, criar e compartilhar recursos e materiais educacionais. Seu objetivo é reunir e disponibilizar conteúdos do
+ acervo do MEC, antes distribuídos em diferentes portais (Portal do Professor, Banco Internacional de Objetos Educacionais, Domínio Público e TV Escola),
+ conteúdo de organizações parceiras, bem como fomentar espaços de participação, criação e compartilhamento de conhecimento entre usuários para temas
+ relacionados à educação básica brasileira.</p>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> foi criada em software livre, cujas informações para desenvolvedores estão disponíveis em gitlab.c3sl.ufpr.br/portalmec/portalmec.
- A <strong>Plataforma Integrada de RED do MEC</strong> funciona ao mesmo tempo como repositório e referatório:</p>
+ A <strong>Plataforma Integrada de RED do MEC</strong> funciona ao mesmo tempo como repositório e referatório:</p>
<ul>
- <li style={{listStyleType:"disc"}}>Repositório: sítio na web que armazena conteúdos diversos (texto, áudio, vídeo, multimídia, etc.). Ou seja, um repositório efetivamente guarda uma cópia do recurso
- educacional. Todos os conteúdos depositados na <strong>Plataforma Integrada de RED do MEC</strong> têm uma licença livre e são considerados Recursos Educacionais Abertos.
- (Veja a seção 4 “Licença de uso do conteúdo”).
+ <li style={{ listStyleType: "disc" }}>Repositório: sítio na web que armazena conteúdos diversos (texto, áudio, vídeo, multimídia, etc.). Ou seja, um repositório efetivamente guarda uma cópia do recurso
+ educacional. Todos os conteúdos depositados na <strong>Plataforma Integrada de RED do MEC</strong> têm uma licença livre e são considerados Recursos Educacionais Abertos.
+ (Veja a seção 4 “Licença de uso do conteúdo”).
</li>
- <li style={{listStyleType:"disc"}}>Referatório: sítio na web que indica ou aponta para conteúdos diversos em sites externos, sem armazená-los.
- Nesse caso, o conteúdo não está armazenado na <strong>Plataforma Integrada de RED do MEC</strong>, que somente indica a localização do recurso através de um link.
- Os conteúdos referenciados podem ser fechados ou abertos. (Veja a seção 4, “Licença de uso do conteúdo”).
+ <li style={{ listStyleType: "disc" }}>Referatório: sítio na web que indica ou aponta para conteúdos diversos em sites externos, sem armazená-los.
+ Nesse caso, o conteúdo não está armazenado na <strong>Plataforma Integrada de RED do MEC</strong>, que somente indica a localização do recurso através de um link.
+ Os conteúdos referenciados podem ser fechados ou abertos. (Veja a seção 4, “Licença de uso do conteúdo”).
</li>
</ul>
<p>No que se refere ao Repositório, a <strong>Plataforma Integrada de RED do MEC</strong> disponibiliza recursos educacionais digitais e materiais de formação de seu acervo e
- também permite que usuários (pessoas físicas) depositem (publiquem, façam upload) seus recursos e materiais para serem armazenados, desde que façam seu cadastro,
- disponibilizem as informações necessárias no momento da publicação e respeitem as regras estabelecidas neste Termo.</p>
+ também permite que usuários (pessoas físicas) depositem (publiquem, façam upload) seus recursos e materiais para serem armazenados, desde que façam seu cadastro,
+ disponibilizem as informações necessárias no momento da publicação e respeitem as regras estabelecidas neste Termo.</p>
<p>Os usuários terão acesso a uma variedade de recursos on-line. Para além, mediante cadastro, terão a sua disposição um maior número de funcionalidades, incluindo
- ferramentas de comunicação e interação, mecanismos de consulta, poderão fazer upload e download de recursos educacionais digitais. Poderão utilizar serviços relacionados
- à criação, à consulta e ao acompanhamento de coleções de recursos educacionais digitais de outros usuários, dentre outras funcionalidades. Professores cadastrados e
- identificados poderão ainda fazer upload de RED.</p>
+ ferramentas de comunicação e interação, mecanismos de consulta, poderão fazer upload e download de recursos educacionais digitais. Poderão utilizar serviços relacionados
+ à criação, à consulta e ao acompanhamento de coleções de recursos educacionais digitais de outros usuários, dentre outras funcionalidades. Professores cadastrados e
+ identificados poderão ainda fazer upload de RED.</p>
<p>No que se refere ao Referatório, a <strong>Plataforma Integrada de RED do MEC</strong> indica e organiza links externos para recursos e materiais de terceiros. Os recursos serão
- disponibilizados mediante a adesão aos critérios específicos levantados pelo MEC. Para mais informações, utilize a página de Contato da plataforma.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 2. Cadastro e segurança
+ disponibilizados mediante a adesão aos critérios específicos levantados pelo MEC. Para mais informações, utilize a página de Contato da plataforma.</p>
+ <Typography variant="h4" style={contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 2. Cadastro e segurança
</Typography>
<p>A realização de cadastro pode ser exigida como condição para a utilização de determinados ambientes, recursos ou ferramentas.
- O cadastramento de um usuário só será finalizado ao serem preenchidos todos os campos indicados como obrigatórios. Para o registro de sua conta,
- o usuário deverá indicar uma senha e uma identificação, tornando-se responsável por mantê-las em sigilo, assumindo a total responsabilidade pelas atividades
- que se realizam por meio dela. O usuário compromete-se igualmente em sair ("deslogar") de sua conta ao final de cada sessão.</p>
+ O cadastramento de um usuário só será finalizado ao serem preenchidos todos os campos indicados como obrigatórios. Para o registro de sua conta,
+ o usuário deverá indicar uma senha e uma identificação, tornando-se responsável por mantê-las em sigilo, assumindo a total responsabilidade pelas atividades
+ que se realizam por meio dela. O usuário compromete-se igualmente em sair ("deslogar") de sua conta ao final de cada sessão.</p>
<p>Além das informações básicas, aos professores que quiserem ter a sua identidade verificada - o que o permitirá depositar recursos na plataforma (fazer upload) -
- será necessário identificar a escola da rede em que atua. A mesma informação será verificada a partir dos dados do Censo Escolar.</p>
+ será necessário identificar a escola da rede em que atua. A mesma informação será verificada a partir dos dados do Censo Escolar.</p>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza pelas informações inseridas por seus usuários. Os usuários garantem e respondem,
- em qualquer caso, pela veracidade, exatidão e autenticidade dos dados pessoais cadastrados. A <strong>Plataforma Integrada de RED do MEC</strong> se reserva o direito de conferir a
- identificação de seus usuários, bem como de solicitar dados adicionais e documentos que julgue pertinentes, a fim de verificar os dados pessoais informados caso julgue necessário.</p>
+ em qualquer caso, pela veracidade, exatidão e autenticidade dos dados pessoais cadastrados. A <strong>Plataforma Integrada de RED do MEC</strong> se reserva o direito de conferir a
+ identificação de seus usuários, bem como de solicitar dados adicionais e documentos que julgue pertinentes, a fim de verificar os dados pessoais informados caso julgue necessário.</p>
<p>Para acessar sua conta, o usuário deverá identificar-se por meio de e-mail e senha. O usuário compromete-se a não informar a terceiros sua senha, responsabilizando-se integral e
- exclusivamente pelo uso que dela seja feito e pelas operações efetuadas em sua conta.</p>
+ exclusivamente pelo uso que dela seja feito e pelas operações efetuadas em sua conta.</p>
<p>O usuário compromete-se a notificar a <strong>Plataforma Integrada de RED do MEC</strong>, por meio da funcionalidade “Contato”, sobre qualquer uso não autorizado de sua conta, assim como sobre o seu
- acesso por terceiros não autorizados.</p>
+ acesso por terceiros não autorizados.</p>
<p>Contas de usuários com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser desativadas, removidas ou
- ter seu conteúdo bloqueado por decisão do Ministério da Educação. O usuário será notificado através do seu e-mail de cadastro.</p>
+ ter seu conteúdo bloqueado por decisão do Ministério da Educação. O usuário será notificado através do seu e-mail de cadastro.</p>
<p>A criação de conta ou a disponibilização de conteúdo na <strong>Plataforma Integrada de RED do MEC</strong> não geram nenhum direito de suporte técnico ou de indenização por dificuldades
- técnicas ou falhas nos sistemas. O cancelamento, a suspensão, a perda de dados armazenados, a indisponibilidade ou outra situação adversa que afete o acesso, os dados ou o conteúdo do usuário não ensejarão qualquer tipo de reparação, compensação ou outra obrigação.</p>
+ técnicas ou falhas nos sistemas. O cancelamento, a suspensão, a perda de dados armazenados, a indisponibilidade ou outra situação adversa que afete o acesso, os dados ou o conteúdo do usuário não ensejarão qualquer tipo de reparação, compensação ou outra obrigação.</p>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza por qualquer dano, prejuízo ou perda no equipamento do usuário causado por falhas no sistema, no servidor ou na
- internet decorrentes de condutas de terceiros, de vírus por acesso, da utilização ou navegação na internet ou da transferência de dados.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 3. Publicações de usuários
- </Typography>
+ internet decorrentes de condutas de terceiros, de vírus por acesso, da utilização ou navegação na internet ou da transferência de dados.</p>
+ <Typography variant="h4" style={contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 3. Publicações de usuários
+ </Typography>
<p>O conteúdo disponibilizado pelo usuário é de inteira responsabilidade do usuário, não sendo a <strong>Plataforma Integrada de RED do MEC</strong> responsável por quaisquer fatos decorrentes de sua utilização.</p>
<p>Os recursos publicados devem ter cunho educacional, mantendo-se dentro do assunto em que estão inseridos, em conformidade com estes Termos de Uso.</p>
<p>Todas as informações publicadas na <strong>Plataforma Integrada de RED do MEC</strong>, como os metadados (descritivos dos recursos), comentários e discussões inseridas são consideradas públicas, visíveis por qualquer pessoa, sem nenhum tipo de confidencialidade. Não serão aceitos materiais que contenham vocabulário ofensivo ou desrespeitoso a terceiros, incluindo ofensas, calúnias, injúrias e difamações. Também não serão permitidos materiais que invadam a privacidade de terceiros, que sejam ameaçadoras, preconceituosas ou racistas.</p>
<p>Caso o usuário entenda que alguma postagem, material, notícia, comentário ou outro conteúdo disponibilizado na <strong>Plataforma Integrada de RED do MEC</strong> violem algum direito seu, a legislação aplicável ou as cláusulas deste Termos de Uso, deverá notificar a <strong>Plataforma Integrada de RED do MEC</strong> por meio da funcionalidade “Reportar” ou, quando não houver, através do formulário de Contato.</p>
<p>O spam (mensagens não solicitadas) ou o abuso em comentários poderão ser ativamente prevenidos através do bloqueio de palavras e expressões predeterminadas, ou excluídos posteriormente, sendo cabível a remoção da conta do usuário, no caso de tentativas de violação sistemática e repetitiva destes Termos de Uso, incluindo a reintrodução de material que já tenha sido previamente bloqueado ou excluído.</p>
<p>Conteúdos com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser removidos por decisão do Ministério da Educação e o usuário será notificado através do seu e-mail de cadastro.</p>
- <Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 3.1 É permitido ao usuário:
+ <Typography variant="h5" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 3.1 É permitido ao usuário:
</Typography>
<ul>
- <li style={{listStyleType:"disc"}}>Depositar (publicar) recurso ou material de sua autoria ou de autoria coletiva, com anuência dos demais autores, que esteja em domínio público, ou para o qual há anuência dos autores originais, desde que os dados sejam corretamente preenchidos nos campos descritivos (metadados) indicados para preenchimento das informações sobre os recursos;</li>
- <li style={{listStyleType:"disc"}}>Nos comentários, contatos e comunicações, é fundamental ser cortês e tratar os demais usuários com respeito;</li>
- <li style={{listStyleType:"disc"}}>O usuário poderá sugerir links para outros sites, desde que tenham relação direta com o assunto abordado.</li>
+ <li style={{ listStyleType: "disc" }}>Depositar (publicar) recurso ou material de sua autoria ou de autoria coletiva, com anuência dos demais autores, que esteja em domínio público, ou para o qual há anuência dos autores originais, desde que os dados sejam corretamente preenchidos nos campos descritivos (metadados) indicados para preenchimento das informações sobre os recursos;</li>
+ <li style={{ listStyleType: "disc" }}>Nos comentários, contatos e comunicações, é fundamental ser cortês e tratar os demais usuários com respeito;</li>
+ <li style={{ listStyleType: "disc" }}>O usuário poderá sugerir links para outros sites, desde que tenham relação direta com o assunto abordado.</li>
</ul>
- <Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 3.2 É vedado ao usuário:
+ <Typography variant="h5" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 3.2 É vedado ao usuário:
</Typography>
<ul>
- <li style={{listStyleType:"disc"}}>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o Estatuto da Criança e do Adolescente), que invada a privacidade de terceiros, que tenha cunho comercial, viole os Direitos Humanos ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário às cláusulas destes Termos de Uso;</li>
- <li style={{listStyleType:"disc"}}>Assumir a identidade de outra pessoa, física ou jurídica; forjar cabeçalhos, ou de qualquer outra forma manipular identificadores, a fim de disfarçar a origem de qualquer material contido na plataforma, com sentido de desmoralizar, desprestigiar ou se fazer passar pela <strong>Plataforma Integrada de RED do MEC</strong>;</li>
- <li style={{listStyleType:"disc"}}>Disponibilizar conteúdo em desconformidade com a legislação de Direito Autoral, incluindo conteúdo que viole marca registrada, patente, segredo de negócio, direito autoral ou qualquer outro direito de terceiro; disponibilizar conteúdo com qualquer tipo de propaganda, material promocional, spam (mensagens não solicitadas), correntes ou esquemas de pirâmide;</li>
- <li style={{listStyleType:"disc"}}>Disponibilizar conteúdo que contenha vírus ou qualquer outro código, arquivo ou programa de computador, com o propósito de interromper, destruir ou limitar a funcionalidade de qualquer software, hardware ou equipamento de telecomunicações;</li>
- <li style={{listStyleType:"disc"}}>Interferir ou interromper os serviços, as redes ou os servidores conectados à plataforma de modo a dificultar a utilização e o aproveitamento dos serviços por outros usuários, bem como obter ou tentar obter acesso não autorizado à plataforma;</li>
- <li style={{listStyleType:"disc"}}>Pedir votos, mencionar número de candidato ou expressar qualquer outra manifestação que se caracterize como propaganda política ou que viole as normas eleitorais.</li>
+ <li style={{ listStyleType: "disc" }}>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o Estatuto da Criança e do Adolescente), que invada a privacidade de terceiros, que tenha cunho comercial, viole os Direitos Humanos ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário às cláusulas destes Termos de Uso;</li>
+ <li style={{ listStyleType: "disc" }}>Assumir a identidade de outra pessoa, física ou jurídica; forjar cabeçalhos, ou de qualquer outra forma manipular identificadores, a fim de disfarçar a origem de qualquer material contido na plataforma, com sentido de desmoralizar, desprestigiar ou se fazer passar pela <strong>Plataforma Integrada de RED do MEC</strong>;</li>
+ <li style={{ listStyleType: "disc" }}>Disponibilizar conteúdo em desconformidade com a legislação de Direito Autoral, incluindo conteúdo que viole marca registrada, patente, segredo de negócio, direito autoral ou qualquer outro direito de terceiro; disponibilizar conteúdo com qualquer tipo de propaganda, material promocional, spam (mensagens não solicitadas), correntes ou esquemas de pirâmide;</li>
+ <li style={{ listStyleType: "disc" }}>Disponibilizar conteúdo que contenha vírus ou qualquer outro código, arquivo ou programa de computador, com o propósito de interromper, destruir ou limitar a funcionalidade de qualquer software, hardware ou equipamento de telecomunicações;</li>
+ <li style={{ listStyleType: "disc" }}>Interferir ou interromper os serviços, as redes ou os servidores conectados à plataforma de modo a dificultar a utilização e o aproveitamento dos serviços por outros usuários, bem como obter ou tentar obter acesso não autorizado à plataforma;</li>
+ <li style={{ listStyleType: "disc" }}>Pedir votos, mencionar número de candidato ou expressar qualquer outra manifestação que se caracterize como propaganda política ou que viole as normas eleitorais.</li>
</ul>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 4. Licença de uso do conteúdo
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 4. Licença de uso do conteúdo
</Typography>
<p>A <strong>Plataforma Integrada de RED do MEC</strong>, entendida como obra intelectual em seu conjunto, é de titularidade do Ministério da Educação. Sua disponibilização ocorrerá de acordo com os termos da Licença Pública Creative Commons do tipo CC BY-SA, exceto nos casos em que for indicado de outra forma.</p>
<p>A licença CC BY SA é uma licença aberta e permite que seja feita cópia, redistribuição, adaptação e criação de obras derivadas, inclusive uso comercial, desde que o autor seja referenciado e que a licença da obra derivada seja também CC BY SA, garantindo o constante caráter aberto das produções.</p>
<p>Aplica-se aos códigos de software desenvolvidos pela <strong>Plataforma Integrada de RED do MEC</strong> a Licença Pública Geral Affero GNU GPL (veja a tradução livre aqui), que visa garantir a liberdade de compartilhar e de modificar softwares livres.</p>
<p>O usuário que utilizar a <strong>Plataforma Integrada de RED do MEC</strong> como repositório, ou seja, para armazenamento de conteúdo, garante que detém todos os direitos e autorizações para a publicação do conteúdo e deverá escolher uma das licenças Creative Commons elencadas no formulário no momento de cadastro do material. As licenças Creative Commons relacionadas abaixo serão aceitas na <strong>Plataforma Integrada de RED do MEC</strong>, pois garantem o devido crédito pela criação original do usuário e permitem as seguintes ações de uso:</p>
<ul>
- <li style={{listStyleType:"disc"}}>CC-BY: esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original.</li>
- <li style={{listStyleType:"disc"}}>CC-BY-SA: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos</li>
- <li style={{listStyleType:"disc"}}>CC-BY-NC: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos.</li>
- <li style={{listStyleType:"disc"}}>CC-BY-NC-SA: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</li>
+ <li style={{ listStyleType: "disc" }}>CC-BY: esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original.</li>
+ <li style={{ listStyleType: "disc" }}>CC-BY-SA: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos</li>
+ <li style={{ listStyleType: "disc" }}>CC-BY-NC: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos.</li>
+ <li style={{ listStyleType: "disc" }}>CC-BY-NC-SA: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</li>
</ul>
<p>Cabe ao Usuário verificar a compatibilidade da licença do material obtido na <strong>Plataforma Integrada de RED do MEC</strong> para utilizar em outras produções. Para consultar a compatibilidade das licenças Creative Commons, há uma ferramenta disponível no site Iniciativa Educação Aberta</p>
<p>O usuário da <strong>Plataforma Integrada de RED do MEC</strong> responde por todo o conteúdo publicado por meio de seu perfil, inclusive no que diz respeito à violação dos direitos autorais relacionados a tais postagens. Ao inserir um conteúdo de sua autoria para armazenamento, o usuário concorda e autoriza o licenciamento ao escolher uma das licenças abertas descritas no formulário de publicação, de forma a permitir não só o seu reconhecimento pleno de autoria, como também a possibilidade de replicação, reedição e reformulação de suas postagens por terceiros, com o objetivo de possibilitar o compartilhamento e a reutilização de conteúdo educacional.</p>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá disponibilizar endereços eletrônicos de outros sítios externos, por meio de links, o que não significa que estes sejam de sua propriedade ou por ele operados. A presença de links para outros sites não implica relação de sociedade ou de supervisão da <strong>Plataforma Integrada de RED do MEC</strong> com esses sites e seus conteúdos. Os campos descritivos de cada recurso conterão informações específicas sobre as licenças dos mesmos. Cabe ao usuário verificar a licença de cada recurso.</p>
<p>É vedado o uso não autorizado da obra ou seu uso em desconformidade com a legislação autoral e com os termos da licença mencionada.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 5. Práticas de uso e armazenamento
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 5. Práticas de uso e armazenamento
</Typography>
<p>A depender da capacidade de espaço no servidor, a <strong>Plataforma Integrada de RED do MEC</strong> poderá retirar conteúdos armazenados na plataforma, observados os critérios de antiguidade e do tamanho dos arquivos disponibilizados, mediante notificação e justificativa ao usuário.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 6. Privacidade da informação
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 6. Privacidade da informação
</Typography>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> tomará todas as medidas possíveis para manter a confidencialidade e a segurança de suas informações. No entanto, a <strong>Plataforma Integrada de RED do MEC</strong> não responderá por prejuízos que possam ser derivados da violação dessas medidas por parte de terceiros que subvertam os sistemas de segurança para acessar as informações de Usuários. A <strong>Plataforma Integrada de RED do MEC</strong> solicitará alguns dados pessoais para seu cadastro. Além disso, dados sobre a interação dos usuários e seu comportamento na plataforma são coletados de maneira automática. Esses dados nunca serão vendidos, alugados, trocados ou fornecidos para fins comerciais. No entanto, o MEC poderá colaborar com instituições públicas parceiras, como universidades, para análise desses dados bem como de qualquer conteúdo da plataforma para para fins de pesquisa, divulgação e melhoria dos serviços. Dados pessoais que possam identificá-lo nunca serão compartilhados. Dados que não identificam o usuário serão armazenados indefinidamente para fins de pesquisa.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 7. Violação no sistema ou na base de dados
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 7. Violação no sistema ou na base de dados
</Typography>
<p>O responsável por qualquer intromissão, ou tentativa de intromissão, na <strong>Plataforma Integrada de RED do MEC</strong> ou por atividade que viole ou contrarie as disposições legais aplicáveis ou as cláusulas destes Termos de Uso estará sujeito à aplicação das sanções previstas neste instrumento, das ações legais pertinentes e de indenizações por eventuais danos causados.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>8. Sanções</Typography>
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>8. Sanções</Typography>
<p>Sem prejuízo de outras medidas, a <strong>Plataforma Integrada de RED do MEC</strong> poderá advertir, bloquear, desativar ou remover, temporária ou definitivamente, a conta e conteúdos disponibilizados por um usuário, em qualquer momento, e iniciar as ações legais cabíveis caso:</p>
<ul>
- <li style={{listStyleType:"disc"}}>o usuário não cumprir qualquer dispositivo destes Termos de Uso;</li>
- <li style={{listStyleType:"disc"}}>o usuário praticar atos fraudulentos ou dolosos;</li>
- <li style={{listStyleType:"disc"}}>o MEC entender que as postagens, o conteúdo disponibilizado ou qualquer atitude do usuário tenham causado algum dano a terceiros ou à própria Plataforma, ou tenham a potencialidade de assim o fazer.</li>
+ <li style={{ listStyleType: "disc" }}>o usuário não cumprir qualquer dispositivo destes Termos de Uso;</li>
+ <li style={{ listStyleType: "disc" }}>o usuário praticar atos fraudulentos ou dolosos;</li>
+ <li style={{ listStyleType: "disc" }}>o MEC entender que as postagens, o conteúdo disponibilizado ou qualquer atitude do usuário tenham causado algum dano a terceiros ou à própria Plataforma, ou tenham a potencialidade de assim o fazer.</li>
</ul>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>9. Limitação de responsabilidade</Typography>
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>9. Limitação de responsabilidade</Typography>
<p>Em nenhuma situação a <strong>Plataforma Integrada de RED do MEC</strong> e o Ministério da Educação serão responsáveis por quaisquer danos, prejuízos ou outro efeito, direto ou indireto, relacionados ao uso, por parte de seus usuários, leitores ou de qualquer outra pessoa, deste sítio, de seu conteúdo ou de qualquer outro website mencionado.</p>
<p>O usuário reconhece que será integralmente responsável pelos materiais enviados à <strong>Plataforma Integrada de RED do MEC</strong> e se compromete a responder por quaisquer reivindicações, demandas, penalidades e todos os danos, perdas e despesas, causados à <strong>Plataforma Integrada de RED do MEC</strong>.</p>
<p>Todo autor de conteúdo exibido na <strong>Plataforma Integrada de RED do MEC</strong> retém os seus direitos e responsabilidades autorais, nos termos da Lei n. 9.610/1998, sem prejuízo dos termos de licenciamento de livre uso, conforme exposto nestes Termos de Uso, no item “Licença de uso do conteúdo”.</p>
<p>Se o usuário verificar que qualquer comentário ou participação na <strong>Plataforma Integrada de RED do MEC</strong> infringem um direito de sua titularidade ou de um terceiro, deverá entrar em contato imediatamente na forma indicada neste mesmo documento, no item “Como reportar violações”.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 10. Inexistência de vínculo
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 10. Inexistência de vínculo
</Typography>
<p>A adesão a estes Termos de Uso pelo usuário não gera nenhum contrato, mandato, franquia ou vínculo de tipo trabalhista, societário, de parceria ou associativo entre a <strong>Plataforma Integrada de RED do MEC</strong> e o usuário.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>11. Como reportar violações</Typography>
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>11. Como reportar violações</Typography>
<p>Nem todo o conteúdo disponibilizado pelo usuário nas áreas de comentário e debates é lido pela administração da <strong>Plataforma Integrada de RED do MEC</strong>.</p>
<p>Se algum artigo, notícia, comentário ou outro conteúdo da <strong>Plataforma Integrada de RED do MEC</strong> violar qualquer direito do usuário, de terceiros ou a legislação aplicável, o usuário poderá usar a funcionalidade "Reportar" nas páginas que houver essa opção ou, quando não houver, entrar em contato com a administração da <strong>Plataforma Integrada de RED do MEC</strong> pelo formulário de “Contato”, mencionando de forma específica e detalhada a violação.</p>
<p>De posse das informações, a <strong>Plataforma Integrada de RED do MEC</strong> poderá analisar e resolver a questão tão breve quanto possível. Caso a informação esteja incompleta, ou com detalhamento insuficiente, a <strong>Plataforma Integrada de RED do MEC</strong> poderá entrar em contato para solicitar a complementação, possivelmente atrasando a providência desejada.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 12. Modificações nos Termos de Uso
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 12. Modificações nos Termos de Uso
</Typography>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá alterar, a qualquer tempo, estes Termos de Uso, mediante declaração pública no site, visando seu aprimoramento e melhoria dos serviços prestados. Os novos Termos de Uso entrarão em vigor a partir de sua publicação na plataforma. Usuários cadastrados receberão notificação dessa alteração no e-mail de cadastro e haverá divulgação/chamada na página principal do Sistema. No prazo de 72 (setenta e duas) horas,
- contadas a partir da publicação das modificações, o usuário poderá comunicar-se com a <strong>Plataforma Integrada de RED do MEC</strong>, caso não concorde com os novos Termos de Uso. Nesse caso, a conta do usuário será desativada. Não havendo manifestações no prazo estipulado, entender-se-á que o Usuário aceitou tacitamente os novos Termos de Uso.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 13. Foro
+ contadas a partir da publicação das modificações, o usuário poderá comunicar-se com a <strong>Plataforma Integrada de RED do MEC</strong>, caso não concorde com os novos Termos de Uso. Nesse caso, a conta do usuário será desativada. Não havendo manifestações no prazo estipulado, entender-se-á que o Usuário aceitou tacitamente os novos Termos de Uso.</p>
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 13. Foro
</Typography>
<p>Para dirimir dúvidas ou litígios referentes à interpretação e ao cumprimento destes Termos de Uso, as partes se submeterão ao Foro da Justiça Federal, Seção Judiciária do Distrito Federal.</p>
</div>
- </CardContent>
+ </div >
)
}
diff --git a/src/Components/TopicFooter.js b/src/Components/TopicFooter.js
index c6ce8ea42ddf97ec278bc6cd63e779b4cd28ec5e..d6e33341361a023add43ada4b4ff4319ba598a63 100644
--- a/src/Components/TopicFooter.js
+++ b/src/Components/TopicFooter.js
@@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';
export default function TopicFooter(props) {
return (
- <Container>
+ <Container contrast={props.contrast}>
<Wrapper>
<Grid
container
@@ -30,7 +30,8 @@ export default function TopicFooter(props) {
const Container=styled.div`
margin-top: 15px;
- background-color: #e81f4f;
+ background: ${props => props.contrast === "" ? "#e81f4f" : "black"};
+ border-top: ${props => props.contrast === "" ? "0" : "1px solid white"};
height: auto;
padding: 0;
`
diff --git a/src/Components/TopicList.js b/src/Components/TopicList.js
index e965adad1b530fbf96d090fa028b1fc83ebad01a..f9980c22ea78873912090381275664dc95d8c366 100644
--- a/src/Components/TopicList.js
+++ b/src/Components/TopicList.js
@@ -15,7 +15,7 @@ export default function TopicList(props) {
return (
<Wrapper>
- <Title>Módulos</Title>
+ <Title contrast={props.contrast}>Módulos</Title>
<Grid
container
spacing={3}
@@ -25,7 +25,7 @@ export default function TopicList(props) {
{props.topicos.slice(0, (expanded ? -1 : 5)).map((t, index) => {
return (
<Grid item key={index} md={3}>
- <TopicCard topic={t} colecao_id={props.colecao_id} />
+ <TopicCard contrast={props.contrast} topic={t} colecao_id={props.colecao_id} />
</Grid>
);
})
@@ -38,12 +38,12 @@ export default function TopicList(props) {
alignItems="center"
>
<Grid item>
- <Fab size="medium" color="secondary" aria-label="edit" onClick={handleFabClick}>
+ <Fab size="medium" color="secondary" aria-label="edit" onClick={handleFabClick} style={props.contrast === "" ? { marginTop: "1em" } : { backgroundColor: "black", border: "1px solid white", marginTop: "1em" }}>
{expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</Fab>
</Grid>
<Grid item>
- <FabText>
+ <FabText contrast={props.contrast}>
{expanded ? "VER MENOS" : "VER TODOS OS MÓDULOS"}
</FabText>
</Grid>
@@ -55,14 +55,14 @@ export default function TopicList(props) {
}
const FabText = styled.span`
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-weight: 900;
line-height: 2em;
`
const Title = styled.h1`
font-weight: 100;
margin-left: 30px;
- color: rgb(102, 102, 102);
+ color: ${props => props.contrast === "" ? "rgb(102, 102, 102)" : "white"};
`
const Wrapper = styled.div`
margin-right : auto;
diff --git a/src/Components/UploadPageComponents/ChooseLinkSection.js b/src/Components/UploadPageComponents/ChooseLinkSection.js
index 52a14ae21b18fb4c190effa4ba4d9ecfaca6d1f0..44f89db05f8fc457a5c429cf55541ef689217d83 100644
--- a/src/Components/UploadPageComponents/ChooseLinkSection.js
+++ b/src/Components/UploadPageComponents/ChooseLinkSection.js
@@ -16,81 +16,108 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useState} from 'react'
+import React, { useState } from 'react'
import UndoIcon from '@material-ui/icons/Undo';
-import {WrapperBox, StyledTextField, BlueButton, GrayButton} from './StyledComponents.js'
+import { WrapperBox, StyledTextField, BlueButton, GrayButton } from './StyledComponents.js'
+import { makeStyles } from "@material-ui/styles";
-export default function ChooseLink (props) {
- const [linkSent, setLinkSent] = useState(false)
- const [link, setLink] = useState({flag : false, value : ""})
- const handleLink = (e) => {
- let userInput = e.target.value
- const urlRegex = new RegExp(
- // eslint-disable-next-line
- "(?:(?:(?:https?|ftp):\/\/))(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})*(?:[/?#]\S*)?", "i"
- )
- let flag = !(urlRegex.test(userInput))
- setLink({...link,
- flag : flag,
- value : userInput}
- )
+const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%"
+ }
+}));
+
+export default function ChooseLink(props) {
+ const classes = useStyles();
+ const [linkSent, setLinkSent] = useState(false)
+ const [link, setLink] = useState({ flag: false, value: "" })
+ const handleLink = (e) => {
+ let userInput = e.target.value
+ const urlRegex = new RegExp(
+ // eslint-disable-next-line
+ "(?:(?:(?:https?|ftp):\/\/))(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})*(?:[/?#]\S*)?", "i"
+ )
+ let flag = !(urlRegex.test(userInput))
+ setLink({
+ ...link,
+ flag: flag,
+ value: userInput
}
+ )
+ }
- const handleSubmit = (e) => {
- e.preventDefault()
- console.log(link.flag)
- if (!link.flag) {
- props.submit(link.value)
- setLinkSent(true)
- }
+ const handleSubmit = (e) => {
+ e.preventDefault()
+ console.log(link.flag)
+ if (!link.flag) {
+ props.submit(link.value)
+ setLinkSent(true)
}
+ }
- return (
- <WrapperBox>
- <div className="inner">
- <div className="upload-title"> Enviar Link</div>
+ return (
+ <WrapperBox contrast={props.contrast}>
+ <div className="inner">
+ <div className="upload-title"> Enviar Link</div>
- <div className="flex-column">
- <p>Insira o link da página do recurso abaixo:</p>
- <form onSubmit={(e) => {handleSubmit(e)}}>
- <StyledTextField
- id = {"choose-link-form"}
- label={"Exemplo: http://google.com"}
- type = {"text"}
- value = {link.value}
- onChange = {e => {handleLink(e)}}
- helperText = {link.flag ? "Faltou inserir um endereço eletrônico" : ""}
- multiline={true}
- rowsMax = {"10"}
- rows={1}
- error = {link.flag}
- required = {true}
- disabled={linkSent}
- />
+ <div className="flex-column">
+ <p>Insira o link da página do recurso abaixo:</p>
+ {
+ !linkSent ?
+ <form onSubmit={(e) => { handleSubmit(e) }}>
+ <StyledTextField
+ contrast={props.contrast}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ id={"choose-link-form"}
+ label={"Exemplo: http://google.com"}
+ type={"text"}
+ variant="outlined"
+ value={link.value}
+ onChange={e => { handleLink(e) }}
+ helperText={link.flag ? "Faltou inserir um endereço eletrônico" : ""}
+ multiline={true}
+ rowsMax={"10"}
+ rows={1}
+ error={link.flag}
+ required={true}
+ />
- <div className="buttons-div">
- {
- linkSent ?
- (
- <BlueButton onClick={() => {setLinkSent(false)}}>Editar</BlueButton>
- )
- :
- (
- <>
- <GrayButton onClick={() => {props.handleNextStage("default")}}>
- <span className="button-text">
- <UndoIcon className="icon"/>Voltar
- </span>
- </GrayButton>
- <BlueButton type="submit">SALVAR</BlueButton>
- </>
- )
- }
- </div>
- </form>
+ <div className="buttons-div">
+ <>
+ <GrayButton contrast={props.contrast} onClick={() => { props.handleNextStage("default") }}>
+ <span className="button-text">
+ <UndoIcon className="icon" />Voltar
+ </span>
+ </GrayButton>
+ <BlueButton contrast={props.contrast} type="submit">SALVAR</BlueButton>
+ </>
</div>
- </div>
- </WrapperBox>
- )
+ </form>
+ :
+ <>
+ <p>
+ O link salvado foi: <a style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }} href={link.value}>{link.value}</a>
+ </p>
+ <div className="buttons-div">
+ <BlueButton contrast={props.contrast} onClick={() => { setLinkSent(false) }}>Editar</BlueButton>
+ </div>
+ </>
+
+ }
+ </div>
+ </div>
+ </WrapperBox >
+ )
}
diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js
index c1f9d40f55c2e4aafba0c44282ed441077853bf0..e197df897522f83790d7c64bcd2927054137c027 100644
--- a/src/Components/UploadPageComponents/Stepper.js
+++ b/src/Components/UploadPageComponents/Stepper.js
@@ -33,18 +33,18 @@ const useColorlibStepIconStyles = makeStyles({
width: 36,
height: 36,
display: 'flex',
- border : 'solid 3px #00bcd4',
+ border: 'solid 3px #00bcd4',
borderRadius: '50%',
justifyContent: 'center',
alignItems: 'center',
},
active: {
- backgroundColor : '#00bcd4',
- color : '#fff',
+ backgroundColor: '#00bcd4',
+ color: '#fff',
},
completed: {
- backgroundColor : '#00bcd4',
- color : '#fff',
+ backgroundColor: '#00bcd4',
+ color: '#fff',
},
});
@@ -119,56 +119,30 @@ export default function CustomizedSteppers(props) {
// const classes = useStyles();
const steps = getSteps();
-// {/* const handleNext = () => {
-// setActiveStep((prevActiveStep) => prevActiveStep + 1);
-// };
+ // {/* const handleNext = () => {
+ // setActiveStep((prevActiveStep) => prevActiveStep + 1);
+ // };
-// const handleBack = () => {
-// setActiveStep((prevActiveStep) => prevActiveStep - 1);
-// };
+ // const handleBack = () => {
+ // setActiveStep((prevActiveStep) => prevActiveStep - 1);
+ // };
-// const handleReset = () => {
-// setActiveStep(0);
-// };*/}
+ // const handleReset = () => {
+ // setActiveStep(0);
+ // };*/}
return (
- <>
- <StyledStepper style={{backgroundColor : "#e5e5e5", borderRadius : "50px", justifyContent : "space-between"}} activeStep={props.activeStep} connector={<></>}>
+ <>
+ <StyledStepper style={props.contrast === "" ? { backgroundColor: "#e5e5e5", borderRadius: "50px", justifyContent: "space-between" } : { backgroundColor: "black", border: "1px solid white", borderRadius: "50px", justifyContent: "space-between" }} activeStep={props.activeStep} connector={<></>}>
{steps.map((label) => (
<Step key={label}>
- <StepLabel StepIconComponent={ColorlibStepIcon}/>
+ <StepLabel StepIconComponent={ColorlibStepIcon} />
</Step>
))}
</StyledStepper>
- {/*<div>
- {activeStep === steps.length ? (
- <div>
- <Button onClick={handleReset} className={classes.button}>
- Reset
- </Button>
- </div>
- ) : (
- <div>
- <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>
- <div>
- <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
- Back
- </Button>
- <Button
- variant="contained"
- color="primary"
- onClick={handleNext}
- className={classes.button}
- >
- {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
- </Button>
- </div>
- </div>
- )}
- </div>*/}
</>
- );
+ );
}
const StyledStepper = styled(Stepper)`
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index 3c157e6f38eceec0f2376bcba6a8328fb6b64abe..2caa077ee007db22b38f891588d7ddca07dd3da6 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -35,18 +35,18 @@ export const StyledFormHelperText = styled(FormHelperText)`
export const DottedBox = styled.div`
align-self : center;
/* width : ${props => props.thumbnail ? "100%" : "320px"}; */
- background-color : ${props => props.thumbnail ? "transparent" : "#f4f4f4"};
- border : ${props => props.thumbnail ? "2px dashed #a5a5a5" : "2px dashed #00bcd4"};
+ background-color : ${props => props.contrast === "" ? props.thumbnail ? "transparent" : "#f4f4f4" : "black"};
+ border : ${props => props.contrast === "" ? props.thumbnail ? "2px dashed #a5a5a5" : "2px dashed #00bcd4" : "2px dashed white"};
align-items : center;
border-radius : 10px;
display : flex;
flex-direction : column;
padding : 20px 0;
- color : ${props => props.thumbnail ? "#a5a5a5" : "$666"};
+ color : ${props => props.contrast === "" ? props.thumbnail ? "#a5a5a5" : "$666" : "white"};
.icon {
font-size : 40px !important;
- color : #00bcd4 !important;
+ color : ${props => props.contrast === "" ? "#00bcd4 !important" : "white !important"};
margin-bottom : 10px !important;
vertical-align : middle !important;
font-weight : normal !important;
@@ -64,32 +64,29 @@ export const DottedBox = styled.div`
export const BlueButton = styled(Button)`
&:hover {
- background-color : #00acc1 !important;
+ background-color: ${props => props.contrast === "" ? "#00acc1 !important" : "rgba(255,255,0,0.24) !important"};
}
- color : #fff !important;
- background-color : #00bcd4 !important;
- height : 36px !important;
+ color : ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ background-color : ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ border : ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
font-weight : 600 !important;
- min-width : 88px !important;
- align-self : center !important;
- padding : 16px !important;
`
export const GrayButton = styled(Button)`
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
}
- height : 36px !important;
+ color : ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ background-color : ${props => props.contrast === "" ? "transparent !important" : "black !important"};
+ border : ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
font-weight : 600 !important;
- color : #666 !important;
- background-color: transparent;
- min-width : 88px !important;
- height : 36px !important;
- margin-left : 8px !important;
- margin-right : 8px !important;
+
.icon {
vertical-align : middle !important;
+ color : ${props => props.contrast === "" ? "#666 !important" : "white !important"};
font-weight : normal !important;
font-style : normal !important;
font-size : 24px !important;
@@ -124,12 +121,14 @@ export const WrapperBox = styled.div`
display : block;
border-radius : 3px;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- background-color : #fff;
font-size : 14px;
+ background: ${props => props.contrast === "" ? " #fff" : "black"};
+ border: ${props => props.contrast === "" ? " " : "1px solid white"};
.inner {
display : block;
padding : 20px;
+ background: ${props => props.contrast === "" ? " #fff" : "black"};
}
.upload-title {
@@ -137,6 +136,7 @@ export const WrapperBox = styled.div`
font-size : 26px;
margin-bottom : 10px;
font-weight : lighter;
+ color: ${props => props.contrast === "" ? "" : "white"};
}
.flex-column {
@@ -150,6 +150,7 @@ export const WrapperBox = styled.div`
p {
margin : 0 0 10px;
+ color: ${props => props.contrast === "" ? "" : "white"};
}
.buttons-div {
@@ -182,7 +183,7 @@ export const WrapperBox = styled.div`
overflow : hidden;
text-align : center;
font-size : 14px;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
padding : 0 5px;
}
}
@@ -231,7 +232,7 @@ export const WrapperBox = styled.div`
.file-status {
.icon-margin {
- color : #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "white"};
margin-right : 5px;
}
.MuiLinearProgress-root {
@@ -251,17 +252,20 @@ export const WrapperBox = styled.div`
margin-top: 40px;
border-top: solid 1px #f4f4f4;
text-align: center;
+ color: ${props => props.contrast === "" ? "" : "white"};
span {
font-size : 16px;
font-weight : lighter;
+ color: ${props => props.contrast === "" ? "" : "white"};
}
}
}
`
export const InfoBox = styled.div`
- background-color : #fff;
+ background: ${props => props.contrast === "" ? " #fff" : "black"};
+ border: ${props => props.contrast === "" ? " " : "1px solid white"};
padding : 30px;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom : 30px;
@@ -365,76 +369,71 @@ export const StyledFormLabel = styled(FormLabel)`
export const StyledTextField = styled(TextField)`
font-size : 14px;
width : 100% !important;
- full-width : 100% !important;
- .MuiFormControl-root {
- margin : 18px 0 !important;
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
}
-
- .MuiFormHelperText-root {
- text-align : left;
- font-size : 14px !important ;
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
label.Mui-focused {
- color : #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
color : red;
}
-
- .MuiInput-underline::after {
- border-bottom: 2px solid #00bcd4;
- }
- .MuiFormHelperText-root {
- font-size : 12px !important;
- text-align : right !important;
- }
`
- const useStyles = makeStyles({
- root: {
- '&:hover': {
- backgroundColor: 'transparent',
- },
- }})
-
- export function StyledRadio (props) {
- const classes = useStyles();
- return (
- <Radio
- className={classes.root}
- disableRipple
- checkedIcon = {
- <ObjTypeBox checked>
- <span>
- {GetIconByName(props.label)}
- <p>{props.label}</p>
- </span>
- </ObjTypeBox>
- }
- icon = {
- <ObjTypeBox>
- <span>
- {GetIconByName(props.label)}
- <p>{props.label}</p>
- </span>
- </ObjTypeBox>
- }
- {...props}
- />
- )
- }
-
- export const StyledDiv = styled.div`
+const useStyles = makeStyles({
+ root: {
+ '&:hover': {
+ backgroundColor: 'transparent',
+ },
+ }
+})
+
+export function StyledRadio(props) {
+ const classes = useStyles();
+ return (
+ <Radio
+ className={classes.root}
+ disableRipple
+ checkedIcon={
+ <ObjTypeBox checked>
+ <span>
+ {GetIconByName(props.label)}
+ <p>{props.label}</p>
+ </span>
+ </ObjTypeBox>
+ }
+ icon={
+ <ObjTypeBox>
+ <span>
+ {GetIconByName(props.label)}
+ <p>{props.label}</p>
+ </span>
+ </ObjTypeBox>
+ }
+ {...props}
+ />
+ )
+}
+
+export const StyledDiv = styled.div`
display : flex;
margin-top : 30px;
justify-content : space-evenly;
`
- export const OrangeButton = styled(Button)`
+export const OrangeButton = styled(Button)`
max-height : 36px !important;
color : rgba(255,255,255,0.87) !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
@@ -444,7 +443,7 @@ export const StyledTextField = styled(TextField)`
margin-right : 8px !important;
`
- export const GreyButton = styled(Button)`
+export const GreyButton = styled(Button)`
&:hover {
background-color : rgba(158,158,158,0.2) !important;
}
@@ -471,24 +470,28 @@ export const StyledTextField = styled(TextField)`
}
`
- export const Background = styled.div `
+export const Background = styled.div`
padding-top : 40px;
- background-color : #f4f4f4;
- color : #666;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+
.container {
- padding : 0;
- margin-right : auto;
- margin-left : auto;
-
- @media screen and (min-width: 768px) {
- width : 750px;
- }
- @media screen and (min-width: 992px) {
- width : 970px;
- }
- @media screen and (min-width: 1200px) {
- width : 1170px;
- }
- }
+ padding : 0;
+ margin-right : auto;
+ margin-left : auto;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+
+
+ @media screen and (min-width: 768px) {
+ width : 750px;
+ }
+ @media screen and (min-width: 992px) {
+ width : 970px;
+ }
+ @media screen and (min-width: 1200px) {
+ width : 1170px;
+ }
+ }
`
diff --git a/src/Components/UploadPageComponents/UploadFileWrapper.js b/src/Components/UploadPageComponents/UploadFileWrapper.js
index b8919a54a0de3a1872de7c5258d32fdecfedc656..d922219fc484bd9d628a138f986ab0179d782743 100644
--- a/src/Components/UploadPageComponents/UploadFileWrapper.js
+++ b/src/Components/UploadPageComponents/UploadFileWrapper.js
@@ -16,21 +16,21 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useState} from 'react'
+import React, { useState } from 'react'
import LinkIcon from '../../img/link_icon.svg'
import ChooseLink from './ChooseLinkSection.js'
-import {WrapperBox, BlueButton, GrayButton} from './StyledComponents.js';
-import {DottedBox} from './StyledComponents.js';
-import {getAxiosConfigFromJSON, updateHeaders, deleteRequest, putRequest} from '../HelperFunctions/getAxiosConfig.js'
+import { WrapperBox, BlueButton, GrayButton } from './StyledComponents.js';
+import { DottedBox } from './StyledComponents.js';
+import { getAxiosConfigFromJSON, updateHeaders, deleteRequest, putRequest } from '../HelperFunctions/getAxiosConfig.js'
import AttachFileIcon from '@material-ui/icons/AttachFile';
import axios from 'axios'
-import {apiUrl} from '../../env';
+import { apiUrl } from '../../env';
import DoneIcon from '@material-ui/icons/Done';
import DeleteIcon from '@material-ui/icons/Delete';
import Alert from '../Alert.js';
import Snackbar from '@material-ui/core/Snackbar';
-export default function UploadFileWrapper (props) {
+export default function UploadFileWrapper(props) {
/*-----------------------------------------------------------------
- Wrapper for file upload box
- has three different stages:
@@ -41,10 +41,11 @@ export default function UploadFileWrapper (props) {
- Props used:
- submit : called when the user clicks "ENVIAR" inside ChooseLinkSection; renders the alert snackbar to let them know the link was submitted
- */
+ - contrast : used to display contrast colors or not
+ */
const [stage, setStage] = useState(props.prevFile ? "fileSelected" : "default")
- const handleNextStage = (newStage) => {setStage(newStage)}
+ const handleNextStage = (newStage) => { setStage(newStage) }
// eslint-disable-next-line
const [fileToUpload, setFileToUpload] = useState(null);
@@ -55,15 +56,15 @@ export default function UploadFileWrapper (props) {
const [uploadProgress, setProgress] = useState(0)
const [attachmentID, setAttachmentID] = useState(props.prevFile ? props.prevFile.id : null)
- async function onFileChange (file) {
- if(!file) return;
+ async function onFileChange(file) {
+ if (!file) return;
let newFile = file
console.log(newFile)
setFileToUpload(newFile);
setFileName(newFile.name)
- let total = Math.ceil(newFile.size/chunkSize)
+ let total = Math.ceil(newFile.size / chunkSize)
let currentChunkStartByte = 0;
let currentChunkFinalByte = chunkSize > newFile.size ? newFile.size : chunkSize;
let chunkIdentifier = props.draftID + '-' + newFile.name;
@@ -88,7 +89,7 @@ export default function UploadFileWrapper (props) {
if (response.headers['access-token']) {
updateHeaders(response.headers)
}
- setProgress(Math.round((currentChunkFinalByte/newFile.size) * 100))
+ setProgress(Math.round((currentChunkFinalByte / newFile.size) * 100))
remainingBytes = newFile.size - currentChunkFinalByte;
if (currentChunkFinalByte === newFile.size) {
setFileDoneUploading(true)
@@ -114,7 +115,7 @@ export default function UploadFileWrapper (props) {
if (attachmentID != null) {
const url = `/learning_objects/${props.draftID}/attachment/${attachmentID}`
- deleteRequest(url, (data) => {handleNextStage("default")}, (error) => {console.log(error)})
+ deleteRequest(url, (data) => { handleNextStage("default") }, (error) => { console.log(error) })
}
}
@@ -145,25 +146,25 @@ export default function UploadFileWrapper (props) {
const url = `/learning_objects/${props.draftID}`
let payload = {
- "learning_object" : {
- "id" : props.draftID,
- "link" : link
+ "learning_object": {
+ "id": props.draftID,
+ "link": link
}
}
- putRequest(url, payload, (data) => {toggleSnackbar(true)}, (error) => {console.log(error)})
+ putRequest(url, payload, (data) => { toggleSnackbar(true) }, (error) => { console.log(error) })
}
switch (stage) {
case "error":
- return(
- <WrapperBox>
+ return (
+ <WrapperBox contrast={props.contrast}>
<div className="inner">
<div className="upload-title">Erro</div>
- <span>Clique no botão para tentar novamente.</span>
+ <span>Clique no botão para tentar novamente.</span>
<div className="flex-column">
<div className="buttons-div">
- <GrayButton onClick={() => {handleNextStage("default")}}>
+ <GrayButton contrast={props.contrast} onClick={() => { handleNextStage("default") }}>
<span className="button-text">
Voltar
</span>
@@ -174,8 +175,8 @@ export default function UploadFileWrapper (props) {
</WrapperBox>
)
case "fileSelected":
- return(
- <WrapperBox>
+ return (
+ <WrapperBox contrast={props.contrast}>
<div className="inner">
<div className="upload-title">
{fileDoneUploading ? 'O arquivo foi carregado' : 'Carregando arquivo'}
@@ -186,33 +187,33 @@ export default function UploadFileWrapper (props) {
<div className="item-info">
{
fileDoneUploading ?
- (
- <React.Fragment>
- <div className="file-status">
- <DoneIcon className="icon icon-margin"/> {fileName}
+ (
+ <React.Fragment>
+ <div className="file-status">
+ <DoneIcon contrast={props.contrast} className="icon icon-margin" /> {fileName}
</div>
- <GrayButton onClick={() => {handleDelete()}}>
- Excluir <DeleteIcon className="icon icon-remove"/>
+ <GrayButton contrast={props.contrast} onClick={() => { handleDelete() }}>
+ Excluir <DeleteIcon className="icon icon-remove" />
</GrayButton>
- </React.Fragment>
- )
- :
- (
- <React.Fragment>
- <div className="file-status">
- {uploadProgress}% {fileName}
- </div>
- <GrayButton onClick={() => {handleCancel()}}>
- Cancelar <DeleteIcon className="icon icon-remove"/>
- </GrayButton>
- </React.Fragment>
- )
+ </React.Fragment>
+ )
+ :
+ (
+ <React.Fragment>
+ <div className="file-status">
+ {uploadProgress}% {fileName}
+ </div>
+ <GrayButton contrast={props.contrast} onClick={() => { handleCancel() }}>
+ Cancelar <DeleteIcon className="icon icon-remove" />
+ </GrayButton>
+ </React.Fragment>
+ )
}
</div>
</div>
<div className="warning">
<span>Não se esqueça de preencher as</span>
- <br/>
+ <br />
<span>informações sobre o recurso ao lado.</span>
</div>
</div>
@@ -222,19 +223,19 @@ export default function UploadFileWrapper (props) {
case "choosingLink":
return (
<React.Fragment>
- <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
- anchorOrigin = {{ vertical:'top', horizontal:'right' }}
- >
- <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
+ <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => { toggleSnackbar(false) }}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert severity="info" style={{ backgroundColor: "#00acc1" }}>
Link salvo com sucesso!
</Alert>
</Snackbar>
- <ChooseLink handleNextStage={handleNextStage} submit={handleChooseLink}/>
+ <ChooseLink contrast={props.contrast} handleNextStage={handleNextStage} submit={handleChooseLink} />
</React.Fragment>
)
default:
- return(
- <WrapperBox>
+ return (
+ <WrapperBox contrast={props.contrast}>
<div className="inner">
<div className="upload-title"> Enviar Recurso</div>
<div className="flex-column">
@@ -243,38 +244,39 @@ export default function UploadFileWrapper (props) {
<div className="upload-form">
<form id="file_upload">
<DottedBox
+ contrast={props.contrast}
onDrop={e => handleDrop(e)}
onDragOver={e => handleDragOver(e)}
- >
- <AttachFileIcon className="icon"/>
+ >
+ <AttachFileIcon className="icon" />
<input
type="file"
- onChange = {(e) => {onFileChange(e.target.files[0])}}
+ onChange={(e) => { onFileChange(e.target.files[0]) }}
id="upload-file"
- style={{display : "none"}}
- />
- <BlueButton>
- <label htmlFor="upload-file" style={{width : "inherit", cursor : "pointer"}}>
+ style={{ display: "none" }}
+ />
+ <BlueButton contrast={props.contrast}>
+ <label htmlFor="upload-file" style={{ width: "inherit", cursor: "pointer" }}>
ESCOLHER ARQUIVO
</label>
</BlueButton>
- <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
+ <span style={{ marginTop: "6px" }}>Ou arrastar e soltar o arquivo aqui</span>
</DottedBox>
</form>
</div>
</div>
<div className="strike-box">
- <div className="strike"/><h3>ou</h3><div className="strike"/>
+ <div className="strike" /><h3>ou</h3><div className="strike" />
</div>
<div className="enviar-link-texto">
- <img alt="" src={LinkIcon}/>
- <br/>
+ <img alt="" src={LinkIcon} />
+ <br />
<span>Enviar link de um recurso de outro site</span>
</div>
- <BlueButton onClick={ () => {handleNextStage("choosingLink")} }>ENVIAR LINK</BlueButton>
+ <BlueButton contrast={props.contrast} onClick={() => { handleNextStage("choosingLink") }}>ENVIAR LINK</BlueButton>
</div>
</div>
</WrapperBox>
diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js
index a894486a65a74b25f6a1560fc89c368f3ef04c83..80ea3277d35b946840264dd7d188300ed585d01d 100644
--- a/src/Pages/CollectionPage.js
+++ b/src/Pages/CollectionPage.js
@@ -66,20 +66,22 @@ export default function CollectionPage(props) {
<Link className="link" to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`}>
<Button
- variant='contained'
- className="back-button"
- >
- Voltar para a busca de coleções.
+ variant='contained'
+ className="back-button"
+ >
+ Voltar para a busca de coleções.
</Button>
</Link>
- </Grid>
+ </Grid>
</Grid>
</CollectionNotFound >
if (loading)
- return <LoadingSpinner text="Carregando coleção..." />
+ return <LoadingDiv contrast={state.contrast}>
+ <LoadingSpinner contrast={state.contrast} text="Carregando coleção..." />
+ </LoadingDiv>
else
return (
- <div style={state.contrast === "" ? {backgroundColor: "white"} : {backgroundColor: "black"}}>
+ <div style={state.contrast === "" ? { backgroundColor: "white" } : { backgroundColor: "black" }}>
<BreadCrumbsDiv>
<StyledBreadCrumbs contrast={state.contrast}>
<Link to="/">Página Inicial</Link>
@@ -89,7 +91,7 @@ export default function CollectionPage(props) {
<Grid container direction="row" justify="center" alignItems="center">
<Grid item md={3}>
<CollectionAuthor
- contrast={state.contrast}
+ contrast={state.contrast}
author_id={collection.owner.id ? collection.owner.id : 0}
name={collection.owner.name ? collection.owner.name : ""}
imgsrc={collection.owner.avatar ? apiDomain + collection.owner.avatar : noAvatar} />
@@ -98,7 +100,7 @@ export default function CollectionPage(props) {
<Grid item md={5}>
<CollectionDescription
- contrast={state.contrast}
+ contrast={state.contrast}
stars={collection.review_average}
likes={collection.likes_count}
liked={collection.liked}
@@ -109,48 +111,49 @@ export default function CollectionPage(props) {
<Grid item md={3}>
<DowloadButton
- contrast={state.contrast}
+ contrast={state.contrast}
id={collection_id}
/>
<div style={{ height: 12 }}></div>
<FollowCollectionButton
- contrast={state.contrast}
+ contrast={state.contrast}
followed={collection.followed}
user_id={state.currentUser.id}
collection_id={collection_id} />
</Grid>
</Grid>
- <Grid container justify="center" style={state.contrast === "" ? {backgroundColor: "#f4f4f4"} : {backgroundColor: "black"}}>
+ <Grid container justify="center" style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
{/* <Grid item xs={1}/> */}
<Grid item xs={10}>
- <ResourceList
- contrast={state.contrast}
- resources={
- collection.collection_items ?
- collection.collection_items.map(i => {
- return {
- type: i.collectionable.object_type,
- author: i.collectionable.author,
- title: i.collectionable.name,
- rating: i.collectionable.review_average,
- likeCount: i.collectionable.likes_count,
- liked: i.collectionable.liked,
- avatar: i.collectionable.publisher.avatar,
- thumbnail: i.collectionable.thumbnail,
- tags: i.collectionable.tags.map(t => t),
- id: i.collectionable.id,
- downloadableLink: i.collectionable.default_attachment_location,
- publisher: i.collectionable.publisher.name,
- published: i.collectionable.state
- }
- })
- : []
- } />
+ <ResourceList
+ contrast={state.contrast}
+ resources={
+ collection.collection_items ?
+ collection.collection_items.map(i => {
+ return {
+ type: i.collectionable.object_type,
+ author: i.collectionable.author,
+ title: i.collectionable.name,
+ rating: i.collectionable.review_average,
+ likeCount: i.collectionable.likes_count,
+ liked: i.collectionable.liked,
+ avatar: i.collectionable.publisher.avatar,
+ thumbnail: i.collectionable.thumbnail,
+ tags: i.collectionable.tags.map(t => t),
+ id: i.collectionable.id,
+ downloadableLink: i.collectionable.default_attachment_location,
+ publisher: i.collectionable.publisher.name,
+ published: i.collectionable.state
+ }
+ })
+ : []
+ } />
</Grid>
<Grid container item xs={12} style={{ marginTop: 40, paddingBottom: 40 }} ref={comment_ref}>
<CollectionCommentSection
+ contrast={state.contrast}
id={collection_id}
currentUserId={state.currentUser.id}
avatar={state.currentUser.avatar ? apiDomain + state.currentUser.avatar : noAvatar}
@@ -173,6 +176,11 @@ const StyledBreadCrumbs = styled(Breadcrumbs)`
}
`;
+const LoadingDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "" : "black"};
+
+`
+
const CollectionNotFound = styled.div`
background-color: ${props => props.contrast === "" ? "" : "black !important"};
color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
diff --git a/src/Pages/FormationMaterialPage.js b/src/Pages/FormationMaterialPage.js
index 797074618d38f7d3282a57a2ed8d5641ae06e512..8b03623f0a3c2852a51e294af03e8bd9a75fdf64 100644
--- a/src/Pages/FormationMaterialPage.js
+++ b/src/Pages/FormationMaterialPage.js
@@ -15,7 +15,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useRef } from 'react';
+import React, { useRef, useContext } from 'react';
import styled from 'styled-components';
import { Grid } from '@material-ui/core';
import FormationMaterialHeader from '../Components/FormationMaterialHeader.js';
@@ -24,11 +24,13 @@ import TopicList from '../Components/TopicList.js';
import TopicFooter from '../Components/TopicFooter.js';
import colecoes_obj from '../Components/FormationMaterialsResources/formationMaterials.js';
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
-import {Link} from "react-router-dom"
+import { Link } from "react-router-dom";
+import { Store } from '../Store';
export default function FormationMaterialPage(props) {
const colecao = props.location.pathname === "/colecao";
const colecoes = colecoes_obj();
+ const { state } = useContext(Store);
const colecao_id = Number(
colecao ?
@@ -61,9 +63,9 @@ export default function FormationMaterialPage(props) {
console.log(colecao_obj);
return (
- <Background>
+ <Background contrast={state.contrast}>
<BreadCrumbsDiv>
- <StyledBreadCrumbs>
+ <StyledBreadCrumbs contrast={state.contrast}>
<Link to="/">Página Inicial</Link>
<span>
{
@@ -72,7 +74,7 @@ export default function FormationMaterialPage(props) {
</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
- <MainContainer>
+ <MainContainer contrast={state.contrast}>
<Grid container
direction="row"
justify="flex-start"
@@ -80,6 +82,7 @@ export default function FormationMaterialPage(props) {
>
<Grid item xs={12}>
<FormationMaterialHeader
+ contrast={state.contrast}
colecao={colecao}
colecao_obj={colecao_obj}
topico_obj={topico_obj}
@@ -88,6 +91,7 @@ export default function FormationMaterialPage(props) {
</Grid>
<Grid item xs={12}>
<FormationMaterialDescription
+ contrast={state.contrast}
colecao={colecao}
colecao_obj={colecao_obj}
topico_obj={topico_obj}
@@ -97,6 +101,7 @@ export default function FormationMaterialPage(props) {
{
colecao ?
<TopicList
+ contrast={state.contrast}
topicos={colecao_obj.topics}
colecao_id={colecao_id}
/>
@@ -110,6 +115,7 @@ export default function FormationMaterialPage(props) {
<div></div>
:
<TopicFooter
+ contrast={state.contrast}
topic_name={colecao_obj.topic_name}
src={colecao_obj.img}
colecao_name={colecao_obj.name} />
@@ -119,12 +125,13 @@ export default function FormationMaterialPage(props) {
}
const Background = styled.div`
- background-color: #f4f4f4;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
`
const MainContainer = styled.div`
margin-left: auto;
margin-right: auto;
padding : 0;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
@media screen and (min-width: 768px) {
width : 750px;
@@ -141,11 +148,11 @@ const StyledBreadCrumbs = styled(Breadcrumbs)`
justify-content: flex-start;
max-width: 1170px;
span {
- color: #a5a5a5;
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
}
a {
- color: #00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
`
diff --git a/src/Pages/MaterialPage.js b/src/Pages/MaterialPage.js
index 9b243b8b8da922a631f9e774d6143a0fa09fa36b..4ec7369a89fea7e179737f57285df08ca54a397e 100644
--- a/src/Pages/MaterialPage.js
+++ b/src/Pages/MaterialPage.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
import { Col, Row, Container } from "react-grid-system";
import { Carousel } from "react-responsive-carousel";
import MaterialCard from "../Components/MaterialCard";
@@ -25,77 +25,84 @@ import ExpandedMaterial from "../Components/ExpandedMaterials";
import styled from "styled-components";
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import { Link } from "react-router-dom";
+import { Store } from '../Store';
const MateriaPage = () => {
- const materials = colecoes_obj();
+ const materials = colecoes_obj();
+ const { state } = useContext(Store);
+ const [currMaterial, setCurrMaterial] = useState({
+ open: false,
+ material: {},
+ });
- const [currMaterial, setCurrMaterial] = useState({
+ const HandleExpandMaterial = (id) => {
+ if (id !== currMaterial.material.id)
+ setCurrMaterial({
+ open: true,
+ material: { ...materials[id] },
+ });
+ else
+ setCurrMaterial({
open: false,
material: {},
- });
+ });
+ };
- const HandleExpandMaterial = (id) => {
- if (id !== currMaterial.material.id)
- setCurrMaterial({
- open: true,
- material: { ...materials[id] },
- });
- else
- setCurrMaterial({
- open: false,
- material: {},
- });
- };
-
- return (
- <>
- <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
- <BreadCrumbsDiv>
- <StyledBreadCrumbs>
- <Link to="/">Página Inicial</Link>
- <span>Materias de Formação</span>
- </StyledBreadCrumbs>
- </BreadCrumbsDiv>
- <StyledBox>
- <StyledTitle>
- Materias de formação
- </StyledTitle>
- </StyledBox>
- <MainContainer>
- <Container style={{ padding: "20px" }}>
- <Carousel
- style={{ padding: "20px" }}
- showThumbs={false}
- showStatus={false}
- >
- <Row>
- {materials.map((material, index) => {
- return (
- <Col md={3} key={index}>
- <MaterialCard
- name={material.name}
- thumb={material.img}
- score={material.score}
- modules={material.topics}
- handleExpand={HandleExpandMaterial}
- id={index}
- />
- </Col>
- );
- })}
- </Row>
- </Carousel>
- {currMaterial.open ? (
- <ExpandedMaterial material={currMaterial.material} />
- ) : null}
- </Container>
- </MainContainer>
- </>
- );
+ return (
+ <MainPage contrast={state.contrast}>
+ <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs contrast={state.contrast}>
+ <Link to="/">Página Inicial</Link>
+ <span>Materias de Formação</span>
+ </StyledBreadCrumbs>
+ </BreadCrumbsDiv>
+ <StyledBox contrast={state.contrast}>
+ <StyledTitle contrast={state.contrast}>
+ Materias de formação
+ </StyledTitle>
+ </StyledBox>
+ <MainContainer contrast={state.contrast}>
+ <Container style={{ padding: "20px" }}>
+ <Carousel
+ style={{ padding: "20px" }}
+ showThumbs={false}
+ showStatus={false}
+ >
+ <Row>
+ {materials.map((material, index) => {
+ return (
+ <Col md={3} key={index}>
+ <MaterialCard
+ contrast={state.contrast}
+ name={material.name}
+ thumb={material.img}
+ score={material.score}
+ modules={material.topics}
+ handleExpand={HandleExpandMaterial}
+ id={index}
+ />
+ </Col>
+ );
+ })}
+ </Row>
+ </Carousel>
+ {currMaterial.open ? (
+ <ExpandedMaterial contrast={state.contrast} material={currMaterial.material} />
+ ) : null}
+ </Container>
+ </MainContainer>
+ </MainPage>
+ );
};
export default MateriaPage;
+const MainPage = styled.div`
+ background: ${props => props.contrast === "" ? "" : "black"};
+`
+
const MainContainer = styled.div`
+ background: ${props => props.contrast === "" ? "" : "black"};
margin-left: auto;
margin-right: auto;
padding: 0;
@@ -116,11 +123,11 @@ const StyledBreadCrumbs = styled(Breadcrumbs)`
justify-content: flex-start;
max-width: 1170px;
span {
- color: #a5a5a5;
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
}
a {
- color: #00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
`
@@ -130,16 +137,17 @@ const BreadCrumbsDiv = styled.div`
`
const StyledBox = styled.div`
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 1px 1px 3px rgba(0,0,0,.12), 1px 1px 2px rgba(0,0,0,.24);
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
padding: 30px;
margin-bottom: 30px;
text-align: center;
`
const StyledTitle = styled.span`
text-align: center;
- color: #e81f4f;
+ color: ${props => props.contrast === "" ? "#e81f4f" : "white"};
font-size: 26px;
font-family: "Roboto", sans-serif;
- font-weight: 100;
+ font-weight: lighter;
`
\ No newline at end of file
diff --git a/src/Pages/PublicationPermissionsPage.js b/src/Pages/PublicationPermissionsPage.js
index b06e2889af5bea8fcd18223a7690cbbf4aafcd8d..9b25fc8738b5b22b08acdefcece9b4e37a93f14a 100644
--- a/src/Pages/PublicationPermissionsPage.js
+++ b/src/Pages/PublicationPermissionsPage.js
@@ -30,7 +30,6 @@ const CardStyled = styled(Card)`
box-sizing: border-box;
background-color: white;
max-width: 1700px;
- padding-top: 52px;
@media ${device.mobileM} {
width: 100%;
height: 100%;
@@ -44,11 +43,13 @@ const Styledspan = styled.span`
line-height: 22px;
font-size: 15px;
letter-spacing: 0.01em;
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"}
`;
const Background = styled.div`
padding-top : 40px;
- background-color : #f4f4f4;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
color : #666;
padding-bottom : 40px;
@@ -133,20 +134,20 @@ export default function PermissionsContainer(props) {
handleClose={closeModal}
disableBackdropClick={true}
/>
- <Background
- >
+ <Background contrast={state.contrast}>
<div className="container">
<CardStyled variant="outlined">
- <PublicationPermissionsContent handleRadios={handleRadios} />
+ <PublicationPermissionsContent handleRadios={handleRadios} contrast={state.contrast} />
<CardActions
- style={{ justifyContent: "center", padding: "25px", borderTop : "2px solide #dadada" }}
+ style={state.contrast === "" ? { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada" } : { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada", backgroundColor: "black" }}
>
<div>
<div style={{ fontSize: "14px" }}>
<LabeledCheckbox
+ contrast={state.contrast}
disabled={unavailableCheckbox}
label={
- <Styledspan>
+ <Styledspan contrast={state.contrast}>
Li e permito a publicação do meu recurso na
Plataforma Integrada de RED do MEC, assim como
atesto que o meu recurso atende aos critérios
@@ -162,28 +163,33 @@ export default function PermissionsContainer(props) {
disabled={unavailableButton || unavailableCheckbox}
style={
unavailableButton || unavailableCheckbox
- ? { backgroundColor: "#e9e9e9" }
- : { backgroundColor: "#00bcd4" }
+ ? { backgroundColor: "#e9e9e9" } :
+ state.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", border: "1px solid white" }
}
onClick={handleAgreement}
>
<Styledspan
style={
unavailableButton || unavailableCheckbox
- ? { color: "#666666", fontWeight : "600" }
- : { color: "#ffffff", fontWeight : "600" }
+ ? { color: "#666666", fontWeight: "600" } :
+ state.contrast === "" ? { color: "#ffffff", fontWeight: "600" } : { color: "yellow", textDecoration: "underline", fontWeight: "600" }
}
>
Continuar{" "}
</Styledspan>
</Button>
<Button
- style={{
+ style={state.contrast === "" ? {
marginLeft: "45px",
backgroundColor: "#e9e9e9",
- }}
+ } : {
+ marginLeft: "45px",
+ backgroundColor: "black",
+ border: "1px solid white"
+ }
+ }
>
- <Styledspan style={{ color: "rgb(102, 102, 102)" , fontWeight : "600 !important"}} onClick={() => {redirectToHome()}}>
+ <Styledspan style={state.contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "600 !important" } : { color: "yellow", textDecoration: "underline", fontWeight: "600" }} onClick={() => { redirectToHome() }}>
Cancelar
</Styledspan>
</Button>
@@ -193,12 +199,13 @@ export default function PermissionsContainer(props) {
</CardActions>
</CardStyled>
</div>
- </Background>
+ </Background>
</>
]
) : (
<>{redirect()}</>
- )}
+ )
+ }
</>
);
}
diff --git a/src/Pages/TermsPage.js b/src/Pages/TermsPage.js
index aaa58528781f305e067490c2ba119a5bd76dd9ce..0a16d9574dd63dc04f4487b3fcabbf159b39e18f 100644
--- a/src/Pages/TermsPage.js
+++ b/src/Pages/TermsPage.js
@@ -15,9 +15,9 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useState, useContext} from 'react';
+import React, { useState, useContext } from 'react';
import styled from 'styled-components'
-import {device} from '../Components/device.js'
+import { device } from '../Components/device.js'
import { Store } from '../Store.js';
import { Button } from '@material-ui/core';
import Card from '@material-ui/core/Card';
@@ -25,12 +25,11 @@ import LabeledCheckbox from "../Components/Checkbox.js"
import TermsPageContent from '../Components/TermsPageContent.js'
import AppBar from '@material-ui/core/AppBar';
import { makeStyles } from '@material-ui/core/styles';
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom'
const CardStyled = styled(Card)`
box-sizing : border-box;
background-color : white;
max-width: 1700px;
- padding-top: 52px;
@media ${device.mobileM} {
width : 100%;
height : 100%;
@@ -57,7 +56,7 @@ const StyledSpanContinuar = styled.span`
const Background = styled.div`
padding-top : 40px;
- background-color : #f4f4f4;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
color : #666;
padding-bottom : 40px;
@@ -78,76 +77,76 @@ const Background = styled.div`
}
`
-export default function TermsContainer (props) {
- // eslint-disable-next-line
- const {state, dispatch} = useContext(Store)
- // eslint-disable-next-line
- const [checked, setChecked] = useState(false);
- const [unavailableButton, setButtonAvailability] = useState(true);
- const classes = useStyles()
-
- const handleChecked = e => {
- setChecked(e.target.checked);
- setButtonAvailability(!unavailableButton);
- }
-
- const handleAgreement = () => {
-
- dispatch( {
- type: 'USER_AGREED_TO_PUBLICATION_TERMS',
- userAgreement: true
- })
+export default function TermsContainer(props) {
+ // eslint-disable-next-line
+ const { state, dispatch } = useContext(Store)
+ // eslint-disable-next-line
+ const [checked, setChecked] = useState(false);
+ const [unavailableButton, setButtonAvailability] = useState(true);
+ const classes = useStyles()
+
+ const handleChecked = e => {
+ setChecked(e.target.checked);
+ setButtonAvailability(!unavailableButton);
+ }
- if (props.location.state) {
- props.history.push('/professor')
- }else {
- props.history.push('/permission')
- window.scrollTo(0, 0)
- }
+ const handleAgreement = () => {
+ dispatch({
+ type: 'USER_AGREED_TO_PUBLICATION_TERMS',
+ userAgreement: true
+ })
+
+ if (props.location.state) {
+ props.history.push('/professor')
+ } else {
+ props.history.push('/permission')
+ window.scrollTo(0, 0)
}
+ }
- return (
- <Background>
- <div className="container">
- <CardStyled variant="outlined">
- <TermsPageContent/>
- </CardStyled>
- </div>
- <AppBar position="fixed" color="primary" className={classes.appBar}>
- <StyledAppBarContainer>
- <div className="container">
- <div style={{fontSize:"14px"}}>
- <LabeledCheckbox label={<Styledspan style={{color : "#666", fontWeight : "600"}}>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/>
- </div>
- <div className="botoes">
- <Button disabled = {unavailableButton}
- style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
+ return (
+ <Background contrast={state.contrast}>
+ <div className="container">
+ <CardStyled contrast={state.contrast} variant="outlined">
+ <TermsPageContent contrast={state.contrast} />
+ </CardStyled>
+ </div>
+ <AppBar position="fixed" color="primary" className={state.contrast === "" ? classes.lightAppBar : classes.darkAppBar}>
+ <StyledAppBarContainer>
+ <div className="container">
+ <div style={{ fontSize: "14px" }}>
+ <LabeledCheckbox contrast={state.contrast} label={<Styledspan style={state.contrast === "" ? { color: "#666", fontWeight: "600" } : { color: "yellow", fontWeight: "600", textDecoration: "underline" }}>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked} />
+ </div>
+ <div className="botoes">
+ <Button disabled={unavailableButton}
+ style={unavailableButton ? state.contrast === "" ? { backgroundColor: "#e9e9e9" } : {} : state.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", border: "1px solid white" }}
onClick={handleAgreement}
- >
- <StyledSpanContinuar style={unavailableButton ? {color:"#666666"} : {}}>
- Continuar
- </StyledSpanContinuar>
- </Button>
- <Link to="/">
- <GrayButton>
- Cancelar
- </GrayButton>
- </Link>
- </div>
+ >
+ <StyledSpanContinuar style={unavailableButton ? state.contrast === "" ? { color: "#666666" } : { color: "white" } : state.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>
+ Continuar
+ </StyledSpanContinuar>
+ </Button>
+ <Link to="/">
+ <GrayButton contrast={state.contrast}>
+ Cancelar
+ </GrayButton>
+ </Link>
</div>
- </StyledAppBarContainer>
- </AppBar>
- </Background>
- )
+ </div>
+ </StyledAppBarContainer>
+ </AppBar>
+ </Background>
+ )
}
const GrayButton = styled(Button)`
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
}
height : 36px !important;
font-weight : 600 !important;
- color : #666 !important;
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
@@ -171,13 +170,20 @@ const GrayButton = styled(Button)`
`
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)'
- },
+ lightAppBar: {
+ 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)'
+ },
+ darkAppBar: {
+ top: 'auto',
+ bottom: 0,
+ height: '100px',
+ backgroundColor: 'black',
+ boxShadow: '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)'
+ },
}));
diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js
index dee57bdfa9650836cca49bf8e782c56bcb53b8f2..8d683857f3315da898dd8349d2293db4251b643d 100644
--- a/src/Pages/UploadPage.js
+++ b/src/Pages/UploadPage.js
@@ -16,147 +16,148 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useState, useEffect, useContext} from 'react'
+import React, { useState, useEffect, useContext } from 'react'
import Grid from '@material-ui/core/Grid';
import UploadFileWrapper from '../Components/UploadPageComponents/UploadFileWrapper.js'
-import {Store} from '../Store.js'
-import {InfoBox} from '../Components/UploadPageComponents/StyledComponents.js'
+import { Store } from '../Store.js'
+import { InfoBox } from '../Components/UploadPageComponents/StyledComponents.js'
import Stepper from '../Components/UploadPageComponents/Stepper.js'
-import {postRequest} from '../Components/HelperFunctions/getAxiosConfig.js'
+import { postRequest } from '../Components/HelperFunctions/getAxiosConfig.js'
import PartOne from '../Components/UploadPageComponents/PartOne.js'
import PartTwo from '../Components/UploadPageComponents/PartTwo.js'
import PartThree from '../Components/UploadPageComponents/PartThree.js'
import ModalLearningObjectPublished from '../Components/ModalLearningObjectPublished.js'
-import {Background} from '../Components/UploadPageComponents/StyledComponents'
+import { Background } from '../Components/UploadPageComponents/StyledComponents'
import LoadingSpinner from '../Components/LoadingSpinner.js'
-import {Redirect} from 'react-router-dom'
+import { Redirect } from 'react-router-dom'
-export default function UploadPage (props) {
- const {state} = useContext(Store)
+export default function UploadPage(props) {
+ const { state } = useContext(Store)
- // {/*Object : link or file uploaded*/}
- // eslint-disable-next-line
- const [object, setObject] = useState()
+ // {/*Object : link or file uploaded*/}
+ // eslint-disable-next-line
+ const [object, setObject] = useState()
- const [loading, toggleLoading] = useState(true)
- const [draft, setDraft] = useState({})
- function handleSuccessfulGet (data) {
- setDraft(data)
- toggleLoading(false)
- }
- useEffect( () => {
- if (state.currentUser.id !== "") {
+ const [loading, toggleLoading] = useState(true)
+ const [draft, setDraft] = useState({})
+ function handleSuccessfulGet(data) {
+ setDraft(data)
+ toggleLoading(false)
+ }
+ useEffect(() => {
+ if (state.currentUser.id !== "") {
- const url = `/learning_objects/`
+ const url = `/learning_objects/`
- let payload = {}
+ let payload = {}
- postRequest(url, payload, handleSuccessfulGet, (error) => {console.log(error)})
+ postRequest(url, payload, handleSuccessfulGet, (error) => { console.log(error) })
- }
- }, [])
+ }
+ }, [])
- const [activeStep, setActiveStep] = React.useState(0);
- const stepperControl=(increment)=>{setActiveStep(activeStep + increment)}
+ const [activeStep, setActiveStep] = React.useState(0);
+ const stepperControl = (increment) => { setActiveStep(activeStep + increment) }
- const [objectSubmitted, toggleModal] = useState(false)
- const handleModal = (value) => {toggleModal(value)}
+ const [objectSubmitted, toggleModal] = useState(false)
+ const handleModal = (value) => { toggleModal(value) }
- const handlePost = () => {
- if (state.currentUser.id !== "") {
- const url = `/learning_objects/${draft.id}/publish`
+ const handlePost = () => {
+ if (state.currentUser.id !== "") {
+ const url = `/learning_objects/${draft.id}/publish`
- let payload = {}
+ let payload = {}
- postRequest(url, payload,
- (data) => {handleModal(true)},
- (error) => {console.log(error)}
- )
+ postRequest(url, payload,
+ (data) => { handleModal(true) },
+ (error) => { console.log(error) }
+ )
- }
}
+ }
- const handleSubmit = () => {
- if (state.currentUser.id !== "") {
- const url = `/submissions/`
+ const handleSubmit = () => {
+ if (state.currentUser.id !== "") {
+ const url = `/submissions/`
- let payload = {
- "submission" : {
- "learning_object_id" : draft.id
- }
- }
+ let payload = {
+ "submission": {
+ "learning_object_id": draft.id
+ }
+ }
- postRequest(url, payload,
- (data) => {handleModal(true)},
- (error) => {console.log(error)}
- )
+ postRequest(url, payload,
+ (data) => { handleModal(true) },
+ (error) => { console.log(error) }
+ )
- }
}
-
- return (
- <React.Fragment>
- {
- state.currentUser.id === '' &&
- <Redirect to="/"/>
- }
- {
- loading === true ?
- (
- <LoadingSpinner text={"CARREGANDO..."}/>
- )
- :
- (
- <>
- <ModalLearningObjectPublished
- contrast={state.contrast}
- open={objectSubmitted}
- handleClose={() => {toggleModal(false); props.history.push('/')}}
- draftID={draft.id}
- />
- {
- activeStep === 2 ?
- (
- <PartThree draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit}/>
- )
- :
- (
- <Background>
- <div className="container">
- <Grid container spacing={2}>
- <Grid item md={4} xs={12}>
- <UploadFileWrapper draftID={draft.id}/>
- </Grid>
- <Grid item md={8} xs={12}>
- <InfoBox>
- <div className="cabecalho">
- <h2>Informações sobre o Recurso</h2>
- <div className="feedback-upload">
- <Stepper activeStep={activeStep}/>
- </div>
- </div>
- {
- activeStep === 0 &&
- <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
- <PartOne draftID={draft.id} stepperControl={stepperControl}/>
- </Grid>
- }
- {
- activeStep === 1 &&
- <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
- <PartTwo draftID={draft.id} stepperControl={stepperControl}/>
- </Grid>
- }
- </InfoBox>
- </Grid>
- </Grid>
+ }
+
+ return (
+ <React.Fragment>
+ {
+ state.currentUser.id === '' &&
+ <Redirect to="/" />
+ }
+ {
+ loading === true ?
+ (
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <LoadingSpinner contrast={state.contrast} text={"CARREGANDO..."} />
+ </div>
+ )
+ :
+ (
+ <>
+ <ModalLearningObjectPublished
+ open={objectSubmitted}
+ handleClose={() => { toggleModal(false); props.history.push('/') }}
+ draftID={draft.id}
+ />
+ {
+ activeStep === 2 ?
+ (
+ <PartThree draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit} />
+ )
+ :
+ (
+ <Background contrast={state.contrast}>
+ <div className="container">
+ <Grid container spacing={2}>
+ <Grid item md={4} xs={12}>
+ <UploadFileWrapper contrast={state.contrast} draftID={draft.id} />
+ </Grid>
+ <Grid item md={8} xs={12}>
+ <InfoBox contrast={state.contrast}>
+ <div className="cabecalho">
+ <h2>Informações sobre o Recurso</h2>
+ <div className="feedback-upload">
+ <Stepper contrast={state.contrast} activeStep={activeStep} />
</div>
- </Background>
- )
- }
- </>
- )
- }
+ </div>
+ {
+ activeStep === 0 &&
+ <Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}>
+ <PartOne draftID={draft.id} stepperControl={stepperControl} />
+ </Grid>
+ }
+ {
+ activeStep === 1 &&
+ <Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}>
+ <PartTwo draftID={draft.id} stepperControl={stepperControl} />
+ </Grid>
+ }
+ </InfoBox>
+ </Grid>
+ </Grid>
+ </div>
+ </Background>
+ )
+ }
+ </>
+ )
+ }
</React.Fragment>
-)
+ )
}