dde9865d9080de4d35aa9e95ce2ad6dfbc01721c to d47d2fa675326fd09f3f2a6fc02ed212d230ce2c · PortalMEC / PortalMEC-React

Some changes are not shown.

For a faster browsing experience, only 53 of 89 files are shown. Download one of the files below to see all changes.

package-lock.json

+20
−3

Original line number
Diff line number
Diff line

@@ -2338,9 +2338,9 @@

      "integrity": "sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA=="

    },

    "@hapi/hoek": {

      "version": "8.5.0",

      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.0.tgz",

      "integrity": "sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw=="

      "version": "8.5.1",

      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz",

      "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",

package.json

+1
−0

Original line number
Diff line number
Diff line

@@ -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",

src/App.js

+8
−3

Original line number
Diff line number
Diff line

@@ -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/>

src/Components/AreasSubPages.js

+266
−169

Original line number
Diff line number
Diff line

@@ -16,38 +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} from 'react';

import axios from 'axios';

import {apiUrl} from '../env';

import './carousel.css';

import {Col,Row, Container, Hidden, Visible} from 'react-grid-system';

import ResourceCard from './ResourceCard';

import MaterialCard from './MaterialCard';

import CollectionCard from './CollectionCard';

import React, { Component } from "react";

import axios from "axios";

import { apiUrl } from "../env";

import "./carousel.css";

import { Col, Row, Container, Hidden, Visible } from "react-grid-system";

import ResourceCard from "./ResourceCard";

import MaterialCard from "./MaterialCard";

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";

import Grid from "@material-ui/core/Grid";

const areaStyle = {

  paddingTop: "5px",

  fontSize: "16px",

  textAlign: "left",

  backgroundColor: "inherit",

  width: "700px",

  width: "1000px",

  margin: "auto",

  padding: "20px",

  minHeight: "150px"

}

  minHeight: "190px"

};

class ReqResources extends Component {

  constructor(props) {

    super(props);

    this.state = {

      resources: [],

      resources: []

    };

  }

  componentDidMount() {

    axios.get(`${apiUrl}/learning_objects?limit=12&sort=["published_at", "desc"]`)

    axios

      .get(`${apiUrl}/learning_objects?limit=12&sort=["published_at", "desc"]`)

      .then(res => {

        this.setState({ resources: res.data });

        console.log(res.data);

@@ -60,40 +64,52 @@ class ReqResources extends Component{

    return (

      <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>

        <Row style={{ paddingBottom: "5px" }}>

      {row1.map(card => <Col md={3} sm={6} key={card.id}>

        <ResourceCard name={card.name}

          {row1.map(card => (

            <Col md={3} sm={6} key={card.id}>

              <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>)}

              />

            </Col>

          ))}

        </Row>

        <Row>

      {row2.map(card => <Col md={3} sm={6} key={card.id}>

        <ResourceCard name={card.name}

          {row2.map(card => (

            <Col md={3} sm={6} key={card.id}>

              <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>)}

              />

            </Col>

          ))}

        </Row>

        <Row>

      {row3.map(card => <Col md={3} sm={6} key={card.id}>

        <ResourceCard name={card.name}

          {row3.map(card => (

            <Col md={3} sm={6} key={card.id}>

              <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>)}

              />

            </Col>

          ))}

        </Row>

      </Carousel>

    )

    );

  }

}

@@ -101,12 +117,14 @@ class ReqCollections extends Component{

  constructor(props) {

    super(props);

    this.state = {

      collections: [],

      collections: []

    };

  }

  componentDidMount() {

    axios.get(`${apiUrl}/collections?limit=12&sort=["updated_at", "desc"]`)

    .then(res=>{this.setState({collections: res.data});

    axios

      .get(`${apiUrl}/collections?limit=12&sort=["updated_at", "desc"]`)

      .then(res => {

        this.setState({ collections: res.data });

        console.log(res.data);

      });

  }

@@ -117,34 +135,49 @@ class ReqCollections extends Component{

    return (

      <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>

        <Row style={{ paddingBottom: "5px" }}>

      {row1.map(card => <Col md={3} sm={6} key={card.id}>

        <CollectionCard name={card.name}

          {row1.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>)}

                avatar={card.owner.avatar}

              />

            </Col>

          ))}

        </Row>

        <Row>

      {row2.map(card => <Col md={3} sm={6} key={card.id}>

        <CollectionCard name={card.name}

          {row2.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>)}

                avatar={card.owner.avatar}

              />

            </Col>

          ))}

        </Row>

        <Row>

      {row3.map(card => <Col md={3} sm={6} key={card.id}>

        <CollectionCard name={card.name}

          {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>)}

                avatar={card.owner.avatar}

              />

            </Col>

          ))}

        </Row>

      </Carousel>

    )

    );

  }

}

@@ -156,16 +189,37 @@ class SubPages extends Component{

          <React.Fragment>

            <div style={{ backgroundColor: "#ff7f00" }}>

              <Container style={areaStyle}>

                <img src={recursos}  alt="aba recursos" height="100" style={{float: "left"}}/>

                <p>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 container style={{ display: "flex" }} spacing={5}>

                  <Grid item xs={3}>

                    <img

                      src={recursos}

                      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" }}>

              <p style={{paddingBottom:"5px", borderBottom: "1px solid #ff7f00", color: "#ff7f00"}}>

                Recursos mais recentes </p>

              <p

                style={{

                  paddingBottom: "5px",

                  borderBottom: "1px solid #ff7f00",

                  color: "#ff7f00"

                }}

              >

                Recursos mais recentes{" "}

              </p>

              <Hidden sm xs>

                <ReqResources />

              </Hidden>

@@ -180,18 +234,44 @@ class SubPages extends Component{

          <React.Fragment>

            <div style={{ backgroundColor: "#e81f4f" }}>

              <Container style={areaStyle}>

                  <img src={materiais} alt="aba materiais" height="100" style={{float: "left"}}/>

                  <p>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 container spacing={5}>

                  <Grid item xs={3}>

                    <img

                      src={materiais}

                      alt="aba materiais"

                      height="165"

                      style={{ float: "right" }}

                    />

                  </Grid>

                  <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>

              <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

                style={{ padding: "20px" }}

                showThumbs={false}

                infiniteLoop={true}

                showStatus={false}

              >

                <Row>

                  <Col md={3}>

                    <MaterialCard name="oioi" />

@@ -215,30 +295,47 @@ class SubPages extends Component{

          <React.Fragment>

            <div style={{ backgroundColor: "#673ab7" }}>

              <Container style={areaStyle}>

                <img src={colecoes} alt="aba coleções" height="100" style={{float: "left"}}/>

                <p>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 container spacing={5}>

                  <Grid item xs={3}>

                    <img

                      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" }}>

              <p style={{paddingBottom:"5px", borderBottom: "1px solid #673ab7", color: "#673ab7"}}>

                Coleções mais recentes </p>

              <p

                style={{

                  paddingBottom: "5px",

                  borderBottom: "1px solid #673ab7",

                  color: "#673ab7"

                }}

              >

                Coleções mais recentes{" "}

              </p>

              <ReqCollections />

            </Container>

          </React.Fragment>

        );

      default:

      return null

        return null;

    }

  }

  render() {

    return(

      <div>

      {this.areaRender()}

      </div>

  );

    return <div>{this.areaRender()}</div>;

  }

}

export default SubPages;

src/Components/Checkbox.js

+4
−6

Original line number
Diff line number
Diff line

@@ -25,10 +25,9 @@ const StyledFormControlLabel = styled(FormControlLabel)`

    .label {

        font-size : 12px !important;

    }

`

const StyledCheckbox = styled(Checkbox)`

    .MuiCheckbox-colorSecondary.Mui-checked {

        color : #00bcd4 !important;

    }

`

export default function LabeledCheckbox(props) {

@@ -36,8 +35,7 @@ export default function LabeledCheckbox(props) {

  return (

      <StyledFormControlLabel

        control={

          <StyledCheckbox

            disabled = {props.disabledCheckbox}

          <Checkbox

            value = {props.checked}

            onChange = {props.handleChange}

          />

src/Components/ColaborarModal.js

+10
−6

Original line number
Diff line number
Diff line

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>

src/Components/ComponentAlterarAvatar.js0 → 100644

+229
−0

Original line number
Diff line number
Diff line

/*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>

        )

}

src/Components/ContactForm.js

+0
−2

Original line number
Diff line number
Diff line

@@ -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';

Compare revisions

Source

Target

Files

Some changes are not shown.

package-lock.json

package.json

src/App.js

src/Components/AreasSubPages.js

src/Components/Checkbox.js

src/Components/ColaborarModal.js

src/Components/ComponentAlterarAvatar.js

src/Components/ContactForm.js