diff --git a/src/Components/Carousel.js b/src/Components/Carousel.js
index e27963d397b986289fd8047aa01a06d1ecd57af7..71e6e5da76c5e5c1b46a52daa9ed095617a27c95 100644
--- a/src/Components/Carousel.js
+++ b/src/Components/Carousel.js
@@ -82,7 +82,7 @@ p{
.tmpl1{
- background-color: #00BCD4;
+ background: ${props => props.contrast === "" ? "#00BCD4" : "black"};
height: inherit;
width: inherit;
display: flex;
@@ -111,7 +111,7 @@ p{
width: inherit;
display: flex;
align-items: center;
- background-color: #673AB7;
+ background: ${props => props.contrast === "" ? "#673AB7" : "black"};
.title{
padding-bottom: 50px;
@@ -162,7 +162,7 @@ p{
width: inherit;
display: flex;
align-items: center;
- background-color: #E81F4F;
+ background: ${props => props.contrast === "" ? "#E81F4F" : "black"};
.title{
position: relative;
@@ -228,7 +228,7 @@ p{
width: inherit;
display: flex;
align-items: center;
- background-color: #FF7F00;
+ background: ${props => props.contrast === "" ? "#FF7F00" : "black"};
h2{
padding-bottom: 20px;
@@ -260,7 +260,7 @@ p{
width: inherit;
display: flex;
align-items: center;
- background-color: #1AB9DE;
+ background: ${props => props.contrast === "" ? "#1AB9DE" : "black"};
.title{
display: table-row;
@@ -293,7 +293,7 @@ p{
width: inherit;
display: flex;
align-items: center;
- background-color: #673AB7;
+ background: ${props => props.contrast === "" ? "#673AB7" : "black"};
.box-text-1{
h3{
@@ -366,7 +366,7 @@ p{
width: inherit;
display: flex;
align-items: center;
- background-color: #E81F4F;
+ background: ${props => props.contrast === "" ? "#E81F4F" : "black"};
.title{
h2{
@@ -434,232 +434,226 @@ const CarouselStyled = styled(Carousel)`
`
-
-
-class TermsCarousel extends Component {
- render() {
- return (
- <CarouselStyled
- showThumbs= {false}
- showStatus= {false}
- transitionTime={1000}
-
- width={"1366px"}
-
- >
- <div >
- <Slide>
- <div className="tmpl1">
- <div className="container">
- <Grid container spacing={0}>
- <Grid item xs={6} >
- <div className="box-text">
- <p>A Plataforma Integrada MEC RED é parte do Compromisso 6 do 3º Plano de Ação da Parceria para Governo Aberto (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”.</p>
- </div>
- </Grid>
- <Grid style={{display:"flex",justifyContent:"center"}} item xs={6}>
- <div className="box-image">
- <img src={Handshake} alt="handshake"/>
- </div>
- </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
-
- </div>
- <div>
- <Slide>
- <div className="tmpl2">
- <div className="container">
- <div className="title">
- <h2>O que é a Plataforma Integrada MEC RED e como ela está organizada?</h2>
- <div className="images">
- <div className="arrow">
- <img src={Arrow_O} alt="Arrow_O"/>
- </div>
- <div className="circle">
- <img src={Arrow_O_1} alt="Arrow_O_1"/>
- </div>
- </div>
- </div>
- <Grid container>
- <Grid className="box-text" item xs={6}>
- <p>Uma plataforma interativa, colaborativa e criada em software livre, que disponibiliza conteúdos do acervo do MEC e indica conteúdos de parceiros com o objetivo de formar uma rede ativa de educadores interessados em usar, criar e compartilhar recursos educacionais digitais.</p>
- </Grid>
- <Grid className="box-text" item xs={6}>
- <p><strong>Repositório</strong> de recursos educacionais digitais que permite aos usuários cadastrados a publicação de seus materiais e <strong>Referatório</strong> que aponta links para conteúdos em sites externos.</p>
- </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
- </div>
- <div>
- <Slide>
- <div className="tmpl3">
- <div className="container">
- <Grid className="title" container spacing={1}>
- <Grid item xs={12}>
- <h3>Os recursos educacionais disponibilizados<br/> podem ser de dois tipos:</h3>
- </Grid>
- </Grid>
- <Grid className="box-text1" container spacing={1}>
- <Grid className="Text" item xs={8}>
- <div className="content">
- <img src={Aberto} alt="Aberto"/>
- <p><strong>Abertos</strong>: recursos sem nenhuma restrição de acesso e<br/> com flexibilidade quanto ao uso ou reuso.</p>
- </div>
- <div className="content">
- <img src={Fechado} alt="Fechado"/>
- <p><strong>Fechados</strong>: recursos com alguma restrição de acesso, uso<br/> ou reuso, como aqueles que, para acesso, há demanda de<br/> cadastro ou que têm licenças restritivas.</p>
- </div>
- </Grid>
- <Grid className="box-text2" item xs={4}>
- <div className="content">
- <img src={Arrow_down} alt="Arrow_down"/>
- <p>Como repositório, a Plataforma hospeda somente Recursos Educacionais Abertos (REA). Todo conteúdo inserido por usuários deve ser aberto.</p>
- </div>
- <div className="content">
- <img alt="" className="twoArrow" src={Arrow_double}/>
- <p>Como referatório, a Plataforma aponta links para parceiros, e<br/> esses recursos podem ser abertos ou fechados.</p>
- </div>
- </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
- </div>
- <div>
- <Slide>
- <div class="tmpl4">
- <div class="container">
- <Grid container spacing={5}>
- <Grid item xs={6}>
- <h2>Como se cadastrar?</h2>
- <div>
- <p>Para criar uma conta, o usuário deverá clicar no botão “Cadastre-se” na página inicial da Plataforma e fazer um cadastro utilizando um endereço de e-mail e criando uma senha.</p>
- </div>
- </Grid>
- <Grid item xs={2} style={{alignSelf:"center"}}> <img style={{width:"150px",height:"150px"}} src={Pessoa} alt="Pessoa" /> </Grid>
- <Grid item xs={2} style={{alignSelf:"center"}}> <img style={{width:"150px",height:"150px"}} src={Email} alt="Email" /> </Grid>
- <Grid item xs={2} style={{alignSelf:"center"}}> <img style={{width:"150px",height:"150px"}} src={Seguranca} alt="Seguranca" /> </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
+export default function TermsCarousel({ contrast }) {
+ return (
+ <CarouselStyled
+ showThumbs={false}
+ showStatus={false}
+ transitionTime={1000}
+
+ width={"1366px"}
+
+ >
+ <div >
+ <Slide contrast={contrast}>
+ <div className="tmpl1">
+ <div className="container">
+ <Grid container spacing={0}>
+ <Grid item xs={6} >
+ <div className="box-text">
+ <p>A Plataforma Integrada MEC RED é parte do Compromisso 6 do 3º Plano de Ação da Parceria para Governo Aberto (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”.</p>
+ </div>
+ </Grid>
+ <Grid style={{ display: "flex", justifyContent: "center" }} item xs={6}>
+ <div className="box-image">
+ <img src={Handshake} alt="handshake" />
+ </div>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ </Slide>
+
+ </div>
+ <div>
+ <Slide contrast={contrast}>
+ <div className="tmpl2">
+ <div className="container">
+ <div className="title">
+ <h2>O que é a Plataforma Integrada MEC RED e como ela está organizada?</h2>
+ <div className="images">
+ <div className="arrow">
+ <img src={Arrow_O} alt="Arrow_O" />
+ </div>
+ <div className="circle">
+ <img src={Arrow_O_1} alt="Arrow_O_1" />
+ </div>
</div>
- <div>
- <Slide>
- <div class="tmpl5">
- <div class="container">
- <Grid container justify="space-evenly" spacing={12}>
- <Grid style={{paddingRight: "40px"}} item xs={6}>
- <div class="title">
- <img src={Like} alt= "Like"/>
- <h2>O que publicar?</h2>
- </div>
- <img src={Line} alt="Line"/>
- <div class="box-text">
- <p>Conteúdos de cunho educacional e pertinentes ao assunto no qual estão inseridos, de autoria do usuário, de autoria coletiva (com consentimento dos demais autores) ou que estejam no domínio público. </p>
- </div>
- </Grid>
- <Grid item xs={6}>
- <div class= "title">
- <img src={Unlike} alt="Unlike"/>
- <h2>O que não publicar?</h2>
- </div>
- <img src={Line} alt="Line"/>
- <div class="box-text">
- <p>Materiais ofensivos, pornográficos, relacionados a atividades ilegais, que invadam a privacidade de terceiros, que violem a legislação de Direito Autoral ou os Direitos Humanos. Propagandas, conteúdos com vírus, spam ou comentários abusivos.</p>
- </div>
- </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
- </div>
- <div>
- <Slide>
- <div className="tmpl6">
- <div className="container">
- <Grid container>
- <Grid className="box-text-1" item xs={7}>
- <h3>Direitos do autor e licenças de uso</h3>
- <p>Ao inserir um novo material de sua autoria no Repositório, o usuário deverá escolher um dos tipos de licença aberta disponíveis na Plataforma:</p>
- <div className="licences">
- <Grid className="row" container>
- <Grid item xs={6}>
- <p>CC-BY</p>
- </Grid>
- <Grid item xs={6}>
- <p>CC-BY-SA</p>
- </Grid>
- </Grid>
- <Grid className="row" container>
- <Grid item xs={6}>
- <p>CC-BY-NC</p>
- </Grid>
- <Grid item xs={6}>
- <p>CC-BY-NC-SA</p>
- </Grid>
- </Grid>
- </div>
- </Grid>
- <Grid className="box-text-2" item xs={5}>
- <Grid className="row" container>
- <Grid item xs={2}>
- <p className="licenses_type">CC-BY</p>
- </Grid>
- <Grid item xs={10}>
- <p> significa que o autor permite que distribuam, remixem, adaptem e criem a partir do seu trabalho, desde que lhe atribuam o devido crédito pela criação original</p>
- </Grid>
- </Grid>
- <Grid className="row" container>
- <Grid item xs={2}>
- <p className="licenses_type">NC</p>
- </Grid>
- <Grid item xs={10}>
- <p> indica que as criações elaboradas a partir do trabalho do autor podem ser utilizadas somente para fins não comerciais (se não houver esta especificação, o novo recurso poderá ser utilizado para fins comerciais)</p>
- </Grid>
- </Grid>
- <Grid className="row" container>
- <Grid item xs={2}>
- <p className="licenses_type">SA</p>
- </Grid>
- <Grid item xs={10}>
- <p> quer dizer que as novas criações devem ser licenciadas sob termos idênticos aos do trabalho original</p>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
- </div>
- <div>
- <Slide>
- <div class="tmpl7">
- <div class="container">
- <Grid container>
- <Grid className="title" item xs={4}>
- <h2>Respeitamos<br/> a sua privacidade</h2>
- </Grid>
- <Grid className="box-text" item xs={8}>
- <p>Além de solicitar alguns dados pessoais para o cadastro, a Plataforma coleta, de forma automática, os dados não pessoais relativos à interação dos usuários no sistema. Esses dados nunca serão fornecidos para fins comerciais, assim como nunca serão compartilhados quaisquer dados pessoais que possam identificar o usuário.</p>
- <p>Os dados anônimos poderão ser utilizados para fins de melhoria da plataforma, transparência e para o uso em pesquisas.</p>
- </Grid>
- </Grid>
- <div class="rodape col-md-12">
- <p>Dúvidas? Leia a íntegra dos <span ng-click="hide()">Termos de Uso</span> ou fale conosco por meio do <a style={{color: "#fff"}} href="contato">formulário de contato</a>.</p>
- </div>
- </div>
- </div>
- </Slide>
- </div>
- </CarouselStyled>
- )
- }
+ </div>
+ <Grid container>
+ <Grid className="box-text" item xs={6}>
+ <p>Uma plataforma interativa, colaborativa e criada em software livre, que disponibiliza conteúdos do acervo do MEC e indica conteúdos de parceiros com o objetivo de formar uma rede ativa de educadores interessados em usar, criar e compartilhar recursos educacionais digitais.</p>
+ </Grid>
+ <Grid className="box-text" item xs={6}>
+ <p><strong>Repositório</strong> de recursos educacionais digitais que permite aos usuários cadastrados a publicação de seus materiais e <strong>Referatório</strong> que aponta links para conteúdos em sites externos.</p>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ </Slide>
+ </div>
+ <div>
+ <Slide contrast={contrast}>
+ <div className="tmpl3">
+ <div className="container">
+ <Grid className="title" container spacing={1}>
+ <Grid item xs={12}>
+ <h3>Os recursos educacionais disponibilizados<br /> podem ser de dois tipos:</h3>
+ </Grid>
+ </Grid>
+ <Grid className="box-text1" container spacing={1}>
+ <Grid className="text" item xs={8}>
+ <div className="content">
+ <img src={Aberto} alt="Aberto" />
+ <p><strong>Abertos</strong>: recursos sem nenhuma restrição de acesso e<br /> com flexibilidade quanto ao uso ou reuso.</p>
+ </div>
+ <div className="content">
+ <img src={Fechado} alt="Fechado" />
+ <p><strong>Fechados</strong>: recursos com alguma restrição de acesso, uso<br /> ou reuso, como aqueles que, para acesso, há demanda de<br /> cadastro ou que têm licenças restritivas.</p>
+ </div>
+ </Grid>
+ <Grid className="box-text2" item xs={4}>
+ <div className="content">
+ <img src={Arrow_down} alt="Arrow_down" />
+ <p>Como repositório, a Plataforma hospeda somente Recursos Educacionais Abertos (REA). Todo conteúdo inserido por usuários deve ser aberto.</p>
+ </div>
+ <div className="content">
+ <img alt="" className="twoArrow" src={Arrow_double} />
+ <p>Como referatório, a Plataforma aponta links para parceiros, e<br /> esses recursos podem ser abertos ou fechados.</p>
+ </div>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ </Slide>
+ </div>
+ <div>
+ <Slide contrast={contrast}>
+ <div class="tmpl4">
+ <div class="container">
+ <Grid container spacing={5}>
+ <Grid item xs={6}>
+ <h2>Como se cadastrar?</h2>
+ <div>
+ <p>Para criar uma conta, o usuário deverá clicar no botão “Cadastre-se” na página inicial da Plataforma e fazer um cadastro utilizando um endereço de e-mail e criando uma senha.</p>
+ </div>
+ </Grid>
+ <Grid item xs={2} style={{ alignSelf: "center" }}> <img style={{ width: "150px", height: "150px" }} src={Pessoa} alt="Pessoa" /> </Grid>
+ <Grid item xs={2} style={{ alignSelf: "center" }}> <img style={{ width: "150px", height: "150px" }} src={Email} alt="Email" /> </Grid>
+ <Grid item xs={2} style={{ alignSelf: "center" }}> <img style={{ width: "150px", height: "150px" }} src={Seguranca} alt="Seguranca" /> </Grid>
+ </Grid>
+ </div>
+ </div>
+ </Slide>
+ </div>
+ <div>
+ <Slide contrast={contrast}>
+ <div class="tmpl5">
+ <div class="container">
+ <Grid container justify="space-evenly" spacing={12}>
+ <Grid style={{ paddingRight: "40px" }} item xs={6}>
+ <div class="title">
+ <img src={Like} alt="Like" />
+ <h2>O que publicar?</h2>
+ </div>
+ <img src={Line} alt="Line" />
+ <div class="box-text">
+ <p>Conteúdos de cunho educacional e pertinentes ao assunto no qual estão inseridos, de autoria do usuário, de autoria coletiva (com consentimento dos demais autores) ou que estejam no domínio público. </p>
+ </div>
+ </Grid>
+ <Grid item xs={6}>
+ <div class="title">
+ <img src={Unlike} alt="Unlike" />
+ <h2>O que não publicar?</h2>
+ </div>
+ <img src={Line} alt="Line" />
+ <div class="box-text">
+ <p>Materiais ofensivos, pornográficos, relacionados a atividades ilegais, que invadam a privacidade de terceiros, que violem a legislação de Direito Autoral ou os Direitos Humanos. Propagandas, conteúdos com vírus, spam ou comentários abusivos.</p>
+ </div>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ </Slide>
+ </div>
+ <div>
+ <Slide contrast={contrast}>
+ <div className="tmpl6">
+ <div className="container">
+ <Grid container>
+ <Grid className="box-text-1" item xs={7}>
+ <h3>Direitos do autor e licenças de uso</h3>
+ <p>Ao inserir um novo material de sua autoria no Repositório, o usuário deverá escolher um dos tipos de licença aberta disponíveis na Plataforma:</p>
+ <div className="licences">
+ <Grid className="row" container>
+ <Grid item xs={6}>
+ <p>CC-BY</p>
+ </Grid>
+ <Grid item xs={6}>
+ <p>CC-BY-SA</p>
+ </Grid>
+ </Grid>
+ <Grid className="row" container>
+ <Grid item xs={6}>
+ <p>CC-BY-NC</p>
+ </Grid>
+ <Grid item xs={6}>
+ <p>CC-BY-NC-SA</p>
+ </Grid>
+ </Grid>
+ </div>
+ </Grid>
+ <Grid className="box-text-2" item xs={5}>
+ <Grid className="row" container>
+ <Grid item xs={2}>
+ <p className="licenses_type">CC-BY</p>
+ </Grid>
+ <Grid item xs={10}>
+ <p> significa que o autor permite que distribuam, remixem, adaptem e criem a partir do seu trabalho, desde que lhe atribuam o devido crédito pela criação original</p>
+ </Grid>
+ </Grid>
+ <Grid className="row" container>
+ <Grid item xs={2}>
+ <p className="licenses_type">NC</p>
+ </Grid>
+ <Grid item xs={10}>
+ <p> indica que as criações elaboradas a partir do trabalho do autor podem ser utilizadas somente para fins não comerciais (se não houver esta especificação, o novo recurso poderá ser utilizado para fins comerciais)</p>
+ </Grid>
+ </Grid>
+ <Grid className="row" container>
+ <Grid item xs={2}>
+ <p className="licenses_type">SA</p>
+ </Grid>
+ <Grid item xs={10}>
+ <p> quer dizer que as novas criações devem ser licenciadas sob termos idênticos aos do trabalho original</p>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ </Slide>
+ </div>
+ <div>
+ <Slide contrast={contrast}>
+ <div class="tmpl7">
+ <div class="container">
+ <Grid container>
+ <Grid className="title" item xs={4}>
+ <h2>Respeitamos<br /> a sua privacidade</h2>
+ </Grid>
+ <Grid className="box-text" item xs={8}>
+ <p>Além de solicitar alguns dados pessoais para o cadastro, a Plataforma coleta, de forma automática, os dados não pessoais relativos à interação dos usuários no sistema. Esses dados nunca serão fornecidos para fins comerciais, assim como nunca serão compartilhados quaisquer dados pessoais que possam identificar o usuário.</p>
+ <p>Os dados anônimos poderão ser utilizados para fins de melhoria da plataforma, transparência e para o uso em pesquisas.</p>
+ </Grid>
+ </Grid>
+ <div class="rodape col-md-12">
+ <p>Dúvidas? Leia a íntegra dos <span ng-click="hide()">Termos de Uso</span> ou fale conosco por meio do <a style={{ color: "#fff" }} href="contato">formulário de contato</a>.</p>
+ </div>
+ </div>
+ </div>
+ </Slide>
+ </div>
+ </CarouselStyled>
+ )
}
-
-export default TermsCarousel;
diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index 245eecbccd12abba7a88c5d76643d9302328c0d9..0a318eda1d552232c9564e02b63fe7d6f08a18ed 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/src/Components/ContactButtons/FollowButton.js
@@ -16,12 +16,12 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useContext, useState} from 'react'
-import {Store} from '../../Store'
+import React, { useContext, useState } from 'react'
+import { Store } from '../../Store'
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import styled from 'styled-components'
import Button from '@material-ui/core/Button';
-import {putRequest} from '../HelperFunctions/getAxiosConfig'
+import { putRequest } from '../HelperFunctions/getAxiosConfig'
import LoginModal from './../LoginModal.js'
import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
@@ -31,9 +31,9 @@ function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
-export default function FollowButton (props) {
+export default function FollowButton(props) {
- const {state} = useContext(Store)
+ const { state } = useContext(Store)
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
@@ -50,18 +50,18 @@ export default function FollowButton (props) {
if (reason === 'clickaway') {
return;
}
-
- handleSuccessfulLogin(false);
+
+ handleSuccessfulLogin(false);
}
- function handleSuccess (data) {
+ function handleSuccess(data) {
props.toggleFollowed()
}
const handleFollow = (followerID) => {
if (followerID !== undefined) {
const url = `/users/${followerID}/follow/`
- putRequest(url, {}, handleSuccess, (error) => {console.log(error)})
+ putRequest(url, {}, handleSuccess, (error) => { console.log(error) })
}
}
@@ -80,31 +80,45 @@ export default function FollowButton (props) {
{/*----------------------------------------------------------------------------*/}
{
state.currentUser.id !== '' ? (
- <StyledButton onClick={() => handleFollow(props.followerID)}>
- <PersonAddIcon style={{fontSize : "24px",
- display : "inline-block",
- verticalAlign : "middle",
- color : "#00bcd4"}}/>
+ <StyledButton contrast={props.contrast} onClick={() => handleFollow(props.followerID)}>
+ <PersonAddIcon style={props.contrast === "" ? {
+ fontSize: "24px",
+ display: "inline-block",
+ verticalAlign: "middle",
+ color: "#00bcd4"
+ } : {
+ fontSize: "24px",
+ display: "inline-block",
+ verticalAlign: "middle",
+ color: "white"
+ }} />
SEGUIR
</StyledButton>
)
- :
- (
- <StyledButton onClick={() => handleLogin(true)}>
- <PersonAddIcon style={{fontSize : "24px",
- display : "inline-block",
- verticalAlign : "middle",
- color : "#00bcd4"}}/>
+ :
+ (
+ <StyledButton contrast={props.contrast} onClick={() => handleLogin(true)}>
+ <PersonAddIcon style={props.contrast === "" ? {
+ fontSize: "24px",
+ display: "inline-block",
+ verticalAlign: "middle",
+ color: "#00bcd4"
+ } : {
+ fontSize: "24px",
+ display: "inline-block",
+ verticalAlign: "middle",
+ color: "white"
+ }} />
SEGUIR
- </StyledButton>
- )
+ </StyledButton>
+ )
}
</React.Fragment>
)
}
-export function NoIcon (props) {
- const {state} = useContext(Store)
+export function NoIcon(props) {
+ const { state } = useContext(Store)
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
@@ -121,14 +135,14 @@ export function NoIcon (props) {
if (reason === 'clickaway') {
return;
}
-
- handleSuccessfulLogin(false);
+
+ handleSuccessfulLogin(false);
}
const handleFollow = (followerID) => {
if (followerID !== undefined) {
const url = `/users/${followerID}/follow/`
- putRequest(url, {}, (data) => {props.toggleFollowed()}, (error) => {console.log(error)})
+ putRequest(url, {}, (data) => { props.toggleFollowed() }, (error) => { console.log(error) })
}
}
@@ -149,10 +163,10 @@ export function NoIcon (props) {
state.currentUser.id !== '' ? (
<NoIconButton onClick={() => handleFollow(props.followableID)}>seguir</NoIconButton>
)
- :
- (
- <NoIconButton onClick={() => handleLogin(true)}>seguir</NoIconButton>
- )
+ :
+ (
+ <NoIconButton onClick={() => handleLogin(true)}>seguir</NoIconButton>
+ )
}
</React.Fragment>
)
@@ -169,7 +183,7 @@ const NoIconButton = styled(Button)`
height : 36px !important;
min-width : 88px !important;
vertical-align : middle !important;
- text-color : #00bcd4 !important;
+ color : #00bcd4 !important;
align-items : center !important;
text-align : center !important;
padding : 0 6px !important;
@@ -177,9 +191,13 @@ const NoIconButton = styled(Button)`
`
const StyledButton = styled(Button)`
- background-color : #fff !important;
- border : 1px solid #00bcd4 !important;
- color : #00bcd4 !important;
+ &:hover {
+ background-color: ${(props) => props.contrast === "" ? "#fff !important" : "rgba(255,255,0,0.24) !important"};
+ }
+ background-color: ${(props) => (props.contrast === "" ? "#fff !important" : "black !important")};
+ color: ${(props) => (props.contrast === "" ? "#00bcd4 !important" : "yellow !important")};
+ border: ${(props) => (props.contrast === "" ? "1px solid #00bcd4 !important" : "1px solid white !important")};
+ text-decoration: ${(props) => (props.contrast === "" ? "none !important" : "underline !important")};
font-size : 14px !important;
display : inline-block !important;
position : relative !important;
@@ -206,6 +224,5 @@ const StyledButton = styled(Button)`
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
- text-decoration : none !important;
overflow : hidden !important;
`
diff --git a/src/Components/ContactButtons/FollowersCountButton.js b/src/Components/ContactButtons/FollowersCountButton.js
index 43dfbfb8ea0b7c21f92b0f778a8b3b05b0e87eea..bda34bbf553bb250f17475e5d1ea357865be5521 100644
--- a/src/Components/ContactButtons/FollowersCountButton.js
+++ b/src/Components/ContactButtons/FollowersCountButton.js
@@ -11,7 +11,7 @@ export default function FollowersCountButton (props) {
}
return (
- <FollowersButton>
+ <FollowersButton contrast={props.contrast}>
{FollowerButtonSpan()}
</FollowersButton>
)
@@ -21,7 +21,7 @@ export default function FollowersCountButton (props) {
const FollowersButton = styled(Button)`
right : 0 !important;
text-transform : none !important;
- color : #666 !important;
+ color: ${(props) => (props.contrast === "" ? "#666 !important" : "yellow !important")};
font-size : 13px !important;
font-weight : 400 !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
@@ -31,7 +31,7 @@ const FollowersButton = styled(Button)`
min-height : 36px !important;
vertical-align : middle !important;
text-align : center !important;
- border : 0 !important;
+ border: ${(props) => (props.contrast === "" ? "0 !important" : "1px solid white !important")};
border-radius : 3px !important;
- background-color : rgb(250,250,250) !important;
+ background-color: ${(props) => (props.contrast === "" ? "#fff !important" : "black !important")};
`
diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js
index 424e8f63a12cb10a40ae64112431b2152bb0c668..7d60218a7e9754211a1431a0ecb271b76339e25f 100644
--- a/src/Components/ContactButtons/FollowingButton.js
+++ b/src/Components/ContactButtons/FollowingButton.js
@@ -16,20 +16,20 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useState} from 'react'
+import React, { useState } from 'react'
import styled from 'styled-components'
import Button from '@material-ui/core/Button';
import FollowingIcon from '../../img/how_to_reg-24px.png'
import ModalConfirmarUnfollow from '../ModalConfirmarUnfollow.js'
-import {putRequest} from '../HelperFunctions/getAxiosConfig'
+import { putRequest } from '../HelperFunctions/getAxiosConfig'
-export default function FollowingButton (props) {
+export default function FollowingButton(props) {
const [modalOpen, toggleModal] = useState(false)
const [unfollowID, setUnfollowID] = useState(-1)
const [followingHover, handleFollowingHover] = useState(false)
- const toggleFollowingHover = (value) => {handleFollowingHover(value)}
+ const toggleFollowingHover = (value) => { handleFollowingHover(value) }
const handleUnfollowPartOne = (followedID) => {
setUnfollowID(followedID)
@@ -37,53 +37,54 @@ export default function FollowingButton (props) {
}
- function handleSuccess (data) {
+ function handleSuccess(data) {
props.toggleFollowed()
toggleModal(false)
}
const handleUnfollowPartTwo = () => {
const url = `/users/${unfollowID}/follow/`
- putRequest(url, {}, handleSuccess, (error) => {console.log(error)})
+ putRequest(url, {}, handleSuccess, (error) => { console.log(error) })
}
return (
<React.Fragment>
<ModalConfirmarUnfollow open={modalOpen}
- handleClose={() => {toggleModal(false)}}
- handleConfirm = {handleUnfollowPartTwo}
+ handleClose={() => { toggleModal(false) }}
+ handleConfirm={handleUnfollowPartTwo}
/>
<StyledButton
+ contrast={props.contrast}
onMouseOver={() => toggleFollowingHover(true)}
onMouseLeave={() => toggleFollowingHover(false)}
onClick={() => handleUnfollowPartOne(props.followedID)}
>
{
- followingHover?
- (
- [
- <span>DEIXAR DE SEGUIR</span>
- ]
- )
- : (
- [
- <>
- <img src={FollowingIcon} alt='ícone seguindo'/><span>Seguindo</span>
- </>
- ]
- )
- }
+ followingHover ?
+ (
+ [
+ <span>DEIXAR DE SEGUIR</span>
+ ]
+ )
+ : (
+ [
+ <>
+ <img src={FollowingIcon} alt='ícone seguindo' /><span>Seguindo</span>
+ </>
+ ]
+ )
+ }
</StyledButton>
</React.Fragment>
)
}
-export function NoIconFollowing (props) {
+export function NoIconFollowing(props) {
const [modalOpen, toggleModal] = useState(false)
const [unfollowID, setUnfollowID] = useState(-1)
const [followingHover, handleFollowingHover] = useState(false)
- const toggleFollowingHover = (value) => {handleFollowingHover(value)}
+ const toggleFollowingHover = (value) => { handleFollowingHover(value) }
const handleUnfollowPartOne = (followedID) => {
setUnfollowID(followedID)
@@ -91,21 +92,21 @@ export function NoIconFollowing (props) {
}
- function handleSuccess (data) {
+ function handleSuccess(data) {
props.toggleFollowed()
toggleModal(false)
}
const handleUnfollowPartTwo = () => {
const url = `/users/${unfollowID}/follow/`
- putRequest(url, {}, handleSuccess, (error) => {console.log(error)})
+ putRequest(url, {}, handleSuccess, (error) => { console.log(error) })
}
return (
<React.Fragment>
<ModalConfirmarUnfollow open={modalOpen}
- handleClose={() => {toggleModal(false)}}
- handleConfirm = {handleUnfollowPartTwo}
+ handleClose={() => { toggleModal(false) }}
+ handleConfirm={handleUnfollowPartTwo}
/>
<NoIconButton
onMouseOver={() => toggleFollowingHover(true)}
@@ -113,18 +114,18 @@ export function NoIconFollowing (props) {
onClick={() => handleUnfollowPartOne(props.followedID)}
>
{
- followingHover?
- (
- [
- <span>DEIXAR DE SEGUIR</span>
- ]
- )
- : (
- [
- <span>SEGUINDO</span>
- ]
- )
- }
+ followingHover ?
+ (
+ [
+ <span>DEIXAR DE SEGUIR</span>
+ ]
+ )
+ : (
+ [
+ <span>SEGUINDO</span>
+ ]
+ )
+ }
</NoIconButton>
</React.Fragment>
)
@@ -132,8 +133,8 @@ export function NoIconFollowing (props) {
export const StyledButton = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ background-color: ${(props) => (props.contrast === "" ? "#00bcd4 !important" : "black !important")};
+ color: ${(props) => (props.contrast === "" ? "#fff !important" : "yellow !important")};
display : inline-block !important;
position : relative !important;
cursor : pointer !important;
@@ -151,7 +152,7 @@ export const StyledButton = styled(Button)`
-moz-user-select : none !important;
-ms-user-select : none !important;
user-select : none !important;
- border : 0 !important;
+ border: ${(props) => (props.contrast === "" ? "0 !important" : "1px solid white !important")};
padding : 0 6px !important;
margin : 6px 8px !important;
white-space : nowrap !important;
@@ -161,12 +162,12 @@ export const StyledButton = styled(Button)`
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
- text-decoration : none !important;
+ text-decoration: ${(props) => (props.contrast === "" ? "none !important" : "underline !important")};
overflow : hidden !important;
&:hover {
- background-color : #fff !important;
- color : #00bcd4 !important;
- border : 1px solid #00bcd4 !important;
+ background-color: ${(props) => props.contrast === "" ? "#fff !important" : "rgba(255,255,0,0.24) !important"};
+ color: ${(props) => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ border: ${(props) => props.contrast === "" ? "1px solid #00bcd4 !important" : "1px solid white !important"};
}
img {
height : 24px;
diff --git a/src/Components/ContactForm.js b/src/Components/ContactForm.js
index 3eb206b99c272fd8fcf179c1808f778ecbcd3152..3e4ea4abdc7985754789751137deef337a2d4224 100644
--- a/src/Components/ContactForm.js
+++ b/src/Components/ContactForm.js
@@ -16,11 +16,11 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useState, useContext} from 'react'
-import {Store} from '../Store.js'
+import React, { useState, useContext } from 'react'
+import { Store } from '../Store.js'
import styled from 'styled-components';
import FormInput from "../Components/FormInput.js"
-import {postRequest} from './HelperFunctions/getAxiosConfig'
+import { postRequest } from './HelperFunctions/getAxiosConfig'
import LoginModal from './LoginModal.js'
import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './SignUpModal'
@@ -31,14 +31,12 @@ function Alert(props) {
}
const Button = styled.button`
-
- background-color: #00acc1;
- color:#fff;
+ background-color: ${props => props.contrast === "" ? "#00acc1" : "black"};
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"};
font-family: Roboto,sans-serif;
font-size: 14px;
font-weight: 500;
height: 36px;
- border-radius: 3px;
padding-left: 16px;
padding-right: 16px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
@@ -54,7 +52,7 @@ const Button = styled.button`
border-radius: 3px;
box-sizing: border-box;
user-select: none;
- border: 0;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
padding: 0 6px;
padding-right: 6px;
padding-left: 6px;
@@ -67,230 +65,245 @@ const Button = styled.button`
font-style: inherit;
font-variant: inherit;
font-family: inherit;
- text-decoration: none;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
overflow: hidden;
transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
-
+ :hover{
+ background-color: ${props => props.contrast === "" ? "rgba(0, 172, 193, 0.65)" : "rgba(255,255,0,0.24)"};
+ }
`
- function validateNome (nome) {
- let flag = false
- if(nome.length === 0) {
- flag = true
- }
-
- return flag
+function validateNome(nome) {
+ let flag = false
+ if (nome.length === 0) {
+ flag = true
}
+ return flag
+}
- function validateMensagem (mensagem) {
- let flag = false
- if(mensagem.length === 0) {
- flag = true
- }
- return flag
+function validateMensagem(mensagem) {
+ let flag = false
+ if (mensagem.length === 0) {
+ flag = true
}
- function validateEmail (email) {
- let flag = false
- if (email.split("").filter(x => x === "@").length !== 1 || email.length < 7) {
- flag = true
- }
- return flag
+ return flag
+}
+
+function validateEmail(email) {
+ let flag = false
+ if (email.split("").filter(x => x === "@").length !== 1 || email.length < 7) {
+ flag = true
}
+ return flag
+}
- function Formulario (props){
- const {state} = useContext(Store)
- const [loginOpen, setLogin] = useState(false)
- const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
- const [signUpOpen, setSignUp] = useState(false)
-
- const [nome, handleNome] = useState(
- {
- dict : {
- key:false,
- value:""
- }
- })
- const [email, handleEmail] = useState(
- {
- dict : {
- key:false,
- value:""
- }
+function Formulario(props) {
+ const { state } = useContext(Store)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+ const [signUpOpen, setSignUp] = useState(false)
+
+ const [nome, handleNome] = useState(
+ {
+ dict: {
+ key: false,
+ value: ""
+ }
+ })
+ const [email, handleEmail] = useState(
+ {
+ dict: {
+ key: false,
+ value: ""
+ }
+ })
+ const [mensagem, handleMensagem] = useState(
+ {
+ dict: {
+ key: false,
+ value: ""
+ }
})
- const [mensagem, handleMensagem] = useState(
- {
- dict : {
- key: false,
- value:""
- }
- })
-
-
- const preencheNome = (e) => {
- const aux2 = e.target.value
- const flag = validateNome(aux2)
- handleNome({...nome, dict : {
- key : flag,
- value : e.target.value
- }})
- console.log(nome)
- }
- const preencheEmail = (e) => {
- const aux = e.target.value
- const flag = validateEmail(aux)
- handleEmail({...email, dict : {
- key : flag,
- value : e.target.value
- }})
- console.log(email)
- }
- const preencheMensagem = (e) => {
- const msg = e.target.value
- console.log(msg)
- let flag = validateMensagem(msg)
- handleMensagem({...mensagem, dict : {
- key : flag,
- value : msg
- }})
- console.log(mensagem)
- }
+ const preencheNome = (e) => {
+ const aux2 = e.target.value
+ const flag = validateNome(aux2)
+ handleNome({
+ ...nome, dict: {
+ key: flag,
+ value: e.target.value
+ }
+ })
+ console.log(nome)
+ }
- const limpaTudo = () => {
+ const preencheEmail = (e) => {
+ const aux = e.target.value
+ const flag = validateEmail(aux)
+ handleEmail({
+ ...email, dict: {
+ key: flag,
+ value: e.target.value
+ }
+ })
+ console.log(email)
+ }
- handleNome({
- dict : {
- key: false,
- value:""
- }}
- );
+ const preencheMensagem = (e) => {
+ const msg = e.target.value
+ console.log(msg)
+ let flag = validateMensagem(msg)
+ handleMensagem({
+ ...mensagem, dict: {
+ key: flag,
+ value: msg
+ }
+ })
+ console.log(mensagem)
+ }
- handleEmail({
- dict : {
- key: false,
- value:""
- }}
- )
+ const limpaTudo = () => {
- handleMensagem({
- dict : {
+ handleNome({
+ dict: {
key: false,
- value:""
- }}
- )
-
+ value: ""
+ }
}
+ );
- const handleSignUp = () => {
- setSignUp(!signUpOpen)
+ handleEmail({
+ dict: {
+ key: false,
+ value: ""
+ }
}
+ )
- const handleLogin = () => {
- setLogin(!loginOpen)
+ handleMensagem({
+ dict: {
+ key: false,
+ value: ""
+ }
}
+ )
- const toggleSnackbar = (event, reason) => {
- if (reason === 'clickaway') {
- return;
- }
+ }
- handleSuccessfulLogin(false);
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
+
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
+
+ const toggleSnackbar = (event, reason) => {
+ if (reason === 'clickaway') {
+ return;
}
- const onSubmit = (e) => {
- //on submit we should prevent the page from refreshing
- e.preventDefault(); //though this is arguable
- console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key ))
- // Se não houver erro em nunhum dos campos E nenhum dos campos for vazio: a página faz o contato com o backend e os campos ficam em branco no formulário
- if (!(nome.dict.key || email.dict.key || mensagem.dict.key )) {
- let payload = {
- contact : {
- name: nome.dict.value,
- email: email.dict.value,
- message: mensagem.dict.value
- }
- }
- postRequest(`/contacts`, payload, (data) => {limpaTudo()}, (error) => {console.log(error)})
+ handleSuccessfulLogin(false);
+ }
+
+ const onSubmit = (e) => {
+ //on submit we should prevent the page from refreshing
+ e.preventDefault(); //though this is arguable
+ console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key))
+ // Se não houver erro em nunhum dos campos E nenhum dos campos for vazio: a página faz o contato com o backend e os campos ficam em branco no formulário
+ if (!(nome.dict.key || email.dict.key || mensagem.dict.key)) {
+ let payload = {
+ contact: {
+ name: nome.dict.value,
+ email: email.dict.value,
+ message: mensagem.dict.value
}
+ }
+ postRequest(`/contacts`, payload, (data) => { limpaTudo() }, (error) => { console.log(error) })
}
+ }
- return(
- <React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
- {/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
- openSnackbar={() => { handleSuccessfulLogin(true) }}
+ return (
+ <React.Fragment>
+ <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
+ anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+ >
+ <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+ </Snackbar>
+ {/*-------------------------------MODALS---------------------------------------*/}
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ {/*----------------------------------------------------------------------------*/}
+
+
+ <form onSubmit={e => onSubmit(e)}>
+ <FormInput
+ contrast={props.contrast}
+
+ inputType={"text"}
+ name={"nome"}
+ value={nome.dict.value}
+ placeholder={"Nome *"}
+ error={nome.dict.key}
+ help={nome.dict.key ? "insira seu nome para o contato " : ""}
+ handleChange={e => preencheNome(e)}
/>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
- {/*----------------------------------------------------------------------------*/}
-
-
- <form onSubmit={e => onSubmit(e)}>
- <FormInput
- inputType={"text"}
- name={"nome"}
- value={nome.dict.value}
- placeholder={"Nome *"}
- error = {nome.dict.key}
- help = {nome.dict.key ? "insira seu nome para o contato " : ""}
- handleChange={e => preencheNome(e)}
- />
- <br/>
- <FormInput
- inputType={"text"}
- name={"email"}
- value={email.dict.value}
- placeholder={"E-mail *"}
- error = {email.dict.key}
- help = {email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""}
- handleChange={e => preencheEmail(e)}
- />
- <br/>
- <br/>
- <FormInput
- inputType={"text"}
- name={"mensagem"}
- value={mensagem.dict.value}
- placeholder={"Mensagem *"}
- multi = {true}
- rows = "5"
- rowsMax = "6"
- error = {mensagem.dict.key}
- help = {mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crítica ou dúvida." : "Escreva sua mensagem no campo acima."}
- handleChange={e => preencheMensagem(e)}
- />
- <br/>
- <br/>
- <div style={{display: "flex", justifyContent: "center"}}>
- {
- state.currentUser.id !== '' ? (
- <Button onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
- )
+ <br />
+ <FormInput
+ contrast={props.contrast}
+ inputType={"text"}
+ name={"email"}
+ value={email.dict.value}
+ placeholder={"E-mail *"}
+ error={email.dict.key}
+ help={email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""}
+ handleChange={e => preencheEmail(e)}
+ />
+ <br />
+ <br />
+ <FormInput
+ contrast={props.contrast}
+ inputType={"text"}
+ name={"mensagem"}
+ value={mensagem.dict.value}
+ placeholder={"Mensagem *"}
+ multi={true}
+ rows="5"
+ rowsMax="6"
+ error={mensagem.dict.key}
+ help={mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crítica ou dúvida." : "Escreva sua mensagem no campo acima."}
+ handleChange={e => preencheMensagem(e)}
+ />
+ <br />
+ <br />
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ {
+ state.currentUser.id !== '' ? (
+ <Button contrast={props.contrast} onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
+ )
:
(
- <Button onClick={e => {e.preventDefault(); handleLogin(true);}} >ENVIAR MENSAGEM</Button>
+ <Button contrast={props.contrast} onClick={e => { e.preventDefault(); handleLogin(true); }} >ENVIAR MENSAGEM</Button>
)
- }
- </div>
- </form>
- </React.Fragment>
+ }
+ </div>
+ </form>
+ </React.Fragment>
- );
+ );
}
export default Formulario;
diff --git a/src/Components/ExpansionPanels.js b/src/Components/ExpansionPanels.js
index 017816eb2c4160545b7b9597c206a28eec9b3b1d..2647eb81b05249de73b2d9edb162eb699ef56247 100644
--- a/src/Components/ExpansionPanels.js
+++ b/src/Components/ExpansionPanels.js
@@ -37,10 +37,8 @@ const ExpansionPanelTeste = styled(ExpansionPanel)`
`
const ExpansionPanelSummaryColorido = styled(ExpansionPanelSummary)`
-
-
- background-color:#e5e5e5 !important;
-
+ background-color: ${props => props.contrast === "" ? "#e5e5e5 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
.MuiExpansionPanel-root {
background-color: #00BCD4 !important;
}
@@ -48,46 +46,46 @@ const ExpansionPanelSummaryColorido = styled(ExpansionPanelSummary)`
`
const ExpansionPanelDetailsColorido = styled(ExpansionPanelDetails)`
-
- background-color: #fff;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
font-size: 15px;
+ p{
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
`
const TypographyColorido = styled(Typography)`
- color: #666 !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size: 16px !important;
font-weight: 400 !important;
`
const AColorido = styled.a`
- color: #00BCD4;
- text-decoration:none;
-
+ color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
`
-export default function SimpleExpansionPanel() {
-
-
+export default function SimpleExpansionPanel({ contrast }) {
return (
<div >
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon/>}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel1a-content"
id="panel1a-header"
>
- <TypographyColorido >1. Características da <strong>Plataforma Integrada de RED do MEC</strong></TypographyColorido>
+ <TypographyColorido contrast={contrast} >1. Características da <strong>Plataforma Integrada de RED do MEC</strong></TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido >
+ <ExpansionPanelDetailsColorido contrast={contrast} >
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> é um é sítio (website) em formato de plataforma
- interativa colaborativa para propiciar a formação de uma rede de pessoas interessadas em usar, criar e compartilhar recursos e materiais educacionais. Seu objetivo é reunir e disponibilizar conteúdos do acervo do MEC, antes distribuídos em diferentes portais (Portal do Professor, Banco Internacional de Objetos Educacionais, Domínio Público e TV Escola), conteúdo de organizações parceiras, bem como fomentar espaços de participação, criação e compartilhamento de conhecimento entre usuários para temas relacionados à educação básica brasileira. A <strong>Plataforma Integrada de RED do MEC</strong> foi criada em software livre, cujas informações para desenvolvedores estão disponíveis em <AColorido href="https://gitlab.c3sl.ufpr.br/portalmec" target="_blank">gitlab.c3sl.ufpr.br/portalmec</AColorido>.</p>
+ interativa colaborativa para propiciar a formação de uma rede de pessoas interessadas em usar, criar e compartilhar recursos e materiais educacionais. Seu objetivo é reunir e disponibilizar conteúdos do acervo do MEC, antes distribuídos em diferentes portais (Portal do Professor, Banco Internacional de Objetos Educacionais, Domínio Público e TV Escola), conteúdo de organizações parceiras, bem como fomentar espaços de participação, criação e compartilhamento de conhecimento entre usuários para temas relacionados à educação básica brasileira. A <strong>Plataforma Integrada de RED do MEC</strong> foi criada em software livre, cujas informações para desenvolvedores estão disponíveis em <AColorido contrast={contrast} href="https://gitlab.c3sl.ufpr.br/portalmec" target="_blank">gitlab.c3sl.ufpr.br/portalmec</AColorido>.</p>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> funciona ao mesmo tempo como repositório e referatório:</p>
<ul>
<li>
@@ -99,12 +97,12 @@ export default function SimpleExpansionPanel() {
</ul>
<p>No que se refere ao Repositório, a <strong>Plataforma Integrada de RED do MEC</strong> disponibiliza recursos educacionais digitais e materiais de formação de seu acervo e também permite que usuários (pessoas físicas) depositem (publiquem, façam upload) seus recursos e materiais para serem armazenados, desde que façam seu cadastro, disponibilizem as informações necessárias no momento da publicação e respeitem as regras estabelecidas neste Termo.</p>
<p>Os usuários terão acesso a uma variedade de recursos on-line. Para além, mediante cadastro, terão a sua disposição um maior número de funcionalidades, incluindo ferramentas de comunicação e interação, mecanismos de consulta, poderão fazer upload e download de recursos educacionais digitais. Poderão utilizar serviços relacionados à criação, à consulta e ao acompanhamento de coleções de recursos educacionais digitais de outros usuários, dentre outras funcionalidades. Professores cadastrados e identificados poderão ainda fazer upload de RED.</p>
- <p>No que se refere ao Referatório, a <strong>Plataforma Integrada de RED do MEC</strong> indica e organiza links externos para recursos e materiais de terceiros. Os recursos serão disponibilizados mediante a adesão aos critérios específicos levantados pelo MEC. Para mais informações, utilize a página de <AColorido href="contato">Contato</AColorido> da plataforma.</p>
+ <p>No que se refere ao Referatório, a <strong>Plataforma Integrada de RED do MEC</strong> indica e organiza links externos para recursos e materiais de terceiros. Os recursos serão disponibilizados mediante a adesão aos critérios específicos levantados pelo MEC. Para mais informações, utilize a página de <AColorido contrast={contrast} href="contato">Contato</AColorido> da plataforma.</p>
</div>
</Grid>
- <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={1}></Grid>
<Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
<p>BASICAMENTE,</p>
<p>A Plataforma MEC RED reúne e disponibiliza conteúdos do acervo do MEC que antes estavam distribuídos em diferentes portais.</p>
<p>Esses conteúdos podem estar armazenados na própria Plataforma, ou podem estar em sites externos, sendo indicados pela Plataforma e acessados por meio dela. </p>
@@ -116,217 +114,223 @@ export default function SimpleExpansionPanel() {
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel2a-content"
id="panel2a-header"
>
- <TypographyColorido >2. Cadastro e segurança</TypographyColorido>
+ <TypographyColorido contrast={contrast}>2. Cadastro e segurança</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div>
- <p>A realização de cadastro pode ser exigida como condição para a utilização de determinados ambientes, recursos ou ferramentas. O cadastramento de um usuário só será finalizado ao serem preenchidos todos os campos indicados como obrigatórios. Para o registro de sua conta, o usuário deverá indicar uma senha e uma identificação, tornando-se responsável por mantê-las em sigilo, assumindo a total responsabilidade pelas atividades que se realizam por meio dela. O usuário compromete-se igualmente em sair ("deslogar") de sua conta ao final de cada sessão.</p>
- <p>Além das informações básicas, aos professores que quiserem ter a sua identidade verificada - o que o permitirá depositar recursos na plataforma (fazer upload) - será necessário identificar a escola da rede em que atua. A mesma informação será verificada a partir dos dados do Censo Escolar.</p>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza pelas informações inseridas por seus usuários. Os usuários garantem e respondem, em qualquer caso, pela veracidade, exatidão e autenticidade dos dados pessoais cadastrados. A <strong>Plataforma Integrada de RED do MEC</strong> se reserva o direito de conferir a identificação de seus usuários, bem como de solicitar dados adicionais e documentos que julgue pertinentes, a fim de verificar os dados pessoais informados caso julgue necessário.</p>
- <p>Para acessar sua conta, o usuário deverá identificar-se por meio de e-mail e senha. O usuário compromete-se a não informar a terceiros sua senha, responsabilizando-se integral e exclusivamente pelo uso que dela seja feito e pelas operações efetuadas em sua conta.</p>
- <p>O usuário compromete-se a notificar a <strong>Plataforma Integrada de RED do MEC</strong>, por meio da funcionalidade “Contato”, sobre qualquer uso não autorizado de sua conta, assim como sobre o seu acesso por terceiros não autorizados.</p>
- <p>Contas de usuários com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser desativadas, removidas ou ter seu conteúdo bloqueado por decisão do Ministério da Educação. O usuário será notificado através do seu e-mail de cadastro.</p>
- <p>A criação de conta ou a disponibilização de conteúdo na <strong>Plataforma Integrada de RED do MEC</strong> não geram nenhum direito de suporte técnico ou de indenização por dificuldades técnicas ou falhas nos sistemas. O cancelamento, a suspensão, a perda de dados armazenados, a indisponibilidade ou outra situação adversa que afete o acesso, os dados ou o conteúdo do usuário não ensejarão qualquer tipo de reparação, compensação ou outra obrigação.</p>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza por qualquer dano, prejuízo ou perda no equipamento do usuário causado por falhas no sistema, no servidor ou na internet decorrentes de condutas de terceiros, de vírus por acesso, da utilização ou navegação na internet ou da transferência de dados.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>Para utilizar determinados recursos e ferramentas, o usuário precisa efetuar o cadastro no sistema, informando um e-mail válido e cadastrando uma senha.</p>
- <p>O usuário é o único responsável pelas informações que fornece. E a Plataforma MEC RED se reserva o direito de conferir a veracidade desses dados, caso julgue necessário.</p>
- <p>Se houver qualquer tipo de acesso e uso não autorizado em sua conta, o usuário compromete-se a notificar a Plataforma por meio da funcionalidade “Reportar”.</p>
- <p>A criação de conta não gera direito à suporte técnico ou indenização por dificuldades técnicas ou falhas no sistema.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div>
+ <p>A realização de cadastro pode ser exigida como condição para a utilização de determinados ambientes, recursos ou ferramentas. O cadastramento de um usuário só será finalizado ao serem preenchidos todos os campos indicados como obrigatórios. Para o registro de sua conta, o usuário deverá indicar uma senha e uma identificação, tornando-se responsável por mantê-las em sigilo, assumindo a total responsabilidade pelas atividades que se realizam por meio dela. O usuário compromete-se igualmente em sair ("deslogar") de sua conta ao final de cada sessão.</p>
+ <p>Além das informações básicas, aos professores que quiserem ter a sua identidade verificada - o que o permitirá depositar recursos na plataforma (fazer upload) - será necessário identificar a escola da rede em que atua. A mesma informação será verificada a partir dos dados do Censo Escolar.</p>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza pelas informações inseridas por seus usuários. Os usuários garantem e respondem, em qualquer caso, pela veracidade, exatidão e autenticidade dos dados pessoais cadastrados. A <strong>Plataforma Integrada de RED do MEC</strong> se reserva o direito de conferir a identificação de seus usuários, bem como de solicitar dados adicionais e documentos que julgue pertinentes, a fim de verificar os dados pessoais informados caso julgue necessário.</p>
+ <p>Para acessar sua conta, o usuário deverá identificar-se por meio de e-mail e senha. O usuário compromete-se a não informar a terceiros sua senha, responsabilizando-se integral e exclusivamente pelo uso que dela seja feito e pelas operações efetuadas em sua conta.</p>
+ <p>O usuário compromete-se a notificar a <strong>Plataforma Integrada de RED do MEC</strong>, por meio da funcionalidade “Contato”, sobre qualquer uso não autorizado de sua conta, assim como sobre o seu acesso por terceiros não autorizados.</p>
+ <p>Contas de usuários com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser desativadas, removidas ou ter seu conteúdo bloqueado por decisão do Ministério da Educação. O usuário será notificado através do seu e-mail de cadastro.</p>
+ <p>A criação de conta ou a disponibilização de conteúdo na <strong>Plataforma Integrada de RED do MEC</strong> não geram nenhum direito de suporte técnico ou de indenização por dificuldades técnicas ou falhas nos sistemas. O cancelamento, a suspensão, a perda de dados armazenados, a indisponibilidade ou outra situação adversa que afete o acesso, os dados ou o conteúdo do usuário não ensejarão qualquer tipo de reparação, compensação ou outra obrigação.</p>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza por qualquer dano, prejuízo ou perda no equipamento do usuário causado por falhas no sistema, no servidor ou na internet decorrentes de condutas de terceiros, de vírus por acesso, da utilização ou navegação na internet ou da transferência de dados.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>Para utilizar determinados recursos e ferramentas, o usuário precisa efetuar o cadastro no sistema, informando um e-mail válido e cadastrando uma senha.</p>
+ <p>O usuário é o único responsável pelas informações que fornece. E a Plataforma MEC RED se reserva o direito de conferir a veracidade desses dados, caso julgue necessário.</p>
+ <p>Se houver qualquer tipo de acesso e uso não autorizado em sua conta, o usuário compromete-se a notificar a Plataforma por meio da funcionalidade “Reportar”.</p>
+ <p>A criação de conta não gera direito à suporte técnico ou indenização por dificuldades técnicas ou falhas no sistema.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel3a-content"
id="panel3a-header"
>
- <TypographyColorido >3. Publicações de usuários</TypographyColorido>
+ <TypographyColorido contrast={contrast}>3. Publicações de usuários</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div>
- <p>O conteúdo disponibilizado pelo usuário é de inteira responsabilidade do usuário, não sendo a <strong>Plataforma Integrada de RED do MEC</strong> responsável por quaisquer fatos decorrentes de sua utilização.</p>
- <p>Os recursos publicados devem ter cunho educacional, mantendo-se dentro do assunto em que estão inseridos, em conformidade com estes Termos de Uso.</p>
- <p>Todas as informações publicadas na <strong>Plataforma Integrada de RED do MEC</strong>, como os metadados (descritivos dos recursos), comentários e discussões inseridas são consideradas públicas, visíveis por qualquer pessoa, sem nenhum tipo de confidencialidade. Não serão aceitos materiais que contenham vocabulário ofensivo ou desrespeitoso a terceiros, incluindo ofensas, calúnias, injúrias e difamações. Também não serão permitidos materiais que invadam a privacidade de terceiros, que sejam ameaçadoras, preconceituosas ou racistas.</p>
- <p>Caso o usuário entenda que alguma postagem, material, notícia, comentário ou outro conteúdo disponibilizado na <strong>Plataforma Integrada de RED do MEC</strong> violem algum direito seu, a legislação aplicável ou as cláusulas deste Termos de Uso, deverá notificar a <strong>Plataforma Integrada de RED do MEC</strong> por meio da funcionalidade “Reportar” ou, quando não houver, através do formulário de Contato.</p>
- <p>O spam (mensagens não solicitadas) ou o abuso em comentários poderão ser ativamente prevenidos através do bloqueio de palavras e expressões predeterminadas, ou excluídos posteriormente, sendo cabível a remoção da conta do usuário, no caso de tentativas de violação sistemática e repetitiva destes Termos de Uso, incluindo a reintrodução de material que já tenha sido previamente bloqueado ou excluído.</p>
- <p>Conteúdos com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser removidos por decisão do Ministério da Educação e o usuário será notificado através do seu e-mail de cadastro.</p>
- <h6 style={{fontSize:"18px",marginBlock:"10px"}} >3.1 É permitido ao usuário:</h6>
- <ul>
- <li>
- <p>Depositar (publicar) recurso ou material de sua autoria ou de autoria coletiva, com anuência dos demais autores, que esteja em domínio público, ou para o qual há anuência dos autores originais, desde que os dados sejam corretamente preenchidos nos campos descritivos (metadados) indicados para preenchimento das informações sobre os recursos;</p>
- </li>
- <li>
- <p>Nos comentários, contatos e comunicações, é fundamental ser cortês e tratar os demais usuários com respeito;</p>
- </li>
- <li>
- <p>O usuário poderá sugerir links para outros sites, desde que tenham relação direta com o assunto abordado.</p>
- </li>
- </ul>
- <h6 style={{fontSize:"18px",marginBlock: "10px"}}>3.2 É vedado ao usuário:</h6>
- <ul>
- <li>
- <p>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o <AColorido href="http://www.planalto.gov.br/ccivil_03/leis/L8069.htm" target="_blank">Estatuto da Criança e do Adolescente</AColorido>), que invada a privacidade de terceiros, que tenha cunho comercial, viole os <AColorido href="https://www.ohchr.org/EN/UDHR/Pages/Language.aspx?LangID=por" target="_blank">Direitos Humanos</AColorido> ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário às cláusulas destes Termos de Uso;</p>
- </li>
- <li>
- <p>Assumir a identidade de outra pessoa, física ou jurídica; forjar cabeçalhos, ou de qualquer outra forma manipular identificadores, a fim de disfarçar a origem de qualquer material contido na plataforma, com sentido de desmoralizar, desprestigiar ou se fazer passar pela <strong>Plataforma Integrada de RED do MEC</strong>;</p>
- </li>
- <li>
- <p>Disponibilizar conteúdo em desconformidade com a <AColorido href="http://www.planalto.gov.br/ccivil_03/leis/L9610.htm" target="_blank">legislação de Direito Autoral</AColorido>, incluindo conteúdo que viole marca registrada, patente, segredo de negócio, direito autoral ou qualquer outro direito de terceiro; disponibilizar conteúdo com qualquer tipo de propaganda, material promocional, spam (mensagens não solicitadas), correntes ou esquemas de pirâmide;</p>
- </li>
- <li>
- <p>Disponibilizar conteúdo que contenha vírus ou qualquer outro código, arquivo ou programa de computador, com o propósito de interromper, destruir ou limitar a funcionalidade de qualquer software, hardware ou equipamento de telecomunicações;</p>
- </li>
- <li>
- <p>Interferir ou interromper os serviços, as redes ou os servidores conectados à plataforma de modo a dificultar a utilização e o aproveitamento dos serviços por outros usuários, bem como obter ou tentar obter acesso não autorizado à plataforma;</p>
- </li>
- <li>
- <p>Pedir votos, mencionar número de candidato ou expressar qualquer outra manifestação que se caracterize como propaganda política ou que viole as normas eleitorais.</p>
- </li>
- </ul>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>O conteúdo disponibilizado pelo usuário é de sua inteira responsabilidade. Os recursos publicados tevem ter cunho educacional, em conformidade com estes Termos.</p>
- <p>Todas informações publicadas na Plataforma MEC RED são cosideradas públicas, visíveis por qualquer pessoa.</p>
- <p>Não serão aceitos materiais com vocabulário ofensivo ou que invadam a privacidade de terceiros.</p>
- <p>Caso o usuário entenda que algum conteúdo disponibilizado viole um direito ou as cláusulas deste Termo de Uso, deverá notificar a Plataforma por meio da funcionalidade “Reportar”.</p>
- <p>O usuário poderá ter a sua conta removida em casos de violações sistemáticas destes Termos de Uso.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div>
+ <p>O conteúdo disponibilizado pelo usuário é de inteira responsabilidade do usuário, não sendo a <strong>Plataforma Integrada de RED do MEC</strong> responsável por quaisquer fatos decorrentes de sua utilização.</p>
+ <p>Os recursos publicados devem ter cunho educacional, mantendo-se dentro do assunto em que estão inseridos, em conformidade com estes Termos de Uso.</p>
+ <p>Todas as informações publicadas na <strong>Plataforma Integrada de RED do MEC</strong>, como os metadados (descritivos dos recursos), comentários e discussões inseridas são consideradas públicas, visíveis por qualquer pessoa, sem nenhum tipo de confidencialidade. Não serão aceitos materiais que contenham vocabulário ofensivo ou desrespeitoso a terceiros, incluindo ofensas, calúnias, injúrias e difamações. Também não serão permitidos materiais que invadam a privacidade de terceiros, que sejam ameaçadoras, preconceituosas ou racistas.</p>
+ <p>Caso o usuário entenda que alguma postagem, material, notícia, comentário ou outro conteúdo disponibilizado na <strong>Plataforma Integrada de RED do MEC</strong> violem algum direito seu, a legislação aplicável ou as cláusulas deste Termos de Uso, deverá notificar a <strong>Plataforma Integrada de RED do MEC</strong> por meio da funcionalidade “Reportar” ou, quando não houver, através do formulário de Contato.</p>
+ <p>O spam (mensagens não solicitadas) ou o abuso em comentários poderão ser ativamente prevenidos através do bloqueio de palavras e expressões predeterminadas, ou excluídos posteriormente, sendo cabível a remoção da conta do usuário, no caso de tentativas de violação sistemática e repetitiva destes Termos de Uso, incluindo a reintrodução de material que já tenha sido previamente bloqueado ou excluído.</p>
+ <p>Conteúdos com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser removidos por decisão do Ministério da Educação e o usuário será notificado através do seu e-mail de cadastro.</p>
+ <h6 style={{ fontSize: "18px", marginBlock: "10px" }} >3.1 É permitido ao usuário:</h6>
+ <ul>
+ <li>
+ <p>Depositar (publicar) recurso ou material de sua autoria ou de autoria coletiva, com anuência dos demais autores, que esteja em domínio público, ou para o qual há anuência dos autores originais, desde que os dados sejam corretamente preenchidos nos campos descritivos (metadados) indicados para preenchimento das informações sobre os recursos;</p>
+ </li>
+ <li>
+ <p>Nos comentários, contatos e comunicações, é fundamental ser cortês e tratar os demais usuários com respeito;</p>
+ </li>
+ <li>
+ <p>O usuário poderá sugerir links para outros sites, desde que tenham relação direta com o assunto abordado.</p>
+ </li>
+ </ul>
+ <h6 style={{ fontSize: "18px", marginBlock: "10px" }}>3.2 É vedado ao usuário:</h6>
+ <ul>
+ <li>
+ <p>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o <AColorido contrast={contrast} href="http://www.planalto.gov.br/ccivil_03/leis/L8069.htm" target="_blank">Estatuto da Criança e do Adolescente</AColorido>), que invada a privacidade de terceiros, que tenha cunho comercial, viole os <AColorido contrast={contrast} href="https://www.ohchr.org/EN/UDHR/Pages/Language.aspx?LangID=por" target="_blank">Direitos Humanos</AColorido> ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário às cláusulas destes Termos de Uso;</p>
+ </li>
+ <li>
+ <p>Assumir a identidade de outra pessoa, física ou jurídica; forjar cabeçalhos, ou de qualquer outra forma manipular identificadores, a fim de disfarçar a origem de qualquer material contido na plataforma, com sentido de desmoralizar, desprestigiar ou se fazer passar pela <strong>Plataforma Integrada de RED do MEC</strong>;</p>
+ </li>
+ <li>
+ <p>Disponibilizar conteúdo em desconformidade com a <AColorido contrast={contrast} href="http://www.planalto.gov.br/ccivil_03/leis/L9610.htm" target="_blank">legislação de Direito Autoral</AColorido>, incluindo conteúdo que viole marca registrada, patente, segredo de negócio, direito autoral ou qualquer outro direito de terceiro; disponibilizar conteúdo com qualquer tipo de propaganda, material promocional, spam (mensagens não solicitadas), correntes ou esquemas de pirâmide;</p>
+ </li>
+ <li>
+ <p>Disponibilizar conteúdo que contenha vírus ou qualquer outro código, arquivo ou programa de computador, com o propósito de interromper, destruir ou limitar a funcionalidade de qualquer software, hardware ou equipamento de telecomunicações;</p>
+ </li>
+ <li>
+ <p>Interferir ou interromper os serviços, as redes ou os servidores conectados à plataforma de modo a dificultar a utilização e o aproveitamento dos serviços por outros usuários, bem como obter ou tentar obter acesso não autorizado à plataforma;</p>
+ </li>
+ <li>
+ <p>Pedir votos, mencionar número de candidato ou expressar qualquer outra manifestação que se caracterize como propaganda política ou que viole as normas eleitorais.</p>
+ </li>
+ </ul>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>O conteúdo disponibilizado pelo usuário é de sua inteira responsabilidade. Os recursos publicados tevem ter cunho educacional, em conformidade com estes Termos.</p>
+ <p>Todas informações publicadas na Plataforma MEC RED são cosideradas públicas, visíveis por qualquer pessoa.</p>
+ <p>Não serão aceitos materiais com vocabulário ofensivo ou que invadam a privacidade de terceiros.</p>
+ <p>Caso o usuário entenda que algum conteúdo disponibilizado viole um direito ou as cláusulas deste Termo de Uso, deverá notificar a Plataforma por meio da funcionalidade “Reportar”.</p>
+ <p>O usuário poderá ter a sua conta removida em casos de violações sistemáticas destes Termos de Uso.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel4a-content"
id="panel4a-header"
>
- <TypographyColorido >4. Licença de uso do conteúdo</TypographyColorido>
+ <TypographyColorido contrast={contrast}>4. Licença de uso do conteúdo</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong>, entendida como obra intelectual em seu conjunto, é de titularidade do Ministério da Educação. Sua disponibilização ocorrerá de acordo com os termos da <AColorido href="https://creativecommons.org/licenses/by-sa/4.0/deed.pt_BR" target="_blank">Licença Pública Creative Commons do tipo CC BY-SA</AColorido>, exceto nos casos em que for indicado de outra forma.</p>
- <p>A licença CC BY SA é uma licença aberta e permite que seja feita cópia, redistribuição, adaptação e criação de obras derivadas, inclusive uso comercial, desde que o autor seja referenciado e que a licença da obra derivada seja também CC BY SA, garantindo o constante caráter aberto das produções.</p>
- <p>Aplica-se aos códigos de software desenvolvidos pela <strong>Plataforma Integrada de RED do MEC</strong> a <AColorido href="https://www.gnu.org/licenses/gpl.html" target="_blank">Licença Pública Geral Affero GNU GPL</AColorido> (veja a tradução livre <AColorido href="https://creativecommons.org/licenses/GPL/2.0/legalcode.pt" target="_blank">aqui</AColorido>), que visa garantir a liberdade de compartilhar e de modificar softwares livres.</p>
- <p>O usuário que utilizar a <strong>Plataforma Integrada de RED do MEC</strong> como repositório, ou seja, para armazenamento de conteúdo, garante que detém todos os direitos e autorizações para a publicação do conteúdo e deverá escolher uma das licenças Creative Commons elencadas no formulário no momento de cadastro do material. As licenças Creative Commons relacionadas abaixo serão aceitas na <strong>Plataforma Integrada de RED do MEC</strong>, pois garantem o devido crédito pela criação original do usuário e permitem as seguintes ações de uso:</p>
- <ul>
- <li>
- <p><strong>CC-BY</strong>: esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original.</p>
- </li>
- <li>
- <p><strong>CC-BY-SA</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</p>
- </li>
- <li>
- <p><strong>CC-BY-NC</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos.</p>
- </li>
- <li>
- <p><strong>CC-BY-NC-SA</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</p>
- </li>
- </ul>
- <p>Cabe ao Usuário verificar a compatibilidade da licença do material obtido na <strong>Plataforma Integrada de RED do MEC</strong> para utilizar em outras produções. Para consultar a compatibilidade das licenças Creative Commons, há uma ferramenta disponível no site <AColorido href="http://aberta.org.br/compatibilidade/" target="_blank">Iniciativa Educação Aberta</AColorido>.</p>
- <p>O usuário da <strong>Plataforma Integrada de RED do MEC</strong> responde por todo o conteúdo publicado por meio de seu perfil, inclusive no que diz respeito à violação dos direitos autorais relacionados a tais postagens. Ao inserir um conteúdo de sua autoria para armazenamento, o usuário concorda e autoriza o licenciamento ao escolher uma das licenças abertas descritas no formulário de publicação, de forma a permitir não só o seu reconhecimento pleno de autoria, como também a possibilidade de replicação, reedição e reformulação de suas postagens por terceiros, com o objetivo de possibilitar o compartilhamento e a reutilização de conteúdo educacional.</p>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá disponibilizar endereços eletrônicos de outros sítios externos, por meio de links, o que não significa que estes sejam de sua propriedade ou por ele operados. A presença de links para outros sites não implica relação de sociedade ou de supervisão da <strong>Plataforma Integrada de RED do MEC</strong> com esses sites e seus conteúdos. Os campos descritivos de cada recurso conterão informações específicas sobre as licenças dos mesmos. Cabe ao usuário verificar a licença de cada recurso.</p>
- <p>É vedado o uso não autorizado da obra ou seu uso em desconformidade com a legislação autoral e com os termos da licença mencionada.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE.</p>
- <p>A Plataforma MEC RED, por ser entendida como obra intelectual, possui uma licença aberta de uso que permite a reutilização e o compartilhamento do conteúdo, inclusive para uso comercial, desde que o autor seja referenciado. Além disso, no caso de obras derivadas, a licença deverá ser a mesma da obra original.</p>
- <p>Os códigos de software desenvolvidos para a Plataforma, possuem uma licença pública, de software livre, que garante a liberdade de compartilhamento e modificação dos mesmos.</p>
- <p>Os conteúdos publicados e armazenados na Plataforma pelos usuários, serão sempre abertos, sendo permitidas ações de edição e compartilhamento desde que o autor seja referenciado. Cabe ao usuário decidir se o recurso poderá ser utilizado somente para fins não comerciais e se os trabalhos derivados deverão ter os termos idênticos ao original, selecionando uma das opções de licença disponíveis no momento de upload do recurso.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong>, entendida como obra intelectual em seu conjunto, é de titularidade do Ministério da Educação. Sua disponibilização ocorrerá de acordo com os termos da <AColorido href="https://creativecommons.org/licenses/by-sa/4.0/deed.pt_BR" target="_blank">Licença Pública Creative Commons do tipo CC BY-SA</AColorido>, exceto nos casos em que for indicado de outra forma.</p>
+ <p>A licença CC BY SA é uma licença aberta e permite que seja feita cópia, redistribuição, adaptação e criação de obras derivadas, inclusive uso comercial, desde que o autor seja referenciado e que a licença da obra derivada seja também CC BY SA, garantindo o constante caráter aberto das produções.</p>
+ <p>Aplica-se aos códigos de software desenvolvidos pela <strong>Plataforma Integrada de RED do MEC</strong> a <AColorido contrast={contrast} href="https://www.gnu.org/licenses/gpl.html" target="_blank">Licença Pública Geral Affero GNU GPL</AColorido> (veja a tradução livre <AColorido contrast={contrast} href="https://creativecommons.org/licenses/GPL/2.0/legalcode.pt" target="_blank">aqui</AColorido>), que visa garantir a liberdade de compartilhar e de modificar softwares livres.</p>
+ <p>O usuário que utilizar a <strong>Plataforma Integrada de RED do MEC</strong> como repositório, ou seja, para armazenamento de conteúdo, garante que detém todos os direitos e autorizações para a publicação do conteúdo e deverá escolher uma das licenças Creative Commons elencadas no formulário no momento de cadastro do material. As licenças Creative Commons relacionadas abaixo serão aceitas na <strong>Plataforma Integrada de RED do MEC</strong>, pois garantem o devido crédito pela criação original do usuário e permitem as seguintes ações de uso:</p>
+ <ul>
+ <li>
+ <p><strong>CC-BY</strong>: esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original.</p>
+ </li>
+ <li>
+ <p><strong>CC-BY-SA</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</p>
+ </li>
+ <li>
+ <p><strong>CC-BY-NC</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos.</p>
+ </li>
+ <li>
+ <p><strong>CC-BY-NC-SA</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</p>
+ </li>
+ </ul>
+ <p>Cabe ao Usuário verificar a compatibilidade da licença do material obtido na <strong>Plataforma Integrada de RED do MEC</strong> para utilizar em outras produções. Para consultar a compatibilidade das licenças Creative Commons, há uma ferramenta disponível no site <AColorido contrast={contrast} href="http://aberta.org.br/compatibilidade/" target="_blank">Iniciativa Educação Aberta</AColorido>.</p>
+ <p>O usuário da <strong>Plataforma Integrada de RED do MEC</strong> responde por todo o conteúdo publicado por meio de seu perfil, inclusive no que diz respeito à violação dos direitos autorais relacionados a tais postagens. Ao inserir um conteúdo de sua autoria para armazenamento, o usuário concorda e autoriza o licenciamento ao escolher uma das licenças abertas descritas no formulário de publicação, de forma a permitir não só o seu reconhecimento pleno de autoria, como também a possibilidade de replicação, reedição e reformulação de suas postagens por terceiros, com o objetivo de possibilitar o compartilhamento e a reutilização de conteúdo educacional.</p>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá disponibilizar endereços eletrônicos de outros sítios externos, por meio de links, o que não significa que estes sejam de sua propriedade ou por ele operados. A presença de links para outros sites não implica relação de sociedade ou de supervisão da <strong>Plataforma Integrada de RED do MEC</strong> com esses sites e seus conteúdos. Os campos descritivos de cada recurso conterão informações específicas sobre as licenças dos mesmos. Cabe ao usuário verificar a licença de cada recurso.</p>
+ <p>É vedado o uso não autorizado da obra ou seu uso em desconformidade com a legislação autoral e com os termos da licença mencionada.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE.</p>
+ <p>A Plataforma MEC RED, por ser entendida como obra intelectual, possui uma licença aberta de uso que permite a reutilização e o compartilhamento do conteúdo, inclusive para uso comercial, desde que o autor seja referenciado. Além disso, no caso de obras derivadas, a licença deverá ser a mesma da obra original.</p>
+ <p>Os códigos de software desenvolvidos para a Plataforma, possuem uma licença pública, de software livre, que garante a liberdade de compartilhamento e modificação dos mesmos.</p>
+ <p>Os conteúdos publicados e armazenados na Plataforma pelos usuários, serão sempre abertos, sendo permitidas ações de edição e compartilhamento desde que o autor seja referenciado. Cabe ao usuário decidir se o recurso poderá ser utilizado somente para fins não comerciais e se os trabalhos derivados deverão ter os termos idênticos ao original, selecionando uma das opções de licença disponíveis no momento de upload do recurso.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel5a-content"
id="panel5a-header"
>
- <TypographyColorido >5. Práticas de uso e armazenamento</TypographyColorido>
- </ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div>
- <p>A depender da capacidade de espaço no servidor, a <strong>Plataforma Integrada de RED do MEC</strong> poderá retirar conteúdos armazenados na plataforma, observados os critérios de antiguidade e do tamanho dos arquivos disponibilizados, mediante notificação e justificativa ao usuário.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>O usuário será notificado caso algum conteúdo tenha que ser retirado da Plataforma por falta de espaço no servidor.</p>
- </div>
+ <TypographyColorido contrast={contrast}>5. Práticas de uso e armazenamento</TypographyColorido>
+ </ExpansionPanelSummaryColorido >
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div>
+ <p>A depender da capacidade de espaço no servidor, a <strong>Plataforma Integrada de RED do MEC</strong> poderá retirar conteúdos armazenados na plataforma, observados os critérios de antiguidade e do tamanho dos arquivos disponibilizados, mediante notificação e justificativa ao usuário.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>O usuário será notificado caso algum conteúdo tenha que ser retirado da Plataforma por falta de espaço no servidor.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel6a-content"
id="panel6a-header"
>
- <TypographyColorido >6. Privacidade da informação</TypographyColorido>
+ <TypographyColorido contrast={contrast}>6. Privacidade da informação</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> tomará todas as medidas possíveis para manter a confidencialidade e a segurança de suas informações. No entanto, a <strong>Plataforma Integrada de RED do MEC</strong> não responderá por prejuízos que possam ser derivados da violação dessas medidas por parte de terceiros que subvertam os sistemas de segurança para acessar as informações de Usuários.</p>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> solicitará alguns dados pessoais para seu cadastro. Além disso, dados sobre a interação dos usuários e seu comportamento na plataforma são coletados de maneira automática. Esses dados nunca serão vendidos, alugados, trocados ou fornecidos para fins comerciais. No entanto, o MEC poderá colaborar com instituições públicas parceiras, como universidades, para análise desses dados bem como de qualquer conteúdo da plataforma para para fins de pesquisa, divulgação e melhoria dos serviços. Dados pessoais que possam identificá-lo nunca serão compartilhados.</p>
- <p>Dados que não identificam o usuário serão armazenados indefinidamente para fins de pesquisa.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>Para manter a confidencialidade e a segurança dos dados, a Plataforma MEC RED tomará todas as medidas possíveis.</p>
- <p>Os dados sobre interação e comportamento dos usuários nunca serão comercializados, mas poderão ser analisados para fins de pesquisa, divulgação e melhorias, sem a identificação dos usuários.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> tomará todas as medidas possíveis para manter a confidencialidade e a segurança de suas informações. No entanto, a <strong>Plataforma Integrada de RED do MEC</strong> não responderá por prejuízos que possam ser derivados da violação dessas medidas por parte de terceiros que subvertam os sistemas de segurança para acessar as informações de Usuários.</p>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> solicitará alguns dados pessoais para seu cadastro. Além disso, dados sobre a interação dos usuários e seu comportamento na plataforma são coletados de maneira automática. Esses dados nunca serão vendidos, alugados, trocados ou fornecidos para fins comerciais. No entanto, o MEC poderá colaborar com instituições públicas parceiras, como universidades, para análise desses dados bem como de qualquer conteúdo da plataforma para para fins de pesquisa, divulgação e melhoria dos serviços. Dados pessoais que possam identificá-lo nunca serão compartilhados.</p>
+ <p>Dados que não identificam o usuário serão armazenados indefinidamente para fins de pesquisa.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>Para manter a confidencialidade e a segurança dos dados, a Plataforma MEC RED tomará todas as medidas possíveis.</p>
+ <p>Os dados sobre interação e comportamento dos usuários nunca serão comercializados, mas poderão ser analisados para fins de pesquisa, divulgação e melhorias, sem a identificação dos usuários.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel7a-content"
id="panel7a-header"
>
- <TypographyColorido >7. Violação no sistema ou na base de dados</TypographyColorido>
+ <TypographyColorido contrast={contrast}>7. Violação no sistema ou na base de dados</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -335,7 +339,7 @@ export default function SimpleExpansionPanel() {
</Grid>
<Grid item xs={12} md={1}></Grid>
<Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
<p>BASICAMENTE,</p>
<p>Serão aplicadas as sanções previstas ou as ações legais ao responsável por intromissão, ou tentativa de intromissão, na Plataforma MEC RED.</p>
</div>
@@ -345,172 +349,178 @@ export default function SimpleExpansionPanel() {
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel8a-content"
id="panel8a-header"
>
- <TypographyColorido >8. Sanções</TypographyColorido>
+ <TypographyColorido contrast={contrast}>8. Sanções</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>Sem prejuízo de outras medidas, a <strong>Plataforma Integrada de RED do MEC</strong> poderá advertir, bloquear, desativar ou remover, temporária ou definitivamente, a conta e conteúdos disponibilizados por um usuário, em qualquer momento, e iniciar as ações legais cabíveis caso:</p>
- <ul>
- <li>
- <p>o usuário não cumprir qualquer dispositivo destes Termos de Uso;</p>
- </li>
- <li>
- <p>o usuário praticar atos fraudulentos ou dolosos;</p>
- </li>
- <li>
- <p>o MEC entender que as postagens, o conteúdo disponibilizado ou qualquer atitude do usuário tenham causado algum dano a terceiros ou à própria Plataforma, ou tenham a potencialidade de assim o fazer.</p>
- </li>
- </ul>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>No caso do usuário não cumprir qualquer item destes Termos, praticar atos fraudulentos ou dolosos ou causar dano a alguém ou à Plataforma MEC RED, sua conta poderá ser bloqueada, desativada ou removida, em caráter temporário ou definitivo.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>Sem prejuízo de outras medidas, a <strong>Plataforma Integrada de RED do MEC</strong> poderá advertir, bloquear, desativar ou remover, temporária ou definitivamente, a conta e conteúdos disponibilizados por um usuário, em qualquer momento, e iniciar as ações legais cabíveis caso:</p>
+ <ul>
+ <li>
+ <p>o usuário não cumprir qualquer dispositivo destes Termos de Uso;</p>
+ </li>
+ <li>
+ <p>o usuário praticar atos fraudulentos ou dolosos;</p>
+ </li>
+ <li>
+ <p>o MEC entender que as postagens, o conteúdo disponibilizado ou qualquer atitude do usuário tenham causado algum dano a terceiros ou à própria Plataforma, ou tenham a potencialidade de assim o fazer.</p>
+ </li>
+ </ul>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>No caso do usuário não cumprir qualquer item destes Termos, praticar atos fraudulentos ou dolosos ou causar dano a alguém ou à Plataforma MEC RED, sua conta poderá ser bloqueada, desativada ou removida, em caráter temporário ou definitivo.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel9a-content"
id="panel9a-header"
>
- <TypographyColorido >9. Limitações de responsabilidade</TypographyColorido>
+ <TypographyColorido contrast={contrast}>9. Limitações de responsabilidade</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>Em nenhuma situação a <strong>Plataforma Integrada de RED do MEC</strong> e o Ministério da Educação serão responsáveis por quaisquer danos, prejuízos ou outro efeito, direto ou indireto, relacionados ao uso, por parte de seus usuários, leitores ou de qualquer outra pessoa, deste sítio, de seu conteúdo ou de qualquer outro website mencionado.</p>
- <p>O usuário reconhece que será integralmente responsável pelos materiais enviados à <strong>Plataforma Integrada de RED do MEC</strong> e se compromete a responder por quaisquer reivindicações, demandas, penalidades e todos os danos, perdas e despesas, causados à <strong>Plataforma Integrada de RED do MEC</strong>.</p>
- <p>Todo autor de conteúdo exibido na <strong>Plataforma Integrada de RED do MEC</strong> retém os seus direitos e responsabilidades autorais, nos termos da Lei n. 9.610/1998, sem prejuízo dos termos de licenciamento de livre uso, conforme exposto nestes Termos de Uso, no item “Licença de uso do conteúdo”.</p>
- <p>Se o usuário verificar que qualquer comentário ou participação na <strong>Plataforma Integrada de RED do MEC</strong> infringem um direito de sua titularidade ou de um terceiro, deverá entrar em contato imediatamente na forma indicada neste mesmo documento, no item “Como reportar violações”.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>A Plataforma MEC RED e o Ministério da Educação não serão responsáveis por danos, prejuízos ou outro efeito relacionados ao uso da Plataforma por parte de qualquer pessoa.</p>
- <p>O usuário é integralmente responsável pelos materiais enviados e por qualquer conteúdo publicado, se comprometendo a responder por eles, quando necessário.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>Em nenhuma situação a <strong>Plataforma Integrada de RED do MEC</strong> e o Ministério da Educação serão responsáveis por quaisquer danos, prejuízos ou outro efeito, direto ou indireto, relacionados ao uso, por parte de seus usuários, leitores ou de qualquer outra pessoa, deste sítio, de seu conteúdo ou de qualquer outro website mencionado.</p>
+ <p>O usuário reconhece que será integralmente responsável pelos materiais enviados à <strong>Plataforma Integrada de RED do MEC</strong> e se compromete a responder por quaisquer reivindicações, demandas, penalidades e todos os danos, perdas e despesas, causados à <strong>Plataforma Integrada de RED do MEC</strong>.</p>
+ <p>Todo autor de conteúdo exibido na <strong>Plataforma Integrada de RED do MEC</strong> retém os seus direitos e responsabilidades autorais, nos termos da Lei n. 9.610/1998, sem prejuízo dos termos de licenciamento de livre uso, conforme exposto nestes Termos de Uso, no item “Licença de uso do conteúdo”.</p>
+ <p>Se o usuário verificar que qualquer comentário ou participação na <strong>Plataforma Integrada de RED do MEC</strong> infringem um direito de sua titularidade ou de um terceiro, deverá entrar em contato imediatamente na forma indicada neste mesmo documento, no item “Como reportar violações”.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>A Plataforma MEC RED e o Ministério da Educação não serão responsáveis por danos, prejuízos ou outro efeito relacionados ao uso da Plataforma por parte de qualquer pessoa.</p>
+ <p>O usuário é integralmente responsável pelos materiais enviados e por qualquer conteúdo publicado, se comprometendo a responder por eles, quando necessário.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel10a-content"
id="panel10a-header"
>
- <TypographyColorido >10.Inexistência de vínculo</TypographyColorido>
+ <TypographyColorido contrast={contrast}>10.Inexistência de vínculo</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>A adesão a estes Termos de Uso pelo usuário não gera nenhum contrato, mandato, franquia ou vínculo de tipo trabalhista, societário, de parceria ou associativo entre a <strong>Plataforma Integrada de RED do MEC</strong> e o usuário.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>Não há nenhum tipo de vínculo (trabalhista, parceria, etc) entre a Plataforma e o usuário.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>A adesão a estes Termos de Uso pelo usuário não gera nenhum contrato, mandato, franquia ou vínculo de tipo trabalhista, societário, de parceria ou associativo entre a <strong>Plataforma Integrada de RED do MEC</strong> e o usuário.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>Não há nenhum tipo de vínculo (trabalhista, parceria, etc) entre a Plataforma e o usuário.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel11a-content"
id="panel11a-header"
>
- <TypographyColorido >11. Como reportar violações</TypographyColorido>
+ <TypographyColorido contrast={contrast}>11. Como reportar violações</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>Nem todo o conteúdo disponibilizado pelo usuário nas áreas de comentário e debates é lido pela administração da <strong>Plataforma Integrada de RED do MEC</strong>.</p>
- <p>Se algum artigo, notícia, comentário ou outro conteúdo da <strong>Plataforma Integrada de RED do MEC</strong> violar qualquer direito do usuário, de terceiros ou a legislação aplicável, o usuário poderá usar a funcionalidade "Reportar" nas páginas que houver essa opção ou, quando não houver, entrar em contato com a administração da <strong>Plataforma Integrada de RED do MEC</strong> pelo formulário de “Contato”, mencionando de forma específica e detalhada a violação.</p>
- <p>De posse das informações, a <strong>Plataforma Integrada de RED do MEC</strong> poderá analisar e resolver a questão tão breve quanto possível. Caso a informação esteja incompleta, ou com detalhamento insuficiente, a <strong>Plataforma Integrada de RED do MEC</strong> poderá entrar em contato para solicitar a complementação, possivelmente atrasando a providência desejada.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>O usuário poderá reportar,utilizando a funcionalidade “Reportar” ou pelo formulário de “Contato”, qualquer tipo de conteúdo publicado na Plataforma MEC RED que viole os direitos dos usuários, de terceiros ou a legislação aplicável.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>Nem todo o conteúdo disponibilizado pelo usuário nas áreas de comentário e debates é lido pela administração da <strong>Plataforma Integrada de RED do MEC</strong>.</p>
+ <p>Se algum artigo, notícia, comentário ou outro conteúdo da <strong>Plataforma Integrada de RED do MEC</strong> violar qualquer direito do usuário, de terceiros ou a legislação aplicável, o usuário poderá usar a funcionalidade "Reportar" nas páginas que houver essa opção ou, quando não houver, entrar em contato com a administração da <strong>Plataforma Integrada de RED do MEC</strong> pelo formulário de “Contato”, mencionando de forma específica e detalhada a violação.</p>
+ <p>De posse das informações, a <strong>Plataforma Integrada de RED do MEC</strong> poderá analisar e resolver a questão tão breve quanto possível. Caso a informação esteja incompleta, ou com detalhamento insuficiente, a <strong>Plataforma Integrada de RED do MEC</strong> poderá entrar em contato para solicitar a complementação, possivelmente atrasando a providência desejada.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>O usuário poderá reportar,utilizando a funcionalidade “Reportar” ou pelo formulário de “Contato”, qualquer tipo de conteúdo publicado na Plataforma MEC RED que viole os direitos dos usuários, de terceiros ou a legislação aplicável.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel12a-content"
id="panel12a-header"
>
- <TypographyColorido >12. Modificações nos Termos de Uso</TypographyColorido>
+ <TypographyColorido contrast={contrast}>12. Modificações nos Termos de Uso</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá alterar, a qualquer tempo, estes Termos de Uso, mediante declaração pública no site, visando seu aprimoramento e melhoria dos serviços prestados. Os novos Termos de Uso entrarão em vigor a partir de sua publicação na plataforma. Usuários cadastrados receberão notificação dessa alteração no e-mail de cadastro e haverá divulgação/chamada na página principal do Sistema. No prazo de 72 (setenta e duas) horas, contadas a partir da publicação das modificações, o usuário poderá comunicar-se com a <strong>Plataforma Integrada de RED do MEC</strong>, caso não concorde com os novos Termos de Uso. Nesse caso, a conta do usuário será desativada. Não havendo manifestações no prazo estipulado, entender-se-á que o Usuário aceitou tacitamente os novos Termos de Uso.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>Com o objetivo de melhorar os serviços prestados, estes Termos podem ser alterados, a qualquer tempo. Caso ocorra, os usuários serão notificados e terão um período para se manifestar em relação às alterações.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá alterar, a qualquer tempo, estes Termos de Uso, mediante declaração pública no site, visando seu aprimoramento e melhoria dos serviços prestados. Os novos Termos de Uso entrarão em vigor a partir de sua publicação na plataforma. Usuários cadastrados receberão notificação dessa alteração no e-mail de cadastro e haverá divulgação/chamada na página principal do Sistema. No prazo de 72 (setenta e duas) horas, contadas a partir da publicação das modificações, o usuário poderá comunicar-se com a <strong>Plataforma Integrada de RED do MEC</strong>, caso não concorde com os novos Termos de Uso. Nesse caso, a conta do usuário será desativada. Não havendo manifestações no prazo estipulado, entender-se-á que o Usuário aceitou tacitamente os novos Termos de Uso.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>Com o objetivo de melhorar os serviços prestados, estes Termos podem ser alterados, a qualquer tempo. Caso ocorra, os usuários serão notificados e terão um período para se manifestar em relação às alterações.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel13a-content"
id="panel13a-header"
>
- <TypographyColorido >13. Foro</TypographyColorido>
+ <TypographyColorido contrast={contrast}>13. Foro</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>Para dirimir dúvidas ou litígios referentes à interpretação e ao cumprimento destes Termos de Uso, as partes se submeterão ao Foro da Justiça Federal, Seção Judiciária do Distrito Federal.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>Em caso de dúvidas ou litígios, é preciso recorrer ao Foro da Justiça Federal.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>Para dirimir dúvidas ou litígios referentes à interpretação e ao cumprimento destes Termos de Uso, as partes se submeterão ao Foro da Justiça Federal, Seção Judiciária do Distrito Federal.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>Em caso de dúvidas ou litígios, é preciso recorrer ao Foro da Justiça Federal.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
- </div>
+ </div >
);
}
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/Header.js b/src/Components/Header.js
index 7b1382abed77c5eb2608ce90352a0d6ef815985d..8f02c6c55f6b121aedf847deda14e61ba74767ff 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -144,7 +144,7 @@ export default function Header(props) {
:
(
<React.Fragment>
- <MenuBarMobile openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
+ <MenuBarMobile contrast={state.contrast} openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
{
state.searchOpen &&
<SearchBar />
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index a5adb922792a1837bcacbdc26c5a5e75545583f7..7a2ceb13f9cb81704afbb5d3d9ff98b3a468195d 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -44,6 +44,8 @@ export const ButtonStyled = styled(Button)`
text-transform: capitalize !important;
margin : 0 8px !important;
font-weight : normal !important;
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
`
const ButtonPublicarRecurso = styled(Button)`
@@ -57,8 +59,7 @@ const ButtonPublicarRecurso = styled(Button)`
font-stretch : expanded;
max-width: 200 !important;
:hover {
- background-color: ${(props) =>
- props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ background-color: ${(props) => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
}
.MuiSvgIcon-root {
vertical-align : middle !important;
diff --git a/src/Components/MenuBarMobile.js b/src/Components/MenuBarMobile.js
index 0e263606db82b52e09b2d108727784bf0aadab05..0f3f794ed4b15e8bf015aa8ed45183f0468bf0e3 100644
--- a/src/Components/MenuBarMobile.js
+++ b/src/Components/MenuBarMobile.js
@@ -27,7 +27,6 @@ import IconSearch from '@material-ui/icons/Search'
export default function MenuBarMobile(props) {
-
const [drawerOpen, setDrawerStatus] = React.useState(false);
@@ -40,12 +39,15 @@ export default function MenuBarMobile(props) {
return (
<>
- <MobileDrawerMenu anchor={'left'} open={drawerOpen}
+ <MobileDrawerMenu
+ contrast={props.contrast}
+ anchor={'left'}
+ open={drawerOpen}
onClose={toggleDrawer(false)}
openSignUp={props.openSignUp} openLogin={props.openLogin}
/>
- <OuterDiv>
- <Button style={{ color: "#00bcd4" }} onClick={toggleDrawer(true)}>
+ <OuterDiv contrast={props.contrast}>
+ <Button style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white " }} onClick={toggleDrawer(true)}>
<MenuIcon className="icon" />
</Button>
<DrawerButtonDiv>
@@ -53,8 +55,8 @@ export default function MenuBarMobile(props) {
<img src={logo} alt="logo" style={{ border: "0", verticalAlign: "middle" }} />
</Link>
</DrawerButtonDiv>
- <Button style={{ color: "#00bcd4", position: "absolute", right: 0}} onClick={props.openSearchBar}>
- <IconSearchStyled/>
+ <Button style={{ position: "absolute", right: 0 }} onClick={props.openSearchBar}>
+ <IconSearchStyled style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white " }} />
</Button>
</OuterDiv>
</>
@@ -64,11 +66,12 @@ export default function MenuBarMobile(props) {
const OuterDiv = styled.div`
height : 48px;
width : 100%;
- ${'' /* position : relative; */}
+ background: ${props => props.contrast === "" ? "" : "black"};
display : flex;
direction : row;
align-items : center;
+
img {
height : 38px;
overflow : hidden;
diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js
index 37ccac8230d5a6dd0acef5a9019fae82058787be..064b5c3fa2ba80bb394cc20000bedf1df25ba045 100644
--- a/src/Components/MobileDrawerMenu.js
+++ b/src/Components/MobileDrawerMenu.js
@@ -58,7 +58,7 @@ export default function MobileDrawerMenu(props) {
canUserAdmin = true
index++
}
-
+
if (canUserAdmin)
minhaArea.push({
name: "Administrador",
@@ -117,7 +117,7 @@ export default function MobileDrawerMenu(props) {
}
return (
- <StyledDrawer anchor={props.anchor} open={props.open} onClose={props.onClose}>
+ <StyledDrawer contrast={state.contrast} anchor={props.anchor} open={props.open} onClose={props.onClose}>
<MenuBody>
{/*Renders menuSobre array options*/}
{
@@ -135,20 +135,18 @@ export default function MobileDrawerMenu(props) {
{
/*If user is logged in, render user actions menu; else render log in/sign in buttons*/
state.userIsLoggedIn ?
- (
+ (
<>
<div style={{ display: "flex", justifyContent: "left", marginBottom: "10px" }}>
<Link to="/termos-publicar-recurso">
- <ButtonPublicarRecurso>
+ <ButtonPublicarRecurso contrast={props.contrast}>
<CloudUploadIcon style={{ color: "white", marginRight: "10px" }} />
- <span style={{ color: "white", textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
- PUBLICAR RECURSO
- </span>
+ PUBLICAR RECURSO
</ButtonPublicarRecurso>
</Link>
</div>
- <div style={{ borderTop: "1px solid #e5e5e5", display: "flex", flexDirection: "column", marginTop: "10px", paddingTop: "10px", color: "#666", paddingBottom: "10px" }}>
- <MyArea>
+ <div style={{ borderTop: "1px solid #e5e5e5", display: "flex", flexDirection: "column", marginTop: "10px", paddingTop: "10px", color: "#666", paddingBottom: "10px" }}>
+ <MyArea contrast={props.contrast}>
<div className="user-avatar">
<img alt="user-avatar"
src={getUserAvatar()}
@@ -177,22 +175,22 @@ export default function MobileDrawerMenu(props) {
(
<React.Fragment>
<div style={{ display: "flex", justifyContent: "center", marginTop: "10px" }}>
- <ButtonPublicarRecurso onClick={props.openLogin}>
+ <ButtonPublicarRecurso contrast={props.contrast} onClick={props.openLogin}>
PUBLICAR RECURSO?
</ButtonPublicarRecurso>
</div>
<div style={{ display: "flex", flexDirection: "row", margin: "10px 0", justifyContent: "center" }}>
<div style={{ borderRight: "1px solid #e5e5e5" }}>
- <ButtonStyled onClick={props.openLogin}>
- <ExitToAppIcon style={{ color: "#00bcd4" }} />Entrar
- </ButtonStyled>
+ <ButtonStyled onClick={props.openLogin} contrast={props.contrast}>
+ <ExitToAppIcon style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white " }} />Entrar
+ </ButtonStyled>
</div>
<div>
- <ButtonStyled onClick={props.openSignUp}>
- Cadastre-<span style={{textTransform: 'lowercase'}}>se</span>
- </ButtonStyled>
+ <ButtonStyled contrast={props.contrast} onClick={props.openSignUp}>
+ Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span>
+ </ButtonStyled>
</div>
</div>
</React.Fragment>
@@ -223,7 +221,7 @@ const MyArea = styled.div`
.text {
font-size : 16px;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
align-self : center;
}
@@ -246,18 +244,22 @@ const MyArea = styled.div`
const ButtonPublicarRecurso = styled(Button)`
font-weight : 500 !important;
- border : 1.5px #666 solid !important;
- background-color : #ff7f00 !important;
- color: #666;
+ background-color: ${props => props.contrast === "" ? "#ff7f00 !important" : "black !important"};
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
box-shadow: none;
margin : 0 8px !important;
padding : 6px 25px !important;
-
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
`
const StyledDrawer = styled(Drawer)`
.MuiPaper-root {
- width : 65% !important;
+ width: 40%;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
}
.menu-buttons {
@@ -266,13 +268,13 @@ const StyledDrawer = styled(Drawer)`
font-weight : 500;
cursor : pointer;
outline : 0;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
background-color : transparent;
font-family : 'Roboto', sans serif;
.MuiSvgIcon-root {
- color : #a5a5a5 !important;
+ color: ${props => props.contrast === "" ? "#a5a5a5 !important" : "white !important"};
margin-right : 20px;
vertical-align : middle !important;
font-weight : normal !important;
@@ -290,7 +292,7 @@ const StyledDrawer = styled(Drawer)`
.selected {
color : #fff !important;
- background-color : #00bcd4;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "rgba(255,255,0,0.24)"};
.MuiSvgIcon-root {
color : #fff !important;
}
diff --git a/src/Components/Modal.js b/src/Components/Modal.js
index dd2de1bc9e16debc20d88233ae5f907200dd79c2..8aec80e7abda9de95ba74bc25ae94817d70f5e60 100644
--- a/src/Components/Modal.js
+++ b/src/Components/Modal.js
@@ -20,7 +20,7 @@ import React from 'react';
import { makeStyles } from '@material-ui/styles';
import Modal from '@material-ui/core/Modal';
-import TermsCarousel from './Carousel';
+import TermsCarousel from './Carousel';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
@@ -45,7 +45,7 @@ const useStyles = makeStyles(theme => ({
},
carousel: {
width: "750px",
- height:"370px",
+ height: "370px",
}
}));
@@ -54,7 +54,7 @@ const useStyles = makeStyles(theme => ({
-export default function TransitionsModal() {
+export default function TransitionsModal({ contrast }) {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
@@ -69,11 +69,11 @@ export default function TransitionsModal() {
return (
- <div style={{display:"flex", justifyContent: "center"}}>
- <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
- <button style = {{background: "none",border: "none", color:"#fff",verticalAlign:"center"}} type="button" onClick={handleOpen}>
- <VisibilityOutlinedIcon style={{verticalAlign:"middle"}}/> <spam style={{verticalAlign: "middle",fontWeight: "600",fontSize:"14px"}}>VEJA A VERSÃO RESUMIDA</spam>
+ <button style={{ background: "none", border: "none", color: "#fff", verticalAlign: "center" }} type="button" onClick={handleOpen}>
+ <VisibilityOutlinedIcon style={{ verticalAlign: "middle" }} /> <spam style={{ verticalAlign: "middle", fontWeight: "600", fontSize: "14px" }}>VEJA A VERSÃO RESUMIDA</spam>
</button>
<Modal
aria-labelledby="transition-modal-title"
@@ -90,7 +90,7 @@ export default function TransitionsModal() {
<Fade in={open}>
<div>
- <TermsCarousel/>
+ <TermsCarousel />
</div>
</Fade>
diff --git a/src/Components/ReportButton.js b/src/Components/ReportButton.js
index 654780a75533a8deac35c1cf08121d8634915f3b..4dbac401d7dce5baad49dff0db0aa2bb5e514c69 100644
--- a/src/Components/ReportButton.js
+++ b/src/Components/ReportButton.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, useContext} from 'react'
+import React, { useState, useContext } from 'react'
import styled from 'styled-components'
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
@@ -24,10 +24,10 @@ import ReportIcon from '@material-ui/icons/Error';
import Button from '@material-ui/core/Button';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import ReportModal from './ReportModal.js'
-import {Store} from '../Store.js'
+import { Store } from '../Store.js'
-export default function ReportButton (props) {
- const {state} = useContext(Store)
+export default function ReportButton(props) {
+ const { state } = useContext(Store)
/*Menu control variables-----------------------------*/
const [anchorEl, setAnchorEl] = React.useState(null);
@@ -57,33 +57,33 @@ export default function ReportButton (props) {
return (
<>
- {
- reportModal &&
- <ReportModal open={reportModal} handleClose={() => handleModal()}
+ {
+ reportModal &&
+ <ReportModal open={reportModal} handleClose={() => handleModal()}
form="user" complainableId={props.complainableId}
complainableType={props.complainableType}
- {...props}/>
- }
- {/*
+ {...props} />
+ }
+ {/*
loginModal &&
<LoginModal open={loginModal} handleClose={() => {toggleLoginModal(false)}}/>
*/}
- <Button onClick={handleClick}>
- <MoreVertIcon style={{color : "#666"}}/>
- </Button>
- <StyledMenu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- style={{borderRadius : "0"}}
- >
- <MenuItem onClick={() => {handleModal()}} style={{color : "#666"}}>
- <ReportIcon/>
- <span style={{paddingLeft : "3px"}}>Reportar</span>
- </MenuItem>
- </StyledMenu>
+ <Button onClick={handleClick}>
+ <MoreVertIcon style={state.contrast === "" ? { color: "#666" } : { color: "white" }} />
+ </Button>
+ <StyledMenu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ style={{ borderRadius: "0" }}
+ >
+ <MenuItem onClick={() => { handleModal() }} style={state.contrast === "" ? { color: "#666", backgroundColor: "black" } : { color: "white", backgroundColor: "black" }}>
+ <ReportIcon />
+ <span style={state.contrast === "" ? { paddingLeft: "3px" } : { paddingLeft: "3px", color: "yellow", textDecoration: "underline" }}>Reportar</span>
+ </MenuItem>
+ </StyledMenu>
</>
)
}
diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js
index af62fd97164011216f3ed97da58bede49c3aac9c..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,8 +68,8 @@ function DownloadButton(props) {
return (
props.downloadableLink ?
(
- <ButtonOrange onClick={props.enableDownload}>
- <span className="Text">
+ <ButtonOrange contrast={props.contrast} onClick={props.enableDownload}>
+ <span className="text">
<GetAppIcon className="icon" /> Baixar Recurso
</span>
</ButtonOrange>
@@ -77,8 +77,8 @@ function DownloadButton(props) {
:
props.link ?
(
- <ButtonOrange onClick={props.toggleRedirect}>
- <span className="Text">
+ <ButtonOrange contrast={props.contrast} onClick={props.toggleRedirect}>
+ <span className="text">
<CallMadeIcon className="icon" /> Abrir Recurso
</span>
</ButtonOrange>
@@ -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/Components/SearchBar.js b/src/Components/SearchBar.js
index 8e0ea969a6655039cd1b71419fbc34367e385a77..36400aaa6f213bf8d41aede5dcaf76e332bb31ed 100644
--- a/src/Components/SearchBar.js
+++ b/src/Components/SearchBar.js
@@ -46,12 +46,33 @@ const ButtonStyled = styled(Button)`
text-transform: capitalize !important;
`
const IconSearchStyled = styled(IconSearch)`
- color: #16b8dd;
+ color: ${props => props.contrast === "" ? "#16b8dd" : "white"};
`
const TextFieldStyled = styled(TextField)`
flex-grow: 2;
- margin: 0 2vw !important;
+ margin: 0 2vw !important;
+
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ label.Mui-focused {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ label.Mui-focused.Mui-error {
+ color : red;
+ }
`
/*
@@ -62,29 +83,55 @@ const RadioGroupStyled = styled(RadioGroup)`
`
*/
-const FormControlLabelStyled = styled(FormControlLabel)`
+const FormLearnObjControlLabelStyled = styled(FormControlLabel)`
+ *{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
+ }
+`
+
+const FormCollectionControlLabelStyled = styled(FormControlLabel)`
+ *{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
+ }
+`
+
+const FormUserControlLabelStyled = styled(FormControlLabel)`
*{
text-transform: uppercase;
- color: #ff8a17 !important;
- fontWeight: bolder;
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
}
`
-const RadioStyled = styled(Radio)`
+const RadioLearnObjStyled = styled(Radio)`
color: #ff8a17;
`
+const RadioCollectionStyled = styled(Radio)`
+ color: #673ab7;
+`
+const RadioUserStyled = styled(Radio)`
+ color: #00bcd4;
+`
const SelectStyled = styled(Select)`
margin-right: 2vw;
*{
text-transform: uppercase;
- color: #ff8a17 !important;
- fontWeight: bolder;
+ color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
}
`
const MenuItemStyled = styled(MenuItem)`
text-transform: uppercase;
- fontWeight: bolder;
+ font-weight: bolder;
`
/*const Bar = styled.div`
@@ -147,77 +194,80 @@ export default function SearchBar(props) {
};
return (
- <Grid container>
+ <Grid container style={state.contrast === "" ? { paddingTop: "1em" } : { backgroundColor: "black", paddingTop: "1em" }}>
<Grid container item xs={12} sm={6} md={6} lg={6} xl={6}>
{goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />}
<TextFieldStyled
+ contrast={state.contrast}
id="standard-search"
- label="O que você está buscando"
+ label="O que você está buscando?"
type="search"
margin="normal"
+ variant="outlined"
value={query}
onChange={handleChange}
onKeyPress={handleKeyDown}
/>
</Grid>
<Grid container item justify="center" alignItems="center" xs={12} sm={6} md={6} lg={6} xl={6}>
- {state.windowSize.width >= 960 ?
- <React.Fragment>
- <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
- <Link
- to={linkTarget}
- >
- <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled>
- </Link>
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={3} md={3} lg={3} xl={3}>
- <span>Pressione "Enter" ou click na lupa</span>
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
- <DividerVertical />
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={7} md={7} lg={7} xl={7}>
- <RadioGroup row={true}
- aria-label="Tipo"
- name="types" value={searchClass}
- onChange={
- (event) => setSearchClass(event.target.value)
- }
- justify="center" alignItems="center"
- >
- <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos" />
- <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções" />
- <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" />
- </RadioGroup>
- </Grid>
- </React.Fragment>
- :
- <React.Fragment>
- <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
- <FormControl>
- <SelectStyled
- value={searchClass}
- onChange={(event) => setSearchClass(event.target.value)}
+ {state.windowSize.width >= 960 ?
+ <React.Fragment>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
+ <Link
+ to={linkTarget}
>
- <MenuItemStyled style={{color : "#ff7f00"}} value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
- <MenuItemStyled style={{color : "#673ab7"}} value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
- <MenuItemStyled style={{color : "#00bcd4"}} value="User" aria-label="Usuários">Usuários</MenuItemStyled>
- </SelectStyled>
- </FormControl>
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={2} sm={2} md={2} lg={2} xl={2}>
- <DividerVertical />
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
- <Link
- to={linkTarget}
- >
- <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled>
- </Link>
- </Grid>
- </React.Fragment>
- }
+ <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled contrast={state.contrast} /></ButtonStyled>
+ </Link>
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={3} md={3} lg={3} xl={3}>
+ <span style={state.contrast === "" ? {} : { color: "white" }}>Pressione "Enter" ou click na lupa</span>
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
+ <DividerVertical />
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={7} md={7} lg={7} xl={7}>
+ <RadioGroup row={true}
+ aria-label="Tipo"
+ name="types" value={searchClass}
+ onChange={
+ (event) => setSearchClass(event.target.value)
+ }
+ justify="center" alignItems="center"
+ >
+ <FormLearnObjControlLabelStyled contrast={state.contrast} value="LearningObject" control={<RadioLearnObjStyled contrast={state.contrast} />} label="Recursos" />
+ <FormCollectionControlLabelStyled contrast={state.contrast} value="Collection" control={<RadioCollectionStyled contrast={state.contrast} />} label="Coleções" />
+ <FormUserControlLabelStyled contrast={state.contrast} value="User" control={<RadioUserStyled contrast={state.contrast} />} label="Usuários" />
+ </RadioGroup>
+ </Grid>
+ </React.Fragment>
+ :
+ <React.Fragment>
+ <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
+ <FormControl>
+ <SelectStyled
+ contrast={state.contrast}
+ value={searchClass}
+ onChange={(event) => setSearchClass(event.target.value)}
+ >
+ <MenuItemStyled style={state.contrast === "" ? { color: "#ff7f00" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
+ <MenuItemStyled style={state.contrast === "" ? { color: "#673ab7" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
+ <MenuItemStyled style={state.contrast === "" ? { color: "#00bcd4" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="User" aria-label="Usuários">Usuários</MenuItemStyled>
+ </SelectStyled>
+ </FormControl>
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={2} sm={2} md={2} lg={2} xl={2}>
+ <DividerVertical />
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
+ <Link
+ to={linkTarget}
+ >
+ <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled contrast={state.contrast} /></ButtonStyled>
+ </Link>
+ </Grid>
+ </React.Fragment>
+ }
</Grid>
- </Grid>
+ </Grid >
)
}
\ No newline at end of file
diff --git a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
index 43941d039dc31f98950b9c0fe2857bea2486bf4a..ed4a026ec6187dcf7b7c3ad13fd41958c2e91fb1 100644
--- a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
+++ b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
@@ -1,26 +1,34 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
-import ListItemText from "@material-ui/core/ListItemText";
+import { withStyles } from '@material-ui/core/styles';
import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
+import { yellow, orange } from "@material-ui/core/colors";
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
-const useStyles = makeStyles(theme => ({
+const OrangeCheckBox = withStyles({
root: {
- width: "100%",
- maxWidth: 360,
- backgroundColor: theme.palette.background.paper,
- color: "#666"
- }
-}));
+ color: orange[400],
+ '&$checked': {
+ color: orange[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
-export default function SearchEPCompCurriculum({ onChange, curriculumComponents, setCurriculum }) {
- const classes = useStyles();
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function SearchEPCompCurriculum({ curriculumComponents, setCurriculum, contrast }) {
- const handleToggle = (index) => () => {
+ const handleChange = (event) => {
+ const index = event.target.name;
const newCurriculumComponents = [...curriculumComponents];
newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
setCurriculum(newCurriculumComponents);
@@ -28,34 +36,17 @@ export default function SearchEPCompCurriculum({ onChange, curriculumComponents,
if (curriculumComponents)
return (
- <List className={classes.root}>
- {curriculumComponents.map((item, index) => {
- const labelId = `checkbox-list-label-${item.value}`;
-
- return (
- <ListItem
+ <FormGroup row>
+ {
+ curriculumComponents.map((item, index) => {
+ return <FormControlLabel
+ name={index}
key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(index)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={item.isChecked}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
+ label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
+ />
+ })
+ }
+ </FormGroup>
+ )
}
diff --git a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
index 06715e4615b21f96a5ab87d6caad1cdc5f2d8eac..fcb1c65ceadbf00a2764a2e71ba493d8d198d595 100644
--- a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
+++ b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
@@ -1,61 +1,52 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
-import ListItemText from "@material-ui/core/ListItemText";
+import { withStyles } from '@material-ui/core/styles';
import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
+import { yellow, orange } from "@material-ui/core/colors";
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
-const useStyles = makeStyles(theme => ({
+const OrangeCheckBox = withStyles({
root: {
- width: "100%",
- maxWidth: 360,
- backgroundColor: theme.palette.background.paper,
- color: "#666"
- }
-}));
+ color: orange[400],
+ '&$checked': {
+ color: orange[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
-export default function SearchEPIdiomas({ languages, setLanguages }) {
- const classes = useStyles();
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function SearchEPCompCurriculum({ languages, setLanguages, contrast }) {
- const handleToggle = (index) => () => {
- const newLanguages = [...languages];
- newLanguages[index].isChecked = !newLanguages[index].isChecked
- setLanguages(newLanguages);
+ const handleChange = (event) => {
+ const index = event.target.name;
+ const newCurriculumComponents = [...languages];
+ newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
+ setLanguages(newCurriculumComponents);
};
if (languages)
return (
- <List className={classes.root}>
- {languages.map((item, index) => {
- const labelId = `checkbox-list-label-${item.value}`;
-
- return (
- <ListItem
+ <FormGroup row>
+ {
+ languages.map((item, index) => {
+ return <FormControlLabel
+ name={index}
key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(index)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={item.isChecked}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
+ label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
+ />
+ })
+ }
+ </FormGroup>
+ )
}
diff --git a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
index 41b77adf51206db55b674ce259819f0b8bbf2236..9aedc9a55223ed805781b073179a268d22beb30f 100644
--- a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
+++ b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
@@ -1,61 +1,52 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
-import ListItemText from "@material-ui/core/ListItemText";
+import { withStyles } from '@material-ui/core/styles';
import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
+import { yellow, orange } from "@material-ui/core/colors";
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
-const useStyles = makeStyles(theme => ({
+const OrangeCheckBox = withStyles({
root: {
- width: "100%",
- maxWidth: 360,
- backgroundColor: theme.palette.background.paper,
- color: "#666"
- }
-}));
+ color: orange[400],
+ '&$checked': {
+ color: orange[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
-export default function SearchEPCompCurriculum({ onChange, typeOfResources, setTypeRes }) {
- const classes = useStyles();
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function SearchEPCompCurriculum({ typeOfResources, setTypeRes, contrast }) {
- const handleToggle = (index) => () => {
- const newTypeOfRes = [...typeOfResources];
- newTypeOfRes[index].isChecked = !newTypeOfRes[index].isChecked
- setTypeRes(newTypeOfRes);
+ const handleChange = (event) => {
+ const index = event.target.name;
+ const newCurriculumComponents = [...typeOfResources];
+ newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
+ setTypeRes(newCurriculumComponents);
};
if (typeOfResources)
return (
- <List className={classes.root}>
- {typeOfResources.map((item, index) => {
- const labelId = `checkbox-list-label-${item.value}`;
-
- return (
- <ListItem
+ <FormGroup row>
+ {
+ typeOfResources.map((item, index) => {
+ return <FormControlLabel
+ name={index}
key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(index)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={item.isChecked}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
+ label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
+ />
+ })
+ }
+ </FormGroup>
+ )
}
diff --git a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
index 8df336aaa3c5966791ed1159775afc3ff301d23a..e0d88b80d4ff247d1f3f16ec7b2ab26ddff64184 100644
--- a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
+++ b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
@@ -10,8 +10,6 @@ import SearchEPTiposRec from "./SearchEPTiposRec";
import SearchEPEtapasEns from "./SesrchEPEtapasEns";
import SearchEPIdiomas from "./SearchEPIdiomas";
import { TextField } from "@material-ui/core";
-import Grid from '@material-ui/core/Grid';
-import CircularProgress from '@material-ui/core/CircularProgress';
import Paper from '@material-ui/core/Paper';
import styled from 'styled-components';
@@ -58,11 +56,6 @@ const ExpansionPanelSummary = withStyles({
expanded: {}
})(MuiExpansionPanelSummary);
-const TesteTypography = withStyles({
- root: {
- fontSize: "17px"
- }
-})(Typography);
const ExpansionPanelDetails = withStyles(theme => ({
root: {
@@ -100,73 +93,64 @@ export default function SearchExpansionPanel(props) {
}
return (
- <MainPaper square elevation={4}>
+ <MainPaper square elevation={4} contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
rel="stylesheet"
/>
-
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel1d-content"
id="panel1d-header"
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
>
- <Grid
- container
- direction="row"
- justify="space-between"
+ <Typography
+ style={props.contrast === "" ? {
+ fontSize: "18px",
+ textTransform: "uppercase",
+ fontWeight: "500",
+ } : {
+ fontSize: "18px",
+ textTransform: "uppercase",
+ fontWeight: "500",
+ color: "white"
+ }}
>
- <Grid item >
- <Typography
- style={{
- fontSize: "18px",
- textTransform: "uppercase",
- fontWeight: "500",
- }}
- >
- Filtros
- </Typography>
- </Grid>
- <Grid item>
- {
- props.onFiltering ? <CircularProgress size={24} color="secondary" /> : null
- }
- </Grid>
- </Grid>
+ Filtros
+ </Typography>
</ExpansionPanelSummary>
</ExpansionPanel>
<ExpansionPanel square>
- <ExpansionPanelSummary
- expandIcon={<ExpandMoreIcon />}
-
+ <ExpansionPanelSummary
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
aria-controls="panel2d-content"
id="panel2d-header"
>
- <TesteTypography>Componentes Curriculares</TesteTypography>
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Componentes Curriculares</Typography>
</ExpansionPanelSummary>
- <ExpansionPanelDetails>
- <div>
- <SearchEPCompCurriculum
- onChange={props.onChange}
- curriculumComponents={props.curriculumComponents}
- setCurriculum={props.setCurriculum}
- />
- </div>
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPCompCurriculum
+ contrast={props.contrast}
+ curriculumComponents={props.curriculumComponents}
+ setCurriculum={props.setCurriculum}
+ />
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel square>
<ExpansionPanelSummary
- expandIcon={<ExpandMoreIcon />}
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel3d-content"
id="panel3d-header"
>
- <Typography>Tipos de Recurso</Typography>
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Tipos de Recurso</Typography>
</ExpansionPanelSummary>
- <ExpansionPanelDetails>
- <SearchEPTiposRec
- onChange={props.onChange}
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPTiposRec
+ contrast={props.contrast}
typeOfResources={props.typeOfResources}
setTypeRes={props.setTypeRes}
/>
@@ -175,15 +159,16 @@ export default function SearchExpansionPanel(props) {
<ExpansionPanel square>
<ExpansionPanelSummary
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
aria-controls="panel4d-content"
- expandIcon={<ExpandMoreIcon />}
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
id="panel4d-header"
>
- <Typography>Etapas de Ensino</Typography>
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Etapas de Ensino</Typography>
</ExpansionPanelSummary>
- <ExpansionPanelDetails>
- <SearchEPEtapasEns
- onChange={props.onChange}
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPEtapasEns
+ contrast={props.contrast}
teachingStage={props.teachingStage}
setTeachingStage={props.setTeachingStage}
/>
@@ -192,15 +177,16 @@ export default function SearchExpansionPanel(props) {
<ExpansionPanel square>
<ExpansionPanelSummary
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
aria-controls="panel5d-content"
- expandIcon={<ExpandMoreIcon />}
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
id="panel5d-header"
>
- <Typography>Idiomas</Typography>
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Idiomas</Typography>
</ExpansionPanelSummary>
- <ExpansionPanelDetails>
- <SearchEPIdiomas
- onChange={props.onChange}
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPIdiomas
+ contrast={props.contrast}
languages={props.languages}
setLanguages={props.setLanguages}
/>
@@ -209,14 +195,16 @@ export default function SearchExpansionPanel(props) {
<ExpansionPanel square>
<ExpansionPanelSummary
+ style={props.contrast === "" ? {} : { backgroundColor: "black", borderBottom: "1px solid white" }}
aria-controls="panel6d-content"
- expandIcon={<ExpandMoreIcon />}
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
id="panel6d-header"
>
- <Typography>Palavra-Chave</Typography>
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Palavra-Chave</Typography>
</ExpansionPanelSummary>
- <ExpansionPanelDetails>
- <TextField
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <StyledTextField
+ contrast={props.contrast}
label="Palavra chave + enter "
id="outlined-margin-dense"
variant="outlined"
@@ -231,13 +219,35 @@ export default function SearchExpansionPanel(props) {
);
}
+const StyledTextField = styled(TextField)`
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ label.Mui-focused {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ label.Mui-focused.Mui-error {
+ color : red;
+ }
+`
+
const MainPaper = styled(Paper)`
- /* height: 150px; */
text-align: center;
- background-color: #fff;
margin-top: 5px;
margin-bottom: 30px;
color: #666;
+
.textInfo{
text-align: start;
}
diff --git a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
index 632009aee017ee3b0347a8e1075d30d15376c89c..e5c88bad2fa1620c4e77512024366ff25b13ea1f 100644
--- a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
+++ b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
@@ -1,61 +1,52 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
-import ListItemText from "@material-ui/core/ListItemText";
+import { withStyles } from '@material-ui/core/styles';
import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
+import { yellow, orange } from "@material-ui/core/colors";
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
-const useStyles = makeStyles(theme => ({
+const OrangeCheckBox = withStyles({
root: {
- width: "100%",
- maxWidth: 360,
- backgroundColor: theme.palette.background.paper,
- color: "#666"
- }
-}));
+ color: orange[400],
+ '&$checked': {
+ color: orange[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
-export default function SearchEPEtapasEns({ teachingStage, setTeachingStage }) {
- const classes = useStyles();
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function SearchEPCompCurriculum({ teachingStage, setTeachingStage, contrast }) {
- const handleToggle = (index) => () => {
- const newTypeTeachingStage = [...teachingStage];
- newTypeTeachingStage[index].isChecked = !newTypeTeachingStage[index].isChecked
- setTeachingStage(newTypeTeachingStage);
+ const handleChange = (event) => {
+ const index = event.target.name;
+ const newCurriculumComponents = [...teachingStage];
+ newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
+ setTeachingStage(newCurriculumComponents);
};
if (teachingStage)
return (
- <List className={classes.root}>
- {teachingStage.map((item, index) => {
- const labelId = `checkbox-list-label-${item.value}`;
-
- return (
- <ListItem
+ <FormGroup row>
+ {
+ teachingStage.map((item, index) => {
+ return <FormControlLabel
+ name={index}
key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(index)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={item.isChecked}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
+ label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
+ />
+ })
+ }
+ </FormGroup>
+ )
}
diff --git a/src/Components/SearchPageComponents/CollectionTemplate.js b/src/Components/SearchPageComponents/CollectionTemplate.js
index c3bcb3ee5b8568430afcc2eacd19a5882cd85b13..923af661bc27adef295c55f5fe63c84e50b0387c 100644
--- a/src/Components/SearchPageComponents/CollectionTemplate.js
+++ b/src/Components/SearchPageComponents/CollectionTemplate.js
@@ -9,7 +9,7 @@ import IconButton from '@material-ui/core/IconButton';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
-export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
+export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage, contrast }) {
const topRef = React.useRef();
const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
@@ -18,72 +18,77 @@ export default function ResourceTemplate({ isLoading, resources, totalResources,
}, [isLoading])
return (
- <ResourcePaper elevation={4} square>
+ <ResourcePaper elevation={4} square contrast={contrast}>
<div ref={topRef} />
- <Title>
- Coleções encontradas ({totalResources})
- </Title>
- {
- isLoading ?
- <LoadingSpinner text='Carregando Coleções...' />
- :
- <Grid container justify='center' alignItems='center' spacing={3}>
- {
- resources.length >= 1 ?
- resources.map((card) => {
- return <Grid item key={new Date().toISOString() + card.id} >
- <CollectionCardFunction
- name={card.name}
- tags={card.tags}
- rating={card.review_average}
- id={card.id}
- author={card.owner ? card.owner.name : ""}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner ? card.owner.avatar : ""}
- likeCount={card.likes_count}
- followed={card.followed}
- liked={card.liked}
- collections={card.collection_items}
- authorID={card.owner.id}
- />
- </Grid>
- })
- :
- <NoContentDiv>
- <h3>
- Desculpe, não há dados nessa página.
- </h3>
- <img src={noCollections} alt='No cards' />
- </NoContentDiv>
- }
+ <div className="main">
+ <Title contrast={contrast}>
+ Coleções encontradas ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner contrast={contrast} text='Carregando Coleções...' />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return <Grid item key={new Date().toISOString() + card.id} >
+ <CollectionCardFunction
+ name={card.name}
+ tags={card.tags}
+ rating={card.review_average}
+ id={card.id}
+ author={card.owner ? card.owner.name : ""}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner ? card.owner.avatar : ""}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner.id}
+ />
+ </Grid>
+ })
+ :
+ <NoContentDiv contrast={contrast}>
+ <h3>
+ Desculpe, não há dados nessa página.
+ </h3>
+ <img src={noCollections} alt='No cards' />
+ </NoContentDiv>
+ }
+ </Grid >
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage contrast={contrast}>
+ {currPage}
+ </ActualPage>
+ <TotalPages contrast={contrast}>
+ ...{totalPages}
+ </TotalPages>
+ </Grid>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
</Grid>
- }
- {
- !isLoading &&
- <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === 0}>
- <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
- <ArrowBackIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- <Grid item>
- <ActualPage>
- {currPage}
- </ActualPage>...{totalPages}
- </Grid>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === totalPages}>
- <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
- <ArrowForwardIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- </Grid>
- }
- </ResourcePaper>
+ }
+ </div >
+ </ResourcePaper >
)
};
@@ -91,20 +96,23 @@ const Title = styled.h4`
text-transform: uppercase;
font-weight: 500;
text-align: left;
- color: #673ab7;
+ color: ${props => props.contrast === "" ? "#673ab7" : "white"};
`
const NoContentDiv = styled.div`
>h3{
- color: #673ab7;
+ color: ${props => props.contrast === "" ? "#673ab7" : "white"};
text-align: center;
}
`
const ActualPage = styled.span`
- color: #673ab7;
+ color: ${props => props.contrast === "" ? "#673ab7" : "yellow"};
+`
+const TotalPages = styled.span`
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const StyledIconButton = styled(Paper)`
border-radius: 50% !important;
- background-color: ${props => props.disabled ? "#666" : "#673ab7"} !important;
+ background-color: ${props => props.disabled ? "#666" : props.contrast === "" ? "#673ab7" : "yellow"} !important;
.icon{
color: ${props => props.disabled ? "#d4d4d4" : "white"};
}
@@ -113,11 +121,15 @@ const StyledIconButton = styled(Paper)`
const ResourcePaper = styled(Paper)`
/* height: 150px; */
text-align: center;
- background-color: #fff;
margin-top: 5px;
margin-bottom: 30px;
- padding: 0.5em 1em;
- color: #666;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .main{
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ padding: 0.5em 1em;
+ }
+
.textInfo{
text-align: start;
}
diff --git a/src/Components/SearchPageComponents/Error.js b/src/Components/SearchPageComponents/Error.js
index 7cb9d98ce01c0006ef33a45422ba1357a119323d..523bae93b4e9ccb04a254792ce18975a993d04f4 100644
--- a/src/Components/SearchPageComponents/Error.js
+++ b/src/Components/SearchPageComponents/Error.js
@@ -2,29 +2,32 @@ import React from 'react';
import styled from 'styled-components';
import Paper from '@material-ui/core/Paper';
-export default function Error() {
- return <ResourcePaper square elevation={4}>
- <Title>
- Houve um erro durante a obtenção de dados :(
- </Title>
+export default function Error({ contrast }) {
+ return <ResourcePaper square elevation={4} contrast={contrast}>
+ <div className="div">
+ <Title contrast={contrast}>
+ Houve um erro durante a obtenção de dados :(
+ </Title>
+ </div>
</ResourcePaper>
}
const ResourcePaper = styled(Paper)`
- /* height: 150px; */
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
text-align: center;
- background-color: #fff;
- margin-top: 5px;
- margin-bottom: 30px;
- padding: 0.5em 1em;
color: #666;
width: 100%;
+
+ .div{
+ padding: 0.5em 1em;
+ background: ${props => props.contrast === "" ? "" : "black"};
+ }
`;
const Title = styled.h4`
text-transform: uppercase;
font-weight: 500;
text-align: left;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
text-align: center;
`
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/FilterSummary.js b/src/Components/SearchPageComponents/FilterSummary.js
index 32a23be2ff77e1a3dcb948d02185c46867c7fe81..0feec4928f567aebbef2a48437df6ab1543cbe2e 100644
--- a/src/Components/SearchPageComponents/FilterSummary.js
+++ b/src/Components/SearchPageComponents/FilterSummary.js
@@ -3,128 +3,164 @@ import styled from 'styled-components';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Chip from '@material-ui/core/Chip';
-import Button from "@material-ui/core/Button";
export default function FilterSummary
- ({ curriculumComponents, typeOfResources, languages, teachingStage, tag, onButtonClicked }) {
+ ({ curriculumComponents, typeOfResources, languages, teachingStage, tag, onButtonClicked, contrast }) {
return (
- <FilterSummaryPaper square elevation={4}>
- <h3 className="title">
- Resumo dos filtros selecionados
- </h3>
- <Grid container direction='column' spacing={2}>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- Componentes curriculares:
- </Grid>
- <Grid item>
- {
- curriculumComponents.map((item) => {
- return (
- item.isChecked &&
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
+ <FilterSummaryPaper square elevation={4} contrast={contrast}>
+ <div className="main">
+ <h3 className="title">
+ Resumo dos filtros selecionados
+ </h3>
+ <Grid container direction='column' spacing={2}>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Componentes curriculares:
+ </Grid>
+ <Grid item>
+ {
+ curriculumComponents.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
- })
- }
+ })
+ }
+ </Grid>
</Grid>
</Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- Tipos de recursos:
- </Grid>
- <Grid item>
- {
- typeOfResources.map((item) => {
- return (
- item.isChecked &&
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
- })
- }
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Tipos de recursos:
+ </Grid>
+ <Grid item>
+ {
+ typeOfResources.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
+ })
+ }
+ </Grid>
</Grid>
</Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- Etapas de ensino:
- </Grid>
- <Grid item>
- {
- teachingStage.map((item) => {
- return (
- item.isChecked &&
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
- })
- }
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Etapas de ensino:
+ </Grid>
+ <Grid item>
+ {
+ teachingStage.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
+ })
+ }
+ </Grid>
</Grid>
</Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- Idiomas:
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Idiomas:
</Grid>
- <Grid item>
- {
- languages.map((item) => {
- return (
- item.isChecked &&
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
- })
- }
+ <Grid item>
+ {
+ languages.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
+ })
+ }
+ </Grid>
</Grid>
</Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- Palavra chave:
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Palavra chave:
</Grid>
- <Grid item>
- {
- tag &&
- <StyledChip size="small" label={tag} />
- }
+ <Grid item>
+ {
+ tag &&
+ <StyledChip contrast={contrast} size="small" label={tag} />
+ }
+ </Grid>
</Grid>
</Grid>
- </Grid>
- <Grid item>
- <StyledButton variant="contained" onClick={onButtonClicked}>
- <span className="Text">
+ <Grid item>
+ <Button contrast={contrast} variant="contained" onClick={onButtonClicked}>
Aplicar filtro
- </span>
- </StyledButton>
+ </Button>
+ </Grid>
</Grid>
- </Grid>
+ </div>
</FilterSummaryPaper>
)
}
const FilterSummaryPaper = styled(Paper)`
- background-color: #fff;
margin-top: 5px;
margin-bottom: 30px;
- padding: 0.5em 1em;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
.title{
text-transform: uppercase;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-weight: 500;
}
+
+ .main{
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ padding: 0.5em 1em;
+ }
+
+ .subtitle{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
`
-const StyledButton = styled(Button)`
- background-color: #ff7f00 !important;
- .text{
- color: white;
+const Button = styled.button`
+ background: ${props => props.contrast === "" ? "#ff7f00" : "black"};
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "white" : "yellow"};
+ font-family: Roboto,sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ height: 36px;
+ border-radius: 3px;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ min-height: 36px;
+ min-width: 88px;
+ line-height: 36px;
+ vertical-align: middle;
+ -webkit-box-align: center;
+ outline: none;
+ text-align: center;
+ padding: 0em 1em;
+ white-space: nowrap;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover {
+ background: ${props => props.contrast === "" ? "rgba(255, 127, 0,0.75)" : "rgba(255,255,0,0.24)"};
+ }
+ :active{
+ transform: translateY(2px);
}
`
const StyledChip = styled(Chip)`
- margin: 0.2em
+ margin: 0.2em;
+ background-color: ${props => props.contrast === "" ? 0 : "black !important"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? 0 : "white !important"};
`
diff --git a/src/Components/SearchPageComponents/HeaderFilters.js b/src/Components/SearchPageComponents/HeaderFilters.js
index 21bcc78c8527f9f6ee276af7ca6c1dc188352330..b92c85c124406a8db3381909ae561c975240a9f3 100644
--- a/src/Components/SearchPageComponents/HeaderFilters.js
+++ b/src/Components/SearchPageComponents/HeaderFilters.js
@@ -5,21 +5,22 @@ import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import MenuItem from '@material-ui/core/MenuItem';
-export default function HeaderFilters({ options, orders, currOption, currOrder, handleChangeOption, handleChangeOrder }) {
+export default function HeaderFilters({ options, contrast, orders, currOption, currOrder, handleChangeOption, handleChangeOrder }) {
if (currOption !== 'User')
return (
- <FiltersPaper elevation={4} square>
- <Grid container direction='row' spacing={2} alignItems='center'>
+ <FiltersPaper contrast={contrast} elevation={4} square>
+ <Grid className="gridStyle" container direction='row' alignItems='center'>
<Grid item xs={12} sm={6}>
<Grid container alignItems='center'>
<Grid item xs={12} md={2}>
- <Label>
+ <Label contrast={contrast}>
Buscar por:
- </Label>
+ </Label>
</Grid>
<Grid item xs={12} md={10}>
- <TextField
+ <StyledTextField
+ contrast={contrast}
select
fullWidth
value={currOption}
@@ -27,17 +28,18 @@ export default function HeaderFilters({ options, orders, currOption, currOrder,
variant="outlined"
>
{options.map((option) => (
- <MenuItem
+ <StyledMenuItem
+ contrast={contrast}
key={option.value}
value={option.name}
name={option.value}
>
- <span style={{ color: option.color }}>
+ <span style={currOption === option.name ? { color: option.color, textDecoration: "none", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
{option.value}
</span>
- </MenuItem>
+ </StyledMenuItem>
))}
- </TextField>
+ </StyledTextField>
</Grid>
</Grid>
</Grid>
@@ -45,12 +47,13 @@ export default function HeaderFilters({ options, orders, currOption, currOrder,
<Grid item xs={12} sm={6}>
<Grid container alignItems='center'>
<Grid item xs={12} md={2}>
- <Label>
+ <Label contrast={contrast}>
Ordenar por:
- </Label>
+ </Label>
</Grid>
<Grid item xs={12} md={10}>
- <TextField
+ <StyledTextField
+ contrast={contrast}
select
fullWidth
value={currOrder}
@@ -58,34 +61,39 @@ export default function HeaderFilters({ options, orders, currOption, currOrder,
variant="outlined"
>
{orders.map((option) => (
- <MenuItem
+ <StyledMenuItem
+ contrast={contrast}
+ color={option.color}
key={option.value}
value={option.name}
name={option.value}
>
- {option.value}
- </MenuItem>
+ <span style={currOrder === option.name ? { color: option.color, textDecoration: "none", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
+ {option.value}
+ </span>
+ </StyledMenuItem>
))}
- </TextField>
+ </StyledTextField>
</Grid>
</Grid>
</Grid>
- </Grid>
- </FiltersPaper>
+ </Grid >
+ </FiltersPaper >
)
else
return (
- <FiltersPaper elevation={4} square>
- <Grid container direction='row' alignItems='center'>
+ <FiltersPaper contrast={contrast} elevation={4} square>
+ <Grid className="gridStyle" container direction='row' alignItems='center'>
<Grid item xs={12}>
<Grid container alignItems='center'>
<Grid item xs={12} md={2}>
- <Label>
+ <Label contrast={contrast}>
Buscar por:
- </Label>
+ </Label>
</Grid>
<Grid item xs={12} md={10}>
- <TextField
+ <StyledTextField
+ contrast={contrast}
select
fullWidth
value={currOption}
@@ -93,40 +101,61 @@ export default function HeaderFilters({ options, orders, currOption, currOrder,
variant="outlined"
>
{options.map((option) => (
- <MenuItem
+ <StyledMenuItem
+ contrast={contrast}
+ color={option.color}
key={option.value}
value={option.name}
name={option.value}
>
- <span style={{ color: option.color }}>
+ <span style={currOption === option.name ? { color: option.color, textDecoration: "none", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
{option.value}
</span>
- </MenuItem>
+ </StyledMenuItem>
))}
- </TextField>
+ </StyledTextField>
</Grid>
</Grid>
</Grid>
</Grid>
- </FiltersPaper>
+ </FiltersPaper >
)
}
const Label = styled.p`
text-align: center;
font-weight: 600;
+ color: ${props => props.contrast === "" ? "" : "white"};
`
+const StyledTextField = styled(TextField)`
+.MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+`
+
+const StyledMenuItem = styled(MenuItem)`
+ background: ${props => props.contrast === "" ? "" : "black !important"};
+`
const FiltersPaper = styled(Paper)`
- /* height: 150px; */
text-align: center;
- background-color: #fff;
margin-top: 5px;
margin-bottom: 30px;
- padding: 0.5em 1em;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
.textInfo{
text-align: start;
}
+
+ .gridStyle{
+ padding: 0.5em 1em;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
+ }
`;
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/ResourceTemplate.js b/src/Components/SearchPageComponents/ResourceTemplate.js
index 01f747366796e9d9a556861e6201399285622bea..063e61780deafcf8b895524b4f3db8a40932b930 100644
--- a/src/Components/SearchPageComponents/ResourceTemplate.js
+++ b/src/Components/SearchPageComponents/ResourceTemplate.js
@@ -9,7 +9,7 @@ import IconButton from '@material-ui/core/IconButton';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
-export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
+export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage, contrast }) {
const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
const topRef = React.useRef();
@@ -18,71 +18,76 @@ export default function ResourceTemplate({ isLoading, resources, totalResources,
}, [isLoading])
return (
- <ResourcePaper elevation={4} square>
+ <ResourcePaper elevation={4} square contrast={contrast}>
<div ref={topRef} />
- <Title>
- Recursos encontrados ({totalResources})
- </Title>
- {
- isLoading ?
- <LoadingSpinner text='Carregando recursos...' />
- :
- <Grid container justify='center' alignItems='center' spacing={3}>
- {
- resources.length >= 1 ?
- resources.map((card) => {
- return <Grid item key={new Date().toISOString() + card.id} >
- <ResourceCardFunction
- avatar={card.publisher ? card.publisher.avatar : ""}
- id={card.id}
- thumbnail={card.thumbnail}
- type={card.object_type ? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- author={card.author}
- tags={card.educational_stages}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
- </Grid>
- })
- :
- <NoContentDiv>
- <h3>
- Desculpe, não há dados nessa página.
- </h3>
- <img src={noResources} alt='No cards' />
- </NoContentDiv>
- }
+ <div className="main">
+ <Title contrast={contrast}>
+ Recursos encontrados ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner text='Carregando recursos...' contrast={contrast} />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return <Grid item key={new Date().toISOString() + card.id} >
+ <ResourceCardFunction
+ avatar={card.publisher ? card.publisher.avatar : ""}
+ id={card.id}
+ thumbnail={card.thumbnail}
+ type={card.object_type ? card.object_type : "Outros"}
+ title={card.name}
+ published={card.state === "published" ? true : false}
+ likeCount={card.likes_count}
+ liked={card.liked}
+ rating={card.review_average}
+ author={card.author}
+ tags={card.educational_stages}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </Grid>
+ })
+ :
+ <NoContentDiv contrast={contrast}>
+ <h3>
+ Desculpe, não há dados nessa página.
+ </h3>
+ <img src={noResources} alt='No cards' />
+ </NoContentDiv>
+ }
+ </Grid>
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage contrast={contrast}>
+ {currPage}
+ </ActualPage>
+ <TotalPages contrast={contrast}>
+ ...{totalPages}
+ </TotalPages>
+ </Grid>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
</Grid>
- }
- {
- !isLoading &&
- <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === 0}>
- <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
- <ArrowBackIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- <Grid item>
- <ActualPage>
- {currPage}
- </ActualPage>...{totalPages}
- </Grid>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === totalPages}>
- <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
- <ArrowForwardIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- </Grid>
- }
+ }
+ </div>
</ResourcePaper>
)
};
@@ -91,20 +96,23 @@ const Title = styled.h4`
text-transform: uppercase;
font-weight: 500;
text-align: left;
- color: #ff7f00;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
`
const NoContentDiv = styled.div`
>h3{
- color: #ff7f00;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
text-align: center;
}
`
const ActualPage = styled.span`
- color: #ff7f00;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+`
+const TotalPages = styled.span`
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const StyledIconButton = styled(Paper)`
border-radius: 50% !important;
- background-color: ${props => props.disabled ? "#666" : "#ff7f00"} !important;
+ background-color: ${props => props.disabled ? "#666" : props.contrast === "" ? "#ff7f00" : "yellow"} !important;
.icon{
color: ${props => props.disabled ? "#d4d4d4" : "white"};
}
@@ -113,11 +121,15 @@ const StyledIconButton = styled(Paper)`
const ResourcePaper = styled(Paper)`
/* height: 150px; */
text-align: center;
- background-color: #fff;
margin-top: 5px;
margin-bottom: 30px;
- padding: 0.5em 1em;
- color: #666;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .main{
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ padding: 0.5em 1em;
+ }
+
.textInfo{
text-align: start;
}
diff --git a/src/Components/SearchPageComponents/UserTemplate.js b/src/Components/SearchPageComponents/UserTemplate.js
index 991a31d30efa8161dd15584f3455380d20c3b31e..49ce62831c4136108609052ad78ac933771339b3 100644
--- a/src/Components/SearchPageComponents/UserTemplate.js
+++ b/src/Components/SearchPageComponents/UserTemplate.js
@@ -9,7 +9,7 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import { apiDomain } from '../../env';
-export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
+export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage, contrast }) {
const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
const topRef = React.useRef();
@@ -18,66 +18,71 @@ export default function ResourceTemplate({ isLoading, resources, totalResources,
}, [isLoading])
return (
- <ResourcePaper elevation={4} square>
+ <ResourcePaper elevation={4} square contrast={contrast}>
<div ref={topRef} />
- <Title>
- Usuários encontrados ({totalResources})
- </Title>
- {
- isLoading ?
- <LoadingSpinner text='Carregando recursos...' />
- :
- <Grid container justify='center' alignItems='center' spacing={3}>
- {
- resources.length >= 1 ?
- resources.map((card) => {
- return <Grid item key={new Date().toISOString() + card.id} >
- <ContactCard
- name={card.name}
- avatar={card.avatar ? apiDomain + card.avatar : null}
- cover={card.cover ? apiDomain + card.cover : null}
- numCollections={card.collections_count}
- numLearningObjects={card.learning_objects_count}
- follow_count={card.follows_count}
- followed={card.followed || null}
- followerID={card.id}
- href={'/usuario-publico/' + card.id}
- />
- </Grid>
- })
- :
- <NoContentDiv>
- <h3>
- Desculpe, não há dados nessa página.
+ <div className="main">
+ <Title contrast={contrast}>
+ Usuários encontrados ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner contrast={contrast} text='Carregando recursos...' />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return <Grid item key={new Date().toISOString() + card.id} >
+ <ContactCard
+ name={card.name}
+ avatar={card.avatar ? apiDomain + card.avatar : null}
+ cover={card.cover ? apiDomain + card.cover : null}
+ numCollections={card.collections_count}
+ numLearningObjects={card.learning_objects_count}
+ follow_count={card.follows_count}
+ followed={card.followed || null}
+ followerID={card.id}
+ href={'/usuario-publico/' + card.id}
+ />
+ </Grid>
+ })
+ :
+ <NoContentDiv contrast={contrast}>
+ <h3>
+ Desculpe, não há dados nessa página.
</h3>
- </NoContentDiv>
- }
+ </NoContentDiv>
+ }
+ </Grid>
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage contrast={contrast}>
+ {currPage}
+ </ActualPage>
+ <TotalPages contrast={contrast}>
+ ...{totalPages}
+ </TotalPages>
+ </Grid>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
</Grid>
- }
- {
- !isLoading &&
- <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === 0}>
- <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
- <ArrowBackIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- <Grid item>
- <ActualPage>
- {currPage}
- </ActualPage>...{totalPages}
- </Grid>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === totalPages}>
- <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
- <ArrowForwardIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- </Grid>
- }
+ }
+ </div>
</ResourcePaper>
)
};
@@ -86,20 +91,23 @@ const Title = styled.h4`
text-transform: uppercase;
font-weight: 500;
text-align: left;
- color: #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "white"};
`
const NoContentDiv = styled.div`
>h3{
- color: #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "white"};
text-align: center;
}
`
const ActualPage = styled.span`
- color: #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+`
+const TotalPages = styled.span`
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const StyledIconButton = styled(Paper)`
border-radius: 50% !important;
- background-color: ${props => props.disabled ? "#666" : "#00bcd4"} !important;
+ background-color: ${props => props.disabled ? "#666" : props.contrast === "" ? "#00bcd4" : "yellow"} !important;
.icon{
color: ${props => props.disabled ? "#d4d4d4" : "white"};
}
@@ -108,11 +116,15 @@ const StyledIconButton = styled(Paper)`
const ResourcePaper = styled(Paper)`
/* height: 150px; */
text-align: center;
- background-color: #fff;
margin-top: 5px;
margin-bottom: 30px;
- padding: 0.5em 1em;
- color: #666;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .main{
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ padding: 0.5em 1em;
+ }
+
.textInfo{
text-align: start;
}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
index 9b987347a51274465b78e7db062a99bd6d9a2273..7f636fcd63ba1610b4bf38f464d1ff1c98d88cc7 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
@@ -21,100 +21,101 @@ import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfi
import PanelTemplateColecao from '../PanelComponents/TemplateColecao.js'
import LoadingSpinner from '../../LoadingSpinner.js'
-export default function TabColecoes({id, username}) {
- const [loading, handleLoading] = useState(true)
-
- const [errorInUserColl, setErrorInUserColl] = useState(false)
-
- const [userCollections, setUserCollections] = useState([])
-
- const [currLimitUserColl, setCurrLimitUserColl] = useState(4)
-
- const [loadingMoreUserColl, setLoadingMoreUserColl] = useState(false);
-
- const [endOfUserColl, setEndOfUserColl] = useState(false);
-
- function handleSuccess(responseArr, headersArr) {
- setErrorInUserColl(responseArr[0].errors ? true : false)
-
- handleLoading(false)
- setUserCollections(responseArr[0])
-
- if (headersArr[0].has('X-Total-Count')) {
- setEndOfUserColl(headersArr[0].get('X-Total-Count'));
- }
- }
-
- function handleError(error) {
- handleLoading(false)
- setErrorInUserColl(true)
- }
-
- const getInfo = () => {
- const urls = [
- `/users/${id}/collections?offset=0&limit=4`,
- ]
- fetchAllRequest(urls, handleSuccess, handleError)
+export default function TabColecoes({ id, username, contrast }) {
+ const [loading, handleLoading] = useState(true)
+
+ const [errorInUserColl, setErrorInUserColl] = useState(false)
+
+ const [userCollections, setUserCollections] = useState([])
+
+ const [currLimitUserColl, setCurrLimitUserColl] = useState(4)
+
+ const [loadingMoreUserColl, setLoadingMoreUserColl] = useState(false);
+
+ const [endOfUserColl, setEndOfUserColl] = useState(false);
+
+ function handleSuccess(responseArr, headersArr) {
+ setErrorInUserColl(responseArr[0].errors ? true : false)
+
+ handleLoading(false)
+ setUserCollections(responseArr[0])
+
+ if (headersArr[0].has('X-Total-Count')) {
+ setEndOfUserColl(headersArr[0].get('X-Total-Count'));
}
-
- useEffect(() => {
- handleLoading(true)
- getInfo()
- }, [])
-
- const showMoreUserCollections = (limite) => {
- const limit = limite;
- setLoadingMoreUserColl(true);
- setCurrLimitUserColl(currLimitUserColl + limit)
- const url = `/users/${id}/collections?offset=${currLimitUserColl}&limit=${limit}`;
- getRequest(url,
- (data) => {
- if (data.errors) {
- setLoadingMoreUserColl(false);
- setEndOfUserColl(true)
- setErrorInUserColl(true)
- }
- else if (data.length >= 1) {
- let currData = [...userCollections];
- currData = [...currData.concat(data)];
- setLoadingMoreUserColl(false);
- setUserCollections(currData);
- }
- else {
- setLoadingMoreUserColl(false);
- setEndOfUserColl(true)
- }
- },
- (error) => {
+ }
+
+ function handleError(error) {
+ handleLoading(false)
+ setErrorInUserColl(true)
+ }
+
+ const getInfo = () => {
+ const urls = [
+ `/users/${id}/collections?offset=0&limit=4`,
+ ]
+ fetchAllRequest(urls, handleSuccess, handleError)
+ }
+
+ useEffect(() => {
+ handleLoading(true)
+ getInfo()
+ }, [])
+
+ const showMoreUserCollections = (limite) => {
+ const limit = limite;
+ setLoadingMoreUserColl(true);
+ setCurrLimitUserColl(currLimitUserColl + limit)
+ const url = `/users/${id}/collections?offset=${currLimitUserColl}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.errors) {
setLoadingMoreUserColl(false);
setEndOfUserColl(true)
setErrorInUserColl(true)
}
- )
- }
-
- return (
- <>
- {
- loading ?
- (
- <LoadingSpinner text={`Carregando coleções de ${username}`} />
- )
- :
- (
- <PanelTemplateColecao
- title={"Coleções Públicas"}
- length={userCollections.length}
- noContentText={username + " não possui nenhuma coleção."}
- sliceArr={userCollections}
- showMore={showMoreUserCollections}
- loadingMore={loadingMoreUserColl}
- end={endOfUserColl}
- followed={false}
- error={errorInUserColl}
- />
- )
- }
- </>
+ else if (data.length >= 1) {
+ let currData = [...userCollections];
+ currData = [...currData.concat(data)];
+ setLoadingMoreUserColl(false);
+ setUserCollections(currData);
+ }
+ else {
+ setLoadingMoreUserColl(false);
+ setEndOfUserColl(true)
+ }
+ },
+ (error) => {
+ setLoadingMoreUserColl(false);
+ setEndOfUserColl(true)
+ setErrorInUserColl(true)
+ }
)
+ }
+
+ return (
+ <>
+ {
+ loading ?
+ (
+ <LoadingSpinner contrast={contrast} text={`Carregando coleções de ${username}`} />
+ )
+ :
+ (
+ <PanelTemplateColecao
+ contrast={contrast}
+ title={"Coleções Públicas"}
+ length={userCollections.length}
+ noContentText={username + " não possui nenhuma coleção."}
+ sliceArr={userCollections}
+ showMore={showMoreUserCollections}
+ loadingMore={loadingMoreUserColl}
+ end={endOfUserColl}
+ followed={false}
+ error={errorInUserColl}
+ />
+ )
+ }
+ </>
+ )
}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js b/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js
index 7965d58e5111ad748a22cdf2672c25f05bc3f3ce..ceba6bcbc9adb4b1d4c9f56f03e0d79ae2bc91d1 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js
@@ -60,15 +60,16 @@ export function NoContent(props) {
)
}
-export default function TabInicio({ id, user, learningObjs, collections }) {
+export default function TabInicio({ id, user, learningObjs, collections, contrast }) {
return (
<React.Fragment>
{/*display user description*/}
{
user.description &&
- <UserDescription text={user.description} />
+ <UserDescription contrast={contrast} text={user.description} />
}
<Template
+ contrast={contrast}
length={learningObjs.length}
titleText={learningObjs.length === 1 ? `Último Recurso de ${user.name}` : `Últimos recursos de ${user.name}`}
noContentText={`${user.name} não publicou nenhum recursos ainda`}
@@ -79,6 +80,7 @@ export default function TabInicio({ id, user, learningObjs, collections }) {
error={false}
/>
<PanelTemplateColecao
+ contrast={contrast}
title={`Últimas coleçoes de ${user.name}`}
length={collections.length}
noContentText={`${user.name} não publicou nenhuma coleção ainda`}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js b/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
index b8f38e36b55e62c26f5df389ba6b80bbdba6a301..70f07ced9b1ab2e47323e2d5e8dfcb2b16518325 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
@@ -21,7 +21,7 @@ import LoadingSpinner from '../../LoadingSpinner.js'
import Template from '../PanelComponents/TemplateRecurso.js'
import { getRequest } from '../../HelperFunctions/getAxiosConfig'
-export default function TabPanelAtividades({id, username}) {
+export default function TabPanelAtividades({ id, username, contrast }) {
const [loading, handleLoading] = useState(true)
const [errorInLearnObj, setErrorInLearnObj] = useState(false)
@@ -83,13 +83,14 @@ export default function TabPanelAtividades({id, username}) {
{
loading ?
(
- <LoadingSpinner text={`Carregando os recursos de ${username}`} />
+ <LoadingSpinner contrast={contrast} text={`Carregando os recursos de ${username}`} />
)
:
(
[
<React.Fragment>
<Template
+ contrast={contrast}
length={learningObjects.length}
titleText={learningObjects.length === 1 ? `Recurso publicado de ${username}` : `Recursos publicados ${username}`}
noContentText={`${username} ainda não publicou nenhum Recurso!`}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabRede.js b/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
index 81334d46c6edc88b10c8df88fa0df5366edec587..15492323f74174e8358e1875ea1248937151c023 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
@@ -16,160 +16,162 @@ 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 } from 'react'
import PanelTemplateRede from '../PanelComponents/TemplateRede.js'
import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../LoadingSpinner.js'
-export default function TabRede ({id, username}) {
- const [loading, handleLoading] = useState(true)
-
- const [errorInFollowing, setErrorInFollowing] = useState(false)
- const [errorInFollowers, setErrorInFollowers] = useState(false)
-
- const [followingList, setFollowing] = useState([])
- const [currFollowingLimit, setCurrFollowingLimit] = useState(12)
- const [loadingMoreFollowing, setLoadingFollowing] = useState(false)
- const [endOfFollowing, setEndOfFollowing] = useState(false)
-
- const [followersList, setFollowers] = useState([])
- const [currFollowerLimit, setFollowersLimit] = useState(12)
- const [loadingMoreFollowers, setLoadingMoreFollowers] = useState(false)
- const [endOfFollowers, setEndOfFollowers] = useState(false)
-
- const showMoreFollowing = (limite) => {
- setLoadingFollowing(true);
- const limit = limite;
- setCurrFollowingLimit(currFollowingLimit + limit)
- const url = `/users/${id}/following/User?offset=${currFollowingLimit}&limit=${limit}`;
- getRequest(url,
- (data) => {
- if (data.errors) {
- setLoadingFollowing(false);
- setEndOfFollowing(true);
- setErrorInFollowing(true);
- }
- else if (data.length >= 1) {
- let currData = [...followingList];
- currData = [...currData.concat(data)];
- setLoadingFollowing(false);
- setFollowing(currData);
- }
- else {
- setLoadingFollowing(false);
- setEndOfFollowing(true);
- }
- },
- (error) => {
- setLoadingFollowing(false);
- setEndOfFollowing(true);
- setErrorInFollowing(true);
- }
- )
- }
-
- const showMoreFollowers = (limite) => {
- setLoadingMoreFollowers(true);
- const limit = limite;
- setFollowersLimit(currFollowerLimit + limit)
- const url = `/users/${id}/followers?offset=${currFollowerLimit}&limit=${limit}`;
- getRequest(url,
- (data) => {
- if (data.errors) {
- setLoadingMoreFollowers(false);
- setEndOfFollowers(true);
- setErrorInFollowers(true);
- }
- else {
- if (data.length >= 1) {
- let currData = [...followersList];
- currData = [...currData.concat(data)];
- setLoadingMoreFollowers(false);
- setFollowers(currData);
- }
- else {
- setLoadingMoreFollowers(false);
- setEndOfFollowers(true)
- }
- }
- },
- (error) => {
- setLoadingMoreFollowers(false);
- setEndOfFollowers(true);
- setErrorInFollowers(true);
- }
- )
- }
+export default function TabRede({ id, username, contrast }) {
+ const [loading, handleLoading] = useState(true)
+
+ const [errorInFollowing, setErrorInFollowing] = useState(false)
+ const [errorInFollowers, setErrorInFollowers] = useState(false)
- async function handleSuccess (responseArr, headersArr) {
- setErrorInFollowing(responseArr[0].errors ? true : false) // prevent of crashing the portal, do not remove it
- setErrorInFollowers(responseArr[1].errors ? true : false) // prevent of crashing the portal, do not remove it
- setFollowers(responseArr[0])
- setFollowing(responseArr[1])
+ const [followingList, setFollowing] = useState([])
+ const [currFollowingLimit, setCurrFollowingLimit] = useState(12)
+ const [loadingMoreFollowing, setLoadingFollowing] = useState(false)
+ const [endOfFollowing, setEndOfFollowing] = useState(false)
- if (headersArr[1].has('X-Total-Count')) {
- setEndOfFollowing(headersArr[1].get('X-Total-Count'));
+ const [followersList, setFollowers] = useState([])
+ const [currFollowerLimit, setFollowersLimit] = useState(12)
+ const [loadingMoreFollowers, setLoadingMoreFollowers] = useState(false)
+ const [endOfFollowers, setEndOfFollowers] = useState(false)
+
+ const showMoreFollowing = (limite) => {
+ setLoadingFollowing(true);
+ const limit = limite;
+ setCurrFollowingLimit(currFollowingLimit + limit)
+ const url = `/users/${id}/following/User?offset=${currFollowingLimit}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.errors) {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true);
+ setErrorInFollowing(true);
}
- if (headersArr[0].has('X-Total-Count')) {
- setEndOfFollowers(headersArr[0].get('X-Total-Count'));
+ else if (data.length >= 1) {
+ let currData = [...followingList];
+ currData = [...currData.concat(data)];
+ setLoadingFollowing(false);
+ setFollowing(currData);
}
- handleLoading(false)
- }
+ else {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true);
+ }
+ },
+ (error) => {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true);
+ setErrorInFollowing(true);
+ }
+ )
+ }
- function handleErrors() {
+ const showMoreFollowers = (limite) => {
+ setLoadingMoreFollowers(true);
+ const limit = limite;
+ setFollowersLimit(currFollowerLimit + limit)
+ const url = `/users/${id}/followers?offset=${currFollowerLimit}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.errors) {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true);
+ setErrorInFollowers(true);
+ }
+ else {
+ if (data.length >= 1) {
+ let currData = [...followersList];
+ currData = [...currData.concat(data)];
+ setLoadingMoreFollowers(false);
+ setFollowers(currData);
+ }
+ else {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true)
+ }
+ }
+ },
+ (error) => {
setLoadingMoreFollowers(false);
setEndOfFollowers(true);
setErrorInFollowers(true);
+ }
+ )
+ }
+
+ async function handleSuccess(responseArr, headersArr) {
+ setErrorInFollowing(responseArr[0].errors ? true : false) // prevent of crashing the portal, do not remove it
+ setErrorInFollowers(responseArr[1].errors ? true : false) // prevent of crashing the portal, do not remove it
+ setFollowers(responseArr[0])
+ setFollowing(responseArr[1])
+
+ if (headersArr[1].has('X-Total-Count')) {
+ setEndOfFollowing(headersArr[1].get('X-Total-Count'));
+ }
+ if (headersArr[0].has('X-Total-Count')) {
+ setEndOfFollowers(headersArr[0].get('X-Total-Count'));
}
+ handleLoading(false)
+ }
- useEffect( () => {
- handleLoading(true)
-
- const urls = [`/users/${id}/followers`, `/users/${id}/following/User`]
-
- fetchAllRequest(urls, handleSuccess, handleErrors)
- }, [])
-
- return (
- <>
- {
- loading ?
- (
- [
- <LoadingSpinner text={`Carregando dados de ${username}`} />
- ]
- )
- :
- (
- [
- <React.Fragment>
- <PanelTemplateRede
- title={`Seguidores de ${username}`}
- length={followersList.length}
- sliceArr={followersList}
- showMore={showMoreFollowers}
- follower={true}
- end={endOfFollowers}
- loadingMore={loadingMoreFollowers}
- error={errorInFollowers}
- noContentText={username + ' não possui nenhum seguidor'}
- />
-
- <PanelTemplateRede
- title={`${username} está seguindo`}
- length={followingList.length}
- sliceArr={followingList}
- showMore={showMoreFollowing}
- follower={false}
- end={endOfFollowing}
- loadingMore={loadingMoreFollowing}
- error={errorInFollowing}
- noContentText={username + ' não segue nenhum usuário'}
- />
- </React.Fragment>
- ]
- )
- }
- </>
- )
+ function handleErrors() {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true);
+ setErrorInFollowers(true);
+ }
+
+ useEffect(() => {
+ handleLoading(true)
+
+ const urls = [`/users/${id}/followers`, `/users/${id}/following/User`]
+
+ fetchAllRequest(urls, handleSuccess, handleErrors)
+ }, [])
+
+ return (
+ <>
+ {
+ loading ?
+ (
+ [
+ <LoadingSpinner contrast={contrast} text={`Carregando dados de ${username}`} />
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <PanelTemplateRede
+ contrast={contrast}
+ title={`Seguidores de ${username}`}
+ length={followersList.length}
+ sliceArr={followersList}
+ showMore={showMoreFollowers}
+ follower={true}
+ end={endOfFollowers}
+ loadingMore={loadingMoreFollowers}
+ error={errorInFollowers}
+ noContentText={username + ' não possui nenhum seguidor'}
+ />
+
+ <PanelTemplateRede
+ contrast={contrast}
+ title={`${username} está seguindo`}
+ length={followingList.length}
+ sliceArr={followingList}
+ showMore={showMoreFollowing}
+ follower={false}
+ end={endOfFollowing}
+ loadingMore={loadingMoreFollowing}
+ error={errorInFollowing}
+ noContentText={username + ' não segue nenhum usuário'}
+ />
+ </React.Fragment>
+ ]
+ )
+ }
+ </>
+ )
}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js b/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js
index 4fcc273f0a0b3e8ed984f1d831488d8002a978dd..df5fcde96513967e1983154bf666301698ee49ed 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js
@@ -19,15 +19,15 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react'
import styled from 'styled-components'
-export default function UserDescription (props) {
+export default function UserDescription(props) {
return (
- <NoPadBox>
- <ContainerDiv>
- <DivSobre>
- <h3>Sobre</h3>
- <p>{props.text}</p>
- </DivSobre>
- </ContainerDiv>
+ <NoPadBox contrast={props.contrast}>
+ <ContainerDiv>
+ <DivSobre contrast={props.contrast}>
+ <h3>Sobre</h3>
+ <p>{props.text}</p>
+ </DivSobre>
+ </ContainerDiv>
</NoPadBox>
)
}
@@ -49,11 +49,13 @@ const DivSobre = styled.div`
font-family : inherit;
font-weight: 500;
line-height: 1.1;
- color: inherit;
+ color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+
}
p {
margin : 0 0 10px;
+ color: ${(props) => (props.contrast === "" ? "#666" : "white")};
}
`
@@ -76,9 +78,10 @@ const NoPadBox = styled.div`
margin-right : auto;
margin-left : auto;
padding : 0;
- background-color : #fff;
+ background-color: ${(props) => (props.contrast === "" ? "#f4f4f4" : "black")};
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom : 30px;
+ border: ${(props) => (props.contrast === "" ? "0" : "1px solid white")};
@media screen and (min-width: 768px) {
width : max-content;
diff --git a/src/Pages/AboutPage.js b/src/Pages/AboutPage.js
index 9dcf3a08f2e23f98213550e16df276107b880279..21e46161d8263d5028021e4ffbe99b88ac63c719 100644
--- a/src/Pages/AboutPage.js
+++ b/src/Pages/AboutPage.js
@@ -224,7 +224,7 @@ const Secao4 = styled.div`
text-align: center;
border: 0;
padding: 0 6px;
- hite-space: nowrap;
+ white-space: nowrap;
text-decoration: none;
diff --git a/src/Pages/Contact.js b/src/Pages/Contact.js
index 181e16d47158efdbdd9492fc29fe49b7d2df80de..32a1d84ae30248a02ecb7b0b591775b9107c7d3b 100644
--- a/src/Pages/Contact.js
+++ b/src/Pages/Contact.js
@@ -16,14 +16,16 @@ 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, { useEffect } from "react";
+import React, { useEffect, useContext } from "react";
import styled from "styled-components";
import Banner1 from "../img/banner-sobre.jpg";
import InputFormulario from "../Components/ContactForm.js";
+import { Store } from '../Store';
const Secao1 = styled.div`
width: 100%;
- background-image: url(${Banner1});
+ background-color: ${props => props.contrast === "" ? "" : "black"};
+ background-image: ${props => props.contrast === "" ? `url(${Banner1})` : ""};
background-size: cover;
background-position: bottom center;
height: 250px;
@@ -53,7 +55,7 @@ const Secao1 = styled.div`
const Secao2 = styled.div`
height: 708px;
- background-color: #f4f4f4;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
display: flex;
justify-content: center;
align-items: center;
@@ -61,8 +63,8 @@ const Secao2 = styled.div`
const Secao3 = styled.div`
height: 127px;
- background-color: #f4f4f4;
- color: #666;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
line-height: 1.42857143;
font-size: 18px;
text-align: center;
@@ -74,12 +76,12 @@ const Secao3 = styled.div`
`;
const Formulario = styled.div`
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(255,255,255,.12),0 1px 2px rgba(255,255,255,.24)"};
padding: 40px;
height: 560px;
width: 480px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
form .inputBlock {
margin-block: 22px;
@@ -137,7 +139,7 @@ const Formulario = styled.div`
`;
function Contact(props) {
-
+ const { state } = useContext(Store)
useEffect(() => {
window.scrollTo(0, 0)
})
@@ -148,23 +150,23 @@ function Contact(props) {
href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap"
rel="stylesheet"
/>
- <Secao1>
+ <Secao1 contrast={state.contrast}>
<h2>CONTATO</h2>
<h3>Quer enviar uma mensagem?</h3>
</Secao1>
- <Secao2>
- <Formulario noValidate autoComplete="off">
+ <Secao2 contrast={state.contrast}>
+ <Formulario noValidate autoComplete="off" contrast={state.contrast}>
<h2>
Entre em contato para enviar dúvidas,
<br />
sugestões ou críticas
</h2>
- <InputFormulario />
+ <InputFormulario contrast={state.contrast} />
</Formulario>
</Secao2>
- <Secao3>
+ <Secao3 contrast={state.contrast}>
<span>MEC - Ministério da Educação </span>
<p>
Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP:
diff --git a/src/Pages/PublicUserPage.js b/src/Pages/PublicUserPage.js
index e853439ae47ad7504232d15d320353098d2db249..cc3dedd506529cb9f1fb53a25eef707f8d2e2498 100644
--- a/src/Pages/PublicUserPage.js
+++ b/src/Pages/PublicUserPage.js
@@ -16,75 +16,101 @@ 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, { useEffect, useState, useContext } from 'react'
-import { Store } from '../Store'
-import styled from 'styled-components'
-import { apiDomain } from '../env';
-import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
-import Grid from '@material-ui/core/Grid';
-import FollowButton from '../Components/ContactButtons/FollowButton.js'
-import FollowingButton from '../Components/ContactButtons/FollowingButton.js'
-import FollowersCountButton from '../Components/ContactButtons/FollowersCountButton.js'
+import React, { useEffect, useState, useContext } from "react";
+import { Store } from "../Store";
+import styled from "styled-components";
+import { apiDomain } from "../env";
+import CustomizedBreadcrumbs from "../Components/TabPanels/Breadcrumbs.js";
+import Grid from "@material-ui/core/Grid";
+import FollowButton from "../Components/ContactButtons/FollowButton.js";
+import FollowingButton from "../Components/ContactButtons/FollowingButton.js";
+import FollowersCountButton from "../Components/ContactButtons/FollowersCountButton.js";
import noAvatar from "../img/default_profile.png";
-import Tab from '@material-ui/core/Tab';
-import TabInicio from '../Components/TabPanels/PublicUserPageTabs/TabInicio.js'
-import TabRecursos from '../Components/TabPanels/PublicUserPageTabs/TabRecursos.js'
-import TabColecoes from '../Components/TabPanels/PublicUserPageTabs/TabColecoes.js'
-import TabRede from '../Components/TabPanels/PublicUserPageTabs/TabRede.js'
-import CheckDecagram from '../img/check-decagram-blue.svg'
-import ReportButton from '../Components/ReportButton.js'
-import { HeaderContainer, UserProfileContainer, CoverContainer, UserProfileInfoDiv, StyledTabs, CheckTeacherDiv, RodapeDiv, NavBarContentContainer, BackgroundDiv } from '../Components/TabPanels/StyledComponents.js'
-import { fetchAllRequest } from '../Components/HelperFunctions/getAxiosConfig'
-import Typography from '@material-ui/core/Typography';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import LoadingSpinner from '../Components/LoadingSpinner';
-import Button from '@material-ui/core/Button'
-import { Link } from 'react-router-dom'
+import Tab from "@material-ui/core/Tab";
+import TabInicio from "../Components/TabPanels/PublicUserPageTabs/TabInicio.js";
+import TabRecursos from "../Components/TabPanels/PublicUserPageTabs/TabRecursos.js";
+import TabColecoes from "../Components/TabPanels/PublicUserPageTabs/TabColecoes.js";
+import TabRede from "../Components/TabPanels/PublicUserPageTabs/TabRede.js";
+import CheckDecagram from "../img/check-decagram-blue.svg";
+import ReportButton from "../Components/ReportButton.js";
+import {
+ HeaderContainer,
+ UserProfileContainer,
+ CoverContainer,
+ UserProfileInfoDiv,
+ StyledTabs,
+ CheckTeacherDiv,
+ RodapeDiv,
+ NavBarContentContainer,
+ BackgroundDiv,
+} from "../Components/TabPanels/StyledComponents.js";
+import { fetchAllRequest } from "../Components/HelperFunctions/getAxiosConfig";
+import Typography from "@material-ui/core/Typography";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import LoadingSpinner from "../Components/LoadingSpinner";
+import Button from "@material-ui/core/Button";
+import { Link } from "react-router-dom";
function RenderFollowContainer(props) {
- const { state } = useContext(Store)
- const [followed, setFollowed] = useState(props.followed)
- const toggleFollowed = () => { setFollowed(!followed) }
+ const { state } = useContext(Store);
+ const [followed, setFollowed] = useState(props.followed);
+ const toggleFollowed = () => {
+ setFollowed(!followed);
+ };
return (
<FollowContainer>
<>
- {
- (props.id !== state.currentUser.id) &&
- followed ?
- (
- <FollowingButton followedID={props.id} toggleFollowed={toggleFollowed} />
- )
- :
- (
- <FollowButton followerID={props.id} toggleFollowed={toggleFollowed} />
- )
- }
- <FollowersCountButton followCount={props.followCount} />
+ {props.id !== state.currentUser.id && followed ? (
+ <FollowingButton
+ contrast={state.contrast}
+ followedID={props.id}
+ toggleFollowed={toggleFollowed}
+ />
+ ) : (
+ <FollowButton contrast={state.contrast} followerID={props.id} toggleFollowed={toggleFollowed} />
+ )}
+ <FollowersCountButton contrast={state.contrast} followCount={props.followCount} />
</>
</FollowContainer>
- )
+ );
}
const RenderProfileAvatar = (userAvatar) => {
return (
<ProfileAvatarDiv>
- <img src={userAvatar ? apiDomain + userAvatar : noAvatar} alt="user avatar" style={{ height: "inherit", width: "inherit", border: "0", verticalAlign: "middle" }} />
+ <img
+ src={userAvatar ? apiDomain + userAvatar : noAvatar}
+ alt="user avatar"
+ style={{
+ height: "inherit",
+ width: "inherit",
+ border: "0",
+ verticalAlign: "middle",
+ }}
+ />
</ProfileAvatarDiv>
- )
-}
+ );
+};
-const RenderUserProfileInfo = (userName) => {
+const RenderUserProfileInfo = (userName, contrast) => {
return (
- <UserProfileInfoDiv>
+ <UserProfileInfoDiv contrast={contrast}>
<p
- style={{ fontSize: "28px", color: "#fff", marginBottom: "2px", fontWeight: "500", borderRadius: "5px", textShadow: "0 1px 2px rgba(0,0,0,.45)" }}
+ style={{
+ fontSize: "28px",
+ color: "#fff",
+ marginBottom: "2px",
+ fontWeight: "500",
+ borderRadius: "5px",
+ textShadow: "0 1px 2px rgba(0,0,0,.45)",
+ }}
>
{userName}
</p>
</UserProfileInfoDiv>
- )
-}
+ );
+};
const RenderCheckTeacher = (submitter_request) => {
if (submitter_request === "accepted") {
@@ -94,247 +120,336 @@ const RenderCheckTeacher = (submitter_request) => {
<span>
<img alt="" src={CheckDecagram} />
</span>
- Professor(a)
- </p>
+ Professor(a)
+ </p>
</CheckTeacherDiv>
- )
+ );
}
-}
+};
export default function PublicUserPage(props) {
/*currentUser info variables--------------------------------------*/
- const { state } = useContext(Store)
+ const { state } = useContext(Store);
/*user info variables--------------------------------------*/
const WIDTH = window.innerWidth;
- const [id, setId] = useState(props.match.params.userId)
+ const [id, setId] = useState(props.match.params.userId);
const [loading, setLoading] = useState(false);
- const [userData, setUserData] = useState({})
+ const [userData, setUserData] = useState({});
const fillUserInfo = (data) => {
- setUserData(data)
- }
+ setUserData(data);
+ };
/*---------------------------------------------------------*/
const [following, setFollowing] = useState(0);
const fillFollowing = (data) => {
if (data)
if (data.errors)
- setFollowing('Você precisa logar para ver o que usuário está ');
- else
- setFollowing(data.length);
- }
+ setFollowing("Você precisa logar para ver o que usuário está ");
+ else setFollowing(data.length);
+ };
/*content control variables--------------------------------*/
// eslint-disable-next-line
- const [tabs, setTabs] = useState([
- 'Início', 'Recursos', 'Coleções', 'Rede'
- ])
+ const [tabs, setTabs] = useState(["Início", "Recursos", "Coleções", "Rede"]);
const [tabValue, setTabValue] = useState(0);
const handleChangeTab = (event, newValue) => {
- setTabValue(newValue)
- }
+ setTabValue(newValue);
+ };
/*---------------------------------------------------------*/
/*content variables--------------------------------*/
- const [learningObjArr, setLearningObjects] = useState([])
- const handleLearningObjects = (data) => { setLearningObjects(data) }
- const [collectionsArr, setCollections] = useState([])
- const handleCollections = (data) => { setCollections(data) }
+ const [learningObjArr, setLearningObjects] = useState([]);
+ const handleLearningObjects = (data) => {
+ setLearningObjects(data);
+ };
+ const [collectionsArr, setCollections] = useState([]);
+ const handleCollections = (data) => {
+ setCollections(data);
+ };
/*---------------------------------------------------------*/
function handleSuccess(responseArr) {
- fillUserInfo(responseArr[0])
+ fillUserInfo(responseArr[0]);
- handleLearningObjects(responseArr[1])
+ handleLearningObjects(responseArr[1]);
- handleCollections(responseArr[2])
+ handleCollections(responseArr[2]);
- fillFollowing(responseArr[3])
+ fillFollowing(responseArr[3]);
setLoading(false);
}
/*Component Will Mount*/
useEffect(() => {
- const id = props.match.params.userId
- setId(id)
- const urls = [`/users/${id}`, `/users/${id}/learning_objects`, `/users/${id}/collections`, `/users/${id}/following/User`]
+ const id = props.match.params.userId;
+ setId(id);
+ const urls = [
+ `/users/${id}`,
+ `/users/${id}/learning_objects`,
+ `/users/${id}/collections`,
+ `/users/${id}/following/User`,
+ ];
setLoading(true);
- fetchAllRequest(urls, handleSuccess, (error) => { console.log(error) })
- }, [state.currentUser.id, props.match.params.userId])
+ fetchAllRequest(urls, handleSuccess, (error) => {
+ console.log(error);
+ });
+ }, [state.currentUser.id, props.match.params.userId]);
/*---------------------------------------------------------*/
if (loading)
- return <LoadingSpinner text="Carregando dados do usuário..." />
+ return (
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <LoadingSpinner
+ contrast={state.contrast}
+ text="Carregando dados do usuário..."
+ />
+ </div>
+ );
else if (!userData && !following && !learningObjArr && !collectionsArr)
- return <UserNotFoundDiv>
- <Grid container direction='column' justify='center' alignItems='center' spacing={1}>
- <Grid item>
- <p className="not-found">
- O usuário não foi encontrado em nossa base de dados.
- </p>
- </Grid>
- <Grid item>
- <Link className="link" to={`/busca?page=0&results_per_page=12&query=*&search_class=User`}>
- <Button
- variant='contained'
- className="back-button"
+ return (
+ <UserNotFoundDiv contrast={state.contrast}>
+ <Grid
+ container
+ direction="column"
+ justify="center"
+ alignItems="center"
+ spacing={1}
+ >
+ <Grid item>
+ <p className="not-found">
+ O usuário não foi encontrado em nossa base de dados.
+ </p>
+ </Grid>
+ <Grid item>
+ <Link
+ className="link"
+ to={`/busca?page=0&results_per_page=12&query=*&search_class=User`}
>
- Voltar para a busca de usuários.
- </Button>
- </Link>
+ <Button variant="contained" className="back-button">
+ Voltar para a busca de usuários.
+ </Button>
+ </Link>
+ </Grid>
</Grid>
- </Grid>
- </UserNotFoundDiv>
+ </UserNotFoundDiv>
+ );
else
- return <React.Fragment>
- <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet" />
- <BackgroundDiv>
- <CustomizedBreadcrumbs
- values={["Usuário Público", tabs[tabValue]]}
+ return (
+ <React.Fragment>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
+ rel="stylesheet"
/>
- <Grid container spacing={2}>
- <Grid item xs={12}>
- <div style={{ padding: "10px 0 8px 0" }}>
- <UserProfileContainer>
- <HeaderContainer>
- <>
- {!loading && <RenderFollowContainer followed={userData.followed} id={id} followCount={userData.follows_count} />}
- {RenderProfileAvatar(userData.avatar ? userData.avatar : undefined)}
- <CoverContainer>
- {userData.cover && <img src={apiDomain + userData.cover} alt='' style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
- </CoverContainer>
- {
- WIDTH <= 501 ? null : RenderUserProfileInfo(userData.name)
- }
- </>
- </HeaderContainer>
- {
- WIDTH <= 501 ?
- <Grid style={{ marginTop: '4em' }} container justify="center" alignItems="center" direction="column">
+ <BackgroundDiv contrast={state.contrast}>
+ <CustomizedBreadcrumbs contrast={state.contrast} values={["Usuário Público", tabs[tabValue]]} />
+ <Grid container spacing={2}>
+ <Grid item xs={12}>
+ <div style={{ padding: "10px 0 8px 0" }}>
+ <UserProfileContainer>
+ <HeaderContainer contrast={state.contrast}>
+ <>
+ {!loading && (
+ <RenderFollowContainer
+ followed={userData.followed}
+ id={id}
+ followCount={userData.follows_count}
+ />
+ )}
+ {RenderProfileAvatar(
+ userData.avatar ? userData.avatar : undefined
+ )}
+ <CoverContainer contrast={state.contrast}>
+ {userData.cover && (
+ <img
+ src={apiDomain + userData.cover}
+ alt=""
+ style={{
+ width: "100%",
+ height: "100%",
+ objectFit: "cover",
+ }}
+ />
+ )}
+ </CoverContainer>
+ {WIDTH <= 501
+ ? null
+ : RenderUserProfileInfo(userData.name, state.contrast)}
+ </>
+ </HeaderContainer>
+ {WIDTH <= 501 ? (
+ <Grid
+ style={state.contrast === "" ? { marginTop: "4em" } : { paddingTop: "4em", backgroundColor: "black", borderLeft: "1px solid white", borderRight: "1px solid white", }}
+ container
+ justify="center"
+ alignItems="center"
+ direction="column"
+ >
<Grid item>
- <Typography variant="h4" gutterBottom style={{ textAlign: "center" }}>
- {
- userData.name
- }
+ <Typography
+ variant="h4"
+ gutterBottom
+ style={state.contrast === "" ? { textAlign: "center" } : { color: "white", textAlign: "center" }}
+ >
+ {userData.name}
</Typography>
</Grid>
- <Grid style={{ marginTop: '0.5em', marginBottom: '0.5em', borderTop: "0.5px solid #DCDCDC", borderBottom: "0.5px solid #DCDCDC" }} container spacing={4} justify="center" alignItems="center" direction="row">
+ <Grid
+ style={{
+ marginTop: "0.5em",
+ marginBottom: "0.5em",
+ borderTop: "1px solid white",
+ borderBottom: "1px solid white",
+ }}
+ container
+ spacing={4}
+ justify="center"
+ alignItems="center"
+ direction="row"
+ >
<Grid item>
- <Typography variant="h6" style={{ textAlign: 'center' }}>
- {
- loading ?
- <CircularProgress size={20} /> :
+ <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ {loading ? (
+ <CircularProgress size={20} />
+ ) : (
`${userData.follows_count} seguidores`
- }
+ )}
</Typography>
</Grid>
<Grid item>
- <Typography variant="h6" style={{ textAlign: 'center' }} >
- {
- loading ?
- <CircularProgress size={20} /> :
+ <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ {loading ? (
+ <CircularProgress size={20} />
+ ) : (
`${following} seguindo`
- }
+ )}
</Typography>
</Grid>
</Grid>
</Grid>
- :
- RenderCheckTeacher(userData.submitter_request)}
- <RodapeDiv>
- <NavBarContentContainer>
- <StyledTabs
- value={tabValue}
- onChange={handleChangeTab}
- indicatorColor="primary"
- textColor="primary"
- variant="scrollable"
- scrollButtons="desktop"
- TabIndicatorProps={{ style: { background: "#00bcd4" } }}
- >
- {
- tabs.map((tab) =>
- <Tab label={tab} key={tab}
- disabled={(tab === "Recursos" && learningObjArr.length === 0) || (tab === "Coleções" && collectionsArr.length === 0) || (tab === "Rede" && state.currentUser.id === '')}
+ ) : (
+ RenderCheckTeacher(userData.submitter_request)
+ )}
+ <RodapeDiv contrast={state.contrast}>
+ <NavBarContentContainer contrast={state.contrast}>
+ <StyledTabs
+ contrast={state.contrast}
+ value={tabValue}
+ onChange={handleChangeTab}
+ indicatorColor="primary"
+ textColor="primary"
+ variant="scrollable"
+ scrollButtons="on"
+ TabIndicatorProps={{ style: state.contrast === "" ? { background: "#00bcd4" } : { background: "yellow" } }}
+ >
+ {tabs.map((tab) => (
+ <Tab
+ label={tab}
+ key={tab}
+ disabled={
+ (tab === "Recursos" &&
+ learningObjArr.length === 0) ||
+ (tab === "Coleções" &&
+ collectionsArr.length === 0) ||
+ (tab === "Rede" && state.currentUser.id === "")
+ }
/>
- )
- }
- </StyledTabs>
- </NavBarContentContainer>
- <ReportButton className="report-button" complainableId={userData.id} complainableType={"User"} />
- </RodapeDiv>
- </UserProfileContainer>
- </div>
- </Grid>
-
- {
- !loading &&
- <Grid item xs={12}>
- {tabValue === 0 &&
- <TabInicio id={id} user={userData} learningObjs={learningObjArr} collections={collectionsArr} />}
- {tabValue === 1 &&
- <TabRecursos id={id} username={userData.name} />}
- {tabValue === 2 &&
- <TabColecoes id={id} username={userData.name} />}
- {tabValue === 3 &&
- <TabRede id={id} username={userData.name} />}
+ ))}
+ </StyledTabs>
+ </NavBarContentContainer>
+ <ReportButton
+ className="report-button"
+ complainableId={userData.id}
+ complainableType={"User"}
+ />
+ </RodapeDiv>
+ </UserProfileContainer>
+ </div>
</Grid>
- }
- </Grid>
- </BackgroundDiv>
- </React.Fragment>
-}
+ {!loading && (
+ <Grid item xs={12}>
+ {tabValue === 0 && (
+ <TabInicio
+ contrast={state.contrast}
+ id={id}
+ user={userData}
+ learningObjs={learningObjArr}
+ collections={collectionsArr}
+ />
+ )}
+ {tabValue === 1 && (
+ <TabRecursos contrast={state.contrast} id={id} username={userData.name} />
+ )}
+ {tabValue === 2 && (
+ <TabColecoes contrast={state.contrast} id={id} username={userData.name} />
+ )}
+ {tabValue === 3 && <TabRede contrast={state.contrast} id={id} username={userData.name} />}
+ </Grid>
+ )}
+ </Grid>
+ </BackgroundDiv>
+ </React.Fragment>
+ );
+}
const ProfileAvatarDiv = styled.div`
- overflow : hidden;
- border-radius : 100%;
- bottom : -10px;
- left : 20px;
- z-index : 10;
- box-sizing : content-box;
- position : absolute;
- width : 150px;
- height : 150px;
- border : 4px solid #fff;
- outline : 0;
- background-color : #fff;
- @media screen and (max-width: 501px) {
- height : 73px;
- width : 73px;
- position:absolute;
- left:0;
- right:0;
- bottom : -40px;
- margin-left:auto;
- margin-right:auto;
- }
-`
+ overflow: hidden;
+ border-radius: 100%;
+ bottom: -10px;
+ left: 20px;
+ z-index: 10;
+ box-sizing: content-box;
+ position: absolute;
+ width: 150px;
+ height: 150px;
+ border: 4px solid #fff;
+ outline: 0;
+ background-color: #fff;
+ @media screen and (max-width: 501px) {
+ height: 73px;
+ width: 73px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: -40px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+`;
const UserNotFoundDiv = styled.div`
- margin: 1em;
-
- .not-found{
- font-family: 'Roboto', sans-serif;
- font-weight: 500;
- text-align: left;
- padding: 0;
- margin: 0;
- }
+ padding: 1em;
+ background-color: ${(props) => (props.contrast === "" ? "#f4f4f4" : "black")};
- .back-button{
- background-color: #00bcd4;
- color: whitesmoke;
+ .not-found {
+ font-family: "Roboto", sans-serif;
+ color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+ font-weight: 500;
+ text-align: left;
+ padding: 0;
+ margin: 0;
}
- .link{
- text-decoration: none;
+ .back-button {
+ background-color: ${(props) =>
+ props.contrast === "" ? "#00bcd4" : "black"};
+ color: ${(props) => (props.contrast === "" ? "whitesmoke" : "yellow")};
+ border: ${(props) => (props.contrast === "" ? "none" : "1px solid white")};
+ text-decoration: ${(props) =>
+ props.contrast === "" ? "none" : "underline"};
+ :hover {
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ text-decoration: ${(props) =>
+ props.contrast === "" ? "none" : "underline"};
+ }
}
-`
+`;
const FollowContainer = styled.div`
- padding : 4px 10px;
- right : 0;
- position : absolute;
- z-index : 1;
-`
\ No newline at end of file
+ padding: 4px 10px;
+ right: 0;
+ position: absolute;
+ z-index: 1;
+`;
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 317663da5c5d3b4f4f2ac2bd9c321e7cdcc494c7..9a8ba4093cca97439be9fd96a16bbae29271e431 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -142,7 +142,7 @@ export default function LearningObjectPage(props) {
};
if (erro)
- return <LearnObjectNotFound>
+ return <LearnObjectNotFound contrast={state.contrast}>
<Grid container direction='column' justify='center' alignItems='center' spacing={1}>
<Grid item>
<p className="not-found">
@@ -150,7 +150,7 @@ export default function LearningObjectPage(props) {
</p>
</Grid>
<Grid item>
- <Link className="link" to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}>
<Button
variant='contained'
className="back-button"
@@ -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,17 +377,19 @@ 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;
`;
const LearnObjectNotFound = styled.div`
- margin: 1em;
+ padding: 1em;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
.not-found{
font-family: 'Roboto', sans-serif;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-weight: 500;
text-align: left;
padding: 0;
@@ -391,18 +397,21 @@ const LearnObjectNotFound = styled.div`
}
.back-button{
- background-color: #ff7f00;
- color: whitesmoke;
- }
-
- .link{
- text-decoration: none;
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"};
+ color: ${props => props.contrast === "" ? "whitesmoke" : "yellow"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
}
`
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;
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index a814a34192eca9d40336c7ef08864059717cac97..f9d4168a440d027c8f78c14ae3b6683a0de80eea 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -81,18 +81,18 @@ export default function Search() {
const [totalUsers, setTotalUsers] = useState(0);
const options = [
- { value: 'Recursos', name: 'LearningObject', color: '#ff7f00' },
- { value: 'Coleções', name: 'Collection', color: '#673ab7' },
- { value: 'Usuários', name: 'User', color: '#00bcd4' },
+ { value: 'Recursos', name: 'LearningObject', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Coleções', name: 'Collection', color: state.contrast === "" ? '#673ab7' : "yellow" },
+ { value: 'Usuários', name: 'User', color: state.contrast === "" ? '#00bcd4' : "yellow" },
];
const orders = [
- { value: 'Mais Estrelas', name: 'review_average' },
- { value: 'Mais Relevante', name: 'score' },
- { value: 'Mais Baixados', name: 'downloads' },
- { value: 'Mais Favoritados', name: 'likes' },
- { value: 'Mais Recentes', name: 'publicationdesc' },
- { value: 'Ordem Alfabética', name: 'title' },
+ { value: 'Mais Estrelas', name: 'review_average', color: state.contrast === "" ? '#666' : "yellow" },
+ { value: 'Mais Relevante', name: 'score', color: state.contrast === "" ? '#666' : "yellow" },
+ { value: 'Mais Baixados', name: 'downloads', color: state.contrast === "" ? '#666' : "yellow" },
+ { value: 'Mais Favoritados', name: 'likes', color: state.contrast === "" ? '#666' : "yellow" },
+ { value: 'Mais Recentes', name: 'publicationdesc', color: state.contrast === "" ? '#666' : "yellow" },
+ { value: 'Ordem Alfabética', name: 'title', color: state.contrast === "" ? '#666' : "yellow" },
];
function handleSnackInfo(info) {
@@ -428,24 +428,26 @@ export default function Search() {
if (error)
return (
- <MainPageError>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
- <Error />
- </MainPageError>
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <MainPageError>
+ <Snackbar
+ open={snackInfo.open}
+ autoHideDuration={6000}
+ onClose={handleCloseSnack}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
+ {snackInfo.text}
+ </Alert>
+ </Snackbar>
+ <Error contrast={state.contrast} />
+ </MainPageError>
+ </div>
)
else
return (
<div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
- <MainPage contrast={state.contrast}>
+ <MainPage>
<Snackbar
open={snackInfo.open}
autoHideDuration={6000}
@@ -473,6 +475,7 @@ export default function Search() {
currOption === 'LearningObject' &&
<Fragment>
<SearchExpansionPanel
+ contrast={state.contrast}
setTag={(tag) => setTag(tag)}
curriculumComponents={curriculumComponents}
setCurriculum={(array) => { setCurriculumComponents(array) }}
@@ -485,6 +488,7 @@ export default function Search() {
/>
{
<FilterSummary
+ contrast={state.contrast}
curriculumComponents={curriculumComponents}
typeOfResources={typeOfResources}
languages={languages}
@@ -494,6 +498,7 @@ export default function Search() {
/>
}
<ResourceTemplate
+ contrast={state.contrast}
handleNextPage={handleNextPage}
handlePreviousPage={handlePreviousPage}
isLoading={isLoading}
@@ -506,6 +511,7 @@ export default function Search() {
{
currOption === 'Collection' &&
<CollectionTemplate
+ contrast={state.contrast}
handleNextPage={handleNextPage}
handlePreviousPage={handlePreviousPage}
isLoading={isLoading}
@@ -517,6 +523,7 @@ export default function Search() {
{
currOption === 'User' &&
<UserTemplate
+ contrast={state.contrast}
handleNextPage={handleNextPage}
handlePreviousPage={handlePreviousPage}
isLoading={isLoading}
@@ -535,9 +542,9 @@ const MainPage = styled.div`
width: 90%;
margin: 0 auto;
`
-const MainPageError = styled.div`
- width: 90%;
- margin: 1em auto;
+const MainPageError = styled.div`
+ width: 90%;
+ margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js
index 39e92d5f74b541e04d7d890001ec8f1c530422e5..e34318389e644af900c76581db2107b9525bb109 100644
--- a/src/Pages/UserTerms.js
+++ b/src/Pages/UserTerms.js
@@ -15,11 +15,12 @@ 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, { useEffect } from 'react';
+import React, { useEffect, useContext } from 'react';
import SimpleExpansionPanels from '../Components/ExpansionPanels'
import Grid from '@material-ui/core/Grid';
import Modal from '../Components/Modal'
import styled from 'styled-components'
+import { Store } from '../Store'
/*Importação de imagens para a página*/
import Busca from "../img/termos/Busca.png"
@@ -33,8 +34,9 @@ import Linha from "../img/termos/linha.svg";
const BannerStyle = styled.div`
+ background: ${props => props.contrast === "" ? "" : "black"};
width: 100%;
- background-image: url(${Banner1});
+ background-image: ${props => props.contrast === "" ? `url(${Banner1})` : ""};
background-size: cover;
background-position: top center;
height: 370px;
@@ -42,15 +44,15 @@ const BannerStyle = styled.div`
`
const AColorido = styled.a`
-
- color: #00BCD4;
- text-decoration:none;
-
+ color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
`
const ImagemSeçao2 = styled.div`
font-family: "Roboto", sans-serif;
+ background: ${props => props.contrast === "" ? "" : "black"};
+ color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
@media (min-width:1450px) {
background-image: url(${Busca});
@@ -58,7 +60,6 @@ const ImagemSeçao2 = styled.div`
background-size: contain;
background-repeat: no-repeat;
}
- color: rgba(0,0,0,0.87);
height: auto;
align-items: center;
padding-block: 30px;
@@ -90,7 +91,7 @@ const ImagemSeçao2 = styled.div`
`
const Secao3 = styled.div`
- background-color: #FF7F00;
+ background: ${props => props.contrast === "" ? "#FF7F00" : "black"};
@media (min-width: 1000px) {
background-image: url(${CadeadoAberto}), url(${CadeadoFechado});
background-repeat: no-repeat;
@@ -148,25 +149,29 @@ const Secao3 = styled.div`
const Secao4 = styled.div`
font-size: 15px;
-
+ background: ${props => props.contrast === "" ? "" : "black"};
+
.texto {
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
+ color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
a {
- color:#00BCD4;
+ color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
p {
font-family: 'Roboto', Bold;
+ color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
}
}
.titulo {
text-align: center;
- color: #666666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
h3 {
font-size: 30px;
height: 22px;
@@ -186,6 +191,7 @@ const Secao4 = styled.div`
export default function UserTerms() {
+ const { state } = useContext(Store)
useEffect(() => {
window.scrollTo(0, 0)
}, [])
@@ -193,21 +199,21 @@ export default function UserTerms() {
<div style={{ color: "rgba(0,0,0,0.87" }} >
- <BannerStyle>
+ <BannerStyle contrast={state.contrast}>
<h2 style={{ width: "100%", textAlign: "center", marginTop: "0px", paddingTop: "6rem", marginBottom: "16px", fontSize: "52px", fontFamily: "'Pompiere', cursive", color: "#fff", fontWeight: "500" }}>TERMOS DE USO</h2>
- <Modal />
+ <Modal contrast={state.contrast} />
</BannerStyle>
- <ImagemSeçao2>
- <Grid container >
+ <ImagemSeçao2 contrast={state.contrast}>
+ <Grid container>
<Grid item xs={12} md={1}></Grid>
<Grid item xs={12} md={10}>
<div>
<h3><strong style={{ fontWeight: "700" }}>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br />uma iniciativa do Ministério da Educação!</h3>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <AColorido href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</AColorido> (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”.
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <AColorido contrast={state.contrast} href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</AColorido> (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”.
</p>
- <p>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domínio público ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.” <AColorido href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</AColorido>.
+ <p>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domínio público ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.” <AColorido contrast={state.contrast} href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</AColorido>.
</p>
</div>
</Grid>
@@ -215,7 +221,7 @@ export default function UserTerms() {
</Grid>
</ImagemSeçao2>
- <Secao3 >
+ <Secao3 contrast={state.contrast}>
<Grid container >
<h3>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h3>
<Grid item xs={12} md={1} ></Grid>
@@ -240,13 +246,10 @@ export default function UserTerms() {
</Grid>
</Secao3>
-
-
-
- <Grid container >
+ <Grid container style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
<Grid item xs={12} md={1}></Grid>
<Grid item xs={12} md={10}>
- <Secao4>
+ <Secao4 contrast={state.contrast}>
<div class="texto" style={{ paddingTop: "70px" }}>
<p>O <a href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2014/lei/l13005.htm" rel="noreferrer" target="_blank">Plano Nacional de Educação</a> (2014-2024) enfatiza nas metas 5 e 7 a importância dos recursos educacionais abertos para fomentar a qualidade da educação básica. A <a href="http://portal.mec.gov.br/index.php?option=com_docman&view=download&alias=35541-res-cne-ces-001-14032016-pdf&category_slug=marco-2016-pdf&Itemid=30192" rel="noreferrer" target="_blank">Resolução CNE/CES nº 1</a>, de 11 de março de 2016, também destaca a importância dos recursos educacionais abertos para as instituições de educação superior e para as atividades de educação a distância.</p>
</div>
@@ -267,11 +270,11 @@ export default function UserTerms() {
</Grid>
- <Grid container >
+ <Grid container style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
<Grid item xs={12} md={1}></Grid>
<Grid item xs={12} md={10}>
<div style={{ marginBottom: "50px", paddingTop: "20px" }}>
- <SimpleExpansionPanels />
+ <SimpleExpansionPanels contrast={state.contrast} />
</div>
</Grid>
<Grid item xs={12} md={1}></Grid>