diff --git a/src/Components/Firulas.js b/src/Components/Firulas.js
index 6a368a11cf553166280ec8d85dd9ede03562e781..c195149913060e3c8b544a2d1dba0a871444fbad 100644
--- a/src/Components/Firulas.js
+++ b/src/Components/Firulas.js
@@ -1,36 +1,34 @@
-import React, {useState} from 'react'
+import React, { useState } from 'react'
import styled from 'styled-components'
import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
-import {LikeCounter, ButtonNoWidth} from '../Components/ResourceCardFunction.js'
+import { LikeCounter, ButtonNoWidth } from '../Components/ResourceCardFunction.js'
import FavoriteIcon from '@material-ui/icons/Favorite';
-import {putRequest} from './HelperFunctions/getAxiosConfig'
+import { putRequest } from './HelperFunctions/getAxiosConfig'
-export default function Firulas (props) {
+export default function Firulas(props) {
const [liked, setLiked] = useState(props.liked)
- function handleSuccess (data) {
+ function handleSuccess(data) {
+ console.log(data);
setLiked(!liked)
}
- const handleLike = () => {
- putRequest(`/learning_objects/${props.recursoId}/like/`, {}, handleSuccess, (error) => {console.log(error)})
- }
return (
<ConteinerFirulas>
<Rating
- name="customized-empty"
- value={props.rating*10}
- precision={0.5}
- readOnly
- style={{color:"#666", marginRight : "20px"}}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ name="customized-empty"
+ value={props.rating * 10}
+ precision={0.5}
+ readOnly
+ style={props.contrast === "" ? { color: "#666", marginRight: "20px" } : { color: "yellow", marginRight: "20px" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
- <LikeCounter style={{marginLeft : "-3px", display : "flex", alignItems : "center"}}>
- <span>{props.likesCount}</span>
+ <LikeCounter style={{ marginLeft: "-3px", display: "flex", alignItems: "center" }}>
+ <span style={props.contrast === "" ? { color: "#666" } : { color: "white" }} >{props.likesCount}</span>
- <ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon style={{color : liked ? "red" : "#666" }}/>
+ <ButtonNoWidth disabled={true}>
+ <FavoriteIcon style={{ color: liked ? "red" : props.contrast === "" ? "#666" : "white" }} />
</ButtonNoWidth>
</LikeCounter>
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index 62aa64614e3427ad4f9617f1ac6ce3daf956ce28..edc957a0f3c60886db5ec9a553b09e400eff8163 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -286,7 +286,6 @@ export const ButtonNoWidth = styled(Button)`
min-width : 24px !important;
max-height : 24px !important;
padding : 0 !important;
- background-color : #fff !important;
color : #a5a5a5 !important;
border : 0 !important;
diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js
index 98e7fcd119baab3a54029a86ada0860dc0526dd8..021001b7b188c06109d7853ae7b0828bb426bb6c 100644
--- a/src/Components/ResourcePageComponents/Footer.js
+++ b/src/Components/ResourcePageComponents/Footer.js
@@ -47,7 +47,7 @@ function ReportButton(props) {
return (
!props.complained ?
(
- <ButtonGrey onClick={props.userLoggedIn ? props.toggleReport : props.openLogin}>
+ <ButtonGrey contrast={props.contrast} onClick={props.userLoggedIn ? props.toggleReport : props.openLogin}>
<span className="button-text">
<ErrorIcon className="icon" /> Reportar abuso ou erro
</span>
@@ -55,7 +55,7 @@ function ReportButton(props) {
)
:
(
- <ButtonGrey>
+ <ButtonGrey contrast={props.contrast}>
<span className="button-text-report">
<ErrorIcon className="icon" /> Você já reportou este recurso
</span>
@@ -68,7 +68,7 @@ function DownloadButton(props) {
return (
props.downloadableLink ?
(
- <ButtonOrange onClick={props.enableDownload}>
+ <ButtonOrange contrast={props.contrast} onClick={props.enableDownload}>
<span className="text">
<GetAppIcon className="icon" /> Baixar Recurso
</span>
@@ -77,7 +77,7 @@ function DownloadButton(props) {
:
props.link ?
(
- <ButtonOrange onClick={props.toggleRedirect}>
+ <ButtonOrange contrast={props.contrast} onClick={props.toggleRedirect}>
<span className="text">
<CallMadeIcon className="icon" /> Abrir Recurso
</span>
@@ -172,7 +172,7 @@ export default function Footer(props) {
{/*----------------------------------------------------------------------------*/}
{/*-----------------------------BUTTONS----------------------------------------*/}
- <OpcoesDiv>
+ <OpcoesDiv contrast={props.contrast}>
<StyledGrid container>
{
windowWidth > 990 ?
@@ -181,6 +181,7 @@ export default function Footer(props) {
{/*Botao Reportar*/}
<Grid item xs={3}>
<ReportButton
+ contrast={props.contrast}
userLoggedIn={state.currentUser.id === '' ? false : true}
toggleReport={() => { toggleReport(true) }}
openLogin={handleLogin}
@@ -190,7 +191,7 @@ export default function Footer(props) {
{/*Botao Compartilhar*/}
<Grid item xs={3}>
- <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
+ <ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
<span className="button-text">
<ShareIcon className="icon" /> Compartilhar
</span>
@@ -199,7 +200,7 @@ export default function Footer(props) {
{/*Botao Guardar*/}
<Grid item xs={3}>
- <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
+ <ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
<span className="button-text">
<FolderIcon className="icon" />Guardar
</span>
@@ -208,6 +209,7 @@ export default function Footer(props) {
<Grid item xs={3} style={{ justifyContent: "right !important" }}>
<DownloadButton
+ contrast={props.contrast}
downloadableLink={props.downloadableLink}
link={props.link}
enableDownload={enableDownload}
@@ -221,7 +223,7 @@ export default function Footer(props) {
<React.Fragment>
{/*Botao Guardar*/}
<Grid item xs={4}>
- <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
+ <ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
<span className="button-text">
<FolderIcon className="icon" />Guardar
</span>
@@ -230,6 +232,7 @@ export default function Footer(props) {
<Grid item xs={7}>
<DownloadButton
+ contrast={props.contrast}
downloadableLink={props.downloadableLink}
link={props.link}
enableDownload={enableDownload}
@@ -257,7 +260,7 @@ export default function Footer(props) {
/>
</MenuItem>
<MenuItem>
- <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
+ <ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
<span className="button-text">
<ShareIcon className="icon" /> Compartilhar
</span>
@@ -277,10 +280,11 @@ export default function Footer(props) {
}
const OpcoesDiv = styled.div`
+ margin: 1em 0em;
display : flex;
align-items : center;
height : 65px;
- background-color : #fafafa;
+ background-color: ${props => props.contrast === "" ? "#fafafa" : "black"};
`
const StyledGrid = styled(Grid)`
@@ -298,15 +302,17 @@ const StyledGrid = styled(Grid)`
const ButtonGrey = 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"};
}
background-color : transparent !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
outline : none !important;
text-align : center !important;
.icon {
+ color: ${props => props.contrast === "" ? "inherit !important" : "white !important"};
vertical-align : middle !important;
font-weight : normal !important;
font-style : normal !important;
@@ -319,7 +325,6 @@ const ButtonGrey = styled(Button)`
word-wrap : normal !important;
direction : ltr !important;
padding-right : 2px;
- color : inherit !important;
}
.button-text {
@@ -349,17 +354,22 @@ const ButtonGrey = styled(Button)`
`
const ButtonOrange = styled(Button)`
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
- background-color : #ff7f00 !important;
- color : #fff !important;
- text-decoration : none !important;
+ background-color: ${props => props.contrast === "" ? "#ff7f00 !important" : "black !important"};
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
text-transform : uppercase !important;
outline : none !important;
+ /* max-height: 36px !important; */
text-align : center !important;
- max-height : 36px;
margin-top : 5px !important;
.icon {
+ color: white !important;
vertical-align : middle !important;
font-weight : normal !important;
font-style : normal !important;
@@ -375,6 +385,7 @@ const ButtonOrange = styled(Button)`
}
.text {
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
font-size : 14px;
font-weight : 600;
}
diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js
index 2de37ad9f73eb7abd78231d078a02c91e6ba350d..81db93694c786dfc5b8f46f4a738c7419708f1f1 100644
--- a/src/Components/ResourcePageComponents/Sobre.js
+++ b/src/Components/ResourcePageComponents/Sobre.js
@@ -16,13 +16,13 @@ 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, useEffect} from 'react'
-import {Store} from '../../Store'
+import React, { useContext, useState, useEffect } from 'react'
+import { Store } from '../../Store'
import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
-import {Link} from 'react-router-dom'
-import {NoIcon} from '../ContactButtons/FollowButton.js'
-import {NoIconFollowing} from '../ContactButtons/FollowingButton.js'
+import { Link } from 'react-router-dom'
+import { NoIcon } from '../ContactButtons/FollowButton.js'
+import { NoIconFollowing } from '../ContactButtons/FollowingButton.js'
import Collapse from '@material-ui/core/Collapse';
import SdCardIcon from '@material-ui/icons/SdCard';
import TranslateIcon from '@material-ui/icons/Translate';
@@ -43,7 +43,7 @@ function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
-function AdditionalInfoItem (props) {
+function AdditionalInfoItem(props) {
return (
<span className="meta-objeto">
{props.icon}
@@ -53,11 +53,11 @@ function AdditionalInfoItem (props) {
)
}
-export default function Sobre (props) {
- const {state} = useContext(Store)
+export default function Sobre(props) {
+ const { state } = useContext(Store)
const [collapsed, setCollapsed] = useState(false)
- const toggleCollapsed = () => {setCollapsed(!collapsed)};
+ const toggleCollapsed = () => { setCollapsed(!collapsed) };
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
@@ -74,8 +74,8 @@ export default function Sobre (props) {
if (reason === 'clickaway') {
return;
}
-
- handleSuccessfulLogin(false);
+
+ handleSuccessfulLogin(false);
}
var moment = require('moment')
@@ -85,58 +85,58 @@ export default function Sobre (props) {
useEffect(() => {
let aux = []
- if (props.attachments && props.attachments[0]){
+ if (props.attachments && props.attachments[0]) {
aux.push(<AdditionalInfoItem
- icon={<SdCardIcon/>}
+ icon={<SdCardIcon />}
label={'Tamanho: '}
value={(props.attachments[0].size / 1000000).toFixed(2) + ' Mb'}
key={props.attachments[0].id}
- />)
+ />)
}
- if(props.language){
- props.language.map( (lang) =>
+ if (props.language) {
+ props.language.map((lang) =>
aux.push(<AdditionalInfoItem
- icon={<TranslateIcon/>}
+ icon={<TranslateIcon />}
label={'Idioma: '}
value={lang.name}
key={lang.id}
- />
- ))
+ />
+ ))
}
- if (props.mimeType){
+ if (props.mimeType) {
aux.push(<AdditionalInfoItem
- icon={<InsertDriveFileIcon/>}
+ icon={<InsertDriveFileIcon />}
label={'Formato: '}
value={props.mimeType}
key={props.mimeType}
- />)
+ />)
}
if (props.createdAt) {
aux.push(<AdditionalInfoItem
- icon={<DateRangeIcon/>}
+ icon={<DateRangeIcon />}
label={'Data de Envio: '}
value={moment(props.createdAt).format("DD/MM/YYYY")}
key={"dateCreatedAt"}
- />)
+ />)
}
if (props.updatedAt) {
aux.push(<AdditionalInfoItem
- icon={<UpdateIcon/>}
+ icon={<UpdateIcon />}
label={'Modificado em: '}
value={moment(props.createdAt).format("DD/MM/YYYY")}
key={"dateUpdatedAt"}
- />)
+ />)
}
if (props.license) {
aux.push(<AdditionalInfoItem
- icon={<AssignmentIcon/>}
+ icon={<AssignmentIcon />}
label={'Tipo de licença: '}
value={
<div className="license-link">
<a href={props.license.url}>
- <img src={License} alt="license"/>
+ <img src={License} alt="license" />
</a>
<p>
{props.license.name}
@@ -144,11 +144,11 @@ export default function Sobre (props) {
</div>
}
key={props.license.id}
- />)
+ />)
}
else {
aux.push(<AdditionalInfoItem
- icon={<AssignmentIcon/>}
+ icon={<AssignmentIcon />}
label={'Tipo de licença: '}
value={
<div className="license-link">
@@ -157,7 +157,7 @@ export default function Sobre (props) {
</p>
</div>
}
- key={"no-license"}/>)
+ key={"no-license"} />)
}
setAdditionalInfo(aux)
}, [])
@@ -165,7 +165,7 @@ export default function Sobre (props) {
let windowWidth = window.innerWidth
const [followed, setFollowed] = useState(props.followed)
- const toggleFollowed = () => {setFollowed(!followed)}
+ const toggleFollowed = () => { setFollowed(!followed) }
return (
<React.Fragment>
@@ -180,11 +180,11 @@ export default function Sobre (props) {
/>
<SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
- <Grid container style={{paddingRight : "15px", paddingLeft : "15px"}}>
+ <Grid container style={{ paddingRight: "15px", paddingLeft: "15px" }}>
- <Grid item xs={windowWidth > 990 ? 9 : 12} style={{paddingRight : "15px"}}>
+ <Grid item xs={windowWidth > 990 ? 9 : 12} style={{ paddingRight: "15px" }}>
<Collapse in={collapsed} collapsedHeight={338}>
- <SobreDiv>
+ <SobreDiv contrast={state.contrast}>
<div className="titulo">
Sobre o Recurso
</div>
@@ -193,7 +193,7 @@ export default function Sobre (props) {
<div className="tags-container">
{
props.tags &&
- props.tags.map( (tag) =>
+ props.tags.map((tag) =>
<span key={tag.name}>{tag.name}</span>
)
}
@@ -228,54 +228,54 @@ export default function Sobre (props) {
<div className="foto-autor">
<Link to={"/usuario-publico/" + props.id}>
- <img src={props.avatar} alt="user avatar"/>
+ <img src={props.avatar} alt="user avatar" />
</Link>
</div>
<div className="nome-autor">
- <Link to={"/usuario-publico/" + props.id} style={{textDecoration : "none"}}>
+ <Link to={"/usuario-publico/" + props.id} style={{ textDecoration: "none" }}>
<span className="span-st">{props.publisher}</span>
</Link>
</div>
- <div style={{paddingTop : "0.75em", display : "flex", justifyContent : "center"}}>
- {
- (props.id !== state.currentUser.id) &&
- followed ? (
- <>
- <NoIconFollowing followedID={props.id} toggleFollowed={toggleFollowed}/>
- <ContactCardOptions followed={followed} followableID={props.id} toggleFollowed={toggleFollowed}/>
- </>
- )
- :
- (
- <>
- <NoIcon followableID={props.id} toggleFollowed={toggleFollowed}/>
- <ContactCardOptions followed={followed} followableID={props.id} toggleFollowed={toggleFollowed}/>
- </>
- )
- }
+ <div style={{ paddingTop: "0.75em", display: "flex", justifyContent: "center" }}>
+ {
+ (props.id !== state.currentUser.id) &&
+ followed ? (
+ <>
+ <NoIconFollowing contrast={state.contrast} followedID={props.id} toggleFollowed={toggleFollowed} />
+ <ContactCardOptions followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} />
+ </>
+ )
+ :
+ (
+ <>
+ <NoIcon contrast={state.contrast} followableID={props.id} toggleFollowed={toggleFollowed} />
+ <ContactCardOptions followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} />
+ </>
+ )
+ }
</div>
</MetasObjeto>
</Grid>
- <Grid item xs={12} style={{paddingTop : "15px"}}>
- <CollapseControl onClick={() => {toggleCollapsed()}}>
+ <Grid item xs={12} style={{ paddingTop: "15px" }}>
+ <CollapseControl onClick={() => { toggleCollapsed() }}>
{
collapsed ?
- (
+ (
<React.Fragment>
- <span>VER MENOS</span>
- <ExpandLessIcon/>
+ <span style={state.contrast === "" ? { color: "#666" } : { color: "yellow", textDecoration: "underline" }}>VER MENOS</span>
+ <ExpandLessIcon style={state.contrast === "" ? { color: "#666" } : { color: "white" }} />
</React.Fragment>
- )
- :
- (
+ )
+ :
+ (
<React.Fragment>
- <span>VER MAIS</span>
- <ExpandMoreIcon/>
+ <span style={state.contrast === "" ? { color: "#666" } : { color: "yellow", textDecoration: "underline" }}>VER MAIS</span>
+ <ExpandMoreIcon style={state.contrast === "" ? { color: "#666" } : { color: "white" }} />
</React.Fragment>
- )
+ )
}
</CollapseControl>
</Grid>
@@ -306,6 +306,7 @@ const CollapseControl = styled.div`
`
const SobreDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
padding-left : 3% !important;
padding-top : 3% !important;
.titulo {
@@ -315,7 +316,7 @@ const SobreDiv = 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;
}
@@ -331,12 +332,13 @@ const SobreDiv = styled.div`
text-transform : capitalize;
display : inline-flex;
border-radius : 15px;
- background-color : #e5e5e5;
+ background-color: ${props => props.contrast === "" ? "#e5e5e5" : "black"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
margin-right : 3px;
padding : 3px 7px;
line-height : 18px;
margin-bottom : 3px;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : .8em
}
}
@@ -344,11 +346,13 @@ const SobreDiv = styled.div`
.conteudo {
font-size : 14px;
.descricao-objeto {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
text-align: justify;
margin-bottom: 20px;
margin-top: 20px;
}
.autoria {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
margin-bottom : 30px;
}
@@ -363,12 +367,14 @@ const SobreDiv = styled.div`
display: inline-block;
margin-bottom: 15px;
font-size : 14px;
+ color: ${props => props.contrast === "" ? "#666" : "white !important"};
.MuiSvgIcon-root {
- vertical-align : middle
+ vertical-align : middle;
}
span {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
margin-left : 2%;
font-weight : 700;
}
@@ -378,8 +384,8 @@ const SobreDiv = styled.div`
display : inline-grid;
a {
- text-decoration : none !important;
- color : initial;
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ color: ${props => props.contrast === "" ? "initial" : "yellow"};
img {
vertical-align : middle;
@@ -407,6 +413,7 @@ const MetasObjeto = styled.div`
justify-content : flex-start;
padding : 20px;
text-align : center;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
@media screen and (min-width : 990px) {
border-left : 1px solid #e5e5e5;
@@ -415,12 +422,13 @@ const MetasObjeto = styled.div`
.span-st {
position : relative;
font-size : 14px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
.enviado-por {
font-size : 14px;
- color :#666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-weight : 500;
margin-bottom : 5px;
margin-top : 20px;
diff --git a/src/Components/ResourcePageComponents/TextoObjeto.js b/src/Components/ResourcePageComponents/TextoObjeto.js
index f19b82e1d1c55de62c7884e36c63827c7fe77b70..9f51afa47ed51653a957a8c993c6668bb34587db 100644
--- a/src/Components/ResourcePageComponents/TextoObjeto.js
+++ b/src/Components/ResourcePageComponents/TextoObjeto.js
@@ -102,7 +102,7 @@ export default function TextoObjeto (props) {
}
return (
- <TextoObjetoDiv>
+ <TextoObjetoDiv contrast={props.contrast}>
{ publisherDeletedObject &&
<Redirect
to={{
@@ -124,6 +124,7 @@ export default function TextoObjeto (props) {
{
props.stateRecurso !== "submitted" &&
<Firulas
+ contrast={state.contrast}
rating={props.rating}
likesCount={props.likesCount}
liked={props.likedBool}
@@ -199,6 +200,7 @@ export default function TextoObjeto (props) {
}
const TextoObjetoDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
padding : 20px 20px 0 20px;
display : flex;
flex-direction : column;
@@ -208,6 +210,7 @@ const TextoObjetoDiv = styled.div`
align-items : flex-start;
h3 {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 26px;
font-weight : 400;
margin : 0;
@@ -215,6 +218,7 @@ const TextoObjetoDiv = styled.div`
}
.info-recurso {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
display : inline-block;
width : 100%;
font-size : 15px;
@@ -223,28 +227,31 @@ const TextoObjetoDiv = styled.div`
}
.info-cabecalho-recurso {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 15px;
}
.dado-recurso {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 15px;
font-weight : 600;
}
.views-downloads {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 15px;
font-weight : lighter;
margin-bottom : 12px;
}
.icon {
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
vertical-align : middle;
margin-right : 2px;
}
.alert-warning {
- color : #8a6d3b;
+ color: ${props => props.contrast === "" ? "#8a6d3b" : "white"};
background-color : #fcf8e3;
border-color : #faebcc;
padding: 15px;
@@ -262,7 +269,7 @@ const TextoObjetoDiv = styled.div`
height : 32px;
width : 100%;
margin : 10px 0 8px 0;
- background-color : #e5e5e5;
+ background-color: ${props => props.contrast === "" ? "#e5e5e5" : "black"};
}
.audio {
diff --git a/src/Components/ResourcePageComponents/VideoPlayer.js b/src/Components/ResourcePageComponents/VideoPlayer.js
index 57b1b06c0271db6a4d36133db6426159f7082255..b1c61b1d063ceb03968ffdb5f0a24a1ab27b86c2 100644
--- a/src/Components/ResourcePageComponents/VideoPlayer.js
+++ b/src/Components/ResourcePageComponents/VideoPlayer.js
@@ -69,7 +69,7 @@ export default function VideoPlayer(props) {
</video>
</VideoContainer>
:
- <ErrorParagraph>
+ <ErrorParagraph contrast={props.contrast}>
Seu navegador não permite a exibição deste vídeo. É necessário baixar o vídeo para poder visualizá-lo.
</ErrorParagraph>
)
@@ -95,4 +95,5 @@ const VideoContainer = styled.div`
const ErrorParagraph = styled.p`
text-align: center;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 47bd5b18b1c11bcd2eb60ba5608fbc23e3a7b6e4..9a8ba4093cca97439be9fd96a16bbae29271e431 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -202,16 +202,17 @@ export default function LearningObjectPage(props) {
handleSnackbar(6)
}}
/>
- <Background>
+ <Background contrast={state.contrast}>
{carregando ? (
- <LoadingSpinner text={"Carregando Recurso"} />
+ <LoadingSpinner contrast={state.contrast} text={"Carregando Recurso"} />
) : (
<>
<Grid container spacing={2}>
{recurso.object_type === "Vídeo" && !recurso.link ? (
<Grid item xs={12}>
- <Card>
+ <Card contrast={state.contrast}>
<VideoPlayer
+ contrast={state.contrast}
link={recurso.link}
urlVerified={false}
videoUrl={recurso.default_attachment_location}
@@ -222,7 +223,8 @@ export default function LearningObjectPage(props) {
) : (
urlVerify(recurso.link) && (
<Grid item xs={12}>
- <Card>
+ <Card contrast={state.contrast}>
+ contrast={state.contrast}
<VideoPlayer link={recurso.link} urlVerified={true} />
</Card>
</Grid>
@@ -230,13 +232,14 @@ export default function LearningObjectPage(props) {
)}
<Grid item xs={12}>
- <Card>
+ <Card contrast={state.contrast}>
<div>
{recurso.thumbnail && (
<img alt="" src={apiDomain + recurso.thumbnail} />
)}
<TextoObjeto
+ contrast={state.contrast}
name={recurso.name}
rating={recurso.review_average}
recursoId={id}
@@ -255,6 +258,7 @@ export default function LearningObjectPage(props) {
</div>
<Footer
+ contrast={state.contrast}
recursoId={id}
downloadableLink={recurso.default_attachment_location}
handleSnackbar={handleSnackbar}
@@ -268,7 +272,7 @@ export default function LearningObjectPage(props) {
</Grid>
<Grid item xs={12}>
- <Card>
+ <Card contrast={state.contrast}>
{/*todo: change render method on additional item info*/}
<Sobre
avatar={
@@ -298,7 +302,7 @@ export default function LearningObjectPage(props) {
{recurso.state !== "submitted" && (
<Grid item xs={12}>
- <Card>
+ <Card contrast={state.contrast}>
{/*adicionar funcionalidade ao botao de entrar*/}
<CommentsArea
recursoId={id}
@@ -373,7 +377,7 @@ const StyledAppBarContainer = styled.div`
`;
const Background = styled.div`
- background-color: #f4f4f4;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
color: #666;
font-family: "Roboto", sans serif;
padding-top: 30px;
@@ -405,8 +409,9 @@ const LearnObjectNotFound = styled.div`
`
const Card = styled.div`
- background-color: #fff;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
margin-bottom: 30px;
margin-right: auto;
margin-left: auto;