diff --git a/src/App.js b/src/App.js
index a02de52141ef6696607bd8fd1c676ff67dc34188..517c0b3015405ee16e57641bfbb159c6277a6267 100644
--- a/src/App.js
+++ b/src/App.js
@@ -32,7 +32,7 @@ import {BrowserRouter, Switch, Route} from 'react-router-dom';
import { Store } from './Store'
import TermsPage from './Pages/TermsPage.js'
import PublicationPermissionsPage from './Pages/PublicationPermissionsPage.js'
-
+import Contact from './Pages/Contact.js'
export default function App(){
// eslint-disable-next-line
@@ -68,6 +68,7 @@ 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} />
@@ -77,6 +78,7 @@ export default function App(){
<Route path="/permission" component={PublicationPermissionsPage}/>
<Route path="/termos" component={UserTerms}/>
<Route path="/teste" component={Teste}/>
+ <Route path="/contato" component = {Contact}/>
</Switch>
<EcFooter/>
<GNUAGPLfooter/>
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index e6bd1c688ce1ffe05d6a5eb4e55325ac2c4c534d..bcbc40fb3a988231b82e75ed86a88510efacddb8 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -61,6 +61,8 @@ export default function FormInput(props) {
onChange = {props.handleChange}
InputProps={{className: classes.input}}
required = {props.required}
+ error = {props.error}
+ helperText ={props.help}
style={{width:"100%"}}
/>
);
diff --git a/src/Components/MenuList.js b/src/Components/MenuList.js
index 1268edb7f95a8b0d33f34430d5be57ee5834689f..0402b7e24bf52d942b11a8a4bef6ba12a9d12090 100644
--- a/src/Components/MenuList.js
+++ b/src/Components/MenuList.js
@@ -141,12 +141,12 @@ const StyledExitToAppIcon = styled(ExitToAppIcon) `
justify-content : flex-end;
`
const StyledMenuItem = styled(MenuItem)`
- display : flex;
- justify-content: space-between;
- width : 100%;
- font-size : 14px;
- color : #a5a5a5;
- padding : 5px 20px;
+ display : flex !important;
+ justify-content: space-between !important;
+ width : 100% !important;
+ font-size : 14px !important;
+ color : #a5a5a5 !important;
+ padding : 5px 20px !important;
`
//import React from 'react';
diff --git a/src/Components/TabPanelAtividades.js b/src/Components/TabPanelAtividades.js
index 24fa2b0c07594ec9011b6bf15c789d95429581df..f65115ca087017f503a3d72e9a690ac179992100 100644
--- a/src/Components/TabPanelAtividades.js
+++ b/src/Components/TabPanelAtividades.js
@@ -1,52 +1,85 @@
import React, {useContext} from 'react'
import styled from 'styled-components'
import { Container } from 'react-grid-system'
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
-const MainContentContainer = styled(Container)`
- background-color : #f4f4f4;
- color : #666;
- padding-bottom : 30px;
-`
-const DivNoPad = styled.div`
- margin-bottom : 0;
- padding-bottom : 0;
-`
+export default function TabPanelAtividades (props) {
+ return (
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+ <div>
+ <DivTitulo>
+ <InnerDivTitulo>
+ <TituloContent>
+ <p style={{margin:"0 0 10px", marginBottom : "40px"}}>Todas Notificações</p>
+ </TituloContent>
+ </InnerDivTitulo>
+ </DivTitulo>
+ {/*some sort of map with a list of notifications idk what though*/}
+ <div>
+ <LoadMoreButton><span>CARREGAR MAIS 4</span></LoadMoreButton>
+ <LoadMoreButton><span>CARREGAR MAIS 20</span></LoadMoreButton>
+ </div>
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+ )
+}
-const ColMDNoPad = styled.div`
- padding : 0;
- width : 100%;
- float : left;
+const LoadMoreButton = styled(Button)`
+ outline : none !important;
+ display : inline-block !important;
+ cusor : pointer !important;
+ min-height : 36px !important;
+ min-widht : 88px !important;
+ line-height: 36px !important;
+ vertical-align: middle !important;
+ border : 0 !important;
+ padding : 0 px !important;
+ margin : 6px 8px !important;
+ text-decoration : none !important;
+ font-weight : 500 !important;
+ overflow : hidden !important;
+ text-transform : uppercase !important;
+ font-size : 14px !important;
`
-const TituloDiv = styled.div`
- font-size : 14px;
- font-weight : 500;
- letter-spacing : .01em;
- line-height : 1.2em;
+const TituloContent = styled.div`
+ display : block;
+ z-index : 1;
+ position : relative;
+ font-family: Roboto, sans-serif;
+ font-weight : ligther;
`
-const SubHeader = styled.div`
+const InnerDivTitulo = styled.div`
+ margin-top : 24px;
padding-top : 16px;
- background-color : #fff;
- padding-bottom : 0;
+ padding-left : 16px;
+ padding-right : 16px;
+ font-size: 30px;
+ font-weight: lighter;
+ color: #6e6e6e;
+ text-align: center;
`
-export default function TabPanelAtividades (props) {
- return (
- <MainContentContainer>
- <DivNoPad>
- <ColMDNoPad>
- <TituloDiv>
- <SubHeader>
- <div style={{display:"block", zIndex:"1", position:"relative"}}>
- <p style={{marginBottom:"40px"}}>Todas Notificações</p>
- </div>
- </SubHeader>
- </TituloDiv>
- </ColMDNoPad>
- </DivNoPad>
- </MainContentContainer>
+const DivTitulo = styled.div`
+ display : flex;
+ justify-content : center;
+ font-size: 14px;
+ font-weight: 500;
+ letter-spacing: .01em;
+ line-height: 1.2em;
+ margin : 0;
+ border-bottom: 1px solid #eee;
+`
- )
-}
+const ContainerDivStyled = styled.div`
+ max-width : 1140px;
+ margin-left : auto;
+ margin-right : auto;
+ margin-left : 20em;
+ background-color: #fff;
+`
diff --git a/src/Components/TabPanelColecoes.js b/src/Components/TabPanelColecoes.js
new file mode 100644
index 0000000000000000000000000000000000000000..2dd1c80f08aae9af072fb9ce713e2b34d61211e8
--- /dev/null
+++ b/src/Components/TabPanelColecoes.js
@@ -0,0 +1,85 @@
+import React, {useContext} from 'react'
+import styled from 'styled-components'
+import { Container } from 'react-grid-system'
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+
+export default function TabPanelAtividades (props) {
+ return (
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+ <div>
+ <DivTitulo>
+ <InnerDivTitulo>
+ <TituloContent>
+ <p style={{margin:"0 0 10px", marginBottom : "40px"}}>Coleções</p>
+ </TituloContent>
+ </InnerDivTitulo>
+ </DivTitulo>
+ {/*some sort of map with a list of notifications idk what though*/}
+ <div>
+ <LoadMoreButton><span>CARREGAR MAIS 4</span></LoadMoreButton>
+ <LoadMoreButton><span>CARREGAR MAIS 20</span></LoadMoreButton>
+ </div>
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+ )
+}
+
+const LoadMoreButton = styled(Button)`
+ outline : none !important;
+ display : inline-block !important;
+ cusor : pointer !important;
+ min-height : 36px !important;
+ min-widht : 88px !important;
+ line-height: 36px !important;
+ vertical-align: middle !important;
+ border : 0 !important;
+ padding : 0 px !important;
+ margin : 6px 8px !important;
+ text-decoration : none !important;
+ font-weight : 500 !important;
+ overflow : hidden !important;
+ text-transform : uppercase !important;
+ font-size : 14px !important;
+`
+
+const TituloContent = styled.div`
+ display : block;
+ z-index : 1;
+ position : relative;
+ font-family: Roboto, sans-serif;
+ font-weight : ligther;
+`
+
+const InnerDivTitulo = styled.div`
+ margin-top : 24px;
+ padding-top : 16px;
+ padding-left : 16px;
+ padding-right : 16px;
+ font-size: 30px;
+ font-weight: lighter;
+ color: #6e6e6e;
+ text-align: center;
+`
+
+
+const DivTitulo = styled.div`
+ display : flex;
+ justify-content : center;
+ font-size: 14px;
+ font-weight: 500;
+ letter-spacing: .01em;
+ line-height: 1.2em;
+ margin : 0;
+ border-bottom: 1px solid #eee;
+`
+
+const ContainerDivStyled = styled.div`
+ max-width : 1140px;
+ margin-left : auto;
+ margin-right : auto;
+ margin-left : 20em;
+ background-color: #fff;
+`
diff --git a/src/Components/TabPanelFavoritos.js b/src/Components/TabPanelFavoritos.js
new file mode 100644
index 0000000000000000000000000000000000000000..287b765d9279ef29ddcd8a598b15db799f3a1c8b
--- /dev/null
+++ b/src/Components/TabPanelFavoritos.js
@@ -0,0 +1,85 @@
+import React, {useContext} from 'react'
+import styled from 'styled-components'
+import { Container } from 'react-grid-system'
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+
+export default function TabPanelAtividades (props) {
+ return (
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+ <div>
+ <DivTitulo>
+ <InnerDivTitulo>
+ <TituloContent>
+ <p style={{margin:"0 0 10px", marginBottom : "40px"}}>Favoritos</p>
+ </TituloContent>
+ </InnerDivTitulo>
+ </DivTitulo>
+ {/*some sort of map with a list of notifications idk what though*/}
+ <div>
+ <LoadMoreButton><span>CARREGAR MAIS 4</span></LoadMoreButton>
+ <LoadMoreButton><span>CARREGAR MAIS 20</span></LoadMoreButton>
+ </div>
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+ )
+}
+
+const LoadMoreButton = styled(Button)`
+ outline : none !important;
+ display : inline-block !important;
+ cusor : pointer !important;
+ min-height : 36px !important;
+ min-widht : 88px !important;
+ line-height: 36px !important;
+ vertical-align: middle !important;
+ border : 0 !important;
+ padding : 0 px !important;
+ margin : 6px 8px !important;
+ text-decoration : none !important;
+ font-weight : 500 !important;
+ overflow : hidden !important;
+ text-transform : uppercase !important;
+ font-size : 14px !important;
+`
+
+const TituloContent = styled.div`
+ display : block;
+ z-index : 1;
+ position : relative;
+ font-family: Roboto, sans-serif;
+ font-weight : ligther;
+`
+
+const InnerDivTitulo = styled.div`
+ margin-top : 24px;
+ padding-top : 16px;
+ padding-left : 16px;
+ padding-right : 16px;
+ font-size: 30px;
+ font-weight: lighter;
+ color: #6e6e6e;
+ text-align: center;
+`
+
+
+const DivTitulo = styled.div`
+ display : flex;
+ justify-content : center;
+ font-size: 14px;
+ font-weight: 500;
+ letter-spacing: .01em;
+ line-height: 1.2em;
+ margin : 0;
+ border-bottom: 1px solid #eee;
+`
+
+const ContainerDivStyled = styled.div`
+ max-width : 1140px;
+ margin-left : auto;
+ margin-right : auto;
+ margin-left : 20em;
+ background-color: #fff;
+`
diff --git a/src/Components/TabPanelMeusRecursos.js b/src/Components/TabPanelMeusRecursos.js
new file mode 100644
index 0000000000000000000000000000000000000000..e1e714bdbb9d4a77fa5a61c00f4bc98520cace84
--- /dev/null
+++ b/src/Components/TabPanelMeusRecursos.js
@@ -0,0 +1,153 @@
+import React, {useContext} from 'react'
+import styled from 'styled-components'
+import { Container } from 'react-grid-system'
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+
+export default function TabPanelAtividades (props) {
+ return (
+ <React.Fragment>
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+
+ <DivTitulo>
+ <StyledP>Recurso Publicado <b style={{fontWeight:"700", fontSize:"20px"}}>(0)</b></StyledP>
+ <StyledHR/>
+ </DivTitulo>
+ <div>
+ <DivTextoNoPublications>
+ <DivConteudoNaoPublicado>
+ <NoPubSpan>Você ainda não publicou nenhum Recurso!</NoPubSpan>
+ </DivConteudoNaoPublicado>
+ </DivTextoNoPublications>
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+ <DivTitulo>
+ <StyledP>Rascunhos<b style={{fontWeight:"700", fontSize:"20px"}}>(7)</b></StyledP>
+ <StyledHR/>
+ </DivTitulo>
+ <div style={{height : "400px"}}> //REMOVER ISSO
+ <DivContainerRecursosPublicados>
+ </DivContainerRecursosPublicados>
+ <BtnAlinhaRecPvt>
+ <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 4 de 7</p>
+ <ButtonMostrarMais>
+ <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
+ </ButtonMostrarMais>
+ </BtnAlinhaRecPvt>
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+
+ <DivTitulo>
+ <StyledP>Recurso sendo avaliado pela curadoria <b style={{fontWeight:"700", fontSize:"20px"}}>(0)</b></StyledP>
+ <StyledHR/>
+ </DivTitulo>
+ <div>
+ <DivTextoNoPublications>
+ <DivConteudoNaoPublicado>
+ <NoPubSpan>Você não tem nenhum recurso sendo avaliado pelos curadores.</NoPubSpan>
+ </DivConteudoNaoPublicado>
+ </DivTextoNoPublications>
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+ </React.Fragment>
+ )
+}
+
+const ButtonMostrarMais = styled(Button)`
+ background-color : #ff7f00 !important;
+ font-size: 14px !important;
+ font-weight: 500 !important;
+ height: 36px !important;
+ border-radius: 3px !important;
+ padding-left: 16px !important;
+ padding-right: 16px !important;
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ outline : none !important;
+ min-width : 88px !important;
+ vertical-align : middle !important;
+ margin : 6px 8px !important;
+ text-decoration : none !important;
+`
+
+const BtnAlinhaRecPvt = styled.div`
+ text-align : center;
+ width : 100%;
+ float : left;
+ position : relative;
+ min-height : 1px;
+ padding-right : 15px;
+ padding-left : 15px;
+`
+
+const DivContainerRecursosPublicados = styled.div`
+ width : 100%;
+ float : left;
+ position : relative;
+ min-height : 1px;
+ padding-right : 15px;
+ padding-left : 15px;
+`
+
+const NoPubSpan = styled.span`
+ font-size : 24px;
+ font-family : Roboto;
+ font-weight : lighter;
+`
+
+const DivConteudoNaoPublicado = styled.div`
+ position : relative;
+ top : 50%;
+ transform : translateY(-50%);
+`
+
+const DivTextoNoPublications = styled.div`
+ height : 360px;
+ text-align : center;
+ width : 100%;
+ padding-right : 15px;
+ padding-left : 15px;
+`
+
+const StyledHR = styled.hr`
+ border-color : #757575;
+ border-top: 1px solid #eee;
+ margin : 0 15px 0 15px;
+ padding-right : 0;
+ padding-left : 0;
+`
+
+const StyledP = styled.p`
+ text-align : left;
+ margin-top : 10px;
+ padding-left : 15px;
+ padding-right : 15px;
+ font-weight : 300;
+ font-size : 1.875em;
+`
+
+const DivTitulo = styled.div`
+ padding : 0;
+ margin-bottom : 10px;
+ width : 100;
+ display: flex;
+ flex-direction : column;
+`
+
+const ContainerDivStyled = styled.div`
+ max-width : 1140px;
+ margin-left : auto;
+ margin-right : auto;
+ margin-left : 20em;
+ margin-bottom: 30px;
+ background-color: #fff;
+`
diff --git a/src/Components/TabPanelRede.js b/src/Components/TabPanelRede.js
new file mode 100644
index 0000000000000000000000000000000000000000..7dfefd6dc4abc033836334772bdf288d05f7a099
--- /dev/null
+++ b/src/Components/TabPanelRede.js
@@ -0,0 +1,85 @@
+import React, {useContext} from 'react'
+import styled from 'styled-components'
+import { Container } from 'react-grid-system'
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+
+export default function TabPanelAtividades (props) {
+ return (
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+ <div>
+ <DivTitulo>
+ <InnerDivTitulo>
+ <TituloContent>
+ <p style={{margin:"0 0 10px", marginBottom : "40px"}}>Rede</p>
+ </TituloContent>
+ </InnerDivTitulo>
+ </DivTitulo>
+ {/*some sort of map with a list of notifications idk what though*/}
+ <div>
+ <LoadMoreButton><span>CARREGAR MAIS 4</span></LoadMoreButton>
+ <LoadMoreButton><span>CARREGAR MAIS 20</span></LoadMoreButton>
+ </div>
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+ )
+}
+
+const LoadMoreButton = styled(Button)`
+ outline : none !important;
+ display : inline-block !important;
+ cusor : pointer !important;
+ min-height : 36px !important;
+ min-widht : 88px !important;
+ line-height: 36px !important;
+ vertical-align: middle !important;
+ border : 0 !important;
+ padding : 0 px !important;
+ margin : 6px 8px !important;
+ text-decoration : none !important;
+ font-weight : 500 !important;
+ overflow : hidden !important;
+ text-transform : uppercase !important;
+ font-size : 14px !important;
+`
+
+const TituloContent = styled.div`
+ display : block;
+ z-index : 1;
+ position : relative;
+ font-family: Roboto, sans-serif;
+ font-weight : ligther;
+`
+
+const InnerDivTitulo = styled.div`
+ margin-top : 24px;
+ padding-top : 16px;
+ padding-left : 16px;
+ padding-right : 16px;
+ font-size: 30px;
+ font-weight: lighter;
+ color: #6e6e6e;
+ text-align: center;
+`
+
+
+const DivTitulo = styled.div`
+ display : flex;
+ justify-content : center;
+ font-size: 14px;
+ font-weight: 500;
+ letter-spacing: .01em;
+ line-height: 1.2em;
+ margin : 0;
+ border-bottom: 1px solid #eee;
+`
+
+const ContainerDivStyled = styled.div`
+ max-width : 1140px;
+ margin-left : auto;
+ margin-right : auto;
+ margin-left : 20em;
+ background-color: #fff;
+`
diff --git a/src/Pages/Contact.js b/src/Pages/Contact.js
new file mode 100644
index 0000000000000000000000000000000000000000..0c0fccd5547989e84f10ee4d4cbe4877cf5f81c4
--- /dev/null
+++ b/src/Pages/Contact.js
@@ -0,0 +1,401 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, 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';
+
+
+const Seção1 = styled.div `
+ width: 100%;
+ background-image: url(${Banner1});
+ background-size: cover;
+ background-position: bottom center;
+ height: 250px;
+ color:#fff;
+ line-height: 1.1;
+ text-align: center;
+ padding-top: 120px;
+
+ h2 {
+ font-family: Pompiere,cursive;
+ font-size: 52px;
+ color:#fff;
+ margin: 0;
+ padding-left: 0;
+ padding-right: 0;
+ font-weight: 500;
+ }
+
+ h3 {
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-family: Roboto,sans-serif;
+ font-size: 30px;
+ font-weight: lighter;
+
+ }
+`
+
+const Seção2 = styled.div `
+ height: 708px;
+ background-color: #f4f4f4;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`
+const Button = styled.button`
+
+ background-color: #00acc1;
+ color:#fff;
+ font-family: Roboto,sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ height: 36px;
+ border-radius: 3px;
+ padding-left: 16px;
+ padding-right: 16px;
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+ outline: none;
+ position: relative;
+ cursor: pointer;
+ min-height: 36px;
+ min-width: 88px;
+ line-height: 36px;
+ vertical-align: middle;
+ align-items: center;
+ text-align: center;
+ border-radius: 3px;
+ box-sizing: border-box;
+ user-select: none;
+ border: 0;
+ padding: 0 6px;
+ padding-right: 6px;
+ padding-left: 6px;
+ margin: 6px 8px;
+
+ white-space: nowrap;
+ text-transform: uppercase;
+ font-weight: 500;
+ font-size: 14px;
+ font-style: inherit;
+ font-variant: inherit;
+ font-family: inherit;
+ text-decoration: none;
+ overflow: hidden;
+ transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
+
+
+`
+
+const Formulário = styled.div `
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 40px;
+ height: 560px;
+ width: 480px;
+ color: #666;
+
+ form .inputBlock {
+ margin-block: 22px;
+
+ }
+
+ form .inputBlock label {
+ font-size: 14px;
+ font-weight: bold;
+ display: block;
+
+ }
+
+ form .inputBlock input {
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ border: 0;
+ border-bottom: 1px solid #eee;
+
+ }
+
+ form .inputBlock.Message input {
+ height: 131px;
+ }
+
+ form buttom[type=submit] {
+ width: 100%;
+ border: 0;
+ margin-top: 30px;
+ background: #7d40e7
+ border-radius: 2px;
+ padding: 15px 20px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #fff;
+ cursor: pointer;
+ transition: background 0.5s;
+
+ }
+
+ form buttom[type=submit]:hover {
+ background: #6931ac
+ }
+
+
+ h2 {
+ font-size: 24px;
+ font-weight: lighter;
+ margin-bottom: 50px;
+ margin-top: 20px;
+ text-align: center;
+
+ }
+`
+
+
+
+const Seção3 = styled.div `
+ height: 127px;
+ background-color: #f4f4f4;
+ color:#666;
+ line-height: 1.42857143;
+ font-size:18px;
+ text-align: center;
+ padding-top: 70px;
+
+
+ p {
+ margin: 0 0 10px 0;
+ }
+
+
+`
+
+function validateNome (nome) {
+ let flag = false
+ if(nome.length === 0) {
+ flag = true
+ }
+
+ return flag
+}
+
+
+function validateMensagem (mensagem) {
+ let flag = false
+ if(mensagem.length === 0) {
+ flag = true
+ }
+
+ return flag
+}
+
+function validateEmail (email) {
+ let flag = false
+ if (email.split("").filter(x => x === "@").length !== 1) {
+ flag = true
+ }
+ return flag
+}
+
+
+
+function Contact (props) {
+
+ const [nome, handleNome] = useState(
+ {
+ dict : {
+ key:false,
+ value:""
+ }
+ })
+ const [email, handleEmail] = useState(
+ {
+ dict : {
+ key:false,
+ value:""
+ }
+ })
+ const [mensagem, handleMensagem] = useState(
+ {
+ dict : {
+ key: false,
+ value:""
+ }
+ })
+
+
+ const preencheNome = (e) => {
+ const aux2 = e.target.value
+ const flag = validateNome(aux2)
+ handleNome({...nome, dict : {
+ key : flag,
+ value : e.target.value
+ }})
+ console.log(nome)
+ }
+
+ const preencheEmail = (e) => {
+ const aux = e.target.value
+ const flag = validateEmail(aux)
+ handleEmail({...email, dict : {
+ key : flag,
+ value : e.target.value
+ }})
+ console.log(email)
+ }
+
+ const preencheMensagem = (e) => {
+ const msg = e.target.value
+ console.log(msg)
+ let flag = validateMensagem(msg)
+ handleMensagem({...mensagem, dict : {
+ key : flag,
+ value : msg
+ }})
+ console.log(mensagem)
+ }
+
+ const limpaTudo = () => {
+
+ handleNome({
+ dict : {
+ key: false,
+ value:""
+ }}
+ );
+
+ handleEmail({
+ dict : {
+ key: false,
+ value:""
+ }}
+ )
+
+ handleMensagem({
+ dict : {
+ key: false,
+ value:""
+ }}
+ )
+
+ }
+
+
+
+ const onSubmit = (e) => {
+ //on submit we should prevent the page from refreshing
+ e.preventDefault(); //though this is arguable
+ console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key ))
+ // Se não houver erro em nunhum dos campos E nenhum dos campos for vazio: a página faz o contato com o backend e os campos ficam em branco no formulário
+ if (!(nome.dict.key && email.dict.key && mensagem.dict.key ) && ((nome.dict.value.length > 0) && (email.dict.value.length > 0) && (mensagem.dict.value.length > 0))) {
+
+ axios.post(`${apiUrl}/contacts`,
+ {
+ contact : {
+ name: nome.dict.value,
+ email: email.dict.value,
+ message: mensagem.dict.value
+ }
+
+ }
+ ).then()
+
+
+
+ limpaTudo();
+
+ }
+
+
+
+ }
+
+
+
+ return(
+ <>
+ <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
+ <Seção1>
+ <h2>CONTATO</h2>
+ <h3>Quer enviar uma mensagem?</h3>
+ </Seção1>
+
+ <Seção2>
+
+ <Formulário noValidate autoComplete="off">
+ <h2>Entre em contato para enviar dúvidas,<br/>sugestões ou crÃticas</h2>
+ <form onSubmit={e => onSubmit(e)}>
+ <FormInput
+ inputType={"text"}
+ name={"nome"}
+ value={nome.dict.value}
+ placeholder={"Nome *"}
+ error = {nome.dict.key}
+ help = {nome.dict.key ? "insira seu nome para o contato " : ""}
+ handleChange={e => preencheNome(e)}
+ />
+ <br/>
+ <FormInput
+ inputType={"text"}
+ name={"email"}
+ value={email.dict.value}
+ placeholder={"E-mail *"}
+ error = {email.dict.key}
+ help = {email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""}
+ handleChange={e => preencheEmail(e)}
+ />
+ <br/>
+ <br/>
+ <FormInput
+ inputType={"text"}
+ name={"mensagem"}
+ value={mensagem.dict.value}
+ placeholder={"Mensagem *"}
+ multi = {true}
+ rows = "5"
+ rowsMax = "6"
+ error = {mensagem.dict.key}
+ help = {mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crÃtica ou dúvida." : "Escreva sua mensagem no campo acima."}
+ handleChange={e => preencheMensagem(e)}
+ />
+ <br/>
+ <br/>
+ <div style={{display: "flex", justifyContent: "center"}}>
+ <Button onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
+ </div>
+ </form>
+
+ </Formulário>
+ </Seção2>
+
+ <Seção3>
+
+ <span>MEC - Ministério da Educação </span>
+ <p>Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP: 70.047-900 - BrasÃlia/DF. Telefone: 0800 616161</p>
+
+ </Seção3>
+ </>
+ );
+
+}
+
+export default Contact;
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index 0b7ab04730ff173ce6c3d6fa1d668eaff6d598ca..f6bd664cf1261ab1c30e4fa28ee9e2d234128d08 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -31,7 +31,12 @@ import EditIcon from '@material-ui/icons/Edit';
import CheckDecagram from '../img/check-decagram-gray.svg'
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
+import Paper from '@material-ui/core/Paper';
import TabPanelAtividades from '../Components/TabPanelAtividades.js'
+import TabPanelMeusRecursos from '../Components/TabPanelMeusRecursos.js'
+import TabPanelFavoritos from '../Components/TabPanelFavoritos.js'
+import TabPanelColecoes from '../Components/TabPanelColecoes.js'
+import TabPanelRede from '../Components/TabPanelRede.js'
export default function UserPage (props){
const {state, dispatch} = useContext(Store)
@@ -52,110 +57,119 @@ export default function UserPage (props){
return (
<>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet"/>
{
state.userIsLoggedIn?
(
[
<React.Fragment>
<HeaderDiv>
- <BreadcrumbsDiv>
- <StyledBreadcrumbs>
- <Link href="/" style={{color:"#00bcd4"}}>
- Página Inicial
- </Link>
- <span style={{color:"#a5a5a5"}}>
- Minha área
- </span>
- <span style={{color:"#a5a5a5"}}>
- Atividades
- </span>
- </StyledBreadcrumbs>
- </BreadcrumbsDiv>
+ <ContainerNoPad>
+ <BreadcrumbsDiv>
+ <StyledBreadcrumbs>
+ <Link href="/" style={{color:"#00bcd4"}}>
+ Página Inicial
+ </Link>
+ <span style={{color:"#a5a5a5"}}>
+ Minha área
+ </span>
+ <span style={{color:"#a5a5a5"}}>
+ Atividades
+ </span>
+ </StyledBreadcrumbs>
+ </BreadcrumbsDiv>
- <div style={{display:"flex", flexDirection:"column"}}>
- <MainContainerDesktop>
- <ContainerUserProfile>
- <HeaderContainer>
- <CoverContainer>
- <img src={state.currentUser.userCover} alt = "user cover avatar" style= {{width:"100%", height:"100%", objectFit : "cover" }}/>
- <input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" />
- <label htmlFor="icon-button-file">
- <Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left">
- <IconButton style={{position:"absolute",right:"0",top:"0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
- <PhotoCamera />
- </IconButton>
- </Tooltip>
- </label>
- </CoverContainer>
- <ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
- <img src={state.currentUser.userAvatar} alt = "user avatar" style={{border:"0", verticalAlign:"middle"}}/>
- <ChangeAvatarDiv style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
- <span>Alterar Foto</span>
- </ChangeAvatarDiv>
- </ProfileAvatarDiv>
- <UserProfileInfoDiv>
- <p style={{fontSize:"28px", color:"#fff", marginBottom:"2px", fontWeight:"500"}}>{state.currentUser.username}</p>
- <div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
- <p>{state.currentUser.education}</p>
- </div>
- </UserProfileInfoDiv>
- <EditProfileAnchor href="/perfil/configuracoes/editarperfil">
- <Button>
- <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
- </Button>
- </EditProfileAnchor>
- </HeaderContainer>
- <CheckTeacherDiv>
- <>
- {
- state.isCollaborativeTeacher ?
- (
- [
- <>
- <img src={CheckDecagram} style={{color:"#00bcd4"}}/>
- <span>Professor(a)</span>
- </>
- ]
- )
- :
- (
- [
- <p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
- <span style={{cursor:"pointer"}}>
- <span style={{paddingRight:"5px"}}>
- <img src={CheckDecagram}/>
+ <div style={{display:"flex", flexDirection:"column"}}>
+ <MainContainerDesktop>
+ <Paper elevation={3} style= {{width:"max-content"}}>
+ <ContainerUserProfile>
+ <HeaderContainer>
+ <CoverContainer>
+ <img src={state.currentUser.userCover} alt = "user cover avatar" style= {{width:"100%", height:"100%", objectFit : "cover" }}/>
+ <input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" />
+ <label htmlFor="icon-button-file">
+ <Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left">
+ <IconButton style={{position:"absolute",right:"0",top:"0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
+ <PhotoCamera />
+ </IconButton>
+ </Tooltip>
+ </label>
+ </CoverContainer>
+ <ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
+ <img src={state.currentUser.userAvatar} alt = "user avatar" style={{border:"0", verticalAlign:"middle"}}/>
+ <ChangeAvatarDiv style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
+ <span>Alterar Foto</span>
+ </ChangeAvatarDiv>
+ </ProfileAvatarDiv>
+ <UserProfileInfoDiv>
+ <p style={{fontSize:"28px", color:"#fff", marginBottom:"2px", fontWeight:"500"}}>{state.currentUser.username}</p>
+ <div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
+ <p>{state.currentUser.education}</p>
+ </div>
+ </UserProfileInfoDiv>
+ <EditProfileAnchor href="/perfil/configuracoes/editarperfil">
+ <Button>
+ <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
+ </Button>
+ </EditProfileAnchor>
+ </HeaderContainer>
+ <CheckTeacherDiv>
+ <>
+ {
+ state.isCollaborativeTeacher ?
+ (
+ [
+ <>
+ <img src={CheckDecagram} style={{color:"#00bcd4"}}/>
+ <span>Professor(a)</span>
+ </>
+ ]
+ )
+ :
+ (
+ [
+ <p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
+ <span style={{cursor:"pointer"}}>
+ <span style={{paddingRight:"5px"}}>
+ <img src={CheckDecagram}/>
+ </span>
+ Você é professor(a) e gostaria de publicar recursos?
+ <span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
</span>
- Você é professor(a) e gostaria de publicar recursos?
- <span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
- </span>
- </p>
- ]
- )
- }
- </>
- </CheckTeacherDiv>
- <RodapeDiv>
- <NavBarContentContainer>
- <Tabs
- value ={value}
- onChange ={handleChangeTab}
- indicatorColor ="primary"
- textColor ="primary"
- variant = "scrollable"
- scrollButtons = "auto"
- >
- <Tab label="Atividades"/>
- <Tab label="Meus Recursos"/>
- <Tab label="Favoritos"/>
- <Tab label="Coleções"/>
- <Tab label="Rede"/>
- </Tabs>
- </NavBarContentContainer>
- </RodapeDiv>
- </ContainerUserProfile>
- </MainContainerDesktop>
- </div>
- <TabPanelAtividades value={value} index = {0}/>
+ </p>
+ ]
+ )
+ }
+ </>
+ </CheckTeacherDiv>
+ <RodapeDiv>
+ <NavBarContentContainer>
+ <StyledTabs
+ value ={value}
+ onChange ={handleChangeTab}
+ indicatorColor ="primary"
+ textColor ="primary"
+ variant = "scrollable"
+ scrollButtons = "auto"
+ >
+ <StyledTab label="Atividades"/>
+ <StyledTab label="Meus Recursos"/>
+ <StyledTab label="Favoritos"/>
+ <StyledTab label="Coleções"/>
+ <StyledTab label="Rede"/>
+ </StyledTabs>
+ </NavBarContentContainer>
+ </RodapeDiv>
+ </ContainerUserProfile>
+ </Paper>
+ </MainContainerDesktop>
+ </div>
+ {value === 0 && <TabPanelAtividades/>}
+ {value === 1 && <TabPanelMeusRecursos/>}
+ {value === 2 && <TabPanelFavoritos/>}
+ {value === 3 && <TabPanelColecoes/>}
+ {value === 4 && <TabPanelRede/>}
+ </ContainerNoPad>
</HeaderDiv>
</React.Fragment>
]
@@ -173,10 +187,15 @@ export default function UserPage (props){
}
const HeaderDiv = styled.div`
- background-color : #f4f4f4;
- color : #666;
- font-size : 14px;
- line-height : 20px;
+ background-color : #f4f4f4;
+ color : #666;
+ font-size : 14px;
+ line-height : 20px;
+ padding-bottom : 40px;
+ `
+
+ const ContainerNoPad = styled.div`
+ min-width : "1170px"
`
const BreadcrumbsDiv = styled.div`
@@ -186,19 +205,19 @@ export default function UserPage (props){
`
const StyledBreadcrumbs = styled(Breadcrumbs)`
- display : flex;
- justify-content : flex-start;
- max-width : 1170px;
+ display : flex;
+ justify-content : flex-start;
+ max-width : 1170px;
`
const MainContainerDesktop = styled(Container)`
- padding : 10px 0 8px 0;
+ padding : 10px 0 8px 0;
`
const ContainerUserProfile = styled(Container)`
padding : 0;
background-color : #fff;
- magin-bottom: 30px;
+ margin-bottom: 30px;
width : 1170px;
margin-right : auto;
padding-left : 0 !important;
@@ -285,3 +304,21 @@ export default function UserPage (props){
overflow-y : hid1den !important;
margin-right : 0 !important;
`
+
+const StyledTabs = styled(Tabs)`
+ .MuiTab-textColorPrimary.Mui-selected {
+ color : #00bcd4 !important;
+ border-bottom-color : #00bcd4 !important;
+ }
+ .Mui-selected {
+ border-bottom-color : #00bcd4 !important;
+ }
+`
+const StyledTab = styled(Tab)`
+ .Mui-selected {
+ border-bottom-color : #00bcd4 !important;
+ }
+ .MuiTab-wrapper {
+ border-bottom-color : #00bcd4 !important;
+ }
+`
diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js
index 411fdd623c1f375c51d1107ec011ccf5f92211d0..a6d9fe242dcaa3734ced8da297ec5e029c6ec3af 100644
--- a/src/Pages/UserTerms.js
+++ b/src/Pages/UserTerms.js
@@ -208,7 +208,7 @@ class UserTerms extends Component {
return (
<div style={{color:"rgba(0,0,0,0.87"}} >
- <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
+
<BannerStyle>
<h2 style={{width: "100%",textAlign: "center",marginTop:"0px", paddingTop:"6rem",marginBottom:"16px",fontSize:"52px",fontFamily: "'Pompiere', cursive",color:"#fff",fontWeight:"500"}}>TERMOS DE USO</h2>
diff --git a/src/img/banner-sobre.jpg b/src/img/banner-sobre.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fa5d39fcdde21ae4740e41723f6be0322ef9add0
Binary files /dev/null and b/src/img/banner-sobre.jpg differ