Funcionalities.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, { useContext } from 'react';
import { Row, Col, Container } from 'react-grid-system';

//Image Import
import { acessar } from "ImportImages.js";
import { baixar } from "ImportImages.js";
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 = {
  textAlign: "center",
  padding: "1%",
  fontFamily: "Roboto, sans-serif"
};

const title = {
  display: "block",
  fontSize: "1.1em",
  fontWeight: "Bold",
  fontFamily: "Roboto, sans-serif",
  textAlign: "center"
};
const caption = {
  fontSize: "1.07em",
  fontWeight: "lighter",
};

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" />
            <span>
              <span style={title}>
                Compartilhar
              </span>
              <span style={caption}>
                com os colegas
              </span>
            </span>
          </Col>
          <Col sm={4} md={4}>
            <img src={relatar} height="150px" alt="relatar experiências" />
            <span>
              <span style={title}>
                Relatar experiências,
              </span>
              <span>
                curtir e avaliar
              </span>
            </span>
          </Col>
          <Col sm={4} md={4}>
            <img src={guardar} height="150px" alt="guardar recursos" />
            <span>
              <span style={title}>
                Guardar recursos
              </span>
              <span>
                em coleções
              </span>
            </span>
          </Col>

          <Col sm={4} md={4}>
            <img src={seguir} height="150px" alt="seguir usuários" />
            <span>
              <span style={title}>
                Seguir usuários
              </span>
              <span>
                e suas coleções
              </span>
            </span>
          </Col>
          <Col sm={4} md={4}>
            <img src={baixar} height="150px" alt="baixar recursos" />
            <span>
              <span style={title}>
                Baixar
              </span>
              <span>
                recursos
              </span>
            </span>
          </Col>
          <Col sm={4} md={4}>
            <img src={acessar} height="150px" alt="acessar materiais" />
            <span>
              <span style={title}>
                Acessar materiais
              </span>
              <span>
                de formação
              </span>
            </span>
          </Col>
        </Row>
      </Container>
    </div>
  )
}