diff --git a/src/Components/Comment.js b/src/Components/Comment.js
index c4a54c2572278700968b1a2202c69b4eb5cea465..16bf8d56cf992275e6be37ddf223a36c9b06aa28 100644
--- a/src/Components/Comment.js
+++ b/src/Components/Comment.js
@@ -140,7 +140,7 @@ export default function Comment(props) {
</Grid>
<Grid item xs={10}>
- <Comentario>
+ <Comentario contrast={state.contrast}>
<div className="star-rating-container">
<Rating
name="read-only"
@@ -201,7 +201,7 @@ export default function Comment(props) {
to={'/usuario-publico/' + props.authorID}
style={{
fontWeight: "bolder",
- color: props.recurso ? "#ff7f00" : "#673ab7"
+ color: state.contrast === "" ? props.recurso ? "#ff7f00" : "#673ab7" : "white"
}}
>
{props.authorName}
@@ -254,7 +254,7 @@ export default function Comment(props) {
</Grid>
<Grid item xs={10}>
- <Comentario>
+ <Comentario contrast={state.contrast}>
<p>
O usuário que fez esse comentário deletou a conta.
</p>
@@ -293,6 +293,7 @@ const StyledButton = styled(Button)`
const Comentario = styled.div`
padding-left : 55px !important;
font-size : 14px;
+ color: ${props => props.contrast === "" ? "#ababab" : "white"};
.star-rating-container {
width : 100px;
@@ -308,7 +309,7 @@ const Comentario = styled.div`
}
.date {
- color : #ababab;
+ color: ${props => props.contrast === "" ? "#ababab" : "white"};
font-size : 12px;
font-weight : lighter;
padding-left : 3px;
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..e5c7185342f9268bcb0ebf3cb102ae78cf8acb2a 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,22 +57,22 @@ 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>
@@ -87,7 +87,7 @@ export default function FormationMaterialHeader(props) {
{props.colecao ? "Ver todos os módulos" : "Iniciar leitura"}
</Button>
:
- <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
variant="contained"
color="secondary"
@@ -119,15 +119,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 +149,6 @@ export const WrappingCard = styled(Card)`
`
const StyledLink = styled(Link)`
- text-decoration: none !important;
- color: #e81f4f !important;
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ color: ${props => props.contrast === "" ? "#e81f4f !important" : "yellow !important"};
`
diff --git a/src/Components/ResourcePageComponents/CommentForm.js b/src/Components/ResourcePageComponents/CommentForm.js
index 0272d76fc6f63b264b9197d390818729caa46cc1..69b2ad436b0c29635ba8ebce6d7a1a81867572db 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 />
+ 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 9eb44d9dbe8cb261c72b4403b2b52f3c1aa9ceba..c28718c8f21249399a144f289866909a0132714b 100644
--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -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}
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/Pages/FormationMaterialPage.js b/src/Pages/FormationMaterialPage.js
index 797074618d38f7d3282a57a2ed8d5641ae06e512..1209461fc96fc2cb398d7ba29f1e79111ff7a865 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}
/>
@@ -119,12 +124,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 +147,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