diff --git a/package-lock.json b/package-lock.json index 5fdb31796f1799db9b5ed5b01b469464a961da40..968b369cb5fe6dedc05daea768db458d2c3e4cf3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11285,9 +11285,9 @@ "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=" }, "path-parse": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", - "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==" + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, "path-to-regexp": { "version": "1.8.0", @@ -17491,9 +17491,9 @@ } }, "url-parse": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz", - "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz", + "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==", "requires": { "querystringify": "^2.1.1", "requires-port": "^1.0.0" diff --git a/src/App.css b/src/App.css index c8cb4a80e14ae5f66c4f7f4a0466a424679d2da9..4f0e301f55d22337795e1532fdeb14c891da8de7 100644 --- a/src/App.css +++ b/src/App.css @@ -16,3 +16,40 @@ 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/>.*/ +.ContrastBackColor { + background-color: black !important; +} + +.BackColor { + background-color: white !important; +} + +.ContrastText{ + color: white !important; +} + +.Text{ + color: #666 !important; +} + +.ContrastTextColor { + color: white !important; +} + +.ContrastLinkColor { + color: yellow !important; + text-decoration: underline !important; + cursor: pointer; +} + +.ContrastIconColor { + color: white !important; +} + +.ContrastBorder { + border: 1px solid white !important; +} + +.Border { + border: 1px solid #666 !important; +} diff --git a/src/App.js b/src/App.js index c06b1193cd2e0348f52a3c485fa5d15d7a643cba..2b617938aa81efd5aeb0df7b8049bc34f2255a42 100644 --- a/src/App.js +++ b/src/App.js @@ -23,6 +23,8 @@ import { Store } from './Store' import LoadingSpinner from './Components/LoadingSpinner'; import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom"; import createBrowserHistory from 'history/createBrowserHistory' +import './App.css'; +import ContrastBar from './Components/Acessibility/ContrastBar'; const AdminTemplate = React.lazy(() => import('./Admin/Components/Components/AdminTemplate')); const Header = React.lazy(() => import("./Components/Header")); @@ -176,6 +178,7 @@ export default function App() { {!awaitTest && <React.Suspense fallback={<LoadingScreen/>}> <BrowserRouter> + <ContrastBar /> <Header /> <div style={{ diff --git a/src/Components/AGPLFooter.js b/src/Components/AGPLFooter.js index f4633420764b97b958081c2af3d47551bb07825a..7058ac741049dfc38423689e9b70a269558d2fb8 100644 --- a/src/Components/AGPLFooter.js +++ b/src/Components/AGPLFooter.js @@ -29,10 +29,20 @@ const grayFooter={ paddingTop: "20px", paddingBottom: "10px" }; + +const blackFooter={ + backgroundColor: "black", + color: "white", + textAlign: "center", + display: "block", + paddingTop: "20px", + paddingBottom: "10px" +}; + class AGPLFooter extends Component{ render(){ return( - <div style={grayFooter}> + <div style={this.props.contrast === '' ? grayFooter : blackFooter}> <Container> <Row justify="around"> <Col md={1}> diff --git a/src/Components/AboutCarousel.js b/src/Components/AboutCarousel.js index 204e5de622de184e6217f53d835a6f899bfd90a0..a3c1bf7f2202909df37870322405e58c02225d2c 100644 --- a/src/Components/AboutCarousel.js +++ b/src/Components/AboutCarousel.js @@ -19,7 +19,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React from 'react'; import "react-responsive-carousel/lib/styles/carousel.min.css"; -import { Carousel } from 'react-responsive-carousel'; +import { Carousel } from "react-responsive-carousel"; import styled from 'styled-components'; import "./AboutCarousel.css" @@ -71,56 +71,56 @@ const CarouselAbout = styled(Carousel)` text-align: center; display: block; margin: auto; - // padding-inline: 235px + /* padding-inline: 235px */ } } ` -function AboutCarousel(props) { +function AboutCarousel({ contrast }) { return ( <div id={"You-Can-Caroussel"}> - <CarouselAbout showThumbs= {true} - showStatus= {false} - showIndicators = {false} - interval={8000} - transitionTime={1000} - autoPlay - infiniteLoop + <CarouselAbout showThumbs={true} + showStatus={false} + showIndicators={false} + interval={8000} + transitionTime={1000} + autoPlay + infiniteLoop > - <div> - <img src={Img1} alt="Slide 1"/> - <span>Buscar e Baixar Recursos</span> - <p>São mais de 20 mil recursos educacionais à sua disposição. São recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!</p> + <div className={`${contrast}BackColor`}> + <img src={Img1} alt="Slide 1" /> + <span className={`${contrast}TextColor`}>Buscar e Baixar Recursos</span> + <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>São mais de 20 mil recursos educacionais à sua disposição. São recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!</p> </div> - <div> - <img src={Img2} alt="Slide 2"/> - <span>Guardar Recursos em Coleções</span> - <p>Guarde e organize em coleções aqueles recursos que você considera ser interessantes para elaborar a sua aula. Aproveite e indique aos colegas pelas redes sociais ou e-mail.</p> + <div className={`${contrast}BackColor`}> + <img src={Img2} alt="Slide 2" /> + <span className={`${contrast}TextColor`}>Guardar Recursos em Coleções</span> + <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>Guarde e organize em coleções aqueles recursos que você considera ser interessantes para elaborar a sua aula. Aproveite e indique aos colegas pelas redes sociais ou e-mail.</p> </div> - <div> - <img src={Img3} alt="Slide 3"/> + <div className={`${contrast}BackColor`}> + <img src={Img3} alt="Slide 3" /> - <span>Compartilhar suas Experiências</span> - <p>Você pode relatar suas experiências sobre o uso de recursos no seu cotidiano escolar. Aproveite esse espaço para sugerir e conhecer novos usos para um mesmo recurso.</p> + <span className={`${contrast}TextColor`}>Compartilhar suas Experiências</span> + <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>Você pode relatar suas experiências sobre o uso de recursos no seu cotidiano escolar. Aproveite esse espaço para sugerir e conhecer novos usos para um mesmo recurso.</p> </div> - <div> - <img src={Img4} alt="Slide 4"/> + <div className={`${contrast}BackColor`}> + <img src={Img4} alt="Slide 4" /> - <span>Publicar o seu Recurso</span> - <p>Colabore e ajude a fortalecer a plataforma publicando um recurso educacional desenvolvido por você ou pelo coletivo da escola do qual faz parte. Compartilhe seu conhecimento e dê visibilidade ao seu recurso, torne-o público enriquecendo o conhecimento partilhado!</p> + <span className={`${contrast}TextColor`}>Publicar o seu Recurso</span> + <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>Colabore e ajude a fortalecer a plataforma publicando um recurso educacional desenvolvido por você ou pelo coletivo da escola do qual faz parte. Compartilhe seu conhecimento e dê visibilidade ao seu recurso, torne-o público enriquecendo o conhecimento partilhado!</p> </div> - <div> - <img src={Img5} alt="Slide 5"/> + <div className={`${contrast}BackColor`}> + <img src={Img5} alt="Slide 5" /> - <span>Encontrar Materiais de Formação</span> - <p>A plataforma disponibiliza um conjunto de materiais de formação desenvolvidos pelo Ministério da Educação com diversidade de temas e recursos educacionais.</p> + <span className={`${contrast}TextColor`}>Encontrar Materiais de Formação</span> + <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>A plataforma disponibiliza um conjunto de materiais de formação desenvolvidos pelo Ministério da Educação com diversidade de temas e recursos educacionais.</p> </div> diff --git a/src/Components/AboutCarouselPartner.js b/src/Components/AboutCarouselPartner.js index ba4800d6963383c5c2154fb3f89c95f1abdae188..7c1eef5d6b2a2073711ca4f2d7cb899323e705d4 100644 --- a/src/Components/AboutCarouselPartner.js +++ b/src/Components/AboutCarouselPartner.js @@ -39,12 +39,12 @@ import { Impulsiona } from "ImportImages.js"; import { InstPeninsula } from "ImportImages.js"; import { Telefonica } from "ImportImages.js"; -function AboutCarouselPartner(props) { +function AboutCarouselPartner() { const items = [ <a href="http://portaldoprofessor.mec.gov.br/index.html" rel="noreferrer" target="_blank"> - <img src={LogoPortalDoProfessor} alt="LogoPortalDoProfessor"/> + <img src={LogoPortalDoProfessor} alt="LogoPortalDoProfessor" /> </a>, <a href="http://objetoseducacionais2.mec.gov.br/" rel="noreferrer" target="_blank"> <img src={LogoBioe} alt="LogoBioe" /> @@ -55,8 +55,8 @@ function AboutCarouselPartner(props) { <a href="https://tvescola.org.br/" rel="noreferrer" target="_blank"> <img src={LogoTvEscola} alt="LogoTvEscola" /> </a>, - <a href="http://www.fundacaolemann.org.br/" rel="noreferrer" target="_blank"> - <img style={{align: "middle"}} src={FundacaoLemann} alt="FundacaoLemann" /> + <a href="http://www.fundacaolemann.org.br/" rel="noreferrer" target="_blank"> + <img style={{ align: "middle" }} src={FundacaoLemann} alt="FundacaoLemann" /> </a>, <a href="http://new.safernet.org.br/" rel="noreferrer" target="_blank"> <img src={Safer} alt="Safer" /> @@ -71,7 +71,7 @@ function AboutCarouselPartner(props) { <img src={Educagital} alt="Educagital" /> </a>, <a href="http://www.aefbrasil.org.br" rel="noreferrer" target="_blank"> - <img style={{filter: "grayscale(1)"}} src={EnefAef} alt="EnefAef" /> + <img style={{ filter: "grayscale(1)" }} src={EnefAef} alt="EnefAef" /> </a>, <a href="https://impa.br/" rel="noreferrer" target="_blank"> <img src={Impa} alt="Impa" /> @@ -89,12 +89,12 @@ function AboutCarouselPartner(props) { <img src={Telefonica} alt="Telefonica" /> </a> ] - const partnerPerPage = (()=> { + const partnerPerPage = (() => { var pageWidth = window.innerWidth - if (pageWidth >= 1200){ + if (pageWidth >= 1200) { return 3 } - else{ + else { return 1 } }) @@ -106,34 +106,35 @@ function AboutCarouselPartner(props) { return ( <div id="Partner-Caroussel"> - <Carousel showThumbs= {false} - showStatus= {false} - showIndicators = {true} - interval={4500} - transitionTime={1000} - autoPlay - infiniteLoop + <Carousel + showThumbs={false} + showStatus={false} + showIndicators={true} + interval={4500} + transitionTime={1000} + autoPlay + infiniteLoop - > - { - rows.map((row, index) => ( - <div key={(index+1)} style={{display:'inline-flex', paddingTop:100}}> - { - row.map((partner, index2) => ( - <div - key={index + (index2*10)} - style={{marginLeft:10, display: 'flex', maxWidth:300}} - > - { - partner - } - </div> - )) - } - </div> - )) - } - </Carousel> + > + { + rows.map((row, index) => ( + <div key={(index + 1)} style={{ display: 'inline-flex', paddingTop: 100 }}> + { + row.map((partner, index2) => ( + <div + key={index + (index2 * 10)} + style={{ marginLeft: 10, display: 'flex', maxWidth: 300 }} + > + { + partner + } + </div> + )) + } + </div> + )) + } + </Carousel> </div> ); diff --git a/src/Components/Acessibility/ContrastBar.css b/src/Components/Acessibility/ContrastBar.css new file mode 100644 index 0000000000000000000000000000000000000000..ac0fb515a53fb80ccc6a0ff3487a31acfcd8b7e5 --- /dev/null +++ b/src/Components/Acessibility/ContrastBar.css @@ -0,0 +1,67 @@ +/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre +Departamento de Informatica - Universidade Federal do Parana + +This file is part of Plataforma Integrada MEC. + +Plataforma Integrada MEC is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +Plataforma Integrada MEC is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +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/>.*/ + + +.contrastButton{ + border: none; + padding: 0; + background: none; + background-color: white; +} +.contrastButton:active { + border: none; + padding: 0; + background: none; + background-color: white; +} +.bar{ + background-color: white; + width: 100%; + height: 18px; +} + +.Contrastbar{ + background-color: black; + width: 100%; + height: 18px; + border-bottom: 1px solid white; +} + +.Contrasttext{ + color: yellow; + text-decoration: underline; + cursor: pointer; + width: 140px; + font-size: 13px; + padding-left: 10px; + padding-right: 10px; + text-align: center; + vertical-align: middle; +} + +.textRight { + float:right; + height:100%; + display: flex; + font-size: 13px; +} +.textLeft { + float:left; + height:100%; + font-size: 13px; +} \ No newline at end of file diff --git a/src/Components/Acessibility/ContrastBar.js b/src/Components/Acessibility/ContrastBar.js new file mode 100644 index 0000000000000000000000000000000000000000..7ee0adc8d723138a5429cacedc2fc199cc80b546 --- /dev/null +++ b/src/Components/Acessibility/ContrastBar.js @@ -0,0 +1,109 @@ +/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre +Departamento de Informatica - Universidade Federal do Parana + +This file is part of Plataforma Integrada MEC. + +Plataforma Integrada MEC is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +Plataforma Integrada MEC is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +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 from 'react'; +import './ContrastBar.css'; +import ContrastImageOn from '../../img/OnContrastIcon.png'; +import ContrastImageOff from '../../img/OffContrastIcon.png'; +import { Store } from '../../Store'; + +/** + * Bar allowing for the toggle of the high contrast mode on the page. + */ +function ContrastBar() { + /* eslint-disable */ + + // Hook to set contrast context + const { state, dispatch } = React.useContext(Store); + + const setContrastAction = (newContrast) => { + localStorage.setItem('@portalmec/contrast', newContrast) + return dispatch({ + type: 'SET_CONTRAST', + payload: newContrast + }) + } + + const setFontSizeAction = (newFontSize) => { + return dispatch({ + type: 'SET_FONT_SIZE', + payload: newFontSize + }) + } + + React.useEffect(() => { }, [state]); + + const toggleContrast = () => { + var status = (state.contrast === '' ? 'Contrast' : '') + + setContrastAction(status) + } + const incrementFontSize = () => { + document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) + 1) + "px"; + setFontSizeAction(parseInt(state.fontSize, 10) + 1); + } + const decrementFontSize = () => { + document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) - 1) + "px"; + setFontSizeAction(parseInt(state.fontSize, 10) - 1); + } + const defaultFontSize = () => { + setFontSizeAction(15); + document.getElementsByTagName("body")[0].style.fontSize = "15px"; + } + + return ( + <React.Fragment> + <div className={`${state.contrast}bar`}> + <div className='textLeft hide-on-small-and-down'> + <a className={`${state.contrast}text`} accessKey="1" href="#conteudo" title="Ir para o conteúdo alt + 1"> + Conteúdo 1 + </a> + <a className={`${state.contrast}text`} accessKey="2" href="#menu" title="Ir para o menu alt + 2"> + Menu 2 + </a> + <a className={`${state.contrast}text`} accessKey="3" href="#rodape" title="Ir para o rodapé alt + 3"> + Rodapé 3 + </a> + </div> + <div className='textRight'> + <div> + <a className={`${state.contrast}text`} onClick={incrementFontSize} title="Aumentar tamanho da fonte"> + A+ + </a> + <a className={`${state.contrast}text`} onClick={decrementFontSize} title="Diminuir tamanho da fonte"> + A- + </a> + <a className={`${state.contrast}text`} onClick={defaultFontSize} title="Restaurar tamanho da fonte"> + A + </a> + </div> + <div onClick={toggleContrast}> + <a className={`${state.contrast}text`} title="Ativar modo de alto contraste"> + <img src={state.contrast === '' ? ContrastImageOff : ContrastImageOn} style={{ marginRight: 5 }} alt="ContrastIcon" width="11" height="11" /> + Contraste + </a> + </div> + + </div> + </div> + </React.Fragment> + ); + +} + +export default ContrastBar; \ No newline at end of file diff --git a/src/Components/ActivityListItem.js b/src/Components/ActivityListItem.js index 43402a8e5176dc14edaba476f2403d6a72f0f202..53baaab68848808a32fa6ff48ffe013887df5fed 100644 --- a/src/Components/ActivityListItem.js +++ b/src/Components/ActivityListItem.js @@ -117,7 +117,7 @@ export default function ActivityListItem(props) { }, []) return ( - <StyledListItem onMenuBar={props.onMenuBar}> + <StyledListItem onMenuBar={props.onMenuBar} contrast={props.contrast}> { !props.onMenuBar && <> @@ -140,10 +140,11 @@ export default function ActivityListItem(props) { } secondary={ <div> - - <span> + + <span style={props.contrast === "" ? { color: "#666" } : {color: "white"}}> + <Link to={{ - pathname: props.ownerHref, + pathname: props.ownerHref, state: '0', }} className="owner-name-a" >{props.ownerName}</Link> {activity.text} <Link to={props.recipientHref} className="recipient-name-a">{props.recipientName}</Link> {activity.text2} </span> @@ -169,22 +170,24 @@ const StyledListItem = styled(ListItem)` .time-ago-span { font-size : 12px; - font-family : 'Lato', medium; - color : #787380; + font-family : 'Lato', medium; + color: ${props => props.contrast === '' ? "#787380" : "white"}; } .owner-name-a { - color : #00bcd4; + color: ${props => props.contrast === '' ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; } .recipient-name-a { cursor : pointer; - color : #337ab7; + color: ${props => props.contrast === '' ? "#337ab7" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; } .icon { padding-right : 10px; - color : #666; + color: ${props => props.contrast === '' ? "#666" : "white"}; } .tag-object { @@ -208,15 +211,18 @@ const StyledListItem = styled(ListItem)` } .recurso-color { - background-color : orange; + background-color: ${props => props.contrast === '' ? "orange" : ""}; + border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"}; } .colecao-color { - background-color : blue; + background-color: ${props => props.contrast === '' ? "blue" : ""}; + border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"}; } .curadoria-color { - background-color : red; + background-color: ${props => props.contrast === '' ? "red" : ""}; + border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"}; } diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js index 8670178587cacf74b98445342206d7a2a7b04f95..dfc41b40bf4004348f56c1793df15e14c5b0cd40 100644 --- a/src/Components/AreasSubPagesFunction.js +++ b/src/Components/AreasSubPagesFunction.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, useEffect } from "react"; +import React, { useState, useEffect, useContext } from "react"; import "./carousel.css"; import { Col, Row, Container, Hidden, Visible } from "react-grid-system"; import styled from 'styled-components' @@ -40,6 +40,16 @@ import { materiais } from "ImportImages.js"; import { colecoes } from "ImportImages.js"; import { ColecaoVazia } from "ImportImages.js"; import { RecursoVazio } from "ImportImages.js"; +import { Store } from '../Store' +import { makeStyles } from '@material-ui/core/styles' + +const useStyles = makeStyles(theme => ({ + contrastTextField: { + border: "1px solid white", + borderRadius: theme.shape.borderRadius, + backgroundColor: "black", + } +})) function objectsPerPage() { var pageWidth = window.innerWidth @@ -81,7 +91,7 @@ function ReqResources(props) { isLoading ? <Grid container justify="center" alignItems="center" style={{ margin: "2em" }} > <Grid item> - <CircularProgress size={24} color="#ff7f00" /> + <CircularProgress size={24} style={props.contrast === "" ? { color: "#ff7f00" } : { color: "yellow" }} /> </Grid> </Grid> : @@ -89,27 +99,28 @@ function ReqResources(props) { { rows.length >= 1 ? rows.map((row, index) => ( - <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}> - {row.map((card) => ( - <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}> - <ResourceCardFunction - avatar={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.publisher.name} - tags={card.tags} - href={"/recurso/" + card.id} - downloadableLink={card.default_attachment_location} - /> - </div> - ))} - </Row> + <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}> + {row.map((card) => ( + <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}> + <ResourceCardFunction + contrast={props.contrast} + avatar={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.publisher.name} + tags={card.tags} + href={"/recurso/" + card.id} + downloadableLink={card.default_attachment_location} + /> + </div> + ))} + </Row> )) : <Grid container justify="center" alignItems="center"> @@ -147,86 +158,50 @@ function ReqCollections(props) { return ( isLoading ? <Grid container justify="center" alignItems="center" style={{ marginTop: "2em" }}> - <Grid item> - <CircularProgress size={24} color="#673ab7" /> - </Grid> + <Grid item> + <CircularProgress size={24} style={props.contrast === "" ? { color: "#673ab7" } : { color: "yellow" }} /> + </Grid> </Grid> : rows.length >= 1 ? <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}> - { + { rows.map((row, index) => ( - <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}> + <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}> {row.map((card) => ( - <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}> + <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}> <CollectionCardFunction - name={card.name} - tags={card.tags} - rating={card.score} - 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 ? card.owner.id : ""} + contrast={props.contrast} + name={card.name} + tags={card.tags} + rating={card.score} + 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 ? card.owner.id : ""} /> - </div> + </div> ))} - </Row> + </Row> ))} </Carousel> - : + : <Grid container justify="center" alignItems="center"> - <Grid item> + <Grid item> <img src={ColecaoVazia} alt="Não há coleções" /> - </Grid> + </Grid> </Grid> ) } -function ReqMaterials(props) { - const materials = colecoes_obj(); - - const handleExpandMaterial = (id) => { - if (id !== props.currMaterial.material.id) - props.setCurrMaterial({ - open: true, - material: { ...materials[id] } - }) - else - props.setCurrMaterial({ - open: false, - material: {} - }) - } - - return ( - <Row> - { - materials.map((material, index) => { - return ( - <Col md={3} key={index}> - <MaterialCard - name={material.name} - thumb={material.img} - score={material.score} - modules={material.topics} - handleExpand={handleExpandMaterial} - id={index} - /> - </Col> - ) - }) - } - </Row> - ) -} - -function TabRecurso() { +function TabRecurso({ contrast }) { + const classes = useStyles() const text = "Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é, a vídeos, animações e a outros recursos destinados à educação. São Recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!" const [currOrder, setCurrOrder] = useState("Mais Relevante"); const [currValue, setCurrValue] = useState("score"); @@ -241,8 +216,8 @@ function TabRecurso() { return ( <React.Fragment> - <div style={{ backgroundColor: "#ff7f00", position: "relative" }}> - <StyledTab container> + <div style={{ backgroundColor: contrast === "" ? "#ff7f00" : "black", position: "relative" }}> + <StyledTab container contrast={contrast}> <Grid item md={3} xs={12}> <img src={recursos} @@ -271,75 +246,79 @@ function TabRecurso() { </div> { window.innerWidth > 501 && + <div className={`${contrast}BackColor`}> <Container style={{ padding: "20px" }}> - <Grid + <Grid container direction="row" justify="space-between" alignItems="center" style={{ - paddingBottom: "5px", - borderBottom: "1px solid #ff7f00", - color: "#ff7f00", + paddingBottom: "5px", + borderBottom: contrast === "" ? "1px solid #ff7f00" : "1px solid white", + color: contrast === "" ? "#ff7f00" : "white", }} - > + > <Grid item> - <p + <p style={{ margin: 0, padding: 0 }} - > + > { - `Recursos ${currOrder}` + `Recursos ${currOrder}` } - </p> + </p> </Grid> <Grid item> - <Grid container direction="row" alignItems="center" spacing={1}> + <Grid container direction="row" alignItems="center" spacing={1}> <Grid item> - <p style={{ margin: 0, padding: 0 }}> + <p style={{ margin: 0, padding: 0 }}> Ordenar por: </p> </Grid> <Grid item> - <TextField + <TextField select fullWidth value={currValue} variant="outlined" - > + className={contrast === "Contrast" && classes.contrastTextField} + > {ordenar.map((option) => ( - <MenuItem + <MenuItem key={option.value} value={option.value} name={option.value} onClick={() => { - setCurrOrder(option.label) - setCurrValue(option.value) + setCurrOrder(option.label) + setCurrValue(option.value) }} - > - <span style={currValue === option.value ? { color: "#ff7f00" } : null} > - {option.label} + > + <span style={currValue === option.value ? { color: contrast === "" ? "#ff7f00" : "yellow", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} > + {option.label} </span> - </MenuItem> + </MenuItem> ))} - </TextField> + </TextField> + </Grid> </Grid> </Grid> </Grid> - </Grid> - <Hidden sm xs> - <ReqResources order={currValue} /> - </Hidden> - <Visible sm xs> - <ReqResources order={currValue} /> - </Visible> + <Hidden sm xs> + <ReqResources order={currValue} contrast={contrast} /> + </Hidden> + <Visible sm xs> + <ReqResources order={currValue} contrast={contrast} /> + </Visible> </Container> + </div> } </React.Fragment> ) } -function TabColecoes() { +function TabColecoes({ contrast }) { + const classes = useStyles() const text = "Nesta área, você tem acesso às coleções criadas e organizadas pelos usuários da plataforma. É mais uma possibilidade de buscar recursos educacionais para sua aula!" const [currOrder, setCurrOrder] = useState("Mais Relevante"); const [currValue, setCurrValue] = useState("score"); @@ -355,7 +334,7 @@ function TabColecoes() { return ( <React.Fragment> <div style={{ backgroundColor: "#673ab7", position: "relative" }}> - <StyledTab container> + <StyledTab container contrast={contrast}> <Grid item md={3} xs={12}> <img src={colecoes} @@ -384,149 +363,191 @@ function TabColecoes() { </div> { window.innerWidth > 501 && + <div className={`${contrast}BackColor`}> <Container style={{ padding: "20px" }}> - <Grid + <Grid container direction="row" justify="space-between" alignItems="center" style={{ - paddingBottom: "5px", - borderBottom: "1px solid #673ab7", - color: "#673ab7", + paddingBottom: "5px", + borderBottom: contrast === "" ? "1px solid #673ab7" : "1px solid white", + color: contrast === "" ? "#673ab7" : "white", }} - > + > <Grid item> - <p + <p style={{ margin: 0, padding: 0 }} - > + > { - `Coleções ${currOrder}` + `Coleções ${currOrder}` } - </p> + </p> </Grid> <Grid item> - <Grid container direction="row" alignItems="center" spacing={1}> + <Grid container direction="row" alignItems="center" spacing={1}> <Grid item> - <p style={{ margin: 0, padding: 0 }}> + <p style={{ margin: 0, padding: 0 }}> Ordenar por: </p> </Grid> <Grid item> - <TextField + <TextField select fullWidth value={currValue} variant="outlined" - > + className={contrast === "Contrast" && classes.contrastTextField} + > {ordenar.map((option) => ( - <MenuItem + <MenuItem key={option.value} value={option.value} name={option.value} + style={contrast === "" ? {} : { backgroundColor: "black" }} onClick={() => { - setCurrOrder(option.label) - setCurrValue(option.value) + setCurrOrder(option.label) + setCurrValue(option.value) }} - > - <span style={currValue === option.value ? { color: "#673ab7" } : null} > - {option.label} + > + <span style={currValue === option.value ? { color: contrast === "" ? "#673ab7" : "yellow", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} > + {option.label} </span> - </MenuItem> + </MenuItem> ))} - </TextField> + </TextField> + </Grid> </Grid> </Grid> </Grid> - </Grid> - <ReqCollections order={currValue} /> + <ReqCollections order={currValue} contrast={contrast} /> </Container> + </div> } </React.Fragment> ) } -function TabMateriais() { +function TabMateriais({ contrast }) { const text = "Nesta área, você acessa livremente materiais completos de formação, como cursos já oferecidos pelo MEC e seus parceiros. São conteúdos elaborados por equipes multidisciplinares e de autoria de pesquisadores e educadores renomados nas áreas." + const materials = colecoes_obj() + const [currMaterial, setCurrMaterial] = useState({ open: false, material: {} }) + const handleExpandMaterial = (id) => { + if (id !== currMaterial.material.id) + setCurrMaterial({ + open: true, + material: { ...materials[id] } + }) + else { + setCurrMaterial({ + open: false, + material: {} + }) + } + } + return ( <React.Fragment> - <div style={{ backgroundColor: "#e81f4f", position: "relative" }}> - <StyledTab container> - <Grid item md={3} xs={12}> - <img - src={materiais} - alt="aba recursos" - style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }} - /> - </Grid> - { - window.innerWidth <= 501 && - <h4> - Materiais de formação - </h4> - } - <Grid item md={6} xs={12}> - <p> - {text} - </p> - </Grid> - { - window.innerWidth <= 501 && - <div style={{ display: "flex", justifyContent: "center" }}> - <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link> - </div> - } - </StyledTab> - </div> + <div style={{ backgroundColor: "#e81f4f", position: "relative" }}> + <StyledTab container contrast={contrast}> + <Grid item md={3} xs={12}> + <img + src={materiais} + alt="aba recursos" + style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }} + /> + </Grid> + { + window.innerWidth <= 501 && + <h4> + Materiais de formação + </h4> + } + <Grid item md={6} xs={12}> + <p> + {text} + </p> + </Grid> { + window.innerWidth <= 501 && + <div style={{ display: "flex", justifyContent: "center" }}> + <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link> + </div> + } + </StyledTab> + </div> + { window.innerWidth > 501 && + <div className={`${contrast}BackColor`}> <Container style={{ padding: "20px" }}> <p - style={{ - paddingBottom: "5px", - borderBottom: "1px solid #e81f4f", - color: "#e81f4f", - }} + style={{ + paddingBottom: "5px", + borderBottom: contrast === "" ? "1px solid #e81f4f" : "1px solid white", + color: contrast === "" ? "#e81f4f" : "white", + }} > - Materiais mais recentes{" "} + Materiais mais recentes{" "} </p> <Carousel - style={{ padding: "20px" }} - showThumbs={false} - infiniteLoop={true} - showStatus={false} + style={{ padding: "20px" }} + showThumbs={false} + infiniteLoop={true} + showStatus={false} > - <ReqMaterials currMaterial={currMaterial} setCurrMaterial={setCurrMaterial} /> + <Row> + { + materials.map((material, index) => { + return ( + <Col md={3} key={index}> + <MaterialCard + contrast={contrast} + name={material.name} + thumb={material.img} + score={material.score} + modules={material.topics} + handleExpand={handleExpandMaterial} + id={index} + /> + </Col> + ) + }) + } + </Row> </Carousel> { - currMaterial.open ? - <ExpandedMaterial material={currMaterial.material} /> + currMaterial.open ? + <ExpandedMaterial contrast={contrast} material={currMaterial.material} /> : null } </Container> + </div> } - </React.Fragment > - ) + </React.Fragment > + ) } export default function AreasSubPages(props) { + const { state } = useContext(Store) + const areaRender = () => { switch (props.banner) { case "Recursos": - return <TabRecurso /> + return <TabRecurso contrast={state.contrast} /> case "Materiais": - return <TabMateriais /> + return <TabMateriais contrast={state.contrast} /> case "Colecoes": - return <TabColecoes /> + return <TabColecoes contrast={state.contrast} /> default: return null } @@ -537,9 +558,9 @@ export default function AreasSubPages(props) { { window.innerWidth <= 501 ? ( <React.Fragment> - <TabRecurso /> - <TabMateriais /> - <TabColecoes /> + <TabRecurso contrast={state.contrast} /> + <TabMateriais contrast={state.contrast} /> + <TabColecoes contrast={state.contrast} /> </React.Fragment> ) : ( areaRender() @@ -561,6 +582,7 @@ const StyledTab = styled(Grid)` color : #fff; min-height : 190px; padding : 20px 10px 20px 10px; + background: ${props => props.contrast === "" ? "" : "black"}; img { float : left; @@ -586,9 +608,9 @@ const StyledTab = styled(Grid)` padding: 5px 10px; border: solid 2px #fff; border-radius: 7px; - color: #fff; + color: ${props => props.contrast === "" ? "#fff" : "yellow"}; cursor: pointer; - text-decoration: none; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } ` diff --git a/src/Components/ButtonAvaliarRecurso.js b/src/Components/ButtonAvaliarRecurso.js index 8b307048182a36bd0cafa1063a86b45ad64105b8..0a7d59a10b1aa0743d0208692e0aec7bc39b3412 100644 --- a/src/Components/ButtonAvaliarRecurso.js +++ b/src/Components/ButtonAvaliarRecurso.js @@ -6,18 +6,20 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; export default function ButtonAvaliarRecurso (props) { return ( - <StyledButton onClick={props.callback}> - <ExpandMoreIcon/> AVALIAR RECURSO + <StyledButton contrast={props.contrast} onClick={props.callback}> + <ExpandMoreIcon style={{color: "white"}}/> AVALIAR RECURSO </StyledButton> ) } const StyledButton = styled(Button)` &:hover { - background-color : #ed6f00 !important; + background-color: ${props => props.contrast === "" ? "#ed6f00" : "black"} !important; } - background-color : #ff7f00 !important; - color : #fff !important; + background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important; + border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important; + color : ${props => props.contrast === "" ? "white" : "yellow"} !important; + text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important; font-weight : 600 !important; box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important; .MuiSvgIcon-root { diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js index 564c07183b23510edf5ba1170651a63fff879122..ca0729a269e8d756bfc4686eb04acded43dbce12 100644 --- a/src/Components/ButtonGuardarColecao.js +++ b/src/Components/ButtonGuardarColecao.js @@ -46,9 +46,9 @@ export default function ButtonGuardarColecao(props) { return ( <> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar} @@ -56,28 +56,28 @@ export default function ButtonGuardarColecao(props) { > <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> </Snackbar> - <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }} + <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }} thumb={props.thumb} title={props.title} recursoId={props.learningObjectId} /> - <StyledButton onClick={handleGuardar}> - <CreateNewFolderIcon /> GUARDAR + <StyledButton onClick={handleGuardar} className={`${props.contrast}LinkColor`} + style={props.contrast === "" ? {border: "2px solid #f07e05", borderRadius : "5px", color :"#f07e05"} : {border: "1px solid white", borderRadius : "5px", color :"#f07e05"}} + > + <CreateNewFolderIcon className={`${props.contrast}IconColor`}/><span>GUARDAR</span> </StyledButton> </> ) } const StyledButton = styled(Button)` - color : #666 !important; background-color : transparent !important; font-size : 14px important; font-weight : 500 !important; .MuiSvgIcon-root { font-size : 24px; - color : inherit; } &:hover { - color: rgb(107, 35, 142) !important; + color: rgb(107, 35, 142); } ` diff --git a/src/Components/Carousel.js b/src/Components/Carousel.js index dde54bd232c55208fcae91ef2aee236250ac7cfc..0240cef58f00934043c48257a7532c78f61037a6 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/Checkbox.js b/src/Components/Checkbox.js index 3e0be625c424542d75bd13680417450a409f410d..6aaa04c7632f0ee9d67b3560bf671b41cb126690 100644 --- a/src/Components/Checkbox.js +++ b/src/Components/Checkbox.js @@ -19,29 +19,54 @@ import React from 'react'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Checkbox from '@material-ui/core/Checkbox'; import styled from 'styled-components' +import { yellow, blue } from "@material-ui/core/colors"; +import { withStyles } from '@material-ui/core/styles'; const StyledFormControlLabel = styled(FormControlLabel)` font-size : 12px !important; .label { font-size : 12px !important; } - .MuiCheckbox-colorSecondary.Mui-checked { - color : #00bcd4 !important; - } ` +const ContrastCheckBox = withStyles({ + root: { + color: yellow[400], + '&$checked': { + color: yellow[600], + }, + }, + checked: {}, +})((props) => <Checkbox color="default" {...props} />); + +const NormalCheckBox = withStyles({ + root: { + color: blue[400], + '&$checked': { + color: blue[600], + }, + }, + checked: {}, +})((props) => <Checkbox color="default" {...props} />); export default function LabeledCheckbox(props) { return ( - <StyledFormControlLabel - control={ - <Checkbox - value = {props.checked} - onChange = {props.handleChange} + <StyledFormControlLabel + contrast={props.contrast} + control={ + props.contrast === "" ? + <NormalCheckBox + value={props.checked} + onChange={props.handleChange} + /> + : + <ContrastCheckBox + value={props.checked} + onChange={props.handleChange} /> - } - label={<span style={{ fontSize: '12px' }}>{props.label}</span>} - /> + } + label={<span style={{ fontSize: '12px' }}>{props.label}</span>} + /> ); } diff --git a/src/Components/CloseModalButton.js b/src/Components/CloseModalButton.js index 00e8b3c34553c1ced9ba1b6e397fd5f404ef571d..186f36f06da8c452037c20df5093dd01780d984c 100644 --- a/src/Components/CloseModalButton.js +++ b/src/Components/CloseModalButton.js @@ -6,7 +6,7 @@ import CloseIcon from '@material-ui/icons/Close'; export default function CloseModalButton (props) { return ( <StyledCloseModalButton onClick={props.handleClose}> - <CloseIcon/> + <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/> </StyledCloseModalButton> ) } diff --git a/src/Components/ColCardOwnerOptions.js b/src/Components/ColCardOwnerOptions.js index a075780622f76c453592afb7d07b84de6ccd3df3..bc77db898a30d713de3686a7a33a43affee1588b 100644 --- a/src/Components/ColCardOwnerOptions.js +++ b/src/Components/ColCardOwnerOptions.js @@ -31,71 +31,68 @@ import ModalExcluirColecao from './ModalExcluirColecao.js' import ModalEditarColecao from './ModalEditarColecao.js' export default function ColCardOwnerOptions (props) { - const [anchorEl, setAnchorEl] = React.useState(null); - - function handleClick(event) { - setAnchorEl(event.currentTarget); - } - - function handleClose() { - setAnchorEl(null); - } - - const [modalExcluirOpen, toggleModalExcluir] = useState(false) - - const [modalEditarOpen, toggleModalEditar] = useState(false) - - - return ( - <> - <ModalExcluirColecao id={props.id} - open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}} removeColl={props.removeColl} - /> - <ModalEditarColecao id={props.id} - open={modalEditarOpen} handleClose={() => {toggleModalEditar(false)}} - changeColName={props.changeColName} changeColPrivacy={props.changeColPrivacy} - /> - - <div style={{fontSize: "12px"}}> - <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}> - OPÇÕES <MoreVertIcon style={{color : "inherit"}}/> - </Button> - <Menu - id="simple-menu" - anchorEl={anchorEl} - keepMounted - open={Boolean(anchorEl)} - onClose={handleClose} - > - <StyledMenuItem> - <Link to={"/colecao-do-usuario/" + props.id}> - <ListItemIcon><OpenIcon /></ListItemIcon>Abrir - </Link> - </StyledMenuItem> - - <StyledMenuItem onClick={() => {toggleModalEditar(true)}}> - <ListItemIcon><CreateIcon /></ListItemIcon>Editar - </StyledMenuItem> - - <StyledMenuItem onClick={() => {toggleModalExcluir(true)}} > - <ListItemIcon><DeleteForeverIcon /></ListItemIcon>Excluir - </StyledMenuItem> - - - </Menu> - </div> - </> - ) + const [anchorEl, setAnchorEl] = React.useState(null); + + function handleClick(event) { + setAnchorEl(event.currentTarget); + } + + function handleClose() { + setAnchorEl(null); + } + + const [modalExcluirOpen, toggleModalExcluir] = useState(false) + + const [modalEditarOpen, toggleModalEditar] = useState(false) + + + return ( + <> + <ModalExcluirColecao id={props.id} + contrast={props.contrast} open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}} removeColl={props.removeColl} + /> + <ModalEditarColecao id={props.id} + contrast={props.contrast} open={modalEditarOpen} handleClose={() => {toggleModalEditar(false)}} + changeColName={props.changeColName} changeColPrivacy={props.changeColPrivacy} + /> + + <div style={{fontSize: "12px"}}> + <Button className={`${props.contrast}LinkColor`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}> + OPÇÕES <MoreVertIcon className={`${props.contrast}IconColor`}/> + </Button> + <Menu + id="simple-menu" + anchorEl={anchorEl} + keepMounted + open={Boolean(anchorEl)} + onClose={handleClose} + > + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast}> + <Link to={"/colecao-do-usuario/" + props.id}> + <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir + </Link> + </StyledMenuItem> + + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalEditar(true)}}> + <ListItemIcon className={`${props.contrast}IconColor`}><CreateIcon /></ListItemIcon>Editar + </StyledMenuItem> + + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalExcluir(true)}} > + <ListItemIcon className={`${props.contrast}IconColor`}><DeleteForeverIcon /></ListItemIcon>Excluir + </StyledMenuItem> + </Menu> + </div> + </> + ) } export const StyledMenuItem = styled(MenuItem)` - color : #666 !important; + background-color: ${props => props.contrast === "" ? "white" : "black"} !important; .MuiSvgIcon-root { vertical-align : middle !important; } a { - text-decoration : none !important; - color : #666 !important; + color : inherit !important; } ` diff --git a/src/Components/ColCardPublicOptions.js b/src/Components/ColCardPublicOptions.js index 2b58c70f58000d4014fb53330c8901a65cbfc1b3..88cebaf2b2373b45e0c5a5c3749533e7b933b4a6 100644 --- a/src/Components/ColCardPublicOptions.js +++ b/src/Components/ColCardPublicOptions.js @@ -32,7 +32,7 @@ import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser'; import AddIcon from '@material-ui/icons/Add'; import ExitToAppIcon from '@material-ui/icons/ExitToApp'; -export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, handleFollow, currentUserId, handleLogin, liked }) { +export default function ColCardPublicOptions({ contrast, id, userFollowingCol, handleLike, handleFollow, currentUserId, handleLogin, liked }) { const [anchorEl, setAnchorEl] = React.useState(null); function handleClick(event) { @@ -49,6 +49,7 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, return ( <> <ReportModal + contrast={contrast} open={reportModalOpen} handleClose={() => handleReportModal(false)} form="colecao" @@ -62,7 +63,7 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, onClick={handleClick} style={{ color: "#666" }} > - <MoreVertIcon style={{ color: "inherit" }} /> + <MoreVertIcon className={`${contrast}IconColor`} style={{ color: "inherit" }} /> </Button> <Menu id="simple-menu" @@ -71,9 +72,9 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, open={Boolean(anchorEl)} onClose={handleClose} > - <StyledMenuItem> + <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast}> <Link to={"/colecao-do-usuario/" + id}> - <ListItemIcon> + <ListItemIcon className={`${contrast}IconColor`}> <OpenIcon /> </ListItemIcon> Abrir @@ -81,21 +82,23 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, </StyledMenuItem> <StyledMenuItem + className={`${contrast}LinkColor ${contrast}Text`} + contrast={contrast} onClick={() => window.open("/colecao-do-usuario/" + id, "_blank") } > - <ListItemIcon> + <ListItemIcon className={`${contrast}IconColor ${contrast}Text`}> <OpenInBrowserIcon /> </ListItemIcon> Abrir em nova guia </StyledMenuItem> - <StyledMenuItem onClick={handleLike}> - <ListItemIcon> + <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast} onClick={handleLike}> + <ListItemIcon className={`${contrast}IconColor`}> { liked ? - <FavoriteIcon style={{ fill: 'red' }} /> : <FavoriteIcon style={{ fill: '#666' }} /> + <FavoriteIcon /> : <FavoriteIcon /> } </ListItemIcon> { @@ -104,8 +107,8 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, } </StyledMenuItem> - <StyledMenuItem onClick={handleFollow}> - <ListItemIcon> + <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast} onClick={handleFollow}> + <ListItemIcon className={`${contrast}IconColor`}> { userFollowingCol ? <ExitToAppIcon /> : <AddIcon /> @@ -118,6 +121,8 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, </StyledMenuItem> <StyledMenuItem + className={`${contrast}LinkColor ${contrast}Text`} + contrast={contrast} onClick={() => { if (currentUserId) handleReportModal(true); @@ -125,7 +130,7 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, handleLogin() }} > - <ListItemIcon> + <ListItemIcon className={`${contrast}IconColor`}> <ReportProblemIcon /> </ListItemIcon> Reportar @@ -137,13 +142,11 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, } export const StyledMenuItem = styled(MenuItem)` - color: #666 !important; - - .MuiSvgIcon-root { - vertical-align: middle !important; - } - a { - text-decoration: none !important; - color: #666 !important; - } + background-color: ${props => props.contrast === "" ? "white" : "black"} !important; + .MuiSvgIcon-root { + vertical-align: middle !important; + } + a { + color: inherit !important; + } `; diff --git a/src/Components/CollectionAuthor.js b/src/Components/CollectionAuthor.js index c6c299cf08bba817e4a14e684609084840c44f4b..3d5c42318f5db49f869d0b462d24879b64c4607d 100644 --- a/src/Components/CollectionAuthor.js +++ b/src/Components/CollectionAuthor.js @@ -30,19 +30,20 @@ export default function CollectionAuthor(props) { justify="center" alignItems="center"> {props.imgsrc ? - <UserLink + <Link to={`/usuario-publico/${props.author_id}`} + contrast={props.contrast} > <UserAvatar src={props.imgsrc} /> - </UserLink> + </Link> : <CircularProgress color="secondary" /> } - <InfoText>Coleção organizada por:</InfoText> + <InfoText contrast={props.contrast}>Coleção organizada por:</InfoText> {props.name ? - <UserLink to={`/usuario-publico/${props.author_id}`} > - <UserName>{props.name}</UserName> - </UserLink> + <Link to={`/usuario-publico/${props.author_id}`} contrast={props.contrast}> + <UserName contrast={props.contrast}>{props.name}</UserName> + </Link> : <CircularProgress /> } @@ -58,15 +59,10 @@ const UserAvatar = styled.img` const InfoText = styled.p` margin-bottom: 0; padding-bottom: 0; - color: #666; + color: ${props => props.contrast === "" ? "#666 !important" : "white !important"}; ` const UserName = styled.h2` margin-top: 10px; - color: #673ab7; -` -const UserLink = styled(Link)` - text-decoration: none; - &:focus, &:hover, &:visited, &:link, &:active { - text-decoration: none; - } + color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"}; ` diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js index 1a3057ddf92eb5c358443007ce25c7d700ab70be..926de15f02f20605b7f3dd5ad7407974e186111d 100644 --- a/src/Components/CollectionCardFunction.js +++ b/src/Components/CollectionCardFunction.js @@ -43,283 +43,291 @@ import MuiAlert from '@material-ui/lab/Alert'; import { noAvatar } from "ImportImages.js"; export default function CollectionCardFunction(props) { - const { state } = useContext(Store) - - // eslint-disable-next-line - const [userAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar) - const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed) - const handleToggleUserFollowingCol = () => { toggleUserFollowingCol(!userFollowingCol) } - - const [name, setName] = useState(props.name) - const changeColName = (newName) => { setName(newName) } - - const [privacy, setPrivacy] = useState(props.privacy) - const changeColPrivacy = (newPrivacy) => { setPrivacy(newPrivacy) } - - const [likesCount, setLikesCount] = useState(props.likeCount) - const [liked, toggleLiked] = useState(props.liked) - - const [signUpOpen, setSignUp] = useState(false) - const [loginOpen, setLogin] = useState(false) - const [successfulLoginOpen, handleSuccessfulLogin] = useState(false) - - - function handleSuccessLike(data) { - toggleLiked(!liked) - setLikesCount(data.count) - } - const handleLike = () => { - if (state.currentUser.id) - putRequest(`/collections/${props.id}/like`, {}, handleSuccessLike, (error) => { console.log(error) }) - else - handleLogin() - } - - const [followingHover, handleFollowingHover] = useState(false) - const toggleFollowingHover = (value) => { handleFollowingHover(value) } - - const [slideIn, setSlide] = useState(false) - const controlSlide = () => { setSlide(!slideIn) } - - function handleSuccessFollow(data) { - handleToggleUserFollowingCol() - } - const handleFollow = () => { - if (state.currentUser.id) - putRequest(`/collections/${props.id}/follow`, {}, handleSuccessFollow, (error) => { console.log(error) }) - else - handleLogin() - } - - const RenderFollowButton = () => { - return ( - <FollowButton onClick={handleFollow}> - <AddIcon /><span>SEGUIR</span> - </FollowButton> - ) - } + const { state } = useContext(Store) + + // eslint-disable-next-line + const [userAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar) + const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed) + const handleToggleUserFollowingCol = () => { toggleUserFollowingCol(!userFollowingCol) } + + const [name, setName] = useState(props.name) + const changeColName = (newName) => { setName(newName) } + + const [privacy, setPrivacy] = useState(props.privacy) + const changeColPrivacy = (newPrivacy) => { setPrivacy(newPrivacy) } + + const [likesCount, setLikesCount] = useState(props.likeCount) + const [liked, toggleLiked] = useState(props.liked) + + const [signUpOpen, setSignUp] = useState(false) + const [loginOpen, setLogin] = useState(false) + const [successfulLoginOpen, handleSuccessfulLogin] = useState(false) - useEffect(() => { - if (!state.currentUser.id) { - toggleLiked(false); - toggleUserFollowingCol(false); + + function handleSuccessLike(data) { + toggleLiked(!liked) + setLikesCount(data.count) + } + const handleLike = () => { + if (state.currentUser.id) + putRequest(`/collections/${props.id}/like`, {}, handleSuccessLike, (error) => { console.log(error) }) + else + handleLogin() } - }, [state.currentUser.id]) - const RenderFollowingButton = () => { - return ( - <FollowingButton onMouseOver={() => toggleFollowingHover(true)} - onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}> - { - followingHover ? - ( - [ - <span>DEIXAR DE SEGUIR</span> - ] - ) - : - ( - [ - <React.Fragment> - <CheckIcon /><span>SEGUINDO</span> - </React.Fragment> - ] - ) - } - </FollowingButton> - ) - } + const [followingHover, handleFollowingHover] = useState(false) + const toggleFollowingHover = (value) => { handleFollowingHover(value) } - const SlideAnimationContent = () => { - return ( - <SlideContentDiv> - <HeaderContainer container="row" justify="flex-start" alignItems="center"> - <AvatarDiv item xs={2}> - <img className="img" src={userAvatar} alt="user avatar" /> - </AvatarDiv> - <EnviadoPor item xs={10}> - Enviado por: - <br /> - <p>{props.author}</p> - </EnviadoPor> - </HeaderContainer> - { - props.tags ? - <TagContainer container direction="row"> - { - props.tags.map((tag) => - <Grid item key={tag.id}> - <span >{tag.name}</span> - </Grid> - ) - } - </TagContainer> : - null - } - </SlideContentDiv> - ) - } + const [slideIn, setSlide] = useState(false) + const controlSlide = () => { setSlide(!slideIn) } - const handleSignUp = () => { - setSignUp(!signUpOpen) - } + function handleSuccessFollow(data) { + handleToggleUserFollowingCol() + } + const handleFollow = () => { + if (state.currentUser.id) + putRequest(`/collections/${props.id}/follow`, {}, handleSuccessFollow, (error) => { console.log(error) }) + else + handleLogin() + } - const handleLogin = () => { - setLogin(!loginOpen) - } + const RenderFollowButton = () => { + return ( + <FollowButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#503096" } : {border: "1px solid white", borderRadius : "5px", color :"#503096"}} onClick={handleFollow}> + <AddIcon className={`${props.contrast}IconColor`}/><span>SEGUIR</span> + </FollowButton> + ) + } - function Alert(props) { - return <MuiAlert elevation={6} variant="filled" {...props} />; - } + useEffect(() => { + if (!state.currentUser.id) { + toggleLiked(false); + toggleUserFollowingCol(false); + } + }, [state.currentUser.id]) - function toggleLoginSnackbar(reason) { - if (reason === 'clickaway') { - return; + const RenderFollowingButton = () => { + return ( + <FollowingButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#fff", backgroundColor : "#503096" } : {border: "1px solid white", borderRadius : "5px", color :"#503096"}}onMouseOver={() => toggleFollowingHover(true)} + onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}> + { + followingHover ? + ( + [ + <span>DEIXAR DE SEGUIR</span> + ] + ) + : + ( + [ + <React.Fragment> + <CheckIcon className={`${props.contrast}IconColor`}/><span>SEGUINDO</span> + </React.Fragment> + ] + ) + } + </FollowingButton> + ) } - handleSuccessfulLogin(false); - } - - return ( - <> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} - /> - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} - openSnackbar={() => { handleSuccessfulLogin(true) }} - /> - <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar} - anchorOrigin={{ vertical: 'top', horizontal: 'center' }} - > - <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> - </Snackbar> - <StyledCard> - <CardDiv> - <CardReaDiv> - <Link to={"/colecao-do-usuario/" + props.id}> - <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}> - <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}> - <UserInfo style={{ width: '272.5px'}}> - {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */} - <img src={userAvatar} alt="user avatar" style={{ - height: "70px", width: "70px", borderRadius: "50%", - zIndex: 1, border: "2px solid white", - boxShadow: "0 1px 3px rgba(0,0,0,.45)" - }} /> - <UserAndTitle> - <span>{props.author}</span> - <span className={"col-name"}>{name}</span> - </UserAndTitle> - </UserInfo> - <StyledGrid container direction="row" style={{ width: '272.5px' }}> + + const SlideAnimationContent = (contrast) => { + return ( + <SlideContentDiv style={contrast === '' ? {backgroundColor: "#7e57c2"} : {backgroundColor: "inherit"}}> + <HeaderContainer container="row" justify="flex-start" alignItems="center"> + <AvatarDiv item xs={2}> + <img className="img" src={userAvatar} alt="user avatar" /> + </AvatarDiv> + <EnviadoPor item xs={10}> + Enviado por: + <br /> + <p>{props.author}</p> + </EnviadoPor> + </HeaderContainer> + { + props.tags ? + <TagContainer container direction="row"> { - props.thumbnails.map((thumb) => - <Grid item xs={props.thumbnails.length <= 3 && props.thumbnails.length > 0 ? 12 / props.thumbnails.length : 6}> - <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: `${props.thumbnails.length <= 3 ? '230px' : '100%'}`, width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} /> + props.tags.map((tag) => + <Grid item key={tag.id}> + <span className={`${props.contrast}BackColor ${props.contrast}Text`}>{tag.name}</span> </Grid> - ) + ) } - </StyledGrid> - </div> + </TagContainer> : + null + } + </SlideContentDiv> + ) + } + + const handleSignUp = () => { + setSignUp(!signUpOpen) + } + + const handleLogin = () => { + setLogin(!loginOpen) + } + + function Alert(props) { + return <MuiAlert elevation={6} variant="filled" {...props} />; + } + + function toggleLoginSnackbar(reason) { + if (reason === 'clickaway') { + return; + } + handleSuccessfulLogin(false); + } + + return ( + <> + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} + /> + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + openSnackbar={() => { handleSuccessfulLogin(true) }} + /> + <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar} + anchorOrigin={{ vertical: 'top', horizontal: 'center' }} + > + <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> + </Snackbar> + <StyledCard> + <CardDiv className={`${props.contrast}Border`}> + <CardReaDiv className={`${props.contrast}BackColor`}> + <Link to={"/colecao-do-usuario/" + props.id}> + <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}> + <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}> + <UserInfo style={{ width: '272.5px'}}> + {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */} + <img src={userAvatar} alt="user avatar" style={{ + height: "70px", width: "70px", borderRadius: "50%", + zIndex: 1, border: "2px solid white", + boxShadow: "0 1px 3px rgba(0,0,0,.45)" + }} /> + <UserAndTitle> + <span>{props.author}</span> + <span className={"col-name"}>{name}</span> + </UserAndTitle> + </UserInfo> + <StyledGrid container direction="row" style={{ width: '272.5px' }}> + { + props.thumbnails.map((thumb) => + <Grid item xs={props.thumbnails.length <= 3 && props.thumbnails.length > 0 ? 12 / props.thumbnails.length : 6}> + <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: `${props.thumbnails.length <= 3 ? '230px' : '100%'}`, width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} /> + </Grid> + ) + } + </StyledGrid> + </div> + { + <div className={`slideContentLinkAfterActive${slideIn}`}> + <div className="Text" style={{ width: "100%" }}> + {SlideAnimationContent(props.contrast)} + </div> + </div> + } + </Header> + </Link> + + <Description className={`${props.contrast}BackColor`}> {/*renders rating, number of learning objects and likes count*/} + { + props.authorID !== state.currentUser.id && + <Rating + style={props.contrast === "" ? {} : {color: "white"}} + name="customized-empty" + value={props.rating} + readOnly + emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />} + /> + } + + <Footer className={`${props.contrast}Text`}> + <Type> + <FolderIcon style={props.contrast === "" ? {} : {color: "white"}} /> + <span style={{ fontWeight: "bold" }}>{props.collections ? props.collections.length : 0} </span> + <span>{props.collections ? props.collections.length !== 1 ? "Recursos" : "Recurso" : 0}</span> + </Type> + <LikeCounter> + <span>{likesCount}</span> + <ButtonNoWidth onClick={handleLike}> + <FavoriteIcon className={`${props.contrast}LinkColor`} style={ props.contrast === "" ? {color: liked ? "red" : "#666"} : {color: liked ? "red" : "white"} } /> + </ButtonNoWidth> + </LikeCounter> + </Footer> + </Description> + + </CardReaDiv> + { - <div className={`slideContentLinkAfterActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}> - <div className="text" > - {SlideAnimationContent()} - </div> - </div> + props.authorID === state.currentUser.id ? + ( + <CardReaFooter className={`${props.contrast}BackColor`} style={{ justifyContent: "space-between" }}> {/*renders following/unfollow and follow button*/} + <Grid container> + <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}> + { + privacy === 'private' && + <LockIcon className={`${props.contrast}IconColor`} /> + } + </Grid> + <Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}> + <ColCardOwnerOptions + contrast={props.contrast} + id={props.id} + changeColName={changeColName} + changeColPrivacy={changeColPrivacy} + removeColl={props.removeColl} + /> + </Grid> + </Grid> + </CardReaFooter> + ) + : + ( + <CardReaFooter className={`${props.contrast}BackColor`}> {/*renders following/unfollow and follow button*/} + <Grid container> + <Grid item xs={2}></Grid> + <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}> + { + userFollowingCol ? + ( + [ + RenderFollowingButton() + ] + ) + : + ( + [ + RenderFollowButton() + ] + ) + } + </Grid> + <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-end" }}> + <ColCardPublicOptions + contrast={props.contrast} + id={props.id} + userFollowingCol={userFollowingCol} + handleLike={handleLike} + handleFollow={handleFollow} + liked={liked} + handleLogin={handleLogin} + currentUserId={state.currentUser.id} + /> + </Grid> + </Grid> + </CardReaFooter> + ) } - </Header> - </Link> - - <Description> {/*renders rating, number of learning objects and likes count*/} - { - props.authorID !== state.currentUser.id && - <Rating - name="customized-empty" - value={props.rating} - readOnly - style={{ color: "#666" }} - emptyIcon={<StarBorderIcon fontSize="inherit" />} - /> - } - - <Footer> - <Type> - <FolderIcon /> - <span style={{ fontWeight: "bold" }}>{props.collections ? props.collections.length : 0} </span> - <span>{props.collections ? props.collections.length !== 1 ? "Recursos" : "Recurso" : 0}</span> - </Type> - <LikeCounter> - <span>{likesCount}</span> - <ButtonNoWidth onClick={handleLike}> - <FavoriteIcon style={{ color: liked ? "red" : "#666" }} /> - </ButtonNoWidth> - </LikeCounter> - </Footer> - </Description> - - </CardReaDiv> - - { - props.authorID === state.currentUser.id ? - ( - <CardReaFooter style={{ justifyContent: "space-between" }}> {/*renders following/unfollow and follow button*/} - <Grid container> - <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}> - { - privacy === 'private' && - <LockIcon style={{ color: "#666" }} /> - } - </Grid> - <Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}> - <ColCardOwnerOptions - id={props.id} - changeColName={changeColName} - changeColPrivacy={changeColPrivacy} - removeColl={props.removeColl} - /> - </Grid> - </Grid> - </CardReaFooter> - ) - : - ( - <CardReaFooter> {/*renders following/unfollow and follow button*/} - { - userFollowingCol ? - ( - [ - RenderFollowingButton() - ] - ) - : - ( - [ - RenderFollowButton() - ] - ) - } - <ColCardPublicOptions - id={props.id} - userFollowingCol={userFollowingCol} - handleLike={handleLike} - handleFollow={handleFollow} - liked={liked} - handleLogin={handleLogin} - currentUserId={state.currentUser.id} - /> - </CardReaFooter> - ) - } - - </CardDiv> - </StyledCard> - </> - ) + + </CardDiv> + </StyledCard> + </> + ) } const SlideContentDiv = styled.div` - background-color : #7e57c2; padding : 10px; width : 272.5px; height : 230px; @@ -369,7 +377,6 @@ const CardReaFooter = styled.div` display : flex; justify-content : center; align-items : center; - border-top : 1px solid #e5e5e5; .MuiSvgIcon-root { font-family: 'Material Icons'; @@ -404,8 +411,6 @@ const StyledGrid = styled(Grid)` height : 136px; width 130px; background : #f9f9f9; - border : 1px solid #f4f4f4; - border-color : #f4f4f4; } ` @@ -425,12 +430,6 @@ const Description = styled.div` padding : 15px; ` const FollowButton = styled(Button)` - border : 2px solid #503096 !important; - border-radius : 5px !important; - margin : 10px !important; - color :#503096 !important; - min-width : 150px !important; - min-height : 36px !important; text-align : center !important; vertical-align : middle !important; background : transparent !important; @@ -443,22 +442,11 @@ const FollowButton = styled(Button)` white-space : nowrap !important; font-weight: 500; - &:hover { - background-color : rgba(158,158,158,0.2) !important; - - } - ` const FollowingButton = styled(Button)` - border : 2px solid #503096 !important; - border-radius : 5px !important; - margin : 10px !important; - color :#fff !important; - min-width : 150px !important; - min-height : 36px !important; text-align : center !important; vertical-align : middle !important; - background-color : #503096 !important; + text-transform : uppercase !important; font-family : inherit !important; overflow : hidden !important; @@ -468,10 +456,4 @@ const FollowingButton = styled(Button)` white-space : nowrap !important; font-weight: 500; - &:hover { - background-color : rgba(158,158,158,0.2) !important; - color : #503096 !important; - box-shadow : none !important; - } - -` +` \ No newline at end of file diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js index 4f16d012eb2e8adf52e53e5aed76fb59e63c291d..add5ab759fca00b6da2a5a89183642e9cbb9e450 100644 --- a/src/Components/CollectionCommentSection.js +++ b/src/Components/CollectionCommentSection.js @@ -118,47 +118,52 @@ export default function CollectionCommentSection(props) { } } - const NoCommentsMessage = () => { + const NoCommentsMessage = (contrast) => { const NoCommentsContainer = styled.div` text-align: center; margin-left: 9vw; margin-right: 9vw; ` const BlueTitle = styled.h2` - color: #673ab7; + color: ${props => props.contrast === "" ? "#673ab7" : "white"}; ` const Secondary = styled.h3` font-weight: 100; + color: ${props => props.contrast === "" ? "black" : "white"}; ` const ButtonText = styled.span` font-weight: 900; + color: ${props => props.contrast === "" ? "white" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; ` const Image = styled.img` ` return ( <NoCommentsContainer> <Image src={Comentarios} style={{ width: "100%", maxWidth: 234 }} /> - <BlueTitle>Compartilhe sua opinião com a rede!</BlueTitle> - <Secondary>Gostou desta coleção? Comente e compartilhe com a rede sua opinião. Interagindo com a rede, você contribui para que mais coleções como esta sejam criadas.</Secondary> + <BlueTitle contrast={contrast}>Compartilhe sua opinião com a rede!</BlueTitle> + <Secondary contrast={contrast}>Gostou desta coleção? Comente e compartilhe com a rede sua opinião. Interagindo com a rede, você contribui para que mais coleções como esta sejam criadas.</Secondary> <Button variant="contained" color="primary" + style={contrast.contrast === "" ? {} : { backgroundColor: "black", border: "1px solid white" }} startIcon={<EditIcon />} onClick={handleScrollToCommentForm} > - <ButtonText>Relatar experiência</ButtonText> + <ButtonText contrast={contrast}>Relatar experiência</ButtonText> </Button> </NoCommentsContainer> ); } - const CollectionComments = () => { + const CollectionComments = (contrast) => { return ( - <ComentariosBox> + <ComentariosBox contrast={contrast}> <h3>{totalReviews} {totalReviews !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3> {reviews.map(r => { return ( <div className="comentario-template" key={r.created_at}> <Comment + contrast={contrast} isCollection={false} rerenderCallback={forceUpdate} objectID={props.id} @@ -207,7 +212,7 @@ export default function CollectionCommentSection(props) { }, [render_state, currPageReviews]); return ( - <CommentAreaContainer container xs={12} direction="row" justify="center" alignItems="center"> + <CommentAreaContainer contrast={props.contrast} container xs={12} direction="row" justify="center" alignItems="center"> <SnackBarComponent snackbarOpen={snackInfo.open} handleClose={handleCloseSnack} @@ -216,22 +221,24 @@ export default function CollectionCommentSection(props) { color={snackInfo.color} /> <SignUpModal + contrast={props.contrast} open={sign_up_open} handleClose={() => setSignUpOpen(false)} openLogin={() => setLoginOpen(true)} /> <LoginModal + contrast={props.contrast} openSnackbar={handleOpenSnackSignIn} open={log_in_open} handleClose={() => setLoginOpen(false)} openSignUp={handleOpenSignUp} /> <Grid item xs={12} ref={comment_ref}> - <CommentAreaCard> + <CommentAreaCard contrast={props.contrast}> { props.currentUserId ? <Fragment> - <Title>Conte sua experiência com a coleção</Title> + <Title contrast={props.contrast}>Conte sua experiência com a coleção</Title> <Grid container style={{ paddingTop: "20px" }} spacing={1}> <Grid item xs={12} sm={2} style={{ paddingLeft: "15px", paddingRight: "15px" }}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}> @@ -240,6 +247,7 @@ export default function CollectionCommentSection(props) { </Grid> <Grid item xs={12} sm={10}> <CommentForm + contrast={props.contrast} colecao recursoId={props.id} handleSnackbar={handlePostSnackbar} @@ -250,9 +258,9 @@ export default function CollectionCommentSection(props) { </Fragment> : <Grid item xs={12}> - <LogInToComment> + <LogInToComment contrast={props.contrast}> <span className="span-purple">Você precisa entrar para comentar</span> - <Button onClick={() => setSignUpOpen(true)} style={{ textTransform: "uppercase", color: "#666", fontWeight: "700" }}> + <Button onClick={() => setSignUpOpen(true)} style={props.contrast === "" ? { textTransform: "uppercase", color: "#666", fontWeight: "700" } : { textTransform: "uppercase", color: "yellow", fontWeight: "700", textDecoration: "underline" }}> <ExitToAppIcon />ENTRAR </Button> </LogInToComment> @@ -264,7 +272,7 @@ export default function CollectionCommentSection(props) { <CircularProgress className="loading" /> </LoadingDiv> : - reviews.length ? CollectionComments() : NoCommentsMessage() + reviews.length ? CollectionComments(props.contrast) : NoCommentsMessage(props.contrast) } </CommentAreaCard> </Grid> @@ -302,7 +310,7 @@ const ComentariosBox = styled.div` font-family: 'Roboto Light','Roboto Regular',Roboto; font-weight: 300; font-style: normal; - color:#666; + color: ${props => props.contrast === "" ? "#666" : "white"}; font-size: 1.857em; margin: 15px 2%; text-align : flex-start; @@ -357,7 +365,7 @@ const LogInToComment = styled.div` font-size : 24px; font-weight : 700; padding-bottom : 5px; - color : #673ab7; + color: ${props => props.contrast === "" ? "#673ab7" : "white"}; } img { @@ -368,12 +376,15 @@ const LogInToComment = styled.div` const CommentAreaContainer = styled(Grid)` padding: 10px; + background: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; ` const CommentAreaCard = styled(Card)` padding: 45px; + background: ${props => props.contrast === "" ? "#f4f4f4" : "black !important"}; + border: ${props => props.contrast === "" ? "" : "1px solid white!important"}; ` const Title = styled.h1` text-align: center; font-weight: 100; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; ` diff --git a/src/Components/CollectionDescription.js b/src/Components/CollectionDescription.js index 60de747f5bb7c17d9dff5d1a9acb2f69d8c95808..a8eedcbce66be688362e3976320c1dd9118b67b7 100644 --- a/src/Components/CollectionDescription.js +++ b/src/Components/CollectionDescription.js @@ -43,7 +43,9 @@ export default function CollectionDescription(props) { }, [props.collection_id]); return ( - <Grid container direction="column" justify="center" alignItems="center" spacing={5}> + <Grid container direction="column" justify="center" alignItems="center" spacing={5} + style={props.contrast === "" ? {color: "#666"} : {color: "white"}} + > <Grid item justify="center" @@ -59,6 +61,7 @@ export default function CollectionDescription(props) { > <Grid item> <CollectionReview + contrast={props.contrast} stars={props.stars} liked={props.liked} likes={props.likes} @@ -92,6 +95,5 @@ export default function CollectionDescription(props) { const Title = styled.h1` font-size: 2.5em; - color: rgb(102, 102, 102); text-align: center ` \ No newline at end of file diff --git a/src/Components/CollectionDowloadButton.js b/src/Components/CollectionDowloadButton.js index bda45946d26e9fb373ba79d5e006d4cacb5bb495..427b3464a833c94e60b0a76d55de7dc74b936767 100644 --- a/src/Components/CollectionDowloadButton.js +++ b/src/Components/CollectionDowloadButton.js @@ -96,6 +96,7 @@ const DowloadButton = (props) => { </Alert> </Snackbar> <DownloadButton + contrast={props.contrast} variant="outlined" color="primary" startIcon={<GetAppIcon fontSize="large" />} @@ -113,6 +114,10 @@ const ButtonText = styled.span` font-size: 1.2em; ` const DownloadButton = styled(Button)` + color: ${props => props.contrast === "" ? "#3f51b5 !important" : "yellow !important"}; + background-color: ${props => props.contrast === "" ? "white !important" : "black !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; + border: ${props => props.contrast === "" ? "1px solid #3f51b5 !important" : "1px solid white !important"}; padding-left: 10; padding-right: 10; width: 250px; diff --git a/src/Components/CollectionReview.js b/src/Components/CollectionReview.js index 0d94757b2dbd235e2b3b9ef2b8077707b8a9a357..bd35d03140d24c87e0e67cedb565a2f83c5fcc51 100644 --- a/src/Components/CollectionReview.js +++ b/src/Components/CollectionReview.js @@ -107,7 +107,7 @@ export default function CollectionReview(props) { }, [props]) return ( - <Grid container direction="column"> + <Grid container direction="column" style={props.contrast === "" ? {color: "#666"} : {color: "white"}}> <SnackBarComponent snackbarOpen={snackInfo.open} handleClose={handleCloseSnack} @@ -115,31 +115,34 @@ export default function CollectionReview(props) { text={snackInfo.text} color={snackInfo.color} /> - <Grid sm={12} container direction="row" alignItems="center"> + <Grid sm={12} container direction="row" alignItems="center" + style={{justifyContent: "center"}} + > <Grid item> <Rating + style={props.contrast === "" ? {} : {color: "white"}} name="customized-empty" value={Number(stars)} readOnly onClick={props.scrollToComment} - style={{ color: "#666" }} - emptyIcon={<StarBorderIcon fontSize="inherit" />} + emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />} /> </Grid> <Grid item justify="center" alignItems="center"> - <IconButton aria-label="like" onClick={handleLikeClick}> - {likes}<FavoriteIcon style={{ fill: liked ? "red" : null }} /> + <IconButton style={{color: "inherit"}} aria-label="like" onClick={handleLikeClick}> + {likes}<FavoriteIcon style={props.contrast === "" ? {fill: liked ? "red" : null} : {fill: "yellow"}} /> </IconButton> </Grid> </Grid> <Grid item sm={12}> <IconButton aria-label="report" - style={{ fontSize: 'small' }} + style={{ fontSize: 'medium' }} onClick={handleClickReport}> - <InfoIcon />Reportar erro ou abuso + <InfoIcon style={props.contrast === "" ? {color: "#666"} : {color: "white"}}/><span style={props.contrast === "" ? {color: "#666"} : {color: "yellow", textDecoration: "underline"}}>Reportar erro ou abuso</span> </IconButton> <ReportModal + contrast={props.contrast} open={reportOpen} handleClose={handleCloseModal} form="colecao" @@ -148,11 +151,13 @@ export default function CollectionReview(props) { /> </Grid> <SignUpModal + contrast={props.contrast} open={sign_up_open} handleClose={() => setSignUpOpen(false)} openLogin={() => setLoginOpen(true)} /> <LoginModal + contrast={props.contrast} openSnackbar={handleOpenSnackSignIn} open={log_in_open} handleClose={() => setLoginOpen(false)} diff --git a/src/Components/Comment.js b/src/Components/Comment.js index b3e1df7a9b286e598a758004a5a721adce5b58ad..24abed090d952531bb8e9d3aff15dd756b81dfab 100644 --- a/src/Components/Comment.js +++ b/src/Components/Comment.js @@ -27,17 +27,34 @@ import Rating from '@material-ui/lab/Rating'; import StarBorderIcon from '@material-ui/icons/StarBorder'; import EditIcon from '@material-ui/icons/Edit'; import TextField from "@material-ui/core/TextField"; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import ModalExcluir from './ModalExcluirComentario.js' -import { putRequest, deleteRequest } from './HelperFunctions/getAxiosConfig' - +import Menu from "@material-ui/core/Menu"; +import MenuItem from "@material-ui/core/MenuItem"; +import ModalExcluir from "./ModalExcluirComentario.js"; +import { putRequest, deleteRequest } from "./HelperFunctions/getAxiosConfig"; +import { makeStyles } from "@material-ui/styles"; //Image Import import { noAvatar } from "ImportImages.js"; +const useStyles = makeStyles((theme) => ({ + darkTextField: { + maxWidth: "100%", + fontSize: "15px", + fontWeight: "lighter", + color: "white", + width: "100%", + }, + lightTextField: { + maxWidth: "100%", + fontSize: "15px", + fontWeight: "lighter", + color: "black", + width: "100%", + }, +})); + + export default function Comment(props) { - console.log(props) - /* + /* Required props: rerenderCallback = callback function to trigger re-render on parent component reviewRatings = required to update comment even though the user cannot update their rating score... @@ -52,271 +69,392 @@ export default function Comment(props) { createdAt recurso : boolean; determines whether to display orange or purple font */ - var moment = require('moment') - - const { state } = useContext(Store) - const [displayedComment, setDisplayedComment] = useState(props.description) - const [editando, setEditando] = useState(false) - const [anchorEl, setAnchorEl] = React.useState(null); - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; - const handleClose = () => { - setAnchorEl(null); - }; - const [modalOpen, toggleModal] = useState(false) - - const [comment, setComment] = useState({ - error: false, - value: props.description - }) - const handleChange = (e) => { - const userInput = e.target.value - const flag = (userInput.length === 0 ? true : false); - setComment({ ...comment, error: flag, value: userInput }) - } - - function handleOnSuccessfulComment(data) { - setDisplayedComment(comment.value) - setEditando(false) - props.handlePost() - } - - const updateComment = () => { - const finalComment = comment - let url; - - if (props.isCollection) - url = `/collections/${props.objectID}/reviews/${props.reviewID}` - else - url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}` - - if (!finalComment.error) { - - let payload = { - "review": { - "description": finalComment.value, - "review_ratings_attributes": props.reviewRatings - } - } - putRequest(url, payload, handleOnSuccessfulComment, (error) => { console.log(error) }) - - } - } - - function handleSuccessDeleteComment(data) { - props.rerenderCallback() - props.handleSnackbar(3) - } - - const deleteComment = () => { - let url; - - if (props.isCollection) - url = `/collections/${props.objectID}/reviews/${props.reviewID}` - else - url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}` - - deleteRequest(url, handleSuccessDeleteComment, (error) => { console.log(error) }) - - toggleModal(false) - + var moment = require("moment"); + const classes = useStyles(); + const { state } = useContext(Store); + const [displayedComment, setDisplayedComment] = useState(props.description); + const [editando, setEditando] = useState(false); + const [anchorEl, setAnchorEl] = React.useState(null); + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + const [modalOpen, toggleModal] = useState(false); + + const [comment, setComment] = useState({ + error: false, + value: props.description, + }); + const handleChange = (e) => { + const userInput = e.target.value; + const flag = userInput.length === 0 ? true : false; + setComment({ ...comment, error: flag, value: userInput }); + }; + + function handleOnSuccessfulComment(data) { + setDisplayedComment(comment.value); + setEditando(false); + props.handlePost(); + } + + const updateComment = () => { + const finalComment = comment; + let url; + + if (props.isCollection) + url = `/collections/${props.objectID}/reviews/${props.reviewID}`; + else url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`; + + if (!finalComment.error) { + let payload = { + review: { + description: finalComment.value, + review_ratings_attributes: props.reviewRatings, + }, + }; + putRequest(url, payload, handleOnSuccessfulComment, (error) => { + console.log(error); + }); } - if (props.authorID) - return ( - <React.Fragment> - <ModalExcluir - open={modalOpen} handleClose={() => { toggleModal(false) }} - handleConfirm={deleteComment} + }; + + function handleSuccessDeleteComment(data) { + props.rerenderCallback(); + props.handleSnackbar(3); + } + + const deleteComment = () => { + let url; + + if (props.isCollection) + url = `/collections/${props.objectID}/reviews/${props.reviewID}`; + else url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`; + + deleteRequest(url, handleSuccessDeleteComment, (error) => { + console.log(error); + }); + + toggleModal(false); + }; + if (props.authorID) + return ( + <React.Fragment> + <ModalExcluir + open={modalOpen} + handleClose={() => { + toggleModal(false); + }} + handleConfirm={deleteComment} + /> + <Grid container style={{ paddingLeft: "20px" }}> + <Grid item xs={1}> + {props.authorID && ( + <AvatarDiv> + <Link to={"/usuario-publico/" + props.authorID}> + <img + src={ + props.authorAvatar + ? apiDomain + props.authorAvatar + : noAvatar + } + alt="author avatar" + /> + </Link> + </AvatarDiv> + )} + </Grid> + + <Grid item xs={10}> + <Comentario contrast={state.contrast}> + <div className="star-rating-container"> + <Rating + name="read-only" + value={props.rating} + readOnly + size="small" + style={ + state.contrast === "" + ? { color: "#666" } + : { color: "yellow" } + } + emptyIcon={ + <StarBorderIcon + fontSize="inherit" + style={ + state.contrast === "" + ? { color: "#a5a5a5" } + : { color: "yellow" } + } + /> + } /> - <Grid container style={{ paddingLeft: "20px" }}> - - <Grid item xs={1}> - { - props.authorID && - <AvatarDiv> - <Link to={'/usuario-publico/' + props.authorID}> - <img src={props.authorAvatar ? apiDomain + props.authorAvatar : noAvatar} alt="author avatar" /> - </Link> - </AvatarDiv> + </div> + + {props.name && <strong>{props.name}</strong>} + + <div> + {editando ? ( + <React.Fragment> + <div style={{ marginTop: "5%", padding: "2px" }}> + <StyledTextField + contrast={props.contrast} + colecao={!props.recurso} + id="input-comentario" + label={"Editar Comentário"} + margin="normal" + value={comment.value} + InputProps={ + props.contrast === "" + ? { className: classes.lightTextField } + : { className: classes.darkTextField } } - </Grid> - - <Grid item xs={10}> - <Comentario> - <div className="star-rating-container"> - <Rating - name="read-only" - value={props.rating} - readOnly - size="small" - style={{ color: "#666" }} - emptyIcon={<StarBorderIcon fontSize="inherit" style={{ color: "#a5a5a5" }} />} - /> - </div> - - { - props.name && - <strong>{props.name}</strong> + variant="outlined" + multiline={true} + rows="5" + onChange={(e) => { + handleChange(e); + }} + style={{ width: "100%" }} + /> + </div> + <div style={{ float: "right" }}> + <StyledButton + contrast={state.contrast} + style={ + state.contrast === "" + ? props.recurso + ? { backgroundColor: "#ff7f00" } + : { backgroundColor: "#673ab7" } + : { + backgroundColor: "black", + border: "1px solid white", + textDecoration: "underline", } - - <div> - { - editando ? - ( - <React.Fragment> - <div style={{ marginTop: "5%", padding: "2px" }}> - <StyledTextField - colecao={!props.recurso} - id="input-comentario" - label={"Editar Comentário"} - margin="normal" - value={comment.value} - multiline={true} - rows="5" - onChange={(e) => { handleChange(e) }} - style={{ width: "100%" }} - /> - </div> - <div style={{ float: "right" }}> - <StyledButton - style={props.recurso ? { backgroundColor: "#ff7f00" } : { backgroundColor: "#673ab7" }} - onClick={() => { setEditando(false) }} - > - Fechar - </StyledButton> - <StyledButton - style={props.recurso ? { backgroundColor: "#ff7f00" } : { backgroundColor: "#673ab7" }} - onClick={() => updateComment()} - > - Salvar - </StyledButton> - </div> - </React.Fragment> - ) - : - ( - <React.Fragment> - <p> - { - props.authorID && - <Link - to={'/usuario-publico/' + props.authorID} - style={{ - fontWeight: "bolder", - color: props.recurso ? "#ff7f00" : "#673ab7" - }} - > - {props.authorName} - </Link> - } - : {displayedComment} - </p> - <span className="date"> - {moment(props.createdAt).format("DD/MM/YYYY")} - </span> - </React.Fragment> - ) - } - </div> - - </Comentario> - </Grid> - - { - props.authorID === state.currentUser.id && - <Grid item xs={1}> - <StyledDiv> - <Button onClick={handleClick}><EditIcon /></Button> - <Menu - id="simple-menu" - anchorEl={anchorEl} - keepMounted - open={Boolean(anchorEl)} - onClose={handleClose} - > - <MenuItem onClick={() => { setEditando(true); handleClose() }}>Editar</MenuItem> - <MenuItem onClick={() => { toggleModal(true); handleClose() }}>Excluir</MenuItem> - </Menu> - </StyledDiv> - </Grid> + } + onClick={() => { + setEditando(false); + }} + > + Fechar + </StyledButton> + <StyledButton + contrast={state.contrast} + style={ + state.contrast === "" + ? props.recurso + ? { backgroundColor: "#ff7f00" } + : { backgroundColor: "#673ab7" } + : { + backgroundColor: "black", + border: "1px solid white", + textDecoration: "underline", + } + } + onClick={() => updateComment()} + > + Salvar + </StyledButton> + </div> + </React.Fragment> + ) : ( + <React.Fragment> + <p> + {props.authorID && ( + <Link + to={"/usuario-publico/" + props.authorID} + style={{ + fontWeight: "bolder", + color: + state.contrast === "" + ? props.recurso + ? "#ff7f00" + : "#673ab7" + : "white", + }} + > + {props.authorName} + </Link> + )} + : {displayedComment} + </p> + <span className="date"> + {moment(props.createdAt).format("DD/MM/YYYY")} + </span> + </React.Fragment> + )} + </div> + </Comentario> + </Grid> + + {props.authorID === state.currentUser.id && ( + <Grid item xs={1}> + <StyledDiv> + <Button onClick={handleClick}> + <EditIcon + style={state.contrast === "" ? {} : { color: "white" }} + /> + </Button> + <Menu + id="simple-menu" + anchorEl={anchorEl} + keepMounted + open={Boolean(anchorEl)} + onClose={handleClose} + > + <MenuItem + style={ + state.contrast === "" + ? {} + : { + backgroundColor: "black", + color: "yellow", + textDecoration: "underline", + } } - </Grid> - </React.Fragment> - ) - else - return ( - <Grid container style={{ paddingLeft: "20px" }} justify='center' alignItems='center '> - - <Grid item xs={1}> - { - <AvatarDiv> - <img src={noAvatar} alt="author avatar" /> - </AvatarDiv> + onClick={() => { + setEditando(true); + handleClose(); + }} + > + Editar + </MenuItem> + <MenuItem + style={ + state.contrast === "" + ? {} + : { + backgroundColor: "black", + color: "yellow", + textDecoration: "underline", + } } - </Grid> - - <Grid item xs={10}> - <Comentario> - <p> - O usuário que fez esse comentário deletou a conta. - </p> - </Comentario> - </Grid> + onClick={() => { + toggleModal(true); + handleClose(); + }} + > + Excluir + </MenuItem> + </Menu> + </StyledDiv> </Grid> - ) + )} + </Grid> + </React.Fragment> + ); + else + return ( + <Grid + container + style={{ paddingLeft: "20px" }} + justify="center" + alignItems="center " + > + <Grid item xs={1}> + { + <AvatarDiv> + <img src={noAvatar} alt="author avatar" /> + </AvatarDiv> + } + </Grid> + + <Grid item xs={10}> + <Comentario contrast={state.contrast}> + <p>O usuário que fez esse comentário deletou a conta.</p> + </Comentario> + </Grid> + </Grid> + ); } const StyledTextField = styled(TextField)` - label.Mui-focused { - color : ${props => props.colecao ? "rgb(103,58,183)" : "rgb(255,127,0)"}; + .MuiInputBase-root { + margin-bottom: 5px; + } + + .MuiOutlinedInput-root { + &.Mui-focused fieldset { + border-color: ${(props) => + props.contrast === "" + ? props.colecao + ? "#673ab7" + : "rgb(255,127,0)" + : "yellow"}; } - - .MuiInput-underline::after { - border-bottom: ${props => props.colecao ? "2px solid rgb(103,58,183)" : "2px solid rgb(255,127,0)"}; + fieldset { + border-color: ${(props) => (props.contrast === "" ? "#666" : "white")}; } + } -` + label { + color: ${(props) => (props.contrast === "" ? "#666" : "white")}; + } -const StyledDiv = styled.div` - text-align : center; - .MuiButton-root { - @media screen and (max-width: 990px) { - padding-right : 35px !important; - } - } -` -const StyledButton = styled(Button)` - color : rgba(255,255,255,0.87) !important; - box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important; - margin : 6px 8px !important; - font-weight : 600 !important; -` + label.Mui-focused { + color: ${(props) => + props.contrast === "" + ? props.colecao + ? "#673ab7" + : "rgb(255,127,0)" + : "yellow"}; + } -const Comentario = styled.div` - padding-left : 55px !important; - font-size : 14px; + label.Mui-focused.Mui-error { + color: red; + } - .star-rating-container { - width : 100px; - } - - p { - margin : 0 0 10px; - padding-left : 2px - } + width: 95%; +`; - a { - text-decoration : none !important; +const StyledDiv = styled.div` + text-align: center; + .MuiButton-root { + @media screen and (max-width: 990px) { + padding-right: 35px !important; } + } +`; +const StyledButton = styled(Button)` + color: ${(props) => + props.contrast === "" + ? "rgba(255,255,255,0.87) !important" + : "yellow !important"}; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important; + margin: 6px 8px !important; + font-weight: 600 !important; + :hover { + background-color: ${(props) => + props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"}; + } +`; - .date { - color : #ababab; - font-size : 12px; - font-weight : lighter; - padding-left : 3px; - } -` +const Comentario = styled.div` + padding-left: 55px !important; + font-size: 14px; + color: ${(props) => (props.contrast === "" ? "#ababab" : "white")}; + + .star-rating-container { + width: 100px; + } + + p { + margin: 0 0 10px; + padding-left: 2px; + } + + a { + text-decoration: none !important; + } + + .date { + color: ${(props) => (props.contrast === "" ? "#ababab" : "white")}; + font-size: 12px; + font-weight: lighter; + padding-left: 3px; + } +`; const AvatarDiv = styled.div` text-align : center; @@ -334,4 +472,4 @@ const AvatarDiv = styled.div` border-radius : 100% vertical-align : middle; } -` +`; diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js index 245eecbccd12abba7a88c5d76643d9302328c0d9..ba7b9a256418b4888deb2f31ca41a4d356bc6252 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) }) } } @@ -73,38 +73,49 @@ export default function FollowButton (props) { <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> </Snackbar> {/*-------------------------------MODALS---------------------------------------*/} - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> {/*----------------------------------------------------------------------------*/} { state.currentUser.id !== '' ? ( - <StyledButton onClick={() => handleFollow(props.followerID)}> - <PersonAddIcon style={{fontSize : "24px", - display : "inline-block", - verticalAlign : "middle", - color : "#00bcd4"}}/> + <StyledButton className={`${props.contrast}LinkColor`} + style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} + onClick={() => handleFollow(props.followerID)}> + <PersonAddIcon + className={`${props.contrast}IconColor`} + style={{ + fontSize: "24px", + display: "inline-block", + verticalAlign: "middle", + }} /> SEGUIR </StyledButton> ) - : - ( - <StyledButton onClick={() => handleLogin(true)}> - <PersonAddIcon style={{fontSize : "24px", - display : "inline-block", - verticalAlign : "middle", - color : "#00bcd4"}}/> + : + ( + <StyledButton className={`${props.contrast}LinkColor `} + style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} + onClick={() => handleLogin(true)}> + <PersonAddIcon + className={`${props.contrast}IconColor`} + style={{ + fontSize: "24px", + display: "inline-block", + verticalAlign: "middle", + + }} /> 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 +132,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) }) } } @@ -140,72 +151,58 @@ export function NoIcon (props) { <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> </Snackbar> {/*-------------------------------MODALS---------------------------------------*/} - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> {/*----------------------------------------------------------------------------*/} { state.currentUser.id !== '' ? ( - <NoIconButton onClick={() => handleFollow(props.followableID)}>seguir</NoIconButton> - ) - : - ( - <NoIconButton onClick={() => handleLogin(true)}>seguir</NoIconButton> + <NoIconButton contrast={state.contrast} onClick={() => handleFollow(props.followableID)}>seguir</NoIconButton> ) + : + ( + <NoIconButton className={`${props.contrast}LinkColor`} + style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} + onClick={() => handleLogin(true)}>seguir</NoIconButton> + ) } </React.Fragment> ) } const NoIconButton = styled(Button)` + &:hover { + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"}; + } .MuiButton-label { - color : #00bcd4 !important; + color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"}; } - background-color : #fff !important; - border : solid 1px rgba(0,188,212,.85) !important; + background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"}; + border: ${props => props.contrast === "" ? "solid 1px rgba(0,188,212,.85) !important" : "solid 1px white !important"}; font-size : 14px !important; border-radius : 3px !important; height : 36px !important; min-width : 88px !important; vertical-align : middle !important; - text-color : #00bcd4 !important; align-items : center !important; text-align : center !important; padding : 0 6px !important; margin : 6px 8px !important; + color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"}; ` const StyledButton = styled(Button)` - background-color : #fff !important; - border : 1px solid #00bcd4 !important; - color : #00bcd4 !important; - font-size : 14px !important; - display : inline-block !important; - position : relative !important; - cursor : pointer !important; - height : 36px !important; - min-width : 88px !important; - line-height : 36px !important; - vertical-align : middle !important; - -webkit-box-align : center !important; - -webkit-align-items : center !important; - -ms-grid-row-align : center !important; - align-items : center !important; - text-align : center !important; - border-radius : 3px !important; - -webkit-user-select : none !important; - -moz-user-select : none !important; - -ms-user-select : none !important; - user-select : none !important; - padding : 0 6px !important; - margin : 6px 8px !important; - white-space : nowrap !important; - text-transform : uppercase !important; + font-size : 14px important; font-weight : 500 !important; - font-style : inherit !important; - font-variant : inherit !important; - font-family : inherit !important; - text-decoration : none !important; - overflow : hidden !important; + + .MuiSvgIcon-root { + font-size : 24px; + } + + &:hover { + color: rgb(107, 35, 142); + } + margin : 6px 8px !important; ` diff --git a/src/Components/ContactButtons/FollowersCountButton.js b/src/Components/ContactButtons/FollowersCountButton.js index 43dfbfb8ea0b7c21f92b0f778a8b3b05b0e87eea..f40a03370a42794245592f7f76487f5c0f2f68bc 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 className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}LinkColor`}> {FollowerButtonSpan()} </FollowersButton> ) @@ -21,7 +21,6 @@ export default function FollowersCountButton (props) { const FollowersButton = styled(Button)` right : 0 !important; text-transform : none !important; - color : #666 !important; font-size : 13px !important; font-weight : 400 !important; box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important; @@ -31,7 +30,5 @@ const FollowersButton = styled(Button)` min-height : 36px !important; vertical-align : middle !important; text-align : center !important; - border : 0 !important; border-radius : 3px !important; - background-color : rgb(250,250,250) !important; ` diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js index 87ad2cba7242c0897deccc462eff2ce1c45c8c82..fd30943f896adf3349bf3b893afa5f4c88fb8ac6 100644 --- a/src/Components/ContactButtons/FollowingButton.js +++ b/src/Components/ContactButtons/FollowingButton.js @@ -16,22 +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 GroupIcon from '@material-ui/icons/Group'; import ModalConfirmarUnfollow from '../ModalConfirmarUnfollow.js' -import {putRequest} from '../HelperFunctions/getAxiosConfig' +import { putRequest } from '../HelperFunctions/getAxiosConfig' -//Image Import -import { FollowingIcon } from "ImportImages.js"; - -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) @@ -39,53 +37,67 @@ 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} + <ModalConfirmarUnfollow contrast={props.contrast} open={modalOpen} + handleClose={() => { toggleModal(false) }} + handleConfirm={handleUnfollowPartTwo} /> <StyledButton + contrast={props.contrast} + className={`${props.contrast}LinkColor`} 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 ? + ( + [ + <StyledButton className={`${props.contrast}LinkColor`} + style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"white", backgroundColor: "#00bcd4"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} + > + DEIXAR DE SEGUIR + </StyledButton> + ] + ) + : ( + [ + <StyledButton className={`${props.contrast}LinkColor`} + style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"white", backgroundColor: "#00bcd4"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} + > + <GroupIcon + className={`${props.contrast}IconColor`} + style={{ + fontSize: "24px", + display: "inline-block", + verticalAlign: "middle", + }} />SEGUINDO + </StyledButton> + ] + ) + } </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) @@ -93,40 +105,41 @@ 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} + <ModalConfirmarUnfollow contrast={props.contrast} open={modalOpen} + handleClose={() => { toggleModal(false) }} + handleConfirm={handleUnfollowPartTwo} /> <NoIconButton + contrast={props.contrast} onMouseOver={() => toggleFollowingHover(true)} onMouseLeave={() => toggleFollowingHover(false)} 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> ) @@ -134,64 +147,38 @@ export function NoIconFollowing (props) { export const StyledButton = styled(Button)` - background-color : #00bcd4 !important; - color : #fff !important; - display : inline-block !important; - position : relative !important; - cursor : pointer !important; - min-height : 36px !important; - min-width : 88px !important; - line-height : 36px !important; - vertical-align : middle !important; - -webkit-box-align : center !important; - -webkit-align-items : center !important; - -ms-grid-row-align : center !important; - align-items : center !important; - text-align : center !important; - border-radius : 3px !important; - -webkit-user-select : none !important; - -moz-user-select : none !important; - -ms-user-select : none !important; - user-select : none !important; - border : 0 !important; - padding : 0 6px !important; - margin : 6px 8px !important; - white-space : nowrap !important; - text-transform : uppercase !important; + font-size : 14px important; font-weight : 500 !important; - font-size : 14px !important; - font-style : inherit !important; - font-variant : inherit !important; - font-family : inherit !important; - text-decoration : none !important; - overflow : hidden !important; - &:hover { - background-color : #fff !important; - color : #00bcd4 !important; - border : 1px solid #00bcd4 !important; + + .MuiSvgIcon-root { + font-size : 24px; } - img { - height : 24px; - display : inline-block; - vertical-align : middle; - color : #fff !important; + + &:hover { + color: rgb(107, 35, 142); } ` const NoIconButton = styled(Button)` + &:hover { + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"}; + } .MuiButton-label { - color : #00bcd4 !important; + color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"}; } - background-color : #fff !important; - border : solid 1px rgba(0,188,212,.85) !important; + background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"}; + border: ${props => props.contrast === "" ? "solid 1px rgba(0,188,212,.85) !important" : "solid 1px white !important"}; font-size : 14px !important; border-radius : 3px !important; height : 36px !important; min-width : 88px !important; vertical-align : middle !important; - text-color : #00bcd4 !important; align-items : center !important; text-align : center !important; padding : 0 6px !important; margin : 6px 8px !important; + + span{ + text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"}; + } ` diff --git a/src/Components/ContactCard.js b/src/Components/ContactCard.js index fa51ee8d8c488679f3428d05c662d0d59d0c1597..a854ce77a6cae3ad0ce33d0393e1fe10cf5512cf 100644 --- a/src/Components/ContactCard.js +++ b/src/Components/ContactCard.js @@ -18,6 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React, { useState } from 'react'; import Card from '@material-ui/core/Card'; +import Grid from '@material-ui/core/Grid'; import CardContent from '@material-ui/core/CardContent'; import CardMedia from '@material-ui/core/CardMedia'; import styled from 'styled-components' @@ -36,14 +37,14 @@ export default function ImgMediaCard(props) { const toggleFollowed = () => { setFollowedBoolean(!followedBoolean) } return ( <StyledCard> - <CardDiv> + <CardDiv className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}Text`}> <CardAreaDiv> {/*Top part of contat card (background image, number of followers and avatar)*/} <Header> <StyledCardMedia image={props.cover}> <div style={{ display: "flex", backgroundColor: "inherit", float: "right" }}> <Link to={props.href} style={{textDecoration : "none"}}> - <FollowersCountButton followCount={props.follow_count} /> + <FollowersCountButton contrast={props.contrast} followCount={props.follow_count} /> </Link> <Link to={props.href}> <AvatarDiv> @@ -56,52 +57,63 @@ export default function ImgMediaCard(props) { </Header> {/*Rest of the card content. Button to be rendered depends on whether the contact is followed by the user*/} - <CardContent> + <CardContent style={{height: "148px", padding: "0", bottom: "0"}}> <UserInfo> - <Link to={props.href}> + <Link to={props.href} className={`${props.contrast}LinkColor`}> <p className="p1"> {props.name} </p> </Link> - <Link to={props.href}> + <Link to={props.href} className={`${props.contrast}LinkColor`}> <span style={{ fontSize: "14px", fontWeight: "normal" }}> <b>{props.numCollections}</b> {props.numCollections !== 1 ? "Coleções" : "Coleção"} | <b>{props.numLearningObjects}</b> {props.numLearningObjects !== 1 ? "Recursos" : "Recurso"} </span> </Link> - - <div style={{ display: "flex", justifyContent: "center" }}> - { - followedBoolean ? - ( - <React.Fragment> + </UserInfo> + </CardContent> + <CardContent style={{padding: "0"}}> + <Grid container> + <Grid item xs={2}></Grid> + { + followedBoolean ? + ( + <> + <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}> <FollowingButton + contrast={props.contrast} followedID={props.followerID ? props.followerID : props.followedID} toggleFollowed={toggleFollowed} /> - + </Grid> + <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-start" }}> <Options + contrast={props.contrast} followableID={props.followerID ? props.followerID : props.followedID} followed={followedBoolean} toggleFollowed={toggleFollowed} /> - </React.Fragment> - ) - : - ( - <React.Fragment> + </Grid> + </> + ) + : + ( + <> + <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}> <FollowButton + contrast={props.contrast} followerID={props.followedID ? props.followedID : props.followerID} toggleFollowed={toggleFollowed} /> - + </Grid> + <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-start" }}> <Options + contrast={props.contrast} followableID={props.followedID ? props.followedID : props.followerID} followed={followedBoolean} toggleFollowed={toggleFollowed} /> - </React.Fragment> - ) - } - - </div> - </UserInfo> + </Grid> + </> + ) + } + </Grid> </CardContent> </CardAreaDiv> </CardDiv> @@ -125,10 +137,8 @@ export const CardAreaDiv = styled.div` margin : 0 auto; ` export const CardDiv = styled.div` - background-color : #fff; text-align : start; font-family : 'Roboto', sans serif; - color : #666; ` /*----------------------------------------------------------------------------*/ @@ -137,7 +147,7 @@ export const CardDiv = styled.div` /*Override Material UI styling -----------------------------------------------*/ const StyledCardMedia = styled(CardMedia)` height : 100%; - width : 100%; + width : 270.5px; background-size : cover; background-position : center; @@ -157,10 +167,7 @@ const StyledCard = styled(Card)` const UserInfo = styled.div` text-align : center; margin-top : 50px; - color : #666; - a { - text-decoration : none !important; color : #666; } diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js index 2cf3555c6ac3cae3da3cb7590ae2d149653391e4..5831b386698c2fcea44b612fffcaaf4e08253355 100644 --- a/src/Components/ContactCardOptions.js +++ b/src/Components/ContactCardOptions.js @@ -93,22 +93,22 @@ export default function SimpleMenu(props) { <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> </Snackbar> {/*-------------------------------MODALS---------------------------------------*/} - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> {/*----------------------------------------------------------------------------*/} <> { reportModal && - <ReportModal open={reportModal} handleClose={() => handleModal(false)} + <ReportModal contrast={props.contrast} open={reportModal} handleClose={() => handleModal(false)} form="user" complainableId={props.followableID} complainableType={"User"} {...props}/> } <div style={{fontSize: "12px", display : "flex", flexDirection : "column", justifyContent : "center"}}> - <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}> - <MoreVertIcon style={{color : "#666"}}/> + <ButtonNoWidth className={`${props.contrast}BackColor ${props.contrast}LinkColor ${props.contrast}Text`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}> + <MoreVertIcon/> </ButtonNoWidth> <Menu id="simple-menu" @@ -117,30 +117,30 @@ export default function SimpleMenu(props) { open={Boolean(anchorEl)} onClose={handleClose} > - <StyledMenuItem onClick={handleClose}> + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleClose}> <Link to={"/usuario-publico/" + props.followableID}> - <ListItemIcon><OpenIcon /></ListItemIcon>Abrir + <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir </Link> </StyledMenuItem> { props.followed ? ( - <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}> - <ListItemIcon><ReportIcon /></ListItemIcon>Deixar de Seguir + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}> + <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Deixar de Seguir </StyledMenuItem> ) : ( state.currentUser.id !== '' ? ( - <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}> - <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}> + <ListItemIcon className={`${props.contrast}IconColor`}><PersonAddIcon /></ListItemIcon>Seguir </StyledMenuItem> ) : ( - <StyledMenuItem onClick={() => {handleLogin(props.followableID)}}> - <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleLogin(props.followableID)}}> + <ListItemIcon className={`${props.contrast}IconColor`}><PersonAddIcon /></ListItemIcon>Seguir </StyledMenuItem> ) ) @@ -148,14 +148,14 @@ export default function SimpleMenu(props) { { state.currentUser.id !== '' ? ( - <StyledMenuItem onClick={() => {handleModal(true); handleClose()}}> - <ListItemIcon><ReportIcon /></ListItemIcon>Reportar + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleModal(true); handleClose()}}> + <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar </StyledMenuItem> ) : ( - <StyledMenuItem onClick={() => {handleLogin(true)}}> - <ListItemIcon><ReportIcon /></ListItemIcon>Reportar + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleLogin(true)}}> + <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar </StyledMenuItem> ) } @@ -191,12 +191,11 @@ const ButtonNoWidth = styled(Button)` ` const StyledMenuItem = styled(MenuItem)` - color : #666 !important; + background-color: ${props => props.contrast === "" ? "white" : "black"} !important; .MuiSvgIcon-root { vertical-align : middle !important; } a { - text-decoration : none !important; - color : #666 !important; + color : inherit !important; } -` +` \ No newline at end of file diff --git a/src/Components/ContactForm.js b/src/Components/ContactForm.js index 3eb206b99c272fd8fcf179c1808f778ecbcd3152..9683375f23279ccf6df7cd0d2208534e47ae9215 100644 --- a/src/Components/ContactForm.js +++ b/src/Components/ContactForm.js @@ -16,190 +16,193 @@ 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' import MuiAlert from '@material-ui/lab/Alert'; function Alert(props) { - return <MuiAlert elevation={6} variant="filled" {...props} />; + return <MuiAlert elevation={6} variant="filled" {...props} />; } const Button = styled.button` - - background-color: #00acc1; - color:#fff; - 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); - outline: none; - position: relative; - cursor: pointer; - min-height: 36px; - min-width: 88px; - line-height: 36px; - vertical-align: middle; - align-items: center; - text-align: center; - border-radius: 3px; - box-sizing: border-box; - user-select: none; - border: 0; - padding: 0 6px; - padding-right: 6px; - padding-left: 6px; - margin: 6px 8px; - - white-space: nowrap; - text-transform: uppercase; - font-weight: 500; - font-size: 14px; - font-style: inherit; - font-variant: inherit; - font-family: inherit; - text-decoration: none; - overflow: hidden; - transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1); - + 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; + padding-left: 16px; + padding-right: 16px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + outline: none; + position: relative; + cursor: pointer; + min-height: 36px; + min-width: 88px; + line-height: 36px; + vertical-align: middle; + align-items: center; + text-align: center; + border-radius: 3px; + box-sizing: border-box; + user-select: none; + border: ${props => props.contrast === "" ? 0 : "1px solid white"}; + padding: 0 6px; + padding-right: 6px; + padding-left: 6px; + margin: 6px 8px; + + white-space: nowrap; + text-transform: uppercase; + font-weight: 500; + font-size: 14px; + font-style: inherit; + font-variant: inherit; + font-family: inherit; + 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 - } +function validateNome(nome) { + let flag = false + if (nome.length === 0) { + flag = true + } - return flag - } + return flag +} - function validateMensagem (mensagem) { - let flag = false - if(mensagem.length === 0) { - flag = true - } +function validateMensagem(mensagem) { + let flag = false + if (mensagem.length === 0) { + flag = true + } - return flag - } + return flag +} - function validateEmail (email) { +function validateEmail(email) { let flag = false if (email.split("").filter(x => x === "@").length !== 1 || email.length < 7) { - flag = true + flag = true } return flag - } +} - function Formulario (props){ - const {state} = useContext(Store) +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 [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 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 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 msg = e.target.value + console.log(msg) + let flag = validateMensagem(msg) + handleMensagem({ + ...mensagem, dict: { + key: flag, + value: msg + } + }) + console.log(mensagem) } const limpaTudo = () => { - handleNome({ - dict : { - key: false, - value:"" - }} - ); - - handleEmail({ - dict : { - key: false, - value:"" - }} - ) - - handleMensagem({ - dict : { - key: false, - value:"" - }} - ) + handleNome({ + dict: { + key: false, + value: "" + } + }); + + handleEmail({ + dict: { + key: false, + value: "" + } + }) + + handleMensagem({ + dict: { + key: false, + value: "" + } + }) } const handleSignUp = () => { - setSignUp(!signUpOpen) + setSignUp(!signUpOpen) } const handleLogin = () => { - setLogin(!loginOpen) + setLogin(!loginOpen) } const toggleSnackbar = (event, reason) => { - if (reason === 'clickaway') { - return; - } + if (reason === 'clickaway') { + return; + } handleSuccessfulLogin(false); } @@ -207,89 +210,91 @@ const Button = styled.button` 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 )) + 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 )) { + if (!(nome.dict.key || email.dict.key || mensagem.dict.key)) { let payload = { - contact : { + contact: { name: nome.dict.value, email: email.dict.value, message: mensagem.dict.value } - } - postRequest(`/contacts`, payload, (data) => {limpaTudo()}, (error) => {console.log(error)}) + } + 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) }} - /> - <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> - ) - : - ( - <Button onClick={e => {e.preventDefault(); handleLogin(true);}} >ENVIAR MENSAGEM</Button> - ) - } - </div> - </form> - </React.Fragment> - - + 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 contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + openSnackbar={() => { handleSuccessfulLogin(true) }} + /> + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + {/*----------------------------------------------------------------------------*/} + <div> + <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)} + /> + <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 contrast={props.contrast} onClick={e => { e.preventDefault(); handleLogin(true); }} >ENVIAR MENSAGEM</Button> + ) + } + </div> + </form> + </div> + </React.Fragment> ); } diff --git a/src/Components/CriarColecaoForm.js b/src/Components/CriarColecaoForm.js index ea8c05070f21519b8594a13c03897d69481b2556..2aa9f41c377671c1a7f8f3afd058d42d0e485438 100644 --- a/src/Components/CriarColecaoForm.js +++ b/src/Components/CriarColecaoForm.js @@ -16,26 +16,28 @@ 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} from 'react' -import {Store} from '../Store.js' +import React, { useContext } from 'react' +import { Store } from '../Store.js' import { Button } from '@material-ui/core'; import styled from 'styled-components' import Radio from '@material-ui/core/Radio'; import RadioGroup from '@material-ui/core/RadioGroup'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControl from '@material-ui/core/FormControl'; -import TextField from '@material-ui/core/TextField'; -import {postRequest} from './HelperFunctions/getAxiosConfig' +import {StyledTextField, useStyles} from './ReportUserForm.js' +import { postRequest } from './HelperFunctions/getAxiosConfig' -export default function CriarColecaoForm (props) { - const {state} = useContext(Store) +export default function CriarColecaoForm(props) { + const { state } = useContext(Store) + + const classes = useStyles(); const [value, setValue] = React.useState(-1); /*values are set according to backend complaint id*/ const [options] = React.useState([ - {value : "pública", text :'Pública (Sua coleção estará disponível para todos)'}, - {value : "privada", text : 'Privada (Somente você poderá visualizar esta coleção)'} + { value: "pública", text: 'Pública (Sua coleção estará disponível para todos)' }, + { value: "privada", text: 'Privada (Somente você poderá visualizar esta coleção)' } ]) const handleChange = (event) => { @@ -43,8 +45,8 @@ export default function CriarColecaoForm (props) { }; const [colName, setColName] = React.useState({ - key : false, - value : "", + key: false, + value: "", }) const handleColName = (e) => { @@ -52,13 +54,14 @@ export default function CriarColecaoForm (props) { const flag = userInput.length === 0 ? true : false - setColName({...colName, - key : flag, - value : userInput + setColName({ + ...colName, + key: flag, + value: userInput }) } - function handleSuccess (data) { + function handleSuccess(data) { props.finalize(data.id) } const formSubmit = (e) => { @@ -68,51 +71,52 @@ export default function CriarColecaoForm (props) { const finalRadioValue = value === 'pública' ? 'public' : 'private' const finalColName = colName - if(!(finalColName.key)) { + if (!(finalColName.key)) { let payload = { - "collection" : { - "name" : finalColName.value, - "owner_id" : state.currentUser.id, - "owner_type" : "User", - "privacy" : finalRadioValue + "collection": { + "name": finalColName.value, + "owner_id": state.currentUser.id, + "owner_type": "User", + "privacy": finalRadioValue } } - postRequest( `/collections/`, payload, handleSuccess, (error) =>{console.log(error)}) + postRequest(`/collections/`, payload, handleSuccess, (error) => { console.log(error) }) } } return ( - <form onSubmit={(e) => {formSubmit(e)}} style={{textAlign : "left"}}> + <form onSubmit={(e) => { formSubmit(e) }} style={{ textAlign: "left" }}> <StyledTextField - id = {"col-name"} + id={"col-name"} label={"Nome da coleção"} - type = {"text"} - value = {colName.value} - onChange = {e => handleColName(e)} - error = {colName.key} - - helperText = {colName.key ? <span>O nome é importante para identificar a sua coleção na plataforma.<br/>Ex: Matemática Ensino Médio </span> : ""} - required = {true} - style={{width:"100%"}} + type={"text"} + value={colName.value} + onChange={e => handleColName(e)} + error={colName.key} + InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }} + contrast={state.contrast} + helperText={colName.key ? <span>O nome é importante para identificar a sua coleção na plataforma.<br />Ex: Matemática Ensino Médio </span> : ""} + required={true} + style={{ width: "100%" }} /> - <span style={{fontSize : "12px", color : "#b3b3b3"}}>Esta coleção é:</span> + <span style={{ fontSize: "12px" }}>Esta coleção é:</span> - <StyledFormControl component="fieldset"> + <StyledFormControl contrast={state.contrast} component="fieldset"> <RadioGroup value={value} onChange={handleChange}> { options.map(option => - <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7"/>} label={option.text} /> + <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7" />} label={option.text} /> ) } </RadioGroup> </StyledFormControl> <ButtonsDiv> - <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar> - <ButtonEnviar type="submit">CRIAR COLEÇÃO</ButtonEnviar> + <ButtonCancelar contrast={state.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar> + <ButtonEnviar contrast={state.contrast} type="submit">CRIAR COLEÇÃO</ButtonEnviar> </ButtonsDiv> </form> ); @@ -134,15 +138,15 @@ export const ButtonCancelar = styled(Button)` padding-right : 16px !important; font-weight : 500 !important; border-radius : 3px !important; - color :#666 !important; + color: ${props => props.contrast === "" ? "#666 !important" : "white !important"}; background-color: transparent; min-width : 88px !important; height : 36px !important; ` export const ButtonEnviar = styled(Button)` - background-color : #673ab7 !important; - color : #fff !important; + background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"}; + color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"}; font-size: 14px !important; font-weight: 500 !important; height: 36px !important; @@ -154,41 +158,27 @@ export const ButtonEnviar = styled(Button)` min-width : 88px !important; vertical-align : middle !important; margin : 6px 8px !important; - text-decoration : none !important; - + text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"}; + border: ${props => props.contrast === "" ? "" : "1px solid white !important"}; + :hover{ + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"}; + } .MuiButton-label { padding-right : 16px; padding-left : 16px; } ` -export const StyledTextField = styled(TextField)` - margin : 18px 0 !important; - .MuiFormHelperText-root { - text-align : right; - } - - label.Mui-focused { - color : #673ab7; - } - - label.Mui-focused.Mui-error { - color : red; - } - - .MuiInput-underline::after { - border-bottom: 2px solid #673ab7; - } -` export const StyledFormControl = styled(FormControl)` display : block !important; .MuiFormControlLabel-root { - color : #666; + color: ${props => props.contrast === "" ? "#666" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } .MuiIconButton-label { - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; } .PrivateRadioButtonIcon-checked { color : orange; diff --git a/src/Components/CriarColecaoModal.js b/src/Components/CriarColecaoModal.js index 73e7384fc040f415e947113c26b9ff56544f3d7f..ee7a10c1f80e89b3617ccd7909bbe1928e7bf5a5 100644 --- a/src/Components/CriarColecaoModal.js +++ b/src/Components/CriarColecaoModal.js @@ -25,22 +25,21 @@ import styled from 'styled-components' import CriarColecaoForm from './CriarColecaoForm.js' import CloseIcon from '@material-ui/icons/Close'; -function CloseModalButton (props) { +function CloseModalButton(props) { return ( <StyledCloseModalButton onClick={props.handleClose}> - <CloseIcon/> + <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} /> </StyledCloseModalButton> ) } -export default function CriarColecaoModal (props) { +export default function CriarColecaoModal(props) { return ( <StyledModal aria-labelledby="transition-modal-title" aria-describedby="transition-modal-description" open={props.open} - centered="true" onClose={props.handleClose} closeAfterTransition @@ -50,14 +49,14 @@ export default function CriarColecaoModal (props) { }} > <Fade in={props.open}> - <Container> - <Header> - <span style={{width:"32px"}}/> + <Container contrast={props.contrast}> + <Header contrast={props.contrast}> + <span style={{ width: "32px" }} /> <h2>Criar Coleção</h2> - <CloseModalButton handleClose={props.handleClose}/> + <CloseModalButton handleClose={props.handleClose} contrast={props.contrast} /> </Header> - <Content style={{paddingTop : "0"}}> - <CriarColecaoForm handleClose={props.handleClose} finalize={props.handleClose}/> + <Content style={{ paddingTop: "0" }}> + <CriarColecaoForm handleClose={props.handleClose} finalize={props.handleClose} /> </Content> </Container> </Fade> @@ -82,14 +81,13 @@ const Header = styled.div` h2 { font-size : 26px; font-weight : lighter; - color : #666 + color: ${props => props.contrast === "" ? "#666" : "white"}; } ` const StyledCloseModalButton = styled(Button)` display : inline-block; position : relative; - float : right !important; margin-right : -8px !important; background : transparent !important; min-width: 0 !important; @@ -112,8 +110,8 @@ const StyledModal = styled(Modal)` const Container = styled.div` box-sizing : border-box; box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12); - background-color : white; - align : center; + background-color: ${props => props.contrast === "" ? "white" : "black"}; + align-items : center; display : flex; flex-direction : column; min-width : 240px; diff --git a/src/Components/Dropdown.js b/src/Components/Dropdown.js index cc064489e05b8550c0b787fc7b15a13fa156a758..19f58a73a16e1312be12cc6432abdca6bdfa2549 100644 --- a/src/Components/Dropdown.js +++ b/src/Components/Dropdown.js @@ -73,10 +73,10 @@ export default function PositionedPopper(props) { {({ TransitionProps }) => ( <Fade {...TransitionProps} timeout={350}> <Paper> - <MenuList> + <MenuList className={`${state.contrast}BackColor`}> { props.items.map((item) => - <Link onClick={handleItemClicked} style={{ textDecoration: "none", color: "black" }} key={`${item.name}_${new Date().toString()}`} to={item.href} ><MenuItem>{item.name}</MenuItem></Link> + <Link onClick={handleItemClicked} className={`${state.contrast}LinkColor`} style={{ textDecoration: "none", color: "black" }} key={`${item.name}_${new Date().toString()}`} to={item.href} ><MenuItem>{item.name}</MenuItem></Link> ) } </MenuList> @@ -85,13 +85,14 @@ export default function PositionedPopper(props) { )} </Popper> <Button - style={{ textTransform: "none", fontSize: "14px" }} + className={`${state.contrast}LinkColor`} + style={{ textTransform: "none" }} aria-controls="menu-list-grow" aria-haspopup="true" onClick={handleClick('bottom')} > {props.name} - <ExpandMoreIcon /> + <ExpandMoreIcon className={`${state.contrast}IconColor`}/> </Button> </div> ); diff --git a/src/Components/EcFooter.js b/src/Components/EcFooter.js index 2b23f622c8514df9d387e9818d03128fc0c3f180..f0abfb6ed154f360c801fe3e61a5679bb29fe4e6 100644 --- a/src/Components/EcFooter.js +++ b/src/Components/EcFooter.js @@ -25,8 +25,10 @@ import { HashLink as Link } from 'react-router-hash-link'; import { eduConectada } from "ImportImages.js"; const BlueFooter = styled.div` - background-color : #00bcd4; - color : white; + border-top: ${props => props.contrast === '' ? "none" : "1px solid white"}; + border-bottom: ${props => props.contrast === '' ? "none" : "1px solid white"}; + background-color: ${props => props.contrast === '' ? "#00bcd4" : "black"}; + color: white; display : block; padding-top : 2em; @media screen and (min-width : 502px) { @@ -42,33 +44,33 @@ const listStyle = { lineHeight: "1.6", } const WhiteLink = styled(Link)` - text-decoration: none; - color: white; + text-decoration: ${props => props.contrast === '' ? "none" : "underline"};; + color: ${props => props.contrast === '' ? "white" : "yellow"}; ` class EcFooter extends Component { render() { return ( - <BlueFooter> + <BlueFooter contrast={this.props.contrast}> <Container> <Row> <Col md={4} sm={6} xs={6} style={window.innerWidth < 502 && { textAlign: "center" }}> <h4>Sobre</h4> <ul style={listStyle}> - <li> <WhiteLink to="/sobre">Sobre a Plataforma</WhiteLink> </li> - <li> <WhiteLink to="/sobre#portaisparceiros">Portais Parceiros</WhiteLink> </li> - <li> <WhiteLink to="/termos">Termos de Uso</WhiteLink> </li> - <li> <WhiteLink to="/contato">Contato</WhiteLink> </li> + <li> <WhiteLink contrast={this.props.contrast} to="/sobre">Sobre a Plataforma</WhiteLink> </li> + <li> <WhiteLink contrast={this.props.contrast} to="/sobre#portaisparceiros">Portais Parceiros</WhiteLink> </li> + <li> <WhiteLink contrast={this.props.contrast} to="/termos">Termos de Uso</WhiteLink> </li> + <li> <WhiteLink contrast={this.props.contrast} to="/contato">Contato</WhiteLink> </li> </ul> </Col> <Col md={4} sm={6} xs={6} style={window.innerWidth < 502 && { textAlign: "center" }}> <h4>Ajuda</h4> <ul style={listStyle}> - <li> <WhiteLink to="/ajuda">Central de Ajuda</WhiteLink> </li> - <li> <WhiteLink to="/publicando-recurso">Publicando Recursos</WhiteLink> </li> - <li> <WhiteLink to="/encontrando-recurso">Encontrando Recursos</WhiteLink> </li> - <li> <WhiteLink to="/participando-da-rede">Participando da Rede</WhiteLink> </li> - <li> <WhiteLink to="/gerenciando-conta">Gerenciando a Conta</WhiteLink> </li> + <li> <WhiteLink contrast={this.props.contrast} to="/ajuda">Central de Ajuda</WhiteLink> </li> + <li> <WhiteLink contrast={this.props.contrast} to="/publicando-recurso">Publicando Recursos</WhiteLink> </li> + <li> <WhiteLink contrast={this.props.contrast} to="/encontrando-recurso">Encontrando Recursos</WhiteLink> </li> + <li> <WhiteLink contrast={this.props.contrast} to="/participando-da-rede">Participando da Rede</WhiteLink> </li> + <li> <WhiteLink contrast={this.props.contrast} to="/gerenciando-conta">Gerenciando a Conta</WhiteLink> </li> </ul> </Col> <Col md={4} sm={12} xs={12} style={window.innerWidth < 502 && { textAlign: "center" }}> diff --git a/src/Components/EditarColecaoForm.js b/src/Components/EditarColecaoForm.js index f0ea1fdc47f91ce1c68b2a70d2684ad0443707ee..37d8b3f34628f1af2d54ad522eff1d89b4444e2e 100644 --- a/src/Components/EditarColecaoForm.js +++ b/src/Components/EditarColecaoForm.js @@ -24,12 +24,14 @@ import Radio from '@material-ui/core/Radio'; import RadioGroup from '@material-ui/core/RadioGroup'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControl from '@material-ui/core/FormControl'; -import TextField from '@material-ui/core/TextField'; +import {StyledTextField, useStyles} from './ReportUserForm.js' import {getRequest, putRequest} from './HelperFunctions/getAxiosConfig' export default function EditarColecaoForm (props) { const {state} = useContext(Store) + const classes = useStyles(); + function handleSuccessfulGet (data) { setColName({key : false, value : data.name}) setValue( data.privacy === 'public' ? 'pública' : 'privada') @@ -99,33 +101,37 @@ export default function EditarColecaoForm (props) { <form onSubmit={(e) => {formSubmit(e)}} style={{textAlign : "left"}}> <StyledTextField + contrast={props.contrast} id = {"col-name"} label={"Nome"} type = {"text"} value = {colName.value} onChange = {e => handleColName(e)} error = {colName.key} + InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }} required = {true} style={{width:"100%"}} /> <StyledTextField + contrast={props.contrast} id = {"col-description"} label={"Descrição"} type = {"text"} value = {colDescription} multiline + InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }} rows={5} onChange = {e => setColDescription(e)} style={{width:"100%"}} /> - <span style={{fontSize : "12px", color : "#b3b3b3"}}>Esta coleção é:</span> - <StyledFormControl component="fieldset"> + <span style={{fontSize : "12px"}}>Esta coleção é:</span> + <StyledFormControl contrast={props.contrast} component="fieldset"> <RadioGroup value={value} onChange={handleChange}> { options.map(option => - <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7"/>} label={option.text} /> + <FormControlLabel key={option.value} value={option.value} control={<Radio/>} label={option.text} /> ) } </RadioGroup> @@ -133,8 +139,8 @@ export default function EditarColecaoForm (props) { <ButtonsDiv> - <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar> - <ButtonEnviar type="submit">SALVAR</ButtonEnviar> + <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar> + <ButtonEnviar contrast={props.contrast} type="submit">SALVAR</ButtonEnviar> </ButtonsDiv> </form> ); @@ -148,23 +154,23 @@ export const ButtonsDiv = styled.div` ` export const ButtonCancelar = styled(Button)` - &:hover { - background-color : rgba(158,158,158,0.2) !important; - } + color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; height : 36px !important; padding-left : 16px !important; padding-right : 16px !important; font-weight : 500 !important; border-radius : 3px !important; - color :#666 !important; background-color: transparent; min-width : 88px !important; height : 36px !important; ` export const ButtonEnviar = styled(Button)` - background-color : #673ab7 !important; - color : #fff !important; + color: ${props => props.contrast === "" ? "white !important" : "yellow !important"}; + background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; + border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"}; font-size: 14px !important; font-weight: 500 !important; height: 36px !important; @@ -176,42 +182,23 @@ export const ButtonEnviar = styled(Button)` min-width : 88px !important; vertical-align : middle !important; margin : 6px 8px !important; - text-decoration : none !important; .MuiButton-label { padding-right : 16px; padding-left : 16px; } ` -export const StyledTextField = styled(TextField)` - margin : 18px 0 !important; - - .MuiFormHelperText-root { - text-align : right; - } - - label.Mui-focused { - color : #673ab7; - } - - label.Mui-focused.Mui-error { - color : red; - } - - .MuiInput-underline::after { - border-bottom: 2px solid #673ab7; - } -` export const StyledFormControl = styled(FormControl)` - display : block !important; - .MuiFormControlLabel-root { - color : #666; + color: ${props => props.contrast === "" ? "#666" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } .MuiIconButton-label { - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; } + display : block !important; + .PrivateRadioButtonIcon-checked { color : orange; } diff --git a/src/Components/ExpandedMaterials.js b/src/Components/ExpandedMaterials.js index 603ec4ed4f8053d3c72d8ed36527fec9cb221bc9..767f0a0fccbf7889e09625d25e6575175b0a9a3e 100644 --- a/src/Components/ExpandedMaterials.js +++ b/src/Components/ExpandedMaterials.js @@ -24,7 +24,7 @@ const ExpandedMaterial = (props) => { const classes = useStyles(); return ( - <Paper elevation={3} style={{ backgroundColor: "#444444", padding: "20px" }}> + <Paper className={`${props.contrast}Border`} elevation={3} style={props.contrast === "" ? { backgroundColor: "#444444", padding: "20px" } : { backgroundColor: "black", padding: "20px" }}> <Grid container direction="row" spacing={2}> <Grid item direction="column" xs={12} md={4}> <Grid item> @@ -40,7 +40,7 @@ const ExpandedMaterial = (props) => { { material.tags.map((tag, index) => { return ( - <Chip color="default" label={tag.name} key={index} style={{ padding: "0.5px" }} /> + <Chip className={`${props.contrast}Text ${props.contrast}BackColor`} label={tag.name} key={index} style={props.contrast === "" ? { padding: "0.5px" } : {border: "1px solid white"}} /> ) }) } @@ -55,7 +55,7 @@ const ExpandedMaterial = (props) => { </DevelopedByDiv> <SizedHeightBox3 /> <StyledLink to={`/colecao?colecao=${material.id}`}> - <Button variant="contained" color="secondary"> + <Button className={`${props.contrast}LinkColor ContrastText`} variant="contained" style={props.contrast === "" ? { background: "#e8224f" } : { background: "black" }}> Ver todos </Button> </StyledLink> @@ -73,18 +73,21 @@ const ExpandedMaterial = (props) => { <Grid container direction="row" justify="center" alignItems="center" spacing={3}> <Grid item md={4}> <TopicCard + contrast={props.contrast} topic={material.topics[0]} colecao_id={material.id} /> </Grid> <Grid item md={4}> <TopicCard + contrast={props.contrast} topic={material.topics[1]} colecao_id={material.id} /> </Grid> <Grid item md={4}> <TopicCard + contrast={props.contrast} topic={material.topics[2]} colecao_id={material.id} /> 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..72dd44f196698f089f0039f3fac6eae7ceb37bff 100644 --- a/src/Components/Firulas.js +++ b/src/Components/Firulas.js @@ -1,38 +1,84 @@ -import React, {useState} from 'react' +import React, { useState, useContext } from 'react'; +import { Store } from '../Store' import styled from 'styled-components' import Rating from '@material-ui/lab/Rating'; import StarBorderIcon from '@material-ui/icons/StarBorder'; -import {LikeCounter, ButtonNoWidth} from '../Components/ResourceCardFunction.js' +import { LikeCounter, ButtonNoWidth } from '../Components/ResourceCardFunction.js' import FavoriteIcon from '@material-ui/icons/Favorite'; -import {putRequest} from './HelperFunctions/getAxiosConfig' +import { putRequest } from './HelperFunctions/getAxiosConfig' +import SignUpModal from './SignUpModal' +import LoginModal from './LoginModal.js' +import Snackbar from '@material-ui/core/Snackbar'; +import MuiAlert from '@material-ui/lab/Alert'; -export default function Firulas (props) { - const [liked, setLiked] = useState(props.liked) +export default function Firulas(props) { + const { state } = useContext(Store); + const [liked, toggleLiked] = useState(props.liked) + const [likesCount, setLikesCount] = useState(props.likesCount) - function handleSuccess (data) { - setLiked(!liked) + const [signUpOpen, setSignUp] = useState(false) + const [loginOpen, setLogin] = useState(false) + const [successfulLoginOpen, handleSuccessfulLogin] = useState(false) + + function Alert(props) { + return <MuiAlert elevation={6} variant="filled" {...props} />; + } + + function handleSuccessLike(data) { + toggleLiked(!liked) + setLikesCount(data.count) } + const handleLike = () => { - putRequest(`/learning_objects/${props.recursoId}/like/`, {}, handleSuccess, (error) => {console.log(error)}) + if (!state.currentUser.id) { + handleLogin() + } + else { + const url = `/learning_objects/${props.recursoId}/like/` + + putRequest(url, {}, handleSuccessLike, (error) => { console.log(error) }) + } + } + + const handleLogin = () => { + setLogin(!loginOpen) + } + + const handleSignUp = () => { + setSignUp(!signUpOpen) + } + + function toggleLoginSnackbar(reason) { + if (reason === 'clickaway') { + return; + } + handleSuccessfulLogin(false); } return ( - <ConteinerFirulas> + <ConteinerFirulas style={props.contrast === "" ? {} : {color: "white"}}> + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} + /> + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + openSnackbar={() => { handleSuccessfulLogin(true) }} + /> + <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar} + anchorOrigin={{ vertical: 'top', horizontal: 'center' }} + > + <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> + </Snackbar> <Rating - name="customized-empty" - value={props.rating*10} - precision={0.5} - readOnly - style={{color:"#666", marginRight : "20px"}} - emptyIcon={<StarBorderIcon fontSize="inherit" />} + className={`${props.contrast}IconColor`} + name="customized-empty" + value={props.rating} + readOnly + emptyIcon={<StarBorderIcon className={`${props.contrast}IconColor`} fontSize="inherit"/>} /> - <LikeCounter style={{marginLeft : "-3px", display : "flex", alignItems : "center"}}> - <span>{props.likesCount}</span> - + <LikeCounter> + <span>{likesCount}</span> <ButtonNoWidth onClick={handleLike}> - <FavoriteIcon style={{color : liked ? "red" : "#666" }}/> + <FavoriteIcon className={`${props.contrast}LinkColor`} style={ props.contrast === "" ? {color: liked ? "red" : "#666"} : {color: liked ? "red" : "white"} } /> </ButtonNoWidth> - </LikeCounter> </ConteinerFirulas> ) diff --git a/src/Components/FollowCollectionButton.js b/src/Components/FollowCollectionButton.js index e89f8901c0e586124c99df453dc70ac627027f63..dd85205b87de4f0a58bdd833c877aa95fba5ebda 100644 --- a/src/Components/FollowCollectionButton.js +++ b/src/Components/FollowCollectionButton.js @@ -188,8 +188,8 @@ export default function FollowCollectionButton(props) { color={snackInfo.color} /> <FollowButton + contrast={props.contrast} variant={variant} - color="primary" startIcon={icon} size="small" onMouseEnter={handleMouseEnter} @@ -199,11 +199,13 @@ export default function FollowCollectionButton(props) { <ButtonText>{button_text}</ButtonText> </FollowButton> <SignUpModal + contrast={props.contrast} open={sign_up_open} handleClose={() => setSignUpOpen(false)} openLogin={handleOpenLogin} /> <LoginModal + contrast={props.contrast} openSnackbar={handleOpenSnackSignIn} open={open_login} handleClose={() => setOpenLogin(false)} @@ -219,6 +221,10 @@ const ButtonText = styled.span` font-size: 1.2em; ` const FollowButton = styled(Button)` + color: ${props => props.contrast === "" ? "white !important" : "yellow !important"}; + background-color: ${props => props.contrast === "" ? "#3f51b5 !important" : "black !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; + border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"}; padding-left: 10; padding-right: 10; width: 250px; diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js index 813877ed5261daf1e1723771ab71b77b07d0696d..c8c1e77b2697ece08c5a2e478afdaa5394b89956 100644 --- a/src/Components/FormInput.js +++ b/src/Components/FormInput.js @@ -25,60 +25,82 @@ const StyledTextField = styled(TextField)` max-width: 100%; font-size : 15px; font-weight : lighter; - color : inherit; + color : white; width : 100% !important; - full-width : 100% !important; + width : 100% !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 : #00bcd4; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; } label.Mui-focused.Mui-error { color : red; } - .MuiInput-underline::after { - border-bottom: 2px solid #00bcd4; + .MuiFormHelperText-root { + text-align : left; + color: ${props => props.contrast === "" ? "#666" : "white"}; } ` const useStyles = makeStyles(theme => ({ - container: { - display: "flex", - flexWrap: "wrap", - padding: "2px" - }, - textField: { - maxWidth: "100%", - fontSize: "15px", - fontWeight: "lighter", - color: "inherit", - width: "100%" - } + container: { + display: "flex", + flexWrap: "wrap", + padding: "2px" + }, + darkTextField: { + maxWidth: "100%", + fontSize: "15px", + fontWeight: "lighter", + color: "white", + width: "100%" + }, + lightTextField: { + maxWidth: "100%", + fontSize: "15px", + fontWeight: "lighter", + color: "black", + width: "100%" + } })); export default function FormInput(props) { - const classes = useStyles(); - - return ( + const classes = useStyles(); + return ( <StyledTextField - label={props.placeholder} - margin="normal" - id = {props.name} - name = {props.name} - type = {props.inputType} - value = {props.value} - onChange = {props.handleChange} - rows = {props.rows} - error = {props.error} - rowsMax = {props.rowsMax} - InputProps={{className: classes.input}} - required = {props.required} - helperText ={props.help} - style={{width:"100%"}} - mask={props.mask} - multiline={props.multi} + contrast={props.contrast} + label={props.placeholder} + margin="normal" + id={props.name} + name={props.name} + type={props.inputType} + value={props.value} + onChange={props.handleChange} + variant="outlined" + rows={props.rows} + error={props.error} + rowsMax={props.rowsMax} + InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }} + required={props.required} + helperText={props.help} + style={{ width: "100%" }} + mask={props.mask} + multiline={props.multi} /> - ); + ); } diff --git a/src/Components/FormationMaterialDescription.js b/src/Components/FormationMaterialDescription.js index dc984d1f8286f8f8e7237e8344c33a92ac1c0d5a..8086eb4e61bd894617dd527c7d7adc98700ed9fa 100644 --- a/src/Components/FormationMaterialDescription.js +++ b/src/Components/FormationMaterialDescription.js @@ -25,31 +25,32 @@ export default function FormationMaterialDescription(props) { const topico_obj = props.topico_obj; return ( - <WrappingCard> + <WrappingCard contrast={props.contrast}> <Grid container + style={props.contrast === "" ? {} : {backgroundColor: "black"}} direction="row" justify="flex-start" alignItems="center" > <Grid item xs={12} md={8}> - <TextContainer> - <Title> + <TextContainer contrast={props.contrast}> + <Title contrast={props.contrast}> {colecao ? "Sobre o Material" : "Resumo do " + props.colecao_obj.topic_name.slice(0, -1) } </Title> - <Description> + <Description contrast={props.contrast}> {colecao ? colecao_obj.description : topico_obj.description } </Description> {colecao ? - <SubTitle>Histórico do Curso</SubTitle> - : <Strong>Autoria (autores):</Strong> + <SubTitle contrast={props.contrast}>Histórico do Curso</SubTitle> + : <Strong contrast={props.contrast}>Autoria (autores):</Strong> } - <Description> + <Description contrast={props.contrast}> {colecao ? colecao_obj.historic : topico_obj.author @@ -58,17 +59,17 @@ export default function FormationMaterialDescription(props) { </TextContainer> </Grid> <Grid item xs={12} md={3}> - <IconList> - <IconItem> + <IconList contrast={props.contrast}> + <IconItem contrast={props.contrast}> <LibraryBooksIcon /> - <Strong>Tipo de recurso: </Strong> + <Strong contrast={props.contrast}>Tipo de recurso: </Strong> Material de Formação <br /> </IconItem> - <IconItem> + <IconItem contrast={props.contrast}> <MoveToInboxIcon /> - <Strong>Ano de publicação: </Strong> + <Strong contrast={props.contrast}>Ano de publicação: </Strong> {colecao ? colecao_obj.created_at.split('-')[0] : topico_obj.created_at.split('-')[0] @@ -85,17 +86,17 @@ export default function FormationMaterialDescription(props) { topico_obj.language[i].name : '') return ( - <IconItem> + <IconItem contrast={props.contrast}> <TranslateIcon /> - <Strong>Idioma: </Strong> + <Strong contrast={props.contrast}>Idioma: </Strong> {content} <br /> </IconItem> ); })} - <IconItem> - <Strong>{colecao ? "Criado" : "Enviado"} por:</Strong> + <IconItem contrast={props.contrast}> + <Strong contrast={props.contrast}>{colecao ? "Criado" : "Enviado"} por:</Strong> <br /> <StyledAnchor href={colecao_obj.developedurl}> { @@ -118,12 +119,14 @@ export default function FormationMaterialDescription(props) { const Title = styled.h1` font-weight: 100; - color: rgb(102, 102, 102); + color: ${props => props.contrast === "" ? "#666" : "white"}; + ` const SubTitle = styled.h3` font-weight: 900; padding-top: 10px; - color: rgb(102, 102, 102); + color: ${props => props.contrast === "" ? "#666" : "white"}; + ` const UserIcon = styled.img` width: 50px; @@ -136,9 +139,10 @@ const LongUserIcon = styled.img` margin: 10px; ` const Description = styled.p` - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; ` const TextContainer = styled.div` + background: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; margin: 15px; height: 100%; @media screen and (max-width: 768px) { @@ -159,12 +163,14 @@ const TextContainer = styled.div` padding : 0 15px 0 0 } ` - -const WrappingCard = styled(Card)` +export const WrappingCard = styled(Card)` + background: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; + border: ${props => props.contrast === "" ? "none" : "1px solid white"}; border-radius: 0; margin-right : auto; margin-left : auto; margin-bottom: 30px; + margin-top: 30px; @media screen and (max-width: 768px) { width : 100% !important; @@ -176,18 +182,21 @@ const WrappingCard = styled(Card)` width : 970px !important; } ` + const IconList = styled.div` margin: 15px; + background: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; ` const IconItem = styled.span` width: 100%; display: inline-block; margin-bottom: 15px; font-size : 14px; + color: ${props => props.contrast === "" ? "#666" : "white"}; .MuiSvgIcon-root { vertical-align : middle - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; } img { @@ -197,10 +206,11 @@ const IconItem = styled.span` ` const Strong = styled.span` font-weight: bold; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; ` const Red = styled.span` - color: #e81f4f; + color: ${props => props.contrast === "" ? "#e81f4f" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; ` const StyledAnchor = styled.a` text-decoration: none !important; diff --git a/src/Components/FormationMaterialHeader.js b/src/Components/FormationMaterialHeader.js index 0c49772337828e81ec2ccfb9b045d3cb4f7ef2b9..af2417ff6835208ee354dc70f514e34c51205d3b 100644 --- a/src/Components/FormationMaterialHeader.js +++ b/src/Components/FormationMaterialHeader.js @@ -38,13 +38,13 @@ export default function FormationMaterialHeader(props) { } const getThumb = () => { - return colecao ? + return colecao ? require(`../../public/${colecao_obj.img}`) : require(`../../public/${topico_obj.img}`) } return ( - <WrappingCard> + <WrappingCard contrast={props.contrast}> <Grid container direction="row" justify="flex-start" @@ -57,38 +57,42 @@ export default function FormationMaterialHeader(props) { direction="column" justify="flex-start" alignItems="stretch" - style={{ padding: "8px 10px" }} + style={props.contrast === "" ? { padding: "8px 10px" } : { backgroundColor: "black" }} > <Grid item> - <Title>{get_title()}</Title> + <Title contrast={props.contrast}>{get_title()}</Title> </Grid> <Grid item> - <SubTitle> + <SubTitle contrast={props.contrast}> {colecao ? get_subtitle() - : <StyledLink to={'/colecao?id=' + colecao_obj.id}>{get_subtitle()}</StyledLink>} + : <StyledLink contrast={props.contrast} to={'/colecao?id=' + colecao_obj.id}>{get_subtitle()}</StyledLink>} </SubTitle> </Grid> <Grid item> <ChipsDiv className={classes.root}> {colecao_obj.tags.map((t, index) => { - return (<Chip color="default" label={t.name} key={index} style={{ padding: "0.5px" }} />); + return (<Chip color="default" label={t.name} key={index} style={props.contrast === "" ? { padding: "0.5px" } : { border: "1px solid white", padding: "0.5px", backgroundColor: "black", color: "white" }} />); })} </ChipsDiv> </Grid> <Grid item> {colecao ? - <Button - variant="contained" - color="secondary" - style={{ marginLeft: '15px' }} - onClick={props.handleClick} - > - {props.colecao ? "Ver todos os módulos" : "Iniciar leitura"} - </Button> + <StyledLink contrast={props.contrast}> + <Button + className="button" + variant="contained" + color="secondary" + style={{ marginLeft: '15px' }} + onClick={props.handleClick} + > + {props.colecao ? "Ver todos os módulos" : "Iniciar leitura"} + </Button> + </StyledLink> : - <StyledLink to={'/iframe-colecao?colecao=' + colecao_obj.id + '&topico=' + topico_obj.id}> + <StyledLink contrast={props.contrast} to={'/iframe-colecao?colecao=' + colecao_obj.id + '&topico=' + topico_obj.id}> <Button + className="button" variant="contained" color="secondary" style={{ marginLeft: '15px', marginTop: '10px' }} @@ -119,15 +123,18 @@ const Img = styled.img` const Title = styled.h2` font-weight: 100; margin: 15px; - color: rgb(102, 102, 102); + color: ${props => props.contrast === "" ? "rgb(102, 102, 102)" : "white"}; + ` const SubTitle = styled.h4` font-weight: 50; margin: 15px;; margin-top: 0; - color: rgb(102, 102, 102); + color: ${props => props.contrast === "" ? "rgb(102, 102, 102)" : "white"}; ` export const WrappingCard = styled(Card)` + background: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; + border: ${props => props.contrast === "" ? "none" : "1px solid white"}; border-radius: 0; margin-right : auto; margin-left : auto; @@ -146,6 +153,15 @@ export const WrappingCard = styled(Card)` ` const StyledLink = styled(Link)` - text-decoration: none !important; - color: #e81f4f !important; + color: ${props => props.contrast === "" ? "#e81f4f !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"}; + + .button{ + background-color: ${props => props.contrast === "" ? "" : "black "}; + color: ${props => props.contrast === "" ? "white" : "yellow"}; + border: ${props => props.contrast === "" ? "0" : "1px solid white"}; + :hover{ + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"}; + } + } ` diff --git a/src/Components/Funcionalities.js b/src/Components/Funcionalities.js index 5a1750b99f1915ed3ca133bfa51038daa6e164f9..eeaa81c9f065b6f8ff4ad417f87e28310ae269bd 100644 --- a/src/Components/Funcionalities.js +++ b/src/Components/Funcionalities.js @@ -16,8 +16,8 @@ GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/ -import React, {Component} from 'react'; -import {Row, Col, Container} from 'react-grid-system'; +import React, { useContext } from 'react'; +import { Row, Col, Container } from 'react-grid-system'; //Image Import import { acessar } from "ImportImages.js"; @@ -26,100 +26,103 @@ import { compartilhar } from "ImportImages.js"; import { relatar } from "ImportImages.js"; import { seguir } from "ImportImages.js"; import { guardar } from "ImportImages.js"; +import { Store } from '../Store'; -const imgRow={ +const imgRow = { textAlign: "center", padding: "1%", fontFamily: "Roboto, sans-serif" }; -const title={ +const title = { display: "block", fontSize: "1.1em", fontWeight: "Bold", fontFamily: "Roboto, sans-serif", - textAlign: "center" + textAlign: "center" }; -const caption={ +const caption = { fontSize: "1.07em", fontWeight: "lighter", }; -class Funcionalities extends Component{ - render(){ - return( - <Container style={{textAlign: "center", paddingBottom : "20px", color : "#666"}}> - <h2>Aqui na Plataforma você pode:</h2> + +export default function Funcionalities() { + const { state } = useContext(Store) + + return ( + <div className={`${state.contrast}BackColor`}> + <Container style={{ textAlign: "center", paddingTop: "40px", paddingBottom: "40px", color: state.contrast === "" ? "#666" : "white" }}> + <h2 style={{ margin: 0, paddingBottom: 40 }}>Aqui na Plataforma você pode:</h2> <Row style={imgRow}> <Col sm={4} md={4}> - <img src={compartilhar} height="150px" alt="compartilhar recursos"/> + <img src={compartilhar} height="150px" alt="compartilhar recursos" /> <span> <span style={title}> Compartilhar </span> <span style={caption}> - com os colegas + com os colegas </span> </span> </Col> <Col sm={4} md={4}> - <img src={relatar} height="150px" alt="relatar experiências"/> + <img src={relatar} height="150px" alt="relatar experiências" /> <span> <span style={title}> Relatar experiências, </span> <span> - curtir e avaliar + curtir e avaliar </span> </span> </Col> <Col sm={4} md={4}> - <img src={guardar} height="150px" alt="guardar recursos"/> + <img src={guardar} height="150px" alt="guardar recursos" /> <span> <span style={title}> Guardar recursos </span> <span> - em coleções + em coleções </span> </span> </Col> <Col sm={4} md={4}> - <img src={seguir} height="150px" alt="seguir usuários"/> + <img src={seguir} height="150px" alt="seguir usuários" /> <span> <span style={title}> Seguir usuários </span> <span> - e suas coleções + e suas coleções </span> </span> </Col> <Col sm={4} md={4}> - <img src={baixar} height="150px" alt="baixar recursos"/> + <img src={baixar} height="150px" alt="baixar recursos" /> <span> <span style={title}> Baixar </span> <span> - recursos + recursos </span> </span> </Col> <Col sm={4} md={4}> - <img src={acessar} height="150px" alt="acessar materiais"/> + <img src={acessar} height="150px" alt="acessar materiais" /> <span> <span style={title}> Acessar materiais </span> <span> - de formação + de formação </span> </span> </Col> </Row> </Container> - ) - } + </div> + ) } -export default Funcionalities; diff --git a/src/Components/GuardarModal.js b/src/Components/GuardarModal.js index 075f74d6c4292d589c77ef4cdf10bc368d2937d9..bd05df4c8e449441967d739966f445c8b0c1df71 100644 --- a/src/Components/GuardarModal.js +++ b/src/Components/GuardarModal.js @@ -35,7 +35,7 @@ import { getRequest, postRequest } from './HelperFunctions/getAxiosConfig' function CloseModalButton(props) { return ( <StyledCloseModalButton onClick={props.handleClose}> - <CloseIcon /> + <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/> </StyledCloseModalButton> ) } @@ -132,7 +132,7 @@ export default function GuardarModal(props) { onRendered={() => { getCols() }} > <Fade in={props.open}> - <Container> + <Container className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}> <Header> <span style={{ width: "32px" }} /> <h2>Guardar recurso</h2> @@ -157,6 +157,7 @@ export default function GuardarModal(props) { creatingCol ? ( <CriarColecaoForm + contrast={props.contrast} handleClose={() => setCreating(false)} finalize={postToCol} /> @@ -169,7 +170,10 @@ export default function GuardarModal(props) { <div classname="no-cols"> <h2>Você não possui coleções ainda.</h2> </div> - </> + <div style={{ display: "flex", justifyContent: "center" }}> + <CriarColButton className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton> + </div> + </> ) : ( @@ -188,12 +192,15 @@ export default function GuardarModal(props) { } <h5>{collection.name}</h5> </div> - <GuardarBotao onClick={() => { postToCol(collection.id) }}>GUARDAR</GuardarBotao> + <GuardarBotao className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { postToCol(collection.id) }}>GUARDAR</GuardarBotao> </div> ) } </div> </ChooseCol> + <div style={{ display: "flex", justifyContent: "center" }}> + <CriarColButton className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton> + </div> </> ) @@ -215,12 +222,7 @@ export default function GuardarModal(props) { } const GuardarBotao = styled(Button)` - &:hover { - background-color : #503096 !important; - } max-height : 36px !important; - background-color : #673ab7 !important; - color : #fff !important; box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important; padding-left : 32px !important; padding-right : 32px !important; @@ -279,10 +281,8 @@ const ChooseCol = styled.div` const CriarColButton = styled(Button)` width : 200px !important; margin-top : 16px !important; - background-color : #673ab7 !important; margin-left : auto !important; margin-right : auto !important; - color : #fff !important; font-weight : 600 !important; box-shadow : !important; padding-left : 0 2px 5px 0 rgba(0,0,0,.26) 16px !important; @@ -292,7 +292,6 @@ const CriarColButton = styled(Button)` const ChooseColContainer = styled.div` display : flex; flex-direction : column; - color : #666; .no-cols { align-self : center; @@ -305,7 +304,6 @@ const ChooseColContainer = styled.div` const ResourceInfo = styled.div` margin-top : 0; - background-color : #f4f4f4; overflow : hidden; border-radius : 5px; display : flex; @@ -365,7 +363,6 @@ const Header = styled.div` h2 { font-size : 26px; font-weight : lighter; - color : #666 } ` @@ -395,7 +392,6 @@ const StyledModal = styled(Modal)` const Container = styled.div` box-sizing : border-box; box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12); - background-color : white; align : center; display : flex; flex-direction : column; diff --git a/src/Components/Header.js b/src/Components/Header.js index 54e02feaa381434678d74c13bb418de8fa126924..53b6100ecc007f37b3ce0e817dcb367b70ec8a0c 100644 --- a/src/Components/Header.js +++ b/src/Components/Header.js @@ -58,6 +58,12 @@ export default function Header(props) { const url = `/auth/validate_token/` getRequest(url, handleSuccessValidateToken, (error) => { console.log(error) }) } + const newContrast = localStorage.getItem("@portalmec/contrast"); + + return dispatch({ + type: 'SET_CONTRAST', + payload: newContrast + }) }, []) let loc = useLocation() @@ -138,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 /> @@ -146,10 +152,10 @@ export default function Header(props) { </React.Fragment> ) } - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <SignUpModal contrast={state.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <ColaborarModal open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} /> + <ColaborarModal contrast={state.contrast} open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} /> </React.Fragment> ) } diff --git a/src/Components/HelpCenter/Cards/CardEncontrando.js b/src/Components/HelpCenter/Cards/CardEncontrando.js index fd8aa92928451d05560f0e5824c860d12401d98e..efc9225132b3ad4adee8d9a3bf11abf341396464 100644 --- a/src/Components/HelpCenter/Cards/CardEncontrando.js +++ b/src/Components/HelpCenter/Cards/CardEncontrando.js @@ -24,9 +24,9 @@ import { Link } from "react-router-dom"; //Image Import import { EncontrandoRecurso } from "ImportImages.js"; -export default function CardEncontrando(props) { +export default function CardEncontrando({ contrast }) { return ( - <CardAjuda> + <CardAjuda contrast={contrast}> <div className="card"> <img src={EncontrandoRecurso} alt="" /> <h3>Encontrando Recursos</h3> @@ -75,83 +75,86 @@ export default function CardEncontrando(props) { const CardAjuda = styled.div` - height: 360px; - margin-bottom: 20px; - width: 100% - - .card { - height: 280px; - padding: 40px 15px; - text-align: center; - font-size: 14px; - background-color:#fff; - box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); - margin-top:30px - h3 { - font-size: 23px; - font-weight: 400; - color: #666; - margin-top: 20px; - margin-bottom: 10px; - line-height: 1.1; - } - - hr { - margin-top: 20px; - margin-bottom: 20px; - border: 0; - border-top: 1px solid #eee; - color: #a5a5a5; - } +height: 360px; +margin-bottom: 20px; +width: 100%; + +.card { + height: 280px; + padding: 40px 15px; + text-align: center; + font-size: 14px; + 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(254,254,254,.24),0 1px 2px rgba(254,254,254,.48)"}; + margin-top:30px + h3 { + font-size: 23px; + font-weight: 400; + color: ${props => props.contrast === "" ? "#666" : "white"}; + margin-top: 20px; + margin-bottom: 10px; + line-height: 1.1; + } - a { - font-size: 15px; - color: #666; - text-decoration: none; - text-align: center; - :hover { - color: #000; - } + hr { + margin-top: 20px; + margin-bottom: 20px; + border: 0; + border-top: 1px solid #eee; + color: #a5a5a5; + } + a { + font-size: 15px; + color: ${props => props.contrast === "" ? "#666" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + font-weight: lighter; + text-align: center; + :hover { + color: ${props => props.contrast === "" ? "#000" : "yellow"}; + font-weight: 500; } - img { - height: 62px ; - width: 62px ; - } + } + img { + height: 62px ; + width: 62px ; } - .card-rodape { - box-sizing: border-box; - - a { - border-radius: 0; - width: 100%; - font-size: 13px; - font-weight: 700; - color: #fff; - transition: .2s ease; - border: none; - height: 40px; - line-height: 40px; - background-color: #00bcd4; - touch-action: manipulation; - cursor: pointer; - text-decoration: none; - display: inline-block; - margin-bottom: 0; - text-align: center; - white-space: nowrap; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - user-select: none; - box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); +} +.card-rodape { + box-sizing: border-box; + + a { + border-radius: 0; + width: 100%; + font-size: 13px; + font-weight: 700; + color: ${props => props.contrast === "" ? "#fff" : "yellow"}; + transition: .2s ease; + border: ${props => props.contrast === "" ? "none" : "1px solid white"}; + height: 40px; + line-height: 40px; + background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"}; + touch-action: manipulation; + cursor: pointer; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + display: inline-block; + margin-bottom: 0; + text-align: center; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + user-select: none; + box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); + } + &:hover{ + a{ + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"}; } } - } - `; diff --git a/src/Components/HelpCenter/Cards/CardGerenciando.js b/src/Components/HelpCenter/Cards/CardGerenciando.js index 3f4da6b0dba1b484aeeae15e935cf57828c10f12..10487e95fe4d4c6ceae4a354e651ed89071bc4bc 100644 --- a/src/Components/HelpCenter/Cards/CardGerenciando.js +++ b/src/Components/HelpCenter/Cards/CardGerenciando.js @@ -24,9 +24,9 @@ import { Link } from "react-router-dom"; //Image Import import { GerenciandoConta } from "ImportImages.js"; -export default function CardGerenciando(props) { +export default function CardGerenciando({ contrast }) { return ( - <CardAjuda> + <CardAjuda contrast={contrast}> <div className="card"> <img src={GerenciandoConta} alt="" /> <h3>Gerenciando Conta</h3> @@ -93,84 +93,87 @@ export default function CardGerenciando(props) { const CardAjuda = styled.div` - height: 360px; - margin-bottom: 20px; - width: 100% - - .card { - height: 280px; - padding: 40px 15px; - text-align: center; - font-size: 14px; - background-color:#fff; - box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); - margin-top:30px - - h3 { - font-size: 23px; - font-weight: 400; - color: #666; - margin-top: 20px; - margin-bottom: 10px; - line-height: 1.1; - } - - hr { - margin-top: 20px; - margin-bottom: 20px; - border: 0; - border-top: 1px solid #eee; - color: #a5a5a5; - } +height: 360px; +margin-bottom: 20px; +width: 100%; + +.card { + height: 280px; + padding: 40px 15px; + text-align: center; + font-size: 14px; + 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(254,254,254,.24),0 1px 2px rgba(254,254,254,.48)"}; + margin-top:30px + h3 { + font-size: 23px; + font-weight: 400; + color: ${props => props.contrast === "" ? "#666" : "white"}; + margin-top: 20px; + margin-bottom: 10px; + line-height: 1.1; + } - a { - font-size: 15px; - color: #666; - text-decoration: none; - text-align: center; - :hover { - color: #000; - } + hr { + margin-top: 20px; + margin-bottom: 20px; + border: 0; + border-top: 1px solid #eee; + color: #a5a5a5; + } + a { + font-size: 15px; + color: ${props => props.contrast === "" ? "#666" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + font-weight: lighter; + text-align: center; + :hover { + color: ${props => props.contrast === "" ? "#000" : "yellow"}; + font-weight: 500; } - img { - height: 62px ; - width: 62px ; - } + } + img { + height: 62px ; + width: 62px ; } - .card-rodape { - box-sizing: border-box; - - a { - border-radius: 0; - width: 100%; - font-size: 13px; - font-weight: 700; - color: #fff; - transition: .2s ease; - border: none; - height: 40px; - line-height: 40px; - background-color: #00bcd4; - touch-action: manipulation; - cursor: pointer; - text-decoration: none; - display: inline-block; - margin-bottom: 0; - text-align: center; - white-space: nowrap; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - user-select: none; - box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); +} +.card-rodape { + box-sizing: border-box; + + a { + border-radius: 0; + width: 100%; + font-size: 13px; + font-weight: 700; + color: ${props => props.contrast === "" ? "#fff" : "yellow"}; + transition: .2s ease; + border: ${props => props.contrast === "" ? "none" : "1px solid white"}; + height: 40px; + line-height: 40px; + background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"}; + touch-action: manipulation; + cursor: pointer; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + display: inline-block; + margin-bottom: 0; + text-align: center; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + user-select: none; + box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); + } + &:hover{ + a{ + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"}; } } - } `; diff --git a/src/Components/HelpCenter/Cards/CardParticipando.js b/src/Components/HelpCenter/Cards/CardParticipando.js index 31f0ad95a5b97bc70c9931d5a35f4990da8e87ee..ab2fc83c9ba29f8ebfdbb13e20a448ac3a51c10d 100644 --- a/src/Components/HelpCenter/Cards/CardParticipando.js +++ b/src/Components/HelpCenter/Cards/CardParticipando.js @@ -24,9 +24,9 @@ import { Link } from "react-router-dom"; //Image Import import { ParticipandoRede } from "ImportImages.js"; -export default function CardParticipando(props) { +export default function CardParticipando({ contrast }) { return ( - <CardAjuda> + <CardAjuda contrast={contrast}> <div className="card"> <img src={ParticipandoRede} alt="" /> <h3>Participando da Rede</h3> @@ -66,86 +66,87 @@ export default function CardParticipando(props) { const CardAjuda = styled.div` - height: 360px; - margin-bottom: 20px; - width: 100% - - - .card { - height: 280px; - padding: 40px 15px; - text-align: center; - font-size: 14px; - background-color:#fff; - box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); - margin-top:30px - - - h3 { - font-size: 23px; - font-weight: 400; - color: #666; - margin-top: 20px; - margin-bottom: 10px; - line-height: 1.1; - } - - hr { - margin-top: 20px; - margin-bottom: 20px; - border: 0; - border-top: 1px solid #eee; - color: #a5a5a5; - } +height: 360px; +margin-bottom: 20px; +width: 100%; + +.card { + height: 280px; + padding: 40px 15px; + text-align: center; + font-size: 14px; + 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(254,254,254,.24),0 1px 2px rgba(254,254,254,.48)"}; + margin-top:30px + h3 { + font-size: 23px; + font-weight: 400; + color: ${props => props.contrast === "" ? "#666" : "white"}; + margin-top: 20px; + margin-bottom: 10px; + line-height: 1.1; + } - a { - font-size: 15px; - color: #666; - text-decoration: none; - text-align: center; - :hover { - color: #000; - } + hr { + margin-top: 20px; + margin-bottom: 20px; + border: 0; + border-top: 1px solid #eee; + color: #a5a5a5; + } + a { + font-size: 15px; + color: ${props => props.contrast === "" ? "#666" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + font-weight: lighter; + text-align: center; + :hover { + color: ${props => props.contrast === "" ? "#000" : "yellow"}; + font-weight: 500; } - img { - height: 62px ; - width: 62px ; - } + } + img { + height: 62px ; + width: 62px ; } - .card-rodape { - box-sizing: border-box; - - a { - border-radius: 0; - width: 100%; - font-size: 13px; - font-weight: 700; - color: #fff; - transition: .2s ease; - border: none; - height: 40px; - line-height: 40px; - background-color: #00bcd4; - touch-action: manipulation; - cursor: pointer; - text-decoration: none; - display: inline-block; - margin-bottom: 0; - text-align: center; - white-space: nowrap; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - user-select: none; - box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); +} +.card-rodape { + box-sizing: border-box; + + a { + border-radius: 0; + width: 100%; + font-size: 13px; + font-weight: 700; + color: ${props => props.contrast === "" ? "#fff" : "yellow"}; + transition: .2s ease; + border: ${props => props.contrast === "" ? "none" : "1px solid white"}; + height: 40px; + line-height: 40px; + background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"}; + touch-action: manipulation; + cursor: pointer; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + display: inline-block; + margin-bottom: 0; + text-align: center; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + user-select: none; + box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); + } + &:hover{ + a{ + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"}; } } - } `; diff --git a/src/Components/HelpCenter/Cards/CardPublicando.js b/src/Components/HelpCenter/Cards/CardPublicando.js index 0c6f489df27ab92bc3cdb617bf90dd4e93a1bd1e..303cf2db9cd0efec19da9b498576fd9900c5e240 100644 --- a/src/Components/HelpCenter/Cards/CardPublicando.js +++ b/src/Components/HelpCenter/Cards/CardPublicando.js @@ -23,9 +23,9 @@ import { Link } from "react-router-dom"; //Image Import import { PublicandoRecursos } from "ImportImages.js"; -export default function CardPublicando(props) { +export default function CardPublicando({ contrast }) { return ( - <CardAjuda> + <CardAjuda contrast={contrast}> <div className="card"> <img src={PublicandoRecursos} alt="" /> <h3>Publicando Recursos</h3> @@ -76,20 +76,20 @@ const CardAjuda = styled.div` height: 360px; margin-bottom: 20px; -width: 100% +width: 100%; .card { height: 280px; padding: 40px 15px; text-align: center; font-size: 14px; - 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(254,254,254,.24),0 1px 2px rgba(254,254,254,.48)"}; margin-top:30px h3 { font-size: 23px; font-weight: 400; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; margin-top: 20px; margin-bottom: 10px; line-height: 1.1; @@ -105,11 +105,13 @@ width: 100% a { font-size: 15px; - color: #666; - text-decoration: none; + color: ${props => props.contrast === "" ? "#666" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + font-weight: lighter; text-align: center; :hover { - color: #000; + color: ${props => props.contrast === "" ? "#000" : "yellow"}; + font-weight: 500; } } @@ -129,15 +131,15 @@ width: 100% width: 100%; font-size: 13px; font-weight: 700; - color: #fff; + color: ${props => props.contrast === "" ? "#fff" : "yellow"}; transition: .2s ease; - border: none; + border: ${props => props.contrast === "" ? "none" : "1px solid white"}; height: 40px; line-height: 40px; - background-color: #00bcd4; + background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"}; touch-action: manipulation; cursor: pointer; - text-decoration: none; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; display: inline-block; margin-bottom: 0; text-align: center; @@ -147,10 +149,12 @@ width: 100% cursor: pointer; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); - } -} - + &:hover{ + a{ + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"}; + } + } } `; diff --git a/src/Components/HelpCenter/TabsManageAc/Forget.js b/src/Components/HelpCenter/TabsManageAc/Forget.js index 21d598d30610c0463e84e88cad9ce332cd2be6cf..4726ef8af2e2893152d3ca15d9f0644e2ff1df8f 100644 --- a/src/Components/HelpCenter/TabsManageAc/Forget.js +++ b/src/Components/HelpCenter/TabsManageAc/Forget.js @@ -50,21 +50,19 @@ export default function Forget(props) { const Card = styled.div` margin-bottom: 5px; - 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; padding: 30px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 14px; font-weight: bold; } a { - color: #00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; :hover { text-decoration: underline; - } } ol { diff --git a/src/Components/HelpCenter/TabsManageAc/HowToAccess.js b/src/Components/HelpCenter/TabsManageAc/HowToAccess.js index aa06035616a818f7c2f82a0395ab93caaab5ea85..8abce58dc466ebda9660ffc9556885c191c24cb8 100644 --- a/src/Components/HelpCenter/TabsManageAc/HowToAccess.js +++ b/src/Components/HelpCenter/TabsManageAc/HowToAccess.js @@ -24,7 +24,7 @@ import styled from 'styled-components'; export default function HowtoAccess(props) { return( - <Card> + <Card contrast={props.contrast}> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/> <div style={{marginBottom: "9px"}}> <span>{props.title}</span> @@ -48,17 +48,16 @@ export default function HowtoAccess(props) { const Card = styled.div` margin-bottom: 5px; - 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; padding: 30px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 14px; font-weight: bold; } a { - color: #00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; :hover { text-decoration: underline; } diff --git a/src/Components/HelpCenter/TabsManageAc/HowToChange.js b/src/Components/HelpCenter/TabsManageAc/HowToChange.js index 1b119e9909b898331d788c1098d0abe58d0d7fb1..acaf53e542823d246cb2ba79ec50a1bf7001a850 100644 --- a/src/Components/HelpCenter/TabsManageAc/HowToChange.js +++ b/src/Components/HelpCenter/TabsManageAc/HowToChange.js @@ -24,7 +24,7 @@ import styled from 'styled-components'; export default function HowToDo(props) { return( - <Card> + <Card contrast={props.contrast}> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/> <div style={{marginBottom: "9px"}}> <span>{props.title}</span> @@ -49,17 +49,16 @@ export default function HowToDo(props) { const Card = styled.div` margin-bottom: 5px; - 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; padding: 30px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 14px; font-weight: bold; } a { - color: #00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; :hover { text-decoration: underline; } diff --git a/src/Components/HelpCenter/TabsManageAc/HowToDo.js b/src/Components/HelpCenter/TabsManageAc/HowToDo.js index f2df2d292e40e39c2367a1939c956a8313cecc21..23fbc07e44d64ae8f8d5dd09ea43a318f0172694 100644 --- a/src/Components/HelpCenter/TabsManageAc/HowToDo.js +++ b/src/Components/HelpCenter/TabsManageAc/HowToDo.js @@ -16,50 +16,49 @@ 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 from 'react'; +import React from 'react'; import styled from 'styled-components'; export default function HowTodo(props) { - return( - <Card> - <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/> - <div style={{marginBottom: "9px"}}> + return ( + <Card contrast={props.contrast}> + <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet" /> + <div style={{ marginBottom: "9px" }}> <span>{props.title}</span> </div> <p> Para fazer o cadastro é rapidinho: </p> <ol> <li>Acesse a <a href="/" target="_blank">Página Inicial</a> da Plataforma.</li> - + <li>Clique em “Cadastre-se” no canto superior direito da página.</li> - + <li> Preencha os campos solicitados.</li> - + <li>Clique em “Cadastrar”.</li> </ol> - + <p>Pronto! Você será conectado automaticamente.</p> <p>Nas próximas vezes que acessar a Plataforma, clique em “Entrar” e faça o login com seus dados de cadastro.</p> - + </Card> ); } const Card = styled.div` margin-bottom: 5px; - 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; padding: 30px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 14px; font-weight: bold; } a { - color: #00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; :hover { text-decoration: underline; } diff --git a/src/Components/HelpCenter/TabsManageAc/Why.js b/src/Components/HelpCenter/TabsManageAc/Why.js index 09c243b07d805edb7d9d1efe93b56b92492eb479..327481ad8f54b054e9fffac672cb74117cb9d9f4 100644 --- a/src/Components/HelpCenter/TabsManageAc/Why.js +++ b/src/Components/HelpCenter/TabsManageAc/Why.js @@ -25,7 +25,7 @@ import styled from 'styled-components'; export default function Why(props) { return( - <Card> + <Card contrast={props.contrast}> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/> <div style={{marginBottom: "9px"}}> <span>{props.title}</span> @@ -48,10 +48,10 @@ export default function Why(props) { const Card = styled.div` margin-bottom: 5px; - 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; padding: 30px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 14px; font-weight: bold; diff --git a/src/Components/HelpCenter/TabsNetPart/How.js b/src/Components/HelpCenter/TabsNetPart/How.js index 221667e30390c391aa1dab7f9c3264eddcadfe9c..b110d153f702556b3ed47bfeb27e14b24c63c713 100644 --- a/src/Components/HelpCenter/TabsNetPart/How.js +++ b/src/Components/HelpCenter/TabsNetPart/How.js @@ -25,7 +25,7 @@ import styled from 'styled-components'; export default function How(props) { return( - <Card> + <Card contrast={props.contrast}> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/> <div style={{marginBottom: "9px"}}> <span>{props.title}</span> @@ -51,10 +51,10 @@ export default function How(props) { const Card = styled.div` margin-bottom: 5px; - 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; padding: 30px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 14px; font-weight: bold; diff --git a/src/Components/HelpCenter/TabsNetPart/What.js b/src/Components/HelpCenter/TabsNetPart/What.js index 8171c7e4253436ddb50edb6a2c337981e51d4393..d68e07f9f98660a87fe96571738d546cb0e7d083 100644 --- a/src/Components/HelpCenter/TabsNetPart/What.js +++ b/src/Components/HelpCenter/TabsNetPart/What.js @@ -25,7 +25,7 @@ import styled from 'styled-components'; export default function What(props) { return( - <Card> + <Card contrast={props.contrast}> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/> <div style={{marginBottom: "9px"}}> <span>{props.title}</span> @@ -52,10 +52,10 @@ export default function What(props) { const Card = styled.div` margin-bottom: 5px; - 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; padding: 30px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 14px; font-weight: bold; diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToDo.js b/src/Components/HelpCenter/TabsResourseFind/HowToDo.js index 204ca709ed9eefa440feea703239043ff35997aa..abdfa089000d2604022350e5f7f25cb5db0f1314 100644 --- a/src/Components/HelpCenter/TabsResourseFind/HowToDo.js +++ b/src/Components/HelpCenter/TabsResourseFind/HowToDo.js @@ -24,7 +24,7 @@ import { Busca } from "ImportImages.js"; export default function HowToDo(props) { return( - <Card> + <Card contrast={props.contrast}> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/> <div style={{marginBottom: "9px"}}> <span>{props.title}</span> @@ -52,26 +52,21 @@ export default function HowToDo(props) { const Card = styled.div` margin-bottom: 5px; - 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; padding: 30px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 14px; font-weight: bold; } - - img { - height: auto; - width: 100%; - } a { - color: #00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; :hover { text-decoration: underline; } } + ol { margin-top: 0; margin-bottom: 10px; @@ -87,6 +82,4 @@ const Card = styled.div` font-size: 15px; } - - ` \ No newline at end of file diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js b/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js index 7ea8e558d04204d6d3ea97ad4ba15bab7295df9e..5cbf2a4c8bd368c0a30dc59d0aa16d882f4426a5 100644 --- a/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js +++ b/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js @@ -24,7 +24,7 @@ import { Filtros } from "ImportImages.js"; export default function HowToFilter(props) { return( - <Card> + <Card contrast={props.contrast}> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/> <div style={{marginBottom: "9px"}}> <span>{props.title}</span> @@ -45,10 +45,10 @@ export default function HowToFilter(props) { const Card = styled.div` margin-bottom: 5px; - 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; padding: 30px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 14px; font-weight: bold; diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToRank.js b/src/Components/HelpCenter/TabsResourseFind/HowToRank.js index cb2a04b6a64b73d1721edaf51aed65214c6c2801..47f8cfcedf179169ba4b9609dab92e7f93b42626 100644 --- a/src/Components/HelpCenter/TabsResourseFind/HowToRank.js +++ b/src/Components/HelpCenter/TabsResourseFind/HowToRank.js @@ -25,7 +25,7 @@ import styled from 'styled-components'; export default function HowToRank(props) { return( - <Card> + <Card contrast={props.contrast}> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/> <div style={{marginBottom: "9px"}}> <span>{props.title}</span> @@ -46,10 +46,10 @@ export default function HowToRank(props) { const Card = styled.div` margin-bottom: 5px; - 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; padding: 30px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 14px; font-weight: bold; diff --git a/src/Components/HelpCenter/TabsResoursePub/How.js b/src/Components/HelpCenter/TabsResoursePub/How.js index a84cd304098a103d6906a6ea2e5ed2f8481ae989..86a03146dddc945345cfea624f63f6ce596c411e 100644 --- a/src/Components/HelpCenter/TabsResoursePub/How.js +++ b/src/Components/HelpCenter/TabsResoursePub/How.js @@ -24,7 +24,7 @@ import styled from 'styled-components'; export default function How(props) { return( - <Card> + <Card contrast={props.contrast}> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/> <div style={{marginBottom: "9px"}}> <span>{props.title}</span> @@ -62,17 +62,16 @@ export default function How(props) { const Card = styled.div` margin-bottom: 5px; - 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; padding: 30px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 14px; font-weight: bold; } a { - color: #00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; :hover { text-decoration: underline; } diff --git a/src/Components/HelpCenter/TabsResoursePub/Which.js b/src/Components/HelpCenter/TabsResoursePub/Which.js index 49a5e1f1e525cfdb04afe4fc6263bf9e57433185..e3a194201626781a2d5582e677a8c0d513a2c5d1 100644 --- a/src/Components/HelpCenter/TabsResoursePub/Which.js +++ b/src/Components/HelpCenter/TabsResoursePub/Which.js @@ -24,7 +24,7 @@ import styled from 'styled-components'; export default function Which(props) { return( - <Card> + <Card contrast={props.contrast}> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/> <div style={{marginBottom: "9px"}}> <span>{props.title}</span> @@ -55,10 +55,10 @@ export default function Which(props) { const Card = styled.div` margin-bottom: 5px; - 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; padding: 30px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 14px; font-weight: bold; diff --git a/src/Components/HelpCenter/TabsResoursePub/Why.js b/src/Components/HelpCenter/TabsResoursePub/Why.js index ca1a16b9ece1538ed7640c181c5873d7f1e54668..349875cc4b874305c44093d7ec96adbffeba7102 100644 --- a/src/Components/HelpCenter/TabsResoursePub/Why.js +++ b/src/Components/HelpCenter/TabsResoursePub/Why.js @@ -23,31 +23,31 @@ import styled from 'styled-components'; export default function Why(props) { - return( - <Card> - <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/> - <div style={{marginBottom: "9px"}}> + return ( + <Card contrast={props.contrast}> + <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet" /> + <div style={{ marginBottom: "9px" }}> <span>{props.title}</span> </div> <p> - Ao enviar um recurso você estará ajudando a fortalecer a distribuição - de recursos educacionais digitais para o ensino básico brasileiro e - contribuindo na valorização da pluralidade e da diversidade da educação + Ao enviar um recurso você estará ajudando a fortalecer a distribuição + de recursos educacionais digitais para o ensino básico brasileiro e + contribuindo na valorização da pluralidade e da diversidade da educação brasileira. </p> - + <p> - A Plataforma MEC é um meio seguro e um site de referência para a - publicação e disseminação de Recursos Educacionais Digitais. Aproveite - esse espaço para compartilhar com professores de todo o Brasil recursos - criados por você ou aquele recurso de outro autor que você usou em aula + A Plataforma MEC é um meio seguro e um site de referência para a + publicação e disseminação de Recursos Educacionais Digitais. Aproveite + esse espaço para compartilhar com professores de todo o Brasil recursos + criados por você ou aquele recurso de outro autor que você usou em aula e seus alunos gostaram! </p> <p> - A partir do momento que seu recurso estiver publicado na Plataforma, os - usuários poderão interagir com seu recurso e você receberá as - notificações dos comentários, avaliações e curtidas. Cada uma dessas - interações contam para que seu recurso ganhe uma posição de destaque + A partir do momento que seu recurso estiver publicado na Plataforma, os + usuários poderão interagir com seu recurso e você receberá as + notificações dos comentários, avaliações e curtidas. Cada uma dessas + interações contam para que seu recurso ganhe uma posição de destaque na Plataforma. </p> <p>Participe dessa rede de colaboração de fomento da qualidade da educação básica!</p> @@ -57,10 +57,10 @@ export default function Why(props) { const Card = styled.div` margin-bottom: 5px; - 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; padding: 30px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 14px; font-weight: bold; diff --git a/src/Components/HomeScreenSearchBar.js b/src/Components/HomeScreenSearchBar.js index 634b625e1c487e585f97ed95965fe5b53d87a175..9b6926072fba239cfbd6ba9533aa17b1b3c86bc4 100644 --- a/src/Components/HomeScreenSearchBar.js +++ b/src/Components/HomeScreenSearchBar.js @@ -27,7 +27,7 @@ import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; import SearchIcon from '@material-ui/icons/Search'; /*import {Link} from 'react-router-dom'*/ -export default function HomeScreenSearchBar(props) { +export default function HomeScreenSearchBar() { const [query, setQuery] = useState("") const [searchClass, setSearchClass] = useState('LearningObject') @@ -67,9 +67,9 @@ export default function HomeScreenSearchBar(props) { } const options = [ - { text: "Recursos", value: "LearningObject", color: "#ff7f00" }, - { text: "Coleções", value: "Collection", color: "#673ab7" }, - { text: "Usuários", value: "User", color: "#00bcd4" }, + { text: "Recursos", value: "LearningObject", color: state.contrast === "" ? "#ff7f00" : "yellow" }, + { text: "Coleções", value: "Collection", color: state.contrast === "" ? "#673ab7" : "yellow" }, + { text: "Usuários", value: "User", color: state.contrast === "" ? "#00bcd4" : "yellow" }, ] const [anchorEl, setAnchorEl] = React.useState(null); const [selectedIndex, setSelectedIndex] = React.useState(0); @@ -92,8 +92,8 @@ export default function HomeScreenSearchBar(props) { const WIDTH = window.innerWidth; return ( - - <StyledGrid container> + + <StyledGrid container contrast={state.contrast}> {goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />} <Grid item md={7} xs={12} className="first white"> <StyledTextField @@ -108,7 +108,7 @@ export default function HomeScreenSearchBar(props) { /> </Grid> <Grid item md={3} xs={12} className="second white"> - <List component="nav" aria-label="Recurso"> + <List component="nav" aria-label="Recurso" className={`${state.contrast}BackColor`} > <ListItem button aria-haspopup="true" @@ -121,7 +121,7 @@ export default function HomeScreenSearchBar(props) { primary={options[selectedIndex].text} /> <ListItemIcon> - <ArrowDropDownIcon /> + <ArrowDropDownIcon className={`${state.contrast}IconColor`} /> </ListItemIcon> </ListItem> </List> @@ -132,16 +132,18 @@ export default function HomeScreenSearchBar(props) { open={Boolean(anchorEl)} onClose={handleClose} > - {options.map((option, index) => ( - <MenuItem - key={option.value} - selected={index === selectedIndex} - onClick={(event) => handleMenuItemClick(event, index, option.value)} - style={{ color: option.color }} - > - {option.text} - </MenuItem> - ))} + <div className={`${state.contrast}BackColor`}> + {options.map((option, index) => ( + <MenuItem + key={option.value} + selected={index === selectedIndex} + onClick={(event) => handleMenuItemClick(event, index, option.value)} + style={{ color: option.color, textDecoration: state.contrast === "" ? "none" : "underline" }} + > + {option.text} + </MenuItem> + ))} + </div> </Menu> </Grid> <Grid item md={2} xs={12}> diff --git a/src/Components/LoadingSpinner.js b/src/Components/LoadingSpinner.js index 68c447c4c3be4aee028bf6b4997ceefa956fd197..81089ad97a61e48e55765d0006fee99267f32029 100644 --- a/src/Components/LoadingSpinner.js +++ b/src/Components/LoadingSpinner.js @@ -1,11 +1,11 @@ import React from 'react'; import LoadingGif from '../img/loading_busca.gif' - const LoadingSpinner = (props) => ( - <div style={{display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center"}}> - <img alt="" src={LoadingGif} /> - <span style={{textTransform:"uppercase"}}>{props.text}</span> - </div> - ); +const LoadingSpinner = (props) => ( + <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}> + <img alt="" src={LoadingGif} /> + <span style={props.contrast === "" ? { textTransform: "uppercase" } : { textTransform: "uppercase", color: "white" }}>{props.text}</span> + </div> +); - export default LoadingSpinner; +export default LoadingSpinner; diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js index 0e79abf17cab7bbac7e4ca221e4baa119b0ea6e1..699f3da6e2525fbf62324c02c65ef5d37fb6e514 100644 --- a/src/Components/LoginContainerFunction.js +++ b/src/Components/LoginContainerFunction.js @@ -15,40 +15,40 @@ 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 GoogleLogin from 'react-google-login' import { Button } from '@material-ui/core'; //import FacebookLogin from 'react-facebook-login'; import CloseIcon from '@material-ui/icons/Close'; import styled from 'styled-components' -import {device} from './device.js' +import { device } from './device.js' import LabeledCheckbox from './Checkbox.js' import FormInput from "./FormInput.js" import GoogleLogo from "../img/logo_google.svg" import ValidateUserInput from './HelperFunctions/FormValidationFunction.js' -import {Link} from 'react-router-dom' -import {apiUrl} from '../env.js' +import { Link } from 'react-router-dom' +import { apiUrl } from '../env.js' -async function handleGoogleAttempt () { - console.log("handleGoogleAttempt") - let request_url = ( +async function handleGoogleAttempt() { + console.log("handleGoogleAttempt") + let request_url = ( `${apiUrl}/omniauth/google_oauth2?auth_origin_url=` + window.location.href + '&omniauth_window_type=sameWindow&resource_class=User' ) window.location.replace(request_url) } -export default function LoginContainer (props) { +export default function LoginContainer(props) { const [formEmail, setEmail] = useState( { - key : false, - value : localStorage.getItem("@portalmec/uid") || "", + key: false, + value: localStorage.getItem("@portalmec/uid") || "", } ) const [formSenha, setSenha] = useState( { - key : false, - value : localStorage.getItem("@portalmec/senha") ||"" + key: false, + value: localStorage.getItem("@portalmec/senha") || "" } ) @@ -64,37 +64,41 @@ export default function LoginContainer (props) { const userInput = e.target.value const flag = ValidateUserInput(type, userInput) - if(type === 'email') { - setEmail({...formEmail, - key : flag, - value : userInput + if (type === 'email') { + setEmail({ + ...formEmail, + key: flag, + value: userInput }) // {/*console.log(formEmail)*/} } - else if(type === 'password') { - setSenha({...formSenha, - key : flag, - value : userInput + else if (type === 'password') { + setSenha({ + ...formSenha, + key: flag, + value: userInput }) // {/*console.log(formSenha)*/} } } const limpaCamposForm = () => { - setEmail({...formEmail, - key : false, - value : '' + setEmail({ + ...formEmail, + key: false, + value: '' }); - setSenha({...formSenha, - key : false, - value : '' + setSenha({ + ...formSenha, + key: false, + value: '' }) } const onSubmit = (e) => { e.preventDefault() - const login = {email : formEmail.value, senha : formSenha.value, checkboxChecked : checkboxControl} + const login = { email: formEmail.value, senha: formSenha.value, checkboxChecked: checkboxControl } if (!(formEmail.key || formSenha.key)) { props.handleLoginInfo(login) @@ -105,70 +109,76 @@ export default function LoginContainer (props) { return ( <div> - <ContainerStyled > + <ContainerStyled contrast={props.contrast}> <DialogHeaderStyled> - <span style={{width:"32px"}}/> - <H2Styled> Entrar + <span style={{ width: "32px" }} /> + <H2Styled contrast={props.contrast}> + Entrar </H2Styled> - <StyledCloseModalButton onClick={props.handleClose}> - <CloseIcon/> + <StyledCloseModalButton + onClick={props.handleClose} + contrast={props.contrast} + > + <CloseIcon className="icon" /> </StyledCloseModalButton> </DialogHeaderStyled> <DialogContentDiv> <SocialConnectDiv> - <GoogleLoginButton onClick={handleGoogleAttempt}> - <img src={GoogleLogo} alt="google-logo" className="google-logo"/> - <span>Usando o Google</span> - </GoogleLoginButton> + <GoogleLoginButton contrast={props.contrast} onClick={handleGoogleAttempt}> + <img src={GoogleLogo} alt="google-logo" className="google-logo" /> + <span>Usando o Google</span> + </GoogleLoginButton> </SocialConnectDiv> <H3Div> - <H3Styled> - <RightSideStrikedH3/> - <span style={{verticalAlign:"middle"}}>ou</span> - <LeftSideStrikedH3/> + <H3Styled contrast={props.contrast}> + <RightSideStrikedH3 contrast={props.contrast} /> + <span style={{ verticalAlign: "middle" }}>ou</span> + <LeftSideStrikedH3 contrast={props.contrast} /> </H3Styled> </H3Div> <form onSubmit={e => onSubmit(e)}> <FormInput + contrast={props.contrast} inputType={"text"} name={"email"} value={formEmail.value} placeholder={"E-mail"} handleChange={e => handleChange(e, 'email')} required={true} - error = {formEmail.key} - help = {formEmail.key ? ( formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br/>Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""} + error={formEmail.key} + help={formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br />Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""} /> - <br/> + <br /> <FormInput + contrast={props.contrast} inputType={"password"} name={"senha"} value={formSenha.value} placeholder={"Senha"} handleChange={e => handleChange(e, 'password')} required={true} - error = {formSenha.key} - help = {formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mínimo 8 caracteres.") : ""} + error={formSenha.key} + help={formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mínimo 8 caracteres.") : ""} /> - <br/> + <br /> - <RememberRecover> - <LabeledCheckbox label={<StyledLabel><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={() => setCheckbox(!checkboxControl)}/> - <UserForgotTheirPasswordSpan>Esqueceu a senha? <Link to={"/recuperar-senha"} style={{textAlign: "right", color:"#4cd0e1"}} onClick={props.handleClose}>Clique aqui!</Link></UserForgotTheirPasswordSpan> + <RememberRecover contrast={props.contrast}> + <LabeledCheckbox contrast={props.contrast} label={<StyledLabel contrast={props.contrast}><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={() => setCheckbox(!checkboxControl)} /> + <UserForgotTheirPasswordSpan contrast={props.contrast}>Esqueceu a senha? <Link to={"/recuperar-senha"} style={props.contrast === "" ? { textAlign: "right", color: "#4cd0e1" } : { textAlign: "right", color: "yellow", textDecoration: "underline" }} onClick={props.handleClose}>Clique aqui!</Link></UserForgotTheirPasswordSpan> </RememberRecover> <ConfirmContainerStyled> - <StyledLoginButton type="submit" variant="contained"> - <span style={{borderRadius:"3px", boxSizing:"border-box", fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}>ENTRAR</span> + <StyledLoginButton contrast={props.contrast} type="submit" variant="contained"> + <span style={props.contrast === "" ? { borderRadius: "3px", boxSizing: "border-box", fontFamily: "Roboto, sans serif", fontWeight: "500", color: "#fff" } : { borderRadius: "3px", boxSizing: "border-box", fontFamily: "Roboto, sans serif", fontWeight: "500", color: "yellow" }}>ENTRAR</span> </StyledLoginButton> </ConfirmContainerStyled> </form> - <DialogFooterStyled> - <span style={{textAlign:"center", fontSize: "14px", color:"rgb(102, 102, 102)"}}>Ainda não tem cadastro? <StyledAnchor href="" onClick={e => switchModal(e)}>CADASTRE-SE</StyledAnchor></span> + <DialogFooterStyled contrast={props.contrast}> + <span style={props.contrast === "" ? { textAlign: "center", fontSize: "14px", color: "rgb(102, 102, 102)" } : { textAlign: "center", fontSize: "14px", color: "white" }}>Ainda não tem cadastro? <StyledAnchor contrast={props.contrast} href="" onClick={e => switchModal(e)}>CADASTRE-SE</StyledAnchor></span> </DialogFooterStyled> </DialogContentDiv> </ContainerStyled> @@ -177,13 +187,14 @@ export default function LoginContainer (props) { } - const ContainerStyled = styled.div` +const ContainerStyled = styled.div` box-sizing : border-box; - background-color : white; + background-color: ${props => props.contrast === "" ? "white" : "black"}; max-width : none; display : flex; flex-direction : column; min-width : 440px; + border: 1px solid ${props => props.contrast === "" ? "#666" : "white"}; align : center; padding : 10px; @@ -199,7 +210,7 @@ export default function LoginContainer (props) { } ` - export const DialogHeaderStyled = styled.div` +export const DialogHeaderStyled = styled.div` text-align : center; display : flex; flex-direction : row; @@ -207,9 +218,9 @@ export default function LoginContainer (props) { padding : 10px 26px 0 26px; height : 64px; ` - const H2Styled = styled.h2` +const H2Styled = styled.h2` align-self : center; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; font-size : 26px; font-weight : 100; font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important; @@ -218,7 +229,7 @@ export default function LoginContainer (props) { letter-spacing: .005em; ` - export const StyledCloseModalButton = styled(Button)` +export const StyledCloseModalButton = styled(Button)` display : inline-block; position : relative; float : right !important; @@ -226,18 +237,22 @@ export default function LoginContainer (props) { background : transparent !important; min-width: 0 !important; width : 40px; + + .icon{ + color: ${props => props.contrast === "" ? "#666" : "white"}; + } ` - export const DialogContentDiv = styled.div` +export const DialogContentDiv = styled.div` padding : 20px 30px; overflow : visible !important; ` - export const SocialConnectDiv = styled.div` +export const SocialConnectDiv = styled.div` margin-top : 0; display : flex; flex-direction : row; ` - export const StyledGoogleLoginButton = styled(GoogleLogin)` +export const StyledGoogleLoginButton = styled(GoogleLogin)` background-color : #fff !important; color : #666 !important; border : 1px solid rgb(66, 133, 244); @@ -247,12 +262,12 @@ export default function LoginContainer (props) { } ` - const DialogFooterStyled = styled.div` +const DialogFooterStyled = styled.div` box-sizing : border-box; font-family : 'Roboto', sans serif; margin : 20px -20px; padding-top : 20px; - border-top : 1px #e5e5e5 solid; + border-top: ${props => props.contrast === "" ? "1px #e5e5e5 solid" : "1px white solid"}; justify-content : center; text-align : center; line-height : 1.42857143 @@ -261,50 +276,52 @@ export default function LoginContainer (props) { export const RightSideStrikedH3 = styled.div` display : inline-block; - border-bottom: 1px dotted #666; + border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"}; vertical-align : middle; font-weight : 500; margin-right : 5px; width : 44%; ` - export const LeftSideStrikedH3 = styled.div` +export const LeftSideStrikedH3 = styled.div` display : inline-block; - border-bottom: 1px dotted #666; + border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"}; vertical-align : middle; font-weight : 500; margin-left : 5px; width : 44%; ` - export const H3Div = styled.div` +export const H3Div = styled.div` margin-top : 0; margin-bottom : 10px; ` - const H3Styled = styled.h3` +const H3Styled = styled.h3` overflow : hidden; text-align : center; font-size : 14px; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; margin : 10px 0; ` - const StyledAnchor = styled.a` - color : #00bcd4; - text-decoration : none; +const StyledAnchor = styled.a` + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; ` - const ConfirmContainerStyled = styled.div` +const ConfirmContainerStyled = styled.div` display : flex; margin-top : 10px; align-items : center; justify-content : center; ` - const StyledLoginButton = styled(Button)` - background-color : #00bcd4 !important; +const StyledLoginButton = styled(Button)` + background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"}; box-shadow : none !important; outline: none !important; - border : 0 !important; + border: ${props => props.contrast === "" ? 0 : "1px solid white !important"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; + color: ${props => props.contrast === "" ? "" : "yellow !important"}; overflow : hidden !important; width : 35% !important; display : inline-block !important; @@ -315,51 +332,50 @@ export const RightSideStrikedH3 = styled.div` border-radius: 3px !important; align-self : 50% !important; :hover { - background-color : #00acc1 !important; + background-color: ${props => props.contrast === "" ? "#00acc1 !important" : "rgba(255,255,0,0.24) !important"}; } ` - const RememberRecover = styled.div` +const RememberRecover = styled.div` display : flex; justify-content : space-between; font-size: 12px; font-weight : 400; ` - const StyledLabel = styled.div` +const StyledLabel = styled.div` box-sizing : border-box; position : relative; vertical-align : middle !important; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; ` - const UserForgotTheirPasswordSpan = styled.span` +const UserForgotTheirPasswordSpan = styled.span` margin-top : 1em; font-size : 12px; font-weight : 400; text-align : right; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; ` - const StyledSpan = styled.span` +const StyledSpan = styled.span` font-size : 12px; font-weight : 400; padding-top : 2px; ` export const GoogleLoginButton = styled(Button)` - background-color : #fff; - box-shadow : 0 0 0 1px #4285f4 !important; - color : #666 !important; + background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"}; + box-shadow: ${props => props.contrast === "" ? "0 0 0 1px #4285f4 !important" : "0 0 0 1px white !important"}; + color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"}; + font-weight : bolder !important; font-size : 12px !important; text-transform: none !important; width: 40%; - ${'' /* .MuiButton-root { - min-width : 88px; - } */} - .google-logo { max-height : 18px ; padding-right : 5px; diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js index 9ebce1910883371a5c81adb9f36c7166247adea5..eeb51a8c4f7bfc6d1968800f7872a965bfd8dc17 100644 --- a/src/Components/LoginModal.js +++ b/src/Components/LoginModal.js @@ -16,16 +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, {useContext, useState} from 'react'; +import React, { useContext, useState } from 'react'; import Modal from '@material-ui/core/Modal'; import Backdrop from '@material-ui/core/Backdrop'; import Zoom from '@material-ui/core/Fade'; import styled from 'styled-components' import LoginContainer from './LoginContainerFunction.js' -import {Store} from '../Store.js' +import { Store } from '../Store.js' import Snackbar from '@material-ui/core/Snackbar'; import MuiAlert from '@material-ui/lab/Alert'; -import {authentication} from './HelperFunctions/getAxiosConfig' +import { authentication } from './HelperFunctions/getAxiosConfig' const StyledLogin = styled(Modal)` margin : 0 !important; @@ -39,11 +39,11 @@ const StyledLogin = styled(Modal)` ` export function Alert(props) { - return <MuiAlert elevation={6} variant="filled" {...props} />; + return <MuiAlert elevation={6} variant="filled" {...props} />; } -export default function LoginModal (props){ - const {state, dispatch} = useContext(Store) +export default function LoginModal(props) { + const { state, dispatch } = useContext(Store) const [snackbarOpened, handleSnackbar] = useState(false) @@ -55,24 +55,24 @@ export default function LoginModal (props){ handleSnackbar(false); } - function handleSuccess (data) { - dispatch ({ + function handleSuccess(data) { + dispatch({ type: "USER_LOGGED_IN", userLoggedIn: !state.userIsLoggedIn, login: data.data - } + } ) props.handleClose(); props.openSnackbar(); } - function handleError (error) { + function handleError(error) { handleSnackbar(true) } const handleLoginInfo = (login) => { const url = `/auth/sign_in` const payload = { - email : login.email, - password : login.senha + email: login.email, + password: login.senha } authentication(url, payload, handleSuccess, handleError) @@ -81,30 +81,32 @@ export default function LoginModal (props){ return ( <> - <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar} - anchorOrigin = {{ vertical:'top', horizontal:'right' }} - > - <Alert severity="error">Ocorreu um erro ao se conectar!</Alert> - </Snackbar> - <StyledLogin - aria-labelledby="transition-modal-title" - aria-describedby="transition-modal-description" - open={props.open} - centered="true" - onClose={props.handleClose} - closeAfterTransition - BackdropComponent={Backdrop} - BackdropProps={{ - timeout: 500, - }} - > - <Zoom in={props.open} style={{ transitionDelay :"0.2ms"}}> - <LoginContainer handleClose={props.handleClose} - openSignUp={props.openSignUp} - handleLoginInfo={handleLoginInfo} - /> - </Zoom> - </StyledLogin> + <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar} + anchorOrigin={{ vertical: 'top', horizontal: 'right' }} + > + <Alert severity="error">Ocorreu um erro ao se conectar!</Alert> + </Snackbar> + <StyledLogin + aria-labelledby="transition-modal-title" + aria-describedby="transition-modal-description" + open={props.open} + centered="true" + onClose={props.handleClose} + closeAfterTransition + BackdropComponent={Backdrop} + BackdropProps={{ + timeout: 500, + }} + > + <Zoom in={props.open} style={{ transitionDelay: "0.2ms" }}> + <LoginContainer + contrast={state.contrast} + handleClose={props.handleClose} + openSignUp={props.openSignUp} + handleLoginInfo={handleLoginInfo} + /> + </Zoom> + </StyledLogin> </> ) diff --git a/src/Components/MaterialCard.js b/src/Components/MaterialCard.js index 8f18cd3c03c35954a3a5d7b9f491a4c81dcd97b0..790a5de654131eadf352d4cfd36999292dc11585 100644 --- a/src/Components/MaterialCard.js +++ b/src/Components/MaterialCard.js @@ -41,40 +41,42 @@ export default function MaterialCard(props) { const width = window.innerWidth; return ( - <Card> + <Card className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}Text`}> <img src={thumb} alt="thumbnail do recurso" /> - <CardContent style={{ height: "60px", textAlign: "left", paddingBottom: "0px", width: "100%" }}> - <Title> - {props.name} - </Title> - </CardContent> - <CardActions> - <Grid container direction="column" justify="flex-start" alignItems="flex-start" style={{ marginLeft: "5px" }}> - <Grid item> - <Rating - name="customized-empty" - value={props.score} - precision={0.5} - style={{ color: "#666" }} - emptyIcon={<StarBorderIcon fontSize="inherit" />} - readOnly - /> + <div> + <CardContent style={{ height: "60px", textAlign: "left", paddingBottom: "0px", width: "100%" }}> + <Title> + {props.name} + </Title> + </CardContent> + <CardActions> + <Grid container direction="column" justify="flex-start" alignItems="flex-start" style={{ marginLeft: "5px" }}> + <Grid item> + <Rating + style={ props.contrast === "" ? { color: "#666" } : { color: "white" }} + name="customized-empty" + value={props.score} + precision={0.5} + emptyIcon={<StarBorderIcon fontSize="inherit" />} + readOnly + /> + </Grid> + <Grid container direction="row" alignItems="center"> + <Library style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }} /> + <SizedBox /> + <Typography variant="body2" component="p" style={{ overflow: "hidden", fontSize: "0.8em" }}> + {props.modules.length} módulos + </Typography> + </Grid> </Grid> - <Grid container direction="row" alignItems="center"> - <Library style={{ color: "#e81f4f" }} /> - <SizedBox /> - <Typography variant="body2" color="textSecondary" component="p" style={{ overflow: "hidden", fontSize: "0.8em" }}> - {props.modules.length} módulos - </Typography> - </Grid> - </Grid> - </CardActions> - <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}> + </CardActions> + </div> + <CardActions className={`${props.contrast}LinkColor`} style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}> { width <= 767 ? - <Link style={{textDecoration : "none"}} to={`/colecao?colecao=${props.id}`}> + <Link className={`${props.contrast}LinkColor`} to={`/colecao?colecao=${props.id}`}> <Button - color="secondary" + style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }} endIcon={<ExpandMoreRoundedIcon />} > @@ -83,7 +85,8 @@ export default function MaterialCard(props) { </Link> : <Button - color="secondary" + className={`${props.contrast}LinkColor`} + style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }} endIcon={<ExpandMoreRoundedIcon />} onClick={HandleButtonPressed} > @@ -101,7 +104,6 @@ const SizedBox = styled.div` ` const Title = styled(Typography)` font-weight: 500; - color: rgb(102, 102, 102); font-size: 0.9em; margin-left: 10px; margin-right: 10px; diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js index c79d52b6f2cefa5ccf8b2e9ab5b65c5db26a5883..7cb8c6d998af016f49feed4db55e13fafc9a253b 100644 --- a/src/Components/MenuBar.js +++ b/src/Components/MenuBar.js @@ -44,18 +44,24 @@ export const ButtonStyled = styled(Button)` text-transform: capitalize !important; margin : 0 8px !important; font-weight : normal !important; + color: ${props => props.contrast === "" ? "black !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; ` const ButtonPublicarRecurso = styled(Button)` font-family : 'Roboto', sans serif; box-shadow : none !important; - border : 1px transparent solid; - background-color : #ff7f00 !important; + border: ${props => props.contrast === '' ? "1px transparent solid" : "1px white solid !important"}; + background-color: ${(props) => props.contrast === "" ? "#ff7f00 !important" : "black !important"}; + color: white !important; align-content : center; font-weight : 500 !important; text-transform: capitalize !important; font-stretch : expanded; max-width: 200 !important; + :hover { + background-color: ${(props) => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"}; + } .MuiSvgIcon-root { vertical-align : middle !important; margin-right : 5px !important; @@ -63,7 +69,7 @@ const ButtonPublicarRecurso = styled(Button)` ` const IconSearchStyled = styled(IconSearch)` - color: #16b8dd; + color: ${props => props.contrast === "" ? "#16b8dd !important" : "white !important"}; ` const ImageStyled = styled.img` height: 50px; @@ -88,11 +94,13 @@ const Left = styled.span` export const ButtonPubRecursoStyled = styled(Button)` font-weight : 500 !important; - border : 1.5px #666 solid !important; - color: #666; box-shadow: none; margin : 0 8px !important; font-weight : normal !important; + :hover { + background-color: ${(props) => + props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"}; + } ` @@ -158,18 +166,18 @@ export default function MenuBar(props) { const minhaArea = buildMyAreaTabs() return ( - <ContainerStyled fluid={true} > + <ContainerStyled fluid={true} className={`${state.contrast}BackColor`}> <Left> <Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link> <Dropdown name="Sobre" items={menuSobre} /> <Dropdown name="Ajuda" items={menuAjuda} /> <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" > - <ButtonStyled >Educação Conectada</ButtonStyled> + <ButtonStyled contrast={state.contrast} >Educação Conectada</ButtonStyled> </a> {/*<Link to="/loja"> <ButtonStyled>Lojinha</ButtonStyled> </Link>*/} - <ButtonStyled onClick={props.openSearchBar} ><IconSearchStyled />Buscar</ButtonStyled> + <ButtonStyled contrast={state.contrast} onClick={props.openSearchBar} ><IconSearchStyled contrast={state.contrast}/>Buscar</ButtonStyled> </Left> <Right> @@ -179,9 +187,9 @@ export default function MenuBar(props) { <> <div style={{ boxSizing: "border-box" }}> <Link to="/termos-publicar-recurso"> - <ButtonPublicarRecurso> - <CloudUploadIcon style={{ color: "white", marginLeft: "0" }} /> - <span style={{ color: "#fff", textAlign: "center", alignSelf: "center", fontWeight: "500" }} > + <ButtonPublicarRecurso contrast={state.contrast} className={`${state.contrast}LinkColor`}> + <CloudUploadIcon className={`${state.contrast}IconColor`} style={{ marginLeft: "0" }} /> + <span style={{textAlign: "center", alignSelf: "center", fontWeight: "500" }} > PUBLICAR RECURSO </span> </ButtonPublicarRecurso> @@ -198,9 +206,9 @@ export default function MenuBar(props) { ) : ( <React.Fragment> - <ButtonPubRecursoStyled onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled> - <ButtonStyled onClick={props.openLogin}><ExitToAppIcon style={{ color: "#00bcd4" }} />Entrar</ButtonStyled> - <ButtonStyled onClick={props.openSignUp}>Cadastre-<span style={{textTransform: 'lowercase'}}>se</span></ButtonStyled> + <ButtonPubRecursoStyled contrast={state.contrast} className={`${state.contrast}LinkColor ${state.contrast}Border`} onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled> + <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openLogin}><ExitToAppIcon className={`${state.contrast}IconColor`} style={{ color: "#00bcd4" }} />Entrar</ButtonStyled> + <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled> </React.Fragment> ) } 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/MenuList.js b/src/Components/MenuList.js index b5b920c81a2e75ea9a2ae25b6c0f088eed7a1e9c..61f564d42f15165d5860b49408ff6453e273c00d 100644 --- a/src/Components/MenuList.js +++ b/src/Components/MenuList.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, {useContext} from 'react'; +import React, { useContext } from 'react'; import Button from '@material-ui/core/Button'; import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; @@ -25,8 +25,8 @@ import { Link } from 'react-router-dom' import ExitToAppIcon from '@material-ui/icons/ExitToApp'; import { Store } from '../Store'; import styled from 'styled-components' -import {apiDomain} from '../env.js' -import {deleteRequest} from './HelperFunctions/getAxiosConfig' +import { apiDomain } from '../env.js' +import { deleteRequest } from './HelperFunctions/getAxiosConfig' //Image Import import { Profile } from "ImportImages.js"; @@ -48,15 +48,15 @@ export default function MenuList(props) { setAnchorEl(null); }; - function handleSuccessSignOut (data) { - dispatch( { - type: 'USER_LOGGED_OUT', - userLoggedOut: !state.userIsLoggedIn, - }) + function handleSuccessSignOut(data) { + dispatch({ + type: 'USER_LOGGED_OUT', + userLoggedOut: !state.userIsLoggedIn, + }) } const handleLogout = () => { - const url = `/auth/sign_out` - deleteRequest(url, handleSuccessSignOut, (error) => {console.log(error)}) + const url = `/auth/sign_out` + deleteRequest(url, handleSuccessSignOut, (error) => { console.log(error) }) } return ( @@ -67,19 +67,19 @@ export default function MenuList(props) { aria-haspopup="true" onMouseOver={handleClick} > - <div style={{borderRadius: "50%", border: "2px solid #fff", background: "#fff", overflow: "hidden", maxWidth : "50px", maxHeight : "50px"}}> - { - state.currentUser.avatar === '' || state.currentUser.avatar === null || state.currentUser.avatar === undefined ? - ( - - <img src={Profile} alt={'user avatar'} style={{width:"100%", height:"100%", verticalAlign : "middle", marginLeft : "0"}}/> - ): - ( - <img src={apiDomain + state.currentUser.avatar} alt={'user avatar'} style={{width:"100%", height:"100%", verticalAlign : "middle", marginLeft : "0"}}/> - ) - } + <div style={{ borderRadius: "50%", border: "2px solid #fff", background: "#fff", overflow: "hidden", maxWidth: "50px", maxHeight: "50px" }}> + { + state.currentUser.avatar === '' || state.currentUser.avatar === null || state.currentUser.avatar === undefined ? + ( + + <img src={Profile} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} /> + ) : + ( + <img src={apiDomain + state.currentUser.avatar} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} /> + ) + } </div> - <span style={{fontFamily:"inherit", fontWeight:"400", color:"#666"}}>Minha Área </span> <KeyboardArrowDownIcon/> + <span className={`${state.contrast}LinkColor`} style={{ fontFamily: "inherit", fontWeight: "400", color: "#666" }}>Minha Área </span> <KeyboardArrowDownIcon className={`${state.contrast}IconColor`}/> </OverrideButton> <Menu @@ -95,17 +95,19 @@ export default function MenuList(props) { transformOrigin={{ vertical: 'top', horizontal: 'center', - }}> - - { - props.items.map((item)=> - <Link to={{ - pathname : item.href, - state : item.value - }} style={{textDecoration:"none"}} key={item.value}><MenuItem style= {{fontSize:"14px", padding:"5px 20px", color:"#666"}} key={item.value}>{item.name}</MenuItem></Link> - ) - } - <StyledButtonSair onClick={handleLogout}> <StyledMenuItem disableGutters={true}>Sair<StyledExitToAppIcon/></StyledMenuItem></StyledButtonSair> + }}> + <div className={`${state.contrast}BackColor`}> + { + props.items.map((item) => + <Link to={{ + pathname: item.href, + state: item.value + }} style={{ textDecoration: "none" }} key={item.value}><MenuItem className={`${state.contrast}LinkColor`} style={{ fontSize: "14px", padding: "5px 20px", color: "#666" }} key={item.value}>{item.name}</MenuItem></Link> + ) + } + </div> + + <StyledButtonSair className={`${state.contrast}BackColor`} onClick={handleLogout}> <StyledMenuItem className={`${state.contrast}LinkColor`} disableGutters={true}>Sair<StyledExitToAppIcon className={`${state.contrast}IconColor`}/></StyledMenuItem></StyledButtonSair> </Menu> </div> ); @@ -126,7 +128,7 @@ const StyledButtonSair = styled(Button)` } ` -const StyledExitToAppIcon = styled(ExitToAppIcon) ` +const StyledExitToAppIcon = styled(ExitToAppIcon)` fontSize : 24px; color : rgb(162,165,165); align : right; diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js index 317b46b2deee315e534051f2c60b2129a5372d84..a626a7434b870de9670e8de8ea63ac790bf6c722 100644 --- a/src/Components/MobileDrawerMenu.js +++ b/src/Components/MobileDrawerMenu.js @@ -60,7 +60,7 @@ export default function MobileDrawerMenu(props) { canUserAdmin = true index++ } - + if (canUserAdmin) minhaArea.push({ name: "Administrador", @@ -119,7 +119,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*/} { @@ -137,20 +137,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", paddingBottom: "10px" }}> + <MyArea contrast={props.contrast}> <div className="user-avatar"> <img alt="user-avatar" src={getUserAvatar()} @@ -179,22 +177,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> @@ -225,7 +223,7 @@ const MyArea = styled.div` .text { font-size : 16px; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; align-self : center; } @@ -248,18 +246,21 @@ 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; + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; } .menu-buttons { @@ -268,13 +269,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; @@ -292,7 +293,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; } @@ -303,5 +304,5 @@ const MenuBody = styled.div` margin-top : 20px; display : flex; flex-direction : column; - color : #666; + ` 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/ModalAbout.js b/src/Components/ModalAbout.js index 84998e7cbe28194b29663cc6fc47a78ba8cfeec3..568305f7458dadf7600f8698270eb7e7be5a1512 100644 --- a/src/Components/ModalAbout.js +++ b/src/Components/ModalAbout.js @@ -16,188 +16,185 @@ 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 from 'react'; -import { makeStyles } from '@material-ui/styles'; -import Modal from '@material-ui/core/Modal'; +import React from "react"; +import { makeStyles } from "@material-ui/styles"; +import Modal from "@material-ui/core/Modal"; import Formulario from "./ContactForm"; -import Backdrop from '@material-ui/core/Backdrop'; -import Fade from '@material-ui/core/Fade'; - -import styled from 'styled-components' +import Backdrop from "@material-ui/core/Backdrop"; +import Fade from "@material-ui/core/Fade"; +import styled from "styled-components"; /*Importação de imagens para o componente*/ - - - -const useStyles = makeStyles(theme => ({ - modal: { - display: "flex", - alignItems: "center", - justifyContent: "center" - }, - paper: { - border: '2px solid #000', - boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)" - }, - carousel: { - width: "750px", - height:"370px", - - } +const useStyles = makeStyles((theme) => ({ + modal: { + display: "flex", + alignItems: "center", + justifyContent: "center", + }, + paper: { + border: "2px solid #000", + boxShadow: + " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", + }, + carousel: { + width: "750px", + height: "370px", + }, })); const Button = styled.button` - -background-color: #00bcd4; -color: #fff; -font-family: Roboto,sans-serif; -font-size: 14px; -font-weight: 700; -height: 36px; -border-radius: 3px; -padding-left: 16px; -padding-right: 16px; -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; -border: 0; -padding: 0 16px !important; -hite-space: nowrap; -text-decoration: none; - -` - -const Formulário = styled.div ` - background-color: #fff; - padding: 40px; - - border-radius: 4px; - - - color: #666 !important; - - h2 { - font-size: 26px; - font-weight: lighter; - margin-top: 20px; - margin-bottom: 10px; - } - - form .inputBlock { - margin-block: 22px; - - } - - form .inputBlock label { - font-size: 14px; - font-weight: bold; - display: block; - - } - - form .inputBlock input { - width: 100%; - height: 32px; + background-color: ${(props) => + props.contrast === "" ? "#00bcd4" : "black !important"}; + color: ${(props) => (props.contrast === "" ? "#fff" : "yellow !important")}; + font-family: Roboto, sans-serif; font-size: 14px; - border: 0; - border-bottom: 1px solid #eee; - - } - - form .inputBlock.Message input { - height: 131px; - } - - form buttom[type=submit] { - width: 100%; - border: 0; - margin-top: 30px; - background: #7d40e7 - border-radius: 2px; - padding: 15px 20px; - font-size: 16px; - font-weight: bold; - color: #fff; + font-weight: 700; + height: 36px; + border-radius: 3px; + padding-left: 16px; + padding-right: 16px; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); + display: inline-block; + position: relative; cursor: pointer; - transition: background 0.5s; - - } - - form buttom[type=submit]:hover { - background: #6931ac - } - - - h2 { - font-size: 24px; - font-weight: lighter; - margin-bottom: 50px; - margin-top: 20px; + min-height: 36px; + min-width: 88px; + line-height: 36px; + vertical-align: middle; + -webkit-box-align: center; + outline: none; text-align: center; - - } -` - - - - -export default function TransitionsModal() { - const classes = useStyles(); - const [open, setOpen] = React.useState(false); - - const handleOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - - return ( - - - <div style={{display:"flex", justifyContent: "center"}}> - <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/> - - <Button type="button" onClick={handleOpen}> - SUGERIR OUTRO SITE - </Button> - <Modal - aria-labelledby="transition-modal-title" - aria-describedby="transition-modal-description" - className={classes.modal} - open={open} - onClose={handleClose} - closeAfterTransition - BackdropComponent={Backdrop} - BackdropProps={{ - timeout: 500, - }} - > - <Fade in={open}> - - <div> - <Formulário> - <h2>Sugerir site de Recursos Educacionais Digitais</h2> - <Formulario/> - </Formulário> - - </div> - - </Fade> - </Modal> - </div> - ); + border: ${(props) => + props.contrast === "" ? "0" : "1px solid white !important"}; + padding: 0 16px !important; + text-decoration: ${(props) => + props.contrast === "" ? "none" : "underline !important"}; + :hover { + background-color: ${(props) => + props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"}; + } +`; + +const Formulário = styled.div` + background-color: ${props => props.contrast === "" ? "white" : "black"} !important; + padding: 40px; + + border-radius: 4px; + + + color: ${props => props.contrast === "" ? "#666" : "white"} !important; + + border: ${props => props.contrast === "" ? "" : "1px solid white"} !important; + + h2 { + font-size: 26px; + font-weight: lighter; + margin-top: 20px; + margin-bottom: 10px; + } + + form .inputBlock { + margin-block: 22px; + + } + + form .inputBlock label { + font-size: 14px; + font-weight: bold; + display: block; + + } + + form .inputBlock input { + width: 100%; + height: 32px; + font-size: 14px; + border: 0; + border-bottom: 1px solid #eee; + + } + + form .inputBlock.Message input { + height: 131px; + } + + form buttom[type=submit] { + width: 100%; + border: 0; + margin-top: 30px; + background: #7d40e7 + border-radius: 2px; + padding: 15px 20px; + font-size: 16px; + font-weight: bold; + color: #fff; + cursor: pointer; + transition: background 0.5s; + + } + + form buttom[type=submit]:hover { + background: #6931ac + } + + + h2 { + font-size: 24px; + font-weight: lighter; + margin-bottom: 50px; + margin-top: 20px; + text-align: center; + + } +`; + +export default function TransitionsModal({ contrast }) { + console.log(contrast); + const classes = useStyles(); + const [open, setOpen] = React.useState(false); + + const handleOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + return ( + <div style={{ display: "flex", justifyContent: "center" }}> + <link + href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" + rel="stylesheet" + /> + <Button type="button" onClick={handleOpen} contrast={contrast}> + SUGERIR OUTRO SITE + </Button> + <Modal + aria-labelledby="transition-modal-title" + aria-describedby="transition-modal-description" + className={classes.modal} + open={open} + onClose={handleClose} + closeAfterTransition + BackdropComponent={Backdrop} + BackdropProps={{ + timeout: 500, + }} + > + <Fade in={open}> + <div> + <Formulário contrast={contrast}> + <h2>Sugerir site de Recursos Educacionais Digitais</h2> + <Formulario contrast={contrast}/> + </Formulário> + </div> + </Fade> + </Modal> + </div> + ); } diff --git a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js index a3e6a895d2138935549d4adc8e4ab689410d1f71..cfb8ba92e9a1534e49ca0358cef1a5e186c18b9a 100644 --- a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js +++ b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js @@ -115,7 +115,7 @@ export default function ComponentAlterarAvatar (props) { <span style={{width:"32px"}}/> <StyledH2>{uploadingImage ? 'Alterar foto do perfil' : 'Editar Foto'}</StyledH2> <StyledCloseModalButton onClick={props.handleClose}> - <CloseIcon style={{color : "#666"}}/> + <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/> </StyledCloseModalButton> </HeaderDiv> <DialogDiv> diff --git a/src/Components/ModalAlterarCover/ComponentAlterarCover.js b/src/Components/ModalAlterarCover/ComponentAlterarCover.js index a4059ecfa2e5c180382a354f92728e19217198ee..18df65d36472f89da154e944bfa22c153305bc4a 100644 --- a/src/Components/ModalAlterarCover/ComponentAlterarCover.js +++ b/src/Components/ModalAlterarCover/ComponentAlterarCover.js @@ -63,7 +63,7 @@ export default function ComponentAlterarCover (props) { <span style={{width:"32px"}}/> <StyledH2>Editar Capa do Perfil</StyledH2> <StyledCloseModalButton onClick={props.handleClose}> - <CloseIcon style={{color : "#666"}}/> + <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/> </StyledCloseModalButton> </HeaderDiv> <DialogDiv> diff --git a/src/Components/ModalAvaliarRecurso.js b/src/Components/ModalAvaliarRecurso.js index 7795876d0203a82bac0c05ddbb531773b505c39e..4376cee70643c1f48b5ee74b34c86065ca0c5a2f 100644 --- a/src/Components/ModalAvaliarRecurso.js +++ b/src/Components/ModalAvaliarRecurso.js @@ -29,10 +29,10 @@ import FormControl from '@material-ui/core/FormControl'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import CloseModalButton from './CloseModalButton' import Snackbar from '@material-ui/core/Snackbar'; -import TextField from '@material-ui/core/TextField'; import { withStyles } from '@material-ui/core/styles'; import { getRequest } from './HelperFunctions/getAxiosConfig' import LoadingSpinner from '../Components/LoadingSpinner' +import {StyledTextField, useStyles} from './ReportUserForm.js' const StyledRadio = withStyles({ root: { @@ -46,6 +46,8 @@ const StyledRadio = withStyles({ export default function ModalAvaliarRecurso(props) { + const classes = useStyles(); + const [options, setOptions] = useState([]) const [avaliacao, setAvaliacao] = useState([null, null, null, null]) @@ -136,12 +138,12 @@ export default function ModalAvaliarRecurso(props) { > <Fade in={props.open}> - <Container> - <Header> + <Container contrast={props.contrast}> + <Header contrast={props.contrast}> <h2>Você está avaliando o recurso - <span style={{ fontWeight: "bolder" }}> {props.title}</span> + <span style={{ fontWeight: "bolder" }}> {props.title}</span> </h2> - <CloseModalButton handleClose={props.handleClose} /> + <CloseModalButton contrast={props.contrast} handleClose={props.handleClose} /> </Header> <Content> @@ -162,8 +164,8 @@ export default function ModalAvaliarRecurso(props) { </Grid> <Grid item xs={2}> <RadioGroup row onChange={(e) => { handleRadios(e, option.id) }}> - <FormControlLabel value={"Sim"} control={<StyledRadio />} label="Não" /> - <FormControlLabel value={"Não"} control={<StyledRadio />} label="Sim" /> + <FormControlLabel className={`${props.contrast}LinkColor`} value={"Sim"} control={<StyledRadio style={props.contrast === "" ? {} : {color: "white"}}/>} label="Não" /> + <FormControlLabel className={`${props.contrast}LinkColor`} value={"Não"} control={<StyledRadio style={props.contrast === "" ? {} : {color: "white"}}/>} label="Sim" /> </RadioGroup> </Grid> </Grid> @@ -175,10 +177,12 @@ export default function ModalAvaliarRecurso(props) { <Grid item xs={12}> <FormControl style={{ width: "100%", height: "100px" }}> <StyledTextField + contrast={props.contrast} id={"title-form"} label={"Justificativa (opcional)"} type={"text"} value={justificativa} + InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }} onChange={e => { handleChangeJustificativa(e) }} multiline fullWidth @@ -188,8 +192,8 @@ export default function ModalAvaliarRecurso(props) { <Grid item xs={12}> <ButtonsDiv> - <ButtonEnviarAvaliar disabled={buttonDisabled} onClick={() => { handleAvaliar() }}>ENVIAR AVALIAÇÂO</ButtonEnviarAvaliar> - <GreyButton onClick={() => { handleCancel() }}>CANCELAR</GreyButton> + <ButtonEnviarAvaliar contrast={props.contrast} disabled={buttonDisabled} onClick={() => { handleAvaliar() }}>ENVIAR AVALIAÇÂO</ButtonEnviarAvaliar> + <GreyButton contrast={props.contrast} onClick={() => { handleCancel() }}>CANCELAR</GreyButton> </ButtonsDiv> </Grid> </Grid> @@ -206,10 +210,9 @@ export default function ModalAvaliarRecurso(props) { } const Content = styled.div` - padding : 10px 75px 0 75px; + padding : 0 30px 20px 30px; overflow : visible; max-width : 100%; - color : #666; font-size : 16px; .main-content-text { @@ -227,10 +230,10 @@ const Content = styled.div` const Header = styled.div` display : flex; flex-direction : row; - padding : 20px 75px 0 75px; + padding : 20px 20px 20px 20px; align-items : center; justify-content : space-between; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"} !important; @media screen and (min-width : 990px) { height : 64px; @@ -262,47 +265,23 @@ const StyledModal = styled(Modal)` const Container = styled.div` box-sizing : border-box; box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12); - background-color : #fff; + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; + border: ${props => props.contrast === "" ? "" : "1px solid white"} !important; + color: ${props => props.contrast === "" ? "#666" : "white"}; align : center; display : flex; flex-direction : column; min-width : 240px; - max-height : none; + max-height : 90%; position : relative; border-radius : 4px; max-width : 100%; - - @media screen and (max-width : 699px) { - overflow : scroll; - width : 100%; - height : 100%; - } + overflow-y : scroll; p { margin : 0 0 10px; } ` -const StyledTextField = styled(TextField)` - font-size : 14px; - width : 100% !important; - full-width : 100% !important; - - .MuiFormControl-root { - margin : 18px 0 !important; - } - - label.Mui-focused { - color : #ff7f00; - } - - label.Mui-focused.Mui-error { - color : red; - } - - .MuiInput-underline::after { - border-bottom: 2px solid #ff7f00; - } -` const ButtonsDiv = styled.div` display : flex; @@ -320,13 +299,13 @@ const ButtonsDiv = styled.div` ` const GreyButton = styled(Button)` &:hover { - background-color : rgba(158,158,158,0.2) !important; + background-color : ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : ""} !important; } max-height : 36px !important; background-color : transparent !important; - color : #666 !important; - text-decoration : none !important; + color: ${props => props.contrast === "" ? "#666" : "yellow"} !important; + text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important; outline : none !important; text-align : center !important; font-weight : 600 !important; @@ -335,10 +314,12 @@ const GreyButton = styled(Button)` ` const ButtonEnviarAvaliar = styled(Button)` - color : ${(props) => props.disabled ? "rgba(0,0,0,0.38)" : "rgba(255,255,255,0.87) !important"}; + color : ${props => props.contrast === "" ? `${props.disabled ? `rgba(0,0,0,0.38)` : `rgba(255,255,255,0.87)`}` : `${props.disabled ? `white` : `yellow`}`} !important; box-shadow : ${(props) => props.disabled ? "none !important" : "0 2px 5px 0 rgba(0,0,0,.26) !important"}; font-weight : 600 !important; - background-color : ${(props) => props.disabled ? "#e9e9e9 !important" : "#ff7f00 !important"}; + background-color : ${props => props.contrast === "" ? `${props.disabled ? "#e9e9e9 !important" : "#ff7f00 !important"}` : "black !important"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important; + border: ${props => props.contrast === "" ? "" : "1px solid white"} !important; margin-left : 8px !important; margin-right : 8px !important; diff --git a/src/Components/ModalConfirmarCuradoria.js b/src/Components/ModalConfirmarCuradoria.js index 046106be576a7eea000031277db1c74a2f74df55..8acc01ad17ead5a6a6c2cc0234fc1cca4e8f98ae 100644 --- a/src/Components/ModalConfirmarCuradoria.js +++ b/src/Components/ModalConfirmarCuradoria.js @@ -76,7 +76,7 @@ export default function ModalConfirmarCuradoriaOpen(props) { }} > <Fade in={props.open}> - <Container recusado={!props.aceito}> + <Container contrast={props.contrast} recusado={!props.aceito}> <Header> <span style={{ width: "32px" }} /> <h2>Recurso a ser {props.aceito ? 'aprovado' : 'recusado'}</h2> @@ -104,17 +104,8 @@ export default function ModalConfirmarCuradoriaOpen(props) { ) } <ButtonsDiv> - { - props.aceito ? - ( - <ButtonEnviarAvaliar onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar> - ) - : - ( - <ButtonEnviarAvaliar onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar> - ) - } - <GreyButton onClick={handleCancel}>NÃO, ALTERAR AVALIAÇÃO</GreyButton> + <ButtonEnviarAvaliar contrast={props.contrast} onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar> + <GreyButton contrast={props.contrast} onClick={handleCancel}>NÃO, ALTERAR AVALIAÇÃO</GreyButton> </ButtonsDiv> </Content> </Container> @@ -128,7 +119,7 @@ const Content = styled.div` padding : 30px; overflow : visible; max-width : 100%; - color : #666; + color : inherit; font-size : 16px; text-align : start; .reason-offensive { @@ -146,7 +137,7 @@ const Header = styled.div` align-items : center; max-height : none; justify-content : space-between; - color : #666; + color : inherit; h2 { font-size : 30px; @@ -172,7 +163,8 @@ const StyledModal = styled(Modal)` const Container = styled.div` box-sizing : border-box; box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12); - background-color : #fff; + background-color : ${props => props.contrast === "" ? "white" : "black"} !important; + color : ${props => props.contrast === "" ? "#666" : "white"} !important; align : center; display : flex; flex-direction : column; @@ -180,6 +172,7 @@ const Container = styled.div` position : relative; border-radius : 4px; max-width : 100%; + border: ${props => props.contrast === "" ? "" : "1px solid white"} !important; max-height : ${props => props.recusado ? 'none' : '370px'}; @media screen and (max-width : 699px) { @@ -209,13 +202,13 @@ const ButtonsDiv = styled.div` ` const GreyButton = styled(Button)` &:hover { - background-color : rgba(158,158,158,0.2) !important; + background-color : ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : ""} !important; } max-height : 36px !important; background-color : transparent !important; - color : #666 !important; - text-decoration : none !important; + color: ${props => props.contrast === "" ? "#666" : "yellow"} !important; + text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important; outline : none !important; text-align : center !important; font-weight : 600 !important; @@ -229,10 +222,11 @@ const GreyButton = styled(Button)` ` const ButtonEnviarAvaliar = styled(Button)` - color : rgba(255,255,255,0.87) !important; - box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important; + color : ${props => props.contrast === "" ? `rgba(255,255,255,0.87)` : `yellow`} !important; font-weight : 600 !important; - background-color : #ff7f00 !important; + background-color : ${props => props.contrast === "" ? "#ff7f00" : "black"} !important; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important; + border: ${props => props.contrast === "" ? "" : "1px solid white"} !important; margin-left : 8px !important; margin-right : 8px !important; diff --git a/src/Components/ModalConfirmarUnfollow.js b/src/Components/ModalConfirmarUnfollow.js index 7d349e085ec89cac173286a5406a810cc08d04dd..e8cd5d1e4a60caaabbd00b25e9f8056f46b95f27 100644 --- a/src/Components/ModalConfirmarUnfollow.js +++ b/src/Components/ModalConfirmarUnfollow.js @@ -31,12 +31,14 @@ const HeaderDiv = styled.div` margin-top : 20px; margin-bottpm : 10px font-weight : normal; - color : #666 } ` const ContentContainer = styled.div` +color: ${props => props.contrast === "" ? "#666 !important" : "white !important"}; +background-color: ${props => props.contrast === "" ? "white !important" : "black !important"}; +border: ${props => props.contrast === "" ? "1px solid black !important" : "1px solid white !important"}; + box-sizing : border-box; - background-color : white; max-width : none; align : center; display : flex; @@ -46,7 +48,6 @@ const ContentContainer = styled.div` position : relative; padding : 10px; border-radius : 4px; - color : #666; @media screen and (max-width : 899px) { width : 100%; @@ -54,19 +55,21 @@ const ContentContainer = styled.div` } ` const ButtonCancelar = styled(Button)` +color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"}; +text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; + &:hover { background-color : rgba(158,158,158,0.2) !important; } - background-color : #fff !important; - color : #666 !important; - text-decoration : none !important; outline : none !important; text-align : center !important; ` const ButtonConfirmar = styled(Button)` - background-color : #00bcd4 !important; - color : #fff !important; + color: ${props => props.contrast === "" ? "white !important" : "yellow !important"}; + background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; + border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"}; border-radius : 3px !important; ` @@ -91,21 +94,21 @@ export default function ModalConfirmarUnfollow (props) { }} > <Fade in={props.open}> - <ContentContainer> + <ContentContainer contrast={props.contrast}> <HeaderDiv> <span style={{width:"32px"}}/> <h3> {text.header} </h3> - <CloseModalButton handleClose={props.handleClose}/> + <CloseModalButton contrast={props.contrast} handleClose={props.handleClose}/> </HeaderDiv> <div style={{display : "flex", flexDirection : "column", padding : "20px 30px"}}> <div style={{marginTop : "0", textAlign : "center", marginBottom : "20px"}}> - <span style={{fontSize : "14px", color : "#666"}}>{text.explanation}</span> + <span style={{fontSize : "14px"}}>{text.explanation}</span> </div> <div style={{display : "flex", flexDirection : "row", justifyContent: "space-evenly"}}> - <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar> - <ButtonConfirmar onClick={props.handleConfirm}>DEIXAR DE SEGUIR </ButtonConfirmar> + <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar> + <ButtonConfirmar contrast={props.contrast} onClick={props.handleConfirm}>DEIXAR DE SEGUIR </ButtonConfirmar> </div> </div> </ContentContainer> diff --git a/src/Components/ModalEditarColecao.js b/src/Components/ModalEditarColecao.js index bd8511f2d867bd1bd45198e086c11dd788ad0f99..b9fe9bd93a3923d924ba38cfb0d133e18450b4d2 100644 --- a/src/Components/ModalEditarColecao.js +++ b/src/Components/ModalEditarColecao.js @@ -36,7 +36,6 @@ export default function ModalEditarColecao (props) { aria-labelledby="transition-modal-title" aria-describedby="transition-modal-description" open={props.open} - centered="true" onClose={props.handleClose} closeAfterTransition @@ -46,14 +45,14 @@ export default function ModalEditarColecao (props) { }} > <Fade in={props.open}> - <Container> + <Container contrast={props.contrast}> <Header> <span style={{width:"32px"}}/> <h2>Editar Coleção</h2> <CloseModalButton handleClose={props.handleClose} id={props.id}/> </Header> <Content style={{paddingTop : "0"}}> - <EditarColecaoForm id={props.id} handleClose={props.handleClose} finalize={finalize}/> + <EditarColecaoForm contrast={props.contrast} id={props.id} handleClose={props.handleClose} finalize={finalize}/> </Content> </Container> </Fade> @@ -78,7 +77,6 @@ const Header = styled.div` h2 { font-size : 26px; font-weight : lighter; - color : #666 } ` @@ -98,7 +96,9 @@ const StyledModal = styled(Modal)` const Container = styled.div` box-sizing : border-box; box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12); - background-color : white; + background-color: ${props => props.contrast === "" ? "white" : "black"} !important; + color: ${props => props.contrast === "" ? "#666" : "white"} !important; + border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important; align : center; display : flex; flex-direction : column; diff --git a/src/Components/ModalExcluirColecao.js b/src/Components/ModalExcluirColecao.js index f23b819d88584a3ee2fab19dd94bf3935c90b782..40e0561db6988ce60a28dc955fd6a9bc083d18f8 100644 --- a/src/Components/ModalExcluirColecao.js +++ b/src/Components/ModalExcluirColecao.js @@ -21,8 +21,8 @@ import Modal from '@material-ui/core/Modal'; import Backdrop from '@material-ui/core/Backdrop'; import Fade from '@material-ui/core/Fade'; import styled from 'styled-components' -import GreyButton from './GreyButton.js' -import PurpleButton from './PurpleButton.js' +import { ButtonCancelar, ButtonEnviar } from './EditarColecaoForm'; +import CloseModalButton from './CloseModalButton' import SnackbarComponent from './SnackbarComponent' import {deleteRequest} from './HelperFunctions/getAxiosConfig' @@ -57,22 +57,17 @@ export default function ModalExcluirColecao (props) { <Fade in={props.open}> <> <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Coleção excluída com sucesso"}/> - <Container> + <Container contrast={props.contrast}> <Header> <h2>Tem certeza que deseja excluir esta Coleção?</h2> + <CloseModalButton handleClose={props.handleClose} id={props.id}/> </Header> <Content> <p>A exclusão de uma coleção é permanente. Não é possível desfazer.</p> <ButtonsDiv> - <GreyButton - callback={props.handleClose} - text={"CANCELAR"} - /> - <PurpleButton - callback={handleDelete} - text={"EXCLUIR"} - /> + <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar> + <ButtonEnviar contrast={props.contrast} onClick={handleDelete}>EXCLUIR</ButtonEnviar> </ButtonsDiv> </Content> </Container> @@ -112,7 +107,6 @@ const Header = styled.div` h2 { font-size : 26px; font-weight : lighter; - color : #666 } ` @@ -131,7 +125,10 @@ const StyledModal = styled(Modal)` const Container = styled.div` box-sizing : border-box; - background-color : white; + background-color: ${props => props.contrast === "" ? "white" : "black"} !important; + color: ${props => props.contrast === "" ? "#666" : "white"} !important; + border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important; + max-width : none; align : center; display : flex; @@ -141,7 +138,6 @@ const Container = styled.div` position : relative; padding : 10px; border-radius : 4px; - color : #666; @media screen and (max-width : 899px) { width : 100%; diff --git a/src/Components/Notifications.js b/src/Components/Notifications.js index d6973d15a49070fae58e2d226005b9b3162937eb..8c2396b9b9f7266fa1e56600da05f139fa89c4e8 100644 --- a/src/Components/Notifications.js +++ b/src/Components/Notifications.js @@ -15,7 +15,7 @@ GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import NotificationsIcon from '@material-ui/icons/Notifications'; import { Button } from '@material-ui/core'; import Badge from '@material-ui/core/Badge'; @@ -28,6 +28,7 @@ import { withStyles } from '@material-ui/core/styles'; import { Link } from 'react-router-dom' import { getRecipientHref } from './Activities/getRecipientHref.js' import SnackBar from '../Components/SnackbarComponent' +import { Store } from '../Store'; const StyledBadge = styled(Badge)` .MuiBadge-dot-45{ @@ -75,6 +76,7 @@ const StyledMenu = withStyles({ export default function Notification(props) { const [anchorEl, setAnchorEl] = React.useState(null); + const { state } = useContext(Store); const [notifications, setNotifications] = useState([]); const [snack, setSnack] = useState({ open: false, @@ -187,7 +189,7 @@ export default function Notification(props) { /> <StyledNotificationButton onClick={handleClick}> <StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge"> - <StyledNotificationsIcon /> + <StyledNotificationsIcon className={`${state.contrast}IconColor`} /> </StyledBadge> </StyledNotificationButton> <StyledMenu @@ -196,8 +198,9 @@ export default function Notification(props) { keepMounted open={Boolean(anchorEl)} onClose={handleClose} + contrast={state.contrast} > - <ContainerDiv> + <ContainerDiv contrast={state.contrast}> <div className="cabecalho"> <span style={{ fontSize: "15px" }}>NOTIFICAÇÕES •</span> <span className="cabecalho-marcar" onClick={handleClickNotification}>Marcar todas como lidas</span> @@ -206,7 +209,9 @@ export default function Notification(props) { notifications.map((notification) => (notification.recipient !== null) && (notification.viewed === false) && + (notification.recipient_type !== "NilClass") && <ActivityListItem + contrast={state.contrast} onMenuBar={true} avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : null} activity={notification.activity} @@ -248,11 +253,12 @@ const ContainerDiv = styled.div` overflow-y : scroll; padding : 5px 5px 5px 5px; min-width : 160px; - background-color : #f1f1f1; + background-color: ${props => props.contrast === '' ? "#f1f1f1" : "black"}; .cabecalho { border-bottom : 1px solid #dadada; padding : 10px 15px; + color: ${props => props.contrast === '' ? "black" : "yellow"}; .cabecalho-marcar { font-family: Lato,bold; @@ -260,7 +266,7 @@ const ContainerDiv = styled.div` -webkit-text-decoration-line: underline; text-decoration-line: underline; float: right; - cursor: pointer;s + cursor: pointer; } } ` diff --git a/src/Components/PasswordRecoveryComponents/Default.js b/src/Components/PasswordRecoveryComponents/Default.js index e7a45389a59a27e43ad925db4290a48d12b2c856..a11262fa7f83fda8e190cde76b1bde9cc2e314f3 100644 --- a/src/Components/PasswordRecoveryComponents/Default.js +++ b/src/Components/PasswordRecoveryComponents/Default.js @@ -1,25 +1,34 @@ import React from 'react' -import {CompletarCadastroButton} from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js' +import { CompletarCadastroButton } from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js' import FormInput from "../FormInput.js" +import styled from 'styled-components' -export default function Default (props) { +export default function Default(props) { return ( - <div style={{overflow:"hidden", display:"inline-block"}}> - <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Vamos encontrar a sua conta</h2> + <div style={{ overflow: "hidden", display: "inline-block" }}> + <Title contrast={props.contrast}>Vamos encontrar a sua conta</Title> <form onSubmit={(e) => { e.preventDefault(); props.onSubmit(e); }}> <FormInput + contrast={props.contrast} inputType={"text"} name={"email"} value={props.value} placeholder={"E-mail"} handleChange={e => props.handleChange(e)} required={true} - error = {props.error} + error={props.error} /> - <div style={{display:"flex", justifyContent:"center"}}> - <CompletarCadastroButton type="submit" >BUSCAR</CompletarCadastroButton> + <div style={{ display: "flex", justifyContent: "center" }}> + <CompletarCadastroButton contrast={props.contrast} type="submit" >BUSCAR</CompletarCadastroButton> </div> </form> </div> ) } + +const Title = styled.h2` + color: ${props => props.contrast === "" ? "" : "white"}; + font-size: 32px; + font-weight: 200; + margin-bottom: 20px; +` diff --git a/src/Components/PasswordRecoveryComponents/Error.js b/src/Components/PasswordRecoveryComponents/Error.js index 38ea3937b4b3713e2ac3b363f8d582ff6d21c0f4..6223f3a4f0c7bbd1d319c86b7a8f0c16b8e400dc 100644 --- a/src/Components/PasswordRecoveryComponents/Error.js +++ b/src/Components/PasswordRecoveryComponents/Error.js @@ -1,27 +1,49 @@ import React from 'react' -import {CompletarCadastroButton} from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js' +import { CompletarCadastroButton } from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js' import FormInput from "../FormInput.js" +import styled from 'styled-components' -export default function Error (props) { +export default function Error(props) { return ( - <div style={{overflow:"hidden", display:"inline-block"}}> - <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Ops! Não encontramos essa conta</h2> - <p>{props.value}</p> - <p>Verifique se o e-mail foi digitado corretamente ou se você utilizou algum outro e-mail.</p> + <StyledDiv contrast={props.contrast}> + <h2 className="title">Ops! Não encontramos essa conta</h2> + <p className="paragraph">{props.value}</p> + <p className="paragraph">Verifique se o e-mail foi digitado corretamente ou se você utilizou algum outro e-mail.</p> <form onSubmit={(e) => props.onSubmit(e)}> <FormInput + contrast={props.contrast} inputType={"text"} name={"email"} value={props.value} placeholder={"E-mail"} handleChange={e => props.handleChange(e)} required={true} - error = {props.error} + error={props.error} /> - <div style={{display:"flex", justifyContent:"center"}}> - <CompletarCadastroButton type="submit" >BUSCAR</CompletarCadastroButton> + <div style={{ display: "flex", justifyContent: "center" }}> + <CompletarCadastroButton contrast={props.contrast} type="submit" >BUSCAR</CompletarCadastroButton> </div> </form> - </div> + </StyledDiv> ) } + + +const StyledDiv = styled.div` + overflow: hidden; + display: inline-block; + font-size: 14px; + text-align: start; + + .paragraph{ + color: ${props => props.contrast === "" ? "" : "white"}; + } + + .title{ + color: ${props => props.contrast === "" ? "" : "white"}; + font-size: 32px; + font-weight: 200; + margin-bottom: 20px; + line-height : 30px; + } +` diff --git a/src/Components/PasswordRecoveryComponents/Success.js b/src/Components/PasswordRecoveryComponents/Success.js index 34feb617ef2094f169acb826e40ea73cd16d4e8a..1f4790bd45136dfee6aae87c7f0a84c5695ba686 100644 --- a/src/Components/PasswordRecoveryComponents/Success.js +++ b/src/Components/PasswordRecoveryComponents/Success.js @@ -1,12 +1,41 @@ import React from 'react' +import styled from 'styled-components' -export default function Default (props) { +export default function Default(props) { return ( - <div style={{overflow:"hidden", display:"inline-block", fontSize:"14px", textAlign:"start"}}> - <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Feito! Confira seu e-mail</h2> - <p> Enviamos um link para <span style={{color:"#00bcd4"}}>{String(props.email)}</span> que permite alterar sua senha. </p> - <p style={{marginBottom:"30px"}}> Caso não chegue em sua caixa de entrada, dê uma olhada em outras pastas, como lixo eletrônico ou spam. </p> - <p> Não é o seu e-mail? <span style={{color:"#00bcd4", cursor:"pointer"}} onClick={() => {props.changeSwitch('default')}}> Tente Novamente.</span></p> - </div> + <StyledDiv contrast={props.contrast}> + <h2 className="title">Feito! Confira seu e-mail</h2> + <p className="paragraph"> Enviamos um link para <span className="email">{String(props.email)}</span> que permite alterar sua senha. </p> + <p className="paragraph" style={{ marginBottom: "30px" }}> Caso não chegue em sua caixa de entrada, dê uma olhada em outras pastas, como lixo eletrônico ou spam. </p> + <p className="paragraph"> Não é o seu e-mail? <span className="link" onClick={() => { props.changeSwitch('default') }}> Tente Novamente.</span></p> + </StyledDiv> ) } + +const StyledDiv = styled.div` + overflow: hidden; + display: inline-block; + font-size: 14px; + text-align: start; + + .paragraph{ + color: ${props => props.contrast === "" ? "" : "white"}; + } + + .title{ + color: ${props => props.contrast === "" ? "" : "white"}; + font-size: 32px; + font-weight: 200; + margin-bottom: 20px; + } + + .email{ + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + } + + .link{ + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${ props => props.contrast === "" ? "none" : "underline"}; + cursor: pointer; + } +` diff --git a/src/Components/PublicationPermissionsContent.js b/src/Components/PublicationPermissionsContent.js index 2f404e49217f7c9c83541ed84c3852ce94d06b65..d235cc3a2b48d6e56484668138708089f542bdbf 100644 --- a/src/Components/PublicationPermissionsContent.js +++ b/src/Components/PublicationPermissionsContent.js @@ -1,4 +1,4 @@ -import React, {useState, useEffect} from 'react'; +import React, { useState, useEffect } from 'react'; import Typography from '@material-ui/core/Typography'; import CardContent from '@material-ui/core/CardContent'; import styled from 'styled-components' @@ -8,7 +8,8 @@ import Radio from '@material-ui/core/Radio'; import FormControl from '@material-ui/core/FormControl'; import Grid from '@material-ui/core/Grid'; import { withStyles } from '@material-ui/core/styles'; -import {getRequest} from './HelperFunctions/getAxiosConfig' +import { getRequest } from './HelperFunctions/getAxiosConfig'; +import { yellow } from "@material-ui/core/colors"; const StyledFormControl = styled(FormControl)` display: "block ruby"; @@ -16,74 +17,84 @@ const StyledFormControl = styled(FormControl)` ` const BlueRadio = withStyles({ - root: { - color: '#666', - '&$checked': { - color: '#00bcd4', + root: { + color: '#666', + '&$checked': { + color: '#00bcd4', + }, }, - }, - checked: {}, + checked: {}, })((props) => <Radio color="default" {...props} />); -export default function PublicationPermissionsContent (props) { +const ContrastRadio = withStyles({ + root: { + color: yellow[400], + '&$checked': { + color: yellow[600], + }, + }, + checked: {}, +})((props) => <Radio color="default" {...props} />); + +export default function PublicationPermissionsContent(props) { const [questionsArr, setQuestionsArr] = useState([]) - const handleSetQuestionsArr = (newArr) => {setQuestionsArr(newArr)} + const handleSetQuestionsArr = (newArr) => { setQuestionsArr(newArr) } - function handleSuccess (data) { + function handleSuccess(data) { handleSetQuestionsArr(data) } useEffect(() => { const url = `/questions/` - getRequest(url, handleSuccess, (error) => {console.log(error)}) + getRequest(url, handleSuccess, (error) => { console.log(error) }) }, []) return ( - <CardContent style={{textAlign: "start", marginBottom: "10px", lineHeight:"21px", color:"rgb(102, 102, 102)", padding:"65px"}}> - <Typography variant="h4" style={{textAlign:"center", color:"rgb(102, 102, 102)", fontSize:"26px"}}> É necessário que você declare a permissão de publicação do seu Recurso:</Typography> - <div classname="texto-termos"> - <div classname="title"> - <Typography variant = "h3" style={{textAlign:"center", fontSize:"30px", marginTop:"20px", marginBottom:"10px", color:"rgb(102, 102, 102)"}}> - PERMISSÃO DE PUBLICAÇÃO - </Typography> - </div> - <p>Ao prosseguir você concede a permissão de publicação do seu recurso ao nosso portal e se compromete a não infringir as políticas de conteúdos, estando então, + <div style={props.contrast === "" ? { textAlign: "start", lineHeight: "21px", color: "rgb(102, 102, 102)", padding: "65px" } : { textAlign: "start", lineHeight: "21px", color: "white", padding: "65px", backgroundColor: "black" }}> + <Typography variant="h4" style={props.contrast === "" ? { textAlign: "center", color: "rgb(102, 102, 102)", fontSize: "26px" } : { textAlign: "center", color: "white", fontSize: "26px" }}> É necessário que você declare a permissão de publicação do seu Recurso:</Typography> + <div classname="texto-termos"> + <div classname="title"> + <Typography variant="h3" style={props.contrast === "" ? { textAlign: "center", fontSize: "30px", marginTop: "20px", marginBottom: "10px", color: "rgb(102, 102, 102)" } : { textAlign: "center", fontSize: "30px", marginTop: "20px", marginBottom: "10px", color: "white" }}> + PERMISSÃO DE PUBLICAÇÃO + </Typography> + </div> + <p>Ao prosseguir você concede a permissão de publicação do seu recurso ao nosso portal e se compromete a não infringir as políticas de conteúdos, estando então, a partir desse momento passível de responsabilização pelo conteúdo a ser integrado a nossa rede. Para tanto atente-se as pontuações abaixo e verifique se o seu recurso está de acordo, antecipadamente, com as nossas condições. É recomendável a leitura das políticas de conteúdo estabelecidas - (<a href="/termos" style={{color:"initial"}}><strong>Políticas de Conteúdo</strong></a>) - </p> - <Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)", fontSize:"22px"}}> + (<a href="/termos" style={props.contrast === "" ? { color: "initial" } : { color: "yellow", textDecoration: "underline" }}><strong>Políticas de Conteúdo</strong></a>) + </p> + <Typography variant="h5" style={props.contrast === "" ? { fontWeight: "300", color: "rgb(102, 102, 102)", fontSize: "22px" } : { fontWeight: "300", color: "white", fontSize: "22px" }}> Para que o recurso seja publicado na plataforma é preciso que ele esteja de acordo com as diretrizes abaixo, a presença de quaisquer dos itens a seguir inviabiliza a publicação do recurso em nossa rede. - </Typography> - <p><strong>No seu recurso está presente algum destes itens abaixo?</strong></p> + </Typography> + <p><strong>No seu recurso está presente algum destes itens abaixo?</strong></p> - <StyledFormControl component="fieldset" style={{display:"BlockRuby"}} margin='dense' fullWidth={true}> - <Grid container> + <StyledFormControl component="fieldset" style={{ display: "BlockRuby" }} margin='dense' fullWidth={true}> + <Grid container> { questionsArr.map((question, index) => - (question.status === 'active' && question.id !== 4) && - <React.Fragment key={question.id}> - <Grid item xs={10}> - <p>{question.description}</p> - </Grid> - <Grid item xs={2}> - <RadioGroup row name={"radio" + (question.id)} onChange={props.handleRadios}> - <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/> - </RadioGroup> - </Grid> - </React.Fragment> - - ) + (question.status === 'active' && question.id !== 4) && + <React.Fragment key={question.id}> + <Grid item xs={10}> + <p>{question.description}</p> + </Grid> + <Grid item xs={2}> + <RadioGroup row name={"radio" + (question.id)} onChange={props.handleRadios}> + <FormControlLabel value="Sim" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Sim</span>} /> <FormControlLabel value="Não" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Não</span>} /> + </RadioGroup> + </Grid> + </React.Fragment> + + ) } </Grid> - </StyledFormControl> - </div> - </CardContent> + </StyledFormControl> + </div> + </div> ) } diff --git a/src/Components/ReportButton.js b/src/Components/ReportButton.js index 654780a75533a8deac35c1cf08121d8634915f3b..4d1bedaf1c80aa2d6822d5e6b4892ec8f6b1c63b 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 contrast={state.contrast} 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/ReportColecaoForm.js b/src/Components/ReportColecaoForm.js index 37c4a77336c79e8f58496143cbe8840725d7c4da..f2ec9fcb68e9de7d118436647e8f0a3e419883f1 100644 --- a/src/Components/ReportColecaoForm.js +++ b/src/Components/ReportColecaoForm.js @@ -21,23 +21,24 @@ import styled from 'styled-components' import Radio from '@material-ui/core/Radio'; import RadioGroup from '@material-ui/core/RadioGroup'; import FormControlLabel from '@material-ui/core/FormControlLabel'; -import TextField from '@material-ui/core/TextField'; -import {StyledFormControl, ButtonsDiv, ButtonCancelar} from './ReportUserForm.js' +import {StyledFormControl, ButtonsDiv, ButtonCancelar, StyledTextField, useStyles} from './ReportUserForm.js' import { withStyles } from '@material-ui/core/styles'; const StyledRadio = withStyles({ - root: { - color: '#666', - '&$checked': { - color: '#673ab7', + root: { + color: '#666', + '&$checked': { + color: '#673ab7', + }, }, - }, - checked: {}, + checked: {}, })((props) => <Radio color="default" {...props} />); export default function ReportColecaoForm (props) { const [value, setValue] = React.useState(-1); + const classes = useStyles(); + const handleChange = (event) => { setValue(event.target.value); }; @@ -80,7 +81,7 @@ export default function ReportColecaoForm (props) { return ( <form onSubmit={(e) => handleSubmit(e)} style={{textAlign : "left"}}> - <StyledFormControl component="fieldset"> + <StyledFormControl contrast={props.contrast} component="fieldset"> <RadioGroup value={value} onChange={handleChange}> { options.map(option => @@ -91,6 +92,7 @@ export default function ReportColecaoForm (props) { </StyledFormControl> <StyledTextField + contrast={props.contrast} id = {"report-text-field"} label={"Escreva mais sobre o problema"} value = {moreInfo.value} @@ -99,38 +101,24 @@ export default function ReportColecaoForm (props) { multiline={true} rowsMax = {"5"} error = {moreInfo.key} + InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }} required = {false} style={{width : "100%"}} /> <ButtonsDiv> - <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar> - <ButtonEnviar type="submit">ENVIAR</ButtonEnviar> + <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar> + <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar> </ButtonsDiv> </form> ) } -const StyledTextField = styled(TextField)` - .MuiFormHelperText-root { - text-align : left; - } - - label.Mui-focused { - color : #673ab7; - } - - label.Mui-focused.Mui-error { - color : red; - } - - .MuiInput-underline::after { - border-bottom: 2px solid #673ab7; - } -` const ButtonEnviar = styled(Button)` - background-color : #673ab7 !important; - color : #fff !important; + color: ${props => props.contrast === "" ? "white !important" : "yellow !important"}; + background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; + border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"}; font-size: 14px !important; font-weight: 500 !important; height: 36px !important; @@ -142,7 +130,6 @@ const ButtonEnviar = styled(Button)` min-width : 88px !important; vertical-align : middle !important; margin : 6px 8px !important; - text-decoration : none !important; .MuiButton-label { padding-right : 16px; diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js index 079ca75fd3dd6454d6e26263767ac33d3ad3b556..a35f4e4ae308ebea12f65113f8638e827fe69452 100644 --- a/src/Components/ReportModal.js +++ b/src/Components/ReportModal.js @@ -33,7 +33,7 @@ import SnackbarComponent from './SnackbarComponent.js' function CloseModalButton (props) { return ( <StyledCloseModalButton onClick={props.handleClose}> - <CloseIcon/> + <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/> </StyledCloseModalButton> ) } @@ -66,23 +66,22 @@ export default function ReportModal (props) { switch (formType) { case 'colecao': return ( - <ReportColecaoForm handleClose={props.handleClose} handleSubmit={handleSubmit}/> + <ReportColecaoForm contrast={props.contrast} handleClose={props.handleClose} handleSubmit={handleSubmit}/> ) case 'recurso': - return ( - <ReportRecursoForm handleClose={props.handleClose} handleSubmit={handleSubmit}/> + return ( + <ReportRecursoForm contrast={props.contrast} handleClose={props.handleClose} handleSubmit={handleSubmit}/> ) default: return ( - <ReportUserForm handleClose={props.handleClose} handleSubmit={handleSubmit}/> + <ReportUserForm contrast={props.contrast} handleClose={props.handleClose} handleSubmit={handleSubmit}/> ) } } return ( <React.Fragment> - <SnackbarComponent snackbarOpen={snackbarOpen} severity={"success"} handleClose={() => {handleSnackbar(false)}} text={"Sua reclamação foi recebida."} - /> + <SnackbarComponent snackbarOpen={snackbarOpen} severity={"success"} handleClose={() => {handleSnackbar(false)}} text={"Sua reclamação foi recebida."}/> <StyledModal aria-labelledby="transition-modal-title" aria-describedby="transition-modal-description" @@ -97,7 +96,7 @@ export default function ReportModal (props) { }} > <Fade in={props.open}> - <ReportContainer> + <ReportContainer className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}> <Header> <span style={{width:"32px"}}/> <h2>O que está acontecendo?</h2> @@ -134,7 +133,6 @@ const Header = styled.div` h2 { font-size : 26px; font-weight : lighter; - color : #666 } ` @@ -163,7 +161,6 @@ const StyledModal = styled(Modal)` const ReportContainer = styled.div` box-sizing : border-box; - background-color : white; max-width : none; align : center; display : flex; diff --git a/src/Components/ReportRecursoForm.js b/src/Components/ReportRecursoForm.js index a1c7312713319d9b4320cf4bc844d3c160c5ed79..b0d57b9986edfca73b92873e5f7dd5b531c6d59b 100644 --- a/src/Components/ReportRecursoForm.js +++ b/src/Components/ReportRecursoForm.js @@ -16,10 +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 from 'react'; +import { Button } from '@material-ui/core'; +import styled from 'styled-components' import Radio from '@material-ui/core/Radio'; import RadioGroup from '@material-ui/core/RadioGroup'; import FormControlLabel from '@material-ui/core/FormControlLabel'; -import {StyledFormControl, StyledTextField, ButtonsDiv, ButtonCancelar, ButtonEnviar} from './ReportUserForm.js' +import {StyledFormControl, StyledTextField, ButtonsDiv, ButtonCancelar, useStyles} from './ReportUserForm.js' import { withStyles } from '@material-ui/core/styles'; const StyledRadio = withStyles({ @@ -35,6 +37,8 @@ const StyledRadio = withStyles({ export default function ReportRecursoForm (props) { const [value, setValue] = React.useState(-1); + const classes = useStyles(); + const handleChange = (event) => { setValue(event.target.value); }; @@ -77,7 +81,7 @@ export default function ReportRecursoForm (props) { return ( <form onSubmit={(e) => handleSubmit(e)} style={{textAlign : "left"}}> - <StyledFormControl component="fieldset"> + <StyledFormControl contrast={props.contrast} component="fieldset"> <RadioGroup value={value} onChange={handleChange}> { options.map(option => @@ -88,6 +92,7 @@ export default function ReportRecursoForm (props) { </StyledFormControl> <StyledTextField + contrast={props.contrast} id = {"report-text-field"} label={"Escreva mais sobre o problema"} value = {moreInfo.value} @@ -96,14 +101,38 @@ export default function ReportRecursoForm (props) { multiline={true} rowsMax = {"5"} error = {moreInfo.key} + InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }} required = {false} style={{width : "100%"}} /> <ButtonsDiv> - <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar> - <ButtonEnviar type="submit">ENVIAR</ButtonEnviar> + <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar> + <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar> </ButtonsDiv> </form> ) } + +export const ButtonEnviar = styled(Button)` + color: ${props => props.contrast === "" ? "white !important" : "yellow !important"}; + background-color: ${props => props.contrast === "" ? "#f07e05 !important" : "black !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; + border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"}; + font-size: 14px !important; + font-weight: 500 !important; + height: 36px !important; + border-radius: 3px !important; + padding-left: 16px !important; + padding-right: 16px !important; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important; + outline : none !important; + min-width : 88px !important; + vertical-align : middle !important; + margin : 6px 8px !important; + + .MuiButton-label { + padding-right : 16px; + padding-left : 16px; + } +` \ No newline at end of file diff --git a/src/Components/ReportUserForm.js b/src/Components/ReportUserForm.js index 370865722d5a85cb2b458f326b891dbfe962a3e8..1677c489b694b0cd1ebb173244499a2e4c187826 100644 --- a/src/Components/ReportUserForm.js +++ b/src/Components/ReportUserForm.js @@ -23,20 +23,37 @@ import RadioGroup from '@material-ui/core/RadioGroup'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControl from '@material-ui/core/FormControl'; import TextField from '@material-ui/core/TextField'; -import { withStyles } from '@material-ui/core/styles'; +import { withStyles, makeStyles } from '@material-ui/core/styles'; const StyledRadio = withStyles({ - root: { - '&$checked': { - color: '#ff7f00 !important', + root: { + '&$checked': { + color: '#ff7f00 !important', + }, }, - }, - checked: {}, -})((props) => <Radio color="default" {...props} />); + checked: {}, +})((props) => <Radio {...props} />); + +export const useStyles = makeStyles(theme => ({ + darkTextField: { + maxWidth: "100%", + fontSize: "15px", + color: "white", + width: "100%" + }, + lightTextField: { + maxWidth: "100%", + fontSize: "15px", + color: "black", + width: "100%" + } +})); export default function ReportForm (props) { const [value, setValue] = useState(-1); + const classes = useStyles(); + const handleChange = (event) => { setValue(event.target.value); }; @@ -78,17 +95,18 @@ export default function ReportForm (props) { return ( <form onSubmit={(e) => {formSubmit(e)}}> - <StyledFormControl component="fieldset"> + <StyledFormControl contrast={props.contrast} component="fieldset"> <RadioGroup value={value} onChange={handleChange}> { options.map(option => - <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} /> + <FormControlLabel value={option.value} control={<StyledRadio contrast={props.contrast}/>} label={option.text} /> ) } </RadioGroup> </StyledFormControl> <StyledTextField + contrast={props.contrast} id = {"Escreva mais sobre o problema"} label={"Escreva mais sobre o problema"} type = {"text"} @@ -98,13 +116,14 @@ export default function ReportForm (props) { multiline={true} rowsMax = {"5"} error = {moreInfo.key} + InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }} required = {false} style={{width:"100%"}} /> <ButtonsDiv> - <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar> - <ButtonEnviar type="submit">ENVIAR</ButtonEnviar> + <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar> + <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar> </ButtonsDiv> </form> ); @@ -118,23 +137,23 @@ export const ButtonsDiv = styled.div` ` export const ButtonCancelar = styled(Button)` - &:hover { - background-color : rgba(158,158,158,0.2) !important; - } + color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; height : 36px !important; padding-left : 16px !important; padding-right : 16px !important; font-weight : 500 !important; border-radius : 3px !important; - color :#666 !important; background-color: transparent; min-width : 88px !important; height : 36px !important; ` export const ButtonEnviar = styled(Button)` - background-color : #ff7f00 !important; - color : #fff !important; + color: ${props => props.contrast === "" ? "white !important" : "yellow !important"}; + background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; + border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"}; font-size: 14px !important; font-weight: 500 !important; height: 36px !important; @@ -146,7 +165,6 @@ export const ButtonEnviar = styled(Button)` min-width : 88px !important; vertical-align : middle !important; margin : 6px 8px !important; - text-decoration : none !important; .MuiButton-label { padding-right : 16px; @@ -154,26 +172,43 @@ export const ButtonEnviar = styled(Button)` } ` export const StyledTextField = styled(TextField)` - .MuiFormHelperText-root { - text-align : left; + + padding: 20px 20px 20px 20px; + .MuiOutlinedInput-root { + &.Mui-focused fieldset { + border-color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"}; + } + fieldset { + border-color: ${props => props.contrast === "" ? "#666" : "white"}; + } + } + + label{ + color: ${props => props.contrast === "" ? "#666" : "white"}; } label.Mui-focused { - color : orange; + color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"}; } - label.Mui-focused.Mui-error { - color : red; + .MuiFormHelperText-root { + text-align : left; + color: ${props => props.contrast === "" ? "#666" : "white"}; } .MuiInput-underline::after { - border-bottom: 2px solid orange; + border-bottom: 2px solid ${props => props.contrast === "" ? "#ff7f00" : "yellow"}; } + ` export const StyledFormControl = styled(FormControl)` .MuiFormControlLabel-root { - color : #666; + color: ${props => props.contrast === "" ? "#666" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + } + .MuiIconButton-label { + color: ${props => props.contrast === "" ? "#666" : "white"}; } .PrivateRadioButtonIcon-checked { diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js index d81a0ade52633603458f126908d9bf1e826c34f6..009310081359e26e51a92cc2fb07395fba1f9bf2 100644 --- a/src/Components/ResourceCardFunction.js +++ b/src/Components/ResourceCardFunction.js @@ -16,8 +16,9 @@ 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, useEffect } from 'react'; -import { Store } from '../Store.js' +import React, { useState, useEffect, useContext } from 'react'; +import { Store } from '../Store' +import "./carousel.css"; import Card from '@material-ui/core/Card'; import { apiDomain } from '../env'; import ResourceCardOptions from './ResourceCardOptions' @@ -43,7 +44,7 @@ import { noAvatar } from "ImportImages.js"; import { IcDefault } from "ImportImages.js"; export default function ResourceCardFunction(props) { - const { state } = useContext(Store) + const { state } = useContext(Store); const [thumbnail, setThumbnail] = useState(null) // eslint-disable-next-line const [label, setLabel] = useState(props.type) @@ -67,7 +68,7 @@ export default function ResourceCardFunction(props) { setThumbnail(`${apiDomain}` + props.thumbnail) } else { - setThumbnail(getDefaultThumbnail(label)) + setThumbnail(getDefaultThumbnail(label)) } if (props.avatar) { @@ -85,10 +86,14 @@ export default function ResourceCardFunction(props) { } const handleLike = () => { - if (state.currentUser.id) - putRequest(`/learning_objects/${props.id}/like/`, {}, handleSuccessLike, (error) => { console.log(error) }) - else + if (!state.currentUser.id) { handleLogin() + } + else { + const url = `/learning_objects/${props.id}/like/` + + putRequest(url, {}, handleSuccessLike, (error) => { console.log(error) }) + } } const handleLogin = () => { @@ -106,9 +111,9 @@ export default function ResourceCardFunction(props) { handleSuccessfulLogin(false); } - const SlideAnimationContent = () => { + const SlideAnimationContent = (contrast) => { return ( - <SlideContentDiv> + <SlideContentDiv style={contrast === '' ? { backgroundColor: "#ff9226" } : { backgroundColor: "inherit" }}> <div style={{ padding: 7 }}> <HeaderContainer container="row" justify="flex-start" alignItems="center" >{/*marginBottom:10px*/} <AvatarDiv item xs={2}> @@ -119,13 +124,13 @@ export default function ResourceCardFunction(props) { <p>{props.author}</p> </EnviadoPor> </HeaderContainer> - { + { //className={`${props.contrast}BackColor`} --- props.tags ? <TagContainer container direction="row"> { props.tags.map((tag) => <Grid item key={tag.id}> - <span >{tag.name}</span> + <span className={`${props.contrast}BackColor ${props.contrast}Text`}>{tag.name}</span> </Grid> ) } @@ -139,9 +144,9 @@ export default function ResourceCardFunction(props) { return ( <React.Fragment> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar} @@ -150,7 +155,7 @@ export default function ResourceCardFunction(props) { <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> </Snackbar> <StyledCard> - <CardDiv> + <CardDiv className={`${props.contrast}Text ${props.contrast}Border`}> <CardReaDiv> <Link to={props.href}> <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}> @@ -159,25 +164,25 @@ export default function ResourceCardFunction(props) { </div> { <div className={`slideContentLinkAfterActive${slideIn}`}> - <div className="text" > - {SlideAnimationContent()} + <div className={`${props.contrast}Text ${props.contrast}BackColor`} style={{ width: "100%" }}> + {SlideAnimationContent(props.contrast)} </div> </div> } </Header> </Link> - <Description> - <Link to={props.href} className="text" style={{ height: '45px' }}> {/*add link to learningObject*/} - <Title> + <Description className={`${props.contrast}BackColor`}> + <Link to={props.href} className={`${props.contrast}Text`} style={{ height: '45px', width: "100%" }}> {/*add link to learningObject*/} + <Title className={`${props.contrast}LinkColor`}> {props.title} </Title> </Link> <Rating + style={props.contrast === "" ? {} : { color: "white" }} name="customized-empty" value={props.rating} readOnly - style={{ color: "#666" }} - emptyIcon={<StarBorderIcon fontSize="inherit" />} + emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />} /> <Footer> <Type> @@ -187,24 +192,29 @@ export default function ResourceCardFunction(props) { <LikeCounter> <span>{likesCount}</span> <ButtonNoWidth onClick={handleLike}> - <FavoriteIcon style={{ color: liked ? "red" : "#666" }} /> + <FavoriteIcon className={`${props.contrast}LinkColor`} style={props.contrast === "" ? { color: liked ? "red" : "#666" } : { color: liked ? "red" : "white" }} /> </ButtonNoWidth> </LikeCounter> </Footer> </Description> </CardReaDiv> - <CardReaFooter> - <div style={{ display: "flex", height: "100%" }}> - <ButtonGuardarColecao thumb={props.thumbnail} title={props.title} learningObjectId={props.id} - /> - </div> - <ResourceCardOptions - learningObjectId={props.id} - downloadableLink={props.downloadableLink} - thumb={props.thumbnail} - title={props.title} - handleLogin={handleLogin} - /> + <CardReaFooter className={`${props.contrast}BackColor`}> + <Grid container> + <Grid item xs={2}></Grid> + <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}> + <ButtonGuardarColecao contrast={props.contrast} thumb={props.thumbnail} title={props.title} learningObjectId={props.id} /> + </Grid> + <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-end" }}> + <ResourceCardOptions + contrast={props.contrast} + learningObjectId={props.id} + downloadableLink={props.downloadableLink} + thumb={props.thumbnail} + title={props.title} + handleLogin={handleLogin} + /> + </Grid> + </Grid> </CardReaFooter> </CardDiv> </StyledCard> @@ -223,18 +233,16 @@ export const TagContainer = styled(Grid)` ${'' /* border : 2px solid red; */} span { word-wrap: break-word; - background-color : #fff; display : flex; justify-content : center; align-items : center; height : 22px; - tet-align : center; + text-align: center; margin: 3px; -webkit-box-direction: normal; overflow : hidden; padding : 1px 8px; border-radius : 10px; - color : #666; font-size : 11px; } ` @@ -269,7 +277,6 @@ export const AvatarDiv = styled(Grid)` ` const SlideContentDiv = styled.div` - background-color : #ff9226; ${'' /* padding : 10px; */} width : 272.5px; height : 189px; @@ -280,8 +287,6 @@ const CardReaFooter = styled.div` height : 60px; display : flex; justify-content : space-between; - border-top : 1px solid #e5e5e5; - border-bottom : 1px solid #e5e5e5; align-items : center; padding : 0 15px 0 15px; ` @@ -292,7 +297,6 @@ export const ButtonNoWidth = styled(Button)` min-width : 24px !important; max-height : 24px !important; padding : 0 !important; - background-color : #fff !important; color : #a5a5a5 !important; border : 0 !important; @@ -315,7 +319,6 @@ export const LikeCounter = styled.div` .btn-like { padding : 0 !important; - background-color : #fff !important; border : 0 !important; min-width : min-content; } @@ -334,7 +337,7 @@ const Type = styled.div` height : 27px; width : 27px; padding-right : .4em; - vertical-align : middle + vertical-align : middle; align-self : center; .st1 { @@ -353,7 +356,6 @@ export const Footer = styled.div` const Description = styled.div` display : flex; flex : 1; - background-color : #fff; flex-direction : column; justify-content: space-between; padding : 15px; @@ -402,7 +404,6 @@ export const CardReaDiv = styled.div` ` export const CardDiv = styled.div` - background-color : #fff; text-align : start; font-family : 'Roboto', sans serif; color : #666; @@ -410,7 +411,7 @@ export const CardDiv = styled.div` export const StyledCard = styled(Card)` width : 272.5px; - max-height : 380px; + min-height : 380px; margin-top : 10px; margin-bottom : 10px; ${'' /* max-width : 345px; */} diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js index 1ac22f4a6e309b55d70acb582516257aa1def8d0..e0a2f0eff01375b05430c609fea816b67d7b455a 100644 --- a/src/Components/ResourceCardOptions.js +++ b/src/Components/ResourceCardOptions.js @@ -115,57 +115,58 @@ export default function ResourceCardOptions(props) { <> <React.Fragment> - <ReportModal open={reportModal} handleClose={() => handleModalReportar(false)} + <ReportModal contrast={props.contrast} open={reportModal} handleClose={() => handleModalReportar(false)} form="recurso" complainableId={props.learningObjectId} complainableType={"LearningObject"} {...props} /> - <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }} + <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }} thumb={props.thumb} title={props.title} recursoId={props.learningObjectId} /> - <ShareModal open={shareOpen} handleClose={() => { toggleShare(false) }} + <ShareModal contrast={props.contrast} open={shareOpen} handleClose={() => { toggleShare(false) }} thumb={props.thumb} title={props.title} link={getShareablePageLink()} /> <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => { toggleSnackbar(false) }} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"} /> <div style={{ fontSize: "12px", display: "flex", flexDirection: "column", justifyContent: "center" }}> - <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{ color: "#666" }}> - <MoreVertIcon style={{ color: "#666" }} /> + <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}> + <MoreVertIcon className={`${props.contrast}LinkColor ${props.contrast}Text`} /> </ButtonNoWidth> <Menu + className={`${props.contrast}Text`} id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose} - > - <StyledMenuItem> + > + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleClose}> <Link to={"/recurso/" + props.learningObjectId}> - <ListItemIcon><OpenIcon /></ListItemIcon>Abrir + <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir </Link> </StyledMenuItem> - <StyledMenuItem onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}> - <ListItemIcon><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}> + <ListItemIcon className={`${props.contrast}IconColor`}><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia </StyledMenuItem> { props.downloadableLink && - <StyledMenuItem onClick={() => { enableDownload(); handleClose() }}> - <ListItemIcon><DownloadIcon /></ListItemIcon>Baixar + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => { enableDownload(); handleClose() }}> + <ListItemIcon className={`${props.contrast}IconColor`}><DownloadIcon /></ListItemIcon>Baixar </StyledMenuItem> } - <StyledMenuItem onClick={handleShare}> - <ListItemIcon><ShareIcon /></ListItemIcon>Compartilhar + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleShare}> + <ListItemIcon className={`${props.contrast}IconColor`}><ShareIcon /></ListItemIcon>Compartilhar </StyledMenuItem> - <StyledMenuItem onClick={handleGuardar}> - <ListItemIcon><AddIcon /></ListItemIcon>Guardar + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleGuardar}> + <ListItemIcon className={`${props.contrast}IconColor`}><AddIcon /></ListItemIcon>Guardar </StyledMenuItem> - <StyledMenuItem onClick={() => { handleReport() }}> - <ListItemIcon><ReportIcon /></ListItemIcon>Reportar + <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => { handleReport() }}> + <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar </StyledMenuItem> </Menu> @@ -180,9 +181,6 @@ const ButtonNoWidth = styled(Button)` min-width : 24px !important; max-height : 24px !important; padding : 0 !important; - background-color : #fff !important; - color : #a5a5a5 !important; - border : 0 !important; .MuiButton-root { width : 24px !important; @@ -200,12 +198,11 @@ const ButtonNoWidth = styled(Button)` ` const StyledMenuItem = styled(MenuItem)` - color : #666 !important; + background-color: ${props => props.contrast === "" ? "white" : "black"} !important; .MuiSvgIcon-root { vertical-align : middle !important; } a { - text-decoration : none !important; - color : #666 !important; + color: inherit !important; } ` diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js index e32176c7166f62820cf88517c7f8f5dc8faf503c..67d22bc760ce3bf1e3449ddad59fb7755a8020b4 100644 --- a/src/Components/ResourceList.js +++ b/src/Components/ResourceList.js @@ -124,27 +124,27 @@ export default function ResourceList(props) { <ResourceListContainer> <Grid container direction="row" justify="space-around" alignItems="center"> <Grid item> - <Title> + <Title contrast={props.contrast}> {props.resources.length ? props.resources.length + " recurso" + (props.resources.length === 1 ? "" : "s") : "Carregando coleção"} </Title> </Grid> <Grid item> - <Button color="primary" onClick={() => setSelectable(!selectable)}> - <PanelButtonText> + <Button onClick={() => setSelectable(!selectable)}> + <PanelButtonText contrast={props.contrast}> {selectable ? "Desativar" : "Ativar"} seleção </PanelButtonText> </Button> </Grid> <Grid item> <Button - color="primary" + style={props.contrast === "" ? {color: "#3f51b5", border: "1px solid #3f51b5"} : {color: "white", border: "1px solid white"}} variant="outlined" startIcon={<GetAppIcon fontSize="large" />} onClick={handleDownloadSelection} > - <PanelButtonText>baixar seleção</PanelButtonText> + <PanelButtonText contrast={props.contrast}>baixar seleção</PanelButtonText> </Button> </Grid> </Grid> @@ -153,6 +153,7 @@ export default function ResourceList(props) { return ( <ResourceGrid item key={card.title}> <ResourceCardFunction + contrast={props.contrast} avatar={card.avatar} id={card.id} thumbnail={card.thumbnail} @@ -169,8 +170,8 @@ export default function ResourceList(props) { /> {selectable ? (<SelectButton + contrast={props.contrast} variant="outline" - color="primary" startIcon={checkBoxIcon(selected[props.resources.indexOf(card)])} onClick={() => updateSelected(props.resources.indexOf(card))} > @@ -205,15 +206,19 @@ const ResourceListContainer = styled.div` margin-right: 20; ` const Title = styled.p` - color: rgb(102, 102, 102); + color: ${props => props.contrast === "" ? "#666 !important" : "white !important"}; font-size: 2em; font-weigth: 300; ` const SelectButton = styled(Button)` width: 100%; + color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; ` const PanelButtonText = styled.span` font-weight: 900; + color: ${props => props.contrast === "" ? "#3f51b5 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; ` const ResourceGrid = styled(Grid)` padding-right: 7px; diff --git a/src/Components/ResourcePageComponents/CommentForm.js b/src/Components/ResourcePageComponents/CommentForm.js index 0272d76fc6f63b264b9197d390818729caa46cc1..d25d8d080113f93b188b9a63f24090aa9d0eb44d 100644 --- a/src/Components/ResourcePageComponents/CommentForm.js +++ b/src/Components/ResourcePageComponents/CommentForm.js @@ -1,65 +1,86 @@ -import React, { useState } from 'react' -import styled from 'styled-components' -import Rating from '@material-ui/lab/Rating'; -import StarIcon from '@material-ui/icons/Star'; +import React, { useState } from "react"; +import styled from "styled-components"; +import Rating from "@material-ui/lab/Rating"; +import StarIcon from "@material-ui/icons/Star"; import TextField from "@material-ui/core/TextField"; -import { Button } from '@material-ui/core'; -import EditIcon from '@material-ui/icons/Edit'; -import Grid from '@material-ui/core/Grid'; -import { postRequest } from '../HelperFunctions/getAxiosConfig' +import { Button } from "@material-ui/core"; +import EditIcon from "@material-ui/icons/Edit"; +import Grid from "@material-ui/core/Grid"; +import { postRequest } from "../HelperFunctions/getAxiosConfig"; +import { makeStyles } from "@material-ui/styles"; + +const useStyles = makeStyles((theme) => ({ + darkTextField: { + maxWidth: "100%", + fontSize: "15px", + fontWeight: "lighter", + color: "white", + width: "100%", + }, + lightTextField: { + maxWidth: "100%", + fontSize: "15px", + fontWeight: "lighter", + color: "black", + width: "100%", + }, +})); export default function CommentForm(props) { + const classes = useStyles(); + const [rating, setRating] = useState({ error: true, - value: 0 - }) + value: 0, + }); const [comment, setComment] = useState({ error: false, - value: '' - }) + value: "", + }); const handleChange = (e) => { - const userInput = e.target.value - const flag = (userInput.length === 0 ? true : false); - setComment({ ...comment, error: flag, value: userInput }) - } + const userInput = e.target.value; + const flag = userInput.length === 0 ? true : false; + setComment({ ...comment, error: flag, value: userInput }); + }; - const [attemptedSubmit, setAttempt] = useState(false) + const [attemptedSubmit, setAttempt] = useState(false); function handleSuccess(data) { - props.handleSnackbar(1) - props.rerenderCallback() + props.handleSnackbar(1); + props.rerenderCallback(); } const handleSubmit = (e) => { - e.preventDefault() - const finalRating = rating - const finalComment = comment + e.preventDefault(); + const finalRating = rating; + const finalComment = comment; if (!(finalRating.error || finalComment.error)) { - let type = props.recurso ? 'learning_objects' : 'collections' - const url = `/${type}/${props.recursoId}/reviews` + let type = props.recurso ? "learning_objects" : "collections"; + const url = `/${type}/${props.recursoId}/reviews`; let payload = { - "review": { - "description": finalComment.value, - "review_ratings_attributes": [ + review: { + description: finalComment.value, + review_ratings_attributes: [ { - "rating_id": 1, - "value": finalRating.value - } - ] - } - } + rating_id: 1, + value: finalRating.value, + }, + ], + }, + }; - postRequest(url, payload, handleSuccess, (error) => { console.log(error) }) - } - else { - setAttempt(true) + postRequest(url, payload, handleSuccess, (error) => { + console.log(error); + }); + } else { + setAttempt(true); } - } + }; return ( - <StyledForm onSubmit={handleSubmit}> + <StyledForm onSubmit={handleSubmit} contrast={props.contrast}> <label htmlFor="avaliacao-estrelas" className="start-label"> {props.recurso ? "Este recurso foi útil?*" : "Esta coleção foi útil?*"} </label> @@ -68,96 +89,185 @@ export default function CommentForm(props) { name="avaliacao-estrelas" value={rating.value} precision={0.5} - style={{ color: "#ff9226" }} - onChange={(e, newValue) => { setRating({ ...rating, error: newValue === null ? true : false, value: newValue }) }} - emptyIcon={<StarIcon fontSize="inherit" style={{ color: "#666" }} />} - getLabelText={(value) => { return (value + ' Estrela' + (value !== 1 ? 's' : '')) }} + style={ + props.contrast === "" ? { color: "#ff9226" } : { color: "yellow" } + } + onChange={(e, newValue) => { + setRating({ + ...rating, + error: newValue === null ? true : false, + value: newValue, + }); + }} + emptyIcon={ + <StarIcon + fontSize="inherit" + style={ + props.contrast === "" ? { color: "#666" } : { color: "white" } + } + /> + } + getLabelText={(value) => { + return value + " Estrela" + (value !== 1 ? "s" : ""); + }} /> </div> - <div className="star-alert" style={attemptedSubmit ? { visibility: "visible" } : { visibility: "hidden" }}>{props.recurso ? "Avalie se o recurso foi útil." : "Avalie se esta coleção foi útil."}</div> + <div + className="star-alert" + style={ + attemptedSubmit ? { visibility: "visible" } : { visibility: "hidden" } + } + > + {props.recurso + ? "Avalie se o recurso foi útil." + : "Avalie se esta coleção foi útil."} + </div> <Grid container> <Grid item xs={12} md={9}> <StyledTextField + contrast={props.contrast} colecao={!props.recurso} value={comment.value} + InputProps={ + props.contrast === "" + ? { className: classes.lightTextField } + : { className: classes.darkTextField } + } multiline rows="5" + variant="outlined" error={comment.error} label="Relate sua experiência" - onChange={e => handleChange(e)} + onChange={(e) => handleChange(e)} required={true} - help={comment.error ? (props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção") : ''} + help={ + comment.error + ? props.recurso + ? "Escreva aqui a sua experiência com este Recurso" + : "Escreva aqui a sua experiência com esta Coleção" + : "" + } /> </Grid> <Grid item xs={12} md={3}> - <div style={{ height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}> - { - props.recurso ? - ( - <OrangeButton type="submit">Publicar</OrangeButton> - ) - : - ( - <PurpleButton type="submit"><EditIcon />Enviar</PurpleButton> - ) - } + <div + style={{ + height: "100%", + display: "flex", + flexDirection: "column", + justifyContent: "flex-end", + }} + > + {props.recurso ? ( + <OrangeButton contrast={props.contrast} type="submit"> + Publicar + </OrangeButton> + ) : ( + <PurpleButton contrast={props.contrast} type="submit"> + <EditIcon style={props.contrast === "" ? { marginRight: "0.3em" } : { color: "white", marginRight: "0.3em" }} /> + Enviar + </PurpleButton> + )} </div> </Grid> <div className="campos-obrigatorios">* Campos obrigatórios.</div> - </Grid > + </Grid> </StyledForm> - ) + ); } const PurpleButton = styled(Button)` - background-color : #673ab7 !important; - box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important; - font-weight : 600 !important; - color : #fff !important; - .icon { - vertical-align : middle !important; - font-weight : normal !important; - font-style : normal !important; - font-size : 24px !important; - line-height : 1 !important; - letter-spacing : normal !important; - text-transform : none !important; - display : inline-block !important; - white-space : nowrap !important; - word-wrap : normal !important; - direction : ltr !important; - padding-right : 2px; - } -` + color: ${(props) => + props.contrast === "" + ? "rgba(255,255,255,0.87) !important" + : "yellow !important"}; + text-decoration: ${(props) => + props.contrast === "" ? "none !important" : "underline !important"}; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important; + font-weight: 600 !important; + background-color: ${(props) => + props.contrast === "" ? "#673ab7 !important" : "black !important"}; + border: ${(props) => + props.contrast === "" ? "0 !important" : "1px solid white !important"}; + :hover { + background-color: ${(props) => + props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"}; + } + .icon { + vertical-align: middle !important; + font-weight: normal !important; + font-style: normal !important; + font-size: 24px !important; + line-height: 1 !important; + letter-spacing: normal !important; + text-transform: none !important; + display: inline-block !important; + white-space: nowrap !important; + word-wrap: normal !important; + direction: ltr !important; + padding-right: 2px; + } +`; const OrangeButton = styled(Button)` - color : rgba(255,255,255,0.87) !important; - box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important; - font-weight : 600 !important; - background-color : #ff7f00 !important; -` + color: ${(props) => + props.contrast === "" + ? "rgba(255,255,255,0.87) !important" + : "yellow !important"}; + text-decoration: ${(props) => + props.contrast === "" ? "none !important" : "underline !important"}; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important; + font-weight: 600 !important; + background-color: ${(props) => + props.contrast === "" ? "#ff7f00 !important" : "black !important"}; + border: ${(props) => + props.contrast === "" ? "0 !important" : "1px solid white !important"}; + :hover { + background-color: ${(props) => + props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"}; + } +`; const StyledTextField = styled(TextField)` - .MuiInputBase-root { - margin-bottom : 5px; - } + .MuiInputBase-root { + margin-bottom: 5px; + } - label.Mui-focused { - color : ${props => props.colecao ? "#673ab7" : "rgb(255,127,0)"} + .MuiOutlinedInput-root { + &.Mui-focused fieldset { + border-color: ${(props) => + props.contrast === "" + ? props.colecao + ? "#673ab7" + : "rgb(255,127,0)" + : "yellow"}; } - - .MuiInput-underline::after { - border-bottom: ${props => props.colecao ? "2px solid #673ab7" : "2px solid rgb(255,127,0)"}; + fieldset { + border-color: ${(props) => (props.contrast === "" ? "#666" : "white")}; } + } - label.Mui-focused.Mui-error { - color : red; - } + label { + color: ${(props) => (props.contrast === "" ? "#666" : "white")}; + } + + label.Mui-focused { + color: ${(props) => + props.contrast === "" + ? props.colecao + ? "#673ab7" + : "rgb(255,127,0)" + : "yellow"}; + } - width: 95%; -` + label.Mui-focused.Mui-error { + color: red; + } + + width: 95%; +`; const StyledForm = styled.form` display : flex; @@ -169,7 +279,7 @@ const StyledForm = styled.form` max-width : 100%; display : inline-block; margin-bottom : 0; - color : #a5a5a5; + color : ${(props) => (props.contrast === "" ? "#666" : "white")} font-weight : 400; } @@ -194,4 +304,4 @@ const StyledForm = styled.form` font-size : 12px; color :#a5a5a5; } -` +`; diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js index 1ee202d977fc2d919a473fcb03ac6dbf13c11e47..9fef634c986fb62d6be2dea5f0d69b3f4f506c96 100644 --- a/src/Components/ResourcePageComponents/CommentsArea.js +++ b/src/Components/ResourcePageComponents/CommentsArea.js @@ -138,17 +138,17 @@ export default function CommentsArea(props) { <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> </Snackbar> {/*-------------------------------MODALS---------------------------------------*/} - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> {/*----------------------------------------------------------------------------*/} <Grid container spacing={2} style={{ padding: "10px" }}> { (state.currentUser.id !== '') ? ( <Grid item xs={12} > - <GrayContainer> + <GrayContainer contrast={state.contrast}> <h3>Conte sua experiência com o Recurso</h3> <Grid container style={{ paddingTop: "20px" }} spacing={1}> <Grid item xs={12} sm={2} style={{ paddingLeft: "15px", paddingRight: "15px" }}> @@ -158,6 +158,7 @@ export default function CommentsArea(props) { </Grid> <Grid item xs={12} sm={10}> <CommentForm + contrast={state.contrast} recursoId={props.recursoId} handleSnackbar={props.handleSnackbar} rerenderCallback={forceUpdate} @@ -171,10 +172,10 @@ export default function CommentsArea(props) { : ( <Grid item xs={12}> - <LogInToComment> + <LogInToComment contrast={state.contrast}> <span className="span-laranja">Você precisa entrar para comentar</span> - <Button onClick={() => handleLogin(true)} style={{ textTransform: "uppercase", color: "#666", fontWeight: "700" }}> - <ExitToAppIcon />ENTRAR + <Button onClick={() => handleLogin(true)} style={state.contrast === "" ? { textTransform: "uppercase", color: "#666", fontWeight: "700" } : { textTransform: "uppercase", color: "yellow", fontWeight: "700", textDecoration: "underline" }}> + <ExitToAppIcon style={state.contrast === "" ? { color: "inherit" } : { color: "white" }} />ENTRAR </Button> </LogInToComment> </Grid> @@ -182,18 +183,19 @@ export default function CommentsArea(props) { } { isLoading ? - <LoadingDiv> + <LoadingDiv contrast={state.contrast}> <CircularProgress className="loading" /> </LoadingDiv> : totalReviews !== 0 ? ( - <ComentariosBox> + <ComentariosBox contrast={state.contrast}> <h3>{totalReviews} {totalReviews !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3> { comentarios.map(comentario => <div className="comentario-template" key={comentario.id}> <Comment + contrast={state.contrast} isCollection={false} authorID={comentario.user ? comentario.user.id : null} authorAvatar={comentario.user ? comentario.user.avatar : null} @@ -215,7 +217,7 @@ export default function CommentsArea(props) { } <div className="load-more"> <IconButton className="button" onClick={handleLoadMoreReviews}> - <KeyboardArrowDownIcon /> + <KeyboardArrowDownIcon className="icon" /> </IconButton> </div> </ComentariosBox> @@ -223,12 +225,12 @@ export default function CommentsArea(props) { : ( <Grid item xs={12}> - <LogInToComment> + <LogInToComment contrast={state.contrast}> <img alt="" src={Comentarios} /> <span className="span-laranja">Compartilhe sua experiência com a Rede!</span> - <AoRelatar> + <AoRelatar contrast={state.contrast}> Ao relatar sua experiência de uso do Recurso você estará auxiliando professores de todo país. - </AoRelatar> + </AoRelatar> </LogInToComment> </Grid> ) @@ -246,7 +248,7 @@ const LoadingDiv = styled.div` align-items: center; .loading{ align-self: center; - color: #ff7f00; + color: ${props => props.contrast === "" ? "#ff7f00" : "white"}; size: 24px; } ` @@ -261,7 +263,7 @@ const ComentariosBox = styled.div` font-family: 'Roboto Light','Roboto Regular',Roboto; font-weight: 300; font-style: normal; - color:#666; + color: ${props => props.contrast === "" ? "#666" : "white"}; font-size: 1.857em; margin: 15px 2%; text-align : flex-start; @@ -274,6 +276,7 @@ const ComentariosBox = styled.div` } .load-more{ + margin-top : 10px; width: 100%; display: flex; flex-direction: row; @@ -282,8 +285,16 @@ const ComentariosBox = styled.div` } .button{ + border: ${props => props.contrast === "" ? "0" : "1px solid white"}; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + :hover{ + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"}; + } } + + .icon{ + color: ${props => props.contrast === "" ? "#666" : "yellow"}; + } ` const AoRelatar = styled.div` width : 70%; @@ -291,6 +302,7 @@ const AoRelatar = styled.div` font-weight : 300; text-align : center; padding-bottom : 20px; + color: ${props => props.contrast === "" ? "#666" : "white"}; ` const LogInToComment = styled.div` @@ -304,7 +316,7 @@ const LogInToComment = styled.div` font-size : 24px; font-weight : 700; padding-bottom : 5px; - color : #ff7f00; + color: ${props => props.contrast === "" ? "#ff7f00" : "white"}; } img { @@ -314,7 +326,7 @@ const LogInToComment = styled.div` ` const GrayContainer = styled.div` - background-color : #fafafa; + background-color: ${props => props.contrast === "" ? "#fafafa" : "black"}; font-weight : 400; font-size : 14px; padding-bottom : 20px; @@ -331,7 +343,7 @@ const GrayContainer = styled.div` text-align: center; font-weight: 300; font-style: normal; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; font-size: 1.857em; margin-bottom : 10px; margin-left : 2%; diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js index 98e7fcd119baab3a54029a86ada0860dc0526dd8..e47e07247b203858a62019fd0b3bd07d6a2b07a1 100644 --- a/src/Components/ResourcePageComponents/Footer.js +++ b/src/Components/ResourcePageComponents/Footer.js @@ -47,17 +47,17 @@ 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 + <ErrorIcon className="icon" />Reportar abuso ou erro </span> </ButtonGrey> ) : ( - <ButtonGrey> + <ButtonGrey contrast={props.contrast}> <span className="button-text-report"> - <ErrorIcon className="icon" /> Você já reportou este recurso + <ErrorIcon className="icon" />Você já reportou este recurso </span> </ButtonGrey> ) @@ -68,18 +68,18 @@ function DownloadButton(props) { return ( props.downloadableLink ? ( - <ButtonOrange onClick={props.enableDownload}> + <ButtonOrange contrast={props.contrast} onClick={props.enableDownload}> <span className="text"> - <GetAppIcon className="icon" /> Baixar Recurso + <GetAppIcon className="icon" />Baixar Recurso </span> </ButtonOrange> ) : props.link ? ( - <ButtonOrange onClick={props.toggleRedirect}> + <ButtonOrange contrast={props.contrast} onClick={props.toggleRedirect}> <span className="text"> - <CallMadeIcon className="icon" /> Abrir Recurso + <CallMadeIcon className="icon" />Abrir Recurso </span> </ButtonOrange> ) @@ -150,29 +150,29 @@ export default function Footer(props) { <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> </Snackbar> {/*-------------------------------MODALS---------------------------------------*/} - <ReportModal open={reportOpen} handleClose={() => { toggleReport(false) }} + <ReportModal contrast={props.contrast} open={reportOpen} handleClose={() => { toggleReport(false) }} form="recurso" complainableId={props.recursoId} complainableType={"LearningObject"} /> - <ShareModal open={shareOpen} handleClose={() => { toggleShare(false) }} + <ShareModal contrast={props.contrast} open={shareOpen} handleClose={() => { toggleShare(false) }} thumb={props.thumb} title={props.title} link={props.currPageLink} /> - <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }} + <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }} thumb={props.thumb} title={props.title} recursoId={props.recursoId} /> - <RedirectModal open={redirectOpen} handleClose={() => { toggleRedirect(false) }} + <RedirectModal contrast={props.contrast} open={redirectOpen} handleClose={() => { toggleRedirect(false) }} link={props.link} /> - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> {/*----------------------------------------------------------------------------*/} {/*-----------------------------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,24 +191,25 @@ 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> + <ShareIcon className="icon" />Compartilhar + </span> </ButtonGrey> </Grid> {/*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> + </span> </ButtonGrey> </Grid> <Grid item xs={3} style={{ justifyContent: "right !important" }}> <DownloadButton + contrast={props.contrast} downloadableLink={props.downloadableLink} link={props.link} enableDownload={enableDownload} @@ -221,15 +223,16 @@ 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> + </span> </ButtonGrey> </Grid> <Grid item xs={7}> <DownloadButton + contrast={props.contrast} downloadableLink={props.downloadableLink} link={props.link} enableDownload={enableDownload} @@ -238,7 +241,7 @@ export default function Footer(props) { </Grid> <Grid item xs={1}> - <Button aria-haspopup="true" onClick={handleClick} style={{ color: "#666" }}> + <Button aria-haspopup="true" onClick={handleClick} style={props.contrast === "" ? { color: "#666" } : {color: "yellow"}}> <MoreVertIcon /> </Button> <Menu @@ -248,19 +251,20 @@ export default function Footer(props) { open={Boolean(anchorEl)} onClose={handleClose} > - <MenuItem> + <MenuItem className={`${props.contrast}BackColor`}> <ReportButton + contrast={props.contrast} userLoggedIn={state.currentUser.id === '' ? false : true} toggleReport={() => { toggleReport(true) }} openLogin={handleLogin} complained={props.complained} /> </MenuItem> - <MenuItem> - <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}> + <MenuItem className={`${props.contrast}BackColor`}> + <ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}> <span className="button-text"> <ShareIcon className="icon" /> Compartilhar - </span> + </span> </ButtonGrey> </MenuItem> </Menu> @@ -277,20 +281,21 @@ 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 === "" ? "white" : "black"}; ` const StyledGrid = styled(Grid)` @media screen and (min-width: 990px) { - padding-left : 15px !important; + padding-left : 12px !important; } .MuiGrid-item { - padding-right : 15px; - padding-left : 15px; + padding-right : 12px; + padding-left : 12px; display : flex; justify-content : center; } @@ -298,15 +303,16 @@ 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)" : "rgba(255,255,0,0.24)"} !important; } - background-color : transparent !important; - color : #666 !important; - text-decoration : none !important; + background-color : ${props => props.contrast === "" ? "transparent" : "black"} !important; + color: ${props => props.contrast === "" ? "#666" : "yellow"} !important; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important; outline : none !important; text-align : center !important; .icon { + color: ${props => props.contrast === "" ? "inherit" : "white"} !important; vertical-align : middle !important; font-weight : normal !important; font-style : normal !important; @@ -319,14 +325,12 @@ const ButtonGrey = styled(Button)` word-wrap : normal !important; direction : ltr !important; padding-right : 2px; - color : inherit !important; } .button-text { cursor : pointer; line-height : 36px; text-align : center; - color : currentColor; white-space : nowrap; text-transform : uppercase; font-weight : 600; @@ -349,17 +353,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" : "black"} !important; + color: ${props => props.contrast === "" ? "#666" : "yellow"} !important; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important; + border: ${props => props.contrast === "" ? "0" : "1px solid white"} !important; text-transform : uppercase !important; outline : none !important; + /* max-height: 36px !important; */ 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 +384,7 @@ const ButtonOrange = styled(Button)` } .text { + color: ${props => props.contrast === "" ? "white" : "yellow"} !important; font-size : 14px; font-weight : 600; } diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js index f1e20fa480dc7e76b4c55a448258f44106e61e65..63f646ae6aa9aa3c0299309ae70753e2ec61fa06 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'; @@ -45,7 +45,7 @@ function Alert(props) { return <MuiAlert elevation={6} variant="filled" {...props} />; } -function AdditionalInfoItem (props) { +function AdditionalInfoItem(props) { return ( <span className="meta-objeto"> {props.icon} @@ -55,11 +55,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) @@ -76,8 +76,8 @@ export default function Sobre (props) { if (reason === 'clickaway') { return; } - - handleSuccessfulLogin(false); + + handleSuccessfulLogin(false); } var moment = require('moment') @@ -87,58 +87,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} @@ -146,11 +146,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"> @@ -159,7 +159,7 @@ export default function Sobre (props) { </p> </div> } - key={"no-license"}/>) + key={"no-license"} />) } setAdditionalInfo(aux) }, []) @@ -167,7 +167,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> @@ -177,16 +177,16 @@ export default function Sobre (props) { <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> </Snackbar> {/*-------------------------------MODALS---------------------------------------*/} - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <SignUpModal contrast={state.contrast} 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> @@ -195,7 +195,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> ) } @@ -222,7 +222,7 @@ export default function Sobre (props) { </Grid> <Grid item xs={windowWidth > 990 ? 3 : 12}> - <MetasObjeto> + <MetasObjeto contrast={state.contrast}> <div className="enviado-por"> Enviado por: </div> @@ -230,54 +230,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 contrast={state.contrast} followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} /> + </> + ) + : + ( + <> + <NoIcon contrast={state.contrast} followableID={props.id} toggleFollowed={toggleFollowed} /> + <ContactCardOptions contrast={state.contrast} 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> @@ -308,6 +308,7 @@ const CollapseControl = styled.div` ` const SobreDiv = styled.div` + background-color: ${props => props.contrast === "" ? "white" : "black"}; padding-left : 3% !important; padding-top : 3% !important; .titulo { @@ -317,7 +318,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; } @@ -333,12 +334,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 } } @@ -346,11 +348,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; } @@ -365,12 +369,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; } @@ -380,8 +386,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; @@ -409,6 +415,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; @@ -417,12 +424,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..f40324cf53c37c6909325ef65bf238c8e9ef4b67 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} @@ -185,10 +186,10 @@ export default function TextoObjeto (props) { { (checkAccessLevel('publisher') || props.stateRecurso === "draft") && <Link to={"/editar-recurso/" + props.recursoId}> - <Button style={{color : "#666"}}><EditIcon/></Button> + <Button className={`${props.contrast}LinkColor`} style={{color : "#666"}}><EditIcon/></Button> </Link> } - <Button style={{color : "#666"}} onClick={() => {handleDelete()}}><DeleteForeverIcon/></Button> + <Button className={`${props.contrast}LinkColor`} style={{color : "#666"}} onClick={() => {handleDelete()}}><DeleteForeverIcon/></Button> </React.Fragment> } @@ -199,6 +200,7 @@ export default function TextoObjeto (props) { } const TextoObjetoDiv = styled.div` + background-color: ${props => props.contrast === "" ? "white" : "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,33 +227,35 @@ 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; - background-color : #fcf8e3; - border-color : #faebcc; + color: ${props => props.contrast === "" ? "#8a6d3b" : "white"}; + background-color : ${props => props.contrast === "" ? "#fcf8e3" : "black"}; + border: 1px solid ${props => props.contrast === "" ? "#faebcc" : "white"}; padding: 15px; margin-bottom: 20px; - border: 1px solid transparent; border-radius: 4px; font-size : 14px; } @@ -262,7 +268,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..be81cfa490acb38f26f6783ef394c0caad6b31c1 100644 --- a/src/Components/SearchBar.js +++ b/src/Components/SearchBar.js @@ -26,18 +26,18 @@ import styled from 'styled-components' import { Store } from '../Store'; import { v4 as uuidv4 } from 'uuid' import Grid from "@material-ui/core/Grid" - +import {useStyles} from './ReportUserForm.js' const dividerStyled = { - background: '#e0e0e0', - width: '1px', - content: "", - display: 'block', - top: '0', - bottom: '0', - right: '0', - minHeight: '70px', - margin: '0 20px' + background: '#e0e0e0', + width: '1px', + content: "", + display: 'block', + top: '0', + bottom: '0', + right: '0', + minHeight: '70px', + margin: '0 20px' } const DividerVertical = () => <em style={dividerStyled}></em> @@ -46,178 +46,212 @@ 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; + flex-grow: 2; + 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; + } +` + +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 RadioGroupStyled = styled(RadioGroup)` - display: flex; - flex-direction: row; - flex-grow: 1; +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 FormControlLabelStyled = styled(FormControlLabel)` - *{ - text-transform: uppercase; - color: #ff8a17 !important; - fontWeight: bolder; - } +const FormUserControlLabelStyled = styled(FormControlLabel)` + *{ + text-transform: uppercase; + color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + font-weight: bolder; + } ` -const RadioStyled = styled(Radio)` - color: #ff8a17; +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; - } + margin-right: 2vw; + *{ + text-transform: uppercase; + 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; -` - -/*const Bar = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - border-top: 1px rgba(0,0,0,.1) solid; + font-weight: bolder; ` -const Flex = styled.span` - display: flex; - align-items: center; - color: #787380; -`*/ export default function SearchBar(props) { - const [query, setQuery] = useState('') - const [searchClass, setSearchClass] = useState('LearningObject') - - const { state, dispatch } = useContext(Store) - - const [goSearch, setGoSearch] = useState(false) - - useEffect(() => { - if (window.location.pathname.includes('busca')) { - const urlParams = new URLSearchParams(window.location.search) - const urlQuery = urlParams.get('query') - const urlSearchClass = urlParams.get('search_class') - if (searchClass !== urlSearchClass || query !== urlQuery) { - setQuery(urlQuery) - setSearchClass(urlSearchClass) - } - } - }, []) + const [query, setQuery] = useState('') - useEffect(() => setGoSearch(false), [goSearch]) + const classes = useStyles(); - const handleChange = (event) => { - setQuery(event.target.value) - } + const [searchClass, setSearchClass] = useState('LearningObject') - const handleKeyDown = (event) => { - if (event.key === 'Enter' || event.type === 'click') { - dispatch({ - type: 'SAVE_SEARCH', - newSearch: { - query: query !== '' ? query : '*', - class: searchClass + const { state, dispatch } = useContext(Store) + + const [goSearch, setGoSearch] = useState(false) + + useEffect(() => { + if (window.location.pathname.includes('busca')) { + const urlParams = new URLSearchParams(window.location.search) + const urlQuery = urlParams.get('query') + const urlSearchClass = urlParams.get('search_class') + if (searchClass !== urlSearchClass || query !== urlQuery) { + setQuery(urlQuery) + setSearchClass(urlSearchClass) + } } - }) - setGoSearch(true) + }, []) + + useEffect(() => setGoSearch(false), [goSearch]) + + const handleChange = (event) => { + setQuery(event.target.value) } - } - const linkTarget = { - pathname: `/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`, - key: uuidv4(), // we could use Math.random, but that's not guaranteed unique. - state: { - applied: true + const handleKeyDown = (event) => { + if (event.key === 'Enter' || event.type === 'click') { + dispatch({ + type: 'SAVE_SEARCH', + newSearch: { + query: query !== '' ? query : '*', + class: searchClass + } + }) + setGoSearch(true) + } } - }; - - return ( - <Grid container> - <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 - id="standard-search" - label="O que você está buscando" - type="search" - margin="normal" - 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)} - > - <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> - } - </Grid> - </Grid> - ) + + const linkTarget = { + pathname: `/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`, + key: uuidv4(), // we could use Math.random, but that's not guaranteed unique. + state: { + applied: true + } + }; + + return ( + <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?" + type="search" + margin="normal" + variant="outlined" + value={query} + InputProps={state.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }} + 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 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 > + ) } \ 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 d75c13a435210b70a5121fb1bf9c4faf664b30bd..f8bdf209e47b1faa9a6c64c661d4fe9fcdfc0da1 100644 --- a/src/Components/SearchPageComponents/CollectionTemplate.js +++ b/src/Components/SearchPageComponents/CollectionTemplate.js @@ -9,9 +9,9 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; //Image Import -import { ColecaoVazia } from "ImportImages.js"; +import { ColecaoVazia } from "ImportImages.js"; -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 @@ -20,72 +20,78 @@ 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={ColecaoVazia} 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 + contrast={contrast} + 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={ColecaoVazia} 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 > ) }; @@ -93,20 +99,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"}; } @@ -115,11 +124,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 9cc1a9aeea7868cf92bd7254adb7ab7dcaeb3aee..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 362bf17d518ba1511233f4a1eebf46d942223351..6c6a5d654ae8704a72e16022a5780661eb46fd75 100644 --- a/src/Components/SearchPageComponents/ResourceTemplate.js +++ b/src/Components/SearchPageComponents/ResourceTemplate.js @@ -9,9 +9,9 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; //Image Import -import { RecursoVazio } from "ImportImages.js"; +import { RecursoVazio } from "ImportImages.js"; -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(); @@ -20,71 +20,77 @@ 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={RecursoVazio} 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 + contrast={contrast} + 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={RecursoVazio} 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> ) }; @@ -93,20 +99,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"}; } @@ -115,11 +124,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..66720a688828126c16c01ec43f04c4d6096a9b96 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,72 @@ 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 + contrast={contrast} + 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 +92,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 +117,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/SearchSectionFunction.js b/src/Components/SearchSectionFunction.js index 7921c9ffeebd4af460f533cc30cb92249211b6e8..6362110e0b456af61302e9ecfc2db02914350903 100644 --- a/src/Components/SearchSectionFunction.js +++ b/src/Components/SearchSectionFunction.js @@ -16,81 +16,82 @@ GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/ -import React, {useState} from 'react'; +import React, { useState, useContext } from 'react'; import '../App.css'; import styled from 'styled-components' // import SearchBar from './SearchBar'; -import {Row} from 'react-grid-system'; -import {MdInfoOutline} from "react-icons/md" -import { FaRegPlayCircle} from "react-icons/fa"; +import { Row } from 'react-grid-system'; +import { MdInfoOutline } from "react-icons/md" +import { FaRegPlayCircle } from "react-icons/fa"; import ModalVideoApresentacao from "./ModalVideoApresentacao.js" -import {Link} from 'react-router-dom' +import { Link } from 'react-router-dom' import Grid from '@material-ui/core/Grid'; import HomeScreenSearchBar from './HomeScreenSearchBar' +import { Store } from '../Store' //Image Import import { banner } from "ImportImages.js"; import { bannerMobile } from "ImportImages.js"; -export default function SearchSection (props) { +export default function SearchSection(props) { + const { state } = useContext(Store) const [modalOpen, handleModal] = useState(false) - const toggleModal = () => {handleModal(!modalOpen)} + const toggleModal = () => { handleModal(!modalOpen) } const WIDTH = window.innerWidth; return ( <React.Fragment> - <ModalVideoApresentacao open={modalOpen} handleClose={toggleModal}/> - <Banner> - <StyledGrid container direction="row" justify="center"> - <Grid item style={{paddingRight : "15px", paddingLeft : "15px", paddingBottom : "120px"}}> - <div className="title"> - <h2> - Plataforma MEC de Recursos Educacionais Digitais - </h2> - <h3> - Encontre e compartilhe vídeos, animações e muitos outros Recursos - </h3> - </div> - <HomeScreenSearchBar/> - <div className="links"> - <Link to="/sobre"> - <MdInfoOutline size="24px" style={{verticalAlign: "middle", paddingRight : "5px"}}/> - {WIDTH <= 501 ? ("SOBRE") : ("SOBRE A PLATAFORMA")} - </Link> - <span onClick={toggleModal} style={{cursor : "pointer"}}> - <FaRegPlayCircle size="20px" style={{verticalAlign: "middle", paddingRight : "5px"}}/> + <ModalVideoApresentacao open={modalOpen} handleClose={toggleModal} /> + <Banner contrast={state.contrast}> + <StyledGrid container direction="row" justify="center"> + <Grid item style={{ paddingRight: "15px", paddingLeft: "15px", paddingBottom: "120px" }}> + <div className="title"> + <h2> + Plataforma MEC de Recursos Educacionais Digitais + </h2> + <h3> + Encontre e compartilhe vídeos, animações e muitos outros Recursos + </h3> + </div> + <HomeScreenSearchBar /> + <div className="links"> + <Link to="/sobre"> + <MdInfoOutline size="24px" style={{ verticalAlign: "middle", paddingRight: "5px", color: "white" }} /> + {WIDTH <= 501 ? <span className={`${state.contrast}LinkColor`}>SOBRE</span> : <span className={`${state.contrast}LinkColor`}>SOBRE A PLATAFORMA</span>} + </Link> + <span onClick={toggleModal} className={`${state.contrast}LinkColor`} style={{ cursor: "pointer" }}> + <FaRegPlayCircle size="20px" style={{ verticalAlign: "middle", paddingRight: "5px", color: "white" }} /> {WIDTH <= 501 ? ("VÍDEO") : ("VÍDEO DE APRESENTAÇÃO")} - </span> - </div> - </Grid> - </StyledGrid> - { - WIDTH > 501 && - <Row justify="center" style={{marginLeft:0, marginRight:0}}> - <button className="recurso" - onClick={() => {props.function("Recursos")}}> - Recursos Educacionais Digitais - </button> - - <button className="material-formacao" - onClick={() => {props.function("Materiais")}}> - Materiais de Formação - </button> - - <button className="colecao" - onClick={() => {props.function("Colecoes")}}> - Coleções dos Usuários - </button> - </Row> - } - </Banner> - </React.Fragment> + </span> + </div> + </Grid> + </StyledGrid> + { + WIDTH > 501 && + <Row justify="center" style={{ marginLeft: 0, marginRight: 0 }}> + <button className="recurso" + onClick={() => { props.function("Recursos") }}> + Recursos Educacionais Digitais + </button> + + <button className="material-formacao" + onClick={() => { props.function("Materiais") }}> + Materiais de Formação + </button> + + <button className="colecao" + onClick={() => { props.function("Colecoes") }}> + Coleções dos Usuários + </button> + </Row> + } + </Banner> + </React.Fragment> ) } const StyledGrid = styled(Grid)` - margin-right : auto !important; - margin-left auto !important; + margin: 0 auto !important; color : #fff !important; text-align : center !important; ` @@ -147,7 +148,9 @@ const Banner = styled.div` line-height: 1.42857143; width: 25%; margin-top: 1%; - color: white; + color: ${props => props.contrast === "" ? "white" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + border: ${props => props.contrast === "" ? "none" : "1px solid white"}; padding: 1.2%; border-width: 5%; border-style: none; @@ -156,12 +159,12 @@ const Banner = styled.div` } .recurso { - background-color : #ff7f00; + background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"}; } .material-formacao { - background-color : #e81f4f; + background-color: ${props => props.contrast === "" ? "#e81f4f" : "black"}; } .colecao { - background-color : #673ab7; + background-color: ${props => props.contrast === "" ? "#673ab7" : "black"}; } ` diff --git a/src/Components/ShareModal.js b/src/Components/ShareModal.js index f721b4caf8785d0b6eda4424556f01b90a9ca7fc..0e4f6791f71fb4fe84b6caa46910cea605cf9b68 100644 --- a/src/Components/ShareModal.js +++ b/src/Components/ShareModal.js @@ -29,7 +29,7 @@ import Twitter from '../img/twitter.svg' import LinkIcon from '../img/link_icon.svg' import CloseModalButton from './CloseModalButton.js' -export default function ReportModal (props) { +export default function ShareModal (props) { const textAreaRef = useRef(props.link); const copyToClipboard = (e) => { @@ -54,7 +54,7 @@ export default function ReportModal (props) { }} > <Fade in={props.open}> - <Container> + <Container className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}> <Header> <span style={{width:"32px"}}/> <h2>Compartilhar este recurso</h2> @@ -65,9 +65,11 @@ export default function ReportModal (props) { <img src={props.thumb ? apiDomain + props.thumb : require('../img/logo_small.svg')} alt="thumbnail recurso"/> <div className="text"> <strong>{props.title}</strong> - <span>{props.link}</span> </div> </ResourceInfo> + <div style={{marginTop: "10px"}}> + <span>{props.link}</span> + </div> <ShareInfo> <Grid container style={{paddingRight : "15px", paddingLeft : "15px"}}> @@ -77,7 +79,7 @@ export default function ReportModal (props) { href={"https://www.facebook.com/sharer/sharer.php?u=" + props.link} rel="noreferrer" target="_blank"> - <ShareButton> + <ShareButton className={`${props.contrast}LinkColor`}> <img src={Facebook} alt="facebook-logo"/> <p>FACEBOOK</p> </ShareButton> @@ -90,7 +92,7 @@ export default function ReportModal (props) { href={"https://www.twitter.com/intent/tweet?url=" + props.link} rel="noreferrer" target="_blank"> - <ShareButton> + <ShareButton className={`${props.contrast}LinkColor`}> <img src={Twitter} alt="twitter-logo"/> <p>TWITTER</p> </ShareButton> @@ -101,7 +103,7 @@ export default function ReportModal (props) { <Grid item xs={4}> { document.queryCommandSupported('copy') && - <ShareButton onClick={copyToClipboard}> + <ShareButton className={`${props.contrast}LinkColor`} onClick={copyToClipboard}> <img src={LinkIcon} alt="link-icon"/> <p>COPIAR LINK</p> <textarea ref={textAreaRef} value={props.link} readOnly style={{height: "0", position: "absolute",zIndex: "-1"}}/> @@ -143,12 +145,10 @@ const ShareButton = styled(Button)` const ShareInfo = styled.div` padding-top : 20px; - color : #000; ` const ResourceInfo = styled.div` margin-top : 0; - background-color : #f4f4f4; overflow : hidden; border-radius : 5px; display : flex; @@ -203,7 +203,6 @@ const Header = styled.div` h2 { font-size : 26px; font-weight : lighter; - color : #666 } ` @@ -223,7 +222,6 @@ const StyledModal = styled(Modal)` const Container = styled.div` box-sizing : border-box; box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12); - background-color : white; align : center; display : flex; flex-direction : column; diff --git a/src/Components/SignUpContainerFunction.js b/src/Components/SignUpContainerFunction.js index 15974aee411a66d7431d73f4ce7d6ba8b87d56a0..5af5f4f7fed21e91bb2524712c9c1b2b2bc86a47 100644 --- a/src/Components/SignUpContainerFunction.js +++ b/src/Components/SignUpContainerFunction.js @@ -16,55 +16,55 @@ 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 { Button } from '@material-ui/core'; //import FacebookLogin from 'react-facebook-login'; import CloseIcon from '@material-ui/icons/Close'; import styled from 'styled-components' -import {device} from './device.js' +import { device } from './device.js' import FormInput from "./FormInput.js" -import {StyledCloseModalButton, DialogContentDiv, DialogHeaderStyled, SocialConnectDiv, H3Div} from './LoginContainerFunction.js' -import {apiUrl} from '../env.js' -import {GoogleLoginButton} from './LoginContainerFunction' +import { StyledCloseModalButton, DialogContentDiv, DialogHeaderStyled, SocialConnectDiv, H3Div } from './LoginContainerFunction.js' +import { apiUrl } from '../env.js' +import { GoogleLoginButton } from './LoginContainerFunction' import ValidateUserInput from './HelperFunctions/FormValidationFunction.js' import GoogleLogo from "../img/logo_google.svg" import ReCaptcha from 'react-recaptcha' -async function handleGoogleAttempt () { - console.log("handleGoogleAttempt") - let request_url = ( +async function handleGoogleAttempt() { + console.log("handleGoogleAttempt") + let request_url = ( `${apiUrl}/omniauth/google_oauth2?auth_origin_url=` + window.location.href + '&omniauth_window_type=sameWindow&resource_class=User' ) window.location.replace(request_url) } -export default function SignUpContainer (props) { +export default function SignUpContainer(props) { const [unavailableButton, setButtonAvailability] = useState(true); const [formNome, setNome] = useState( { - key : false, - value : "", + key: false, + value: "", } ) const [formEmail, setEmail] = useState( { - key : false, - value : "", + key: false, + value: "", } ) const [formSenha, setSenha] = useState( { - key : false, - value : "" + key: false, + value: "" } ) const [formConfirmation, setConfirmation] = useState( { - key : false, - value : "" + key: false, + value: "" } ) @@ -73,54 +73,62 @@ export default function SignUpContainer (props) { const flag = ValidateUserInput(type, userInput, confirmation) if (type === 'username') { - setNome({...formNome, - key : flag, - value : userInput + setNome({ + ...formNome, + key: flag, + value: userInput }) console.log(formNome) } - else if(type === 'email') { - setEmail({...formEmail, - key : flag, - value : userInput + else if (type === 'email') { + setEmail({ + ...formEmail, + key: flag, + value: userInput }) console.log(formEmail) } - else if(type === 'password') { - setSenha({...formSenha, - key : flag, - value : userInput + else if (type === 'password') { + setSenha({ + ...formSenha, + key: flag, + value: userInput }) console.log(formSenha) } - else if(type === 'confirmation') { - setConfirmation({...formConfirmation, - key : flag, - value : userInput + else if (type === 'confirmation') { + setConfirmation({ + ...formConfirmation, + key: flag, + value: userInput }) console.log(formConfirmation) } } const limpaCamposForm = () => { - setNome({...formNome, - key : false, - value : '' + setNome({ + ...formNome, + key: false, + value: '' }) - setEmail({...formEmail, - key : false, - value : '' + setEmail({ + ...formEmail, + key: false, + value: '' }); - setSenha({...formSenha, - key : false, - value : '' + setSenha({ + ...formSenha, + key: false, + value: '' }) - setConfirmation({...formConfirmation, - key : false, - value : '' + setConfirmation({ + ...formConfirmation, + key: false, + value: '' }) } @@ -132,7 +140,7 @@ export default function SignUpContainer (props) { const onSubmit = (e) => { e.preventDefault(); - const newLogin = {name : formNome.value, email : formEmail.value, password : formSenha.value, senha : formConfirmation.value} + const newLogin = { name: formNome.value, email: formEmail.value, password: formSenha.value, senha: formConfirmation.value } if (!(formNome.key || formEmail.key || formSenha.key || formConfirmation.key)) { props.handleLoginInfo(newLogin) @@ -140,41 +148,42 @@ export default function SignUpContainer (props) { } } - function captchaVerified (response) { + function captchaVerified(response) { if (response) { setButtonAvailability(false) } } return ( - <ContainerStyled > + <ContainerStyled contrast={props.contrast}> <DialogHeaderStyled> - <span style={{width:"32px"}}/> - <H2Styled> Cadastrar-se + <span style={{ width: "32px" }} /> + <H2Styled contrast={props.contrast}> Cadastrar-se </H2Styled> - <StyledCloseModalButton onClick={props.handleClose} > - <CloseIcon /> + <StyledCloseModalButton contrast={props.contrast} onClick={props.handleClose} > + <CloseIcon className="icon" /> </StyledCloseModalButton> </DialogHeaderStyled> <DialogContentDiv> <SocialConnectDiv> - <GoogleLoginButton onClick={handleGoogleAttempt}> - <img src={GoogleLogo} alt="google-logo" className="google-logo"/> - <span>Usando o Google</span> - </GoogleLoginButton> + <GoogleLoginButton contrast={props.contrast} onClick={handleGoogleAttempt}> + <img src={GoogleLogo} alt="google-logo" className="google-logo" /> + <span>Usando o Google</span> + </GoogleLoginButton> </SocialConnectDiv> <H3Div> - <H3Styled> - <RightSideStrikedH3/> - <span style={{verticalAlign:"middle"}}>ou</span> - <LeftSideStrikedH3/> + <H3Styled contrast={props.contrast}> + <RightSideStrikedH3 contrast={props.contrast} /> + <span style={{ verticalAlign: "middle" }}>ou</span> + <LeftSideStrikedH3 contrast={props.contrast} /> </H3Styled> </H3Div> <form onSubmit={onSubmit}> <FormInput + contrast={props.contrast} inputType={"text"} name={"name"} value={formNome.value} @@ -183,8 +192,9 @@ export default function SignUpContainer (props) { required={true} error={formNome.key} /> - <br/> + <br /> <FormInput + contrast={props.contrast} inputType={"text"} name={"email"} value={formEmail.value} @@ -192,10 +202,11 @@ export default function SignUpContainer (props) { handleChange={e => handleChange(e, 'email')} required={true} error={formEmail.key} - help = {formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br/>Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""} - /> - <br/> + help={formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br />Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""} + /> + <br /> <FormInput + contrast={props.contrast} inputType={"password"} name={"password"} value={formSenha.value} @@ -203,10 +214,11 @@ export default function SignUpContainer (props) { handleChange={e => handleChange(e, 'password')} required={true} error={formSenha.key} - help = {formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mínimo 8 caracteres.") : ""} - /> - <br/> + help={formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mínimo 8 caracteres.") : ""} + /> + <br /> <FormInput + contrast={props.contrast} inputType={"password"} name={"confirmation"} value={formConfirmation.value} @@ -214,10 +226,10 @@ export default function SignUpContainer (props) { handleChange={e => handleChange(e, 'confirmation', formSenha.value)} required={true} error={formConfirmation.key} - help = {formConfirmation.key ? (formConfirmation.value.length === 0 ? "Faltou digitar sua senha." : (formConfirmation.value !== formSenha.value ? "As senhas precisam ser iguais" : "A senha precisa ter no mínimo 8 caracteres.")) : ""} - /> - <br/> - <div style={{margin:"0 auto", width: "304px"}}> + help={formConfirmation.key ? (formConfirmation.value.length === 0 ? "Faltou digitar sua senha." : (formConfirmation.value !== formSenha.value ? "As senhas precisam ser iguais" : "A senha precisa ter no mínimo 8 caracteres.")) : ""} + /> + <br /> + <div style={{ margin: "0 auto", width: "304px" }}> { //<ReCaptcha sitekey={process.env.REACT_APP_SITE_KEY} verifyCallback={captchaVerified} /> //when key set in env <ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production @@ -225,26 +237,34 @@ export default function SignUpContainer (props) { } </div> <ConfirmContainerStyled> - <StyledSignUpButton type="submit" variant="contained" disabled={unavailableButton} - style={unavailableButton ? { backgroundColor: "#e9e9e9" } : { backgroundColor: "#00bcd4" }} - > - <span - style={{paddingLeft:"16px", paddingRight:"16px", borderRadius:"3px", boxSizing:"border-box", - fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}} + { + !unavailableButton && + <StyledSignUpButton contrast={props.contrast} type="submit" variant="contained" disabled={unavailableButton} + style={unavailableButton ? { backgroundColor: "#e9e9e9" } : props.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", color: "yellow", textDecoration: "underline" }} > - CADASTRAR + <span + style={props.contrast === "" ? { + paddingLeft: "16px", paddingRight: "16px", borderRadius: "3px", boxSizing: "border-box", + fontFamily: "Roboto, sans serif", fontWeight: "500", color: "#fff" + } : { + paddingLeft: "16px", paddingRight: "16px", borderRadius: "3px", boxSizing: "border-box", + fontFamily: "Roboto, sans serif", fontWeight: "500", color: "yellow" + }} + > + CADASTRAR </span> - </StyledSignUpButton> + </StyledSignUpButton> + } </ConfirmContainerStyled> </form> - <TermosDeUsoStyled> + <TermosDeUsoStyled contrast={props.contrast}> <p>Ao se cadastrar, você está aceitando os Termos de Uso e de Política de Privacidade. <a href="/termos">Ler Termos</a>.</p> </TermosDeUsoStyled> <DialogFooterStyled> - <span style={{textAlign:"center", fontSize: "14px"}}>Já possui cadastro? <StyledAnchor href="" onClick={e => switchModal(e)}>ENTRAR</StyledAnchor></span> + <span style={props.contrast === "" ? { textAlign: "center", fontSize: "14px" } : { textAlign: "center", fontSize: "14px", color: "white" }}>Já possui cadastro? <StyledAnchor contrast={props.contrast} href="" onClick={e => switchModal(e)}>ENTRAR</StyledAnchor></span> </DialogFooterStyled> </DialogContentDiv> </ContainerStyled> @@ -253,20 +273,22 @@ export default function SignUpContainer (props) { const ContainerStyled = styled.div` box-sizing : border-box; - background-color : white; + background: ${props => props.contrast === "" ? "white" : "black"}; max-width : none; align : center; display : flex; flex-direction : column; min-width : 450px; + border: 1px solid ${props => props.contrast === "" ? "#666" : "white"}; + overflow-y: scroll; - max-height : none; + max-height : 90%; position : relative; padding : 10px; @media ${device.mobileM} { width : 100%; min-width : unset; - height : 100%; + height : 90%; min-width : unset !important; } @@ -285,17 +307,21 @@ const DialogFooterStyled = styled.div` const TermosDeUsoStyled = styled.div` font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; font-size : 13px; margin : 0 0 10px; max-width : 350px; margin-top : 10px; text-align : start; + a{ + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"} + } ` const H2Styled = styled.h2` align-self : center; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; font-size : 26px; font-weight : lighter; justify-content: space-between; @@ -308,12 +334,12 @@ const H3Styled = styled.h3` overflow : hidden; text-align : center; font-size : 14px; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; margin : 10px 0; ` const RightSideStrikedH3 = styled.div` display : inline-block; - border-bottom: 1px dotted #666; + border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"}; vertical-align : middle; font-weight : 500; margin-right : 5px; @@ -322,7 +348,7 @@ const RightSideStrikedH3 = styled.div` const LeftSideStrikedH3 = styled.div` display : inline-block; - border-bottom: 1px dotted #666; + border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"}; vertical-align : middle; font-weight : 500; margin-left : 5px; @@ -330,8 +356,8 @@ const LeftSideStrikedH3 = styled.div` ` const StyledAnchor = styled.a` - color : #00bcd4; - text-decoration : none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"} ` //const StyledCloseModalButton = styled(Button)` // display : inline-block; @@ -355,7 +381,7 @@ const ConfirmContainerStyled = styled.div` const StyledSignUpButton = styled(Button)` box-shadow : none !important; outline: none !important; - border : 0 !important; + border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"}; overflow : hidden !important; width : 50% !important; display : inline-block !important; @@ -366,6 +392,6 @@ const StyledSignUpButton = styled(Button)` border-radius: 3px !important; align-self : 50% !important; :hover { - background-color : #00acc1 !important; + background-color: ${props => props.contrast === "" ? "#00acc1 !important" : "rgba(255,255,0,0.24) !important"}; } ` diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js index 61c4fb2865b34df44615e742507d94df28e43ad7..3114f8e578e5e8c83bd15bfa08f9c9db81ff1e7f 100644 --- a/src/Components/SignUpModal.js +++ b/src/Components/SignUpModal.js @@ -15,14 +15,14 @@ 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 React, { useContext, useState } from 'react'; import Modal from '@material-ui/core/Modal'; import Backdrop from '@material-ui/core/Backdrop'; import Fade from '@material-ui/core/Fade'; import styled from 'styled-components' import SignUpContainer from './SignUpContainerFunction.js' -import {Store} from '../Store.js' -import {authentication} from './HelperFunctions/getAxiosConfig' +import { Store } from '../Store.js' +import { authentication } from './HelperFunctions/getAxiosConfig' import Snackbar from '@material-ui/core/Snackbar'; import MuiAlert from '@material-ui/lab/Alert'; //import {postRequest} from './HelperFunctions/getAxiosConfig' @@ -31,7 +31,7 @@ export function Alert(props) { return <MuiAlert elevation={6} variant="filled" {...props} />; } -export default function SignUpModal (props) { +export default function SignUpModal(props) { const { state, dispatch } = useContext(Store) const [snackbarOpened, handleSnackbar] = useState(false) @@ -44,8 +44,8 @@ export default function SignUpModal (props) { handleSnackbar(false); } - function handleSuccess (data) { - dispatch ({ + function handleSuccess(data) { + dispatch({ type: 'USER_SIGNED_UP', userLoggedIn: !state.userIsLoggedIn, user: data.data @@ -53,17 +53,17 @@ export default function SignUpModal (props) { props.handleClose() } - function handleError (error) { + function handleError(error) { handleSnackbar(true) } const handleLoginInfo = (newLogin) => { const url = `/auth` const payload = { - name : newLogin.name, + name: newLogin.name, email: newLogin.email, - password : newLogin.password, - password_confirmation : newLogin.senha //, + password: newLogin.password, + password_confirmation: newLogin.senha //, // terms_of_service : true, // avatar: "" } @@ -74,7 +74,7 @@ export default function SignUpModal (props) { return ( <> <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar} - anchorOrigin = {{ vertical:'top', horizontal:'right' }} + anchorOrigin={{ vertical: 'top', horizontal: 'right' }} > <Alert severity="error">Ocorreu um erro ao se conectar!</Alert> </Snackbar> @@ -93,9 +93,10 @@ export default function SignUpModal (props) { > <Fade in={props.open}> <SignUpContainer - handleClose={props.handleClose} - openLogin={props.openLogin} - handleLoginInfo = {handleLoginInfo} + contrast={state.contrast} + handleClose={props.handleClose} + openLogin={props.openLogin} + handleLoginInfo={handleLoginInfo} /> </Fade> </StyledModalSignUp> diff --git a/src/Components/StatsBarFunction.js b/src/Components/StatsBarFunction.js index 857c7393632a50ffdd3a8922044bbc4c14cb5efa..1c5c465e255af83e7243435448b5300df2cc24d6 100644 --- a/src/Components/StatsBarFunction.js +++ b/src/Components/StatsBarFunction.js @@ -16,14 +16,17 @@ GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import styled from 'styled-components' import { apiUrl } from "../env"; import axios from "axios"; import mapaBrasil from '../img/mapa-brasil-line-icon.svg'; import Grid from '@material-ui/core/Grid'; +import { Store } from '../Store'; export default function (props) { + const { state } = useContext(Store) + const [available_resources, setAvailableResources] = useState(0) const [month_publications, setMonthPublications] = useState(0) const [month_downloads, setMonthDownloads] = useState(0) @@ -41,7 +44,7 @@ export default function (props) { }, []) return ( - <StatsTab> + <StatsTab contrast={state.contrast}> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" /> <Grid container direction={WINDOW_WIDTH <= 670 ? "column" : "row"} justify="center" alignItems="center" spacing={3}> <Grid item> @@ -61,7 +64,7 @@ export default function (props) { </Grid> </Grid> </Grid> - <Grid item style={WINDOW_WIDTH <= 670 ? {width: "100%"} : null}> + <Grid item style={WINDOW_WIDTH <= 670 ? { width: "100%" } : null}> <StyledDivider /> </Grid> <Grid item> @@ -102,7 +105,9 @@ export default function (props) { const StatsTab = styled.div` padding : 20px 0; color : #fff; - background-color : #00bcd4; + border-top: ${props => props.contrast === "" ? "none" : "1px solid white"}; + border-bottom: ${props => props.contrast === "" ? "none" : "1px solid white"}; + background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"}; font-family: 'Roboto', sans-serif; ` const StyledDivider = styled.div` diff --git a/src/Components/TabPanels/Breadcrumbs.js b/src/Components/TabPanels/Breadcrumbs.js index 1d208986d7bd89b210da95806d101796301a36d9..b8d3abe6016c6d10a47a8d5a6c98b9d86d276a05 100644 --- a/src/Components/TabPanels/Breadcrumbs.js +++ b/src/Components/TabPanels/Breadcrumbs.js @@ -20,29 +20,23 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React from 'react' import styled from 'styled-components' import Breadcrumbs from '@material-ui/core/Breadcrumbs'; -import {Link} from 'react-router-dom'; +import { Link } from 'react-router-dom'; -export default function CustomizedBreadcrumbs (props) { +export default function CustomizedBreadcrumbs(props) { return ( <BreadcrumbsDiv> - <StyledBreadcrumbs> - <Link to="/" style={{color:"#00bcd4", textDecoration:"none"}}> + <StyledBreadcrumbs contrast={props.contrast}> + <Link to="/"> Página Inicial </Link> { - props.values.map( (value, i) => + props.values.map((value, i) => <span key={i}> {value} </span> ) } - {/*<span> - {props.currentPage} - </span> - <span> - {props.value} - </span> */} </StyledBreadcrumbs> </BreadcrumbsDiv> ) @@ -61,7 +55,11 @@ const StyledBreadcrumbs = styled(Breadcrumbs)` display : flex; justify-content : flex-start; max-width : 1170px; + a{ + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + } span { - color : #a5a5a5; + color: ${props => props.contrast === "" ? "#a5a5a5" : "white"}; } ` diff --git a/src/Components/TabPanels/PanelComponents/ButtonsArea.js b/src/Components/TabPanels/PanelComponents/ButtonsArea.js index 1b8633ae0b05f6578b98fbbba427a3172775ed96..da75ecabf210f3c41fcd8d7bccece5fc86719143 100644 --- a/src/Components/TabPanels/PanelComponents/ButtonsArea.js +++ b/src/Components/TabPanels/PanelComponents/ButtonsArea.js @@ -23,19 +23,19 @@ import Button from '@material-ui/core/Button'; export function ButtonsAreaRecurso(props) { return ( - <Carregados> - <p style={{ margin: "0 0 10px", fontSize: "14px" }}> + <Carregados contrast={props.contrast}> + <p className="total"> {props.sliceLength} recursos carregados de {props.total} </p> { !props.end && <React.Fragment> - <ButtonMostrarMaisRecurso onClick={() => props.showMore(4)}> - <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span> + <ButtonMostrarMaisRecurso contrast={props.contrast} onClick={() => props.showMore(4)}> + <span>MOSTRAR MAIS 4</span> </ButtonMostrarMaisRecurso> - <ButtonMostrarTodos onClick={() => { props.showMore(20) }}> - <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span> + <ButtonMostrarTodos contrast={props.contrast} onClick={() => { props.showMore(20) }}> + <span>MOSTRAR MAIS 20</span> </ButtonMostrarTodos> </React.Fragment> } @@ -46,19 +46,19 @@ export function ButtonsAreaRecurso(props) { export function ButtonsAreaColecao(props) { return ( - <Carregados> - <p style={{ margin: "0 0 10px", fontSize: "14px" }}> + <Carregados contrast={props.contrast}> + <p className="total"> {props.sliceLength} coleções carregadas de {props.total} </p> { !props.end && <React.Fragment> - <ButtonMostrarMaisColecao onClick={() => { props.showMore(4) }}> - <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span> + <ButtonMostrarMaisColecao contrast={props.contrast} onClick={() => { props.showMore(4) }}> + <span>MOSTRAR MAIS 4</span> </ButtonMostrarMaisColecao> - <ButtonMostrarTodos onClick={() => { props.showMore(20) }}> - <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span> + <ButtonMostrarTodos contrast={props.contrast} onClick={() => { props.showMore(20) }}> + <span>MOSTRAR MAIS 20</span> </ButtonMostrarTodos> </React.Fragment> } @@ -68,20 +68,20 @@ export function ButtonsAreaColecao(props) { export function ButtonsAreaRede(props) { return ( - <Carregados> - <p style={{ margin: "0 0 10px", fontSize: "14px" }}> + <Carregados contrast={props.contrast}> + <p className="total"> {props.sliceLength} usuários carregados {props.total} </p> { !props.end && <React.Fragment> - <ButtonMostrarMaisRede onClick={() => { props.showMore(4) }}> - <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span> + <ButtonMostrarMaisRede contrast={props.contrast} onClick={() => { props.showMore(4) }}> + <span>MOSTRAR MAIS 4</span> </ButtonMostrarMaisRede> - <ButtonMostrarTodos onClick={() => { props.showMore(20) }}> - <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span> + <ButtonMostrarTodos contrast={props.contrast} onClick={() => { props.showMore(20) }}> + <span>MOSTRAR MAIS 20</span> </ButtonMostrarTodos> </React.Fragment> } @@ -92,21 +92,29 @@ export function ButtonsAreaRede(props) { const ButtonMostrarTodos = styled(Button)` &:hover { - background-color : #d5d5d5 !important; + background-color: ${props => props.contrast === "" ? "#d5d5d5 !important" : "rgba(255,255,0,0.24) !important"}; } height : 36px !important; padding-left : 16px !important; padding-right : 16px !important; font-weight : 500 !important; border-radius : 3px !important; - color :#666 !important; - background-color: #e8e8e8 !important; + color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; + background-color: ${props => props.contrast === "" ? "#e8e8e8 !important" : "black !important"}; + border: ${props => props.contrast === "" ? 0 : "1px solid white !important"}; min-width : 88px !important; height : 36px !important; ` const ButtonMostrarMaisRede = styled(Button)` - background-color : #00bcd4 !important; + &:hover { + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"}; + } + color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; + background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"}; + border: ${props => props.contrast === "" ? 0 : "1px solid white !important"}; font-size: 14px !important; font-weight: 500 !important; height: 36px !important; @@ -122,7 +130,13 @@ const ButtonMostrarMaisRede = styled(Button)` ` export const ButtonMostrarMaisColecao = styled(Button)` - background-color : #503096 !important; + &:hover { + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"}; + } + color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; + background-color: ${props => props.contrast === "" ? "#503096 !important" : "black !important"}; + border: ${props => props.contrast === "" ? 0 : "1px solid white !important"}; font-size: 14px !important; font-weight: 500 !important; height: 36px !important; @@ -138,7 +152,13 @@ export const ButtonMostrarMaisColecao = styled(Button)` ` export const ButtonMostrarMaisRecurso = styled(Button)` - background-color : #ff7f00 !important; + &:hover { + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"}; + } + color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; + background-color: ${props => props.contrast === "" ? "#ff7f00 !important" : "black !important"}; + border: ${props => props.contrast === "" ? 0 : "1px solid white !important"}; font-size: 14px !important; font-weight: 500 !important; height: 36px !important; diff --git a/src/Components/TabPanels/PanelComponents/NoContent.js b/src/Components/TabPanels/PanelComponents/NoContent.js index f23eb76cd4506d803f8e05e632efa04310ba0b3e..e0c4be6989d9fed7ae4190d5c0b98b648772338f 100644 --- a/src/Components/TabPanels/PanelComponents/NoContent.js +++ b/src/Components/TabPanels/PanelComponents/NoContent.js @@ -22,16 +22,16 @@ import styled from 'styled-components' //Image Import import { defaultNoContent } from "ImportImages.js"; -export default function NoContent({text, image}) { +export default function NoContent({ text, image, contrast }) { return ( <DivTextoNoPublications> <InnerDiv> <ImgDiv> - <img alt="" src={image || defaultNoContent } style={{ width: "130px", verticalAlign: "middle", border: "0" }} /> + <img alt="" src={image || defaultNoContent} style={{ width: "130px", verticalAlign: "middle", border: "0" }} /> </ImgDiv> <TextDiv> - <NoPubSpan>{text}</NoPubSpan> + <NoPubSpan contrast={contrast}>{text}</NoPubSpan> </TextDiv> </InnerDiv> </DivTextoNoPublications> @@ -39,6 +39,7 @@ export default function NoContent({text, image}) { } const NoPubSpan = styled.span` + color: ${props => props.contrast === "" ? "#666" : "white"}; margin-top : 10px; font-size : 24px; font-family : Roboto; @@ -64,10 +65,4 @@ export const DivTextoNoPublications = styled.div` padding-left : 15px; padding-right : 15px; text-align : center; -` - -// {/*const DivConteudoNaoPublicado = styled.div` -// position : relative; -// top : 50%; -// transform : translateY(-50%); -// `*/} +` \ No newline at end of file diff --git a/src/Components/TabPanels/PanelComponents/PanelTitle.js b/src/Components/TabPanels/PanelComponents/PanelTitle.js index cb139b40670af05ad9e9d7adc3fc8a873d378d3a..9214c68b3ec1604beae54e67bbf5672ee29a4605 100644 --- a/src/Components/TabPanels/PanelComponents/PanelTitle.js +++ b/src/Components/TabPanels/PanelComponents/PanelTitle.js @@ -2,12 +2,12 @@ import React from 'react' import styled from 'styled-components' import Grid from '@material-ui/core/Grid'; -export default function PanelTitle (props) { +export default function PanelTitle(props) { return ( - <Header container> + <Header container contrast={props.contrast}> <Grid item xs={12}> - <p className="titulo">{props.title} <b style={{fontWeight:"500", fontSize : "20px"}}>({props.length})</b></p> - <hr/> + <p className="titulo">{props.title} <b style={{ fontWeight: "500", fontSize: "20px" }}>({props.length})</b></p> + <hr /> </Grid> </Header> ) @@ -21,7 +21,7 @@ const Header = styled(Grid)` margin : 0; line-height: normal; font-style : normal; - color : #757575; + color: ${props => props.contrast === "" ? "#757575" : "white"}; font-size : 1.857em; padding-left : 15px; padding-right : 15px; diff --git a/src/Components/TabPanels/PanelComponents/TemplateColecao.js b/src/Components/TabPanels/PanelComponents/TemplateColecao.js index b335fbd5110c947dd9979de68dce2d6dfd00bff7..f6be75224b38b865c9495559c8deff2b12a82329 100644 --- a/src/Components/TabPanels/PanelComponents/TemplateColecao.js +++ b/src/Components/TabPanels/PanelComponents/TemplateColecao.js @@ -33,6 +33,7 @@ export default function PanelTemplateColecao(props) { if (followerBoolean) { return ( <CollectionCardFunction + contrast={props.contrast} name={card.name} collections={card.followable.collection_items} rating={card.followable.review_average} @@ -54,6 +55,7 @@ export default function PanelTemplateColecao(props) { else { return ( <CollectionCardFunction + contrast={props.contrast} name={card.name} tags={card.tags} rating={card.review_average} @@ -73,8 +75,9 @@ export default function PanelTemplateColecao(props) { } return ( - <WhiteContainer> + <WhiteContainer contrast={props.contrast}> <Title + contrast={props.contrast} title={props.title} length={props.end} /> @@ -82,17 +85,18 @@ export default function PanelTemplateColecao(props) { { props.error ? <p - style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }} + className="errorText" > Erro ao tentar obter os dados </p> : props.length === 0 ? ( - <NoContent - text={props.noContentText} + <NoContent + contrast={props.contrast} + text={props.noContentText} image={ColecaoVazia} - /> + /> ) : ( @@ -108,9 +112,10 @@ export default function PanelTemplateColecao(props) { </StyledGrid> { props.loadingMore ? - <LoadingSpinner text={'Carregando Recursos...'} /> + <LoadingSpinner contrast={props.contrast} text={'Carregando coleções...'} /> : <ButtonsAreaColecao + contrast={props.contrast} sliceLength={props.sliceArr.length} length={props.length} showMore={props.showMore} diff --git a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js index d03415734eb03a7a7ea0ecb7671a50840240c815..c6585ef1a5275d26dd2fbdbec3e907bd810b48de 100644 --- a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js +++ b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js @@ -28,8 +28,9 @@ import LoadingSpinner from '../../LoadingSpinner.js'; export default function Template(props) { console.log(props.sliceArr); return ( - <WhiteContainer> + <WhiteContainer contrast={props.contrast}> <Title + contrast={props.contrast} title={props.titleText} length={props.end} /> @@ -37,7 +38,7 @@ export default function Template(props) { { props.error ? <p - style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }} + className="errorText" > Erro ao tentar obter os dados </p> @@ -45,7 +46,7 @@ export default function Template(props) { props.length === 0 ? ( [ - <NoContent text={props.noContentText} /> + <NoContent contrast={props.contrast} text={props.noContentText} /> ] ) : @@ -57,6 +58,7 @@ export default function Template(props) { props.sliceArr.map((card) => <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}> <ResourceCardFunction + contrast={props.contrast} avatar={card.submitter.avatar} id={card.learning_object.id} thumbnail={card.learning_object.thumbnail} @@ -80,6 +82,7 @@ export default function Template(props) { <LoadingSpinner text="Carregando recurso..." /> : <ButtonsAreaRecurso + contrast={props.contrast} sliceLength={props.sliceArr.length} length={props.length} showMore={props.showMore} diff --git a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js index 68e1de28823b08115ab2697d9beebb3f5a972549..74815059cb148ef80f0ae58e00b05e030c8aa9af 100644 --- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js +++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js @@ -31,8 +31,9 @@ import { RecursoVazio } from "ImportImages.js"; export default function Template(props) { return ( - <WhiteContainer> + <WhiteContainer contrast={props.contrast}> <Title + contrast={props.contrast} title={props.titleText} length={props.end} /> @@ -40,7 +41,7 @@ export default function Template(props) { { props.error ? <p - style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }} + className="errorText" > Erro ao tentar obter os dados </p> @@ -48,6 +49,7 @@ export default function Template(props) { props.length === 0 ? ( <NoContent + contrast={props.contrast} text={props.noContentText} image={RecursoVazio} /> @@ -60,6 +62,7 @@ export default function Template(props) { props.slice.map((card) => <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}> <ResourceCardFunction + contrast={props.contrast} key={card.id} avatar={card.publisher.avatar} id={card.id} @@ -84,6 +87,7 @@ export default function Template(props) { <LoadingSpinner text={'Carregando Recursos...'} /> : <ButtonsAreaRecurso + contrast={props.contrast} sliceLength={props.slice.length} length={props.length} showMore={props.showMore} diff --git a/src/Components/TabPanels/PanelComponents/TemplateRede.js b/src/Components/TabPanels/PanelComponents/TemplateRede.js index e5d2a845a2b2cc388331c622912ac904844379be..076d525e0f417265a86af4e2a6999bd730d62921 100644 --- a/src/Components/TabPanels/PanelComponents/TemplateRede.js +++ b/src/Components/TabPanels/PanelComponents/TemplateRede.js @@ -13,6 +13,7 @@ export default function PanelTemplateRede(props) { if (followerBoolean) { return ( <ContactCard + contrast={props.contrast} name={card.follower.name} avatar={card.follower.avatar !== undefined && card.follower.avatar !== "" ? apiDomain + card.follower.avatar : null} cover={card.follower.cover !== undefined && card.follower.cover !== "" ? apiDomain + card.follower.cover : null} @@ -28,6 +29,7 @@ export default function PanelTemplateRede(props) { else { return ( <ContactCard + contrast={props.contrast} name={card.followable.name ? card.followable.name : null} avatar={card.followable.avatar !== undefined && card.followable.avatar !== "" ? apiDomain + '/' + card.followable.avatar : null} cover={card.followable.cover !== undefined && card.followable.cover !== "" ? apiDomain + card.followable.cover : null} @@ -43,9 +45,10 @@ export default function PanelTemplateRede(props) { } return ( - <WhiteContainer> + <WhiteContainer contrast={props.contrast}> <Title + contrast={props.contrast} title={props.title} length={props.end} /> @@ -56,7 +59,7 @@ export default function PanelTemplateRede(props) { { props.error ? <p - style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }} + className="errorText" > Erro ao tentar obter os dados </p> @@ -64,7 +67,7 @@ export default function PanelTemplateRede(props) { props.length === 0 ? ( [ - <NoContent text={props.noContentText} /> + <NoContent contrast={props.contrast} text={props.noContentText} /> ] ) : @@ -87,9 +90,10 @@ export default function PanelTemplateRede(props) { </StyledGrid> { props.loadingMore ? - <LoadingSpinner text={'Carregando Recursos...'} /> + <LoadingSpinner contrast={props.contrast} text={'Carregando Recursos...'} /> : <ButtonsAreaRede + contrast={props.contrast} sliceLength={props.sliceArr.length} length={props.length} showMore={props.showMore} @@ -102,6 +106,6 @@ export default function PanelTemplateRede(props) { ) } - </WhiteContainer> + </WhiteContainer > ) } diff --git a/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js b/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js new file mode 100644 index 0000000000000000000000000000000000000000..d9adc97e4e36f878a07caa0a0b15e669999f6663 --- /dev/null +++ b/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js @@ -0,0 +1,83 @@ +/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre +Departamento de Informatica - Universidade Federal do Parana + +This file is part of Plataforma Integrada MEC. + +Plataforma Integrada MEC is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +Plataforma Integrada MEC is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +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 from 'react' +import Grid from '@material-ui/core/Grid'; +import ResourceCardFunction from '../../ResourceCardFunction.js' +import NoPub from '../../../img/Pagina_vazia_Sem_publicar.png' +import { HeaderGrid, StyledGrid } from '../StyledComponents.js' +import { NoContent } from './TabInicio.js' + +export default function LastLearnObjs(props) { + return ( + <React.Fragment> + <HeaderGrid container> + <Grid item xs={9}> + <h3>Últimos Recursos Publicados</h3> + </Grid> + </HeaderGrid> + + { + props.count === 0 ? + ( + [ + <Grid container> + <Grid item xs={12}> + <NoContent + image={NoPub} + text1={props.username + " ainda não disponibilizou nenhum recurso."} + text2={"Quando disponibilizar, eles aparecerão aqui."} + /> + </Grid> + </Grid> + ] + ) + : + ( + [ + <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}> + { + props.learningObjs.slice(0, 4).map((card) => + <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}> + <ResourceCardFunction + contrast={contrast} + avatar={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.publisher.name} + tags={card.tags} + href={"/recurso/" + card.id} + downloadableLink={card.default_attachment_location} + + /> + </Grid> + ) + } + </StyledGrid> + ] + ) + } + </React.Fragment> + ) +} 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/Components/TabPanels/StyledComponents.js b/src/Components/TabPanels/StyledComponents.js index 182fd013462a57191b7482f708e4379537c4255c..1ac86f9d3c002508daad5ae9f9b152bffc996cd3 100644 --- a/src/Components/TabPanels/StyledComponents.js +++ b/src/Components/TabPanels/StyledComponents.js @@ -61,7 +61,8 @@ export const WhiteContainer = styled.div` flex-direction : column; margin-left : auto; margin-right : auto; - background-color : #fff; + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; + border: ${props => props.contrast === "" ? 0 : "1px solid white"}; box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); margin-bottom : 30px; @@ -78,6 +79,16 @@ export const WhiteContainer = styled.div` @media screen and (max-width: 768px) { width : auto; } + + .errorText{ + font-size: 15px; + color: ${props => props.contrast === "" ? "" : "white"} + font-weight: lighter; + margin: 0 0 10px; + display: flex; + justify-content: center; + text-align: center; + } ` export const StyledGrid = styled(Grid)` @@ -93,6 +104,11 @@ export const Carregados = styled.div` position : relative; margin-right : -15px; margin-left : -15px; + .total{ + margin: 0 0 10px; + font-size: 14px; + color: ${props => props.contrast === "" ? "" : "white"}; + } ` export const HeaderGrid = styled(Grid)` @@ -146,7 +162,8 @@ export const ContainerStyled = styled.div` /*User page and Public User page components: */ export const HeaderContainer = styled.div` - background-color : #afeeee; + background-color: ${props => props.contrast === "" ? "#afeeee" : "black"}; + border: ${props => props.contrast === "" ? 0 : "1px solid white"}; position : relative; ` @@ -184,6 +201,14 @@ export const UserProfileInfoDiv = styled.div` left : 260px; overflow : hidden; margin-bottom : 20px; + p{ + font-size: 28px; + color: #fff; + padding: 5px 10px; + font-weight: 500; + background-color: ${props => props.contrast === "" ? "#77777796" : "black"}; + border-radius: 5px; + } ` export const CheckTeacherDiv = styled.div` @@ -191,6 +216,9 @@ export const CheckTeacherDiv = styled.div` padding-left : 250px; margin-bottom : -10px; display : absolute; + background-color: ${props => props.contrast === "" ? "" : "black"}; + border-left: ${props => props.contrast === "" ? 0 : "1px solid white"}; + border-right: ${props => props.contrast === "" ? 0 : "1px solid white"}; p { margin : 0 0 10px; @@ -198,6 +226,7 @@ export const CheckTeacherDiv = styled.div` font-size: 15px; line-height: 22px; text-align: left; + color: ${props => props.contrast === "" ? "" : "white"}; span { padding-right : 5px; @@ -212,11 +241,15 @@ export const CheckTeacherDiv = styled.div` ` export const StyledTabs = styled(Tabs)` - .MuiTab-textColorPrimary.Mui-selected { - color : #00bcd4; + .MuiTab-textColorPrimary{ + color: ${props => props.contrast === "" ? "#666" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + font-weight: 400; } - .PrivateTabIndicator-colorPrimary-4 { - background-color : #00bcd4 !important; + .MuiTab-textColorPrimary.Mui-selected { + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: none; + font-weight: 500; } ` @@ -225,6 +258,10 @@ export const RodapeDiv = styled.div` flex-direction : row; justify-content : flex-end; padding-right : 15px; + background-color: ${props => props.contrast === "" ? "transparent" : "black"}; + border-left: ${props => props.contrast === "" ? 0 : "1px solid white"}; + border-right: ${props => props.contrast === "" ? 0 : "1px solid white"}; + border-bottom: ${props => props.contrast === "" ? 0 : "1px solid white"}; .report-button { @media screen and (max-width: 768px) { @@ -235,7 +272,7 @@ export const RodapeDiv = styled.div` ` export const NavBarContentContainer = styled(Container)` - background-color : transparent; + background-color: ${props => props.contrast === "" ? "transparent" : "black"}; padding-bottom : 0; overflow-x : hidden !important; overflow-y : hiddden !important; @@ -243,10 +280,10 @@ export const NavBarContentContainer = styled(Container)` ` export const BackgroundDiv = styled.div` - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; font-family : 'Roboto', sans serif; font-size : 14px; padding-bottom : 50px; line-height : 20px; - background : #f4f4f4; + background-color: ${props => props.contrast === "" ? " #f4f4f4" : "black"}; ` diff --git a/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js b/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js index 7a1451b29c5becca86e59a94c36a08fbc54359ef..9243b0fb8c41722e27308a8d3ec922d7050c1ac1 100644 --- a/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js +++ b/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js @@ -19,7 +19,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React from 'react' import styled from 'styled-components' import TabRedeImgDiv from './TabRedeImgDiv.js' -import {WhiteContainer} from '../StyledComponents.js' +import { WhiteContainer } from '../StyledComponents.js' import Grid from '@material-ui/core/Grid'; //Image Import @@ -30,26 +30,27 @@ import { NoRede3 } from "ImportImages.js"; export default function ContainerRedeVazia (props) { return ( <React.Fragment> - <WhiteContainer> - <RedeVaziaBoxContainer> - <StyledSpan>Você ainda não tem uma rede. - <br/> - Veja como começar: + <WhiteContainer contrast={props.contrast}> + <RedeVaziaBoxContainer contrast={props.contrast}> + <StyledSpan contrast={props.contrast}> + Você ainda não tem uma rede. + <br /> + Veja como começar: </StyledSpan> - <StyledSpan> - <StyledHr/> - <Grid container style={{paddingLeft : "30px", paddingRight : "15px"}}> - <Grid item md={4} xs={12}> - <TabRedeImgDiv img={NoRede1} text={"Para encontrar um usuário específico, você pode utilizar a barra de busca e selecionar a busca por \"pessoas\""}/> - </Grid> + <StyledSpan contrast={props.contrast}> + <StyledHr /> + <Grid container style={{ paddingLeft: "30px", paddingRight: "15px" }}> + <Grid item md={4} xs={12}> + <TabRedeImgDiv img={NoRede1} text={"Para encontrar um usuário específico, você pode utilizar a barra de busca e selecionar a busca por \"pessoas\""} /> + </Grid> - <Grid item md={4} xs={12}> - <TabRedeImgDiv img={NoRede2} text={"Você pode começar a seguir uma pessoa clicando no botão \"seguir\" no card (A) ou na página dela (B)"}/> - </Grid> + <Grid item md={4} xs={12}> + <TabRedeImgDiv img={NoRede2} text={"Você pode começar a seguir uma pessoa clicando no botão \"seguir\" no card (A) ou na página dela (B)"} /> + </Grid> - <Grid item md={4} xs={12}> - <TabRedeImgDiv img={NoRede3} text={"Pronto! Agora você poderá acompanhar os novos recursos e coleções dessa pessoas na sua página, na aba \"Perfil e Atividades\""}/> - </Grid> + <Grid item md={4} xs={12}> + <TabRedeImgDiv img={NoRede3} text={"Pronto! Agora você poderá acompanhar os novos recursos e coleções dessa pessoas na sua página, na aba \"Perfil e Atividades\""} /> + </Grid> </Grid> </StyledSpan> </RedeVaziaBoxContainer> @@ -66,7 +67,7 @@ const StyledHr = styled.hr` ` const RedeVaziaBoxContainer = styled.div` - background-color : #fff; + background: ${props => props.contrast === "" ? "#fff" : "black"}; padding: 30px; padding-right: 30px; padding-left: 30px; @@ -76,14 +77,16 @@ const RedeVaziaBoxContainer = styled.div` padding-left: 0 !important; padding-right: 0 !important; margin-top: 20px; -} -` +`; + const StyledSpan = styled.span` + color: ${props => props.contrast === "" ? "" : "white"}; font-weight : lighter; margin-top: 0; font-family: Roboto; font-size: 24px; p { + color: ${props => props.contrast === "" ? "" : "white"}; font-weight : normal; } ` diff --git a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js index f8cf40d05116502b80295679b815932d28405f61..65f504c13616f1c2230b10328f156d917b587370 100644 --- a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js +++ b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js @@ -36,7 +36,7 @@ import { ExcluirAvatar } from "ImportImages.js"; function CloseModalButton (props) { return ( <StyledCloseModalButton onClick={props.handleClose}> - <CloseIcon/> + <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/> </StyledCloseModalButton> ) } diff --git a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js index ff2126a3a850ea9e949656f35edec15719c65008..4d0e391b5bb926f11c796c01f3acd6693f572cc9 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js +++ b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js @@ -34,214 +34,237 @@ import { noAvatar } from "ImportImages.js"; export default function TabPanelAtividades(props) { - const [loading, handleLoading] = useState(true) - const [loadingMore, handleLoadingMore] = useState(false); - const [notifications, setNotifications] = useState([]); - const [notificatonsLength, setLength] = useState(0); - const [totalResults, setTotalResults] = useState(0); - const [limit, setLimit] = useState(30); - const [error, setError] = useState(false) - const [snackInfo, setSnackInfo] = useState({ - open: false, - text: '', - severity: '', - color: '', - }) + const [loading, handleLoading] = useState(true) + const [loadingMore, handleLoadingMore] = useState(false); + const [notifications, setNotifications] = useState([]); + const [notificatonsLength, setLength] = useState(0); + const [totalResults, setTotalResults] = useState(0); + const [limit, setLimit] = useState(30); + const [error, setError] = useState(false) + const [snackInfo, setSnackInfo] = useState({ + open: false, + text: '', + severity: '', + color: '', + }) - function handleCloseSnackBar() { - const info = { - open: false, - text: '', - severity: '', - color: '', - } - handleSnackInfo(info) + function handleCloseSnackBar() { + const info = { + open: false, + text: '', + severity: '', + color: '', } + handleSnackInfo(info) + } - function handleSnackInfo(info) { - setSnackInfo({ - ...info - }) - } + function handleSnackInfo(info) { + setSnackInfo({ + ...info + }) + } + + const showMore = (offset) => { + handleLoadingMore(true); + const url = `/feed?offset=${limit}&limit=${offset}` + setLimit(limit + offset) + getRequest(url, handleSuccess, handleError) + } - const showMore = (offset) => { - handleLoadingMore(true); - const url = `/feed?offset=${limit}&limit=${offset}` - setLimit(limit + offset) - getRequest(url, handleSuccess, handleError) + function handleError(error) { + const info = { + open: true, + text: 'Ocorreu um erro ao tentar carregar suas notificações!', + severity: 'error', + color: 'red', } + handleSnackInfo(info) + handleLoadingMore(false) + handleLoading(false) + setError(true) + } - function handleError(error) { + function handleSuccess(data, header) { + if (header.has('X-Total-Count')) { + setTotalResults(header.get('X-Total-Count')); + } + if (data.errors) { + const info = { + open: true, + text: 'Ocorreu um erro ao tentar carregar suas notificações!', + severity: 'error', + color: 'red', + } + handleSnackInfo(info) + handleLoadingMore(false) + handleLoading(false) + setError(true) + } + else { + if (data.length >= 1) { + handleLoadingMore(false) + let currData = [...notifications] + currData = currData.concat(data) + setNotifications(currData) + setLength(currData.length) + handleLoading(false) + } + else { const info = { - open: true, - text: 'Ocorreu um erro ao tentar carregar suas notificações!', - severity: 'error', - color: 'red', + open: true, + text: 'Não há mais notificações para serem carregadas...', + severity: 'warning', + color: '#FFC125' } handleSnackInfo(info) handleLoadingMore(false) handleLoading(false) - setError(true) - } - - function handleSuccess(data, header) { - if (header.has('X-Total-Count')) { - setTotalResults(header.get('X-Total-Count')); - } - if (data.errors) { - const info = { - open: true, - text: 'Ocorreu um erro ao tentar carregar suas notificações!', - severity: 'error', - color: 'red', - } - handleSnackInfo(info) - handleLoadingMore(false) - handleLoading(false) - setError(true) - } - else { - if (data.length >= 1) { - handleLoadingMore(false) - let currData = [...notifications] - currData = currData.concat(data) - setNotifications(currData) - setLength(currData.length) - handleLoading(false) - } - else { - const info = { - open: true, - text: 'Não há mais notificações para serem carregadas...', - severity: 'warning', - color: '#FFC125' - } - handleSnackInfo(info) - handleLoadingMore(false) - handleLoading(false) - } - } + } } - useEffect(() => { - const url = `/feed?offset=0&limit=30` + } + useEffect(() => { + const url = `/feed?offset=0&limit=30` - getRequest(url, handleSuccess, handleError) - }, []) + getRequest(url, handleSuccess, handleError) + }, []) - return ( - <MainContainerDesktop> - <SnackBar - snackbarOpen={snackInfo.open} - handleClose={handleCloseSnackBar} - severity={snackInfo.severity} - color={snackInfo.color} - text={snackInfo.text} - /> - <Paper elevation={3}> - <div> - <DivTitulo> - <InnerDivTitulo> - <TituloContent> - <p style={{ margin: "0 0 10px", marginBottom: "40px" }}>Todas Notificações</p> - </TituloContent> - </InnerDivTitulo> - </DivTitulo> + return ( + <MainContainerDesktop contrast={props.contrast}> + <SnackBar + snackbarOpen={snackInfo.open} + handleClose={handleCloseSnackBar} + severity={snackInfo.severity} + color={snackInfo.color} + text={snackInfo.text} + /> + <Paper elevation={3}> + <div style={props.contrast === "" ? {} : { backgroundColor: "black" }}> + <DivTitulo> + <InnerDivTitulo> + <TituloContent contrast={props.contrast}> + <p style={{ margin: "0 0 10px", marginBottom: "40px" }}>Todas Notificações</p> + </TituloContent> + </InnerDivTitulo> + </DivTitulo> + { + loading ? + ( + <LoadingSpinner text={'Carregando Atividades'} contrast={props.contrast} /> + ) + : + ( + [ + <div> { - loading ? - ( - <LoadingSpinner text={'Carregando Atividades'} /> - ) - : - ( - [ - <div> - { - error ? - <p - style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }} - > - Erro ao tentar obter as notificações - </p> - : - notificatonsLength === 0 ? - ( + error ? + <ErrorP + contrast={props.contrast} + > + Erro ao tentar obter as notificações + </ErrorP> + : + notificatonsLength === 0 ? + ( - <NoNotificationsDiv> - <div> - <div> - <img src={Bolo} alt='bolo' style={{ width: "23px", display: "block", marginLeft: "auto", marginRight: "auto" }} /> - <H3Styled>Você se cadastrou na Plataforma</H3Styled> - </div> - <p - style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }} - >Construa conosco a plataforma e amplie sua rede de conhecimento interagindo + <NoNotificationsDiv> + <div> + <div> + <img src={Bolo} alt='bolo' style={{ width: "23px", display: "block", marginLeft: "auto", marginRight: "auto" }} /> + <H3Styled contrast={props.contrast}>Você se cadastrou na Plataforma</H3Styled> + </div> + <InfoP + contrast={props.contrast} + >Construa conosco a plataforma e amplie sua rede de conhecimento interagindo <br /> com pessoas envolvidas com experiências que ocorrem em todo o Brasil! - </p> - </div> - </NoNotificationsDiv> + </InfoP> + </div> + </NoNotificationsDiv> - ) - : - ( - <> - <List height={400} width={300}> - { - notifications.map((notification, id) => - (notification.recipient !== null) && - <ActivityListItem - key={id} - onMenuBar={false} - avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : noAvatar} - activity={notification.activity} - actionType={notification.trackable_type} - objectType={notification.recipient_type} - createdAt={notification.created_at} - ownerName={notification.owner.name} - ownerHref={'/usuario-publico/' + notification.owner.id} - recipientName={notification.recipient.name} - recipientHref={"/recurso/" + notification.recipient.id} - /> - ) - } - </List> - { - loadingMore ? - <LoadingSpinner text="Carregando mais atividades..." /> - : - <Grid container direction="row" alignItems="center" justify="flex-start"> - <Grid item xs={12} md={4}> - <LoadMoreButton onClick={() => { showMore(4) }}>CARREGAR MAIS 4</LoadMoreButton> - </Grid> - <Grid item xs={12} md={4}> - <LoadMoreButton onClick={() => { showMore(20) }}>CARREGAR MAIS 20</LoadMoreButton> - </Grid> - <Grid xs={12} md={4} item style={{ fontSize: "14px", color: "#666" }}> - <ShowData disabled={true}> - Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade " : "Atividades "} + ) + : + ( + <> + <List height={400} width={300}> + { + notifications.map((notification, id) => + (notification.recipient_type !== "NilClass") && + <ActivityListItem + contrast={props.contrast} + key={id} + onMenuBar={false} + avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : noAvatar} + activity={notification.activity} + actionType={notification.trackable_type} + objectType={notification.recipient_type} + createdAt={notification.created_at} + ownerName={notification.owner.name} + ownerHref={'/usuario-publico/' + notification.owner.id} + recipientName={notification.recipient.name} + recipientHref={"/recurso/" + notification.recipient.id} + /> + ) + } + </List> + { + loadingMore ? + <LoadingSpinner contrast={props.contrast} text="Carregando mais atividades..." /> + : + <Grid container direction="row" alignItems="center" justify="flex-start" spacing={1}> + <Grid item xs={12} md={4}> + <LoadMoreButton contrast={props.contrast} onClick={() => { showMore(4) }}>CARREGAR MAIS 4</LoadMoreButton> + </Grid> + <Grid item xs={12} md={4}> + <LoadMoreButton contrast={props.contrast} onClick={() => { showMore(20) }}>CARREGAR MAIS 20</LoadMoreButton> + </Grid> + <Grid xs={12} md={4} item style={{ fontSize: "14px", color: "#666" }}> + <ShowData disabled={true} contrast={props.contrast}> + Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade " : "Atividades "} de {totalResults} - </ShowData> - </Grid> - </Grid> - } - </> - ) - } - </div> - - ] - ) + </ShowData> + </Grid> + </Grid> + } + </> + ) } - </div> - </Paper> - </MainContainerDesktop> - ) + </div> + + ] + ) + } + </div> + </Paper> + </MainContainerDesktop> + ) } +const InfoP = styled.p` + font-size: "15px"; + font-weight: "lighter"; + margin: "0 0 10px"; + display: "flex"; + justify-content: "center"; + text-align: "center"; + color: ${props => props.contrast === "" ? "" : "white"}; +` + +const ErrorP = styled.p` + font-size: "15px"; + font-weight: "lighter"; + margin: "0 0 10px"; + display: "flex"; + justify-content: "center"; + text-align: "center"; + color: ${props => props.contrast === "" ? "" : "white"}; +` + const MainContainerDesktop = styled.div` padding : 10px 0 8px 0; margin-left : auto; margin-right : auto; + background-color: ${props => props.contrast === "" ? "" : "black"}; + border: ${props => props.contrast === "" ? "" : "1px solid white"}; @media screen and (min-width: 1200px) { width : 1170px; @@ -257,7 +280,7 @@ const MainContainerDesktop = styled.div` const H3Styled = styled.h3` font-size: 24px; font-weight : lighter; - color : #00bcd4; + color: ${props => props.contrast === "" ? "#00bcd4" : "white"}; margin-top : 20px; margin-bottom : 10px; display : flex; @@ -276,32 +299,32 @@ const NoNotificationsDiv = styled.div` const LoadMoreButton = styled(Button)` outline : none !important; display : block !important; - cusor : pointer !important; + cursor : pointer !important; min-height : 36px !important; - min-widht : 88px !important; + min-width : 88px !important; line-height: 36px !important; vertical-align: middle !important; - border : 0 !important; + border: ${props => props.contrast === "" ? "" : "1px solid white !important"}; padding : 0 px !important; margin : auto !important; - text-decoration : none !important; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; font-weight : 500 !important; overflow : hidden !important; text-transform : uppercase !important; font-size : 14px !important; - background : transparent !important; - color : #666 !important + background : transparent !important; + color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"}; &:hover { - background : 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"}; } ` const ShowData = styled(Button)` outline : none !important; display : block !important; - cusor : pointer !important; + cursor : pointer !important; min-height : 36px !important; - min-widht : 88px !important; + min-width : 88px !important; line-height: 36px !important; vertical-align: middle !important; border : 0 !important; @@ -313,7 +336,7 @@ const ShowData = styled(Button)` text-transform : none !important; font-size : 14px !important; background : transparent !important; - color : #666 !important + color: ${props => props.contrast === "" ? "#666 !important" : "white !important"}; &:hover { background : rgba(158,158,158,0.2) !important } @@ -325,6 +348,7 @@ const TituloContent = styled.div` position : relative; font-family: Roboto, sans-serif; font-weight : ligther; + color: ${props => props.contrast === "" ? "" : "white"}; ` const InnerDivTitulo = styled.div` diff --git a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js index 427a7d5c13857e1ea40608128e61b85c8ce8d9e5..3adaa32cc24270170e7b80c85aa3f80f1b309b67 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js +++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js @@ -153,33 +153,34 @@ export default function TabPanelColecoes(props) { { loading ? ( - <LoadingSpinner text={'CARREGANDO COLEÇÕES'} /> + <LoadingSpinner contrast={props.contrast} text={'CARREGANDO COLEÇÕES'} /> ) : ( [ <React.Fragment> <Tentativa + contrast={props.contrast} title={"Minhas Coleções"} length={userCollections.length} noContentText={ - <Grid direction='column' justify='center' alignItems='center'> + <StyledNewGrid contrast={props.contrast} direction='column' justify='center' alignItems='center'> <Grid item> <img src={ColecaoVazia} alt="ColecaoVazia" style={{ height: "150px", width: "150px", verticalAlign: "middle", border: "0" }} /> </Grid> <Grid> - <span style={{ fontFamily: "Roboto", fontWeight: "lighter", fontSize: "24px", textAlign: 'center' }}> - Criamos a sua primeira Coleção! + <span className="title"> + Crie a sua primeira Coleção! </span> </Grid> <Grid> - <p style={{ fontFamily: "Roboto", fontSize: "16px", margin: "10px 0 0", fontWeight: "normal" }}> + <p className="explication"> Adicione nela recursos que você queira acessar mais tarde. <br /> Crie novas coleções clicando no cartão roxo "Criar Colecão". </p> </Grid> - </Grid> + </StyledNewGrid> } sliceArr={userCollections} showMore={showMoreUserCollections} @@ -191,6 +192,7 @@ export default function TabPanelColecoes(props) { /> <PanelTemplateColecao + contrast={props.contrast} title={"Coleções que você segue"} length={followedCollections.length} noContentText={"Você ainda não segue nenhuma coleção."} @@ -215,34 +217,36 @@ function Tentativa(props) { if (props.error) return ( - <WhiteContainer> + <WhiteContainer contrast={props.contrast}> <Title + contrast={props.contrast} title={props.title} length={props.length} /> <p - style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }} + className="errorText" > Erro ao tentar obter os dados - </p> + </p> </WhiteContainer> ) else return ( - <WhiteContainer> - <CriarColecaoModal open={modalOpen} handleClose={() => { handleModal(); props.callback() }} /> + <WhiteContainer contrast={props.contrast}> + <CriarColecaoModal contrast={props.contrast} open={modalOpen} handleClose={() => { handleModal(); props.callback() }} /> <Title + contrast={props.contrast} title={props.title} length={props.end} /> <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}> <Grid item xs={12} sm={6} md={'auto'} lg={3}> - <CardDiv onClick={() => { handleModal() }}> - <div style={{ backgroundColor: "#673ab7", display: "flex", height: "100%", width: "100%", justifyContent: "center", alignItems: "center", cursor: "pointer" }}> + <CardDiv contrast={props.contrast} onClick={() => { handleModal() }}> + <div className="background"> <CreateNewFolderIcon style={{ color: "#fff", fontSize: "70px" }} /> - <p style={{ fontSize: "16px", margin: "0 0 10px", color: "#fff" }}> + <p className="action"> CRIAR COLEÇÃO </p> </div> @@ -268,6 +272,7 @@ function Tentativa(props) { props.sliceArr.map((card) => <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}> <CollectionCardFunction + contrast={props.contrast} name={card.name} tags={card.tags} rating={card.review_average} @@ -293,9 +298,10 @@ function Tentativa(props) { </StyledGrid> { props.loadingMore ? - <LoadingSpinner text={'Carregando Recursos...'} /> + <LoadingSpinner contrast={props.contrast} text={'Carregando Recursos...'} /> : <ButtonsAreaColecao + contrast={props.contrast} sliceLength={props.sliceArr.length} length={props.length} showMore={props.showMore} @@ -307,10 +313,45 @@ function Tentativa(props) { ) } +const StyledNewGrid = styled(Grid)` + + .title{ + font-family: Roboto; + font-weight: lighter; + font-size: 24px; + text-align: center; + color: ${props => props.contrast === "" ? "" : "white"}; + } + .explication{ + font-family: Roboto; + font-size: 16px; + margin: 10px 0 0; + color: ${props => props.contrast === "" ? "" : "white"}; + font-weight: normal; + } + +` + const CardDiv = styled(Card)` margin-top : 10px; margin-bottom : 10px; height : 381px; width : 272.5px; - ${'' /* float : left; */} + border: ${props => props.contrast === "" ? 0 : "1px solid white"}; + + .background{ + background-color: ${props => props.contrast === "" ? "#673ab7" : "black"}; + display: flex; + height: 100%; + width: 100%; + justify-content: center; + align-items: center; + cursor: pointer; + } + .action{ + font-size: 16px; + margin: 0 0 10px; + color: ${props => props.contrast === "" ? "#fff" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + } ` diff --git a/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js b/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js index 084f865b9077e0752df8b34d221debade2a35492..d2196091f056f506a7f8239ca7c6498eb3587490 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js +++ b/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js @@ -90,13 +90,14 @@ export default function TabPanelCuradoria(props) { { loading ? ( - <LoadingSpinner text={"Carregando Recursos"} /> + <LoadingSpinner contrast={props.contrast} text={"Carregando Recursos"} /> ) : ( [ <React.Fragment> <TemplateCuradoria + contrast={props.contrast} length={curating.length} titleText={curating.length === 1 ? "Recurso sendo avaliado pela curadoria" : "Recursos sendo avaliados pela curadoria"} noContentText={"Você não tem nenhum recurso sendo avaliado pelos curadores."} diff --git a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js index 3857508b93610e27d08654e486e43561d52610d2..94d4a13ab93b1216a52f0423e0691e37d84b06f7 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js +++ b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js @@ -117,22 +117,24 @@ export default function TabPanelEditarPerfil(props) { return ( <React.Fragment> <ModalAlterarCover + contrast={state.contrast} open={open} handleClose={controlModal} cover={tempCover} id={state.currentUser.id} /> <ModalAlterarAvatar + contrast={state.contrast} open={alterarAvatatarOpen} handleClose={controlModalAvatar} userAvatar={state.currentUser.avatar} id={state.currentUser.id} /> <div className="card-config"> - <h1 style={{ fontWeight: "300" }}>Editar Perfil </h1> + <h1 className="title">Editar Perfil </h1> <div className='content-div'> <div style={{ padding: "0", display: "flex", flexDirection: "column" }}> - <HeaderContainer> + <HeaderContainer contrast={state.contrast}> <div style={{ position: "relative", height: "100%" }}> <img src={state.currentUser.cover ? `${apiDomain}` + state.currentUser.cover : null} alt={state.currentUser.cover ? "user cover avatar" : ""} style={{ width: "100%", height: "100%", objectFit: "cover" }} /> <input accept="image/*" style={{ display: "none" }} id="icon-button-file" type="file" onChange={(e) => updateCover(e.target.files)} /> @@ -158,6 +160,7 @@ export default function TabPanelEditarPerfil(props) { <div style={{ display: "flex", flexDirection: "row", justifyContent: "center" }}> <form onSubmit={e => handleSubmit(e)}> <FormInput + contrast={state.contrast} inputType={"text"} name={"Nome Completo"} value={formNome.value} @@ -167,6 +170,7 @@ export default function TabPanelEditarPerfil(props) { error={formNome.key} /> <FormInput + contrast={state.contrast} inputType={"text"} name={"Sobre Mim"} value={formAboutMe.value} @@ -182,8 +186,8 @@ export default function TabPanelEditarPerfil(props) { </form> </div> <ButtonsDiv> - <Link to="perfil" ><ButtonCancelar ><span>CANCELAR</span></ButtonCancelar></Link> - <ButtonConfirmar onClick={e => handleSubmit(e)}><span>SALVAR ALTERAÇÕES</span></ButtonConfirmar> + <Link to="perfil" ><ButtonCancelar contrast={state.contrast} >CANCELAR</ButtonCancelar></Link> + <ButtonConfirmar contrast={state.contrast} onClick={e => handleSubmit(e)}>SALVAR ALTERAÇÕES</ButtonConfirmar> </ButtonsDiv> </div> </div > @@ -193,7 +197,7 @@ export default function TabPanelEditarPerfil(props) { } const ButtonConfirmar = styled(Button)` - background-color : #00bcd4 !important; + background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"}; color : #fff !important; font-family : 'Roboto',sans-serif !important; font-size : 14px !important; @@ -209,7 +213,7 @@ const ButtonConfirmar = styled(Button)` font-style : inherit !important; font-variant : inherit !important; font-family : inherit !important; - text-decoration : none !important; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; overflow : hidden !important; display : inline-block !important; position : relative !important; @@ -222,7 +226,11 @@ const ButtonConfirmar = styled(Button)` text-align : center !important; border-radius : 3px !important; box-sizing : border-box !important; - border : 0 !important; + color: ${props => props.contrast === "" ? "white !important" : "yellow !important"}; + border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"}; + :hover{ + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"}; + } ` export const ButtonCancelar = styled(Button)` @@ -238,7 +246,7 @@ export const ButtonCancelar = styled(Button)` font-style : inherit !important; font-variant : inherit !important; font-family : inherit !important; - text-decoration : none !important; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; overflow : hidden !important; display : inline-block !important; position : relative !important; @@ -252,11 +260,12 @@ export const ButtonCancelar = styled(Button)` border-radius : 3px !important; box-sizing : border-box !important; user-select : none !important; - border : 0 !important; + color: ${props => props.contrast === "" ? "black !important" : "yellow !important"}; + border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"}; padding : 0 6px !important; margin : 6px 8px !important; :hover{ - background-color : #f1f1f1 !important; + background-color: ${props => props.contrast === "" ? "#f1f1f1 !important" : "rgba(255,255,0,0.24) !important"}; } ` @@ -264,6 +273,7 @@ export const ButtonCancelar = styled(Button)` const ButtonsDiv = styled.div` text-align : right; margin-top : 80px; + text-decoration: underline; ` const ChangeAvatarDiv = styled.div` @@ -313,7 +323,8 @@ const ProfileAvatarDiv = styled.div` ` const HeaderContainer = styled.div` - background-color : #afeeee; + background: ${props => props.contrast === "" ? "#afeeee" : "black"}; + border: ${props => props.contrast === "" ? "1px solid #afeeee" : "1px solid white"}; position : relative; height : 150px; border-radius : 8px; diff --git a/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js b/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js index 9cf489886054275662595ce75d29302caf0ab2a0..4ac34bc7514659b330cbabd49cf785d3ab83573c 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js +++ b/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js @@ -134,13 +134,14 @@ export default function TabPanelFavoritos(props) { { loading ? ( - <LoadingSpinner text={'CARREGANDO...'} /> + <LoadingSpinner contrast={props.contrast} text={'CARREGANDO...'} /> ) : ( [ <React.Fragment> <Template + contrast={props.contrast} length={likedLearnObjs.length} titleText={likedLearnObjs.length === 1 ? "Recurso favoritado" : "Recursos favoritados"} noContentText={"Você não favoritou nenhum recurso ainda"} @@ -152,6 +153,7 @@ export default function TabPanelFavoritos(props) { /> <PanelTemplateColecao + contrast={props.contrast} title={"Coleções favoritadas"} length={likedCollections.length} noContentText={"Você ainda não curtiu nenhuma coleção."} diff --git a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js index 29edb847bc0aed30c5bef936117d0f95370d5958..9cb598a73d580fb96b60dc398f55e50332342bea 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js +++ b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js @@ -16,59 +16,64 @@ GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/ -import React, {useState} from 'react' +import React, { useState, useContext } from 'react' import Paper from '@material-ui/core/Paper'; import FormInput from "../../FormInput.js" -import {CompletarCadastroButton} from './PanelSolicitarContaProfessor.js' -import {ButtonCancelar} from './PanelEditarPerfil.js' +import { CompletarCadastroButton } from './PanelSolicitarContaProfessor.js' +import { ButtonCancelar } from './PanelEditarPerfil.js' import ValidateUserInput from '../../HelperFunctions/FormValidationFunction.js' import ModalExcluirConta from './ModalExcluirConta.js' +import { Store } from '../../../Store' -export default function TabPanelGerenciarConta (props) { +export default function TabPanelGerenciarConta(props) { + const { state } = useContext(Store) const [senhaAtual, setSenhaAtual] = useState( { - key : false, - value : localStorage.getItem("@portalmec/senha") || "" - }) + key: false, + value: localStorage.getItem("@portalmec/senha") || "" + }) const [novaSenha, setNovaSenha] = useState( { - key : false, - value : "" - }) + key: false, + value: "" + }) const [novaSenhaConfirmacao, setNovaSenhaConfirmacao] = useState( { - key : false, - value : "" - }) + key: false, + value: "" + }) const [novoEmail, setNovoEmail] = useState( { - key : false, - value : "" - }) + key: false, + value: "" + }) const handleChangeSenha = (e, type) => { const userInput = e.target.value const flag = (type === 'confirmacao' ? ValidateUserInput('confirmation', userInput, novaSenha.value) : ValidateUserInput('password', userInput)) - if(type === 'senhaAtual') { - setSenhaAtual({...senhaAtual, - key : flag, - value : userInput + if (type === 'senhaAtual') { + setSenhaAtual({ + ...senhaAtual, + key: flag, + value: userInput }) } - else if(type === 'novaSenha') { - setNovaSenha({...novaSenha, - key : flag, - value : userInput + else if (type === 'novaSenha') { + setNovaSenha({ + ...novaSenha, + key: flag, + value: userInput }) } - else if (type === 'confirmacao'){ - setNovaSenhaConfirmacao({...novaSenhaConfirmacao, - key : flag, - value : userInput + else if (type === 'confirmacao') { + setNovaSenhaConfirmacao({ + ...novaSenhaConfirmacao, + key: flag, + value: userInput }) } } @@ -77,43 +82,47 @@ export default function TabPanelGerenciarConta (props) { const userInput = e.target.value const flag = ValidateUserInput('email', userInput) - setNovoEmail({...novoEmail, - key : flag, - value : userInput + setNovoEmail({ + ...novoEmail, + key: flag, + value: userInput }) } const limpaCamposForm = () => { - setSenhaAtual({...senhaAtual, - key : false, - value : '' + setSenhaAtual({ + ...senhaAtual, + key: false, + value: '' }) - setNovaSenha({...novaSenha, - key : false, - value : '' + setNovaSenha({ + ...novaSenha, + key: false, + value: '' }) - setNovaSenhaConfirmacao({...novaSenhaConfirmacao, - key : false, - value : '' + setNovaSenhaConfirmacao({ + ...novaSenhaConfirmacao, + key: false, + value: '' }) } const onSubmit = (e, type) => { e.preventDefault() - if (type === 'senha'){ + if (type === 'senha') { if (!(senhaAtual.key || novaSenha.key || novaSenhaConfirmacao.key)) { - const info = {user : {password : novaSenha.value}} + const info = { user: { password: novaSenha.value } } props.updateUserPassword(info) limpaCamposForm() } } else { - const info = {user : {email : novoEmail.value}} + const info = { user: { email: novoEmail.value } } props.updateUserEmail(info) @@ -125,92 +134,96 @@ export default function TabPanelGerenciarConta (props) { return ( <> - <Paper elevation={3} style= {{width:"100%"}}> - <div className='card-config'> - <div className='content-div'> - <h1>Gerenciar Conta</h1> - <div style={{display : "flex", flexDirection : "column"}}> - <form style={{margin : "0 0 20px 0"}} onSubmit={e => onSubmit(e, 'senha')}> - <h4 style={{display:"flex", justifyContent:"flex-start", fontSize:"18px"}}>Alterar Senha</h4> - <FormInput - inputType={"password"} - name={"Senha Atual"} - value={senhaAtual.value} - placeholder={"Senha atual"} - handleChange={e => handleChangeSenha(e, 'senhaAtual')} - required={true} - error={senhaAtual.key} - help={ senhaAtual.key ? "Faltou inserir sua senha atual" : ""} - /> - <FormInput - inputType={"password"} - name={"Nova senha"} - value={novaSenha.value} - placeholder={"Nova senha"} - handleChange={e => handleChangeSenha(e, 'novaSenha')} - required={true} - error={novaSenha.key} - help={ novaSenha.key ? (novaSenha.value.length === 0 ? "Faltou definir uma nova senha" : "A senha precisa ter no mínimo 8 caracteres.") : ""} - /> - <FormInput - inputType={"password"} - name={"Digite novamente a nova senha"} - value={novaSenhaConfirmacao.value} - placeholder={"Digite novamente a nova senha"} - handleChange={e => handleChangeSenha(e, 'confirmacao')} - required={true} - error={novaSenhaConfirmacao.key} - help={ novaSenhaConfirmacao.key ? "As senhas devem ser iguais" : ""} - /> - <div style={{display:"flex", flexDirection:"row", justifyContent:"space-evenly"}}> - <span style={{paddingTop:"0.7em"}}><a href="recuperar-senha" style={{textAlign: "flex-start", color:"#00bcd4"}}>Esqueceu a senha?</a></span> - <div style={{margin:"0"}}> - <ButtonCancelar onClick={limpaCamposForm}>Limpar Campos</ButtonCancelar> - <CompletarCadastroButton type="submit">Alterar Senha</CompletarCadastroButton> - </div> + <Paper elevation={3} style={{ width: "100%" }}> + <div className='card-config'> + <div className='content-div'> + <h1 className="title">Gerenciar Conta</h1> + <div style={{ display: "flex", flexDirection: "column" }}> + <form style={{ margin: "0 0 20px 0" }} onSubmit={e => onSubmit(e, 'senha')}> + <h4 className="subtitle">Alterar Senha</h4> + <FormInput + contrast={state.contrast} + inputType={"password"} + name={"Senha Atual"} + value={senhaAtual.value} + placeholder={"Senha atual"} + handleChange={e => handleChangeSenha(e, 'senhaAtual')} + required={true} + error={senhaAtual.key} + help={senhaAtual.key ? "Faltou inserir sua senha atual" : ""} + /> + <FormInput + contrast={state.contrast} + inputType={"password"} + name={"Nova senha"} + value={novaSenha.value} + placeholder={"Nova senha"} + handleChange={e => handleChangeSenha(e, 'novaSenha')} + required={true} + error={novaSenha.key} + help={novaSenha.key ? (novaSenha.value.length === 0 ? "Faltou definir uma nova senha" : "A senha precisa ter no mínimo 8 caracteres.") : ""} + /> + <FormInput + contrast={state.contrast} + inputType={"password"} + name={"Digite novamente a nova senha"} + value={novaSenhaConfirmacao.value} + placeholder={"Digite novamente a nova senha"} + handleChange={e => handleChangeSenha(e, 'confirmacao')} + required={true} + error={novaSenhaConfirmacao.key} + help={novaSenhaConfirmacao.key ? "As senhas devem ser iguais" : ""} + /> + <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly" }}> + <span style={{ paddingTop: "0.7em" }}><a href="recuperar-senha" className="link">Esqueceu a senha?</a></span> + <div style={{ margin: "0" }}> + <ButtonCancelar contrast={state.contrast} onClick={limpaCamposForm}>Limpar Campos</ButtonCancelar> + <CompletarCadastroButton contrast={state.contrast} type="submit">Alterar Senha</CompletarCadastroButton> + </div> + </div> + </form> </div> - </form> + </div> </div> - </div> - </div> - </Paper> - <Paper elevation={3} style= {{width:"100%"}}> - <div className='card-config'> - <div className='content-div'> - <div style={{display : "flex", flexDirection : "column"}}> - <form onSubmit={(e) => onSubmit(e, 'email')}> - <h4 style={{display:"flex", justifyContent:"flex-start", fontSize:"18px"}}>Alterar e-mail</h4> - <FormInput - inputType={"text"} - name={"email"} - value={novoEmail.value} - placeholder={"E-mail"} - handleChange={e => handleChangeEmail(e)} - required={true} - error = {novoEmail.key} - /> - <div style={{margin:"0", display:"flex", justifyContent:"flex-start"}}> - <CompletarCadastroButton type="submit">SALVAR ALTERAÇÕES</CompletarCadastroButton> + </Paper> + <Paper elevation={3} style={{ width: "100%" }}> + <div className='card-config'> + <div className='content-div'> + <div style={{ display: "flex", flexDirection: "column" }}> + <form onSubmit={(e) => onSubmit(e, 'email')}> + <h4 className="subtitle">Alterar e-mail</h4> + <FormInput + contrast={state.contrast} + inputType={"text"} + name={"email"} + value={novoEmail.value} + placeholder={"E-mail"} + handleChange={e => handleChangeEmail(e)} + required={true} + error={novoEmail.key} + /> + <div style={{ margin: "0", display: "flex", justifyContent: "flex-start" }}> + <CompletarCadastroButton contrast={state.contrast} type="submit">SALVAR ALTERAÇÕES</CompletarCadastroButton> + </div> + </form> </div> - </form> + </div> </div> - </div> - </div> - </Paper> - <Paper elevation={3} style= {{width:"100%"}}> - <div className='card-config'> - <div className='content-div'> - <div> - <h4 style={{display:"flex", justifyContent:"flex-start", fontSize:"18px"}}>Conta</h4> - <span style={{margin:"0", display:"flex", justifyContent:"flex-start"}}>Antes de excluir a sua conta, saiba que ela será removida permanentemente.</span> - </div> - <div style={{margin:"0", display:"flex", justifyContent:"flex-start"}}> - <ModalExcluirConta open={modalExcluir} handleClose={() => {setModalExcluir(false)}}/> - <ButtonCancelar style={{color:'#eb4034'}} onClick={() => {setModalExcluir(true)}}>EXCLUIR CONTA</ButtonCancelar> + </Paper> + <Paper elevation={3} style={{ width: "100%" }}> + <div className='card-config'> + <div className='content-div'> + <div> + <h4 className="subtitle">Conta</h4> + <span style={state.contrast === "" ? { margin: "0", display: "flex", justifyContent: "flex-start" } : { margin: "0", display: "flex", justifyContent: "flex-start", color: "white" }}>Antes de excluir a sua conta, saiba que ela será removida permanentemente.</span> + </div> + <div style={{ margin: "0", display: "flex", justifyContent: "flex-start" }}> + <ModalExcluirConta contrast={state.contrast} open={modalExcluir} handleClose={() => { setModalExcluir(false) }} /> + <ButtonCancelar contrast={state.contrast} onClick={() => { setModalExcluir(true) }}>EXCLUIR CONTA</ButtonCancelar> + </div> + </div> </div> - </div> - </div> - </Paper> + </Paper> </> ) } diff --git a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js index 46400fa191908298e8c373e83a5971b74da1dcf3..4f82ce7edac857cb6a6246a899140ad868180ebb 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js +++ b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js @@ -45,7 +45,7 @@ export default function TabPanelAtividades(props) { const [drafts, setDrafts] = useState([]); const [curating, setCurating] = useState([]); - function handleSuccess(responseArr, headersArr) { + function handleSuccess(responseArr, headersArr) { setErrorInLearnObj(responseArr[0].errors ? true : false) setErrorInDrafts(responseArr[1].errors ? true : false) setErrorInCurating(responseArr[2].errors ? true : false) @@ -178,13 +178,14 @@ export default function TabPanelAtividades(props) { { loading ? ( - <LoadingSpinner text={'Carregando Recursos'} /> + <LoadingSpinner contrast={props.contrast} text={'Carregando Recursos'} /> ) : ( [ <React.Fragment> - <Template + <Template + contrast={props.contrast} length={learningObjects.length} titleText={learningObjects.length === 1 ? "Recurso Publicado" : "Recursos Publicados"} noContentText={"Você ainda não publicou nenhum Recurso!"} @@ -196,6 +197,7 @@ export default function TabPanelAtividades(props) { /> <Template + contrast={props.contrast} length={drafts.length} titleText={drafts.length === 1 ? "Rascunho Publicado" : "Rascunhos Publicados"} noContentText={"Você não tem nenhum recurso sendo editado."} @@ -207,6 +209,7 @@ export default function TabPanelAtividades(props) { /> <TemplateCuradoria + contrast={props.contrast} length={curating.length} titleText={curating.length === 1 ? "Recurso sendo avaliado pela curadoria" : "Recursos sendo avaliados pela curadoria"} noContentText={"Você não tem nenhum recurso sendo avaliado pelos curadores."} diff --git a/src/Components/TabPanels/UserPageTabs/PanelRede.js b/src/Components/TabPanels/UserPageTabs/PanelRede.js index ba5741a5044359462e57d866a74e946c4ae0d444..5077f98c14f5add6eac3ff982265ec488d1611d5 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelRede.js +++ b/src/Components/TabPanels/UserPageTabs/PanelRede.js @@ -131,7 +131,7 @@ export default function TabPanelRede(props) { loading ? ( [ - <LoadingSpinner text={'CARREGANDO...'} /> + <LoadingSpinner contrast={props.contrast} text={'CARREGANDO...'} /> ] ) : @@ -143,7 +143,7 @@ export default function TabPanelRede(props) { ( [ <> - <ContainerRedeVazia /> + <ContainerRedeVazia contrast={props.contrast} /> </> ] ) @@ -151,6 +151,7 @@ export default function TabPanelRede(props) { ( <React.Fragment> <PanelTemplateRede + contrast={props.contrast} title={followersList.length === 1 ? "Seguidor" : "Seguidores"} length={followersList.length} sliceArr={followersList} @@ -163,6 +164,7 @@ export default function TabPanelRede(props) { /> <PanelTemplateRede + contrast={props.contrast} title={"Seguindo"} length={followingList.length} sliceArr={followingList} diff --git a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js index 6a7aa88863a342036fab9e1474437c857e3e1d37..daef1b4dbe54114aedf0ce9690df937c557c07aa 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js +++ b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js @@ -16,30 +16,30 @@ 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} from 'react' +import React, { useContext } from 'react' import { Store } from '../../../Store.js'; import styled from 'styled-components' import Button from '@material-ui/core/Button'; -import {Link} from 'react-router-dom'; +import { Link } from 'react-router-dom'; //3 casos - //Professor nao cadastrado (nao pediu OU submitter_request = rejected) - //Professor em análise (submitter_request = requested) - //Professor aceito (submitter_request = accepted) -export default function TabPanelSolicitarContaProfessor (props) { +//Professor nao cadastrado (nao pediu OU submitter_request = rejected) +//Professor em análise (submitter_request = requested) +//Professor aceito (submitter_request = accepted) +export default function TabPanelSolicitarContaProfessor(props) { // eslint-disable-next-line - const {state, dispatch} = useContext(Store) + const { state, dispatch } = useContext(Store) return ( <div className='card-config'> <div className='content-div'> { - !state.currentUser.roles.some(role => role.name === "teacher") && ( state.currentUser.submitter_request === 'default' || state.currentUser.submitter_request === 'rejected' ) ? - ( + !state.currentUser.roles.some(role => role.name === "teacher") && (state.currentUser.submitter_request === 'default' || state.currentUser.submitter_request === 'rejected') ? + ( <div> - <ImageDiv/> - <StyledH2>Você é professor(a) da educação básica e gostaria de colaborar com a Plataforma?</StyledH2> - <StyledP>Ao ser identificado como professor(a), você poderá publicar e compartilhar recursos educacionais + <ImageDiv /> + <StyledH2 contrast={state.contrast}>Você é professor(a) da educação básica e gostaria de colaborar com a Plataforma?</StyledH2> + <StyledP contrast={state.contrast}>Ao ser identificado como professor(a), você poderá publicar e compartilhar recursos educacionais digitais na plataforma com toda a comunidade escolar do país. </StyledP> <div> @@ -47,28 +47,28 @@ export default function TabPanelSolicitarContaProfessor (props) { pathname: '/termos-publicar-recurso', state: true }}> - <CompletarCadastroButton > + <CompletarCadastroButton contrast={state.contrast}> SIM, COMPLETAR CADASTRO </CompletarCadastroButton> </Link> </div> </div> - ) - : - ( + ) + : + ( <> - { - state.currentUser.submitter_request === 'requested' ? - ( - <h1>A sua conta de Professor foi solicitada</h1> - ) - : - ( - <h1>Você já possui uma conta de Professor</h1> - ) - } + { + state.currentUser.submitter_request === 'requested' ? + ( + <h1 className="title">A sua conta de Professor foi solicitada</h1> + ) + : + ( + <h1 className="title">Você já possui uma conta de Professor</h1> + ) + } </> - ) + ) } </div> </div> @@ -76,8 +76,8 @@ export default function TabPanelSolicitarContaProfessor (props) { } export const CompletarCadastroButton = 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"}; font-family : 'Roboto',sans-serif !important; font-size : 14px !important; font-weight : bold !important; @@ -94,7 +94,7 @@ export const CompletarCadastroButton = 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; display : inline-block !important; position : relative !important; @@ -105,7 +105,10 @@ export const CompletarCadastroButton = styled(Button)` align-items : center !important; text-align : center !important; box-sizing : border-box !important; - border : 0 !important; + border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"}; + :hover{ + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"}; + } ` const StyledP = styled.p` @@ -113,9 +116,11 @@ const StyledP = styled.p` line-height : 22px; text-align : left; padding-bottom : 20px; + color: ${props => props.contrast === "" ? "" : "white"}; ` const StyledH2 = styled.h2` + color: ${props => props.contrast === "" ? "" : "white"}; font-weight : 200; font-size : 26px; line-height : 36px; diff --git a/src/Components/TermsPageContent.js b/src/Components/TermsPageContent.js index 918e040b626542c98ed6ecd83c739ac7d199ec0b..a71a66b915a70fc0bdaea36918381ba780b95d97 100644 --- a/src/Components/TermsPageContent.js +++ b/src/Components/TermsPageContent.js @@ -2,168 +2,168 @@ import React from 'react'; import Typography from '@material-ui/core/Typography'; import CardContent from '@material-ui/core/CardContent'; -export default function TermsPageContent () { +export default function TermsPageContent({ contrast }) { return ( - <CardContent style={{textAlign: "start", marginBottom: "10px", lineHeight:"21px", color:"rgb(102, 102, 102)", padding:"65px"}}> - <Typography variant="h4" style={{textAlign:"center", color:"rgb(102, 102, 102)"}}> Antes de Prosseguir, é importante que você leia os <strong>Termos de Uso</strong></Typography> - <div classname="texto-termos"> - <div classname="title"> - <Typography variant = "h3" style={{textAlign:"center", fontSize:"23px", marginTop:"20px", marginBottom:"10px"}}> + <div style={contrast === "" ? { textAlign: "start", lineHeight: "21px", color: "rgb(102, 102, 102)", padding: "65px" } : { textAlign: "start", lineHeight: "21px", color: "white", padding: "65px", backgroundColor: "black" }}> + <Typography variant="h4" style={contrast === "" ? { textAlign: "center", color: "rgb(102, 102, 102)" } : { textAlign: "center", color: "white" }}> Antes de Prosseguir, é importante que você leia os <strong>Termos de Uso</strong></Typography> + <div> + <div> + <Typography variant="h3" style={{ textAlign: "center", fontSize: "23px", marginTop: "20px", marginBottom: "10px" }}> <strong>TERMOS DE USO </strong> </Typography> - <Typography variant="body2" style={{fontSize:"15px",textAlign:"center", color:"rgb(102, 102, 102)"}}>Início da vigência: agosto de 2017</Typography> + <Typography variant="body2" style={contrast === "" ? { textAlign: "center", color: "rgb(102, 102, 102)" } : { textAlign: "center", color: "white" }}>Início da vigência: agosto de 2017</Typography> </div> <p>Aqui estão os “Termos de Uso” da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços, - e o que se espera de seus usuários. Por “usuário”, entende-se qualquer pessoa que acesse o domínio portal.mec.gov.br, tanto para pesquisa - (acesso) como para a inclusão de dados e informações (participação) mediante cadastro</p> + e o que se espera de seus usuários. Por “usuário”, entende-se qualquer pessoa que acesse o domínio portal.mec.gov.br, tanto para pesquisa + (acesso) como para a inclusão de dados e informações (participação) mediante cadastro</p> <p>Fazem parte dos Termos de Uso as políticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as - informações sobre como reportar violações.</p> + informações sobre como reportar violações.</p> <p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da Plataforma Integrada de - RED do MEC implica aceite das condições aqui elencadas.</p> + RED do MEC implica aceite das condições aqui elencadas.</p> <p>Por “serviço”, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir - um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p> + um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p> <p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler, - certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta - "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos, - utilize o formulário disponível em “Contato” para saná-las.</p> - <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}> - 1.Características da <strong>Plataforma Integrada de RED do MEC</strong> + certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta + "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos, + utilize o formulário disponível em “Contato” para saná-las.</p> + <Typography variant="h4" style={contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}> + 1.Características da <strong>Plataforma Integrada de RED do MEC</strong> </Typography> <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.</p> + 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.</p> <p>A <strong>Plataforma Integrada de RED do MEC</strong> foi criada em software livre, cujas informações para desenvolvedores estão disponíveis em gitlab.c3sl.ufpr.br/portalmec/portalmec. - A <strong>Plataforma Integrada de RED do MEC</strong> funciona ao mesmo tempo como repositório e referatório:</p> + A <strong>Plataforma Integrada de RED do MEC</strong> funciona ao mesmo tempo como repositório e referatório:</p> <ul> - <li style={{listStyleType:"disc"}}>Repositório: sítio na web que armazena conteúdos diversos (texto, áudio, vídeo, multimídia, etc.). Ou seja, um repositório efetivamente guarda uma cópia do recurso - educacional. Todos os conteúdos depositados na <strong>Plataforma Integrada de RED do MEC</strong> têm uma licença livre e são considerados Recursos Educacionais Abertos. - (Veja a seção 4 “Licença de uso do conteúdo”). + <li style={{ listStyleType: "disc" }}>Repositório: sítio na web que armazena conteúdos diversos (texto, áudio, vídeo, multimídia, etc.). Ou seja, um repositório efetivamente guarda uma cópia do recurso + educacional. Todos os conteúdos depositados na <strong>Plataforma Integrada de RED do MEC</strong> têm uma licença livre e são considerados Recursos Educacionais Abertos. + (Veja a seção 4 “Licença de uso do conteúdo”). </li> - <li style={{listStyleType:"disc"}}>Referatório: sítio na web que indica ou aponta para conteúdos diversos em sites externos, sem armazená-los. - Nesse caso, o conteúdo não está armazenado na <strong>Plataforma Integrada de RED do MEC</strong>, que somente indica a localização do recurso através de um link. - Os conteúdos referenciados podem ser fechados ou abertos. (Veja a seção 4, “Licença de uso do conteúdo”). + <li style={{ listStyleType: "disc" }}>Referatório: sítio na web que indica ou aponta para conteúdos diversos em sites externos, sem armazená-los. + Nesse caso, o conteúdo não está armazenado na <strong>Plataforma Integrada de RED do MEC</strong>, que somente indica a localização do recurso através de um link. + Os conteúdos referenciados podem ser fechados ou abertos. (Veja a seção 4, “Licença de uso do conteúdo”). </li> </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> + 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> + 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 Contato da plataforma.</p> - <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}> - 2. Cadastro e segurança + disponibilizados mediante a adesão aos critérios específicos levantados pelo MEC. Para mais informações, utilize a página de Contato da plataforma.</p> + <Typography variant="h4" style={contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}> + 2. Cadastro e segurança </Typography> <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> + 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> + 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> + 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> + 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> + 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> + 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> + 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> - <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}> - 3. Publicações de usuários - </Typography> + 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> + <Typography variant="h4" style={contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}> + 3. Publicações de usuários + </Typography> <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> - <Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}> - 3.1 É permitido ao usuário: + <Typography variant="h5" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}> + 3.1 É permitido ao usuário: </Typography> <ul> - <li style={{listStyleType:"disc"}}>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;</li> - <li style={{listStyleType:"disc"}}>Nos comentários, contatos e comunicações, é fundamental ser cortês e tratar os demais usuários com respeito;</li> - <li style={{listStyleType:"disc"}}>O usuário poderá sugerir links para outros sites, desde que tenham relação direta com o assunto abordado.</li> + <li style={{ listStyleType: "disc" }}>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;</li> + <li style={{ listStyleType: "disc" }}>Nos comentários, contatos e comunicações, é fundamental ser cortês e tratar os demais usuários com respeito;</li> + <li style={{ listStyleType: "disc" }}>O usuário poderá sugerir links para outros sites, desde que tenham relação direta com o assunto abordado.</li> </ul> - <Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}> - 3.2 É vedado ao usuário: + <Typography variant="h5" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}> + 3.2 É vedado ao usuário: </Typography> <ul> - <li style={{listStyleType:"disc"}}>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 Estatuto da Criança e do Adolescente), que invada a privacidade de terceiros, que tenha cunho comercial, viole os Direitos Humanos 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;</li> - <li style={{listStyleType:"disc"}}>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>;</li> - <li style={{listStyleType:"disc"}}>Disponibilizar conteúdo em desconformidade com a legislação de Direito Autoral, 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;</li> - <li style={{listStyleType:"disc"}}>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;</li> - <li style={{listStyleType:"disc"}}>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;</li> - <li style={{listStyleType:"disc"}}>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.</li> + <li style={{ listStyleType: "disc" }}>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 Estatuto da Criança e do Adolescente), que invada a privacidade de terceiros, que tenha cunho comercial, viole os Direitos Humanos 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;</li> + <li style={{ listStyleType: "disc" }}>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>;</li> + <li style={{ listStyleType: "disc" }}>Disponibilizar conteúdo em desconformidade com a legislação de Direito Autoral, 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;</li> + <li style={{ listStyleType: "disc" }}>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;</li> + <li style={{ listStyleType: "disc" }}>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;</li> + <li style={{ listStyleType: "disc" }}>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.</li> </ul> - <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}> - 4. Licença de uso do conteúdo + <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}> + 4. Licença de uso do conteúdo </Typography> <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 Licença Pública Creative Commons do tipo CC BY-SA, 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 Licença Pública Geral Affero GNU GPL (veja a tradução livre aqui), 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 style={{listStyleType:"disc"}}>CC-BY: 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.</li> - <li style={{listStyleType:"disc"}}>CC-BY-SA: 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</li> - <li style={{listStyleType:"disc"}}>CC-BY-NC: 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.</li> - <li style={{listStyleType:"disc"}}>CC-BY-NC-SA: 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.</li> + <li style={{ listStyleType: "disc" }}>CC-BY: 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.</li> + <li style={{ listStyleType: "disc" }}>CC-BY-SA: 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</li> + <li style={{ listStyleType: "disc" }}>CC-BY-NC: 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.</li> + <li style={{ listStyleType: "disc" }}>CC-BY-NC-SA: 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.</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 Iniciativa Educação Aberta</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> - <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}> - 5. Práticas de uso e armazenamento + <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}> + 5. Práticas de uso e armazenamento </Typography> <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> - <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}> - 6. Privacidade da informação + <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}> + 6. Privacidade da informação </Typography> <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. 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. Dados que não identificam o usuário serão armazenados indefinidamente para fins de pesquisa.</p> - <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}> - 7. Violação no sistema ou na base de dados + <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}> + 7. Violação no sistema ou na base de dados </Typography> <p>O responsável por qualquer intromissão, ou tentativa de intromissão, na <strong>Plataforma Integrada de RED do MEC</strong> ou por atividade que viole ou contrarie as disposições legais aplicáveis ou as cláusulas destes Termos de Uso estará sujeito à aplicação das sanções previstas neste instrumento, das ações legais pertinentes e de indenizações por eventuais danos causados.</p> - <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>8. Sanções</Typography> + <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>8. Sanções</Typography> <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 style={{listStyleType:"disc"}}>o usuário não cumprir qualquer dispositivo destes Termos de Uso;</li> - <li style={{listStyleType:"disc"}}>o usuário praticar atos fraudulentos ou dolosos;</li> - <li style={{listStyleType:"disc"}}>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.</li> + <li style={{ listStyleType: "disc" }}>o usuário não cumprir qualquer dispositivo destes Termos de Uso;</li> + <li style={{ listStyleType: "disc" }}>o usuário praticar atos fraudulentos ou dolosos;</li> + <li style={{ listStyleType: "disc" }}>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.</li> </ul> - <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>9. Limitação de responsabilidade</Typography> + <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>9. Limitação de responsabilidade</Typography> <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> - <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}> - 10. Inexistência de vínculo + <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}> + 10. Inexistência de vínculo </Typography> <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> - <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>11. Como reportar violações</Typography> + <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>11. Como reportar violações</Typography> <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> - <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}> - 12. Modificações nos Termos de Uso + <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}> + 12. Modificações nos Termos de Uso </Typography> <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> - <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}> - 13. Foro + 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> + <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}> + 13. Foro </Typography> <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> - </CardContent> + </div > ) } diff --git a/src/Components/TopicCard.js b/src/Components/TopicCard.js index 1f3bb10faef2737441cea49be8b331a26edf8a21..530b5bcc3cf7565b68690a556f8f9124ae34bdd1 100644 --- a/src/Components/TopicCard.js +++ b/src/Components/TopicCard.js @@ -28,22 +28,20 @@ import { Link } from 'react-router-dom'; export default function MaterialCard(props) { console.log(props); const thumb = require(`../../public/${props.topic.img}`) - +//className={`${props.contrast}BackColor`} return ( - <Card style={{ maxHeight: "100%", maxWidth: "300px" }}> + <Card className={`${props.contrast}BackColor ${props.contrast}Border`} style={{ maxHeight: "100%", maxWidth: "300px" }}> <img style={{ maxHeight: "100%", maxWidth: "100%" }} src={thumb} alt="thumbnail do recurso" /> - <CardContent style={{ height: "50px" }}> + <CardContent className={`${props.contrast}Text`} style={{ height: "50px" }}> <Title> - <BoldTitle> - {props.topic.pre_title} - </BoldTitle> + {props.topic.pre_title} {props.topic.title} </Title> </CardContent> - <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}> - <StyledLink to={"topico?colecao=" + props.colecao_id + "&topico=" + props.topic.id}> + <CardActions style={{ justifyContent: "center" }}> + <StyledLink className={`${props.contrast}LinkColor`} to={"topico?colecao=" + props.colecao_id + "&topico=" + props.topic.id}> <Button - color="secondary" + style={props.contrast === "" ? {color: "#e8224f"} : {color: "inherit"}} > Ver módulo </Button> @@ -55,7 +53,6 @@ export default function MaterialCard(props) { const Title = styled(Typography)` font-weight: 500; - color: rgb(102, 102, 102); font-size: 0.9em; margin-left: 10px; margin-right: 10px; @@ -65,10 +62,6 @@ const Title = styled(Typography)` -webkit-box-orient: vertical; overflow: hidden; ` -const BoldTitle = styled.span` - font-weight: bold; -` const StyledLink = styled(Link)` - text-decoration: none !important; color: inherit !important; ` \ No newline at end of file diff --git a/src/Components/TopicFooter.js b/src/Components/TopicFooter.js index c6ce8ea42ddf97ec278bc6cd63e779b4cd28ec5e..d6e33341361a023add43ada4b4ff4319ba598a63 100644 --- a/src/Components/TopicFooter.js +++ b/src/Components/TopicFooter.js @@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid'; export default function TopicFooter(props) { return ( - <Container> + <Container contrast={props.contrast}> <Wrapper> <Grid container @@ -30,7 +30,8 @@ export default function TopicFooter(props) { const Container=styled.div` margin-top: 15px; - background-color: #e81f4f; + background: ${props => props.contrast === "" ? "#e81f4f" : "black"}; + border-top: ${props => props.contrast === "" ? "0" : "1px solid white"}; height: auto; padding: 0; ` diff --git a/src/Components/TopicList.js b/src/Components/TopicList.js index e965adad1b530fbf96d090fa028b1fc83ebad01a..f9980c22ea78873912090381275664dc95d8c366 100644 --- a/src/Components/TopicList.js +++ b/src/Components/TopicList.js @@ -15,7 +15,7 @@ export default function TopicList(props) { return ( <Wrapper> - <Title>Módulos</Title> + <Title contrast={props.contrast}>Módulos</Title> <Grid container spacing={3} @@ -25,7 +25,7 @@ export default function TopicList(props) { {props.topicos.slice(0, (expanded ? -1 : 5)).map((t, index) => { return ( <Grid item key={index} md={3}> - <TopicCard topic={t} colecao_id={props.colecao_id} /> + <TopicCard contrast={props.contrast} topic={t} colecao_id={props.colecao_id} /> </Grid> ); }) @@ -38,12 +38,12 @@ export default function TopicList(props) { alignItems="center" > <Grid item> - <Fab size="medium" color="secondary" aria-label="edit" onClick={handleFabClick}> + <Fab size="medium" color="secondary" aria-label="edit" onClick={handleFabClick} style={props.contrast === "" ? { marginTop: "1em" } : { backgroundColor: "black", border: "1px solid white", marginTop: "1em" }}> {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />} </Fab> </Grid> <Grid item> - <FabText> + <FabText contrast={props.contrast}> {expanded ? "VER MENOS" : "VER TODOS OS MÓDULOS"} </FabText> </Grid> @@ -55,14 +55,14 @@ export default function TopicList(props) { } const FabText = styled.span` - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; font-weight: 900; line-height: 2em; ` const Title = styled.h1` font-weight: 100; margin-left: 30px; - color: rgb(102, 102, 102); + color: ${props => props.contrast === "" ? "rgb(102, 102, 102)" : "white"}; ` const Wrapper = styled.div` margin-right : auto; diff --git a/src/Components/UploadPageComponents/ButtonsDiv.js b/src/Components/UploadPageComponents/ButtonsDiv.js index 8e4d194578dc53db54ff9934e9aef996e4582026..9e6c0f7b6e8c7841b7407913a31df22162bfaad2 100644 --- a/src/Components/UploadPageComponents/ButtonsDiv.js +++ b/src/Components/UploadPageComponents/ButtonsDiv.js @@ -28,6 +28,7 @@ export default function ButtonsDiv(props) { return ( <> <ModalCancelar + contrast={props.contrast} open={modalCancelar} handleClose={() => { toggleModalCancelar(false) }} draftID={props.draftID} diff --git a/src/Components/UploadPageComponents/ChooseLinkSection.js b/src/Components/UploadPageComponents/ChooseLinkSection.js index 52a14ae21b18fb4c190effa4ba4d9ecfaca6d1f0..44f89db05f8fc457a5c429cf55541ef689217d83 100644 --- a/src/Components/UploadPageComponents/ChooseLinkSection.js +++ b/src/Components/UploadPageComponents/ChooseLinkSection.js @@ -16,81 +16,108 @@ 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 UndoIcon from '@material-ui/icons/Undo'; -import {WrapperBox, StyledTextField, BlueButton, GrayButton} from './StyledComponents.js' +import { WrapperBox, StyledTextField, BlueButton, GrayButton } from './StyledComponents.js' +import { makeStyles } from "@material-ui/styles"; -export default function ChooseLink (props) { - const [linkSent, setLinkSent] = useState(false) - const [link, setLink] = useState({flag : false, value : ""}) - const handleLink = (e) => { - let userInput = e.target.value - const urlRegex = new RegExp( - // eslint-disable-next-line - "(?:(?:(?:https?|ftp):\/\/))(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})*(?:[/?#]\S*)?", "i" - ) - let flag = !(urlRegex.test(userInput)) - setLink({...link, - flag : flag, - value : userInput} - ) +const useStyles = makeStyles(theme => ({ + darkTextField: { + maxWidth: "100%", + fontSize: "15px", + fontWeight: "lighter", + color: "white", + width: "100%" + }, + lightTextField: { + maxWidth: "100%", + fontSize: "15px", + fontWeight: "lighter", + color: "black", + width: "100%" + } +})); + +export default function ChooseLink(props) { + const classes = useStyles(); + const [linkSent, setLinkSent] = useState(false) + const [link, setLink] = useState({ flag: false, value: "" }) + const handleLink = (e) => { + let userInput = e.target.value + const urlRegex = new RegExp( + // eslint-disable-next-line + "(?:(?:(?:https?|ftp):\/\/))(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})*(?:[/?#]\S*)?", "i" + ) + let flag = !(urlRegex.test(userInput)) + setLink({ + ...link, + flag: flag, + value: userInput } + ) + } - const handleSubmit = (e) => { - e.preventDefault() - console.log(link.flag) - if (!link.flag) { - props.submit(link.value) - setLinkSent(true) - } + const handleSubmit = (e) => { + e.preventDefault() + console.log(link.flag) + if (!link.flag) { + props.submit(link.value) + setLinkSent(true) } + } - return ( - <WrapperBox> - <div className="inner"> - <div className="upload-title"> Enviar Link</div> + return ( + <WrapperBox contrast={props.contrast}> + <div className="inner"> + <div className="upload-title"> Enviar Link</div> - <div className="flex-column"> - <p>Insira o link da página do recurso abaixo:</p> - <form onSubmit={(e) => {handleSubmit(e)}}> - <StyledTextField - id = {"choose-link-form"} - label={"Exemplo: http://google.com"} - type = {"text"} - value = {link.value} - onChange = {e => {handleLink(e)}} - helperText = {link.flag ? "Faltou inserir um endereço eletrônico" : ""} - multiline={true} - rowsMax = {"10"} - rows={1} - error = {link.flag} - required = {true} - disabled={linkSent} - /> + <div className="flex-column"> + <p>Insira o link da página do recurso abaixo:</p> + { + !linkSent ? + <form onSubmit={(e) => { handleSubmit(e) }}> + <StyledTextField + contrast={props.contrast} + InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }} + id={"choose-link-form"} + label={"Exemplo: http://google.com"} + type={"text"} + variant="outlined" + value={link.value} + onChange={e => { handleLink(e) }} + helperText={link.flag ? "Faltou inserir um endereço eletrônico" : ""} + multiline={true} + rowsMax={"10"} + rows={1} + error={link.flag} + required={true} + /> - <div className="buttons-div"> - { - linkSent ? - ( - <BlueButton onClick={() => {setLinkSent(false)}}>Editar</BlueButton> - ) - : - ( - <> - <GrayButton onClick={() => {props.handleNextStage("default")}}> - <span className="button-text"> - <UndoIcon className="icon"/>Voltar - </span> - </GrayButton> - <BlueButton type="submit">SALVAR</BlueButton> - </> - ) - } - </div> - </form> + <div className="buttons-div"> + <> + <GrayButton contrast={props.contrast} onClick={() => { props.handleNextStage("default") }}> + <span className="button-text"> + <UndoIcon className="icon" />Voltar + </span> + </GrayButton> + <BlueButton contrast={props.contrast} type="submit">SALVAR</BlueButton> + </> </div> - </div> - </WrapperBox> - ) + </form> + : + <> + <p> + O link salvado foi: <a style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }} href={link.value}>{link.value}</a> + </p> + <div className="buttons-div"> + <BlueButton contrast={props.contrast} onClick={() => { setLinkSent(false) }}>Editar</BlueButton> + </div> + </> + + } + </div> + </div> + </WrapperBox > + ) } diff --git a/src/Components/UploadPageComponents/PartThree.js b/src/Components/UploadPageComponents/PartThree.js index 5170659ca6f2e961a14e314a827656737def4000..9e7f27128a157471cae3adfc4900af388a993cfb 100644 --- a/src/Components/UploadPageComponents/PartThree.js +++ b/src/Components/UploadPageComponents/PartThree.js @@ -99,6 +99,7 @@ export default function PartThree(props) { ( <React.Fragment> <ModalCancelar + contrast={props.contrast} open={modalCancelar} handleClose={() => { toggleModalCancelar(false) }} draftID={draft.id} @@ -217,8 +218,8 @@ export default function PartThree(props) { <div style={{margin:"0 auto", width: "304px"}}> { //<ReCaptcha sitekey={process.env.REACT_APP_SITE_KEY} verifyCallback={captchaVerified} /> //when key set in env - <ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production - //<ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} /> //test key, from google, do not use this one on production + //<ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production + <ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} /> //test key, from google, do not use this one on production } </div> </Grid> diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js index c1f9d40f55c2e4aafba0c44282ed441077853bf0..e197df897522f83790d7c64bcd2927054137c027 100644 --- a/src/Components/UploadPageComponents/Stepper.js +++ b/src/Components/UploadPageComponents/Stepper.js @@ -33,18 +33,18 @@ const useColorlibStepIconStyles = makeStyles({ width: 36, height: 36, display: 'flex', - border : 'solid 3px #00bcd4', + border: 'solid 3px #00bcd4', borderRadius: '50%', justifyContent: 'center', alignItems: 'center', }, active: { - backgroundColor : '#00bcd4', - color : '#fff', + backgroundColor: '#00bcd4', + color: '#fff', }, completed: { - backgroundColor : '#00bcd4', - color : '#fff', + backgroundColor: '#00bcd4', + color: '#fff', }, }); @@ -119,56 +119,30 @@ export default function CustomizedSteppers(props) { // const classes = useStyles(); const steps = getSteps(); -// {/* const handleNext = () => { -// setActiveStep((prevActiveStep) => prevActiveStep + 1); -// }; + // {/* const handleNext = () => { + // setActiveStep((prevActiveStep) => prevActiveStep + 1); + // }; -// const handleBack = () => { -// setActiveStep((prevActiveStep) => prevActiveStep - 1); -// }; + // const handleBack = () => { + // setActiveStep((prevActiveStep) => prevActiveStep - 1); + // }; -// const handleReset = () => { -// setActiveStep(0); -// };*/} + // const handleReset = () => { + // setActiveStep(0); + // };*/} return ( - <> - <StyledStepper style={{backgroundColor : "#e5e5e5", borderRadius : "50px", justifyContent : "space-between"}} activeStep={props.activeStep} connector={<></>}> + <> + <StyledStepper style={props.contrast === "" ? { backgroundColor: "#e5e5e5", borderRadius: "50px", justifyContent: "space-between" } : { backgroundColor: "black", border: "1px solid white", borderRadius: "50px", justifyContent: "space-between" }} activeStep={props.activeStep} connector={<></>}> {steps.map((label) => ( <Step key={label}> - <StepLabel StepIconComponent={ColorlibStepIcon}/> + <StepLabel StepIconComponent={ColorlibStepIcon} /> </Step> ))} </StyledStepper> - {/*<div> - {activeStep === steps.length ? ( - <div> - <Button onClick={handleReset} className={classes.button}> - Reset - </Button> - </div> - ) : ( - <div> - <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography> - <div> - <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}> - Back - </Button> - <Button - variant="contained" - color="primary" - onClick={handleNext} - className={classes.button} - > - {activeStep === steps.length - 1 ? 'Finish' : 'Next'} - </Button> - </div> - </div> - )} - </div>*/} </> - ); + ); } const StyledStepper = styled(Stepper)` diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js index 3c157e6f38eceec0f2376bcba6a8328fb6b64abe..2caa077ee007db22b38f891588d7ddca07dd3da6 100644 --- a/src/Components/UploadPageComponents/StyledComponents.js +++ b/src/Components/UploadPageComponents/StyledComponents.js @@ -35,18 +35,18 @@ export const StyledFormHelperText = styled(FormHelperText)` export const DottedBox = styled.div` align-self : center; /* width : ${props => props.thumbnail ? "100%" : "320px"}; */ - background-color : ${props => props.thumbnail ? "transparent" : "#f4f4f4"}; - border : ${props => props.thumbnail ? "2px dashed #a5a5a5" : "2px dashed #00bcd4"}; + background-color : ${props => props.contrast === "" ? props.thumbnail ? "transparent" : "#f4f4f4" : "black"}; + border : ${props => props.contrast === "" ? props.thumbnail ? "2px dashed #a5a5a5" : "2px dashed #00bcd4" : "2px dashed white"}; align-items : center; border-radius : 10px; display : flex; flex-direction : column; padding : 20px 0; - color : ${props => props.thumbnail ? "#a5a5a5" : "$666"}; + color : ${props => props.contrast === "" ? props.thumbnail ? "#a5a5a5" : "$666" : "white"}; .icon { font-size : 40px !important; - color : #00bcd4 !important; + color : ${props => props.contrast === "" ? "#00bcd4 !important" : "white !important"}; margin-bottom : 10px !important; vertical-align : middle !important; font-weight : normal !important; @@ -64,32 +64,29 @@ export const DottedBox = styled.div` export const BlueButton = styled(Button)` &:hover { - background-color : #00acc1 !important; + background-color: ${props => props.contrast === "" ? "#00acc1 !important" : "rgba(255,255,0,0.24) !important"}; } - color : #fff !important; - background-color : #00bcd4 !important; - height : 36px !important; + color : ${props => props.contrast === "" ? "#fff !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"}; + background-color : ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"}; + border : ${props => props.contrast === "" ? "none !important" : "1px solid white !important"}; box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important; font-weight : 600 !important; - min-width : 88px !important; - align-self : center !important; - padding : 16px !important; ` export const GrayButton = 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"}; } - height : 36px !important; + color : ${props => props.contrast === "" ? "#666 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"}; + background-color : ${props => props.contrast === "" ? "transparent !important" : "black !important"}; + border : ${props => props.contrast === "" ? "none !important" : "1px solid white !important"}; font-weight : 600 !important; - color : #666 !important; - background-color: transparent; - min-width : 88px !important; - height : 36px !important; - margin-left : 8px !important; - margin-right : 8px !important; + .icon { vertical-align : middle !important; + color : ${props => props.contrast === "" ? "#666 !important" : "white !important"}; font-weight : normal !important; font-style : normal !important; font-size : 24px !important; @@ -124,12 +121,14 @@ export const WrapperBox = styled.div` display : block; border-radius : 3px; box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); - background-color : #fff; font-size : 14px; + background: ${props => props.contrast === "" ? " #fff" : "black"}; + border: ${props => props.contrast === "" ? " " : "1px solid white"}; .inner { display : block; padding : 20px; + background: ${props => props.contrast === "" ? " #fff" : "black"}; } .upload-title { @@ -137,6 +136,7 @@ export const WrapperBox = styled.div` font-size : 26px; margin-bottom : 10px; font-weight : lighter; + color: ${props => props.contrast === "" ? "" : "white"}; } .flex-column { @@ -150,6 +150,7 @@ export const WrapperBox = styled.div` p { margin : 0 0 10px; + color: ${props => props.contrast === "" ? "" : "white"}; } .buttons-div { @@ -182,7 +183,7 @@ export const WrapperBox = styled.div` overflow : hidden; text-align : center; font-size : 14px; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; padding : 0 5px; } } @@ -231,7 +232,7 @@ export const WrapperBox = styled.div` .file-status { .icon-margin { - color : #00bcd4; + color: ${props => props.contrast === "" ? "#00bcd4" : "white"}; margin-right : 5px; } .MuiLinearProgress-root { @@ -251,17 +252,20 @@ export const WrapperBox = styled.div` margin-top: 40px; border-top: solid 1px #f4f4f4; text-align: center; + color: ${props => props.contrast === "" ? "" : "white"}; span { font-size : 16px; font-weight : lighter; + color: ${props => props.contrast === "" ? "" : "white"}; } } } ` export const InfoBox = styled.div` - background-color : #fff; + background: ${props => props.contrast === "" ? " #fff" : "black"}; + border: ${props => props.contrast === "" ? " " : "1px solid white"}; padding : 30px; box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); margin-bottom : 30px; @@ -365,76 +369,71 @@ export const StyledFormLabel = styled(FormLabel)` export const StyledTextField = styled(TextField)` font-size : 14px; width : 100% !important; - full-width : 100% !important; - .MuiFormControl-root { - margin : 18px 0 !important; + .MuiOutlinedInput-root { + &.Mui-focused fieldset { + border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + } + fieldset { + border-color: ${props => props.contrast === "" ? "#666" : "white"}; + } } - - .MuiFormHelperText-root { - text-align : left; - font-size : 14px !important ; + label{ + color: ${props => props.contrast === "" ? "#666" : "white"}; } label.Mui-focused { - color : #00bcd4; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; } label.Mui-focused.Mui-error { color : red; } - - .MuiInput-underline::after { - border-bottom: 2px solid #00bcd4; - } - .MuiFormHelperText-root { - font-size : 12px !important; - text-align : right !important; - } ` - const useStyles = makeStyles({ - root: { - '&:hover': { - backgroundColor: 'transparent', - }, - }}) - - export function StyledRadio (props) { - const classes = useStyles(); - return ( - <Radio - className={classes.root} - disableRipple - checkedIcon = { - <ObjTypeBox checked> - <span> - {GetIconByName(props.label)} - <p>{props.label}</p> - </span> - </ObjTypeBox> - } - icon = { - <ObjTypeBox> - <span> - {GetIconByName(props.label)} - <p>{props.label}</p> - </span> - </ObjTypeBox> - } - {...props} - /> - ) - } - - export const StyledDiv = styled.div` +const useStyles = makeStyles({ + root: { + '&:hover': { + backgroundColor: 'transparent', + }, + } +}) + +export function StyledRadio(props) { + const classes = useStyles(); + return ( + <Radio + className={classes.root} + disableRipple + checkedIcon={ + <ObjTypeBox checked> + <span> + {GetIconByName(props.label)} + <p>{props.label}</p> + </span> + </ObjTypeBox> + } + icon={ + <ObjTypeBox> + <span> + {GetIconByName(props.label)} + <p>{props.label}</p> + </span> + </ObjTypeBox> + } + {...props} + /> + ) +} + +export const StyledDiv = styled.div` display : flex; margin-top : 30px; justify-content : space-evenly; ` - export const OrangeButton = styled(Button)` +export const OrangeButton = styled(Button)` max-height : 36px !important; color : rgba(255,255,255,0.87) !important; box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important; @@ -444,7 +443,7 @@ export const StyledTextField = styled(TextField)` margin-right : 8px !important; ` - export const GreyButton = styled(Button)` +export const GreyButton = styled(Button)` &:hover { background-color : rgba(158,158,158,0.2) !important; } @@ -471,24 +470,28 @@ export const StyledTextField = styled(TextField)` } ` - export const Background = styled.div ` +export const Background = styled.div` padding-top : 40px; - background-color : #f4f4f4; - color : #666; + background: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; + color: ${props => props.contrast === "" ? "#666" : "white"}; + .container { - padding : 0; - margin-right : auto; - margin-left : auto; - - @media screen and (min-width: 768px) { - width : 750px; - } - @media screen and (min-width: 992px) { - width : 970px; - } - @media screen and (min-width: 1200px) { - width : 1170px; - } - } + padding : 0; + margin-right : auto; + margin-left : auto; + background: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; + color: ${props => props.contrast === "" ? "#666" : "white"}; + + + @media screen and (min-width: 768px) { + width : 750px; + } + @media screen and (min-width: 992px) { + width : 970px; + } + @media screen and (min-width: 1200px) { + width : 1170px; + } + } ` diff --git a/src/Components/UploadPageComponents/UploadFileWrapper.js b/src/Components/UploadPageComponents/UploadFileWrapper.js index b8919a54a0de3a1872de7c5258d32fdecfedc656..d922219fc484bd9d628a138f986ab0179d782743 100644 --- a/src/Components/UploadPageComponents/UploadFileWrapper.js +++ b/src/Components/UploadPageComponents/UploadFileWrapper.js @@ -16,21 +16,21 @@ 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 LinkIcon from '../../img/link_icon.svg' import ChooseLink from './ChooseLinkSection.js' -import {WrapperBox, BlueButton, GrayButton} from './StyledComponents.js'; -import {DottedBox} from './StyledComponents.js'; -import {getAxiosConfigFromJSON, updateHeaders, deleteRequest, putRequest} from '../HelperFunctions/getAxiosConfig.js' +import { WrapperBox, BlueButton, GrayButton } from './StyledComponents.js'; +import { DottedBox } from './StyledComponents.js'; +import { getAxiosConfigFromJSON, updateHeaders, deleteRequest, putRequest } from '../HelperFunctions/getAxiosConfig.js' import AttachFileIcon from '@material-ui/icons/AttachFile'; import axios from 'axios' -import {apiUrl} from '../../env'; +import { apiUrl } from '../../env'; import DoneIcon from '@material-ui/icons/Done'; import DeleteIcon from '@material-ui/icons/Delete'; import Alert from '../Alert.js'; import Snackbar from '@material-ui/core/Snackbar'; -export default function UploadFileWrapper (props) { +export default function UploadFileWrapper(props) { /*----------------------------------------------------------------- - Wrapper for file upload box - has three different stages: @@ -41,10 +41,11 @@ export default function UploadFileWrapper (props) { - Props used: - submit : called when the user clicks "ENVIAR" inside ChooseLinkSection; renders the alert snackbar to let them know the link was submitted - */ + - contrast : used to display contrast colors or not + */ const [stage, setStage] = useState(props.prevFile ? "fileSelected" : "default") - const handleNextStage = (newStage) => {setStage(newStage)} + const handleNextStage = (newStage) => { setStage(newStage) } // eslint-disable-next-line const [fileToUpload, setFileToUpload] = useState(null); @@ -55,15 +56,15 @@ export default function UploadFileWrapper (props) { const [uploadProgress, setProgress] = useState(0) const [attachmentID, setAttachmentID] = useState(props.prevFile ? props.prevFile.id : null) - async function onFileChange (file) { - if(!file) return; + async function onFileChange(file) { + if (!file) return; let newFile = file console.log(newFile) setFileToUpload(newFile); setFileName(newFile.name) - let total = Math.ceil(newFile.size/chunkSize) + let total = Math.ceil(newFile.size / chunkSize) let currentChunkStartByte = 0; let currentChunkFinalByte = chunkSize > newFile.size ? newFile.size : chunkSize; let chunkIdentifier = props.draftID + '-' + newFile.name; @@ -88,7 +89,7 @@ export default function UploadFileWrapper (props) { if (response.headers['access-token']) { updateHeaders(response.headers) } - setProgress(Math.round((currentChunkFinalByte/newFile.size) * 100)) + setProgress(Math.round((currentChunkFinalByte / newFile.size) * 100)) remainingBytes = newFile.size - currentChunkFinalByte; if (currentChunkFinalByte === newFile.size) { setFileDoneUploading(true) @@ -114,7 +115,7 @@ export default function UploadFileWrapper (props) { if (attachmentID != null) { const url = `/learning_objects/${props.draftID}/attachment/${attachmentID}` - deleteRequest(url, (data) => {handleNextStage("default")}, (error) => {console.log(error)}) + deleteRequest(url, (data) => { handleNextStage("default") }, (error) => { console.log(error) }) } } @@ -145,25 +146,25 @@ export default function UploadFileWrapper (props) { const url = `/learning_objects/${props.draftID}` let payload = { - "learning_object" : { - "id" : props.draftID, - "link" : link + "learning_object": { + "id": props.draftID, + "link": link } } - putRequest(url, payload, (data) => {toggleSnackbar(true)}, (error) => {console.log(error)}) + putRequest(url, payload, (data) => { toggleSnackbar(true) }, (error) => { console.log(error) }) } switch (stage) { case "error": - return( - <WrapperBox> + return ( + <WrapperBox contrast={props.contrast}> <div className="inner"> <div className="upload-title">Erro</div> - <span>Clique no botão para tentar novamente.</span> + <span>Clique no botão para tentar novamente.</span> <div className="flex-column"> <div className="buttons-div"> - <GrayButton onClick={() => {handleNextStage("default")}}> + <GrayButton contrast={props.contrast} onClick={() => { handleNextStage("default") }}> <span className="button-text"> Voltar </span> @@ -174,8 +175,8 @@ export default function UploadFileWrapper (props) { </WrapperBox> ) case "fileSelected": - return( - <WrapperBox> + return ( + <WrapperBox contrast={props.contrast}> <div className="inner"> <div className="upload-title"> {fileDoneUploading ? 'O arquivo foi carregado' : 'Carregando arquivo'} @@ -186,33 +187,33 @@ export default function UploadFileWrapper (props) { <div className="item-info"> { fileDoneUploading ? - ( - <React.Fragment> - <div className="file-status"> - <DoneIcon className="icon icon-margin"/> {fileName} + ( + <React.Fragment> + <div className="file-status"> + <DoneIcon contrast={props.contrast} className="icon icon-margin" /> {fileName} </div> - <GrayButton onClick={() => {handleDelete()}}> - Excluir <DeleteIcon className="icon icon-remove"/> + <GrayButton contrast={props.contrast} onClick={() => { handleDelete() }}> + Excluir <DeleteIcon className="icon icon-remove" /> </GrayButton> - </React.Fragment> - ) - : - ( - <React.Fragment> - <div className="file-status"> - {uploadProgress}% {fileName} - </div> - <GrayButton onClick={() => {handleCancel()}}> - Cancelar <DeleteIcon className="icon icon-remove"/> - </GrayButton> - </React.Fragment> - ) + </React.Fragment> + ) + : + ( + <React.Fragment> + <div className="file-status"> + {uploadProgress}% {fileName} + </div> + <GrayButton contrast={props.contrast} onClick={() => { handleCancel() }}> + Cancelar <DeleteIcon className="icon icon-remove" /> + </GrayButton> + </React.Fragment> + ) } </div> </div> <div className="warning"> <span>Não se esqueça de preencher as</span> - <br/> + <br /> <span>informações sobre o recurso ao lado.</span> </div> </div> @@ -222,19 +223,19 @@ export default function UploadFileWrapper (props) { case "choosingLink": return ( <React.Fragment> - <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}} - anchorOrigin = {{ vertical:'top', horizontal:'right' }} - > - <Alert severity="info" style={{backgroundColor:"#00acc1"}}> + <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => { toggleSnackbar(false) }} + anchorOrigin={{ vertical: 'top', horizontal: 'right' }} + > + <Alert severity="info" style={{ backgroundColor: "#00acc1" }}> Link salvo com sucesso! </Alert> </Snackbar> - <ChooseLink handleNextStage={handleNextStage} submit={handleChooseLink}/> + <ChooseLink contrast={props.contrast} handleNextStage={handleNextStage} submit={handleChooseLink} /> </React.Fragment> ) default: - return( - <WrapperBox> + return ( + <WrapperBox contrast={props.contrast}> <div className="inner"> <div className="upload-title"> Enviar Recurso</div> <div className="flex-column"> @@ -243,38 +244,39 @@ export default function UploadFileWrapper (props) { <div className="upload-form"> <form id="file_upload"> <DottedBox + contrast={props.contrast} onDrop={e => handleDrop(e)} onDragOver={e => handleDragOver(e)} - > - <AttachFileIcon className="icon"/> + > + <AttachFileIcon className="icon" /> <input type="file" - onChange = {(e) => {onFileChange(e.target.files[0])}} + onChange={(e) => { onFileChange(e.target.files[0]) }} id="upload-file" - style={{display : "none"}} - /> - <BlueButton> - <label htmlFor="upload-file" style={{width : "inherit", cursor : "pointer"}}> + style={{ display: "none" }} + /> + <BlueButton contrast={props.contrast}> + <label htmlFor="upload-file" style={{ width: "inherit", cursor: "pointer" }}> ESCOLHER ARQUIVO </label> </BlueButton> - <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span> + <span style={{ marginTop: "6px" }}>Ou arrastar e soltar o arquivo aqui</span> </DottedBox> </form> </div> </div> <div className="strike-box"> - <div className="strike"/><h3>ou</h3><div className="strike"/> + <div className="strike" /><h3>ou</h3><div className="strike" /> </div> <div className="enviar-link-texto"> - <img alt="" src={LinkIcon}/> - <br/> + <img alt="" src={LinkIcon} /> + <br /> <span>Enviar link de um recurso de outro site</span> </div> - <BlueButton onClick={ () => {handleNextStage("choosingLink")} }>ENVIAR LINK</BlueButton> + <BlueButton contrast={props.contrast} onClick={() => { handleNextStage("choosingLink") }}>ENVIAR LINK</BlueButton> </div> </div> </WrapperBox> diff --git a/src/Components/UserPageComponents/Avatar.js b/src/Components/UserPageComponents/Avatar.js index 8f3c05b8ff5937ef8609e24ed3015dc136860a09..03b3ae11d5423a23f40052bcb23afaff56c60d12 100644 --- a/src/Components/UserPageComponents/Avatar.js +++ b/src/Components/UserPageComponents/Avatar.js @@ -41,6 +41,7 @@ export default function ProfileAvatar (props) { return ( <> <ModalAlterarAvatar + contrast={props.contrast} open={open} handleClose={controlModal} userAvatar={currentAvatar} diff --git a/src/Components/UserPageComponents/Cover.js b/src/Components/UserPageComponents/Cover.js index 339c36fd612cb3dc1a595c9a994a775af089c886..4d5e702ca9a14b3120e93dda0282aa2876866408 100644 --- a/src/Components/UserPageComponents/Cover.js +++ b/src/Components/UserPageComponents/Cover.js @@ -48,6 +48,7 @@ export default function Cover (props) { return ( <> <ModalAlterarCover + contrast={props.contrast} open = {open} handleClose={controlModal} cover={tempCover} diff --git a/src/Components/UserPageComponents/EditProfileButton.js b/src/Components/UserPageComponents/EditProfileButton.js index beaa7137501ba03fc9de6f46d14391c6e7072f13..de9e1d778682515aa40d1f60864d2b4fe5c7208d 100644 --- a/src/Components/UserPageComponents/EditProfileButton.js +++ b/src/Components/UserPageComponents/EditProfileButton.js @@ -18,25 +18,25 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React from 'react'; import { Store } from '../../Store.js'; import styled from 'styled-components' -import {Link} from 'react-router-dom'; +import { Link } from 'react-router-dom'; import EditIcon from '@material-ui/icons/Edit'; import Button from '@material-ui/core/Button'; -export default function EditProfileButton () { - const {state} = React.useContext(Store) +export default function EditProfileButton({ contrast }) { + const { state } = React.useContext(Store) return ( - <EditProfileAnchor to="/editarperfil"> + <EditProfileAnchor to="/editarperfil" contrast={contrast}> <Button> - {state.windowSize.width >=900 ? + {state.windowSize.width >= 900 ? ( <React.Fragment> - <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span> + <EditIcon className="icon" /> <span>EDITAR PERFIL</span> </React.Fragment> ) : ( - <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> + <EditIcon className="icon" /> ) } </Button> @@ -47,28 +47,33 @@ export default function EditProfileButton () { const EditProfileAnchor = styled(Link)` Button { box-shadow : 0 2px 5px 0 rgba(0,0,0,.26); - background-color : #fafafa; + background-color: ${props => props.contrast === "" ? "#fafafa" : "black"}; position : absolute; right : 10px; top : 10px; margin-bottom : 20px; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "yellow"}; padding : 0 10px; - text-decoration : none; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; border-radius : 3px; @media screen and (min-width: 800px) { min-height : 36px; min-width : 88px; } line-height : 36px; - border : 0; + border: ${props => props.contrast === "" ? "0" : "1px solid white"}; display: inline-block; text-align : center; :hover{ - background-color : #fafafa; + background-color: ${props => props.contrast === "" ? "#fafafa" : "rgba(255,255,0,0.24)"}; } @media screen and (max-width: 600px) { max-width : 44px !important ; } } + .icon{ + margin-right: 5px; + vertical-align: middle; + color: ${props => props.contrast === "" ? "#666" : "white"}; + } ` diff --git a/src/Components/UserPageComponents/SubmitterStatus.js b/src/Components/UserPageComponents/SubmitterStatus.js index 1cb29365644038f8a8a9a115675ddf8f0af1ccfd..d36f53dc7412e5c83e7c54bdeb3b46bc7558a74e 100644 --- a/src/Components/UserPageComponents/SubmitterStatus.js +++ b/src/Components/UserPageComponents/SubmitterStatus.js @@ -15,13 +15,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} from 'react'; +import React, { useContext } from 'react'; import { Store } from '../../Store.js'; import CheckDecagram from '../../img/check-decagram-gray.svg' -import {Link} from 'react-router-dom'; +import { Link } from 'react-router-dom'; -export default function SubmitterStatus (props) { - const {state} = useContext(Store) +export default function SubmitterStatus(props) { + const { state } = useContext(Store) let text; switch (state.currentUser.submitter_request) { @@ -37,21 +37,21 @@ export default function SubmitterStatus (props) { return ( <React.Fragment> - <p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}> - <span style={{cursor:"pointer"}}> - <span style={{paddingRight:"5px"}}> - <img src={CheckDecagram} alt='check icon'/> - </span> - {text} - <Link to={{ - pathname: '/editarperfil', - tabValue: { - value: 1 - } - }}> - <span style={{color:"#00bcd4"}}> SAIBA MAIS</span> - </Link> - + <p style={{ fontSize: "15px", lineHeight: "22px", textAlign: "left", margin: "0 0 10px" }}> + <span> + <span style={{ paddingRight: "5px" }}> + <img src={CheckDecagram} alt='check icon' /> + </span> + {text} + <Link to={{ + pathname: '/editarperfil', + tabValue: { + value: 1 + } + }}> + <span style={state.contrast === "" ? { color: "#00bcd4" } : { color: "yellow", textDecoration: "underline", cursor: "pointer" }}> SAIBA MAIS</span> + </Link> + </span> </p> </React.Fragment> diff --git a/src/Components/UserPageComponents/UserInfo.js b/src/Components/UserPageComponents/UserInfo.js index 4782759f8f2e4eb70a86b03e13d8be603c035f6e..b8dde202a47fa21b4e53baa725421b115c762230 100644 --- a/src/Components/UserPageComponents/UserInfo.js +++ b/src/Components/UserPageComponents/UserInfo.js @@ -25,18 +25,8 @@ export default function UserInfo(props) { const user = state.currentUser.name; return ( - <UserProfileInfoDiv> - <p - style={{ - fontSize: "28px", - color: "#fff", - paddingTop: "5px", - paddingBottom: "5px", - fontWeight: "500", - backgroundColor: "#77777796", - borderRadius: "5px", - }} - > + <UserProfileInfoDiv contrast={state.contrast}> + <p> {user} </p> </UserProfileInfoDiv> diff --git a/src/Components/carousel.css b/src/Components/carousel.css index e1c5dc424e68875b47dc7a46017780516bf8f1a5..3a4c6336859565de33631450b35b9ed963a8dfdd 100644 --- a/src/Components/carousel.css +++ b/src/Components/carousel.css @@ -16,34 +16,36 @@ 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/>.*/ -.carousel .control-dots{ - position: inherit !important; -} -.carousel .control-arrow { - background: orange !important; - /* position: relative !important; */ - -webkit-box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2); - box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2); - -} .carousel .slide { background-color: inherit !important; } +.carousel .control-dots { + position: inherit !important; +} + +.carousel .control-arrow { + background: orange !important; + /* position: relative !important; */ + + -webkit-box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2); + box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2); +} + .MuiPaper-elevation1-209{ - box-shadow: none !important; + box-shadow: none !important; } .carousel.carousel-slider .control-arrow { - top: 35%!important; - bottom: 50%!important; - border-radius: 100%!important; - opacity: 1!important; - text-align: center; - vertical-align: middle; - height: 50px; - width: 50px; + top: 35%!important; + bottom: 50%!important; + border-radius: 100%!important; + opacity: 1!important; + text-align: center; + vertical-align: middle; + height: 50px; + width: 50px; } diff --git a/src/Pages/AboutPage.js b/src/Pages/AboutPage.js index ab1b6bbbe3a74ce0f0d2ee7ad58b8b5b2e434956..bf21ccee212d2033d6bf82039872d2093b881599 100644 --- a/src/Pages/AboutPage.js +++ b/src/Pages/AboutPage.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, { useEffect } from 'react'; +import React, { useEffect, useContext } from 'react'; import Grid from '@material-ui/core/Grid'; import styled from 'styled-components'; import Modal from '../Components/ModalAbout'; import AboutCarousel from "../Components/AboutCarousel"; import AboutCarouselPartner from '../Components/AboutCarouselPartner'; - +import { Store } from '../Store'; /*Importação de imagens para o componente*/ import Agpl from "../img/sobre/agpl.svg"; @@ -47,6 +47,7 @@ const Secao2 = styled.div` text-align: center; font-size: 14px; line-height: 1.42857143; + background-color: ${props => props.contrast === '' ? "" : "black"}; .container { @@ -99,6 +100,7 @@ const Secao3 = styled.div` padding: 30px 0; background-color: #1ab9de; color: #fff; + background-color: ${props => props.contrast === '' ? "" : "black"}; .container { @@ -164,6 +166,7 @@ const Secao4 = styled.div` height: 720px; text-align: center; color: #666; + background-color: ${props => props.contrast === '' ? "" : "black"}; .container { @@ -223,7 +226,7 @@ const Secao4 = styled.div` text-align: center; border: 0; padding: 0 6px; - hite-space: nowrap; + white-space: nowrap; text-decoration: none; @@ -319,7 +322,7 @@ const Secao5 = styled.div` const Secao6 = styled.div` height: 500px; - + background-color: ${props => props.contrast === '' ? "" : "black"}; .container { @@ -374,7 +377,7 @@ const Secao6 = styled.div` const Secao7 = styled.div` height: 100%; - background-color: #f4f4f4; + background-color: ${props => props.contrast === '' ? "#f4f4f4" : "black"}; .container { @@ -416,10 +419,8 @@ const Secao7 = styled.div` } .card { - height: 80%; - - background-color: #fff; + background-color: ${props => props.contrast === '' ? "#fff" : "black"}; box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); padding: 40px 20px; text-align: center; @@ -441,6 +442,7 @@ const Secao7 = styled.div` img { width: 114px; + background-color: ${props => props.contrast === '' ? "#fff" : "black"}; } } @@ -455,6 +457,7 @@ const Secao7 = styled.div` const Secao8 = styled.div` height: 230px; + background-color: ${props => props.contrast === '' ? "" : "black"}; .container { @@ -499,8 +502,7 @@ const Secao8 = styled.div` } button { - - background-color: #ed6f00; + background-color: ${props => props.contrast === '' ? "#ed6f00" : "black"}; font-family: Roboto,sans-serif; font-size: 14px; font-weight: 500; @@ -518,7 +520,7 @@ const Secao8 = styled.div` text-align: center; border-radius: 3px; user-select: none; - border: 0; + border: ${props => props.contrast === '' ? "0" : "1px solid white"}; padding: 0 6px; padding-right: 6px; padding-left: 6px; @@ -526,33 +528,24 @@ const Secao8 = styled.div` font-weight: 500; font-size: 14px; overflow: hidden; - - - + :hover{ + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"}; + } a { - color: #fff; - text-decoration: none; + color: ${props => props.contrast === '' ? "#fff" : "yellow"}; + text-decoration: ${props => props.contrast === '' ? "" : "underline"};; } } - } } } - - - ` - - - - - - - export default function AboutPage(props) { var pageWidth = window.innerWidth + const { state } = useContext(Store); + const calculateMargin = ((pageWidth) => { if (pageWidth > 700 && pageWidth <= 850) { return "40%" @@ -584,12 +577,14 @@ export default function AboutPage(props) { </Secao1> - <Secao2> + <Secao2 contrast={state.contrast} > <div className="container"> <div className="container-secao"> <div className="conteudo-secao"> - <h2>Um Pouco da História</h2> - <p style={{ marginLeft: 20, marginRight: 20, marginBottom: 40 }}> + <h2 className={`${state.contrast}TextColor`}> + Um Pouco da História + </h2> + <p className={`${state.contrast}TextColor`} style={{ marginLeft: 20, marginRight: 20, marginBottom: 40 }}> A partir de uma iniciativa do Ministério da Educação, surge em outubro de 2015 a proposta de reunir e disponibilizar, em um único lugar, os Recursos Educacionais Digitais dos principais @@ -603,10 +598,10 @@ export default function AboutPage(props) { colaborativo você também! </p> <img src={Agpl} alt="agpl" /> - <p> + <p className={`${state.contrast}TextColor`}> Este programa é software livre, sob os termos da - <a href="https://www.gnu.org/licenses/agpl-3.0.en.html" rel="noreferrer" target="_blank"> licença GNU/AGPL</a><br /> - Seu código fonte está disponível no <a href="https://gitlab.c3sl.ufpr.br/portalmec/portalmec" rel="noreferrer" target="_blank">GitLab</a> + <a className={`${state.contrast}LinkColor`} href="https://www.gnu.org/licenses/agpl-3.0.en.html" rel="noreferrer" target="_blank"> licença GNU/AGPL</a><br /> + Seu código fonte está disponível no <a className={`${state.contrast}LinkColor`} href="https://gitlab.c3sl.ufpr.br/portalmec/portalmec" rel="noreferrer" target="_blank">GitLab</a> </p> @@ -615,7 +610,7 @@ export default function AboutPage(props) { </div> </Secao2> - <Secao3> + <Secao3 contrast={state.contrast} > <div className="container"> <div className="container-secao"> <div className="conteudo-secao"> @@ -660,18 +655,18 @@ export default function AboutPage(props) { - <Secao4> + <Secao4 contrast={state.contrast}> <div className="container"> <div className="container-secao" id="portaisparceiros"> <div className="conteudo-secao" > - <div> + <div className={`${state.contrast}TextColor`}> <h2>Portais Parceiros</h2> <p>Aqui na Plataforma você encontra os Recursos Digitais dos principais portais do MEC e de vários outros parceiros.</p> </div> <AboutCarouselPartner /> - <div> + <div className={`${state.contrast}TextColor`}> <h3>Você busca Recursos Educacionais Digitais em outros sites?</h3> <p> Você gostaria que a plataforma tivesse os recursos do site que @@ -680,7 +675,7 @@ export default function AboutPage(props) { </p> </div> <div style={{ marginTop: "30px" }}> - <Modal /> + <Modal contrast={state.contrast} /> </div> </div> @@ -703,16 +698,15 @@ export default function AboutPage(props) { </div> </Secao5> - <Secao6> + <Secao6 contrast={state.contrast}> <div className="container"> <div className="container-secao"> <div className="conteudo-secao"> - <div> + <div className={`${state.contrast}TextColor`}> <h2>Aqui você pode:</h2> - </div> <div> - <AboutCarousel /> + <AboutCarousel contrast={state.contrast} /> </div> </div> @@ -720,13 +714,13 @@ export default function AboutPage(props) { </div> </Secao6> - <Secao7> + <Secao7 contrast={state.contrast}> <div className="container"> <div className="container-secao"> <div className="conteudo-secao"> <div className="cabecalho"> - <h2>A quem se destina?</h2> - <p>A plataforma é aberta e destina-se a todos e todas que se + <h2 className={`${state.contrast}TextColor`}>A quem se destina?</h2> + <p className={`${state.contrast}TextColor`}>A plataforma é aberta e destina-se a todos e todas que se interessam<br />pela relação entre a escola e a Cultura Digital:</p> </div> <div> @@ -734,8 +728,8 @@ export default function AboutPage(props) { <Grid item xs> <div className="card"> <img src={Professores} alt="" /> - <h3>Professores</h3> - <p> + <h3 className={`${state.contrast}TextColor`}>Professores</h3> + <p className={`${state.contrast}TextColor`}> Encontre recursos digitais que se encaixem aos objetivos das suas aulas! Aproveite para seguir outros professores, coleções e conhecer experiências de uso! @@ -745,8 +739,8 @@ export default function AboutPage(props) { <Grid item xs> <div className="card"> <img src={Alunos} alt="" /> - <h3>Alunos</h3> - <p> + <h3 className={`${state.contrast}TextColor`}>Alunos</h3> + <p className={`${state.contrast}TextColor`}> Você pode complementar os seus estudos com recursos digitais que lhe interessem. Gostou de algum recurso? Recomende ao seu professor ou professora. @@ -756,8 +750,8 @@ export default function AboutPage(props) { <Grid item xs> <div className="card"> <img src={Gestores} alt="" /> - <h3>Gestores</h3> - <p> + <h3 className={`${state.contrast}TextColor`}>Gestores</h3> + <p className={`${state.contrast}TextColor`}> Desenvolva junto com o coletivo da escola ações e projetos pedagógicos com recursos digitais importantes para o seu contexto. </p> @@ -766,8 +760,8 @@ export default function AboutPage(props) { <Grid item xs> <div className="card"> <img src={Comunidade} alt="" /> - <h3>Comunidade Escolar</h3> - <p> + <h3 className={`${state.contrast}TextColor`}>Comunidade Escolar</h3> + <p className={`${state.contrast}TextColor`}> Encontre recursos digitais e materiais de formação que contribuam para a aprendizagem e práticas educativas na sua comunidade escolar. @@ -782,12 +776,12 @@ export default function AboutPage(props) { </div> </Secao7> - <Secao8> + <Secao8 contrast={state.contrast}> <div className="container"> <div className="container-secao"> <div className="conteudo-secao"> - <h2>Ficou alguma dúvida? Gostaria de fazer alguma sugestão ou crítica? Construa conosco.</h2> + <h2 className={`${state.contrast}TextColor`}>Ficou alguma dúvida? Gostaria de fazer alguma sugestão ou crítica? Construa conosco.</h2> <div> <button><a href="contato">ENTRAR EM CONTATO</a></button> </div> diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js index 3b06dd99ecead429793638aaff5fcb691fc2672b..9057088f6ea69fcc94862841b6aed8a1700d5e3b 100644 --- a/src/Pages/CollectionPage.js +++ b/src/Pages/CollectionPage.js @@ -18,7 +18,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React, { useRef, useState, useEffect, useContext } from 'react'; import { Grid } from '@material-ui/core'; import CollectionAuthor from '../Components/CollectionAuthor.js'; -import VerticalRuler from '../Components/VerticalRuler.js'; import CollectionDescription from '../Components/CollectionDescription.js'; import ResourceList from '../Components/ResourceList.js'; import CollectionCommentSection from '../Components/CollectionCommentSection.js'; @@ -58,7 +57,7 @@ export default function CollectionPage(props) { } if (error) - return <CollectionNotFound> + return <CollectionNotFound contrast={state.contrast}> <Grid container direction='column' justify='center' alignItems='center' spacing={1}> <Grid item> <p className="not-found"> @@ -69,22 +68,24 @@ export default function CollectionPage(props) { <Link className="link" to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`}> <Button - variant='contained' - className="back-button" - > - Voltar para a busca de coleções. + variant='contained' + className="back-button" + > + Voltar para a busca de coleções. </Button> </Link> - </Grid> + </Grid> </Grid> </CollectionNotFound > if (loading) - return <LoadingSpinner text="Carregando coleção..." /> + return <LoadingDiv contrast={state.contrast}> + <LoadingSpinner contrast={state.contrast} text="Carregando coleção..." /> + </LoadingDiv> else return ( - <> + <div style={state.contrast === "" ? { backgroundColor: "white" } : { backgroundColor: "black" }}> <BreadCrumbsDiv> - <StyledBreadCrumbs> + <StyledBreadCrumbs contrast={state.contrast}> <Link to="/">Página Inicial</Link> <span>Coleções</span> </StyledBreadCrumbs> @@ -92,6 +93,7 @@ export default function CollectionPage(props) { <Grid container direction="row" justify="center" alignItems="center"> <Grid item md={3}> <CollectionAuthor + contrast={state.contrast} author_id={collection.owner.id ? collection.owner.id : 0} name={collection.owner.name ? collection.owner.name : ""} imgsrc={collection.owner.avatar ? apiDomain + collection.owner.avatar : noAvatar} /> @@ -100,6 +102,7 @@ export default function CollectionPage(props) { <Grid item md={5}> <CollectionDescription + contrast={state.contrast} stars={collection.review_average} likes={collection.likes_count} liked={collection.liked} @@ -110,53 +113,56 @@ export default function CollectionPage(props) { <Grid item md={3}> <DowloadButton + contrast={state.contrast} id={collection_id} /> <div style={{ height: 12 }}></div> <FollowCollectionButton + contrast={state.contrast} followed={collection.followed} user_id={state.currentUser.id} collection_id={collection_id} /> </Grid> </Grid> - <VerticalRuler width={1} height={100} color="rgb(238, 238, 238)" /> - - <Grid container justify="center" style={{ backgroundColor: '#f4f4f4' }}> + <Grid container justify="center" style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}> {/* <Grid item xs={1}/> */} <Grid item xs={10}> - <ResourceList resources={ - collection.collection_items ? - collection.collection_items.map(i => { - return { - type: i.collectionable.object_type, - author: i.collectionable.author, - title: i.collectionable.name, - rating: i.collectionable.review_average, - likeCount: i.collectionable.likes_count, - liked: i.collectionable.liked, - avatar: i.collectionable.publisher.avatar, - thumbnail: i.collectionable.thumbnail, - tags: i.collectionable.tags.map(t => t), - id: i.collectionable.id, - downloadableLink: i.collectionable.default_attachment_location, - publisher: i.collectionable.publisher.name, - published: i.collectionable.state - } - }) - : [] - } /> + <ResourceList + contrast={state.contrast} + resources={ + collection.collection_items ? + collection.collection_items.map(i => { + return { + type: i.collectionable.object_type, + author: i.collectionable.author, + title: i.collectionable.name, + rating: i.collectionable.review_average, + likeCount: i.collectionable.likes_count, + liked: i.collectionable.liked, + avatar: i.collectionable.publisher.avatar, + thumbnail: i.collectionable.thumbnail, + tags: i.collectionable.tags.map(t => t), + id: i.collectionable.id, + downloadableLink: i.collectionable.default_attachment_location, + publisher: i.collectionable.publisher.name, + published: i.collectionable.state + } + }) + : [] + } /> </Grid> <Grid container item xs={12} style={{ marginTop: 40, paddingBottom: 40 }} ref={comment_ref}> <CollectionCommentSection + contrast={state.contrast} id={collection_id} currentUserId={state.currentUser.id} avatar={state.currentUser.avatar ? apiDomain + state.currentUser.avatar : noAvatar} /> </Grid> </Grid> - </> + </div> ); } @@ -164,15 +170,22 @@ const StyledBreadCrumbs = styled(Breadcrumbs)` display: flex; justify-content: flex-start; span { - color: #a5a5a5; + color: ${props => props.contrast === "" ? "#666 !important" : "white !important"}; } a { - color: #00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; } `; +const LoadingDiv = styled.div` + background-color: ${props => props.contrast === "" ? "" : "black"}; + +` + const CollectionNotFound = styled.div` + background-color: ${props => props.contrast === "" ? "" : "black !important"}; + color: ${props => props.contrast === "" ? "#666 !important" : "white !important"}; margin: 1em; .not-found{ @@ -184,8 +197,10 @@ const CollectionNotFound = styled.div` } .back-button{ - background-color: #673ab7; - color: whitesmoke; + background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"}; + border: ${props => props.contrast === "" ? "none" : "1px solid white !important"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; + color: ${props => props.contrast === "" ? "whitesmoke" : "yellow !important"}; } .link{ diff --git a/src/Pages/Contact.js b/src/Pages/Contact.js index 211c9d8012c011391e6f4083a47f4ce2484cf870..27abe1a9241386b94760d876a2b5c3510fec8c3b 100644 --- a/src/Pages/Contact.js +++ b/src/Pages/Contact.js @@ -16,165 +16,168 @@ 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 InputFormulario from "../Components/ContactForm.js"; +import { Store } from '../Store'; //Image Import import { Banner1 } from "ImportImages.js"; const Secao1 = styled.div` - width: 100%; - background-image: url(${Banner1}); - background-size: cover; - background-position: bottom center; - height: 250px; - color: #fff; - line-height: 1.1; - text-align: center; - padding-top: 120px; - - h2 { - font-family: Pompiere, cursive; - font-size: 52px; + width: 100%; + background-color: ${props => props.contrast === "" ? "" : "black"}; + background-image: ${props => props.contrast === "" ? `url(${Banner1})` : ""}; + background-size: cover; + background-position: bottom center; + height: 250px; color: #fff; - margin: 0; - padding-left: 0; - padding-right: 0; - font-weight: 500; - } - - h3 { - margin-top: 20px; - margin-bottom: 10px; - font-family: Roboto, sans-serif; - font-size: 30px; - font-weight: lighter; - } + line-height: 1.1; + text-align: center; + padding-top: 120px; + + h2 { + font-family: Pompiere, cursive; + font-size: 52px; + color: #fff; + margin: 0; + padding-left: 0; + padding-right: 0; + font-weight: 500; + } + + h3 { + margin-top: 20px; + margin-bottom: 10px; + font-family: Roboto, sans-serif; + font-size: 30px; + font-weight: lighter; + } `; const Secao2 = styled.div` - height: 708px; - background-color: #f4f4f4; - display: flex; - justify-content: center; - align-items: center; + height: 708px; + background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; + display: flex; + justify-content: center; + align-items: center; `; const Secao3 = styled.div` - height: 127px; - background-color: #f4f4f4; - color: #666; - line-height: 1.42857143; - font-size: 18px; - text-align: center; - padding-top: 70px; - - p { - margin: 0 0 10px 0; - } + height: 127px; + background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; + color: ${props => props.contrast === "" ? "#666" : "white"}; + line-height: 1.42857143; + font-size: 18px; + text-align: center; + padding-top: 70px; + + p { + margin: 0 0 10px 0; + } `; 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); - padding: 40px; - height: 560px; - width: 480px; - color: #666; - - form .inputBlock { - margin-block: 22px; - - } - - form .inputBlock label { - font-size: 14px; - font-weight: bold; - display: block; - - } - - form .inputBlock input { - width: 100%; - height: 32px; - font-size: 14px; - border: 0; - border-bottom: 1px solid #eee; - - } - - form .inputBlock.Message input { - height: 131px; - } - - form buttom[type=submit] { - width: 100%; - border: 0; - margin-top: 30px; - background: #7d40e7 - border-radius: 2px; - padding: 15px 20px; - font-size: 16px; - font-weight: bold; - color: #fff; - cursor: pointer; - transition: background 0.5s; - - } - - form buttom[type=submit]:hover { - background: #6931ac - } - - - h2 { - font-size: 24px; - font-weight: lighter; - margin-bottom: 50px; - margin-top: 20px; - text-align: center; - - } + 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: ${props => props.contrast === "" ? "#666" : "white"}; + border: ${props => props.contrast === "" ? "" : "1px solid white"}; + + form .inputBlock { + margin-block: 22px; + + } + + form .inputBlock label { + font-size: 14px; + font-weight: bold; + display: block; + + } + + form .inputBlock input { + width: 100%; + height: 32px; + font-size: 14px; + border: 0; + border-bottom: 1px solid #eee; + + } + + form .inputBlock.Message input { + height: 131px; + } + + form buttom[type=submit] { + width: 100%; + border: 0; + margin-top: 30px; + background: #7d40e7 + border-radius: 2px; + padding: 15px 20px; + font-size: 16px; + font-weight: bold; + color: #fff; + cursor: pointer; + transition: background 0.5s; + + } + + form buttom[type=submit]:hover { + background: #6931ac + } + + + h2 { + font-size: 24px; + font-weight: lighter; + margin-bottom: 50px; + margin-top: 20px; + text-align: center; + + } `; function Contact(props) { - - useEffect(() => { - window.scrollTo(0, 0) - }) - - return ( - <> - <link - href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap" - rel="stylesheet" - /> - <Secao1> - <h2>CONTATO</h2> - <h3>Quer enviar uma mensagem?</h3> - </Secao1> - - <Secao2> - <Formulario noValidate autoComplete="off"> - <h2> - Entre em contato para enviar dúvidas, - <br /> - sugestões ou críticas - </h2> - <InputFormulario /> - </Formulario> - </Secao2> - - <Secao3> - <span>MEC - Ministério da Educação </span> - <p> - Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP: - 70.047-900 - Brasília/DF. Telefone: 0800 616161 - </p> - </Secao3> - </> - ); + const { state } = useContext(Store) + useEffect(() => { + window.scrollTo(0, 0) + }) + + return ( + <div> + <link + href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap" + rel="stylesheet" + /> + <Secao1 contrast={state.contrast}> + <h2>CONTATO</h2> + <h3>Quer enviar uma mensagem?</h3> + </Secao1> + + <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 contrast={state.contrast} /> + </Formulario> + </Secao2> + + <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: + 70.047-900 - Brasília/DF. Telefone: 0800 616161 + </p> + </Secao3> + </div> + ); } export default Contact; diff --git a/src/Pages/EditProfilePage.js b/src/Pages/EditProfilePage.js index f85c888d5bc7624c7988c6f76119554ba0c5da05..6ed58aec32a714348acef51edd0b8b49000743c8 100644 --- a/src/Pages/EditProfilePage.js +++ b/src/Pages/EditProfilePage.js @@ -119,7 +119,7 @@ export default function EditProfilePage(props) { } return ( - <div style={{ backgroundColor: "#f4f4f4", color: "#666" }}> + <Main contrast={state.contrast}> <Snackbar open={snackbarOpened.open} autoHideDuration={1000} onClose={handleCloseSnackbar} anchorOrigin={{ vertical: 'top', horizontal: 'right' }} > @@ -127,31 +127,34 @@ export default function EditProfilePage(props) { </Snackbar> <CustomizedBreadcrumbs + contrast={state.contrast} values={["Minha área", "Configurações da Conta", tabs[tabValue]]} /> <MainContainerDiv container spacing={3} justify="center" align="center"> <Grid item xs={12} md={3} style={{ fontFamily: "Roboto" }} > <Paper elevation={3}> - <ConfiguracoesMenu> - <h4 style={{ marginTop: "10px", fontFamily: "inherit", display: "flex", justifyContent: "center" }}> + <ConfiguracoesMenu contrast={state.contrast}> + <h4 className="title"> Configurações da Conta </h4> <StyledTabs + contrast={state.contrast} orientation="vertical" variant="fullWidth" + textColor="primary" value={tabValue} onChange={handleChangeTab} TabIndicatorProps={{ style: { display: "none" } }} > - <StyledTab label={tabs[0]} /> - <StyledTab label={tabs[1]} /> - <StyledTab label={tabs[2]} /> + <StyledTab contrast={state.contrast} label={tabs[0]} /> + <StyledTab contrast={state.contrast} label={tabs[1]} /> + <StyledTab contrast={state.contrast} label={tabs[2]} /> </StyledTabs> </ConfiguracoesMenu> </Paper> </Grid> - <TabContentDiv item xs={12} md={9}> + <TabContentDiv contrast={state.contrast} item xs={12} md={9}> <Paper elevation={3} style={{ width: "100%" }}> {tabValue === 0 && <TabPanelEditarPerfil updateUserInfo={updateUserInfo} />} {tabValue === 1 && <TabPanelSolicitarContaProfessor />} @@ -161,18 +164,36 @@ export default function EditProfilePage(props) { />} </TabContentDiv> </MainContainerDiv> - </div> + </Main> ) } +const Main = styled.div` + background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; + color: ${props => props.contrast === "" ? "#666" : "white"}; +` + const TabContentDiv = styled(Grid)` + + .subtitle{ + display: flex; + justify-content: flex-start; + font-size: 18px; + color: ${props => props.contrast === "" ? "" : "white"}; + } + + .title{ + font-weight: 300; + color: ${props => props.contrast === "" ? "" : "white"}; + } .card-config { padding : 40px; margin : 20px 0 20px 10px; border-radius : 3px; box-shadow : 0 0 5px 0rgba(0,0,0,.25); - background-color : #fff; + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; + border: ${props => props.contrast === "" ? 0 : "1px solid white"}; text-align : start; margin-left : auto; margin-right : auto; @@ -216,19 +237,32 @@ const TabContentDiv = styled(Grid)` font-weight : 500; line-height : 1.1; } + + .link { + text-align: flex-start; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + } ` const StyledTabs = styled(Tabs)` display : flex; justify-content : center; - .Mui-selected { - background-color : #f4f4f4; + .MuiTab-textColorPrimary{ + color: ${props => props.contrast === "" ? "#666" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + font-weight: 400; + } + .MuiTab-textColorPrimary.Mui-selected { + color: ${props => props.contrast === "" ? "black" : "yellow"}; + text-decoration: none; + font-weight: 600; } ` const StyledTab = styled(Tab)` &:hover { - background-color : #6666663d; + background-color: ${props => props.contrast === "" ? "#6666663d" : "rgba(255,255,0,0.24)"}; } ` @@ -236,7 +270,16 @@ const ConfiguracoesMenu = styled.div` margin : 20px 0 20px 0; border-radius : 3px; padding : 20px 0; - background-color : #fff; + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; + border: ${props => props.contrast === "" ? 0 : "1px solid white"}; + + .title{ + margin-top: 10px; + font-family: inherit; + display: flex; + justify-content: center; + color: ${props => props.contrast === "" ? "" : "white"}; + } ` const MainContainerDiv = styled(Grid)` diff --git a/src/Pages/FormationMaterialPage.js b/src/Pages/FormationMaterialPage.js index 797074618d38f7d3282a57a2ed8d5641ae06e512..8b03623f0a3c2852a51e294af03e8bd9a75fdf64 100644 --- a/src/Pages/FormationMaterialPage.js +++ b/src/Pages/FormationMaterialPage.js @@ -15,7 +15,7 @@ GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/ -import React, { useRef } from 'react'; +import React, { useRef, useContext } from 'react'; import styled from 'styled-components'; import { Grid } from '@material-ui/core'; import FormationMaterialHeader from '../Components/FormationMaterialHeader.js'; @@ -24,11 +24,13 @@ import TopicList from '../Components/TopicList.js'; import TopicFooter from '../Components/TopicFooter.js'; import colecoes_obj from '../Components/FormationMaterialsResources/formationMaterials.js'; import Breadcrumbs from "@material-ui/core/Breadcrumbs"; -import {Link} from "react-router-dom" +import { Link } from "react-router-dom"; +import { Store } from '../Store'; export default function FormationMaterialPage(props) { const colecao = props.location.pathname === "/colecao"; const colecoes = colecoes_obj(); + const { state } = useContext(Store); const colecao_id = Number( colecao ? @@ -61,9 +63,9 @@ export default function FormationMaterialPage(props) { console.log(colecao_obj); return ( - <Background> + <Background contrast={state.contrast}> <BreadCrumbsDiv> - <StyledBreadCrumbs> + <StyledBreadCrumbs contrast={state.contrast}> <Link to="/">Página Inicial</Link> <span> { @@ -72,7 +74,7 @@ export default function FormationMaterialPage(props) { </span> </StyledBreadCrumbs> </BreadCrumbsDiv> - <MainContainer> + <MainContainer contrast={state.contrast}> <Grid container direction="row" justify="flex-start" @@ -80,6 +82,7 @@ export default function FormationMaterialPage(props) { > <Grid item xs={12}> <FormationMaterialHeader + contrast={state.contrast} colecao={colecao} colecao_obj={colecao_obj} topico_obj={topico_obj} @@ -88,6 +91,7 @@ export default function FormationMaterialPage(props) { </Grid> <Grid item xs={12}> <FormationMaterialDescription + contrast={state.contrast} colecao={colecao} colecao_obj={colecao_obj} topico_obj={topico_obj} @@ -97,6 +101,7 @@ export default function FormationMaterialPage(props) { { colecao ? <TopicList + contrast={state.contrast} topicos={colecao_obj.topics} colecao_id={colecao_id} /> @@ -110,6 +115,7 @@ export default function FormationMaterialPage(props) { <div></div> : <TopicFooter + contrast={state.contrast} topic_name={colecao_obj.topic_name} src={colecao_obj.img} colecao_name={colecao_obj.name} /> @@ -119,12 +125,13 @@ export default function FormationMaterialPage(props) { } const Background = styled.div` - background-color: #f4f4f4; + background: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; ` const MainContainer = styled.div` margin-left: auto; margin-right: auto; padding : 0; + background: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; @media screen and (min-width: 768px) { width : 750px; @@ -141,11 +148,11 @@ const StyledBreadCrumbs = styled(Breadcrumbs)` justify-content: flex-start; max-width: 1170px; span { - color: #a5a5a5; + color: ${props => props.contrast === "" ? "#a5a5a5" : "white"}; } a { - color: #00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } ` diff --git a/src/Pages/HelpCenter.js b/src/Pages/HelpCenter.js index 162dec27a45c6ae619739f1d6e22105429032fd4..f72b8c48fcab3d56bac9d27c6fcebf26b836c320 100644 --- a/src/Pages/HelpCenter.js +++ b/src/Pages/HelpCenter.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, { useEffect } from 'react'; +import React, { useEffect, useContext } from 'react'; import styled from 'styled-components'; import Grid from '@material-ui/core/Grid'; import { Link } from 'react-router-dom'; - +import { Store } from '../Store'; import CardPublicando from '../Components/HelpCenter/Cards/CardPublicando'; import CardEncontrando from '../Components/HelpCenter/Cards/CardEncontrando'; import CardParticipando from '../Components/HelpCenter/Cards/CardParticipando'; @@ -31,6 +31,7 @@ import { Banner3 } from "ImportImages.js"; function HelpCenter(props) { + const { state } = useContext(Store) let windowWidth = window.innerWidth useEffect(() => { window.scrollTo(0, 0) }, []) @@ -39,7 +40,7 @@ function HelpCenter(props) { <div style={{ backgroundColor: "#f4f4f4" }}> <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet" /> - <Secao1> + <Secao1 contrast={state.contrast}> <div className="container"> { windowWidth > 420 ? @@ -55,7 +56,7 @@ function HelpCenter(props) { </div> </Secao1> - <Secao2> + <Secao2 contrast={state.contrast}> <div className="container"> <div className="container-secao"> <div className="conteudo"> @@ -65,26 +66,26 @@ function HelpCenter(props) { <div> <Grid container justify="center" style={{ margin: -8 }}> <Grid item xs={12} md={5} style={{ padding: 8 }}> - <CardPublicando /> + <CardPublicando contrast={state.contrast} /> </Grid> <Grid item xs={12} md={5} style={{ padding: 8 }}> - <CardEncontrando /> + <CardEncontrando contrast={state.contrast} /> </Grid> <Grid item xs={12} md={5} style={{ padding: 8 }}> - <CardParticipando /> + <CardParticipando contrast={state.contrast} /> </Grid> <Grid item xs={12} md={5} style={{ padding: 8 }}> - <CardGerenciando /> + <CardGerenciando contrast={state.contrast} /> </Grid> </Grid> </div> </div> </div> </div> - </Secao2> + <div style={{ width: "100%" }}> - <Secao3> + <Secao3 contrast={state.contrast}> <Grid style={{ height: "100%" }} container justify="center"> <Grid style={{ backgroundColor: "#333", paddingInline: "0" }} item xs={12} md={6}> <iframe title="Vídeo página ajuda" src="https://player.vimeo.com/video/231609051" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> @@ -144,7 +145,7 @@ function HelpCenter(props) { </Secao3> </div> - <Secao4> + <Secao4 contrast={state.contrast}> <div className="container"> <div className="conteudo"> <h2>Não encontrou o que você precisa?</h2> @@ -164,7 +165,7 @@ export default HelpCenter; const Secao1 = styled.div` - background-color:#00bcd4; + background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"}; text-align: center; width: 100%; .container { @@ -214,10 +215,9 @@ const Secao1 = styled.div` ` const Secao2 = styled.div` - background-color:#f4f4f4; + background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; text-align: center; - margin-bottom: 20px; - padding-bottom: 50px + padding-bottom: 50px; width: 100%; .container { height: 100%; @@ -236,14 +236,14 @@ const Secao2 = styled.div` h2 { font-size: 30px; font-weight: lighter; - color:#666; + color: ${props => props.contrast === "" ? "#666" : "white"}; margin: 0; } } .card-ajuda { height: 360px; - margin-bottom: 20px + margin-bottom: 20px; .card { @@ -321,9 +321,9 @@ const Secao2 = styled.div` const Secao3 = styled.div` padding: 0; text-align: center; - background-color: #fff; + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; margin-inline: auto; - color: rgba(0,0,0,0.87); + color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"}; width: 100%; .links { font-size: 15px; @@ -332,10 +332,12 @@ const Secao3 = styled.div` margin: 0 0 10px; line-height: 1.42857143; a { - color: #666; - text-decoration: none; + color: ${props => props.contrast === "" ? "#666" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; + font-weight: lighter; :hover { - color: #000; + color: ${props => props.contrast === "" ? "#000" : "yellow"}; + font-weight: 500; } } } @@ -361,7 +363,7 @@ const Secao4 = styled.div` width: 100%; .container { height: 100%; - color: #a5a5a5; + background-color: ${props => props.contrast === "" ? "" : "black"}; margin-inline: auto; display: flex; flex-direction: column; @@ -373,7 +375,7 @@ const Secao4 = styled.div` h2 { font-size: 24px; font-weight: lighter; - color:#666; + color: ${props => props.contrast === "" ? "#666" : "white"}; margin-top: 20px; margin-bottom: 10px; text-align: center; @@ -381,15 +383,14 @@ const Secao4 = styled.div` span { font-size: 15px; - color:#777; + color: ${props => props.contrast === "" ? "#777" : "white"}; text-align: center; - } button { margin-top: 25px; - color: rgba(255,255,255,0.87); - background-color: rgb(255,127,0); + color: ${props => props.contrast === "" ? "rgba(255,255,255,0.87)" : "yellow"}; + background-color: ${props => props.contrast === "" ? "rgb(255,127,0)" : "black"}; box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); outline: none;display: inline-block; position: relative; @@ -404,7 +405,7 @@ const Secao4 = styled.div` border-radius: 3px; box-sizing: border-box; user-select: none; - border: 0; + border: ${props => props.contrast === "" ? "none" : "1px solid white"}; padding: 0 6px; margin: 6px 8px; white-space: nowrap; @@ -418,9 +419,12 @@ const Secao4 = styled.div` overflow: hidden; transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1); letter-spacing: .01em; + :hover{ + background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"}; + } a { - text-decoration: none; - color: #fff; + color: ${props => props.contrast === "" ? "rgba(255,255,255,0.87)" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } } } diff --git a/src/Pages/MaterialPage.js b/src/Pages/MaterialPage.js index 9b243b8b8da922a631f9e774d6143a0fa09fa36b..4ec7369a89fea7e179737f57285df08ca54a397e 100644 --- a/src/Pages/MaterialPage.js +++ b/src/Pages/MaterialPage.js @@ -16,7 +16,7 @@ GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/ -import React, { useState } from "react"; +import React, { useState, useContext } from "react"; import { Col, Row, Container } from "react-grid-system"; import { Carousel } from "react-responsive-carousel"; import MaterialCard from "../Components/MaterialCard"; @@ -25,77 +25,84 @@ import ExpandedMaterial from "../Components/ExpandedMaterials"; import styled from "styled-components"; import Breadcrumbs from "@material-ui/core/Breadcrumbs"; import { Link } from "react-router-dom"; +import { Store } from '../Store'; const MateriaPage = () => { - const materials = colecoes_obj(); + const materials = colecoes_obj(); + const { state } = useContext(Store); + const [currMaterial, setCurrMaterial] = useState({ + open: false, + material: {}, + }); - const [currMaterial, setCurrMaterial] = useState({ + const HandleExpandMaterial = (id) => { + if (id !== currMaterial.material.id) + setCurrMaterial({ + open: true, + material: { ...materials[id] }, + }); + else + setCurrMaterial({ open: false, material: {}, - }); + }); + }; - const HandleExpandMaterial = (id) => { - if (id !== currMaterial.material.id) - setCurrMaterial({ - open: true, - material: { ...materials[id] }, - }); - else - setCurrMaterial({ - open: false, - material: {}, - }); - }; - - return ( - <> - <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" /> - <BreadCrumbsDiv> - <StyledBreadCrumbs> - <Link to="/">Página Inicial</Link> - <span>Materias de Formação</span> - </StyledBreadCrumbs> - </BreadCrumbsDiv> - <StyledBox> - <StyledTitle> - Materias de formação - </StyledTitle> - </StyledBox> - <MainContainer> - <Container style={{ padding: "20px" }}> - <Carousel - style={{ padding: "20px" }} - showThumbs={false} - showStatus={false} - > - <Row> - {materials.map((material, index) => { - return ( - <Col md={3} key={index}> - <MaterialCard - name={material.name} - thumb={material.img} - score={material.score} - modules={material.topics} - handleExpand={HandleExpandMaterial} - id={index} - /> - </Col> - ); - })} - </Row> - </Carousel> - {currMaterial.open ? ( - <ExpandedMaterial material={currMaterial.material} /> - ) : null} - </Container> - </MainContainer> - </> - ); + return ( + <MainPage contrast={state.contrast}> + <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" /> + <BreadCrumbsDiv> + <StyledBreadCrumbs contrast={state.contrast}> + <Link to="/">Página Inicial</Link> + <span>Materias de Formação</span> + </StyledBreadCrumbs> + </BreadCrumbsDiv> + <StyledBox contrast={state.contrast}> + <StyledTitle contrast={state.contrast}> + Materias de formação + </StyledTitle> + </StyledBox> + <MainContainer contrast={state.contrast}> + <Container style={{ padding: "20px" }}> + <Carousel + style={{ padding: "20px" }} + showThumbs={false} + showStatus={false} + > + <Row> + {materials.map((material, index) => { + return ( + <Col md={3} key={index}> + <MaterialCard + contrast={state.contrast} + name={material.name} + thumb={material.img} + score={material.score} + modules={material.topics} + handleExpand={HandleExpandMaterial} + id={index} + /> + </Col> + ); + })} + </Row> + </Carousel> + {currMaterial.open ? ( + <ExpandedMaterial contrast={state.contrast} material={currMaterial.material} /> + ) : null} + </Container> + </MainContainer> + </MainPage> + ); }; export default MateriaPage; +const MainPage = styled.div` + background: ${props => props.contrast === "" ? "" : "black"}; +` + const MainContainer = styled.div` + background: ${props => props.contrast === "" ? "" : "black"}; margin-left: auto; margin-right: auto; padding: 0; @@ -116,11 +123,11 @@ const StyledBreadCrumbs = styled(Breadcrumbs)` justify-content: flex-start; max-width: 1170px; span { - color: #a5a5a5; + color: ${props => props.contrast === "" ? "#a5a5a5" : "white"}; } a { - color: #00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } ` @@ -130,16 +137,17 @@ const BreadCrumbsDiv = styled.div` ` const StyledBox = styled.div` - background-color: #fff; + background: ${props => props.contrast === "" ? "#fff" : "black"}; box-shadow: 1px 1px 3px rgba(0,0,0,.12), 1px 1px 2px rgba(0,0,0,.24); + border: ${props => props.contrast === "" ? "0" : "1px solid white"}; padding: 30px; margin-bottom: 30px; text-align: center; ` const StyledTitle = styled.span` text-align: center; - color: #e81f4f; + color: ${props => props.contrast === "" ? "#e81f4f" : "white"}; font-size: 26px; font-family: "Roboto", sans-serif; - font-weight: 100; + font-weight: lighter; ` \ No newline at end of file diff --git a/src/Pages/PageProfessor.js b/src/Pages/PageProfessor.js index 96cd46bb141e537274c606200855b89428a8e54a..b1e360262cb0a7c910a75575041e7f7e6939cf0d 100644 --- a/src/Pages/PageProfessor.js +++ b/src/Pages/PageProfessor.js @@ -114,7 +114,7 @@ export default function PageProfessor (props) { state.userAgreedToPublicationTerms? ( <> - <ModalConfirmarProfessor open={modalOpen} handleClose={handleModal} + <ModalConfirmarProfessor contrast={props.contrast} open={modalOpen} handleClose={handleModal} info={registerInformation} confirmar = {() => {handleFinalSubmit()}} cancelar = {() => {toggleModal()}} /> diff --git a/src/Pages/PasswordRecoveryPage.js b/src/Pages/PasswordRecoveryPage.js index 1ed9b8ccc586b4e7ac96150bd434a27cd2f2815c..f3145f4bc3c7f953a798d28e18317691a30f9fcd 100644 --- a/src/Pages/PasswordRecoveryPage.js +++ b/src/Pages/PasswordRecoveryPage.js @@ -1,5 +1,5 @@ -import React, {useState} from 'react' -import {BackgroundDiv} from '../Components/TabPanels/StyledComponents.js' +import React, { useState, useContext } from 'react' +import { BackgroundDiv } from '../Components/TabPanels/StyledComponents.js' import Paper from '@material-ui/core/Paper'; import styled from 'styled-components' import ValidateUserInput from '../Components/HelperFunctions/FormValidationFunction.js' @@ -7,14 +7,15 @@ import Default from '../Components/PasswordRecoveryComponents/Default.js' import Success from '../Components/PasswordRecoveryComponents/Success.js' import CaseError from '../Components/PasswordRecoveryComponents/Error.js' import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js' -import {postRequest} from '../Components/HelperFunctions/getAxiosConfig' - -export default function PasswordRecoveryPage (props) { +import { postRequest } from '../Components/HelperFunctions/getAxiosConfig' +import { Store } from '../Store' +export default function PasswordRecoveryPage(props) { + const { state } = useContext(Store) const [formEmail, setEmail] = useState( { - key : false, - value : "" + key: false, + value: "" } ) @@ -23,9 +24,10 @@ export default function PasswordRecoveryPage (props) { const userInput = e.target.value const flag = ValidateUserInput('email', userInput) - setEmail({...formEmail, - key : flag, - value : userInput + setEmail({ + ...formEmail, + key: flag, + value: userInput }) } @@ -33,12 +35,12 @@ export default function PasswordRecoveryPage (props) { const handleChangeSwitch = (value) => { console.log(value) if (value !== "success") { - setEmail({key : false, value : ""}) + setEmail({ key: false, value: "" }) } setCase(value) }; - function handleSuccessfulSubmit (data) { + function handleSuccessfulSubmit(data) { handleChangeSwitch((data.success ? "success" : "error")) } const onSubmit = (e) => { @@ -51,19 +53,19 @@ export default function PasswordRecoveryPage (props) { "redirect_url" : "https://plataformaintegrada.mec.gov.br/recuperar-senha/alterar-senha" //"http://localhost:4000/recuperar-senha/alterar-senha" } - postRequest(url, payload, handleSuccessfulSubmit, (error) => {console.log(error)}) + postRequest(url, payload, handleSuccessfulSubmit, (error) => { console.log(error) }) } const components = { - default : <Default handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key}/>, - success : <Success email={formEmail.value} changeSwitch={handleChangeSwitch}/>, - error : <CaseError handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key}/> + default: <Default contrast={state.contrast} handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key} />, + success: <Success contrast={state.contrast} email={formEmail.value} changeSwitch={handleChangeSwitch} />, + error: <CaseError contrast={state.contrast} handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key} /> } const switchFunction = (value) => { - switch(value) { + switch (value) { case 'success': return components.success; case 'error': @@ -71,24 +73,25 @@ export default function PasswordRecoveryPage (props) { default: return components.default - } + } } return ( <> - <BackgroundDiv> + <BackgroundDiv contrast={state.contrast}> <div> <CustomizedBreadcrumbs + contrast={state.contrast} values={["Recuperar senha"]} /> </div> - <div style={{justifyContent:"center", textAlign:"center", maxWidth:"600px", margin:"auto"}}> - <Paper elevation={3}> - <CardDiv> + <div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}> + <Paper elevation={3}> + <CardDiv contrast={state.contrast}> {switchFunction(aux)} - </CardDiv> - </Paper> + </CardDiv> + </Paper> </div> </BackgroundDiv> </> @@ -96,7 +99,8 @@ export default function PasswordRecoveryPage (props) { } const CardDiv = styled.div` - background-color : #fff; + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; + border: ${props => props.contrast === "" ? 0 : "1px solid white"}; box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); padding : 30px 60px; margin : 50px 0; diff --git a/src/Pages/PublicUserPage.js b/src/Pages/PublicUserPage.js index 6cdb3ccb2b825f648570bc718e4215416cf9abba..aea500f14f563737fdffcef4630bf145d1b34882 100644 --- a/src/Pages/PublicUserPage.js +++ b/src/Pages/PublicUserPage.js @@ -16,77 +16,103 @@ 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 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 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 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"; //Image Import import { noAvatar } from "ImportImages.js"; 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") { @@ -96,247 +122,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/PublicationPermissionsPage.js b/src/Pages/PublicationPermissionsPage.js index 52bdbd8a8caf5b3b2ff7cfb465b230ac120206bb..9b25fc8738b5b22b08acdefcece9b4e37a93f14a 100644 --- a/src/Pages/PublicationPermissionsPage.js +++ b/src/Pages/PublicationPermissionsPage.js @@ -30,7 +30,6 @@ const CardStyled = styled(Card)` box-sizing: border-box; background-color: white; max-width: 1700px; - padding-top: 52px; @media ${device.mobileM} { width: 100%; height: 100%; @@ -44,11 +43,13 @@ const Styledspan = styled.span` line-height: 22px; font-size: 15px; letter-spacing: 0.01em; + color: ${props => props.contrast === "" ? "" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"} `; const Background = styled.div` padding-top : 40px; - background-color : #f4f4f4; + background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; color : #666; padding-bottom : 40px; @@ -128,24 +129,25 @@ export default function PermissionsContainer(props) { [ <> <IllegalContentModal - open={modalOpen} - handleClose={closeModal} - disableBackdropClick={true} + contrast={props.contrast} + open={modalOpen} + handleClose={closeModal} + disableBackdropClick={true} /> - <Background - > + <Background contrast={state.contrast}> <div className="container"> <CardStyled variant="outlined"> - <PublicationPermissionsContent handleRadios={handleRadios} /> + <PublicationPermissionsContent handleRadios={handleRadios} contrast={state.contrast} /> <CardActions - style={{ justifyContent: "center", padding: "25px", borderTop : "2px solide #dadada" }} + style={state.contrast === "" ? { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada" } : { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada", backgroundColor: "black" }} > <div> <div style={{ fontSize: "14px" }}> <LabeledCheckbox + contrast={state.contrast} disabled={unavailableCheckbox} label={ - <Styledspan> + <Styledspan contrast={state.contrast}> Li e permito a publicação do meu recurso na Plataforma Integrada de RED do MEC, assim como atesto que o meu recurso atende aos critérios @@ -161,28 +163,33 @@ export default function PermissionsContainer(props) { disabled={unavailableButton || unavailableCheckbox} style={ unavailableButton || unavailableCheckbox - ? { backgroundColor: "#e9e9e9" } - : { backgroundColor: "#00bcd4" } + ? { backgroundColor: "#e9e9e9" } : + state.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", border: "1px solid white" } } onClick={handleAgreement} > <Styledspan style={ unavailableButton || unavailableCheckbox - ? { color: "#666666", fontWeight : "600" } - : { color: "#ffffff", fontWeight : "600" } + ? { color: "#666666", fontWeight: "600" } : + state.contrast === "" ? { color: "#ffffff", fontWeight: "600" } : { color: "yellow", textDecoration: "underline", fontWeight: "600" } } > Continuar{" "} </Styledspan> </Button> <Button - style={{ + style={state.contrast === "" ? { marginLeft: "45px", backgroundColor: "#e9e9e9", - }} + } : { + marginLeft: "45px", + backgroundColor: "black", + border: "1px solid white" + } + } > - <Styledspan style={{ color: "rgb(102, 102, 102)" , fontWeight : "600 !important"}} onClick={() => {redirectToHome()}}> + <Styledspan style={state.contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "600 !important" } : { color: "yellow", textDecoration: "underline", fontWeight: "600" }} onClick={() => { redirectToHome() }}> Cancelar </Styledspan> </Button> @@ -192,12 +199,13 @@ export default function PermissionsContainer(props) { </CardActions> </CardStyled> </div> - </Background> + </Background> </> ] ) : ( <>{redirect()}</> - )} + ) + } </> ); } diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js index 37d96115166a1ae2cb2ae97c9b83108c9427fbcc..e25c046f8f0a6e47f95fdebf277dd793b78fca01 100644 --- a/src/Pages/ResourcePage.js +++ b/src/Pages/ResourcePage.js @@ -42,311 +42,316 @@ import { Link } from 'react-router-dom'; import { noAvatar } from "ImportImages.js"; function urlVerify(url) { - return url - ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1 - : false; + return url + ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1 + : false; } export default function LearningObjectPage(props) { - const { state } = useContext(Store); - const id = props.match.params.recursoId; - const [carregando, toggle] = useState(true); - const [erro, setErro] = useState(false); - const [recurso, setRecurso] = useState({}); - - function handleSuccessfulGet(data) { - setRecurso(data); - toggle(false); - } - useEffect(() => { - const url = `/learning_objects/${id}`; - - getRequest( - url, - handleSuccessfulGet, - (error) => { - setErro(true) - toggle(false); - handleSnackbar(7) - } + const { state } = useContext(Store); + const id = props.match.params.recursoId; + const [carregando, toggle] = useState(true); + const [erro, setErro] = useState(false); + const [recurso, setRecurso] = useState({}); + const [modalConfirmarCuradoriaOpen, toggleModalConfirmarCuradoria] = useState( + false ); - }, []); - - const [snackbarOpen, toggleSnackbar] = useState(false); - const handleSnackbar = (index) => { - setIndex(index); - toggleSnackbar(true); - }; - const snackbarText = [ - "Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!", - "Seu comentário foi publicado com sucesso!", - "Comentário editado com sucesso.", - "Comentário deletado com sucesso.", - "O Recurso foi guardado na coleção!", - "O recurso foi aprovado com sucesso!", - "Erro ao aprovar o recurso!", - "Erro ao carregar a página", - "Erro ao fazer o dowload do recurso", - ]; - const [snackbarIndex, setIndex] = useState(0); - const classes = useStyles(); - const [modalCuradoriaOpen, toggleModalCuradoria] = useState(false); - const handleModalCuradoria = (value) => { - toggleModalCuradoria(value); - }; - - const checkAccessLevel = (levelToCheck) => { - if (state.currentUser.id !== "") { - return checkUserRole(levelToCheck); - } else { - return false; - } - }; - const checkUserRole = (userRole) => { - return ( - state.currentUser.roles.filter((role) => role.name === userRole).length > - 0 - ); - }; - - const [modalConfirmarCuradoriaOpen, toggleModalConfirmarCuradoria] = useState( - false - ); - const handleModalConfirmarCuradoria = (value) => { - toggleModalConfirmarCuradoria(value); - }; - const [reportCriteria, setReportCriteria] = useState([]); - const [justificativa, setJustificativa] = useState(""); - const [submissionAccepted, setSubmissionAccepted] = useState(""); - - const handleConfirm = (criteria, justification, accepted) => { - setReportCriteria(criteria); - setJustificativa(justification); - setSubmissionAccepted(accepted); - handleModalCuradoria(false); - handleModalConfirmarCuradoria(true); - }; - - const finalizeCuratorshipFlow = () => { - handleSnackbar(5); - handleModalConfirmarCuradoria(false); - const url = `/learning_objects/${id}`; - getRequest( - url, - (data) => { + function handleSuccessfulGet(data) { setRecurso(data); - }, - (error) => { - handleSnackbar(7); - setErro(true); - } - ); - }; - - if (erro) - return <LearnObjectNotFound> - <Grid container direction='column' justify='center' alignItems='center' spacing={1}> - <Grid item> - <p className="not-found"> - O recurso não foi encontrado em nossa base de dados. - </p> - </Grid> - <Grid item> - <Link className="link" to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}> - <Button - variant='contained' - className="back-button" - > - Voltar para a busca de recursos. - </Button> - </Link> - </Grid> - </Grid> - </LearnObjectNotFound> - else - return ( - <React.Fragment> - <Snackbar - open={snackbarOpen} - autoHideDuration={6000} - onClose={toggleSnackbar} - anchorOrigin={{ vertical: "top", horizontal: "right" }} - > - <Alert severity="info" - style={{ backgroundColor: "#00acc1" }}> - {snackbarText[snackbarIndex]} - </Alert> - </Snackbar> - <ModalAvaliarRecurso - open={modalCuradoriaOpen} - handleClose={() => { - handleModalCuradoria(false); - }} - title={recurso.name} - confirm={handleConfirm} - setCriteria={setReportCriteria} - /> - <ModalConfirmarCuradoria - aceito={submissionAccepted} - reportCriteria={reportCriteria} - justificativa={justificativa} - open={modalConfirmarCuradoriaOpen} - handleClose={() => { - handleModalConfirmarCuradoria(false); - }} - cancel={() => { - handleModalCuradoria(true); - }} - recursoId={recurso.submission_id} - finalizeCuratorshipFlow={finalizeCuratorshipFlow} - handleErrorAprove={() => { - handleSnackbar(6) - }} - /> - <Background> - {carregando ? ( - <LoadingSpinner text={"Carregando Recurso"} /> - ) : ( - <> - <Grid container spacing={2}> - {recurso.object_type === "Vídeo" && !recurso.link ? ( - <Grid item xs={12}> - <Card> - <VideoPlayer - link={recurso.link} - urlVerified={false} - videoUrl={recurso.default_attachment_location} - videoType={recurso.default_mime_type} - /> - </Card> - </Grid> - ) : ( - urlVerify(recurso.link) && ( - <Grid item xs={12}> - <Card> - <VideoPlayer link={recurso.link} urlVerified={true} /> - </Card> - </Grid> - ) - )} - - <Grid item xs={12}> - <Card> - <div> - {recurso.thumbnail && ( - <img alt="" src={apiDomain + recurso.thumbnail} /> - )} + toggle(false); + } + useEffect(() => { + const url = `/learning_objects/${id}`; + + getRequest( + url, + handleSuccessfulGet, + (error) => { + setErro(true) + toggle(false); + handleSnackbar(7) + } + ); + }, []); + + const [snackbarOpen, toggleSnackbar] = useState(false); + const handleSnackbar = (index) => { + setIndex(index); + toggleSnackbar(true); + }; + const snackbarText = [ + "Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!", + "Seu comentário foi publicado com sucesso!", + "Comentário editado com sucesso.", + "Comentário deletado com sucesso.", + "O Recurso foi guardado na coleção!", + "O recurso foi aprovado com sucesso!", + "Erro ao aprovar o recurso!", + "Erro ao carregar a página", + "Erro ao fazer o dowload do recurso", + ]; + const [snackbarIndex, setIndex] = useState(0); + const classes = useStyles(); + const [modalCuradoriaOpen, toggleModalCuradoria] = useState(false); + const handleModalCuradoria = (value) => { + toggleModalCuradoria(value); + }; + + const checkAccessLevel = (levelToCheck) => { + if (state.currentUser.id !== "") { + return checkUserRole(levelToCheck); + } else { + return false; + } + }; + + const checkUserRole = (userRole) => { + return ( + state.currentUser.roles.filter((role) => role.name === userRole).length > + 0 + ); + }; + + const finalizeCuratorshipFlow = () => { + handleSnackbar(5); + handleModalConfirmarCuradoria(false); + const url = `/learning_objects/${id}`; + getRequest( + url, + (data) => { + setRecurso(data); + }, + (error) => { + handleSnackbar(7); + setErro(true); + }) + } - <TextoObjeto - name={recurso.name} - rating={recurso.review_average} - recursoId={id} - likesCount={recurso.likes_count} - likedBool={recurso.liked} - objType={recurso.object_type} - subjects={recurso.subjects} - educationalStages={recurso.educational_stages} - viewCount={recurso.views_count} - downloadCount={recurso.downloads_count} - id={recurso.publisher ? recurso.publisher.id : undefined} - stateRecurso={recurso.state} - attachments={recurso.attachments} - audioUrl={recurso.default_attachment_location} - /> - </div> - - <Footer - recursoId={id} - downloadableLink={recurso.default_attachment_location} - handleSnackbar={handleSnackbar} - link={recurso.link} - title={recurso.name} - thumb={recurso.thumbnail} - currPageLink={window.location.href} - complained={recurso.complained} - /> - </Card> - </Grid> - - <Grid item xs={12}> - <Card> - {/*todo: change render method on additional item info*/} - <Sobre - avatar={ - recurso.publisher - ? recurso.publisher.avatar - ? apiDomain + recurso.publisher.avatar - : noAvatar - : noAvatar - } - publisher={ - recurso.publisher ? recurso.publisher.name : undefined - } - id={recurso.publisher ? recurso.publisher.id : undefined} - description={recurso.description} - author={recurso.author} - tags={recurso.tags} - attachments={recurso.attachments} - language={recurso.language} - mimeType={recurso.default_mime_type} - createdAt={recurso.created_at} - updatedAt={recurso.updated_at} - license={recurso.license} - followed={recurso.publisher ? recurso.publisher.followed : undefined} - /> - </Card> - </Grid> - - {recurso.state !== "submitted" && ( - <Grid item xs={12}> - <Card> - {/*adicionar funcionalidade ao botao de entrar*/} - <CommentsArea - recursoId={id} - handleSnackbar={handleSnackbar} - objType={recurso.object_type} - recurso={true} - /> - </Card> - </Grid> - )} + const handleModalConfirmarCuradoria = (value) => { + toggleModalConfirmarCuradoria(value); + }; + const [reportCriteria, setReportCriteria] = useState([]); + const [justificativa, setJustificativa] = useState(""); + const [submissionAccepted, setSubmissionAccepted] = useState(""); + + const handleConfirm = (criteria, justification, accepted) => { + setReportCriteria(criteria); + setJustificativa(justification); + setSubmissionAccepted(accepted); + handleModalCuradoria(false); + handleModalConfirmarCuradoria(true); + }; + + if (erro) + return <LearnObjectNotFound contrast={state.contrast}> + <Grid container direction='column' justify='center' alignItems='center' spacing={1}> + <Grid item> + <p className="not-found"> + O recurso não foi encontrado em nossa base de dados. + </p> + </Grid> + <Grid item> + <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}> + <Button + variant='contained' + className="back-button" + > + Voltar para a busca de recursos. + </Button> + </Link> </Grid> + </Grid> + </LearnObjectNotFound> + else + return ( + <React.Fragment> + <Snackbar + open={snackbarOpen} + autoHideDuration={6000} + onClose={toggleSnackbar} + anchorOrigin={{ vertical: "top", horizontal: "right" }} + > + <Alert severity="info" + style={{ backgroundColor: "#00acc1" }}> + {snackbarText[snackbarIndex]} + </Alert> + </Snackbar> + + <ModalAvaliarRecurso + contrast={state.contrast} + open={modalCuradoriaOpen} + handleClose={() => { + handleModalCuradoria(false); + }} + title={recurso.name} + confirm={handleConfirm} + setCriteria={setReportCriteria} + /> + <ModalConfirmarCuradoria + contrast={state.contrast} + aceito={submissionAccepted} + reportCriteria={reportCriteria} + justificativa={justificativa} + open={modalConfirmarCuradoriaOpen} + handleClose={() => { + handleModalConfirmarCuradoria(false); + }} + cancel={() => { + handleModalCuradoria(true); + }} + recursoId={recurso.submission_id} + finalizeCuratorshipFlow={finalizeCuratorshipFlow} + handleErrorAprove={() => { + handleSnackbar(6) + }} + /> + <Background contrast={state.contrast}> + {carregando ? ( + <LoadingSpinner contrast={state.contrast} text={"Carregando Recurso"} /> + ) : ( + <> + <Grid container spacing={2}> + {recurso.object_type === "Vídeo" && !recurso.link ? ( + <Grid item xs={12}> + <Card contrast={state.contrast}> + <VideoPlayer + contrast={state.contrast} + link={recurso.link} + urlVerified={false} + videoUrl={recurso.default_attachment_location} + videoType={recurso.default_mime_type} + /> + </Card> + </Grid> + ) : ( + urlVerify(recurso.link) && ( + <Grid item xs={12}> + <Card contrast={state.contrast}> + <VideoPlayer contrast={state.contrast} link={recurso.link} urlVerified={true} /> + </Card> + </Grid> + ) + )} - {recurso.state === "submitted" && checkAccessLevel("curator") && ( - <AppBar - position="fixed" - color="primary" - className={classes.appBar} - > - <StyledAppBarContainer> - <div className="container"> - <div className="botoes"> - <ButtonAvaliarRecurso - callback={() => { - handleModalCuradoria(true); - }} - /> - </div> - </div> - </StyledAppBarContainer> - </AppBar> + <Grid item xs={12}> + <Card contrast={state.contrast}> + <div> + {recurso.thumbnail && ( + <img alt="recurso" src={apiDomain + recurso.thumbnail} /> + )} + + <TextoObjeto + contrast={state.contrast} + name={recurso.name} + rating={recurso.review_average} + recursoId={id} + likesCount={recurso.likes_count} + likedBool={recurso.liked} + objType={recurso.object_type} + subjects={recurso.subjects} + educationalStages={recurso.educational_stages} + viewCount={recurso.views_count} + downloadCount={recurso.downloads_count} + id={recurso.publisher ? recurso.publisher.id : undefined} + stateRecurso={recurso.state} + attachments={recurso.attachments} + audioUrl={recurso.default_attachment_location} + /> + </div> + + <Footer + contrast={state.contrast} + recursoId={id} + downloadableLink={recurso.default_attachment_location} + handleSnackbar={handleSnackbar} + link={recurso.link} + title={recurso.name} + thumb={recurso.thumbnail} + currPageLink={window.location.href} + complained={recurso.complained} + /> + </Card> + </Grid> + + <Grid item xs={12}> + <Card contrast={state.contrast}> + {/*todo: change render method on additional item info*/} + <Sobre + avatar={ + recurso.publisher + ? recurso.publisher.avatar + ? apiDomain + recurso.publisher.avatar + : noAvatar + : noAvatar + } + publisher={ + recurso.publisher ? recurso.publisher.name : undefined + } + id={recurso.publisher ? recurso.publisher.id : undefined} + description={recurso.description} + author={recurso.author} + tags={recurso.tags} + attachments={recurso.attachments} + language={recurso.language} + mimeType={recurso.default_mime_type} + createdAt={recurso.created_at} + updatedAt={recurso.updated_at} + license={recurso.license} + followed={recurso.publisher ? recurso.publisher.followed : undefined} + /> + </Card> + </Grid> + + {recurso.state !== "submitted" && ( + <Grid item xs={12}> + <Card contrast={state.contrast}> + {/*adicionar funcionalidade ao botao de entrar*/} + <CommentsArea + recursoId={id} + handleSnackbar={handleSnackbar} + objType={recurso.object_type} + recurso={true} + /> + </Card> + </Grid> + )} + </Grid> + + {recurso.state === "submitted" && checkAccessLevel("curator") && ( + <AppBar + position="fixed" + className={classes.appBar} + style={state.contrast === "" ? { backgroundColor: "white" } : { backgroundColor: "black", borderTop: "1px solid white" }} + > + <StyledAppBarContainer contrast={state.contrast}> + <div className="container"> + <div className="botoes"> + <ButtonAvaliarRecurso + contrast={state.contrast} + callback={() => { + handleModalCuradoria(true); + }} + /> + </div> + </div> + </StyledAppBarContainer> + </AppBar> + )} + </> )} - </> - )} - </Background> - </React.Fragment> + </Background> + </React.Fragment> ); } const useStyles = makeStyles((theme) => ({ - appBar: { - top: "auto", - bottom: 0, - height: "100px", - backgroundColor: "#fff", - boxShadow: "0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)", - }, + appBar: { + top: "auto", + bottom: 0, + height: "100px", + boxShadow: "0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)", + }, })); const StyledAppBarContainer = styled.div` @@ -356,6 +361,7 @@ const StyledAppBarContainer = styled.div` justify-content : flex-start margin-right : auto; margin-left : auto; + padding: 10px; @media screen and (min-width: 1200px) { width : 1170px; } @@ -375,61 +381,66 @@ const StyledAppBarContainer = styled.div` `; const Background = styled.div` - background-color: #f4f4f4; - color: #666; - font-family: "Roboto", sans serif; - padding-top: 30px; + background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; + color: #666; + font-family: "Roboto", sans serif; + padding-top: 30px; `; const LearnObjectNotFound = styled.div` - margin: 1em; - - .not-found{ - font-family: 'Roboto', sans-serif; - font-weight: 500; - text-align: left; - padding: 0; - margin: 0; - } - - .back-button{ - background-color: #ff7f00; - color: whitesmoke; - } - - .link{ - text-decoration: none; - } + 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; + margin: 0; + } + + .back-button{ + 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; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - margin-bottom: 30px; - margin-right: auto; - margin-left: auto; - display: flex; - flex-direction: column; - @media screen and (min-width: 1200px) { - width: 1170px; - } - @media screen and (min-width: 992px) and (max-width: 1199px) { - width: 970px; - } - @media screen and (min-width: 768px) and (max-width: 991px) { - width: 750px; - } - - img { - background-color: #e5e5e5; - height: 270px; - width: 400px; - float: left; - padding: 0; - object-fit: cover; - @media screen and (max-width: 768px) { - height: auto; - width: 100%; + 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; + display: flex; + flex-direction: column; + @media screen and (min-width: 1200px) { + width: 1170px; + } + @media screen and (min-width: 992px) and (max-width: 1199px) { + width: 970px; + } + @media screen and (min-width: 768px) and (max-width: 991px) { + width: 750px; + } + + img { + background-color: #e5e5e5; + height: 270px; + width: 400px; + float: left; + padding: 0; + object-fit: cover; + @media screen and (max-width: 768px) { + height: auto; + width: 100%; + } } - } `; diff --git a/src/Pages/Search.js b/src/Pages/Search.js index 15628592193b74b9363dd9d4e139a6858230bd85..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,112 +428,123 @@ 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 ( - <MainPage> - <Snackbar - open={snackInfo.open} - autoHideDuration={6000} - onClose={handleCloseSnack} - anchorOrigin={{ vertical: 'top', horizontal: 'right' }} - > - <Alert onClose={handleCloseSnack} severity={snackInfo.severity}> - {snackInfo.text} - </Alert> - </Snackbar> - <StyledBreadCrumbs> - <Link to='/'>Página Inicial</Link> - <span>Busca</span> - </StyledBreadCrumbs> - <HeaderFilters - options={options} - orders={orders} - currOption={currOption} - currOrder={currOrder} - handleChangeOption={handleChangeOption} - handleChangeOrder={handleChangeOrder} - /> - { - currOption === 'LearningObject' && - <Fragment> - <SearchExpansionPanel - setTag={(tag) => setTag(tag)} - curriculumComponents={curriculumComponents} - setCurriculum={(array) => { setCurriculumComponents(array) }} - typeOfResources={typeOfResources} - setTypeRes={(array) => { setTypeOfResources(array) }} - teachingStage={teachingStage} - setTeachingStage={(array) => { setTeachingStage(array) }} - languages={languages} - setLanguages={(array) => { setLanguages(array) }} - /> - { - <FilterSummary + <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}> + <MainPage> + <Snackbar + open={snackInfo.open} + autoHideDuration={6000} + onClose={handleCloseSnack} + anchorOrigin={{ vertical: 'top', horizontal: 'right' }} + > + <Alert onClose={handleCloseSnack} severity={snackInfo.severity}> + {snackInfo.text} + </Alert> + </Snackbar> + <StyledBreadCrumbs contrast={state.contrast}> + <Link to='/'>Página Inicial</Link> + <span>Busca</span> + </StyledBreadCrumbs> + <HeaderFilters + contrast={state.contrast} + options={options} + orders={orders} + currOption={currOption} + currOrder={currOrder} + handleChangeOption={handleChangeOption} + handleChangeOrder={handleChangeOrder} + /> + { + currOption === 'LearningObject' && + <Fragment> + <SearchExpansionPanel + contrast={state.contrast} + setTag={(tag) => setTag(tag)} curriculumComponents={curriculumComponents} + setCurriculum={(array) => { setCurriculumComponents(array) }} typeOfResources={typeOfResources} - languages={languages} + setTypeRes={(array) => { setTypeOfResources(array) }} teachingStage={teachingStage} - tag={tag} - onButtonClicked={onButtonClicked} + setTeachingStage={(array) => { setTeachingStage(array) }} + languages={languages} + setLanguages={(array) => { setLanguages(array) }} /> - } - <ResourceTemplate + { + <FilterSummary + contrast={state.contrast} + curriculumComponents={curriculumComponents} + typeOfResources={typeOfResources} + languages={languages} + teachingStage={teachingStage} + tag={tag} + onButtonClicked={onButtonClicked} + /> + } + <ResourceTemplate + contrast={state.contrast} + handleNextPage={handleNextPage} + handlePreviousPage={handlePreviousPage} + isLoading={isLoading} + currPage={currPage} + resources={resourcesArray} + totalResources={totalResources} + /> + </Fragment> + } + { + currOption === 'Collection' && + <CollectionTemplate + contrast={state.contrast} handleNextPage={handleNextPage} handlePreviousPage={handlePreviousPage} isLoading={isLoading} currPage={currPage} - resources={resourcesArray} - totalResources={totalResources} + resources={collectionsArray} + totalResources={totalCollections} /> - </Fragment> - } - { - currOption === 'Collection' && - <CollectionTemplate - handleNextPage={handleNextPage} - handlePreviousPage={handlePreviousPage} - isLoading={isLoading} - currPage={currPage} - resources={collectionsArray} - totalResources={totalCollections} - /> - } - { - currOption === 'User' && - <UserTemplate - handleNextPage={handleNextPage} - handlePreviousPage={handlePreviousPage} - isLoading={isLoading} - currPage={currPage} - resources={usersArray} - totalResources={totalUsers} - /> - } - </MainPage> + } + { + currOption === 'User' && + <UserTemplate + contrast={state.contrast} + handleNextPage={handleNextPage} + handlePreviousPage={handlePreviousPage} + isLoading={isLoading} + currPage={currPage} + resources={usersArray} + totalResources={totalUsers} + /> + } + </MainPage> + </div> ) } const MainPage = styled.div` + padding: 1em 0; width: 90%; - margin: 1em auto; + 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; @@ -543,10 +554,10 @@ const StyledBreadCrumbs = styled(Breadcrumbs)` display: flex; justify-content: flex-start; span { - color: #a5a5a5; + color: ${props => props.contrast === "" ? "#a5a5a5" : "white"}; } a { - color: #00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } `; diff --git a/src/Pages/TabsHelp/TabManageAc.js b/src/Pages/TabsHelp/TabManageAc.js index 6a2edde41fc01a942aae5f7b655a43ebd19ca420..d9eb10cd989199f0caf25687b4e58c643d466ee0 100644 --- a/src/Pages/TabsHelp/TabManageAc.js +++ b/src/Pages/TabsHelp/TabManageAc.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, useEffect } from "react"; +import React, { useState, useEffect, useContext } from "react"; import styled from "styled-components"; import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; @@ -31,11 +31,13 @@ import CardParticipando from "../../Components/HelpCenter/Cards/CardParticipando import CardEncontrando from "../../Components/HelpCenter/Cards/CardEncontrando"; import CardPublicando from "../../Components/HelpCenter/Cards/CardPublicando"; import { Link } from "react-router-dom"; +import { Store } from '../../Store'; //Image Import import { GerenciandoConta } from "ImportImages.js"; export default function TabManageAc(props) { + const { state } = useContext(Store); const tabs = [ "Por que me cadastrar?", "Como fazer meu cadastro?", @@ -54,7 +56,7 @@ export default function TabManageAc(props) { useEffect(() => { window.scrollTo(0, 0) }, []) return ( - <div style={{ backgroundColor: "#f4f4f4" }}> + <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}> <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" @@ -62,7 +64,7 @@ export default function TabManageAc(props) { <Secao> <BreadCrumbsDiv> - <StyledBreadCrumbs> + <StyledBreadCrumbs contrast={state.contrast}> <Link to="/">Página Inicial</Link> <Link to="ajuda">Ajuda</Link> @@ -71,23 +73,23 @@ export default function TabManageAc(props) { </BreadCrumbsDiv> <Grid container justify="center"> <Grid item xs={12} md={10} > - <Principal> - <Menu> + <Principal contrast={state.contrast}> + <Menu contrast={state.contrast}> <div className="fixo"> <img src={GerenciandoConta} alt="Gerenciando a conta" /> <span>{tabs[5]}</span> </div> - <TabsStyled orientation="vertical" + <TabsStyled contrast={state.contrast} orientation="vertical" variant="scrollable" value={tabValue} onChange={handleChangeTab} TabIndicatorProps={{ style: { display: "none" } }} > - <TabStyled label={tabs[0]}></TabStyled> - <TabStyled label={tabs[1]}></TabStyled> - <TabStyled label={tabs[2]}></TabStyled> - <TabStyled label={tabs[3]}></TabStyled> - <TabStyled label={tabs[4]}></TabStyled> + <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled> + <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled> + <TabStyled contrast={state.contrast} label={tabs[2]}></TabStyled> + <TabStyled contrast={state.contrast} label={tabs[3]}></TabStyled> + <TabStyled contrast={state.contrast} label={tabs[4]}></TabStyled> </TabsStyled> <br /> <div className="voltarInicio"> @@ -95,11 +97,11 @@ export default function TabManageAc(props) { </div> </Menu> - {tabValue === 0 && <Why title={tabs[0]} />} - {tabValue === 1 && <HowToDo title={tabs[1]} />} - {tabValue === 2 && <HowToChange title={tabs[2]} />} - {tabValue === 3 && <HowToAccess title={tabs[3]} />} - {tabValue === 4 && <Forget title={tabs[4]} />} + {tabValue === 0 && <Why contrast={state.contrast} title={tabs[0]} />} + {tabValue === 1 && <HowToDo contrast={state.contrast} title={tabs[1]} />} + {tabValue === 2 && <HowToChange contrast={state.contrast} title={tabs[2]} />} + {tabValue === 3 && <HowToAccess contrast={state.contrast} title={tabs[3]} />} + {tabValue === 4 && <Forget contrast={state.contrast} title={tabs[4]} />} <div className="resultadosProcura"> <span>Não era bem o que você procurava?</span> <div className="subtitulo"> @@ -112,15 +114,15 @@ export default function TabManageAc(props) { </Grid> - <Grid style={{ marginBottom: "50px" }} container justify={"center"}> + <Grid style={{ paddingBottom: "50px" }} container justify={"center"}> <Grid item xs={12} md={3} style={{ margin: 5 }}> - <CardPublicando /> + <CardPublicando contrast={state.contrast} /> </Grid> <Grid item xs={12} md={3} style={{ margin: 5 }}> - <CardEncontrando /> + <CardEncontrando contrast={state.contrast} /> </Grid> <Grid item xs={12} md={3} style={{ margin: 5 }}> - <CardParticipando /> + <CardParticipando contrast={state.contrast} /> </Grid> </Grid> </Secao> @@ -132,13 +134,12 @@ const StyledBreadCrumbs = styled(Breadcrumbs)` display : flex; justify-content : flex-start; span { - color : #a5a5a5; + color: ${props => props.contrast === "" ? "#a5a5a5" : "white"}; } a { - color: #00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } - ` const BreadCrumbsDiv = styled.div` @@ -150,14 +151,11 @@ const BreadCrumbsDiv = styled.div` const Principal = styled.div` .fixo { - + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; height: 40px; text-align: center; - background-color: #fff; padding: 30px; margin-bottom: 30px; - color: #666; - img { height: 50px; @@ -169,7 +167,7 @@ const Principal = styled.div` span { font-size: 20px; - vertical-align: ; + color: ${props => props.contrast === "" ? "" : "white"}; } @@ -179,7 +177,7 @@ const Principal = styled.div` text-align: center; margin-block: 30px; padding-inline: 15px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 24px; } @@ -193,8 +191,8 @@ const Principal = styled.div` a { font-size: 15px; padding: 0; - color:#00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } } @@ -203,9 +201,10 @@ const Principal = styled.div` ` const TabsStyled = styled(Tabs)` - + color: ${props => props.contrast === "" ? "" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; .Mui-selected { - background-color: #e7e4e4; + background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"}; } .MuiTab-root{ @@ -218,29 +217,26 @@ const TabsStyled = styled(Tabs)` ` const TabStyled = styled(Tab)` - + color: ${props => props.contrast === "" ? "" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; padding: 4px 15px !important; font-weight: 500; font-size: 14px !important; border-radius: 4px !important; text-align: center; - - - - &:hover { - background-color: #e7e4e4; + background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"}; } ` const Menu = styled.div` width: auto; - background-color: #fff; - color: #666; + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; + color: ${props => props.contrast === "" ? "#666" : "white"}; padding-block: 10px; - box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); + 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; margin-bottom:30px @@ -259,8 +255,8 @@ const Menu = styled.div` a { font-size: 15px; padding: 0; - color:#00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } } diff --git a/src/Pages/TabsHelp/TabNetPart.js b/src/Pages/TabsHelp/TabNetPart.js index 13c13d8c212b6057b92c2dc6181afb1853d68c7e..1eea7cfe8badecc23c43906016be5858f8c6c0d2 100644 --- a/src/Pages/TabsHelp/TabNetPart.js +++ b/src/Pages/TabsHelp/TabNetPart.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, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import styled from 'styled-components'; import Tabs from '@material-ui/core/Tabs' import Tab from '@material-ui/core/Tab'; @@ -28,10 +28,12 @@ import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando'; import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando'; import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando'; import { Link } from 'react-router-dom'; +import { Store } from '../../Store'; //Image Import import { ParticipandoRede } from "ImportImages.js"; + export default function TabNetPart(props) { const tabs = [ 'Como comentar ou avaliar um recurso?', @@ -39,6 +41,7 @@ export default function TabNetPart(props) { 'Participando da Rede' ] + const { state } = useContext(Store); const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state); const handleChangeTab = (e, newValue) => { @@ -48,12 +51,12 @@ export default function TabNetPart(props) { useEffect(() => { window.scrollTo(0, 0) }, []) return ( - <div style={{ backgroundColor: "#f4f4f4" }}> + <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}> <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" /> <Secao> <BreadCrumbsDiv> - <StyledBreadCrumbs> + <StyledBreadCrumbs contrast={state.contrast}> <Link to="/" > Página Inicial </Link> @@ -71,20 +74,22 @@ export default function TabNetPart(props) { </BreadCrumbsDiv> <Grid container justify="center"> <Grid item xs={12} md={10} > - <Principal> - <Menu> + <Principal contrast={state.contrast}> + <Menu contrast={state.contrast}> <div className="fixo"> <img src={ParticipandoRede} alt="Participando da Rede" /> <span>{tabs[2]}</span> </div> - <TabsStyled orientation="vertical" + <TabsStyled + contrast={state.contrast} + orientation="vertical" variant="scrollable" value={tabValue} onChange={handleChangeTab} TabIndicatorProps={{ style: { display: "none" } }} > - <TabStyled label={tabs[0]}></TabStyled> - <TabStyled label={tabs[1]}></TabStyled> + <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled> + <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled> </TabsStyled> <br /> <div className="voltarInicio"> @@ -92,8 +97,8 @@ export default function TabNetPart(props) { </div> </Menu> - {tabValue === 0 && <How title={tabs[0]} />} - {tabValue === 1 && <What title={tabs[1]} />} + {tabValue === 0 && <How contrast={state.contrast} title={tabs[0]} />} + {tabValue === 1 && <What contrast={state.contrast} title={tabs[1]} />} <div className="resultadosProcura"> <span>Não era bem o que você procurava?</span> <div className="subtitulo"> @@ -108,13 +113,13 @@ export default function TabNetPart(props) { <Grid style={{ paddingBottom: "50px" }} container justify={"center"}> <Grid item xs={12} md={3} style={{ margin: 5 }}> - <CardPublicando /> + <CardPublicando contrast={state.contrast} /> </Grid> <Grid item xs={12} md={3} style={{ margin: 5 }}> - <CardEncontrando /> + <CardEncontrando contrast={state.contrast} /> </Grid> <Grid item xs={12} md={3} style={{ margin: 5 }}> - <CardGerenciando /> + <CardGerenciando contrast={state.contrast} /> </Grid> </Grid> @@ -123,19 +128,18 @@ export default function TabNetPart(props) { </div> ); } + const StyledBreadCrumbs = styled(Breadcrumbs)` display : flex; justify-content : flex-start; span { - color : #a5a5a5; + color: ${props => props.contrast === "" ? "#a5a5a5" : "white"}; } a { - color: #00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } - ` - const BreadCrumbsDiv = styled.div` padding : 10px; @@ -145,14 +149,11 @@ const BreadCrumbsDiv = styled.div` const Principal = styled.div` .fixo { - + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; height: 40px; text-align: center; - background-color: #fff; padding: 30px; margin-bottom: 30px; - color: #666; - img { height: 50px; @@ -164,7 +165,7 @@ const Principal = styled.div` span { font-size: 20px; - vertical-align: ; + color: ${props => props.contrast === "" ? "" : "white"}; } @@ -174,7 +175,7 @@ const Principal = styled.div` text-align: center; margin-block: 30px; padding-inline: 15px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 24px; } @@ -188,8 +189,8 @@ const Principal = styled.div` a { font-size: 15px; padding: 0; - color:#00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } } @@ -198,9 +199,10 @@ const Principal = styled.div` ` const TabsStyled = styled(Tabs)` - + color: ${props => props.contrast === "" ? "" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; .Mui-selected { - background-color: #e7e4e4; + background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"}; } .MuiTab-root{ @@ -213,29 +215,26 @@ const TabsStyled = styled(Tabs)` ` const TabStyled = styled(Tab)` - + color: ${props => props.contrast === "" ? "" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; padding: 4px 15px !important; font-weight: 500; font-size: 14px !important; border-radius: 4px !important; text-align: center; - - - - &:hover { - background-color: #e7e4e4; + background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"}; } ` const Menu = styled.div` width: auto; - background-color: #fff; - color: #666; + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; + color: ${props => props.contrast === "" ? "#666" : "white"}; padding-block: 10px; - box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); + 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; margin-bottom:30px @@ -254,8 +253,8 @@ const Menu = styled.div` a { font-size: 15px; padding: 0; - color:#00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } } @@ -282,7 +281,8 @@ const Menu = styled.div` ` + const Secao = styled.div` margin-inline: auto; -` +` \ No newline at end of file diff --git a/src/Pages/TabsHelp/TabResourseFind.js b/src/Pages/TabsHelp/TabResourseFind.js index 51765ca0d2b43c6f211122df59a00c0d5d7743b7..bb6395cc15781d758bd02802106e8670f9e22cac 100644 --- a/src/Pages/TabsHelp/TabResourseFind.js +++ b/src/Pages/TabsHelp/TabResourseFind.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, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import styled from 'styled-components'; import Tabs from '@material-ui/core/Tabs' import Tab from '@material-ui/core/Tab'; @@ -29,11 +29,13 @@ import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando'; import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando'; import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando'; import { Link } from 'react-router-dom'; +import { Store } from '../../Store'; //Image Import import { EncontrandoRecurso } from "ImportImages.js"; export default function TabResourseFind(props) { + const { state } = useContext(Store) const tabs = [ 'Como fazer uma busca?', 'Como filtrar os resultados?', @@ -48,13 +50,12 @@ export default function TabResourseFind(props) { } useEffect(() => { window.scrollTo(0, 0) }, []) - + return ( - <div style={{ backgroundColor: "#f4f4f4" }}> + <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}> <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" /> - <Secao> - <BreadCrumbsDiv> + <BreadCrumbsDiv contrast={state.contrast}> <StyledBreadCrumbs> <Link to="/" > Página Inicial @@ -72,21 +73,23 @@ export default function TabResourseFind(props) { </BreadCrumbsDiv> <Grid container justify="center"> <Grid item xs={12} md={10} > - <Principal> - <Menu> + <Principal contrast={state.contrast}> + <Menu contrast={state.contrast}> <div className="fixo"> <img src={EncontrandoRecurso} alt="Encontrando Recursos" /> <span>{tabs[3]}</span> </div> - <TabsStyled orientation="vertical" + <TabsStyled + contrast={state.contrast} + orientation="vertical" variant="scrollable" value={tabValue} onChange={handleChangeTab} TabIndicatorProps={{ style: { display: "none" } }} > - <TabStyled label={tabs[0]}></TabStyled> - <TabStyled label={tabs[1]}></TabStyled> - <TabStyled label={tabs[2]}></TabStyled> + <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled> + <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled> + <TabStyled contrast={state.contrast} label={tabs[2]}></TabStyled> </TabsStyled> <br /> <div className="voltarInicio"> @@ -94,9 +97,9 @@ export default function TabResourseFind(props) { </div> </Menu> - {tabValue === 0 && <HowToDo title={tabs[0]} />} - {tabValue === 1 && <HowToFilter title={tabs[1]} />} - {tabValue === 2 && <HowToRank title={tabs[2]} />} + {tabValue === 0 && <HowToDo contrast={state.contrast} title={tabs[0]} />} + {tabValue === 1 && <HowToFilter contrast={state.contrast} title={tabs[1]} />} + {tabValue === 2 && <HowToRank contrast={state.contrast} title={tabs[2]} />} <div className="resultadosProcura"> <span>Não era bem o que você procurava?</span> <div className="subtitulo"> @@ -110,13 +113,13 @@ export default function TabResourseFind(props) { </Grid> <Grid style={{ paddingBottom: "50px" }} container justify={"center"}> <Grid item xs={12} md={3} style={{ margin: 5 }}> - <CardPublicando /> + <CardPublicando contrast={state.contrast} /> </Grid> <Grid item xs={12} md={3} style={{ margin: 5 }}> - <CardParticipando /> + <CardParticipando contrast={state.contrast} /> </Grid> <Grid item xs={12} md={3} style={{ margin: 5 }}> - <CardGerenciando /> + <CardGerenciando contrast={state.contrast} /> </Grid> </Grid> @@ -130,15 +133,13 @@ const StyledBreadCrumbs = styled(Breadcrumbs)` display : flex; justify-content : flex-start; span { - color : #a5a5a5; + color: ${props => props.contrast === "" ? "#a5a5a5" : "white"}; } a { - color: #00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } - ` - const BreadCrumbsDiv = styled.div` padding : 10px; @@ -148,14 +149,11 @@ const BreadCrumbsDiv = styled.div` const Principal = styled.div` .fixo { - + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; height: 40px; text-align: center; - background-color: #fff; padding: 30px; margin-bottom: 30px; - color: #666; - img { height: 50px; @@ -167,7 +165,7 @@ const Principal = styled.div` span { font-size: 20px; - vertical-align: ; + color: ${props => props.contrast === "" ? "" : "white"}; } @@ -177,7 +175,7 @@ const Principal = styled.div` text-align: center; margin-block: 30px; padding-inline: 15px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 24px; } @@ -191,8 +189,8 @@ const Principal = styled.div` a { font-size: 15px; padding: 0; - color:#00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } } @@ -201,9 +199,10 @@ const Principal = styled.div` ` const TabsStyled = styled(Tabs)` - + color: ${props => props.contrast === "" ? "" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; .Mui-selected { - background-color: #e7e4e4; + background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"}; } .MuiTab-root{ @@ -216,29 +215,26 @@ const TabsStyled = styled(Tabs)` ` const TabStyled = styled(Tab)` - + color: ${props => props.contrast === "" ? "" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; padding: 4px 15px !important; font-weight: 500; font-size: 14px !important; border-radius: 4px !important; text-align: center; - - - - &:hover { - background-color: #e7e4e4; + background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"}; } ` const Menu = styled.div` width: auto; - background-color: #fff; - color: #666; + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; + color: ${props => props.contrast === "" ? "#666" : "white"}; padding-block: 10px; - box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); + 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; margin-bottom:30px @@ -257,8 +253,8 @@ const Menu = styled.div` a { font-size: 15px; padding: 0; - color:#00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } } @@ -285,6 +281,7 @@ const Menu = styled.div` ` + const Secao = styled.div` margin-inline: auto; diff --git a/src/Pages/TabsHelp/TabResoursePub.js b/src/Pages/TabsHelp/TabResoursePub.js index 7ff00fa47e3afb43b53e748e970db42b8f43eb31..aa4f9dca45f01ba5fc53f0cbb9c6ede819692658 100644 --- a/src/Pages/TabsHelp/TabResoursePub.js +++ b/src/Pages/TabsHelp/TabResoursePub.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, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import styled from 'styled-components'; import Tabs from '@material-ui/core/Tabs' import Tab from '@material-ui/core/Tab'; @@ -29,14 +29,12 @@ import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando'; import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando'; import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando'; import { Link } from 'react-router-dom'; +import { Store } from '../../Store'; //Image Import import { PublicandoRecursos } from "ImportImages.js"; export default function TabResoursePub(props) { - - console.log(props) - const tabs = [ 'Por que enviar um recurso?', 'Como publicar um recurso?', @@ -45,6 +43,7 @@ export default function TabResoursePub(props) { ] const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state); + const { state } = useContext(Store) const handleChangeTab = (e, newValue) => { setTabValue(newValue) @@ -53,12 +52,12 @@ export default function TabResoursePub(props) { useEffect(() => { window.scrollTo(0, 0) }, []) return ( - <div style={{ backgroundColor: "#f4f4f4" }}> + <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}> <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" /> <Secao> <BreadCrumbsDiv> - <StyledBreadCrumbs> + <StyledBreadCrumbs contrast={state.contrast}> <Link to="/" > Página Inicial </Link> @@ -73,21 +72,21 @@ export default function TabResoursePub(props) { </BreadCrumbsDiv> <Grid container justify="center"> <Grid item xs={12} md={10} > - <Principal> - <Menu> + <Principal contrast={state.contrast}> + <Menu contrast={state.contrast}> <div className="fixo"> <img src={PublicandoRecursos} alt="Publicando Recursos" /> <span>{tabs[3]}</span> </div> - <TabsStyled orientation="vertical" + <TabsStyled contrast={state.contrast} orientation="vertical" variant="scrollable" value={tabValue} onChange={handleChangeTab} TabIndicatorProps={{ style: { display: "none" } }} > - <TabStyled label={tabs[0]}></TabStyled> - <TabStyled label={tabs[1]}></TabStyled> - <TabStyled label={tabs[2]}></TabStyled> + <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled> + <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled> + <TabStyled contrast={state.contrast} label={tabs[2]}></TabStyled> </TabsStyled> <br /> <div className="voltarInicio"> @@ -95,9 +94,9 @@ export default function TabResoursePub(props) { </div> </Menu> - {tabValue === 0 && <Why title={tabs[0]} />} - {tabValue === 1 && <How title={tabs[1]} />} - {tabValue === 2 && <Which title={tabs[2]} />} + {tabValue === 0 && <Why contrast={state.contrast} title={tabs[0]} />} + {tabValue === 1 && <How contrast={state.contrast} title={tabs[1]} />} + {tabValue === 2 && <Which contrast={state.contrast} title={tabs[2]} />} <div className="resultadosProcura"> <span>Não era bem o que você procurava?</span> <div className="subtitulo"> @@ -110,15 +109,14 @@ export default function TabResoursePub(props) { </Grid> <Grid style={{ paddingBottom: "50px" }} container justify={"center"}> <Grid item xs={12} md={3} style={{ margin: 5 }}> - <CardEncontrando /> + <CardEncontrando contrast={state.contrast} /> </Grid> <Grid item xs={12} md={3} style={{ margin: 5 }}> - <CardParticipando /> + <CardParticipando contrast={state.contrast} /> </Grid> <Grid item xs={12} md={3} style={{ margin: 5 }}> - <CardGerenciando /> + <CardGerenciando contrast={state.contrast} /> </Grid> - </Grid> @@ -130,11 +128,11 @@ const StyledBreadCrumbs = styled(Breadcrumbs)` display : flex; justify-content : flex-start; span { - color : #a5a5a5; + color: ${props => props.contrast === "" ? "#a5a5a5" : "white"}; } a { - color: #00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } ` @@ -148,14 +146,11 @@ const BreadCrumbsDiv = styled.div` const Principal = styled.div` .fixo { - + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; height: 40px; text-align: center; - background-color: #fff; padding: 30px; margin-bottom: 30px; - color: #666; - img { height: 50px; @@ -167,7 +162,7 @@ const Principal = styled.div` span { font-size: 20px; - vertical-align: ; + color: ${props => props.contrast === "" ? "" : "white"}; } @@ -177,7 +172,7 @@ const Principal = styled.div` text-align: center; margin-block: 30px; padding-inline: 15px; - color: #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; span { font-size: 24px; } @@ -191,8 +186,8 @@ const Principal = styled.div` a { font-size: 15px; padding: 0; - color:#00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } } @@ -201,9 +196,10 @@ const Principal = styled.div` ` const TabsStyled = styled(Tabs)` - + color: ${props => props.contrast === "" ? "" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; .Mui-selected { - background-color: #e7e4e4; + background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"}; } .MuiTab-root{ @@ -216,29 +212,26 @@ const TabsStyled = styled(Tabs)` ` const TabStyled = styled(Tab)` - + color: ${props => props.contrast === "" ? "" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; padding: 4px 15px !important; font-weight: 500; font-size: 14px !important; border-radius: 4px !important; text-align: center; - - - - &:hover { - background-color: #e7e4e4; + background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"}; } ` const Menu = styled.div` width: auto; - background-color: #fff; - color: #666; + background-color: ${props => props.contrast === "" ? "#fff" : "black"}; + color: ${props => props.contrast === "" ? "#666" : "white"}; padding-block: 10px; - box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); + 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(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"}; margin-bottom:30px @@ -257,8 +250,8 @@ const Menu = styled.div` a { font-size: 15px; padding: 0; - color:#00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; } } diff --git a/src/Pages/TermsPage.js b/src/Pages/TermsPage.js index aaa58528781f305e067490c2ba119a5bd76dd9ce..0a16d9574dd63dc04f4487b3fcabbf159b39e18f 100644 --- a/src/Pages/TermsPage.js +++ b/src/Pages/TermsPage.js @@ -15,9 +15,9 @@ 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 {device} from '../Components/device.js' +import { device } from '../Components/device.js' import { Store } from '../Store.js'; import { Button } from '@material-ui/core'; import Card from '@material-ui/core/Card'; @@ -25,12 +25,11 @@ import LabeledCheckbox from "../Components/Checkbox.js" import TermsPageContent from '../Components/TermsPageContent.js' import AppBar from '@material-ui/core/AppBar'; import { makeStyles } from '@material-ui/core/styles'; -import {Link} from 'react-router-dom' +import { Link } from 'react-router-dom' const CardStyled = styled(Card)` box-sizing : border-box; background-color : white; max-width: 1700px; - padding-top: 52px; @media ${device.mobileM} { width : 100%; height : 100%; @@ -57,7 +56,7 @@ const StyledSpanContinuar = styled.span` const Background = styled.div` padding-top : 40px; - background-color : #f4f4f4; + background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; color : #666; padding-bottom : 40px; @@ -78,76 +77,76 @@ const Background = styled.div` } ` -export default function TermsContainer (props) { - // eslint-disable-next-line - const {state, dispatch} = useContext(Store) - // eslint-disable-next-line - const [checked, setChecked] = useState(false); - const [unavailableButton, setButtonAvailability] = useState(true); - const classes = useStyles() - - const handleChecked = e => { - setChecked(e.target.checked); - setButtonAvailability(!unavailableButton); - } - - const handleAgreement = () => { - - dispatch( { - type: 'USER_AGREED_TO_PUBLICATION_TERMS', - userAgreement: true - }) +export default function TermsContainer(props) { + // eslint-disable-next-line + const { state, dispatch } = useContext(Store) + // eslint-disable-next-line + const [checked, setChecked] = useState(false); + const [unavailableButton, setButtonAvailability] = useState(true); + const classes = useStyles() + + const handleChecked = e => { + setChecked(e.target.checked); + setButtonAvailability(!unavailableButton); + } - if (props.location.state) { - props.history.push('/professor') - }else { - props.history.push('/permission') - window.scrollTo(0, 0) - } + const handleAgreement = () => { + dispatch({ + type: 'USER_AGREED_TO_PUBLICATION_TERMS', + userAgreement: true + }) + + if (props.location.state) { + props.history.push('/professor') + } else { + props.history.push('/permission') + window.scrollTo(0, 0) } + } - return ( - <Background> - <div className="container"> - <CardStyled variant="outlined"> - <TermsPageContent/> - </CardStyled> - </div> - <AppBar position="fixed" color="primary" className={classes.appBar}> - <StyledAppBarContainer> - <div className="container"> - <div style={{fontSize:"14px"}}> - <LabeledCheckbox label={<Styledspan style={{color : "#666", fontWeight : "600"}}>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/> - </div> - <div className="botoes"> - <Button disabled = {unavailableButton} - style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}} + return ( + <Background contrast={state.contrast}> + <div className="container"> + <CardStyled contrast={state.contrast} variant="outlined"> + <TermsPageContent contrast={state.contrast} /> + </CardStyled> + </div> + <AppBar position="fixed" color="primary" className={state.contrast === "" ? classes.lightAppBar : classes.darkAppBar}> + <StyledAppBarContainer> + <div className="container"> + <div style={{ fontSize: "14px" }}> + <LabeledCheckbox contrast={state.contrast} label={<Styledspan style={state.contrast === "" ? { color: "#666", fontWeight: "600" } : { color: "yellow", fontWeight: "600", textDecoration: "underline" }}>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked} /> + </div> + <div className="botoes"> + <Button disabled={unavailableButton} + style={unavailableButton ? state.contrast === "" ? { backgroundColor: "#e9e9e9" } : {} : state.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", border: "1px solid white" }} onClick={handleAgreement} - > - <StyledSpanContinuar style={unavailableButton ? {color:"#666666"} : {}}> - Continuar - </StyledSpanContinuar> - </Button> - <Link to="/"> - <GrayButton> - Cancelar - </GrayButton> - </Link> - </div> + > + <StyledSpanContinuar style={unavailableButton ? state.contrast === "" ? { color: "#666666" } : { color: "white" } : state.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}> + Continuar + </StyledSpanContinuar> + </Button> + <Link to="/"> + <GrayButton contrast={state.contrast}> + Cancelar + </GrayButton> + </Link> </div> - </StyledAppBarContainer> - </AppBar> - </Background> - ) + </div> + </StyledAppBarContainer> + </AppBar> + </Background> + ) } const GrayButton = 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"}; } height : 36px !important; font-weight : 600 !important; - color : #666 !important; + color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"}; background-color: transparent; min-width : 88px !important; height : 36px !important; @@ -171,13 +170,20 @@ const GrayButton = styled(Button)` ` const useStyles = makeStyles((theme) => ({ - appBar: { - top: 'auto', - bottom: 0, - height : '100px', - backgroundColor : '#fff', - boxShadow : '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)' - }, + lightAppBar: { + top: 'auto', + bottom: 0, + height: '100px', + backgroundColor: '#fff', + boxShadow: '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)' + }, + darkAppBar: { + top: 'auto', + bottom: 0, + height: '100px', + backgroundColor: 'black', + boxShadow: '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)' + }, })); diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js index 848b3b5b76edf5f975011b676dcfc021bbcd701e..8d683857f3315da898dd8349d2293db4251b643d 100644 --- a/src/Pages/UploadPage.js +++ b/src/Pages/UploadPage.js @@ -16,146 +16,148 @@ 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, useContext} from 'react' +import React, { useState, useEffect, useContext } from 'react' import Grid from '@material-ui/core/Grid'; import UploadFileWrapper from '../Components/UploadPageComponents/UploadFileWrapper.js' -import {Store} from '../Store.js' -import {InfoBox} from '../Components/UploadPageComponents/StyledComponents.js' +import { Store } from '../Store.js' +import { InfoBox } from '../Components/UploadPageComponents/StyledComponents.js' import Stepper from '../Components/UploadPageComponents/Stepper.js' -import {postRequest} from '../Components/HelperFunctions/getAxiosConfig.js' +import { postRequest } from '../Components/HelperFunctions/getAxiosConfig.js' import PartOne from '../Components/UploadPageComponents/PartOne.js' import PartTwo from '../Components/UploadPageComponents/PartTwo.js' import PartThree from '../Components/UploadPageComponents/PartThree.js' import ModalLearningObjectPublished from '../Components/ModalLearningObjectPublished.js' -import {Background} from '../Components/UploadPageComponents/StyledComponents' +import { Background } from '../Components/UploadPageComponents/StyledComponents' import LoadingSpinner from '../Components/LoadingSpinner.js' -import {Redirect} from 'react-router-dom' +import { Redirect } from 'react-router-dom' -export default function UploadPage (props) { - const {state} = useContext(Store) +export default function UploadPage(props) { + const { state } = useContext(Store) - // {/*Object : link or file uploaded*/} - // eslint-disable-next-line - const [object, setObject] = useState() + // {/*Object : link or file uploaded*/} + // eslint-disable-next-line + const [object, setObject] = useState() - const [loading, toggleLoading] = useState(true) - const [draft, setDraft] = useState({}) - function handleSuccessfulGet (data) { - setDraft(data) - toggleLoading(false) - } - useEffect( () => { - if (state.currentUser.id !== "") { + const [loading, toggleLoading] = useState(true) + const [draft, setDraft] = useState({}) + function handleSuccessfulGet(data) { + setDraft(data) + toggleLoading(false) + } + useEffect(() => { + if (state.currentUser.id !== "") { - const url = `/learning_objects/` + const url = `/learning_objects/` - let payload = {} + let payload = {} - postRequest(url, payload, handleSuccessfulGet, (error) => {console.log(error)}) + postRequest(url, payload, handleSuccessfulGet, (error) => { console.log(error) }) - } - }, []) + } + }, []) - const [activeStep, setActiveStep] = React.useState(0); - const stepperControl=(increment)=>{setActiveStep(activeStep + increment)} + const [activeStep, setActiveStep] = React.useState(0); + const stepperControl = (increment) => { setActiveStep(activeStep + increment) } - const [objectSubmitted, toggleModal] = useState(false) - const handleModal = (value) => {toggleModal(value)} + const [objectSubmitted, toggleModal] = useState(false) + const handleModal = (value) => { toggleModal(value) } - const handlePost = () => { - if (state.currentUser.id !== "") { - const url = `/learning_objects/${draft.id}/publish` + const handlePost = () => { + if (state.currentUser.id !== "") { + const url = `/learning_objects/${draft.id}/publish` - let payload = {} + let payload = {} - postRequest(url, payload, - (data) => {handleModal(true)}, - (error) => {console.log(error)} - ) + postRequest(url, payload, + (data) => { handleModal(true) }, + (error) => { console.log(error) } + ) - } } + } - const handleSubmit = () => { - if (state.currentUser.id !== "") { - const url = `/submissions/` + const handleSubmit = () => { + if (state.currentUser.id !== "") { + const url = `/submissions/` - let payload = { - "submission" : { - "learning_object_id" : draft.id - } - } + let payload = { + "submission": { + "learning_object_id": draft.id + } + } - postRequest(url, payload, - (data) => {handleModal(true)}, - (error) => {console.log(error)} - ) + postRequest(url, payload, + (data) => { handleModal(true) }, + (error) => { console.log(error) } + ) - } } - - return ( - <React.Fragment> - { - state.currentUser.id === '' && - <Redirect to="/"/> - } - { - loading === true ? - ( - <LoadingSpinner text={"CARREGANDO..."}/> - ) - : - ( - <> - <ModalLearningObjectPublished - open={objectSubmitted} - handleClose={() => {toggleModal(false); props.history.push('/')}} - draftID={draft.id} - /> - { - activeStep === 2 ? - ( - <PartThree draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit}/> - ) - : - ( - <Background> - <div className="container"> - <Grid container spacing={2}> - <Grid item md={4} xs={12}> - <UploadFileWrapper draftID={draft.id}/> - </Grid> - <Grid item md={8} xs={12}> - <InfoBox> - <div className="cabecalho"> - <h2>Informações sobre o Recurso</h2> - <div className="feedback-upload"> - <Stepper activeStep={activeStep}/> - </div> - </div> - { - activeStep === 0 && - <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}> - <PartOne draftID={draft.id} stepperControl={stepperControl}/> - </Grid> - } - { - activeStep === 1 && - <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}> - <PartTwo draftID={draft.id} stepperControl={stepperControl}/> - </Grid> - } - </InfoBox> - </Grid> - </Grid> + } + + return ( + <React.Fragment> + { + state.currentUser.id === '' && + <Redirect to="/" /> + } + { + loading === true ? + ( + <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}> + <LoadingSpinner contrast={state.contrast} text={"CARREGANDO..."} /> + </div> + ) + : + ( + <> + <ModalLearningObjectPublished + open={objectSubmitted} + handleClose={() => { toggleModal(false); props.history.push('/') }} + draftID={draft.id} + /> + { + activeStep === 2 ? + ( + <PartThree draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit} /> + ) + : + ( + <Background contrast={state.contrast}> + <div className="container"> + <Grid container spacing={2}> + <Grid item md={4} xs={12}> + <UploadFileWrapper contrast={state.contrast} draftID={draft.id} /> + </Grid> + <Grid item md={8} xs={12}> + <InfoBox contrast={state.contrast}> + <div className="cabecalho"> + <h2>Informações sobre o Recurso</h2> + <div className="feedback-upload"> + <Stepper contrast={state.contrast} activeStep={activeStep} /> </div> - </Background> - ) - } - </> - ) - } + </div> + { + activeStep === 0 && + <Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}> + <PartOne draftID={draft.id} stepperControl={stepperControl} /> + </Grid> + } + { + activeStep === 1 && + <Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}> + <PartTwo draftID={draft.id} stepperControl={stepperControl} /> + </Grid> + } + </InfoBox> + </Grid> + </Grid> + </div> + </Background> + ) + } + </> + ) + } </React.Fragment> -) + ) } diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js index 2688500eeb48d71df1f3fc1469d744a41d4b71e6..9de1400f65abd87b3e85a25d4531892eed25cc8c 100644 --- a/src/Pages/UserPage.js +++ b/src/Pages/UserPage.js @@ -30,13 +30,13 @@ import TabPanelRede from "../Components/TabPanels/UserPageTabs/PanelRede.js"; import TabPanelCuradoria from "../Components/TabPanels/UserPageTabs/PanelCuradoria.js"; import Grid from "@material-ui/core/Grid"; import { - HeaderContainer, - UserProfileContainer, - CheckTeacherDiv, - StyledTabs, - RodapeDiv, - NavBarContentContainer, - BackgroundDiv, + HeaderContainer, + UserProfileContainer, + CheckTeacherDiv, + StyledTabs, + RodapeDiv, + NavBarContentContainer, + BackgroundDiv, } from "../Components/TabPanels/StyledComponents.js"; import CircularProgress from "@material-ui/core/CircularProgress"; import Cover from "../Components/UserPageComponents/Cover.js"; @@ -48,211 +48,205 @@ import { getRequest } from "../Components/HelperFunctions/getAxiosConfig.js"; import Typography from "@material-ui/core/Typography"; export default function UserPage(props) { - const { state, dispatch } = useContext(Store); - const id = state.currentUser.id; - - const [follows, setFollows] = useState(0); - const [following, setFollowing] = useState(0); - const [loading, setLoading] = useState(false); - const [tabValue, setTabValue] = useState(Number(props.location.state) || 0); - const [tabs, setTabs] = useState([ - "Atividades", - "Meus Recursos", - "Favoritos", - "Coleções", - "Rede", - ]); - const handleChangeTab = (event, newValue) => { - setTabValue(newValue); - }; - - function handleSuccessfulGet(data) { - console.log(data); - dispatch({ - type: "GET_USER", - user: data, - }); - - setFollows(data.follows_count); - - if (data.role_ids.includes(4)) { - setTabs([ + const { state, dispatch } = useContext(Store); + const id = state.currentUser.id; + + const [follows, setFollows] = useState(0); + const [following, setFollowing] = useState(0); + const [loading, setLoading] = useState(false); + const [tabValue, setTabValue] = useState(Number(props.location.state) || 0); + const [tabs, setTabs] = useState([ "Atividades", "Meus Recursos", "Favoritos", "Coleções", "Rede", - "Curadoria", - ]); + ]); + const handleChangeTab = (event, newValue) => { + setTabValue(newValue); + }; + + function handleSuccessfulGet(data) { + console.log(data); + dispatch({ + type: "GET_USER", + user: data, + }); + + setFollows(data.follows_count); + + if (data.role_ids.includes(4)) { + setTabs([ + "Atividades", + "Meus Recursos", + "Favoritos", + "Coleções", + "Rede", + "Curadoria", + ]); + } } - } - - function handleSuccesGetFollowing(data) { - setFollowing(data.length); - setLoading(false); - } - useEffect(() => { - if (id !== "") { - const url = `/users/${id}`; - const url2 = `/users/${id}/following/User`; - setLoading(true); - getRequest(url, handleSuccessfulGet, (error) => { - console.log(error); - }); - getRequest(url2, handleSuccesGetFollowing, (error) => { - console.log(error); - }); + function handleSuccesGetFollowing(data) { + setFollowing(data.length); + setLoading(false); } - }, []); - - useEffect(() => { - setTabValue(Number(props.location.state) || 0) - }, [window.history.state.key]) - const redirect = () => { - props.history.push("/"); - }; - - const [modalOpen, toggleModal] = useState(false); - const WIDTH = window.innerWidth; - - return ( - <div> - <link - href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" - rel="stylesheet" - /> - { - state.userIsLoggedIn ? ( - [ - <React.Fragment> - <ModalAlterarAvatar - open={modalOpen} - handleClose={() => { - toggleModal(false); - }} - userAvatar={state.currentUser.avatar} - /> - - <BackgroundDiv> - <CustomizedBreadcrumbs values={["Minha área", tabs[tabValue]]} /> - <Grid container spacing={2}> - <Grid item xs={12}> - <div style={{ padding: "10px 0 8px 0" }}> - <UserProfileContainer> - <HeaderContainer> - <Cover id={id} /> - <ProfileAvatar id={id} /> - {WIDTH <= 600 ? null : <UserInfo />} - <EditProfileButton /> - </HeaderContainer> - {WIDTH <= 600 ? ( - <Grid - style={{ marginTop: "4em" }} - container - justify="center" - alignItems="center" - direction="column" - > - <Grid item> - <Typography - variant="h4" - gutterBottom - style={{ textAlign: "center" }} - > - {state.currentUser.name} - </Typography> - </Grid> + useEffect(() => { + if (id !== "") { + const url = `/users/${id}`; + const url2 = `/users/${id}/following/User`; + setLoading(true); + getRequest(url, handleSuccessfulGet, (error) => { + console.log(error); + }); + getRequest(url2, handleSuccesGetFollowing, (error) => { + console.log(error); + }); + } + }, []); + + useEffect(() => { + setTabValue(Number(props.location.state) || 0) + }, [window.history.state.key]) + + const redirect = () => { + props.history.push("/"); + }; + + const [modalOpen, toggleModal] = useState(false); + const WIDTH = window.innerWidth; + + return ( + <div> + <link + href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" + rel="stylesheet" + /> + { + state.userIsLoggedIn ? ( + [ + <React.Fragment> + <ModalAlterarAvatar + contrast={state.contrast} + open={modalOpen} + handleClose={() => { + toggleModal(false); + }} + userAvatar={state.currentUser.avatar} + /> + + <BackgroundDiv contrast={state.contrast}> + <CustomizedBreadcrumbs contrast={state.contrast} values={["Minha área", tabs[tabValue]]} /> + <Grid container spacing={2}> + <Grid item xs={12}> + <div style={{ padding: "10px 0 8px 0" }}> + <UserProfileContainer> + <HeaderContainer contrast={state.contrast}> + <Cover id={id} /> + <ProfileAvatar id={id} /> + {WIDTH <= 600 ? null : <UserInfo />} + <EditProfileButton contrast={state.contrast} /> + </HeaderContainer> + {WIDTH <= 600 ? ( <Grid - style={{ - marginTop: "0.5em", - marginBottom: "0.5em", - borderTop: "0.5px solid #eee", - borderBottom: "0.5px solid #eee", - }} - container - spacing={4} - justify="center" - alignItems="center" - direction="row" + 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="h6" onClick={(e) => { handleChangeTab(e, 4) }}> - {loading ? ( - <CircularProgress size={20} /> - ) : ( - `${follows} seguidores` - )} - </Typography> - </Grid> - <Grid item> - <Typography variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}> - {loading ? ( - <CircularProgress size={20} /> - ) : ( - `${following} seguindo` - )} + <Grid item> + <Typography + variant="h4" + gutterBottom + style={state.contrast === "" ? { textAlign: "center" } : { color: "white", textAlign: "center" }} + > + {state.currentUser.name} </Typography> - </Grid> + </Grid> + <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 style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}> + {loading ? ( + <CircularProgress size={20} /> + ) : ( + `${follows} seguidores` + )} + </Typography> + </Grid> + <Grid item> + <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}> + {loading ? ( + <CircularProgress size={20} /> + ) : ( + `${following} seguindo` + )} + </Typography> + </Grid> + </Grid> </Grid> - </Grid> - ) : ( - <CheckTeacherDiv> - <SubmitterStatus /> - </CheckTeacherDiv> - )} - <RodapeDiv> - <NavBarContentContainer> - <StyledTabs - value={tabValue} - onChange={handleChangeTab} - indicatorColor="primary" - textColor="primary" - variant="scrollable" - scrollButtons="on" - TabIndicatorProps={{ - style: { background: "#00bcd4" }, - }} - > - {tabs.map((tab) => ( - <StyledTab label={tab} key={tab} /> - ))} - </StyledTabs> - </NavBarContentContainer> - </RodapeDiv> - </UserProfileContainer> - </div> - </Grid> - <Grid item xs={12}> - {tabValue === 0 && <TabPanelAtividades id={id} />} - {tabValue === 1 && <TabPanelMeusRecursos id={id} />} - {tabValue === 2 && <TabPanelFavoritos id={id} />} - {tabValue === 3 && <TabPanelColecoes id={id} />} - {tabValue === 4 && <TabPanelRede id={id} />} - {tabValue === 5 && <TabPanelCuradoria id={id} />} - </Grid> - </Grid> - </BackgroundDiv> - </React.Fragment> - ] - ) - : - ( - <> - {redirect()} - </> - ) - } - </div> - ) + ) : ( + <CheckTeacherDiv contrast={state.contrast}> + <SubmitterStatus /> + </CheckTeacherDiv> + )} + <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) => ( + <StyledTab contrast={state.contrast} label={tab} key={tab} /> + ))} + </StyledTabs> + </NavBarContentContainer> + </RodapeDiv> + </UserProfileContainer> + </div> + </Grid> + <Grid item xs={12}> + {tabValue === 0 && <TabPanelAtividades id={id} contrast={state.contrast} />} + {tabValue === 1 && <TabPanelMeusRecursos id={id} contrast={state.contrast} />} + {tabValue === 2 && <TabPanelFavoritos id={id} contrast={state.contrast} />} + {tabValue === 3 && <TabPanelColecoes id={id} contrast={state.contrast} />} + {tabValue === 4 && <TabPanelRede id={id} contrast={state.contrast} />} + {tabValue === 5 && <TabPanelCuradoria id={id} contrast={state.contrast} />} + </Grid> + </Grid> + </BackgroundDiv> + </React.Fragment> + ] + ) + : + ( + <> + {redirect()} + </> + ) + } + </div> + ) } const StyledTab = styled(Tab)` - .Mui-selected { - border-bottom-color: #00bcd4 !important; - } - .MuiTab-wrapper { - border-bottom-color: #00bcd4 !important; - } ` diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js index d1df2973e336727e0517ecf7ba95716783865732..fadd1b57a89df285d36477f2e662ebb701ed8f8d 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 CadeadoAberto from "../img/termos/AbertoG.svg"; @@ -33,251 +34,248 @@ import { Aberto } from "ImportImages.js"; import { Fechado } from "ImportImages.js"; const BannerStyle = styled.div` - width: 100%; - background-image: url(${Banner}); - background-size: cover; - background-position: top center; - height: 370px; - - verticalAlign: "middle" + background: ${props => props.contrast === "" ? "" : "black"}; + width: 100%; + background-image: ${props => props.contrast === "" ? `url(${Banner})` : ""}; + background-size: cover; + background-position: top center; + height: 370px; + vertical-align: "middle"; ` 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; - - @media (min-width:1450px) { - background-image: url(${BuscaTermos}); - background-position: right; - background-size: contain; - background-repeat: no-repeat; - } - color: rgba(0,0,0,0.87); - height: auto; - align-items: center; - padding-block: 30px; - h3 { - line-height: 1.1; - text-align: center; - @media (min-width: 1000px) { - font-size: 30px; + 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(${BuscaTermos}); + background-position: right; + background-size: contain; + background-repeat: no-repeat; } + height: auto; + align-items: center; + padding-block: 30px; + h3 { + line-height: 1.1; + text-align: center; + @media (min-width: 1000px) { + font-size: 30px; + } + + @media (max-width: 1000px){ + font-size: 20px; + } + margin-top: 20px; + margin-bottom: 10px; + font-weight: 100; + padding-bottom: 20px; - @media (max-width: 1000px){ - font-size: 20px; } - margin-top: 20px; - margin-bottom: 10px; - font-weight: 100; - padding-bottom: 20px; - - } - - p { - line-height: 1.42857143; - padding-top: 20px; - font-size: 14px; - text-align: justify; - margin: 0 0 10px; - } -} -` -const Secao3 = styled.div` - background-color: #FF7F00; - @media (min-width: 1000px) { - background-image: url(${CadeadoAberto}), url(${CadeadoFechado}); - background-repeat: no-repeat; - background-position: bottom left, bottom right; - background-position-y: 120%, 120%; - height:340px; - padding-block:30px; - } - - color: #fff; - - text-align: left; - - h3 { - font-family: 'Pompiere', cursive; - font-size: 46px; - padding-bottom: 20px; - margin-top: 20px; - margin-bottom: 10px; - width: 100%; - text-align: center !important; - font-weight: 500 ; - - } - - .aberto { - background-image: url(${Aberto}), url(${Linha}); - } - .fechado { - background-image: url(${Fechado}), url(${Linha}); - } - - .caixa { - background-repeat: no-repeat; - background-size: 70px 70px, auto auto; - background-position: top left; - background-position-x: 0, 35px; - padding-left: 90px; - .texto{ - background-image: url(${Linha}); - background-position: top left; - background-repeat: repeat-x; - background-size: auto auto; - span { - font-size: 26px; - } - p { - text-align: left; - font-size: 15px; + p { + line-height: 1.42857143; + padding-top: 20px; + font-size: 14px; + text-align: justify; margin: 0 0 10px; - } } - } ` -const Secao4 = styled.div` - font-size: 15px; +const Secao3 = styled.div` + background: ${props => props.contrast === "" ? "#FF7F00" : "black"}; + @media (min-width: 1000px) { + background-image: url(${CadeadoAberto}), url(${CadeadoFechado}); + background-repeat: no-repeat; + background-position: bottom left, bottom right; + background-position-y: 120%, 120%; + height:340px; + padding-block:30px; + } + + color: #fff; - .texto { text-align: left; - padding-top: 20px; - padding-bottom: 20px; - a { - color:#00BCD4; - } + h3 { + font-family: 'Pompiere', cursive; + font-size: 46px; + padding-bottom: 20px; + margin-top: 20px; + margin-bottom: 10px; + width: 100%; + text-align: center !important; + font-weight: 500 ; - p { - font-family: 'Roboto', Bold; } - } + .aberto { + background-image: url(${Aberto}), url(${Linha}); + } + .fechado { + background-image: url(${Fechado}), url(${Linha}); + } - .titulo { - text-align: center; - color: #666666; - h3 { - font-size: 30px; - height: 22px; - padding-bottom: 20px; - margin-top: 20px; - margin-bottom: 10px; - font-weight: 500; - line-height: 1.1; + .caixa { + background-repeat: no-repeat; + background-size: 70px 70px, auto auto; + background-position: top left; + background-position-x: 0, 35px; + padding-left: 90px; + .texto{ + background-image: url(${Linha}); + background-position: top left; + background-repeat: repeat-x; + background-size: auto auto; + span { + font-size: 26px; + } + p { + text-align: left; + font-size: 15px; + margin: 0 0 10px; + } } - p { - height: 18px; - line-height: 1.42857143; - margin: 0 0 10px; +` + +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: ${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: ${props => props.contrast === "" ? "#666" : "white"}; + h3 { + font-size: 30px; + height: 22px; + padding-bottom: 20px; + margin-top: 20px; + margin-bottom: 10px; + font-weight: 500; + line-height: 1.1; + } + p { + height: 18px; + line-height: 1.42857143; + margin: 0 0 10px; + } + ` export default function UserTerms() { - useEffect(() => { - window.scrollTo(0, 0) - }, []) - return ( - <div style={{ color: "rgba(0,0,0,0.87" }} > - - - <BannerStyle> - <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 /> - </BannerStyle> - - <ImagemSeçao2> - <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> - <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> - </div> - </Grid> - <Grid item xs={12} md={1}></Grid> - </Grid> - </ImagemSeçao2> - - <Secao3 > - <Grid container > - <h3>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h3> - <Grid item xs={12} md={1} ></Grid> - <Grid item xs={12} md={5} > - <div class="caixa aberto"> - <div class="texto"> - <span>Abertos</span> - <p>De acordo com a Declaração de Paris, são recursos que, no mínimo, têm uma licença de uso mais flexível, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p> - </div> - </div> - </Grid> - - <Grid item xs={12} md={5}> - <div class="caixa fechado"> - <div class="texto"> - <span>Fechados</span> - <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessíveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservados”, o símbolo ©). Podem ser gratuitos ou pagos.</p> - </div> - </div> - </Grid> - <Grid item xs={12} md={1} ></Grid> - </Grid> - </Secao3> - - - - - <Grid container > - <Grid item xs={12} md={1}></Grid> - <Grid item xs={12} md={10}> - <Secao4> - <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> - <div class="titulo"> - <h3>TERMOS DE USO</h3> - <p>Início da vigência: agosto de 2017</p> - </div> - <div class="texto" style={{ paddingBottom: "40px" }}> - <p>Aqui estão os “Termos de Uso” da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços, e o que se espera de seus usuários. Por “usuário”, entende-se qualquer pessoa que acesse o domínio portal.mec.gov.br, tanto para pesquisa (acesso) como para a inclusão de dados e informações (participação) mediante cadastro.</p> - <p>Fazem parte dos Termos de Uso as políticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as informações sobre como reportar violações.</p> - <p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da <strong>Plataforma Integrada de RED do MEC</strong> implica aceite das condições aqui elencadas.</p> - <p>Por “serviço”, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p> - <p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler, certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos, utilize o formulário disponível em “Contato” para saná-las.</p> - </div> - </Secao4> - </Grid> - <Grid item xs={12} md={1}></Grid> - </Grid> - - - <Grid container > - <Grid item xs={12} md={1}></Grid> - <Grid item xs={12} md={10}> - <div style={{ marginBottom: "50px", paddingTop: "20px" }}> - <SimpleExpansionPanels /> - </div> - </Grid> - <Grid item xs={12} md={1}></Grid> - </Grid> - </div> - ); + const { state } = useContext(Store) + useEffect(() => { + window.scrollTo(0, 0) + }, []) + return ( + <div style={{ color: "rgba(0,0,0,0.87" }} > + <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 contrast={state.contrast} /> + </BannerStyle> + + <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 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 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> + <Grid item xs={12} md={1}></Grid> + </Grid> + </ImagemSeçao2> + + <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> + <Grid item xs={12} md={5} > + <div class="caixa aberto"> + <div class="texto"> + <span>Abertos</span> + <p>De acordo com a Declaração de Paris, são recursos que, no mínimo, têm uma licença de uso mais flexível, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p> + </div> + </div> + </Grid> + + <Grid item xs={12} md={5}> + <div class="caixa fechado"> + <div class="texto"> + <span>Fechados</span> + <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessíveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservados”, o símbolo ©). Podem ser gratuitos ou pagos.</p> + </div> + </div> + </Grid> + <Grid item xs={12} md={1} ></Grid> + </Grid> + </Secao3> + + <Grid container style={state.contrast === "" ? {} : { backgroundColor: "black" }}> + <Grid item xs={12} md={1}></Grid> + <Grid item xs={12} md={10}> + <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> + <div class="titulo"> + <h3>TERMOS DE USO</h3> + <p>Início da vigência: agosto de 2017</p> + </div> + <div class="texto" style={{ paddingBottom: "40px" }}> + <p>Aqui estão os “Termos de Uso” da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços, e o que se espera de seus usuários. Por “usuário”, entende-se qualquer pessoa que acesse o domínio portal.mec.gov.br, tanto para pesquisa (acesso) como para a inclusão de dados e informações (participação) mediante cadastro.</p> + <p>Fazem parte dos Termos de Uso as políticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as informações sobre como reportar violações.</p> + <p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da <strong>Plataforma Integrada de RED do MEC</strong> implica aceite das condições aqui elencadas.</p> + <p>Por “serviço”, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p> + <p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler, certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos, utilize o formulário disponível em “Contato” para saná-las.</p> + </div> + </Secao4> + </Grid> + <Grid item xs={12} md={1}></Grid> + </Grid> + + + <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 contrast={state.contrast} /> + </div> + </Grid> + <Grid item xs={12} md={1}></Grid> + </Grid> + </div> + ); } diff --git a/src/Store.js b/src/Store.js index 0cb5c0333ff49866a8125e8eb30e88582a815db9..6b8598b60a56213ce5f355eff17e67ede4370736 100644 --- a/src/Store.js +++ b/src/Store.js @@ -21,158 +21,170 @@ import React from 'react' export const Store = React.createContext() const initialState = { - searchOpen: false, - userIsLoggedIn : false, - userAgreedToPublicationTerms: false, - userAgreedToPublicationPermissions: false, - modalColaborarPlataformaOpen : false, - search: { - query: '*', - class: 'LearningObject' - }, - windowSize: { - width: 0, - height: 0 -}, - currentUser: { - askTeacherQuestion : false, - id : '', - name : '', - email : '', - avatar : '', - cover : '', - uid : '', - follows_count : 0, - collections_count : 0, - submitter_request : 'default', - roles : [] - } + searchOpen: false, + userIsLoggedIn: false, + userAgreedToPublicationTerms: false, + userAgreedToPublicationPermissions: false, + modalColaborarPlataformaOpen: false, + search: { + query: '*', + class: 'LearningObject' + }, + windowSize: { + width: 0, + height: 0 + }, + currentUser: { + askTeacherQuestion: false, + id: '', + name: '', + email: '', + avatar: '', + cover: '', + uid: '', + follows_count: 0, + collections_count: 0, + submitter_request: 'default', + roles: [] + }, + contrast: '', + fontSize: 15, } function reducer(state, action) { - switch (action.type){ - case 'SAVE_SEARCH': - return { - ...state, - search: action.newSearch - } - case 'HANDLE_SEARCH_BAR': - return { - ...state, - searchOpen: action.opened - } - case 'WINDOW_SIZE': - return { - ...state, - windowSize: action.innerWindow - } - case 'USER_LOGGED_IN': - if (action.login.avatar_file_name) { - Object.defineProperty(action.login, 'avatar', - Object.getOwnPropertyDescriptor(action.login, 'avatar_file_name')); - delete action.login['avatar_file_name']; - } - if (action.login.cover_file_name) { - Object.defineProperty(action.login, 'cover', - Object.getOwnPropertyDescriptor(action.login, 'cover_file_name')); - delete action.login['cover_file_name']; - } - return { - ...state, - userIsLoggedIn:action.userLoggedIn, - currentUser:action.login + switch (action.type) { + case 'SET_CONTRAST': + return { + ...state, + contrast: action.payload + }; + case 'SET_FONT_SIZE': + return { + ...state, + fontSize: action.payload + }; + case 'SAVE_SEARCH': + return { + ...state, + search: action.newSearch + } + case 'HANDLE_SEARCH_BAR': + return { + ...state, + searchOpen: action.opened + } + case 'WINDOW_SIZE': + return { + ...state, + windowSize: action.innerWindow + } + case 'USER_LOGGED_IN': + if (action.login.avatar_file_name) { + Object.defineProperty(action.login, 'avatar', + Object.getOwnPropertyDescriptor(action.login, 'avatar_file_name')); + delete action.login['avatar_file_name']; + } + if (action.login.cover_file_name) { + Object.defineProperty(action.login, 'cover', + Object.getOwnPropertyDescriptor(action.login, 'cover_file_name')); + delete action.login['cover_file_name']; + } + return { + ...state, + userIsLoggedIn: action.userLoggedIn, + currentUser: action.login + } + case 'USER_SIGNED_UP': + return { + ...state, + userIsLoggedIn: action.userLoggedIn, + currentUser: action.user + } + case 'USER_LOGGED_OUT': + localStorage.clear() + return { + ...state, + userIsLoggedIn: action.userLoggedOut, + currentUser: { + askTeacherQuestion: false, + id: '', + name: '', + email: '', + avatar_file_name: '', + cover_file_name: '', + uid: '', + follows_count: 0, + collections_count: 0, + submitter_request: 'default', + roles: [] + }, + userAgreedToPublicationTerms: false, + userAgreedToPublicationPermissions: false + } + case 'USER_AGREED_TO_PUBLICATION_TERMS': + return { + ...state, + userAgreedToPublicationTerms: action.userAgreement + } + case 'USER_AGREED_TO_PUBLICATION_PERMISSIONS': + return { + ...state, + userAgreedToPublicationPermissions: action.userAgreement + } + case 'USER_ACCESSED_USER_PAGE': + return { + ...state, + currentUser: action.set + } + case 'USER_CHANGED_COVER': + return { + ...state, + currentUser: action.currUser + } + case 'USER_DELETED_ACCOUNT': + localStorage.clear() + return { + ...state, + userIsLoggedIn: false, + currentUser: { + askTeacherQuestion: false, + id: '', + name: '', + email: '', + avatar_file_name: '', + cover_file_name: '', + uid: '', + follows_count: 0, + collections_count: 0, + submitter_request: 'default', + roles: [] + }, + } + case 'TOGGLE_MODAL_COLABORAR_PLATAFORMA': + return { + ...state, + modalColaborarPlataformaOpen: action.modalColaborarPlataformaOpen + } + case 'GET_USER': + return { + ...state, + currentUser: action.user + } + case 'USER_UPDATED_EMAIL': + return { + ...state, + currentUser: action.currUser + } + default: + return state } - case 'USER_SIGNED_UP': - return { - ...state, - userIsLoggedIn:action.userLoggedIn, - currentUser:action.user - } - case 'USER_LOGGED_OUT': - localStorage.clear() - return { - ...state, - userIsLoggedIn:action.userLoggedOut, - currentUser:{ - askTeacherQuestion : false, - id : '', - name : '', - email : '', - avatar_file_name : '', - cover_file_name : '', - uid : '', - follows_count : 0, - collections_count : 0, - submitter_request : 'default', - roles : [] - }, - userAgreedToPublicationTerms: false, - userAgreedToPublicationPermissions: false - } - case 'USER_AGREED_TO_PUBLICATION_TERMS': - return { - ...state, - userAgreedToPublicationTerms: action.userAgreement - } - case 'USER_AGREED_TO_PUBLICATION_PERMISSIONS': - return { - ...state, - userAgreedToPublicationPermissions : action.userAgreement - } - case 'USER_ACCESSED_USER_PAGE': - return { - ...state, - currentUser : action.set - } - case 'USER_CHANGED_COVER': - return { - ...state, - currentUser : action.currUser - } - case 'USER_DELETED_ACCOUNT': - localStorage.clear() - return { - ...state, - userIsLoggedIn:false, - currentUser: { - askTeacherQuestion : false, - id : '', - name : '', - email : '', - avatar_file_name : '', - cover_file_name : '', - uid : '', - follows_count : 0, - collections_count : 0, - submitter_request : 'default', - roles : [] - }, - } - case 'TOGGLE_MODAL_COLABORAR_PLATAFORMA': - return { - ...state, - modalColaborarPlataformaOpen : action.modalColaborarPlataformaOpen - } - case 'GET_USER': - return { - ...state, - currentUser:action.user - } - case 'USER_UPDATED_EMAIL': - return { - ...state, - currentUser : action.currUser - } - default: - return state - } } export function StoreProvider(props) { const [state, dispatch] = React.useReducer(reducer, initialState); - const value = { state, dispatch }; + const value = { state, dispatch }; return ( <Store.Provider value={value}> {props.children} diff --git a/src/img/OffContrastIcon.png b/src/img/OffContrastIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..f44e653f9499dec5cfc293de994c1081ff9c64ec Binary files /dev/null and b/src/img/OffContrastIcon.png differ diff --git a/src/img/OnContrastIcon.png b/src/img/OnContrastIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..3ae2fd847b997f007110cfb4d85930f639714ab5 Binary files /dev/null and b/src/img/OnContrastIcon.png differ