From 3e6d458f402597405486d1f5bba9769c38d6817f Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Fri, 13 Aug 2021 00:51:31 -0300
Subject: [PATCH] Implementing contrast on modals
---
src/Components/ButtonAvaliarRecurso.js | 12 +-
src/Components/CollectionReview.js | 2 +-
src/Components/ContactButtons/FollowButton.js | 14 +-
.../ContactButtons/FollowingButton.js | 9 +-
src/Components/EditarColecaoForm.js | 32 ++--
src/Components/Firulas.js | 79 ++++++++--
src/Components/GuardarModal.js | 5 +-
src/Components/LoginContainerFunction.js | 1 +
src/Components/ModalAvaliarRecurso.js | 46 +++---
src/Components/ModalConfirmarCuradoria.js | 36 ++---
src/Components/ModalConfirmarUnfollow.js | 29 ++--
src/Components/ModalEditarColecao.js | 9 +-
src/Components/ModalExcluirColecao.js | 24 ++-
src/Components/ReportColecaoForm.js | 12 +-
src/Components/ReportModal.js | 2 +-
src/Components/ReportRecursoForm.js | 5 +-
src/Components/ReportUserForm.js | 4 +-
src/Components/ResourceCardFunction.js | 13 +-
.../ResourcePageComponents/Footer.js | 55 ++++---
.../ResourcePageComponents/Sobre.js | 8 +-
.../ResourcePageComponents/TextoObjeto.js | 11 +-
src/Components/SignUpContainerFunction.js | 6 +-
.../UploadPageComponents/PartThree.js | 4 +-
src/Pages/ResourcePage.js | 148 +++++++++---------
24 files changed, 305 insertions(+), 261 deletions(-)
diff --git a/src/Components/ButtonAvaliarRecurso.js b/src/Components/ButtonAvaliarRecurso.js
index 8b307048..0a7d59a1 100644
--- a/src/Components/ButtonAvaliarRecurso.js
+++ b/src/Components/ButtonAvaliarRecurso.js
@@ -6,18 +6,20 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
export default function ButtonAvaliarRecurso (props) {
return (
- <StyledButton onClick={props.callback}>
- <ExpandMoreIcon/> AVALIAR RECURSO
+ <StyledButton contrast={props.contrast} onClick={props.callback}>
+ <ExpandMoreIcon style={{color: "white"}}/> AVALIAR RECURSO
</StyledButton>
)
}
const StyledButton = styled(Button)`
&:hover {
- background-color : #ed6f00 !important;
+ background-color: ${props => props.contrast === "" ? "#ed6f00" : "black"} !important;
}
- background-color : #ff7f00 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
+ color : ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important;
font-weight : 600 !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
.MuiSvgIcon-root {
diff --git a/src/Components/CollectionReview.js b/src/Components/CollectionReview.js
index 6194f4f9..bd35d031 100644
--- a/src/Components/CollectionReview.js
+++ b/src/Components/CollectionReview.js
@@ -125,7 +125,7 @@ export default function CollectionReview(props) {
value={Number(stars)}
readOnly
onClick={props.scrollToComment}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />}
/>
</Grid>
<Grid item justify="center" alignItems="center">
diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index 07c7c95e..138afd0c 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/src/Components/ContactButtons/FollowButton.js
@@ -158,11 +158,15 @@ export function NoIcon(props) {
{/*----------------------------------------------------------------------------*/}
{
state.currentUser.id !== '' ? (
- <NoIconButton onClick={() => handleFollow(props.followableID)}>seguir</NoIconButton>
+ <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 onClick={() => handleLogin(true)}>seguir</NoIconButton>
+ <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={() => handleLogin(true)}>seguir</NoIconButton>
)
}
</React.Fragment>
@@ -170,17 +174,11 @@ export function NoIcon(props) {
}
const NoIconButton = styled(Button)`
- .MuiButton-label {
- color : #00bcd4 !important;
- }
- background-color : #fff !important;
- border : solid 1px rgba(0,188,212,.85) !important;
font-size : 14px !important;
border-radius : 3px !important;
height : 36px !important;
min-width : 88px !important;
vertical-align : middle !important;
- color : #00bcd4 !important;
align-items : center !important;
text-align : center !important;
padding : 0 6px !important;
diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js
index fa2de050..94d5700b 100644
--- a/src/Components/ContactButtons/FollowingButton.js
+++ b/src/Components/ContactButtons/FollowingButton.js
@@ -121,7 +121,8 @@ export function NoIconFollowing(props) {
handleClose={() => { toggleModal(false) }}
handleConfirm={handleUnfollowPartTwo}
/>
- <NoIconButton
+ <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"}}
onMouseOver={() => toggleFollowingHover(true)}
onMouseLeave={() => toggleFollowingHover(false)}
onClick={() => handleUnfollowPartOne(props.followedID)}
@@ -159,17 +160,11 @@ export const StyledButton = styled(Button)`
`
const NoIconButton = styled(Button)`
- .MuiButton-label {
- color : #00bcd4 !important;
- }
- background-color : #fff !important;
- border : solid 1px rgba(0,188,212,.85) !important;
font-size : 14px !important;
border-radius : 3px !important;
height : 36px !important;
min-width : 88px !important;
vertical-align : middle !important;
- text-color : #00bcd4 !important;
align-items : center !important;
text-align : center !important;
padding : 0 6px !important;
diff --git a/src/Components/EditarColecaoForm.js b/src/Components/EditarColecaoForm.js
index f0ea1fdc..79bcc209 100644
--- a/src/Components/EditarColecaoForm.js
+++ b/src/Components/EditarColecaoForm.js
@@ -120,12 +120,12 @@ export default function EditarColecaoForm (props) {
style={{width:"100%"}}
/>
- <span style={{fontSize : "12px", color : "#b3b3b3"}}>Esta coleção é:</span>
- <StyledFormControl component="fieldset">
+ <span style={{fontSize : "12px"}}>Esta coleção é:</span>
+ <StyledFormControl contrast={props.contrast} component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7"/>} label={option.text} />
+ <FormControlLabel key={option.value} value={option.value} control={<Radio/>} label={option.text} />
)
}
</RadioGroup>
@@ -133,8 +133,8 @@ export default function EditarColecaoForm (props) {
<ButtonsDiv>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar type="submit">SALVAR</ButtonEnviar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar contrast={props.contrast} type="submit">SALVAR</ButtonEnviar>
</ButtonsDiv>
</form>
);
@@ -148,23 +148,23 @@ export const ButtonsDiv = styled.div`
`
export const ButtonCancelar = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
- color :#666 !important;
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
`
export const ButtonEnviar = styled(Button)`
- background-color : #673ab7 !important;
- color : #fff !important;
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -176,7 +176,6 @@ export const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
.MuiButton-label {
padding-right : 16px;
@@ -204,14 +203,15 @@ export const StyledTextField = styled(TextField)`
`
export const StyledFormControl = styled(FormControl)`
- display : block !important;
-
.MuiFormControlLabel-root {
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
.MuiIconButton-label {
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
+ display : block !important;
+
.PrivateRadioButtonIcon-checked {
color : orange;
}
diff --git a/src/Components/Firulas.js b/src/Components/Firulas.js
index c1951499..56dd661c 100644
--- a/src/Components/Firulas.js
+++ b/src/Components/Firulas.js
@@ -1,36 +1,83 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react';
+import { Store } from '../Store'
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 FavoriteIcon from '@material-ui/icons/Favorite';
import { putRequest } from './HelperFunctions/getAxiosConfig'
+import SignUpModal from './SignUpModal'
+import LoginModal from './LoginModal.js'
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
export default function Firulas(props) {
- const [liked, setLiked] = useState(props.liked)
+ const { state } = useContext(Store);
+ const [liked, toggleLiked] = useState(props.liked)
+ const [likesCount, setLikesCount] = useState(props.likesCount)
- function handleSuccess(data) {
- console.log(data);
- setLiked(!liked)
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+
+ function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+ }
+
+ function handleSuccessLike(data) {
+ toggleLiked(!liked)
+ setLikesCount(data.count)
+ }
+
+ const handleLike = () => {
+ if (!state.currentUser.id) {
+ handleLogin()
+ }
+ else {
+ const url = `/learning_objects/${props.recursoId}/like/`
+
+ putRequest(url, {}, handleSuccessLike, (error) => { console.log(error) })
+ }
+ }
+
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
+
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
+
+ function toggleLoginSnackbar(reason) {
+ if (reason === 'clickaway') {
+ return;
+ }
+ handleSuccessfulLogin(false);
}
return (
- <ConteinerFirulas>
+ <ConteinerFirulas style={props.contrast === "" ? {} : {color: "white"}}>
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ />
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
+ anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+ >
+ <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+ </Snackbar>
<Rating
name="customized-empty"
- value={props.rating * 10}
- precision={0.5}
+ value={props.rating}
readOnly
- style={props.contrast === "" ? { color: "#666", marginRight: "20px" } : { color: "yellow", marginRight: "20px" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit"/>}
/>
- <LikeCounter style={{ marginLeft: "-3px", display: "flex", alignItems: "center" }}>
- <span style={props.contrast === "" ? { color: "#666" } : { color: "white" }} >{props.likesCount}</span>
-
- <ButtonNoWidth disabled={true}>
- <FavoriteIcon style={{ color: liked ? "red" : props.contrast === "" ? "#666" : "white" }} />
+ <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>
</ConteinerFirulas>
)
diff --git a/src/Components/GuardarModal.js b/src/Components/GuardarModal.js
index ba73e5a5..38118f8a 100644
--- a/src/Components/GuardarModal.js
+++ b/src/Components/GuardarModal.js
@@ -157,6 +157,7 @@ export default function GuardarModal(props) {
creatingCol ?
(
<CriarColecaoForm
+ contrast={props.contrast}
handleClose={() => setCreating(false)}
finalize={postToCol}
/>
@@ -188,7 +189,7 @@ export default function GuardarModal(props) {
}
<h5>{collection.name}</h5>
</div>
- <GuardarBotao className={`${props.contrast}LinkColor ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { postToCol(collection.id) }}>GUARDAR</GuardarBotao>
+ <GuardarBotao className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { postToCol(collection.id) }}>GUARDAR</GuardarBotao>
</div>
)
}
@@ -200,7 +201,7 @@ export default function GuardarModal(props) {
)
}
<div style={{ display: "flex", justifyContent: "center" }}>
- <CriarColButton className={`${props.contrast}LinkColor ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
+ <CriarColButton className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
</div>
</ChooseColContainer>
)
diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index fd04a53f..699f3da6 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/src/Components/LoginContainerFunction.js
@@ -194,6 +194,7 @@ const ContainerStyled = styled.div`
display : flex;
flex-direction : column;
min-width : 440px;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
align : center;
padding : 10px;
diff --git a/src/Components/ModalAvaliarRecurso.js b/src/Components/ModalAvaliarRecurso.js
index 7795876d..8f8ca3ea 100644
--- a/src/Components/ModalAvaliarRecurso.js
+++ b/src/Components/ModalAvaliarRecurso.js
@@ -136,12 +136,12 @@ export default function ModalAvaliarRecurso(props) {
>
<Fade in={props.open}>
- <Container>
- <Header>
+ <Container contrast={props.contrast}>
+ <Header contrast={props.contrast}>
<h2>Você está avaliando o recurso
- <span style={{ fontWeight: "bolder" }}> {props.title}</span>
+ <span style={{ fontWeight: "bolder" }}> {props.title}</span>
</h2>
- <CloseModalButton handleClose={props.handleClose} />
+ <CloseModalButton contrast={props.contrast} handleClose={props.handleClose} />
</Header>
<Content>
@@ -162,8 +162,8 @@ export default function ModalAvaliarRecurso(props) {
</Grid>
<Grid item xs={2}>
<RadioGroup row onChange={(e) => { handleRadios(e, option.id) }}>
- <FormControlLabel value={"Sim"} control={<StyledRadio />} label="Não" />
- <FormControlLabel value={"Não"} control={<StyledRadio />} label="Sim" />
+ <FormControlLabel className={`${props.contrast}LinkColor`} value={"Sim"} control={<StyledRadio style={props.contrast === "" ? {} : {color: "white"}}/>} label="Não" />
+ <FormControlLabel className={`${props.contrast}LinkColor`} value={"Não"} control={<StyledRadio style={props.contrast === "" ? {} : {color: "white"}}/>} label="Sim" />
</RadioGroup>
</Grid>
</Grid>
@@ -188,8 +188,8 @@ export default function ModalAvaliarRecurso(props) {
<Grid item xs={12}>
<ButtonsDiv>
- <ButtonEnviarAvaliar disabled={buttonDisabled} onClick={() => { handleAvaliar() }}>ENVIAR AVALIAÇÂO</ButtonEnviarAvaliar>
- <GreyButton onClick={() => { handleCancel() }}>CANCELAR</GreyButton>
+ <ButtonEnviarAvaliar contrast={props.contrast} disabled={buttonDisabled} onClick={() => { handleAvaliar() }}>ENVIAR AVALIAÇÂO</ButtonEnviarAvaliar>
+ <GreyButton contrast={props.contrast} onClick={() => { handleCancel() }}>CANCELAR</GreyButton>
</ButtonsDiv>
</Grid>
</Grid>
@@ -209,7 +209,6 @@ const Content = styled.div`
padding : 10px 75px 0 75px;
overflow : visible;
max-width : 100%;
- color : #666;
font-size : 16px;
.main-content-text {
@@ -230,7 +229,7 @@ const Header = styled.div`
padding : 20px 75px 0 75px;
align-items : center;
justify-content : space-between;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
@media screen and (min-width : 990px) {
height : 64px;
@@ -262,21 +261,18 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : #fff;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
align : center;
display : flex;
flex-direction : column;
min-width : 240px;
- max-height : none;
+ max-height : 90%;
position : relative;
border-radius : 4px;
- max-width : 100%;
-
- @media screen and (max-width : 699px) {
- overflow : scroll;
- width : 100%;
- height : 100%;
- }
+ max-width : 90%;
+ overflow-y : scroll;
p {
margin : 0 0 10px;
@@ -320,13 +316,13 @@ const ButtonsDiv = styled.div`
`
const GreyButton = styled(Button)`
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background-color : ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : ""} !important;
}
max-height : 36px !important;
background-color : transparent !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important;
outline : none !important;
text-align : center !important;
font-weight : 600 !important;
@@ -335,10 +331,12 @@ const GreyButton = styled(Button)`
`
const ButtonEnviarAvaliar = styled(Button)`
- color : ${(props) => props.disabled ? "rgba(0,0,0,0.38)" : "rgba(255,255,255,0.87) !important"};
+ color : ${props => props.contrast === "" ? `${props.disabled ? `rgba(0,0,0,0.38)` : `rgba(255,255,255,0.87)`}` : `${props.disabled ? `white` : `yellow`}`} !important;
box-shadow : ${(props) => props.disabled ? "none !important" : "0 2px 5px 0 rgba(0,0,0,.26) !important"};
font-weight : 600 !important;
- background-color : ${(props) => props.disabled ? "#e9e9e9 !important" : "#ff7f00 !important"};
+ background-color : ${props => props.contrast === "" ? `${props.disabled ? "#e9e9e9 !important" : "#ff7f00 !important"}` : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
margin-left : 8px !important;
margin-right : 8px !important;
diff --git a/src/Components/ModalConfirmarCuradoria.js b/src/Components/ModalConfirmarCuradoria.js
index 046106be..8acc01ad 100644
--- a/src/Components/ModalConfirmarCuradoria.js
+++ b/src/Components/ModalConfirmarCuradoria.js
@@ -76,7 +76,7 @@ export default function ModalConfirmarCuradoriaOpen(props) {
}}
>
<Fade in={props.open}>
- <Container recusado={!props.aceito}>
+ <Container contrast={props.contrast} recusado={!props.aceito}>
<Header>
<span style={{ width: "32px" }} />
<h2>Recurso a ser {props.aceito ? 'aprovado' : 'recusado'}</h2>
@@ -104,17 +104,8 @@ export default function ModalConfirmarCuradoriaOpen(props) {
)
}
<ButtonsDiv>
- {
- props.aceito ?
- (
- <ButtonEnviarAvaliar onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
- )
- :
- (
- <ButtonEnviarAvaliar onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
- )
- }
- <GreyButton onClick={handleCancel}>NÃO, ALTERAR AVALIAÇÃO</GreyButton>
+ <ButtonEnviarAvaliar contrast={props.contrast} onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
+ <GreyButton contrast={props.contrast} onClick={handleCancel}>NÃO, ALTERAR AVALIAÇÃO</GreyButton>
</ButtonsDiv>
</Content>
</Container>
@@ -128,7 +119,7 @@ const Content = styled.div`
padding : 30px;
overflow : visible;
max-width : 100%;
- color : #666;
+ color : inherit;
font-size : 16px;
text-align : start;
.reason-offensive {
@@ -146,7 +137,7 @@ const Header = styled.div`
align-items : center;
max-height : none;
justify-content : space-between;
- color : #666;
+ color : inherit;
h2 {
font-size : 30px;
@@ -172,7 +163,8 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : #fff;
+ background-color : ${props => props.contrast === "" ? "white" : "black"} !important;
+ color : ${props => props.contrast === "" ? "#666" : "white"} !important;
align : center;
display : flex;
flex-direction : column;
@@ -180,6 +172,7 @@ const Container = styled.div`
position : relative;
border-radius : 4px;
max-width : 100%;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
max-height : ${props => props.recusado ? 'none' : '370px'};
@media screen and (max-width : 699px) {
@@ -209,13 +202,13 @@ const ButtonsDiv = styled.div`
`
const GreyButton = styled(Button)`
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background-color : ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : ""} !important;
}
max-height : 36px !important;
background-color : transparent !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important;
outline : none !important;
text-align : center !important;
font-weight : 600 !important;
@@ -229,10 +222,11 @@ const GreyButton = styled(Button)`
`
const ButtonEnviarAvaliar = styled(Button)`
- color : rgba(255,255,255,0.87) !important;
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ color : ${props => props.contrast === "" ? `rgba(255,255,255,0.87)` : `yellow`} !important;
font-weight : 600 !important;
- background-color : #ff7f00 !important;
+ background-color : ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
margin-left : 8px !important;
margin-right : 8px !important;
diff --git a/src/Components/ModalConfirmarUnfollow.js b/src/Components/ModalConfirmarUnfollow.js
index 7d349e08..e8cd5d1e 100644
--- a/src/Components/ModalConfirmarUnfollow.js
+++ b/src/Components/ModalConfirmarUnfollow.js
@@ -31,12 +31,14 @@ const HeaderDiv = styled.div`
margin-top : 20px;
margin-bottpm : 10px
font-weight : normal;
- color : #666
}
`
const ContentContainer = styled.div`
+color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
+background-color: ${props => props.contrast === "" ? "white !important" : "black !important"};
+border: ${props => props.contrast === "" ? "1px solid black !important" : "1px solid white !important"};
+
box-sizing : border-box;
- background-color : white;
max-width : none;
align : center;
display : flex;
@@ -46,7 +48,6 @@ const ContentContainer = styled.div`
position : relative;
padding : 10px;
border-radius : 4px;
- color : #666;
@media screen and (max-width : 899px) {
width : 100%;
@@ -54,19 +55,21 @@ const ContentContainer = styled.div`
}
`
const ButtonCancelar = styled(Button)`
+color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+
&:hover {
background-color : rgba(158,158,158,0.2) !important;
}
- background-color : #fff !important;
- color : #666 !important;
- text-decoration : none !important;
outline : none !important;
text-align : center !important;
`
const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
border-radius : 3px !important;
`
@@ -91,21 +94,21 @@ export default function ModalConfirmarUnfollow (props) {
}}
>
<Fade in={props.open}>
- <ContentContainer>
+ <ContentContainer contrast={props.contrast}>
<HeaderDiv>
<span style={{width:"32px"}}/>
<h3>
{text.header}
</h3>
- <CloseModalButton handleClose={props.handleClose}/>
+ <CloseModalButton contrast={props.contrast} handleClose={props.handleClose}/>
</HeaderDiv>
<div style={{display : "flex", flexDirection : "column", padding : "20px 30px"}}>
<div style={{marginTop : "0", textAlign : "center", marginBottom : "20px"}}>
- <span style={{fontSize : "14px", color : "#666"}}>{text.explanation}</span>
+ <span style={{fontSize : "14px"}}>{text.explanation}</span>
</div>
<div style={{display : "flex", flexDirection : "row", justifyContent: "space-evenly"}}>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonConfirmar onClick={props.handleConfirm}>DEIXAR DE SEGUIR </ButtonConfirmar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonConfirmar contrast={props.contrast} onClick={props.handleConfirm}>DEIXAR DE SEGUIR </ButtonConfirmar>
</div>
</div>
</ContentContainer>
diff --git a/src/Components/ModalEditarColecao.js b/src/Components/ModalEditarColecao.js
index 6101bdbe..b9fe9bd9 100644
--- a/src/Components/ModalEditarColecao.js
+++ b/src/Components/ModalEditarColecao.js
@@ -45,14 +45,14 @@ export default function ModalEditarColecao (props) {
}}
>
<Fade in={props.open}>
- <Container>
+ <Container contrast={props.contrast}>
<Header>
<span style={{width:"32px"}}/>
<h2>Editar Coleção</h2>
<CloseModalButton handleClose={props.handleClose} id={props.id}/>
</Header>
<Content style={{paddingTop : "0"}}>
- <EditarColecaoForm id={props.id} handleClose={props.handleClose} finalize={finalize}/>
+ <EditarColecaoForm contrast={props.contrast} id={props.id} handleClose={props.handleClose} finalize={finalize}/>
</Content>
</Container>
</Fade>
@@ -77,7 +77,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -97,7 +96,9 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : white;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important;
align : center;
display : flex;
flex-direction : column;
diff --git a/src/Components/ModalExcluirColecao.js b/src/Components/ModalExcluirColecao.js
index f23b819d..40e0561d 100644
--- a/src/Components/ModalExcluirColecao.js
+++ b/src/Components/ModalExcluirColecao.js
@@ -21,8 +21,8 @@ import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
-import GreyButton from './GreyButton.js'
-import PurpleButton from './PurpleButton.js'
+import { ButtonCancelar, ButtonEnviar } from './EditarColecaoForm';
+import CloseModalButton from './CloseModalButton'
import SnackbarComponent from './SnackbarComponent'
import {deleteRequest} from './HelperFunctions/getAxiosConfig'
@@ -57,22 +57,17 @@ export default function ModalExcluirColecao (props) {
<Fade in={props.open}>
<>
<SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Coleção excluída com sucesso"}/>
- <Container>
+ <Container contrast={props.contrast}>
<Header>
<h2>Tem certeza que deseja excluir esta Coleção?</h2>
+ <CloseModalButton handleClose={props.handleClose} id={props.id}/>
</Header>
<Content>
<p>A exclusão de uma coleção é permanente. Não é possível desfazer.</p>
<ButtonsDiv>
- <GreyButton
- callback={props.handleClose}
- text={"CANCELAR"}
- />
- <PurpleButton
- callback={handleDelete}
- text={"EXCLUIR"}
- />
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar contrast={props.contrast} onClick={handleDelete}>EXCLUIR</ButtonEnviar>
</ButtonsDiv>
</Content>
</Container>
@@ -112,7 +107,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -131,7 +125,10 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
- background-color : white;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important;
+
max-width : none;
align : center;
display : flex;
@@ -141,7 +138,6 @@ const Container = styled.div`
position : relative;
padding : 10px;
border-radius : 4px;
- color : #666;
@media screen and (max-width : 899px) {
width : 100%;
diff --git a/src/Components/ReportColecaoForm.js b/src/Components/ReportColecaoForm.js
index e03ce942..46a4dccb 100644
--- a/src/Components/ReportColecaoForm.js
+++ b/src/Components/ReportColecaoForm.js
@@ -80,17 +80,18 @@ export default function ReportColecaoForm (props) {
return (
<form onSubmit={(e) => handleSubmit(e)} style={{textAlign : "left"}}>
- <StyledFormControl component="fieldset">
+ <StyledFormControl contrast={props.contrast} component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel classes={{label: `${props.contrast}Text`}} value={option.value} control={<StyledRadio/>} label={option.text} />
+ <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} />
)
}
</RadioGroup>
</StyledFormControl>
<StyledTextField
+ contrast={props.contrast}
id = {"report-text-field"}
label={"Escreva mais sobre o problema"}
value = {moreInfo.value}
@@ -129,8 +130,10 @@ const StyledTextField = styled(TextField)`
}
`
const ButtonEnviar = styled(Button)`
- background-color : #673ab7 !important;
- color : #fff !important;
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -142,7 +145,6 @@ const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
.MuiButton-label {
padding-right : 16px;
diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js
index 78f0cb8b..321f3f6f 100644
--- a/src/Components/ReportModal.js
+++ b/src/Components/ReportModal.js
@@ -33,7 +33,7 @@ import SnackbarComponent from './SnackbarComponent.js'
function CloseModalButton (props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon/>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
</StyledCloseModalButton>
)
}
diff --git a/src/Components/ReportRecursoForm.js b/src/Components/ReportRecursoForm.js
index fd13bf77..411b42a8 100644
--- a/src/Components/ReportRecursoForm.js
+++ b/src/Components/ReportRecursoForm.js
@@ -77,17 +77,18 @@ export default function ReportRecursoForm (props) {
return (
<form onSubmit={(e) => handleSubmit(e)} style={{textAlign : "left"}}>
- <StyledFormControl component="fieldset">
+ <StyledFormControl contrast={props.contrast} component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel classes={{label: `${props.contrast}Text`}} value={option.value} control={<StyledRadio/>} label={option.text} />
+ <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} />
)
}
</RadioGroup>
</StyledFormControl>
<StyledTextField
+ contrast={props.contrast}
id = {"report-text-field"}
label={"Escreva mais sobre o problema"}
value = {moreInfo.value}
diff --git a/src/Components/ReportUserForm.js b/src/Components/ReportUserForm.js
index 8ffa3301..b25ced4d 100644
--- a/src/Components/ReportUserForm.js
+++ b/src/Components/ReportUserForm.js
@@ -89,6 +89,7 @@ export default function ReportForm (props) {
</StyledFormControl>
<StyledTextField
+ contrast={props.contrast}
id = {"Escreva mais sobre o problema"}
label={"Escreva mais sobre o problema"}
type = {"text"}
@@ -120,9 +121,6 @@ export const ButtonsDiv = styled.div`
export const ButtonCancelar = styled(Button)`
color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index 16b4c362..615432c6 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -16,7 +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, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
+import { Store } from '../Store'
import "./carousel.css";
import Card from '@material-ui/core/Card';
import { apiDomain } from '../env';
@@ -40,6 +41,7 @@ import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
export default function ResourceCardFunction(props) {
+ const { state } = useContext(Store);
const [thumbnail, setThumbnail] = useState(null)
// eslint-disable-next-line
const [label, setLabel] = useState(props.type)
@@ -81,9 +83,14 @@ export default function ResourceCardFunction(props) {
}
const handleLike = () => {
- const url = `/learning_objects/${props.id}/like/`
+ if (!state.currentUser.id) {
+ handleLogin()
+ }
+ else {
+ const url = `/learning_objects/${props.id}/like/`
- putRequest(url, {}, handleSuccessLike, (error) => { console.log(error) })
+ putRequest(url, {}, handleSuccessLike, (error) => { console.log(error) })
+ }
}
const handleLogin = () => {
diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js
index 490e1b10..e47e0724 100644
--- a/src/Components/ResourcePageComponents/Footer.js
+++ b/src/Components/ResourcePageComponents/Footer.js
@@ -49,7 +49,7 @@ function ReportButton(props) {
(
<ButtonGrey contrast={props.contrast} onClick={props.userLoggedIn ? props.toggleReport : props.openLogin}>
<span className="button-text">
- <ErrorIcon className="icon" /> Reportar abuso ou erro
+ <ErrorIcon className="icon" />Reportar abuso ou erro
</span>
</ButtonGrey>
)
@@ -57,7 +57,7 @@ function ReportButton(props) {
(
<ButtonGrey contrast={props.contrast}>
<span className="button-text-report">
- <ErrorIcon className="icon" /> Você já reportou este recurso
+ <ErrorIcon className="icon" />Você já reportou este recurso
</span>
</ButtonGrey>
)
@@ -70,7 +70,7 @@ function DownloadButton(props) {
(
<ButtonOrange contrast={props.contrast} onClick={props.enableDownload}>
<span className="text">
- <GetAppIcon className="icon" /> Baixar Recurso
+ <GetAppIcon className="icon" />Baixar Recurso
</span>
</ButtonOrange>
)
@@ -79,7 +79,7 @@ function DownloadButton(props) {
(
<ButtonOrange contrast={props.contrast} onClick={props.toggleRedirect}>
<span className="text">
- <CallMadeIcon className="icon" /> Abrir Recurso
+ <CallMadeIcon className="icon" />Abrir Recurso
</span>
</ButtonOrange>
)
@@ -193,8 +193,8 @@ export default function Footer(props) {
<Grid item xs={3}>
<ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
<span className="button-text">
- <ShareIcon className="icon" /> Compartilhar
- </span>
+ <ShareIcon className="icon" />Compartilhar
+ </span>
</ButtonGrey>
</Grid>
@@ -203,7 +203,7 @@ export default function Footer(props) {
<ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
<span className="button-text">
<FolderIcon className="icon" />Guardar
- </span>
+ </span>
</ButtonGrey>
</Grid>
@@ -226,7 +226,7 @@ export default function Footer(props) {
<ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
<span className="button-text">
<FolderIcon className="icon" />Guardar
- </span>
+ </span>
</ButtonGrey>
</Grid>
@@ -241,7 +241,7 @@ export default function Footer(props) {
</Grid>
<Grid item xs={1}>
- <Button aria-haspopup="true" onClick={handleClick} style={{ color: "#666" }}>
+ <Button aria-haspopup="true" onClick={handleClick} style={props.contrast === "" ? { color: "#666" } : {color: "yellow"}}>
<MoreVertIcon />
</Button>
<Menu
@@ -251,19 +251,20 @@ export default function Footer(props) {
open={Boolean(anchorEl)}
onClose={handleClose}
>
- <MenuItem>
+ <MenuItem className={`${props.contrast}BackColor`}>
<ReportButton
+ contrast={props.contrast}
userLoggedIn={state.currentUser.id === '' ? false : true}
toggleReport={() => { toggleReport(true) }}
openLogin={handleLogin}
complained={props.complained}
/>
</MenuItem>
- <MenuItem>
+ <MenuItem className={`${props.contrast}BackColor`}>
<ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
<span className="button-text">
<ShareIcon className="icon" /> Compartilhar
- </span>
+ </span>
</ButtonGrey>
</MenuItem>
</Menu>
@@ -284,17 +285,17 @@ const OpcoesDiv = styled.div`
display : flex;
align-items : center;
height : 65px;
- background-color: ${props => props.contrast === "" ? "#fafafa" : "black"};
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
`
const StyledGrid = styled(Grid)`
@media screen and (min-width: 990px) {
- padding-left : 15px !important;
+ padding-left : 12px !important;
}
.MuiGrid-item {
- padding-right : 15px;
- padding-left : 15px;
+ padding-right : 12px;
+ padding-left : 12px;
display : flex;
justify-content : center;
}
@@ -302,17 +303,16 @@ const StyledGrid = styled(Grid)`
const ButtonGrey = styled(Button)`
&:hover {
- background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
+ background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : "rgba(255,255,0,0.24)"} !important;
}
- background-color : transparent !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"};
+ background-color : ${props => props.contrast === "" ? "transparent" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
outline : none !important;
text-align : center !important;
.icon {
- color: ${props => props.contrast === "" ? "inherit !important" : "white !important"};
+ color: ${props => props.contrast === "" ? "inherit" : "white"} !important;
vertical-align : middle !important;
font-weight : normal !important;
font-style : normal !important;
@@ -331,7 +331,6 @@ const ButtonGrey = styled(Button)`
cursor : pointer;
line-height : 36px;
text-align : center;
- color : currentColor;
white-space : nowrap;
text-transform : uppercase;
font-weight : 600;
@@ -358,10 +357,10 @@ const ButtonOrange = styled(Button)`
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: ${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"};
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"} !important;
text-transform : uppercase !important;
outline : none !important;
/* max-height: 36px !important; */
@@ -385,7 +384,7 @@ const ButtonOrange = styled(Button)`
}
.text {
- color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
font-size : 14px;
font-weight : 600;
}
diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js
index 8aeaeb02..24afcaf1 100644
--- a/src/Components/ResourcePageComponents/Sobre.js
+++ b/src/Components/ResourcePageComponents/Sobre.js
@@ -220,7 +220,7 @@ export default function Sobre(props) {
</Grid>
<Grid item xs={windowWidth > 990 ? 3 : 12}>
- <MetasObjeto>
+ <MetasObjeto contrast={state.contrast}>
<div className="enviado-por">
Enviado por:
</div>
@@ -244,14 +244,14 @@ export default function Sobre(props) {
followed ? (
<>
<NoIconFollowing contrast={state.contrast} followedID={props.id} toggleFollowed={toggleFollowed} />
- <ContactCardOptions followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} />
+ <ContactCardOptions contrast={state.contrast} followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} />
</>
)
:
(
<>
<NoIcon contrast={state.contrast} followableID={props.id} toggleFollowed={toggleFollowed} />
- <ContactCardOptions followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} />
+ <ContactCardOptions contrast={state.contrast} followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} />
</>
)
}
@@ -306,7 +306,7 @@ const CollapseControl = styled.div`
`
const SobreDiv = styled.div`
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
padding-left : 3% !important;
padding-top : 3% !important;
.titulo {
diff --git a/src/Components/ResourcePageComponents/TextoObjeto.js b/src/Components/ResourcePageComponents/TextoObjeto.js
index 9f51afa4..f40324cf 100644
--- a/src/Components/ResourcePageComponents/TextoObjeto.js
+++ b/src/Components/ResourcePageComponents/TextoObjeto.js
@@ -186,10 +186,10 @@ export default function TextoObjeto (props) {
{
(checkAccessLevel('publisher') || props.stateRecurso === "draft") &&
<Link to={"/editar-recurso/" + props.recursoId}>
- <Button style={{color : "#666"}}><EditIcon/></Button>
+ <Button className={`${props.contrast}LinkColor`} style={{color : "#666"}}><EditIcon/></Button>
</Link>
}
- <Button style={{color : "#666"}} onClick={() => {handleDelete()}}><DeleteForeverIcon/></Button>
+ <Button className={`${props.contrast}LinkColor`} style={{color : "#666"}} onClick={() => {handleDelete()}}><DeleteForeverIcon/></Button>
</React.Fragment>
}
@@ -200,7 +200,7 @@ export default function TextoObjeto (props) {
}
const TextoObjetoDiv = styled.div`
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
padding : 20px 20px 0 20px;
display : flex;
flex-direction : column;
@@ -252,11 +252,10 @@ const TextoObjetoDiv = styled.div`
.alert-warning {
color: ${props => props.contrast === "" ? "#8a6d3b" : "white"};
- background-color : #fcf8e3;
- border-color : #faebcc;
+ background-color : ${props => props.contrast === "" ? "#fcf8e3" : "black"};
+ border: 1px solid ${props => props.contrast === "" ? "#faebcc" : "white"};
padding: 15px;
margin-bottom: 20px;
- border: 1px solid transparent;
border-radius: 4px;
font-size : 14px;
}
diff --git a/src/Components/SignUpContainerFunction.js b/src/Components/SignUpContainerFunction.js
index 3917b519..5af5f4f7 100644
--- a/src/Components/SignUpContainerFunction.js
+++ b/src/Components/SignUpContainerFunction.js
@@ -279,14 +279,16 @@ const ContainerStyled = styled.div`
display : flex;
flex-direction : column;
min-width : 450px;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+ overflow-y: scroll;
- max-height : none;
+ max-height : 90%;
position : relative;
padding : 10px;
@media ${device.mobileM} {
width : 100%;
min-width : unset;
- height : 100%;
+ height : 90%;
min-width : unset !important;
}
diff --git a/src/Components/UploadPageComponents/PartThree.js b/src/Components/UploadPageComponents/PartThree.js
index 2067d044..9e7f2712 100644
--- a/src/Components/UploadPageComponents/PartThree.js
+++ b/src/Components/UploadPageComponents/PartThree.js
@@ -218,8 +218,8 @@ export default function PartThree(props) {
<div style={{margin:"0 auto", width: "304px"}}>
{
//<ReCaptcha sitekey={process.env.REACT_APP_SITE_KEY} verifyCallback={captchaVerified} /> //when key set in env
- <ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production
- //<ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} /> //test key, from google, do not use this one on production
+ //<ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production
+ <ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} /> //test key, from google, do not use this one on production
}
</div>
</Grid>
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 8ddf18df..0acc55f9 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -212,22 +212,21 @@ export default function LearningObjectPage(props) {
<Grid container spacing={2}>
{recurso.object_type === "Vídeo" && !recurso.link ? (
<Grid item xs={12}>
- <Card contrast={state.contrast}>
- <VideoPlayer
- contrast={state.contrast}
- link={recurso.link}
- urlVerified={false}
- videoUrl={recurso.default_attachment_location}
- videoType={recurso.default_mime_type}
- />
- </Card>
+ <Card contrast={state.contrast}>
+ <VideoPlayer
+ contrast={state.contrast}
+ link={recurso.link}
+ urlVerified={false}
+ videoUrl={recurso.default_attachment_location}
+ videoType={recurso.default_mime_type}
+ />
+ </Card>
</Grid>
) : (
urlVerify(recurso.link) && (
<Grid item xs={12}>
<Card contrast={state.contrast}>
- contrast={state.contrast}
- <VideoPlayer link={recurso.link} urlVerified={true} />
+ <VideoPlayer contrast={state.contrast} link={recurso.link} urlVerified={true} />
</Card>
</Grid>
)
@@ -235,70 +234,70 @@ export default function LearningObjectPage(props) {
<Grid item xs={12}>
<Card contrast={state.contrast}>
- <div>
- {recurso.thumbnail && (
- <img alt="" src={apiDomain + recurso.thumbnail} />
- )}
+ <div>
+ {recurso.thumbnail && (
+ <img alt="recurso" src={apiDomain + recurso.thumbnail}/>
+ )}
- <TextoObjeto
+ <TextoObjeto
+ contrast={state.contrast}
+ name={recurso.name}
+ rating={recurso.review_average}
+ recursoId={id}
+ likesCount={recurso.likes_count}
+ likedBool={recurso.liked}
+ objType={recurso.object_type}
+ subjects={recurso.subjects}
+ educationalStages={recurso.educational_stages}
+ viewCount={recurso.views_count}
+ downloadCount={recurso.downloads_count}
+ id={recurso.publisher ? recurso.publisher.id : undefined}
+ stateRecurso={recurso.state}
+ attachments={recurso.attachments}
+ audioUrl={recurso.default_attachment_location}
+ />
+ </div>
+
+ <Footer
contrast={state.contrast}
- name={recurso.name}
- rating={recurso.review_average}
recursoId={id}
- likesCount={recurso.likes_count}
- likedBool={recurso.liked}
- objType={recurso.object_type}
- subjects={recurso.subjects}
- educationalStages={recurso.educational_stages}
- viewCount={recurso.views_count}
- downloadCount={recurso.downloads_count}
- id={recurso.publisher ? recurso.publisher.id : undefined}
- stateRecurso={recurso.state}
- attachments={recurso.attachments}
- audioUrl={recurso.default_attachment_location}
+ downloadableLink={recurso.default_attachment_location}
+ handleSnackbar={handleSnackbar}
+ link={recurso.link}
+ title={recurso.name}
+ thumb={recurso.thumbnail}
+ currPageLink={window.location.href}
+ complained={recurso.complained}
/>
- </div>
-
- <Footer
- contrast={state.contrast}
- recursoId={id}
- downloadableLink={recurso.default_attachment_location}
- handleSnackbar={handleSnackbar}
- link={recurso.link}
- title={recurso.name}
- thumb={recurso.thumbnail}
- currPageLink={window.location.href}
- complained={recurso.complained}
- />
</Card>
</Grid>
<Grid item xs={12}>
<Card contrast={state.contrast}>
- {/*todo: change render method on additional item info*/}
- <Sobre
- avatar={
- recurso.publisher
- ? recurso.publisher.avatar
- ? apiDomain + recurso.publisher.avatar
- : noAvatar
- : noAvatar
- }
- publisher={
- recurso.publisher ? recurso.publisher.name : undefined
- }
- id={recurso.publisher ? recurso.publisher.id : undefined}
- description={recurso.description}
- author={recurso.author}
- tags={recurso.tags}
- attachments={recurso.attachments}
- language={recurso.language}
- mimeType={recurso.default_mime_type}
- createdAt={recurso.created_at}
- updatedAt={recurso.updated_at}
- license={recurso.license}
- followed={recurso.publisher ? recurso.publisher.followed : undefined}
- />
+ {/*todo: change render method on additional item info*/}
+ <Sobre
+ avatar={
+ recurso.publisher
+ ? recurso.publisher.avatar
+ ? apiDomain + recurso.publisher.avatar
+ : noAvatar
+ : noAvatar
+ }
+ publisher={
+ recurso.publisher ? recurso.publisher.name : undefined
+ }
+ id={recurso.publisher ? recurso.publisher.id : undefined}
+ description={recurso.description}
+ author={recurso.author}
+ tags={recurso.tags}
+ attachments={recurso.attachments}
+ language={recurso.language}
+ mimeType={recurso.default_mime_type}
+ createdAt={recurso.created_at}
+ updatedAt={recurso.updated_at}
+ license={recurso.license}
+ followed={recurso.publisher ? recurso.publisher.followed : undefined}
+ />
</Card>
</Grid>
@@ -307,10 +306,10 @@ export default function LearningObjectPage(props) {
<Card contrast={state.contrast}>
{/*adicionar funcionalidade ao botao de entrar*/}
<CommentsArea
- recursoId={id}
- handleSnackbar={handleSnackbar}
- objType={recurso.object_type}
- recurso={true}
+ recursoId={id}
+ handleSnackbar={handleSnackbar}
+ objType={recurso.object_type}
+ recurso={true}
/>
</Card>
</Grid>
@@ -320,15 +319,16 @@ export default function LearningObjectPage(props) {
{recurso.state === "submitted" && checkAccessLevel("curator") && (
<AppBar
position="fixed"
- color="primary"
className={classes.appBar}
+ style={state.contrast === "" ? {backgroundColor: "white"} : {backgroundColor: "black", borderTop: "1px solid white"}}
>
- <StyledAppBarContainer>
+ <StyledAppBarContainer contrast={state.contrast}>
<div className="container">
<div className="botoes">
<ButtonAvaliarRecurso
+ contrast={state.contrast}
callback={() => {
- handleModalCuradoria(true);
+ handleModalCuradoria(true);
}}
/>
</div>
@@ -348,7 +348,6 @@ const useStyles = makeStyles((theme) => ({
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)",
},
}));
@@ -360,6 +359,7 @@ const StyledAppBarContainer = styled.div`
justify-content : flex-start
margin-right : auto;
margin-left : auto;
+ padding: 10px;
@media screen and (min-width: 1200px) {
width : 1170px;
}
--
GitLab