diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js
index 49f8861e07ab19e2403bad1e0a64fcee929b9f33..edfc7692d39a82a8a5a7e88057fd361a95e6b463 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}
@@ -225,11 +230,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' }}>
@@ -238,6 +243,7 @@ export default function CollectionCommentSection(props) {
</Grid>
<Grid item xs={12} sm={10}>
<CommentForm
+ contrast={props.contrast}
colecao
recursoId={props.id}
handleSnackbar={handlePostSnackbar}
@@ -248,9 +254,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>
@@ -262,7 +268,7 @@ export default function CollectionCommentSection(props) {
<CircularProgress className="loading" />
</LoadingDiv>
:
- reviews.length ? CollectionComments() : NoCommentsMessage()
+ reviews.length ? CollectionComments(props.contrast) : NoCommentsMessage(props.contrast)
}
</CommentAreaCard>
</Grid>
@@ -300,7 +306,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;
@@ -355,7 +361,7 @@ const LogInToComment = styled.div`
font-size : 24px;
font-weight : 700;
padding-bottom : 5px;
- color : #673ab7;
+ color: ${props => props.contrast === "" ? "#673ab7" : "white"};
}
img {
@@ -366,12 +372,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 16bf8d56cf992275e6be37ddf223a36c9b06aa28..c7b10d30918f416f00adee00630eaa0cb2e16bd8 100644
--- a/src/Components/Comment.js
+++ b/src/Components/Comment.js
@@ -16,25 +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) {
- /*
+ /*
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...
@@ -49,272 +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
- 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 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" }} />}
- />
- </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: 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 /></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 contrast={state.contrast}>
- <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;
- color: ${props => props.contrast === "" ? "#ababab" : "white"};
+ 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: ${props => props.contrast === "" ? "#ababab" : "white"};
- 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/FormationMaterialHeader.js b/src/Components/FormationMaterialHeader.js
index e5c7185342f9268bcb0ebf3cb102ae78cf8acb2a..af2417ff6835208ee354dc70f514e34c51205d3b 100644
--- a/src/Components/FormationMaterialHeader.js
+++ b/src/Components/FormationMaterialHeader.js
@@ -78,17 +78,21 @@ export default function FormationMaterialHeader(props) {
</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 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' }}
@@ -149,6 +153,15 @@ export const WrappingCard = styled(Card)`
`
const StyledLink = styled(Link)`
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !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/ResourcePageComponents/CommentForm.js b/src/Components/ResourcePageComponents/CommentForm.js
index 69b2ad436b0c29635ba8ebce6d7a1a81867572db..d25d8d080113f93b188b9a63f24090aa9d0eb44d 100644
--- a/src/Components/ResourcePageComponents/CommentForm.js
+++ b/src/Components/ResourcePageComponents/CommentForm.js
@@ -165,8 +165,8 @@ export default function CommentForm(props) {
</OrangeButton>
) : (
<PurpleButton contrast={props.contrast} type="submit">
- <EditIcon />
- Enviar
+ <EditIcon style={props.contrast === "" ? { marginRight: "0.3em" } : { color: "white", marginRight: "0.3em" }} />
+ Enviar
</PurpleButton>
)}
</div>
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
index c28718c8f21249399a144f289866909a0132714b..4b22d249ff9071fc0d535c7e081de589dd1a9ed0 100644
--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -193,6 +193,7 @@ export default function CommentsArea(props) {
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}
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/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 1209461fc96fc2cb398d7ba29f1e79111ff7a865..8b03623f0a3c2852a51e294af03e8bd9a75fdf64 100644
--- a/src/Pages/FormationMaterialPage.js
+++ b/src/Pages/FormationMaterialPage.js
@@ -115,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} />