Compare revisions

Lucas Eduardo Schoenfelder · Lucas Eduardo Schoenfelder · Lucas Eduardo Schoenfelder · Lucas Eduardo Schoenfelder · Lucas Eduardo Schoenfelder · Lucas Eduardo Schoenfelder
--- a/package-lock.json
+++ b/package-lock.json
@@ -2338,9 +2338,9 @@
      "integrity": "sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA=="
    },
    "@hapi/hoek": {
-      "version": "8.5.0",
+      "version": "8.5.1",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz",
-      "integrity": "sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw=="
+      "integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow=="
    },
    "@hapi/joi": {
      "version": "15.1.1",
@@ -12977,6 +12977,15 @@
        "camelcase": "^5.0.0"
      }
    },
+    "react-input-mask": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
+      "integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
+      "requires": {
+        "invariant": "^2.2.4",
+        "warning": "^4.0.2"
+      }
+    },
    "react-is": {
      "version": "16.8.6",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
@@ -15273,6 +15282,14 @@
        "makeerror": "1.0.x"
      }
    },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "watchpack": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
    "react-google-login": "^5.0.7",
    "react-grid-system": "^4.4.11",
    "react-icons": "^3.8.0",
+    "react-input-mask": "^2.0.4",
    "react-recaptcha": "^2.3.10",
    "react-responsive-carousel": "^3.1.51",
    "react-router-dom": "^5.1.2",

--- a/src/App.js
+++ b/src/App.js
@@ -32,6 +32,8 @@ import TabResoursePub from './Pages/TabsHelp/TabResoursePub';
 import TabResourseFind from './Pages/TabsHelp/TabResourseFind';
 import TabNetPart from './Pages/TabsHelp/TabNetPart';
 import TabManageAc from './Pages/TabsHelp/TabManageAc';
+import PasswordRecoveryPage from './Pages/PasswordRecoveryPage.js'
+import PageProfessor from './Pages/PageProfessor.js'
 import ResourcePage from './Pages/ResourcePage';
 import {BrowserRouter, Switch, Route} from 'react-router-dom';
 import { Store } from './Store'
@@ -39,6 +41,7 @@ import TermsPage from './Pages/TermsPage.js'
 import PublicationPermissionsPage from './Pages/PublicationPermissionsPage.js'
 import TabPlataformaMEC from './Pages/TabsHelp/TabPlataformaMEC';
+import EditProfilePage from './Pages/EditProfilePage.js'
 export default function App(){
  // eslint-disable-next-line
@@ -74,12 +77,13 @@ export default function App(){
    <BrowserRouter>
      <Header />
      <div style={{backgroundImage: "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)", height:"5px"}}></div>
+      <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
      <Switch>
        <Route path="/" exact={true} component={Home}/>
        <Route path="/busca" component={Search} />
-        <Route path="/perfil-atualizacoes" component={UserPage} />
+        <Route path="/perfil" component={UserPage} />
+        <Route path="/editarperfil" component={EditProfilePage} />
        <Route path="/recurso" component={ResourcePage}/>
        <Route path="/termos-publicar-recurso" component={TermsPage}/>
        <Route path="/permission" component={PublicationPermissionsPage}/>
        {/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
@@ -93,7 +97,8 @@ export default function App(){
        <Route path="/participando-da-rede" component={TabNetPart}/>
        <Route path="/gerenciando-conta" component={TabManageAc}/>
        <Route path="/plataforma-mec" component={TabPlataformaMEC}/>
+        <Route path="/recuperar-senha" component={PasswordRecoveryPage}/>
+        <Route path='/professor' component={PageProfessor}/>
      </Switch>
      <EcFooter/>
      <GNUAGPLfooter/>

--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -16,183 +16,263 @@ 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 React, { Component } from "react";
-import axios from 'axios';
+import axios from "axios";
-import {apiUrl} from '../env';
+import { apiUrl } from "../env";
-import './carousel.css';
+import "./carousel.css";
-import {Col,Row, Container, Hidden, Visible} from 'react-grid-system';
+import { Col, Row, Container, Hidden, Visible } from "react-grid-system";
-import ResourceCard from './ResourceCard';
+import ResourceCard from "./ResourceCard";
-import MaterialCard from './MaterialCard';
+import MaterialCard from "./MaterialCard";
-import CollectionCard from './CollectionCard';
+import CollectionCard from "./CollectionCard";
 import "react-responsive-carousel/lib/styles/carousel.min.css";
-import { Carousel } from 'react-responsive-carousel';
+import { Carousel } from "react-responsive-carousel";
 import recursos from "../img/ilustra_recursos_digitais.png";
 import materiais from "../img/ilustra_materiais.png";
 import colecoes from "../img/ilustra_colecoes.png";
-const areaStyle={
+import Grid from "@material-ui/core/Grid";
+const areaStyle = {
  paddingTop: "5px",
  fontSize: "16px",
-  textAlign:"left",
+  textAlign: "left",
  backgroundColor: "inherit",
-  width: "700px",
+  width: "1000px",
+  margin: "auto",
  padding: "20px",
-  minHeight: "150px"
+  minHeight: "190px"
-}
+};
-class ReqResources extends Component{
+class ReqResources extends Component {
-  constructor(props){
+  constructor(props) {
    super(props);
    this.state = {
-      resources: [],
+      resources: []
    };
  }
-  componentDidMount(){
+  componentDidMount() {
-    axios.get(`${apiUrl}/learning_objects?limit=12&sort=["published_at", "desc"]`)
+    axios
-    .then(res=> {
+      .get(`${apiUrl}/learning_objects?limit=12&sort=["published_at", "desc"]`)
-      this.setState({resources: res.data});
+      .then(res => {
-      console.log(res.data);
+        this.setState({ resources: res.data });
-    });
+        console.log(res.data);
+      });
  }
-  render(){
+  render() {
-      var row1 = this.state.resources.slice(0, 4);
+    var row1 = this.state.resources.slice(0, 4);
-      var row2 = this.state.resources.slice(4, 8);
+    var row2 = this.state.resources.slice(4, 8);
-      var row3 = this.state.resources.slice(8, 13);
+    var row3 = this.state.resources.slice(8, 13);
-    return(
+    return (
      <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
-      <Row style={{paddingBottom: "5px"}}>
+        <Row style={{ paddingBottom: "5px" }}>
-      {row1.map(card => <Col md={3} sm={6} key={card.id}>
+          {row1.map(card => (
-        <ResourceCard name={card.name}
+            <Col md={3} sm={6} key={card.id}>
-                      rating={card.score}
+              <ResourceCard
-                      type={card.object_type}
+                name={card.name}
-                      description={card.description}
+                rating={card.score}
-                      thumbnail={card.thumbnail}
+                type={card.object_type}
-                      author={card.author}
+                description={card.description}
-                      avatar={card.publisher.avatar}
+                thumbnail={card.thumbnail}
-                      /></Col>)}
+                author={card.author}
-      </Row>
+                avatar={card.publisher.avatar}
-      <Row>
+              />
-      {row2.map(card => <Col md={3} sm={6} key={card.id}>
+            </Col>
-        <ResourceCard name={card.name}
+          ))}
-                      rating={card.score}
+        </Row>
-                      type={card.object_type}
+        <Row>
-                      description={card.description}
+          {row2.map(card => (
-                      thumbnail={card.thumbnail}
+            <Col md={3} sm={6} key={card.id}>
-                      author={card.author}
+              <ResourceCard
-                      avatar={card.publisher.avatar}
+                name={card.name}
-                      /></Col>)}
+                rating={card.score}
-      </Row>
+                type={card.object_type}
-      <Row>
+                description={card.description}
-      {row3.map(card => <Col md={3} sm={6} key={card.id}>
+                thumbnail={card.thumbnail}
-        <ResourceCard name={card.name}
+                author={card.author}
-                      rating={card.score}
+                avatar={card.publisher.avatar}
-                      type={card.object_type}
+              />
-                      description={card.description}
+            </Col>
-                      thumbnail={card.thumbnail}
+          ))}
-                      author={card.author}
+        </Row>
-                      avatar={card.publisher.avatar}
+        <Row>
-                      /></Col>)}
+          {row3.map(card => (
-      </Row>
+            <Col md={3} sm={6} key={card.id}>
-    </Carousel>
+              <ResourceCard
-    )
+                name={card.name}
+                rating={card.score}
+                type={card.object_type}
+                description={card.description}
+                thumbnail={card.thumbnail}
+                author={card.author}
+                avatar={card.publisher.avatar}
+              />
+            </Col>
+          ))}
+        </Row>
+      </Carousel>
+    );
  }
 }
-class ReqCollections extends Component{
+class ReqCollections extends Component {
-  constructor(props){
+  constructor(props) {
    super(props);
-    this.state ={
+    this.state = {
-      collections: [],
+      collections: []
    };
  }
-  componentDidMount(){
+  componentDidMount() {
-    axios.get(`${apiUrl}/collections?limit=12&sort=["updated_at", "desc"]`)
+    axios
-    .then(res=>{this.setState({collections: res.data});
+      .get(`${apiUrl}/collections?limit=12&sort=["updated_at", "desc"]`)
-    console.log(res.data);
+      .then(res => {
-  });
+        this.setState({ collections: res.data });
+        console.log(res.data);
+      });
  }
-  render(){
+  render() {
-      var row1 = this.state.collections.slice(0, 4);
+    var row1 = this.state.collections.slice(0, 4);
-      var row2 = this.state.collections.slice(4, 8);
+    var row2 = this.state.collections.slice(4, 8);
-      var row3 = this.state.collections.slice(8, 13);
+    var row3 = this.state.collections.slice(8, 13);
-    return(
+    return (
      <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
-      <Row style={{paddingBottom: "5px"}}>
+        <Row style={{ paddingBottom: "5px" }}>
-      {row1.map(card => <Col md={3} sm={6} key={card.id}>
+          {row1.map(card => (
-        <CollectionCard name={card.name}
+            <Col md={3} sm={6} key={card.id}>
-                        rating={card.score}
+              <CollectionCard
-                        author={card.owner.name}
+                name={card.name}
-                        description={card.description}
+                rating={card.score}
-                        thumbnail={card.items_thumbnails}
+                author={card.owner.name}
-                        avatar={card.owner.avatar}/></Col>)}
+                description={card.description}
-      </Row>
+                thumbnail={card.items_thumbnails}
-      <Row>
+                avatar={card.owner.avatar}
-      {row2.map(card => <Col md={3} sm={6} key={card.id}>
+              />
-        <CollectionCard name={card.name}
+            </Col>
-                        rating={card.score}
+          ))}
-                        author={card.owner.name}
+        </Row>
-                        description={card.description}
+        <Row>
-                        thumbnail={card.items_thumbnails}
+          {row2.map(card => (
-                        avatar={card.owner.avatar}/></Col>)}
+            <Col md={3} sm={6} key={card.id}>
-      </Row>
+              <CollectionCard
-      <Row>
+                name={card.name}
-      {row3.map(card => <Col md={3} sm={6} key={card.id}>
+                rating={card.score}
-        <CollectionCard name={card.name}
+                author={card.owner.name}
-                        rating={card.score}
+                description={card.description}
-                        author={card.owner.name}
+                thumbnail={card.items_thumbnails}
-                        description={card.description}
+                avatar={card.owner.avatar}
-                        thumbnail={card.items_thumbnails}
+              />
-                        avatar={card.owner.avatar}/></Col>)}
+            </Col>
-      </Row>
+          ))}
-    </Carousel>
+        </Row>
-    )
+        <Row>
+          {row3.map(card => (
+            <Col md={3} sm={6} key={card.id}>
+              <CollectionCard
+                name={card.name}
+                rating={card.score}
+                author={card.owner.name}
+                description={card.description}
+                thumbnail={card.items_thumbnails}
+                avatar={card.owner.avatar}
+              />
+            </Col>
+          ))}
+        </Row>
+      </Carousel>
+    );
  }
 }
-class SubPages extends Component{
+class SubPages extends Component {
-  areaRender(){
+  areaRender() {
-    switch(this.props.banner){
+    switch (this.props.banner) {
-    case "Recursos":
+      case "Recursos":
-      return(
+        return (
-      <React.Fragment>
+          <React.Fragment>
-          <div style={{backgroundColor: "#ff7f00"}}>
+            <div style={{ backgroundColor: "#ff7f00" }}>
              <Container style={areaStyle}>
-                <img src={recursos}  alt="aba recursos" height="100" style={{float: "left"}}/>
+                <Grid container style={{ display: "flex" }} spacing={5}>
-                <p>Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é,
+                  <Grid item xs={3}>
-                a vídeos, animações e a outros recursos destinados à educação. São Recursos
+                    <img
-                de portais parceiros do MEC e de professores que, como você, atuam na
+                      src={recursos}
-                Educação Básica!</p>
+                      alt="aba recursos"
+                      height="155"
+                      style={{ float: "right" }}
+                    />
+                  </Grid>
+                  <Grid item xs={9}>
+                    <p style={{ textAlign: "justify", color: "#fff" }}>
+                      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!
+                    </p>
+                  </Grid>
+                </Grid>
              </Container>
            </div>
-            <Container style={{padding:"20px"}}>
+            <Container style={{ padding: "20px" }}>
-              <p style={{paddingBottom:"5px", borderBottom: "1px solid #ff7f00", color: "#ff7f00"}}>
+              <p
-                Recursos mais recentes </p>
+                style={{
+                  paddingBottom: "5px",
+                  borderBottom: "1px solid #ff7f00",
+                  color: "#ff7f00"
+                }}
+              >
+                Recursos mais recentes{" "}
+              </p>
              <Hidden sm xs>
-                <ReqResources/>
+                <ReqResources />
              </Hidden>
              <Visible sm xs>
-                <ReqResources/>
+                <ReqResources />
              </Visible>
            </Container>
          </React.Fragment>
-      );
+        );
-    case "Materiais":
+      case "Materiais":
-      return (
+        return (
-        <React.Fragment>
+          <React.Fragment>
-            <div style={{backgroundColor: "#e81f4f"}}>
+            <div style={{ backgroundColor: "#e81f4f" }}>
-                <Container style={areaStyle}>
+              <Container style={areaStyle}>
-                  <img src={materiais} alt="aba materiais" height="100" style={{float: "left"}}/>
+                <Grid container spacing={5}>
-                  <p>Nesta área, você acessa livremente materiais completos de formação,
+                  <Grid item xs={3}>
-                  como cursos já oferecidos pelo MEC e seus parceiros. São conteúdos
+                    <img
-                  elaborados por equipes multidisciplinares e de autoria de pesquisadores
+                      src={materiais}
-                  e educadores renomados nas áreas.</p>
+                      alt="aba materiais"
-                </Container>
+                      height="165"
-              </div>
+                      style={{ float: "right" }}
-              <Container style={{padding:"20px"}}>
+                    />
-                <p style={{paddingBottom:"5px", borderBottom: "1px solid #e81f4f", color: "#e81f4f"}}>
+                  </Grid>
-                  Materiais mais recentes </p>
+                  <Grid item xs={9}>
+                    <p style={{ textAlign: "justify", color: "#fff" }}>
+                      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.
+                    </p>
+                  </Grid>
+                </Grid>
+              </Container>
+            </div>
+            <Container style={{ padding: "20px" }}>
+              <p
+                style={{
+                  paddingBottom: "5px",
+                  borderBottom: "1px solid #e81f4f",
+                  color: "#e81f4f"
+                }}
+              >
+                Materiais mais recentes{" "}
+              </p>
-                <Carousel style={{padding: "20px"}}showThumbs={false} infiniteLoop={true} showStatus={false}>
+              <Carousel
-                  <Row>
+                style={{ padding: "20px" }}
+                showThumbs={false}
+                infiniteLoop={true}
+                showStatus={false}
+              >
+                <Row>
                  <Col md={3}>
                    <MaterialCard name="oioi" />
                  </Col>
@@ -205,40 +285,57 @@ class SubPages extends Component{
                  <Col md={3}>
                    <MaterialCard name="oioi" />
                  </Col>
-                  </Row>
+                </Row>
-                  </Carousel>
+              </Carousel>
-              </Container>
+            </Container>
-        </React.Fragment>
+          </React.Fragment>
-      );
+        );
-    case "Colecoes":
+      case "Colecoes":
-      return (
+        return (
-        <React.Fragment>
+          <React.Fragment>
-            <div style={{backgroundColor: "#673ab7"}}>
+            <div style={{ backgroundColor: "#673ab7" }}>
              <Container style={areaStyle}>
-                <img src={colecoes} alt="aba coleções" height="100" style={{float: "left"}}/>
+                <Grid container spacing={5}>
-                <p>Nesta área, você tem acesso às coleções criadas e organizadas
+                  <Grid item xs={3}>
-                pelos usuários da plataforma. É mais uma possibilidade de buscar
+                    <img
-                recursos educacionais para sua aula!</p>
+                      src={colecoes}
+                      alt="aba coleções"
+                      width="180"
+                      style={{ float: "right" }}
+                    />
+                  </Grid>
+                  <Grid item xs={9}>
+                    <p style={{ textAlign: "justify", color: "#fff" }}>
+                      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!
+                    </p>
+                  </Grid>
+                </Grid>
              </Container>
            </div>
-            <Container style={{padding:"20px"}}>
+            <Container style={{ padding: "20px" }}>
-              <p style={{paddingBottom:"5px", borderBottom: "1px solid #673ab7", color: "#673ab7"}}>
+              <p
-                Coleções mais recentes </p>
+                style={{
-                <ReqCollections/>
+                  paddingBottom: "5px",
+                  borderBottom: "1px solid #673ab7",
+                  color: "#673ab7"
+                }}
+              >
+                Coleções mais recentes{" "}
+              </p>
+              <ReqCollections />
            </Container>
-        </React.Fragment>
+          </React.Fragment>
-          );
+        );
-    default:
+      default:
-      return null
+        return null;
    }
  }
-  render(){
+  render() {
-    return(
+    return <div>{this.areaRender()}</div>;
-      <div>
+  }
-      {this.areaRender()}
-      </div>
-  );
-}
 }
 export default SubPages;
--- a/src/Components/Checkbox.js
+++ b/src/Components/Checkbox.js
@@ -25,10 +25,9 @@ const StyledFormControlLabel = styled(FormControlLabel)`
    .label {
        font-size : 12px !important;
    }
-`
+    .MuiCheckbox-colorSecondary.Mui-checked {
+        color : #00bcd4 !important;
-const StyledCheckbox = styled(Checkbox)`
+    }
-    color : #00bcd4 !important;
 `
 export default function LabeledCheckbox(props) {
@@ -36,8 +35,7 @@ export default function LabeledCheckbox(props) {
  return (
      <StyledFormControlLabel
        control={
-          <StyledCheckbox
+          <Checkbox
-            disabled = {props.disabledCheckbox}
            value = {props.checked}
            onChange = {props.handleChange}
          />

--- a/src/Components/ColaborarModal.js
+++ b/src/Components/ColaborarModal.js
-import React, {useContext} from 'react';
+import React, {useContext, useState} from 'react';
 import Modal from '@material-ui/core/Modal';
 import Fade from '@material-ui/core/Fade';
 import styled from 'styled-components'
@@ -9,7 +9,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import LabeledCheckbox from "../Components/Checkbox.js"
 const StyledDivContainer = styled.div`
-    background-color : rgb(255,255,255);;
+    background-color : rgb(255,255,255);
    border-radius : 4px;
    border-shadow : #000;
    color : rgb(102,102,102);
@@ -25,7 +25,7 @@ const StyledDivHeader = styled.div`
    text-align : center;
    display : flex;
    justify-content : space-between;
-    padding : 10px 58px 0 58px;
+    padding : 10px 26px 0 26px;
    color : #666;
    font-size : 40px;
    font-weight : 400;
@@ -34,7 +34,7 @@ const StyledDivHeader = styled.div`
 `
 const StyledDivDialogContent = styled.div`
-    padding : 20px 30px;
+    padding : 20px 0;
 `
 const StyledButtonsDiv = styled.div`
@@ -45,6 +45,7 @@ const StyledButtonsDiv = styled.div`
 const StyledButton = styled(Button)`
    background-color : #00acc1 !important;
+    width : 45%
 `
 const StyledH2 = styled.h2`
@@ -77,6 +78,8 @@ const Styledspan = styled.span`
 export default function ColaborarModal (props) {
    const {state, dispatch} = useContext(Store)
+    const [checkbox, controlCheckbox] = useState(false)
+    const handleCheckbox = () => controlCheckbox(!checkbox)
    return (
        <StyledModal
@@ -95,6 +98,7 @@ export default function ColaborarModal (props) {
            <Fade in={props.open}>
                <StyledDivContainer>
                    <StyledDivHeader>
+                    <span style={{width:"32px"}}/>
                        <StyledH2>
                            Você é professor(a), da educação básica, e gostaria de colaborar com a Plataforma?
                        </StyledH2>
@@ -111,7 +115,7 @@ export default function ColaborarModal (props) {
                            }}
                                >
                                <div style={{maxWidth:"350px", marginRight:"0", marginLeft:"auto", color:"#666"}}>
-                                    <p style={{textAlign:"start", fontSize:"15px", margin:"0 0 10"}}>
+                                    <p style={{textAlign:"justify", fontSize:"15px", margin:"0 0 10"}}>
                                        Ao ser identificado como professor(a), você poderá
                                        <span style={{color:"#00bcd4"}}> publicar e compartilhar recursos educacionais digitais </span>
                                         na plataforma com toda a comunidade escolar do país.
@@ -126,7 +130,7 @@ export default function ColaborarModal (props) {
                                    </StyledButtonsDiv>
                                </div>
                                <div style={{display:"flex", alignItems:"flex-start"}}>
-                                <LabeledCheckbox label={<Styledspan>Não perguntar novamente</Styledspan>} />
+                                <LabeledCheckbox label={<Styledspan>Não perguntar novamente!</Styledspan>} checked={checkbox} handleChange={handleCheckbox}/>
                                </div>
                            </StyledDivContentInformation>
                        </StyledDivDialogContent>

--- a/src/Components/ComponentAlterarAvatar.js
+++ b/src/Components/ComponentAlterarAvatar.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,Component} from 'react';
+import { Button } from '@material-ui/core';
+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 {Store} from '../Store.js'
+import axios from 'axios'
+import {apiUrl} from '../env';
+import CloseIcon from '@material-ui/icons/Close';
+import Profile from '../img/default_profile0.png'
+const ChangeAvatarDiv = styled.div`
+    color : rgba(255,255,255,.7);
+    background-color:rgba(0,0,0,.5);
+    position: absolute;
+    bottom: 0;
+    width: inherit;
+    text-align: center;
+    font-size: 18px;
+    padding-bottom: 5px;
+    font-weight: 400;
+    height: 30%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`
+const ModalDiv = styled.div`
+    background-color : #fff;
+    border-radius : 4px;
+    min-width : 560px;
+    color : #666;
+    display: flex;
+    flex-direction : column;
+`
+const StyledButtonConfirmar = styled(Button)`
+    background-color : #00acc1 !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;
+    align-items: center !important;
+    text-align: center !important;
+    border-radius: 4px !important;
+    box-sizing: border-box !important;
+    user-select: none !important;
+    border: 0 !important;
+    padding: 0 6px !important;
+    margin: 6px 8px !important;
+    background: transparent !important;
+    background-color: transparent !important;
+    color: currentColor !important;
+    white-space: nowrap !important;
+    text-transform: uppercase !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;
+`
+const ButtonCancelar = styled(Button)`
+    outline : none !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;
+    align-items: center !important;
+    text-align: center !important;
+    border-radius: 3px !important;
+    box-sizing: border-box !important;
+    user-select: none !important;
+    border: 0 !important;
+    padding: 0 6px !important;
+    margin: 6px 8px !important;
+    background:transparent !important;
+    color: currentColor !important;
+    white-space: nowrap !important;
+    text-transform: uppercase !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;
+`
+const ButtonsDiv = styled.div`
+    display : flex;
+    justify-content:flex-end;
+`
+const AvatarCircleDiv = styled.div`
+    margin-bottom : 0;
+    border-radius : 50%;
+    height : 150px;
+    width : 150px;
+    position : relative;
+    overflow: hidden;
+`
+const DivFlowHolder =styled.div`
+    align-self : auto;
+`
+const DivAlterarFoto = styled.div`
+    display : flex;
+    margin-bottom : 30px;
+    flex-direction : row;
+    align-items : center;
+    justify-content :center;
+`
+const DialogDiv = styled.div`
+    padding : 20px 30px;
+    overflow : visible !important;
+`
+const HeaderDiv = styled.div`
+    display : flex;
+    flex-direction : row;
+    align-items : center;
+    align-content : center;
+    justify-content : center;
+    max-width : 100%;
+`
+const StyledH2 = styled.h2`
+    font-size : 26px;
+    font-weight : lighter;
+    margin-top : 20px;
+    margin-bottom : 10px;
+    font-family: inherit;
+    line-height: 1.1;
+    color: inherit;
+`
+const StyledCloseModalButton = styled(Button)`
+    display : inline-block;
+    position : relative;
+    float : right !important;
+    margin-right : -8px !important;
+    background : transparent !important;
+    min-width: 0 !important;
+    width : 40px;
+    border-radius : 50%;
+    padding : 8px;
+    height : 40px;
+    margin : 0 6px;
+`
+export default function ComponentAlterarAvatar (props) {
+        return (
+            <ModalDiv style={{maxWidth:"500px", maxHeight:"500px"}}>
+            <HeaderDiv>
+                <span style={{width:"32px"}}/>
+                    <StyledH2>Editar Foto</StyledH2>
+                    <StyledCloseModalButton onClick={props.handleClose}>
+                        <CloseIcon/>
+                    </StyledCloseModalButton>
+            </HeaderDiv>
+            <DialogDiv>
+                <div style={{marginTop:"0"}}>
+                    <form>
+                        <DivAlterarFoto>
+                            <DivFlowHolder>
+                                <AvatarCircleDiv>
+                                    {
+                                        props.userAvatar == '' || props.userAvatar == null ?
+                                        (
+                                            <img src={Profile} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
+                                        ):
+                                        (
+                                            <img src={this.props.userAvatar} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
+                                        )
+                                    }
+                                    <input accept="image/*" id="icon-button-file"
+                                    type="file"
+                                    onChange={(e) => props.handleFile(e.target.files) }
+                                    style={{display:"none"}}/>
+                                    <label for="icon-button-file" style={{width:"inherit"}}>
+                                        <ChangeAvatarDiv >
+                                            <span>Alterar</span>
+                                        </ChangeAvatarDiv>
+                                    </label>
+                                </AvatarCircleDiv>
+                            </DivFlowHolder>
+                        </DivAlterarFoto>
+                        <ButtonsDiv>
+                            <ButtonCancelar onClick={props.handleClose}><span>Cancelar</span></ButtonCancelar><StyledButtonConfirmar><span>Salvar Alterações</span></StyledButtonConfirmar>
+                        </ButtonsDiv>
+                    </form>
+                </div>
+            </DialogDiv>
+            </ModalDiv>
+        )
+}
--- a/src/Components/ContactForm.js
+++ b/src/Components/ContactForm.js
@@ -18,8 +18,6 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 import React, { Component, useState, useEffect } from 'react';
 import styled from 'styled-components';
-import Banner1 from '../img/banner-sobre.jpg';
-import { TextField } from '@material-ui/core';
 import FormInput from "../Components/FormInput.js"
 import axios from 'axios'
 import {apiUrl} from '../env';

--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -16,60 +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 from 'react';
+import React from "react";
-import {makeStyles} from '@material-ui/styles';
+import { makeStyles } from "@material-ui/styles";
-import styled from 'styled-components'
+import styled from "styled-components";
-import TextField from '@material-ui/core/TextField';
+import TextField from "@material-ui/core/TextField";
 const StyledTextField = styled(TextField)`
-    max-width: 100%;
+  max-width: 100%;
-    font-size : 15px;
+  font-size: 15px;
-    font-weight : lighter;
+  font-weight: lighter;
-    color : inherit;
+  color: inherit;
-    width : 100% !important;
+  width: 100% !important;
-    full-width : 100% !important;
+  full-width: 100% !important;
-`
+`;
 const useStyles = makeStyles(theme => ({
  container: {
-    display: 'flex',
+    display: "flex",
-    flexWrap: 'wrap',
+    flexWrap: "wrap",
-    padding: '2px',
+    padding: "2px"
  },
  textField: {
+    maxWidth: "100%",
-    maxWidth: '100%',
+    fontSize: "15px",
-    fontSize : '15px',
+    fontWeight: "lighter",
-    fontWeight : 'lighter',
+    color: "inherit",
-    color : 'inherit',
+    width: "100%"
-    width : '100%',
+  }
-  },
 }));
 export default function FormInput(props) {
  const classes = useStyles();
  return (
+    <StyledTextField
+      id="standard-basic"
-        <StyledTextField
+      label={props.placeholder}
-          id="standard-basic"
+      margin="normal"
-          label={props.placeholder}
+      id={props.name}
-          margin="normal"
+      name={props.name}
-          id = {props.name}
+      type={props.inputType}
-          name = {props.name}
+      value={props.value}
-          type = {props.inputType}
+      onChange={props.handleChange}
-          value = {props.value}
+      helperText={props.help}
-          onChange = {props.handleChange}
+      rows={props.rows}
-          helperText = {props.help}
+      error={props.error}
-          rows = {props.rows}
+      rowsMax={props.rowsMax}
-          error = {props.error}
+      InputProps={{ className: classes.input }}
-          rowsMax = {props.rowsMax}
+      style={{ width: "100%" }}
-          InputProps={{className: classes.input}}
+      multiline={props.multi}
-          style={{width:"100%"}}
+    />
-          multiline = {props.multi}
-        />
  );
 }
--- a/src/Components/FormValidationFunction.js
+++ b/src/Components/FormValidationFunction.js
+import React from 'react'
+//fieldName : form field name
+//userInput : user input for a given field
+//confirmation :  optional password confirmation argument
+export default function ValidateUserInput (fieldName, userInput, confirmation) {
+    let flag = false
+    switch(fieldName) {
+        case('username'):
+            if (userInput.length < 1) {
+                flag = true
+            }
+            break;
+        case('email'):
+            if(userInput.length < 7 || !(userInput.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i))) {
+                flag = true
+            }
+            break;
+        case('password'):
+            if (userInput.length < 8) {
+                flag = true
+            }
+            break;
+        case('confirmation'):
+            if (userInput !== confirmation) {
+                flag = true
+            }
+            break;
+        case('message'):
+            if(userInput.length === 0) {
+                flag = true
+            }
+            break;
+        case('aboutMe'):
+            if(userInput.length > 160) {
+                flag = true
+            }
+            break;
+        default:
+            break;
+    }
+    return flag
+}
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -25,16 +25,32 @@ import SignUpModal from './SignUpModal'
 import LoginModal from './LoginModal'
 import { Store } from '../Store';
 import ColaborarModal from './ColaborarModal.js'
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
 //const StyledButton = styled(Button)`
 //    background : #ffa54c !important;
 //    boxShadow :none;
 //`
+function Alert(props) {
+  return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
 export default function Header(props){
  const { state, dispatch } = useContext(Store)
  const [signUpOpen, setSignUp] = useState(false)
  const [loginOpen, setLogin] = useState(false)
+  const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+  const [modalColaborar, setModalColaborar] = useState(false)
+  const toggleSnackbar = (event, reason) => {
+      if (reason === 'clickaway') {
+          return;
+      }
+      handleSuccessfulLogin(false);
+  }
  const handleSignUp = () => {
      setSignUp(!signUpOpen)
@@ -54,13 +70,18 @@ export default function Header(props){
  return(
      <>
          <AcessibilityBar/>
+          <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
+          anchorOrigin = {{ vertical:'top', horizontal:'middle' }}
+          >
+              <Alert severity="success" style={{backgroundColor:"#00acc1"}}>Você está conectado(a)!</Alert>
+          </Snackbar>
          <MenuBar openSearchBar={handleClickSearch} openSignUp = {handleSignUp} openLogin = {handleLogin}/>
          {   state.searchOpen &&
              <SearchBar/>
          }
          <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}/>
-          <LoginModal open={loginOpen} handleClose={handleLogin} openSignUp={handleSignUp}/>
+          <LoginModal open={loginOpen} handleClose={handleLogin} openSignUp={handleSignUp} openSnackbar = {() => {handleSuccessfulLogin(true)}}/>
-          {/*<ColaborarModal open={state.modalColaborarPlataformaOpen} handleClose={handleKyloren} />*/}
+          <ColaborarModal open={modalColaborar} handleClose={() => {setModalColaborar(!modalColaborar)}} />
      </>
  )

--- a/src/Components/HelpCenter/Cards/CardEncontrando.js
+++ b/src/Components/HelpCenter/Cards/CardEncontrando.js
@@ -16,42 +16,57 @@ 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, useState, useEffect } from 'react';
+import React from "react";
-import styled from 'styled-components';
+import styled from "styled-components";
-import EncontrandoRecurso from '../../../img/ajuda/Encontrando_recursos.png';
+import EncontrandoRecurso from "../../../img/ajuda/Encontrando_recursos.png";
-import  { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 export default function CardEncontrando(props) {
-  return(
+  return (
    <CardAjuda>
      <div className="card">
        <img src={EncontrandoRecurso} alt="" />
        <h3>Encontrando Recursos</h3>
-        <hr/>
+        <hr />
-        <Link to={{
+        <Link
-          pathname : 'encontrando-recurso',
+          to={{
-          state : {value : '0'}
+            pathname: "encontrando-recurso",
-        }}>Como fazer uma busca?</Link>
+            state: { value: "0" }
-        <br/>
+          }}
-        <Link to={{
+        >
-          pathname : 'encontrando-recurso',
+          Como fazer uma busca?
-          state : {value : '1'}
+        </Link>
-        }}>Como filtrar os resultados?</Link>
+        <br />
+        <Link
+          to={{
+            pathname: "encontrando-recurso",
+            state: { value: "1" }
+          }}
+        >
+          Como filtrar os resultados?
+        </Link>
        <a></a>
-        <br/>
+        <br />
-        <Link to={{
+        <Link
-          pathname : 'encontrando-recurso',
+          to={{
-          state : {value : '2'}
+            pathname: "encontrando-recurso",
-        }}>Como os recursos são ranqueados?</Link>
+            state: { value: "2" }
-        <br/>
+          }}
+        >
+          Como os recursos são ranqueados?
+        </Link>
+        <br />
      </div>
      <div className="card-rodape">
-      <Link to={{
+        <Link
-          pathname : 'encontrando-recurso',
+          to={{
-          state : {value : '0'}
+            pathname: "encontrando-recurso",
-        }}>VER MAIS</Link>
+            state: { value: "0" }
+          }}
+        >
+          VER MAIS
+        </Link>
      </div>
    </CardAjuda>
  );
@@ -60,7 +75,7 @@ export default function CardEncontrando(props) {
 const CardAjuda = styled.div`
  height: 360px;
-  margin-bottom: 20px
+  margin-bottom: 20px;
  .card {
@@ -72,7 +87,7 @@ const CardAjuda = styled.div`
    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    h3 {
-      font-size: 24px;
+      font-size: 23px;
      font-weight: 400;
      color: #666;
      margin-top: 20px;
@@ -138,4 +153,4 @@ const CardAjuda = styled.div`
 }
-`
+`;
\ No newline at end of file
--- a/src/Components/HelpCenter/Cards/CardGerenciando.js
+++ b/src/Components/HelpCenter/Cards/CardGerenciando.js
@@ -16,51 +16,74 @@ 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, useState, useEffect } from 'react';
+import React from "react";
-import styled from 'styled-components';
+import styled from "styled-components";
-import GerenciandoConta from '../../../img/ajuda/Gerenciando_a_conta.png';
+import GerenciandoConta from "../../../img/ajuda/Gerenciando_a_conta.png";
-import  { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 export default function CardGerenciando(props) {
-  return(
+  return (
    <CardAjuda>
      <div className="card">
        <img src={GerenciandoConta} alt="" />
        <h3>Gerenciando Conta</h3>
-        <hr/>
+        <hr />
-        <Link to={{
+        <Link
-          pathname : 'gerenciando-conta',
+          to={{
-          state : {value : '0'}
+            pathname: "gerenciando-conta",
-        }}>Por que me cadastrar?</Link>
+            state: { value: "0" }
-        <br/>
+          }}
-        <Link to={{
+        >
-          pathname : 'gerenciando-conta',
+          Por que me cadastrar?
-          state : {value : '1'}
+        </Link>
-        }}>Como fazer meu cadastro?</Link>
+        <br />
-        <br/>
+        <Link
-        <Link to={{
+          to={{
-          pathname : 'gerenciando-conta',
+            pathname: "gerenciando-conta",
-          state : {value : '2'}
+            state: { value: "1" }
-        }}>Como alterar minha senha?</Link>
+          }}
-        <br/>
+        >
-        <Link to={{
+          Como fazer meu cadastro?
-          pathname : 'gerenciando-conta',
+        </Link>
-          state : {value : '3'}
+        <br />
-        }}>Como acessar a conta?</Link>
+        <Link
-        <br/>
+          to={{
-        <Link to={{
+            pathname: "gerenciando-conta",
-          pathname : 'gerenciando-conta',
+            state: { value: "2" }
-          state : {value : '4'}
+          }}
-        }}>Esqueci minha senha. O que fazer?</Link>
+        >
-        <br/>
+          Como alterar minha senha?
+        </Link>
+        <br />
+        <Link
+          to={{
+            pathname: "gerenciando-conta",
+            state: { value: "3" }
+          }}
+        >
+          Como acessar a conta?
+        </Link>
+        <br />
+        <Link
+          to={{
+            pathname: "gerenciando-conta",
+            state: { value: "4" }
+          }}
+        >
+          Esqueci minha senha. O que fazer?
+        </Link>
+        <br />
      </div>
      <div className="card-rodape">
-        <Link to={{
+        <Link
-            pathname : 'gerenciando-conta',
+          to={{
-            state : {value : '0'}
+            pathname: "gerenciando-conta",
-        }}>VER MAIS</Link>
+            state: { value: "0" }
+          }}
+        >
+          VER MAIS
+        </Link>
      </div>
    </CardAjuda>
  );
@@ -69,7 +92,7 @@ export default function CardGerenciando(props) {
 const CardAjuda = styled.div`
  height: 360px;
-  margin-bottom: 20px
+  margin-bottom: 20px;
  .card {
@@ -81,7 +104,7 @@ const CardAjuda = styled.div`
    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    h3 {
-      font-size: 24px;
+      font-size: 23px;
      font-weight: 400;
      color: #666;
      margin-top: 20px;
@@ -147,4 +170,4 @@ const CardAjuda = styled.div`
 }
-`
+`;
\ No newline at end of file
--- a/src/Components/HelpCenter/Cards/CardParticipando.js
+++ b/src/Components/HelpCenter/Cards/CardParticipando.js
@@ -16,36 +16,47 @@ 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, useState, useEffect } from 'react';
+import React from "react";
-import styled from 'styled-components';
+import styled from "styled-components";
-import ParticipandoRede from '../../../img/ajuda/Participando_da_rede.png';
+import ParticipandoRede from "../../../img/ajuda/Participando_da_rede.png";
-import  { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 export default function CardParticipando(props) {
-  return(
+  return (
    <CardAjuda>
      <div className="card">
        <img src={ParticipandoRede} alt="" />
        <h3>Participando da Rede</h3>
-        <hr/>
+        <hr />
-        <Link to={{
+        <Link
-          pathname : 'participando-da-rede',
+          to={{
-          state : {value : '0'}
+            pathname: "participando-da-rede",
-        }}>Comentanto os recursos</Link>
+            state: { value: "0" }
-        <br/>
+          }}
-        <Link to={{
+        >
-          pathname : 'participando-da-rede',
+          Comentanto os recursos
-          state : {value : '1'}
+        </Link>
-        }}>Como relatar uma experiência ou avaliar um recurso?</Link>
+        <br />
-        <br/>
+        <Link
+          to={{
+            pathname: "participando-da-rede",
+            state: { value: "1" }
+          }}
+        >
+          Como relatar uma experiência ou avaliar um recurso?
+        </Link>
+        <br />
      </div>
      <div className="card-rodape">
-        <Link to={{
+        <Link
-            pathname : 'participando-da-rede',
+          to={{
-            state : {value : '0'}
+            pathname: "participando-da-rede",
-        }}>VER MAIS</Link>
+            state: { value: "0" }
+          }}
+        >
+          VER MAIS
+        </Link>
      </div>
    </CardAjuda>
  );
@@ -54,7 +65,7 @@ export default function CardParticipando(props) {
 const CardAjuda = styled.div`
  height: 360px;
-  margin-bottom: 20px
+  margin-bottom: 20px;
  .card {
@@ -66,7 +77,7 @@ const CardAjuda = styled.div`
    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    h3 {
-      font-size: 24px;
+      font-size: 23px;
      font-weight: 400;
      color: #666;
      margin-top: 20px;
@@ -132,4 +143,4 @@ const CardAjuda = styled.div`
 }
-`
+`;
\ No newline at end of file
--- a/src/Components/HelpCenter/Cards/CardPublicando.js
+++ b/src/Components/HelpCenter/Cards/CardPublicando.js
@@ -16,49 +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, { Component, useState, useEffect } from 'react';
+import React from "react";
-import styled from 'styled-components';
+import styled from "styled-components";
-import PublicandoRecursos from '../../../img/ajuda/Publicando_recursos.png';
+import PublicandoRecursos from "../../../img/ajuda/Publicando_recursos.png";
-import  { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 export default function CardPublicando(props) {
-return(
+  return (
-  <CardAjuda>
+    <CardAjuda>
-    <div className="card">
+      <div className="card">
-      <img src={PublicandoRecursos} alt="" />
+        <img src={PublicandoRecursos} alt="" />
-      <h3>Publicando Recursos</h3>
+        <h3>Publicando Recursos</h3>
-      <hr/>
+        <hr />
-      <Link to={{
+        <Link
-        pathname : 'publicando-recurso',
+          to={{
-        state : {value : '0'}
+            pathname: "publicando-recurso",
-      }}>Por que enviar um recurso?</Link>
+            state: { value: "0" }
-      <br/>
+          }}
-      <Link to={{
+        >
-        pathname : 'publicando-recurso',
+          Por que enviar um recurso?
-        state : {value : '1'}
+        </Link>
-      }}>Como publicar um recurso?</Link>
+        <br />
-      <br/>
+        <Link
-      <Link to={{
+          to={{
-        pathname : 'publicando-recurso',
+            pathname: "publicando-recurso",
-        state : {value : '2'}
+            state: { value: "1" }
-      }}>Quais tipos de recurso e formatos a plataforma aceita?</Link>
+          }}
-      <br/>
+        >
-    </div>
+          Como publicar um recurso?
-    <div className="card-rodape">
+        </Link>
-      <Link to={{
+        <br />
-          pathname : 'publicando-recurso',
+        <Link
-          state : {value : '0'}
+          to={{
-      }}>VER MAIS</Link>
+            pathname: "publicando-recurso",
-    </div>
+            state: { value: "2" }
-  </CardAjuda>
+          }}
-);
+        >
+          Quais tipos de recurso e formatos a plataforma aceita?
+        </Link>
+        <br />
+      </div>
+      <div className="card-rodape">
+        <Link
+          to={{
+            pathname: "publicando-recurso",
+            state: { value: "0" }
+          }}
+        >
+          VER MAIS
+        </Link>
+      </div>
+    </CardAjuda>
+  );
 }
 const CardAjuda = styled.div`
 height: 360px;
-margin-bottom: 20px
+margin-bottom: 20px;
 .card {
@@ -70,7 +85,7 @@ margin-bottom: 20px
  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
  h3 {
-    font-size: 24px;
+    font-size: 23px;
    font-weight: 400;
    color: #666;
    margin-top: 20px;
@@ -136,4 +151,4 @@ margin-bottom: 20px
 }
-`
+`;
\ No newline at end of file
--- a/src/Components/HelpCenter/TabsPlataformaMEC/How.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/How.js
@@ -16,31 +16,29 @@ 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, useState, useEffect } from 'react';
+import React from "react";
-import styled from 'styled-components';
+import styled from "styled-components";
 export default function How(props) {
-  return(
+  return (
    <Card>
-      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <link
-      <div style={{marginBottom: "9px"}}>
+        href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
+        rel="stylesheet"
+      />
+      <div style={{ marginBottom: "9px" }}>
        <span>{props.title}</span>
      </div>
-        <div style ={{width:"640px", height: "360px"  }}>
+      <div style={{ width: "640px", height: "360px" }}>
-          <iframe width="640"
+        <iframe
-                  height="360" 
+          width="640"
-                  src="https://www.youtube.com/embed/CRW5h2pHugM" 
+          height="360"
-                  frameborder="0" 
+          src="https://www.youtube.com/embed/CRW5h2pHugM"
-                  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
+          frameborder="0"
-                  allowfullscreen
+          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-          >
+          allowfullscreen
+        ></iframe>
-          </iframe>
+      </div>
-        </div>
    </Card>
  );
 }
@@ -48,7 +46,7 @@ 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);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 30px;
  color: #666;
  span {
@@ -64,8 +62,6 @@ const Card = styled.div`
    }
  }
  ul {
    padding-left: 0 !important;
    margin-top: 0;
@@ -82,7 +78,4 @@ const Card = styled.div`
    margin: 0 0 10px;
    font-size: 15px;
  }
+`;
-`
\ No newline at end of file
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
@@ -16,60 +16,118 @@ 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, useState, useEffect } from 'react';
+import React from "react";
-import styled from 'styled-components';
+import styled from "styled-components";
 const softwares = [
-  { recursos : "Google Chrome" , texto : "Navegador web." , link : "https://ninite.com/chrome/" },
+  {
-  { recursos : "Java" , texto : "Necessário para a execução de sites que utilizem sua linguagem de programação java." , link : "http://javadl.oracle.com/webapps/download/AutoDL?BundleId=225355_090f390dda5b47b9b721c7dfaa008135NINITE: https://ninite.com/java8/" },
+    recursos: "Google Chrome",
-  { recursos : "Adobe Flash Player" , texto : "plugin que reproduz multimídia na internet de forma mais eficiente." , link : "https://get.adobe.com/br/flashplayer/download/?installer=FP_27_for_Opera_and_Chromium_-_PPAPI&os=Windows%207&browser_type=KHTML&browser_dist=Chrome&dualoffer=false&mdualoffer=true&stype=6703&d=McAfee_Security_Scan_Plus&d=McAfee_Safe_Connect" },
+    texto: "Navegador web.",
-  { recursos : "Adobe Air" , texto : "Plugin para execução de códigos para aplicações nativas e jogos para computadores desktop com Windows e Mac OS bem como dispositivos iOS e Android." , link : "https://ninite.com/air/" },
+    link: "https://ninite.com/chrome/"
-  { recursos : "Net Framework" , texto : "O .NET Framework é um ambiente de execução de tempo de execução que gerencia os aplicativos destinados ao .NET Framework." , link : "https://ninite.com/.net4.7/" },
+  },
-  { recursos : "Acrobat Reader DC" , texto : "Abrir documento no formato PDF" , link : "https://ninite.com/foxit/" },
+  {
-  { recursos : "Video LAN" , texto : "REPRODUTOR DE VÍDEO." , link : "http://download.winzip.com/gl/nkln/winzip21_downwz.exe" },
+    recursos: "Java",
-  { recursos : "Winzip" , texto : "WinZip: abrir arquivos compactados." , link : "http://download.winzip.com/gl/nkln/winzip21_downwz.exe" },
+    texto:
-  { recursos : "K-Lite Codec" , texto : "Software que ajuda na reprodução de arquivos multimídia no computador." , link : "https://ninite.com/libreoffice/" },
+      "Necessário para a execução de sites que utilizem sua linguagem de programação java.",
-  { recursos : "Libre Office" , texto : "Software gratuito para visualização e edição de documentos, planilhas e apresentações." , link : "https://ninite.com/libreoffice/" },
+    link:
-  { recursos : "Swiff Player" , texto : "reprodutor de mídia do formato swf" , link : "https://www.w3schools.com/html/" }
+      "http://javadl.oracle.com/webapps/download/AutoDL?BundleId=225355_090f390dda5b47b9b721c7dfaa008135NINITE: https://ninite.com/java8/"
+  },
-]
+  {
+    recursos: "Adobe Flash Player",
+    texto:
+      "plugin que reproduz multimídia na internet de forma mais eficiente.",
+    link:
+      "https://get.adobe.com/br/flashplayer/download/?installer=FP_27_for_Opera_and_Chromium_-_PPAPI&os=Windows%207&browser_type=KHTML&browser_dist=Chrome&dualoffer=false&mdualoffer=true&stype=6703&d=McAfee_Security_Scan_Plus&d=McAfee_Safe_Connect"
+  },
+  {
+    recursos: "Adobe Air",
+    texto:
+      "Plugin para execução de códigos para aplicações nativas e jogos para computadores desktop com Windows e Mac OS bem como dispositivos iOS e Android.",
+    link: "https://ninite.com/air/"
+  },
+  {
+    recursos: "Net Framework",
+    texto:
+      "O .NET Framework é um ambiente de execução de tempo de execução que gerencia os aplicativos destinados ao .NET Framework.",
+    link: "https://ninite.com/.net4.7/"
+  },
+  {
+    recursos: "Acrobat Reader DC",
+    texto: "Abrir documento no formato PDF",
+    link: "https://ninite.com/foxit/"
+  },
+  {
+    recursos: "Video LAN",
+    texto: "REPRODUTOR DE VÍDEO.",
+    link: "http://download.winzip.com/gl/nkln/winzip21_downwz.exe"
+  },
+  {
+    recursos: "Winzip",
+    texto: "WinZip: abrir arquivos compactados.",
+    link: "http://download.winzip.com/gl/nkln/winzip21_downwz.exe"
+  },
+  {
+    recursos: "K-Lite Codec",
+    texto:
+      "Software que ajuda na reprodução de arquivos multimídia no computador.",
+    link: "https://ninite.com/libreoffice/"
+  },
+  {
+    recursos: "Libre Office",
+    texto:
+      "Software gratuito para visualização e edição de documentos, planilhas e apresentações.",
+    link: "https://ninite.com/libreoffice/"
+  },
+  {
+    recursos: "Swiff Player",
+    texto: "reprodutor de mídia do formato swf",
+    link: "https://www.w3schools.com/html/"
+  }
+];
 export default function Software(props) {
-  return(
+  return (
    <Card>
-      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <link
-      <div style={{marginBottom: "9px"}}>
+        href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
+        rel="stylesheet"
+      />
+      <div style={{ marginBottom: "9px" }}>
        <span>{props.title}</span>
      </div>
      <p>
-        Todo e qualquer recurso digital precisa de um programa ou aplicativo para 
+        Todo e qualquer recurso digital precisa de um programa ou aplicativo
-        ser visualizado. Por exemplo, grande parte dos recursos são arquivos 
+        para ser visualizado. Por exemplo, grande parte dos recursos são
-        compactados que servem para ocupar menos espaço de armazenamento, recebendo 
+        arquivos compactados que servem para ocupar menos espaço de
-        a extensão .zip ou .rar, para utilizá-lo, você precisa ter instalado um 
+        armazenamento, recebendo a extensão .zip ou .rar, para utilizá-lo, você
-        descompactador de arquivos, como o <a href="http://download.winzip.com/gl/nkln/winzip21_downwz.exe">Winzip</a> ou <a href="https://ninite.com/winrar/">Winrar</a>.
+        precisa ter instalado um descompactador de arquivos, como o{" "}
+        <a href="http://download.winzip.com/gl/nkln/winzip21_downwz.exe">
+          Winzip
+        </a>{" "}
+        ou <a href="https://ninite.com/winrar/">Winrar</a>.
      </p>
      <p>
-        Alguns destes programas são bem comuns, e provavelmente, você já deve ter 
+        Alguns destes programas são bem comuns, e provavelmente, você já deve
-        instalado em seu computador, como processador de texto para formato .docx, 
+        ter instalado em seu computador, como processador de texto para formato
-        o Microsoft Word (para Sistema Operacional Windows) ou LibreOffice 
+        .docx, o Microsoft Word (para Sistema Operacional Windows) ou
-        (nas distribuições Linux). Porém, existem outros programas que não são tão 
+        LibreOffice (nas distribuições Linux). Porém, existem outros programas
-        comuns assim, mas que são fáceis de instalar em seu computador. A seguir, 
+        que não são tão comuns assim, mas que são fáceis de instalar em seu
-        vamos apresentar umas informações que podem guiar a utilização dos recursos 
+        computador. A seguir, vamos apresentar umas informações que podem guiar
-        em suas aulas.
+        a utilização dos recursos em suas aulas.
      </p>
      <p>
-        Você precisa ficar atento as siglas que terminação do recurso que dizem 
+        Você precisa ficar atento as siglas que terminação do recurso que dizem
-        de qual formato ele é. Daí, qual programa pode ser utilizado para abrir 
+        de qual formato ele é. Daí, qual programa pode ser utilizado para abrir
-        o Recursos Educacionais Digitais em seu computador? Fizemos uma lista de 
+        o Recursos Educacionais Digitais em seu computador? Fizemos uma lista de
        softwares que você poderá precisar de acordo com o tipo de recurso:
      </p>
      <ul>
-        {softwares.map((item)=>
+        {softwares.map(item => (
-          <li><a href={item.link} >{item.recursos}</a> - {item.texto} <br/><br/> </li>
+          <li>
-        )}
+            <a href={item.link}>{item.recursos}</a> - {item.texto} <br />
+            <br />{" "}
+          </li>
+        ))}
      </ul>
    </Card>
  );
@@ -78,7 +136,7 @@ export default function Software(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);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 30px;
  color: #666;
  span {
@@ -94,8 +152,6 @@ const Card = styled.div`
    }
  }
  ul {
    padding-left: 0 !important;
    margin-top: 0;
@@ -112,7 +168,4 @@ const Card = styled.div`
    margin: 0 0 10px;
    font-size: 15px;
  }
+`;
-`
\ No newline at end of file
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
@@ -16,42 +16,42 @@ 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, useState, useEffect } from 'react';
+import React from "react";
-import styled from 'styled-components';
+import styled from "styled-components";
 const tipos = [
-  {recursos:"- áudios;"},
+  { recursos: "- áudios;" },
-  {recursos:"- imagens;"},
+  { recursos: "- imagens;" },
-  {recursos:"- mapas;"},
+  { recursos: "- mapas;" },
-  {recursos:"- softwares educacionais"},
+  { recursos: "- softwares educacionais" },
-  {recursos:"- textos;"},
+  { recursos: "- textos;" },
-  {recursos:"- vídeos"}
+  { recursos: "- vídeos" }
-]
+];
 export default function Types(props) {
-  return(
+  return (
    <Card>
-      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <link
-      <div style={{marginBottom: "9px"}}>
+        href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
+        rel="stylesheet"
+      />
+      <div style={{ marginBottom: "9px" }}>
        <span>{props.title}</span>
      </div>
      <p>
-        A plataforma integra os Recursos Educacionais Digitais dos principais portais abertos. Conheça alguns deles:
+        A plataforma integra os Recursos Educacionais Digitais dos principais
+        portais abertos. Conheça alguns deles:
      </p>
      <ul>
-        {tipos.map((item)=>
+        {tipos.map(item => (
          <li>{item.recursos}</li>
+        ))}
-        )}
      </ul>
      <p>
-        E ainda, nesta plataforma são organizados pelos diferentes componentes curriculares (matemática, artes, etc.) e 
+        E ainda, nesta plataforma são organizados pelos diferentes componentes
-        etapas de ensino (Ensino Médio, Fundamental, Anos Iniciais, etc.) onde podem ser aplicados.
+        curriculares (matemática, artes, etc.) e etapas de ensino (Ensino Médio,
+        Fundamental, Anos Iniciais, etc.) onde podem ser aplicados.
      </p>
    </Card>
  );
 }
@@ -59,7 +59,7 @@ export default function Types(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);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 30px;
  color: #666;
  span {
@@ -67,8 +67,6 @@ const Card = styled.div`
    font-weight: bold;
  }
  ul {
    padding-left: 0 !important;
    margin-top: 0;
@@ -85,7 +83,4 @@ const Card = styled.div`
    margin: 0 0 10px;
    font-size: 15px;
  }
+`;
-`
\ No newline at end of file
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
@@ -16,45 +16,44 @@ 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, useState, useEffect } from 'react';
+import React from "react";
-import styled from 'styled-components';
+import styled from "styled-components";
 export default function Understand(props) {
-  return(
+  return (
    <Card>
-      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <link
-      <div style={{marginBottom: "9px"}}>
+        href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
+        rel="stylesheet"
+      />
+      <div style={{ marginBottom: "9px" }}>
        <span>{props.title}</span>
      </div>
      <p>
        <strong>Área de Recursos Educacionais Digitais</strong>
-        <br/>
+        <br />
-        Recursos que, no mínimo, têm uma licença de uso mais flexível. Uma licença 
+        Recursos que, no mínimo, têm uma licença de uso mais flexível. Uma
-        que permite que o recurso possa ser utilizado, alterado e manipulado sem 
+        licença que permite que o recurso possa ser utilizado, alterado e
-        restrições. Adicionalmente, um recurso aberto pode utilizar um formato 
+        manipulado sem restrições. Adicionalmente, um recurso aberto pode
-        aberto, um formato de arquivo que permite a fácil edição por terceiros. 
+        utilizar um formato aberto, um formato de arquivo que permite a fácil
-        Nenhum controle (como cadastro e senha) deve existir para acesso a recursos abertos.
+        edição por terceiros. Nenhum controle (como cadastro e senha) deve
+        existir para acesso a recursos abertos.
      </p>
      <p>
        <strong>Área de Materiais de Formação</strong>
-        <br/>
+        <br />
-        Nesta área, você acessa livremente materiais completos de formação, como 
+        Nesta área, você acessa livremente materiais completos de formação, como
-        cursos já oferecidos pelo MEC e seus parceiros. São conteúdos elaborados 
+        cursos já oferecidos pelo MEC e seus parceiros. São conteúdos elaborados
-        por equipes multidisciplinares e de autoria de pesquisadores e educadores 
+        por equipes multidisciplinares e de autoria de pesquisadores e
-        renomados nas áreas.
+        educadores renomados nas áreas.
      </p>
      <p>
        <strong>Área de Coleções de Usuários</strong>
-        <br/>
+        <br />
-        Nesta área, você tem acesso às coleções criadas e organizadas pelos 
+        Nesta área, você tem acesso às coleções criadas e organizadas pelos
-        usuários da plataforma. É mais uma possibilidade de buscar recursos 
+        usuários da plataforma. É mais uma possibilidade de buscar recursos
        educacionais para sua aula!
      </p>
    </Card>
  );
 }
@@ -62,7 +61,7 @@ export default function Understand(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);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 30px;
  color: #666;
  span {
@@ -74,7 +73,4 @@ const Card = styled.div`
    margin: 0 0 10px;
    font-size: 15px;
  }
+`;
-`
\ No newline at end of file
--- a/src/Components/HelpCenter/TabsPlataformaMEC/What.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/What.js
@@ -16,67 +16,76 @@ 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, useState, useEffect } from 'react';
+import React from "react";
-import styled from 'styled-components';
+import styled from "styled-components";
 export default function What(props) {
-  return(
+  return (
    <Card>
-      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <link
-      <div style={{marginBottom: "9px"}}>
+        href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
+        rel="stylesheet"
+      />
+      <div style={{ marginBottom: "9px" }}>
        <span>{props.title}</span>
      </div>
-      <p>Bem-vindo(a) à Plataforma MEC, uma iniciativa do Ministério da Educação!</p>
      <p>
-        A Plataforma MEC é parte do processo de implementação do Compromisso 6 
+        Bem-vindo(a) à Plataforma MEC, uma iniciativa do Ministério da Educação!
-        do 3º Plano de Ação da Parceria Governo Aberto (OGP-Brasil), que tem por 
+      </p>
-        objetivo “incorporar na política educacional o potencial da cultura digital, 
+      <p>
-        de modo a fomentar a autonomia para uso, reuso e adaptação de recursos 
+        A Plataforma MEC é parte do processo de implementação do Compromisso 6
-        educacionais digitais, valorizando a pluralidade e a diversidade da educação 
+        do 3º Plano de Ação da Parceria Governo Aberto (OGP-Brasil), que tem por
-        brasileira”. O documento completo pode ser consultado <a href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" >aqui</a>.
+        objetivo “incorporar na política educacional o potencial da cultura
-        </p>
+        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”. O documento completo pode ser
+        consultado{" "}
+        <a href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto">
+          aqui
+        </a>
+        .
+      </p>
      <p>
        <strong>Abertos</strong>
-        <br/>
+        <br />
-        Recursos que, no mínimo, têm uma licença de uso mais flexível. Uma licença 
+        Recursos que, no mínimo, têm uma licença de uso mais flexível. Uma
-        que permite que o recurso possa ser utilizado, alterado e manipulado sem 
+        licença que permite que o recurso possa ser utilizado, alterado e
-        restrições. Adicionalmente, um recurso aberto pode utilizar um formato 
+        manipulado sem restrições. Adicionalmente, um recurso aberto pode
-        aberto, um formato de arquivo que permite a fácil edição por terceiros. 
+        utilizar um formato aberto, um formato de arquivo que permite a fácil
-        Nenhum controle (como cadastro e senha) deve existir para acesso a recursos abertos.
+        edição por terceiros. Nenhum controle (como cadastro e senha) deve
+        existir para acesso a recursos abertos.
      </p>
      <p>
        <strong>Grátis</strong>
-        <br/>
+        <br />
-        Recursos para os quais os usuários não têm que fazer qualquer desembolso 
+        Recursos para os quais os usuários não têm que fazer qualquer desembolso
-        monetário, mas que exibem certas restrições: usualmente não podem ser 
+        monetário, mas que exibem certas restrições: usualmente não podem ser
-        baixados ou alterados. E, muitas vezes, como os recursos fechados, é 
+        baixados ou alterados. E, muitas vezes, como os recursos fechados, é
        necessário cadastro ou troca de informações pessoais para seu uso.
      </p>
      <p>
        <strong>Fechados</strong>
-        <br/>
+        <br />
-        Recursos que criam restrições ao seu acesso, uso ou reuso. Como exemplo, 
+        Recursos que criam restrições ao seu acesso, uso ou reuso. Como exemplo,
-        podemos mencionar recursos que só são acessíveis mediante cadastro, que 
+        podemos mencionar recursos que só são acessíveis mediante cadastro, que
-        são pagos, ou que têm licenças restritivas (como “todos os direitos 
+        são pagos, ou que têm licenças restritivas (como “todos os direitos
        reservados”, o símbolo ©).
      </p>
      <p>
-      O Plano Nacional de Educação (2014-2024) enfatiza, nas metas 5 e 7, a 
+        O Plano Nacional de Educação (2014-2024) enfatiza, nas metas 5 e 7, a
-      importância dos recursos educacionais abertos para fomentar a qualidade da 
+        importância dos recursos educacionais abertos para fomentar a qualidade
-      educação básica.
+        da educação básica.
      </p>
      <p>
-      A Resolução CNE/CES nº 1, de 11 de março de 2016, também enfatiza a importância 
+        A Resolução CNE/CES nº 1, de 11 de março de 2016, também enfatiza a
-      dos recursos educacionais abertos para as instituições de educação superior 
+        importância dos recursos educacionais abertos para as instituições de
-      e para as atividades de educação a distância, promovendo “a criação, 
+        educação superior e para as atividades de educação a distância,
-      disponibilização, uso e gestão de tecnologias e recursos educacionais abertos, 
+        promovendo “a criação, disponibilização, uso e gestão de tecnologias e
-      por meio de licenças livres, que facilitem o uso, a revisão, a tradução, a 
+        recursos educacionais abertos, por meio de licenças livres, que
-      adaptação, a recombinação, a distribuição e o compartilhamento gratuito pelo 
+        facilitem o uso, a revisão, a tradução, a adaptação, a recombinação, a
-      cidadão, resguardados os direitos autorais pertinentes.”
+        distribuição e o compartilhamento gratuito pelo cidadão, resguardados os
+        direitos autorais pertinentes.”
      </p>
    </Card>
  );
@@ -85,7 +94,7 @@ 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);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 30px;
  color: #666;
  span {
@@ -105,7 +114,4 @@ const Card = styled.div`
    margin: 0 0 10px;
    font-size: 15px;
  }
+`;
-`
\ No newline at end of file
No results found