EcFooter.js

/*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, { Component } from 'react';
import { Row, Col, Container } from 'react-grid-system';
import styled from 'styled-components';
import { HashLink as Link } from 'react-router-hash-link';

//Image Import
import { eduConectada } from "ImportImages.js";

const BlueFooter = styled.div`
    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) {
        padding-bottom : 2em;
    }
`


const listStyle = {
  listStyleType: "none",
  fontSize: "80%",
  padding: "0",
  lineHeight: "1.6",
}
const WhiteLink = styled(Link)`
	text-decoration: ${props => props.contrast === '' ? "none" : "underline"};;
	color: ${props => props.contrast === '' ? "white" : "yellow"};
`

class EcFooter extends Component {
  render() {
    return (
      <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 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 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" }}>
              <img src={eduConectada} height="50%" alt="logo educação conectada" />
            </Col>
          </Row>
        </Container>
      </BlueFooter>
    )
  }
}
export default EcFooter;