diff --git a/src/App.js b/src/App.js
index 479005eec98ac622014f236e16646cb0141c0b62..9890d4b194beac4b64b79aaae5a33473abca4883 100644
--- a/src/App.js
+++ b/src/App.js
@@ -461,8 +461,8 @@ export default function App() {
</Switch>
{!hideFooter && (
<div>
- <EcFooter />
- <GNUAGPLfooter />
+ <EcFooter contrast={state.contrast} />
+ <GNUAGPLfooter contrast={state.contrast} />
</div>
)}
</BrowserRouter>
diff --git a/src/Components/AboutCarousel.js b/src/Components/AboutCarousel.js
index 38dff772db4acf7fbe94e0f5328ea89d70f281c5..5c63fea5a683c5fd6da5997042ec64575e82aa41 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"
diff --git a/src/Components/EcFooter.js b/src/Components/EcFooter.js
index eca582f2730cc230d7554d97acbda3afcfac95f5..0ca86f0a34d43341619d326682db56605eb92699 100644
--- a/src/Components/EcFooter.js
+++ b/src/Components/EcFooter.js
@@ -23,8 +23,10 @@ import styled from 'styled-components';
import { HashLink as Link } from 'react-router-hash-link';
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) {
@@ -40,33 +42,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/Pages/AboutPage.js b/src/Pages/AboutPage.js
index 751b2a5d1c670d0d9b3426e71ddf51b8c2040880..549666df9f5dead40e7b5f570c54c526972fa8d9 100644
--- a/src/Pages/AboutPage.js
+++ b/src/Pages/AboutPage.js
@@ -375,7 +375,7 @@ const Secao6 = styled.div`
const Secao7 = styled.div`
height: 100%;
- background-color: #f4f4f4;
+ background-color: ${props => props.contrast === '' ? "#f4f4f4" : "black"};
.container {
@@ -417,10 +417,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;
@@ -442,6 +440,7 @@ const Secao7 = styled.div`
img {
width: 114px;
+ background-color: ${props => props.contrast === '' ? "#fff" : "black"};
}
}
@@ -456,6 +455,7 @@ const Secao7 = styled.div`
const Secao8 = styled.div`
height: 230px;
+ background-color: ${props => props.contrast === '' ? "" : "black"};
.container {
@@ -500,8 +500,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;
@@ -519,7 +518,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;
@@ -527,16 +526,12 @@ const Secao8 = styled.div`
font-weight: 500;
font-size: 14px;
overflow: hidden;
-
-
-
a {
- color: #fff;
- text-decoration: none;
+ color: ${props => props.contrast === '' ? "#fff" : "yellow"};
+ text-decoration: ${props => props.contrast === '' ? "" : "underline"};;
}
}
-
}
}
}
@@ -706,7 +701,7 @@ export default function AboutPage(props) {
<h2>Aqui você pode:</h2>
</div>
<div>
- <AboutCarousel contrast={state.contrast}/>
+ <AboutCarousel contrast={state.contrast} />
</div>
</div>
@@ -714,13 +709,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>
@@ -728,8 +723,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!
@@ -739,8 +734,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.
@@ -750,8 +745,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>
@@ -760,8 +755,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.
@@ -776,12 +771,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>