diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/How.js b/src/Components/HelpCenter/TabsPlataformaMEC/How.js
index 9834d9398962afcdd63315b747f1bb2f5880c2b7..dfb466be66a71ddbdb1a56d4cef8584ec574d606 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/How.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/How.js
@@ -21,7 +21,7 @@ import styled from "styled-components";
export default function How(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -29,11 +29,11 @@ export default function How(props) {
<div style={{ marginBottom: "9px" }}>
<span>{props.title}</span>
</div>
- <div style={{ width: "640px", height: "360px" }}>
+ <div>
<iframe
title="Video Página Ajuda"
- width="640"
- height="360"
+ width="100%"
+ height={window.innerHeight}
src="https://www.youtube.com/embed/CRW5h2pHugM"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
@@ -45,36 +45,29 @@ export default function How(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
}
a {
- color: #00bcd4;
- text-decoration: none;
- :hover {
- text-decoration: underline;
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
}
}
- ul {
- padding-left: 0 !important;
- margin-top: 0;
- margin-bottom: 10px;
- line-height: 1.42857143;
- }
-
- li {
- list-style-type: none;
- font-size: 14px;
- }
-
p {
margin: 0 0 10px;
font-size: 15px;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Software.js b/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
index 9da4c8bddb9a5659b3755d965572926698d3aea7..4bd517979d9845a910c49e7923fc4cb0b454862f 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
@@ -87,7 +87,7 @@ const softwares = [
export default function Software(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -134,24 +134,18 @@ export default function Software(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
}
- a {
- color: #00bcd4;
- text-decoration: none;
- :hover {
- text-decoration: underline;
- }
- }
-
ul {
padding-left: 0 !important;
margin-top: 0;
@@ -164,6 +158,17 @@ const Card = styled.div`
font-size: 14px;
}
+ a {
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
+ }
+ }
+
p {
margin: 0 0 10px;
font-size: 15px;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Types.js b/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
index 1d30662b8f79b6741a0708cd906fb57c38d3547e..0858c1f9a229ace404a106f6a955d05330093255 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
@@ -30,7 +30,7 @@ const tipos = [
export default function Types(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -57,11 +57,13 @@ export default function Types(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
@@ -79,8 +81,19 @@ const Card = styled.div`
font-size: 14px;
}
+ a {
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
+ }
+ }
+
p {
margin: 0 0 10px;
font-size: 15px;
}
-`;
+`;
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js b/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
index 4696bce01ce19794d4adf4f827f263e65f2bc488..d267d1825d2318601eab632b6b822828174fd621 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
@@ -21,7 +21,7 @@ import styled from "styled-components";
export default function Understand(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -59,18 +59,32 @@ export default function Understand(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
}
+ a {
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
+ }
+ }
+
p {
margin: 0 0 10px;
font-size: 15px;
}
`;
+
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/What.js b/src/Components/HelpCenter/TabsPlataformaMEC/What.js
index 8bab746bc3418efd516b158125a50a366cabfa0d..074156625f153fcb8afd37226ef2ad3f4349e3b3 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/What.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/What.js
@@ -21,7 +21,7 @@ import styled from "styled-components";
export default function What(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -92,21 +92,26 @@ export default function What(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
}
a {
- color: #00bcd4;
- text-decoration: none;
- :hover {
- text-decoration: underline;
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
}
}
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Which.js b/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
index b1fe77ed63697519fb011663dbcce423708ef1c7..a03cc587dd0523e9ec74f3bec480664f30f235c8 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
@@ -28,7 +28,7 @@ const parcas = [
export default function Which(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -50,11 +50,13 @@ export default function Which(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
@@ -72,6 +74,17 @@ const Card = styled.div`
font-size: 14px;
}
+ a {
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
+ }
+ }
+
p {
margin: 0 0 10px;
font-size: 15px;
diff --git a/src/Components/UploadPageComponents/ButtonsDiv.js b/src/Components/UploadPageComponents/ButtonsDiv.js
index 9e6c0f7b6e8c7841b7407913a31df22162bfaad2..a1ac74f01571780556c2f81803d224c62fa5ae90 100644
--- a/src/Components/UploadPageComponents/ButtonsDiv.js
+++ b/src/Components/UploadPageComponents/ButtonsDiv.js
@@ -42,34 +42,34 @@ export default function ButtonsDiv(props) {
{/*botao excluir na pagina de editar*/}
<Grid item>
- <GreyButton onClick={() => { toggleModalCancelar(true) }}>
+ <GreyButton contrast={props.contrast} onClick={() => { toggleModalCancelar(true) }}>
<span className="button-text">
CANCELAR
- </span>
+ </span>
</GreyButton>
</Grid>
{
props.onPartTwo &&
<Grid item>
- <GreyButton onClick={() => { props.stepperControl(-1) }}>
+ <GreyButton contrast={props.contrast} onClick={() => { props.stepperControl(-1) }}>
<span className="button-text">
VOLTAR
- </span>
+ </span>
</GreyButton>
</Grid>
}
<Grid item>
- <GreyButton onClick={() => { if (window.confirm('O seu recurso em edição foi salvo.')) toggleRedirect(true) }}>
+ <GreyButton contrast={props.contrast} onClick={() => { if (window.confirm('O seu recurso em edição foi salvo.')) toggleRedirect(true) }}>
<span className="button-text">
CONTINUAR MAIS TARDE
- </span>
+ </span>
</GreyButton>
</Grid>
<Grid item>
- <OrangeButton type="submit">
+ <OrangeButton contrast={props.contrast} type="submit">
SALVAR E AVANÇAR
</OrangeButton>
</Grid>
diff --git a/src/Components/UploadPageComponents/Forms/Autor.js b/src/Components/UploadPageComponents/Forms/Autor.js
index 4ab8bde9e9db318c225064eecd79aab7f3dda421..5dec5827e420e25360400f09dedcf363c5cb8b55 100644
--- a/src/Components/UploadPageComponents/Forms/Autor.js
+++ b/src/Components/UploadPageComponents/Forms/Autor.js
@@ -16,28 +16,56 @@ 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, {useState, memo, useContext} from 'react'
-import {Store} from '../../../Store.js'
+import React, { useState, memo, useContext } from 'react'
+import { Store } from '../../../Store.js'
import { withStyles } from '@material-ui/core/styles';
-
+import { yellow, blue } from "@material-ui/core/colors";
import FormControl from '@material-ui/core/FormControl';
-import { StyledFormLabel, OutroAutorTextField} from '../StyledComponents.js'
+import { StyledFormLabel, OutroAutorTextField } from '../StyledComponents.js'
import RadioGroup from '@material-ui/core/RadioGroup';
import Radio from '@material-ui/core/Radio';
import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { makeStyles } from "@material-ui/styles";
+
+const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%",
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%",
+ }
+}));
const BlueRadio = withStyles({
- root: {
- color: '#666',
- '&$checked': {
- color: '#00bcd4',
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+})((props) => <Radio color="default" {...props} />);
+
+const ContrastRadio = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
},
- },
- checked: {},
+ checked: {},
})((props) => <Radio color="default" {...props} />);
-function Autor (props) {
- const {state} = useContext(Store)
+function Autor(props) {
+ const classes = useStyles();
+ const { state } = useContext(Store)
const [authorValue, setAuthorValue] = useState(props.initialValue ? props.initialValue : -1)
const [outroAutor, setOutroAutor] = useState(props.initialOutroAutor ? props.initialOutroAutor : '')
@@ -46,26 +74,29 @@ function Autor (props) {
}
return (
- <FormControl required={true} style={{width : "100%"}} onBlur={() => {props.onBlurCallback("author", getAuthor(), props.draftID)}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <FormControl required={true} style={{ width: "100%" }} onBlur={() => { props.onBlurCallback("author", getAuthor(), props.draftID) }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
<b>Autor do recurso</b>
</StyledFormLabel>
- <RadioGroup ara-label="Autor do Recurso" name="Autor do Recurso" value={authorValue} onChange={(e) => {setAuthorValue(e.target.value)}}>
- <FormControlLabel value="0" control={<BlueRadio />} label="Sou o(a) autor(a) deste recurso"/>
- <FormControlLabel value="1" control={<BlueRadio/>}
+ <RadioGroup ara-label="Autor do Recurso" name="Autor do Recurso" value={authorValue} onChange={(e) => { setAuthorValue(e.target.value) }}>
+ <FormControlLabel value="0" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label="Sou o(a) autor(a) deste recurso" />
+ <FormControlLabel value="1" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />}
label={
- <div style={{display : "flex", alignItems : "center"}}>
+ <div style={{ display: "flex", alignItems: "center" }}>
Outro:
<OutroAutorTextField
- id = {"outro-autor-form"}
- placeholder={"Nome dos autores"}
- type = {"text"}
- value = {outroAutor}
- onChange = {e => {setOutroAutor(e.target.value)}}
+ variant="outlined"
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ contrast={props.contrast}
+ id={"outro-autor-form"}
+ label={"Nome dos autores"}
+ type={"text"}
+ value={outroAutor}
+ onChange={e => { setOutroAutor(e.target.value) }}
fullWidth
multiline
- disabled = {authorValue === "0"}
- style={{paddingLeft : "5px", width : "100%"}}
+ disabled={authorValue === "0"}
+ style={{ paddingLeft: "5px", width: "100%" }}
/>
</div>}
/>
diff --git a/src/Components/UploadPageComponents/Forms/Idioma.js b/src/Components/UploadPageComponents/Forms/Idioma.js
index 79de2d04f8be2e66ca72f772679999af94e06b78..61b138ab9845dbdc603632dbbaf07f24a72c3f70 100644
--- a/src/Components/UploadPageComponents/Forms/Idioma.js
+++ b/src/Components/UploadPageComponents/Forms/Idioma.js
@@ -16,56 +16,107 @@ 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, {useState} from 'react'
+import React, { useState } from 'react'
import FormControl from '@material-ui/core/FormControl';
-import {StyledFormLabel} from '../StyledComponents.js'
-import ListItemText from '@material-ui/core/ListItemText';
+import { StyledFormLabel } from '../StyledComponents.js'
import Checkbox from '@material-ui/core/Checkbox';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
+import { withStyles } from '@material-ui/core/styles';
+import { yellow, blue } from "@material-ui/core/colors";
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
-export default function Idioma (props) {
+const BlueCheckBox = withStyles({
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function Idioma(props) {
const [chosenLanguage, setChosenLanguage] = useState(props.initialValue ? props.initialValue : [])
const [ids, setIds] = useState(props.initialIDValue ? props.initialIDValue : [])
- const handleChangeLanguage = (event) => {
- let newLanguage = event.target.value.pop()
- if (!chosenLanguage.some(language => language === newLanguage.name)) {
- setChosenLanguage(chosenLanguage => [...chosenLanguage, newLanguage.name]);
- setIds(ids => [...ids, newLanguage.id])
+ const handleChangeLanguage = (language) => {
+ const languageIndex = chosenLanguage.indexOf(language.name);
+ const copyChosenLanguages = [...chosenLanguage];
+ const copyIds = [...ids]
+
+ if (languageIndex > -1) {
+ copyChosenLanguages.splice(languageIndex, 1);
+ copyIds.splice(languageIndex, 1);
}
- else
- {
- if (chosenLanguage.length > 0) {
- setChosenLanguage(chosenLanguage.filter((language) => {return language !== newLanguage.name}));
- setIds(ids.filter((id) => {return id !== newLanguage.id}))
- }
+ else {
+ copyChosenLanguages.push(language.name);
+ copyIds.push(language.id);
}
+
+ setChosenLanguage(copyChosenLanguages);
+ setIds(copyIds);
+
+ console.log(copyChosenLanguages);
+ console.log(copyIds);
+ // if (!chosenLanguage.some(language => language === newLanguage.name)) {
+ // setChosenLanguage(chosenLanguage => [...chosenLanguage, newLanguage.name]);
+ // setIds(ids => [...ids, newLanguage.id])
+ // }
+ // else {
+ // if (chosenLanguage.length > 0) {
+ // setChosenLanguage(chosenLanguage.filter((language) => { return language !== newLanguage.name }));
+ // setIds(ids.filter((id) => { return id !== newLanguage.id }))
+ // }
+ // }
};
return (
- <FormControl style={{minWidth : "30%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <FormControl style={{ minWidth: "30%" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
<b>Idioma</b><span>*</span>
</StyledFormLabel>
- <Select
+
+ <FormGroup row onBlur={() => { props.onBlurCallback("language_ids", ids, props.draftID) }}>
+ {
+ props.languages.map((language) => {
+ return <FormControlLabel
+ value={language}
+ key={language.name}
+ control={props.contrast === "" ? <BlueCheckBox checked={chosenLanguage.indexOf(language.name) > -1} onChange={() => handleChangeLanguage(language)} /> : <ContrastCheckBox checked={chosenLanguage.indexOf(language.name) > -1} onChange={() => handleChangeLanguage(language)} />}
+ label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{language.name}</span>}
+ />
+ })
+ }
+ </FormGroup>
+
+ {/* <Select
value={chosenLanguage}
multiple
renderValue={(selected) => selected.join(', ')}
name="Idioma"
onChange={handleChangeLanguage}
- onBlur={() => {props.onBlurCallback("language_ids", ids, props.draftID)}}
+ onBlur={() => { props.onBlurCallback("language_ids", ids, props.draftID) }}
>
{
- props.languages.map( language =>
+ props.languages.map(language =>
<MenuItem key={language.name} value={language}>
<Checkbox checked={chosenLanguage.indexOf(language.name) > -1} />
<ListItemText primary={language.name} />
</MenuItem>
)
}
- </Select>
+ </Select> */}
</FormControl>
)
}
diff --git a/src/Components/UploadPageComponents/Forms/Keywords.js b/src/Components/UploadPageComponents/Forms/Keywords.js
index fa2418b706dc96f56f88f60f7ef1014fd66b40dd..7b1c65cac3bc4c6750ce43f4536c0e24fde71751 100644
--- a/src/Components/UploadPageComponents/Forms/Keywords.js
+++ b/src/Components/UploadPageComponents/Forms/Keywords.js
@@ -16,16 +16,37 @@ 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, {useState, memo, useEffect, useRef} from 'react'
+import React, { useState, memo, useEffect, useRef } from 'react'
import FormControl from '@material-ui/core/FormControl';
-import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
-import FormHelperText from '@material-ui/core/FormHelperText';
-import Chip from '@material-ui/core/Chip';
+import { StyledTextField, StyledFormLabel } from '../StyledComponents.js'
+import Grid from '@material-ui/core/Grid';
+import styled from 'styled-components';
+import DeleteIcon from '@material-ui/icons/Delete';
-function Keywords (props) {
+import { makeStyles } from "@material-ui/styles";
+import { Chip } from '@material-ui/core';
+const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%",
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%",
+ }
+}));
+
+function Keywords(props) {
+ const classes = useStyles();
const [keywords, setKeywords] = useState(props.initialValue ? props.initialValue : [])
- const handleSetKeywords = (newKeyword) => {setKeywords(newKeyword)}
+ const handleSetKeywords = (newKeyword) => { setKeywords(newKeyword) }
const deleteKeyword = (keywordToDelete) => {
handleSetKeywords(keywords.filter((keyword) => keyword !== keywordToDelete))
}
@@ -33,19 +54,19 @@ function Keywords (props) {
const resettingRef = useRef(false);
useEffect(() => {
- if(resettingRef.current){ //used to ensure that keywords are updated before sending (after a delete)
- resettingRef.current = false;
- props.onBlurCallback("tags", keywords, props.draftID);
+ if (resettingRef.current) { //used to ensure that keywords are updated before sending (after a delete)
+ resettingRef.current = false;
+ props.onBlurCallback("tags", keywords, props.draftID);
}
- },[keywords])
+ }, [keywords])
const [keywordsBuffer, setKeywordsBuffer] = useState('')
const handleKeywords = (event) => {
let userInput = event.target.value;
- if(userInput.indexOf(',') !== -1 ) {
- if(userInput.length > 1) {
+ if (userInput.indexOf(',') !== -1) {
+ if (userInput.length > 1) {
handleSetKeywords([...keywords, userInput.split(',')[0]])
}
setKeywordsBuffer('')
@@ -58,40 +79,45 @@ function Keywords (props) {
return (
<React.Fragment>
- <FormControl required={true} style={{width : "100%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <FormControl required={true} style={{ width: "100%" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
<b>Palavras-chave para buscar o Recurso</b>
- <span style={{color : "#a5a5a5", paddingLeft : "10px"}}>
- (Use vÃrgula ou enter para separar as palavras-chave)</span>
+ <span style={props.contrast === "" ? { color: "#a5a5a5", paddingLeft: "10px" } : { color: "white", paddingLeft: "10px" }}>
+ (Use vÃrgula ou enter para separar as palavras-chave)</span>
</StyledFormLabel>
<StyledTextField
- id = {"text-form"}
+ contrast={props.contrast}
+ variant='outlined'
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ id={"text-form"}
placeholder={"Ex: Biomas, Geografia, ..."}
- type = {"text"}
+ type={"text"}
value={keywordsBuffer}
onChange={handleKeywords}
onKeyDown={(event) => {
- if(event.keyCode === 13){
+ if (event.keyCode === 13) {
handleSetKeywords([...keywords, keywordsBuffer])
setKeywordsBuffer('')
- }}
+ }
+ }
}
fullWidth
- onBlur={() => {props.onBlurCallback("tags", keywords, props.draftID)}}
+ onBlur={() => { props.onBlurCallback("tags", keywords, props.draftID) }}
/>
</FormControl>
+ <SizedBox />
{
keywords.length !== 0 &&
- <FormHelperText>
- {
- keywords.map( (keyword) =>
- <Chip label={keyword} key={keyword} onDelete={() => {resettingRef.current = true; deleteKeyword(keyword);}} />
- )
- }
- </FormHelperText>
+ keywords.map((keyword) =>
+ <Chip style={props.contrast === "" ? { margin: "0.3em 0.5em" } : { border: "1px solid white", backgroundColor: "black", margin: "0.3em 0.5em", color: "white" }} label={keyword} key={keyword} onDelete={() => deleteKeyword(keyword)} deleteIcon={<DeleteIcon style={props.contrast === "" ? {} : { color: "white" }} />} />
+ )
}
</React.Fragment>
)
}
+const SizedBox = styled.div`
+ height: 2em;
+`
+
export default memo(Keywords)
diff --git a/src/Components/UploadPageComponents/Forms/NewTitle.js b/src/Components/UploadPageComponents/Forms/NewTitle.js
index b5d27708068df08fa2969420afde3342465873d2..c1e5f897f6249a59c2fa28935312e7b2a07ea7a9 100644
--- a/src/Components/UploadPageComponents/Forms/NewTitle.js
+++ b/src/Components/UploadPageComponents/Forms/NewTitle.js
@@ -16,46 +16,65 @@ 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, {useState, memo} from 'react'
+import React, { useState, memo } from 'react'
import FormControl from '@material-ui/core/FormControl';
-import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
-import FormHelperText from '@material-ui/core/FormHelperText';
+import { StyledTextField, StyledFormLabel } from '../StyledComponents.js'
+import { makeStyles } from "@material-ui/styles";
+const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%",
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%",
+ }
+}));
-function NewTitle (props) {
+function NewTitle(props) {
+ const classes = useStyles();
const [objTitle, setFormValue] = useState({
- error : false,
- value : props.initialValue ? props.initialValue : ""
+ error: false,
+ value: props.initialValue ? props.initialValue : ""
})
const handleChangeTitle = (e) => {
let userInput = e.target.value
let flag = (userInput.length > 100 || userInput.length === 0 ? true : false)
- setFormValue({...objTitle,
- error : flag,
- value : userInput
+ setFormValue({
+ ...objTitle,
+ error: flag,
+ value: userInput
})
}
return (
- <FormControl required={true} style={{width : "100%", height : "100px"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <FormControl required={true} style={{ width: "100%", height: "100px" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
<b>TÃtulo do Recurso</b>
</StyledFormLabel>
<StyledTextField
- id = {"title-form"}
- placeholder={"Ex: Jogo Virtual sobre os Biomas do Brasil"}
- type = {"text"}
- value = {objTitle.value}
- onChange = {e => {handleChangeTitle(e)}}
- helperText = {objTitle.value.length + "/100"}
- error = {objTitle.error}
+ contrast={props.contrast}
+ id={"title-form"}
+ placeholder="Ex: Jogo Virtual sobre os Biomas do Brasil"
+ type={"text"}
+ value={objTitle.value}
+ variant="outlined"
+ onChange={e => { handleChangeTitle(e) }}
+ helperText={objTitle.value.length + "/100"}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ error={objTitle.error}
fullWidth
multiline
- onBlur={() => {props.onBlurCallback("name", objTitle.value, props.draftID)}}
- />
- {objTitle.value.length === 0 && objTitle.error &&
- <FormHelperText style={{fontSize : "14px", position : "relative", top : "-26px"}}>Faltou definir um tÃtulo.</FormHelperText>}
+ onBlur={() => { props.onBlurCallback("name", objTitle.value, props.draftID) }}
+ />
</FormControl>
)
}
diff --git a/src/Components/UploadPageComponents/Forms/SobreORecurso.js b/src/Components/UploadPageComponents/Forms/SobreORecurso.js
index ff82f818fac17ad111411b65ba4505dd3215fcc9..aed295a3fa6dbf205e0a7f8e8f9e73ead515fa49 100644
--- a/src/Components/UploadPageComponents/Forms/SobreORecurso.js
+++ b/src/Components/UploadPageComponents/Forms/SobreORecurso.js
@@ -19,20 +19,42 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, {useState, memo} from 'react'
import FormControl from '@material-ui/core/FormControl';
import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
+import { makeStyles } from "@material-ui/styles";
+
+const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%",
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%",
+ }
+}));
function SobreORecurso (props) {
+ const classes = useStyles();
const [objDescription, setDescription] = useState(props.initialValue ? props.initialValue : '')
const handleSetDescription = (event) => {setDescription(event.target.value)}
return (
<FormControl style={{width : "100%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <StyledFormLabel contrast ={props.contrast} component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
<b>Descrição geral do Recurso</b> (Opcional)
</StyledFormLabel>
<StyledTextField
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ contrast = {props.contrast}
id = {"description-form"}
placeholder={"Quais assuntos são contemplados neste Recurso? Para quais objetivos este Recurso pode ser destinado?"}
+ variant='outlined'
type = {"text"}
value={objDescription}
onChange={handleSetDescription}
diff --git a/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js b/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
index 4e7a9f29ba8a55c6257cd1f03bb80e3821ab7aab..d55daaaebe8614e903cff812372ee4ce2326dd48 100644
--- a/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
+++ b/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
@@ -16,28 +16,28 @@ 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, {useState, memo} from 'react'
+import React, { useState, memo } from 'react'
import FormControl from '@material-ui/core/FormControl';
-import {StyledRadio, StyledFormLabel} from '../StyledComponents.js'
+import { StyledRadio, StyledFormLabel } from '../StyledComponents.js'
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-
-function TipoDeRecurso (props) {
+
+function TipoDeRecurso(props) {
const [objTypeValue, chooseObjType] = useState(props.initialValue ? props.initialValue : 0)
- const handleChangeObjType = (event) => {chooseObjType(Number(event.target.value))}
+ const handleChangeObjType = (event) => { chooseObjType(Number(event.target.value)) }
return (
- <FormControl required={true} style={{width : "100%"}} onBlur={() => {props.onBlurCallback("object_type_id", objTypeValue, props.draftID)}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <FormControl required={true} style={{ width: "100%" }} onBlur={() => { props.onBlurCallback("object_type_id", objTypeValue, props.draftID) }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
<b>Tipo de recurso</b>
</StyledFormLabel>
- <RadioGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={objTypeValue} onChange={handleChangeObjType} style={{justifyContent : "center"}}>
+ <RadioGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={objTypeValue} onChange={handleChangeObjType} style={{ justifyContent: "center" }}>
{
- props.objTypes.map( (type) =>
- <FormControlLabel key={type.id} value={type.id}
- control={<StyledRadio label={type.name} checked={objTypeValue === type.id}/>}
+ props.objTypes.map((type) =>
+ <FormControlLabel key={type.id} value={type.id}
+ control={<StyledRadio contrast={props.contrast} label={type.name} checked={objTypeValue === type.id} />}
/>
)
diff --git a/src/Components/UploadPageComponents/PartOne.js b/src/Components/UploadPageComponents/PartOne.js
index 250428dbf319dd5488a5bcebb31743d787d6a73b..a97248e2bc55c72ffc4d07fb71149c0487c070b9 100644
--- a/src/Components/UploadPageComponents/PartOne.js
+++ b/src/Components/UploadPageComponents/PartOne.js
@@ -16,8 +16,8 @@ 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, {useState, useEffect, useContext, useRef} from 'react'
-import {Store} from '../../Store.js'
+import React, { useState, useEffect, useContext, useRef } from 'react'
+import { Store } from '../../Store.js'
import Grid from '@material-ui/core/Grid';
import ButtonsDiv from './ButtonsDiv.js'
import SobreORecurso from './Forms/SobreORecurso.js'
@@ -26,14 +26,14 @@ import Keywords from './Forms/Keywords.js'
import Autor from './Forms/Autor.js'
import TipoDeRecurso from './Forms/TipoDeRecurso.js'
import Idioma from './Forms/Idioma.js'
-import {SendInfo} from './SendInfo.js'
-import {getRequest} from '../HelperFunctions/getAxiosConfig.js'
+import { SendInfo } from './SendInfo.js'
+import { getRequest } from '../HelperFunctions/getAxiosConfig.js'
import SnackBar from '../../Components/SnackbarComponent';
import LoadingSpinner from '../../Components/LoadingSpinner'
-export default function PartOne (props) {
+export default function PartOne(props) {
// {/*const [subjects, setSubjects] = useState([])*/}
- const {state} = useContext(Store)
+ const { state } = useContext(Store)
const didMountRef = useRef(false);
const didMountRefObj = useRef(false);
@@ -68,23 +68,23 @@ export default function PartOne (props) {
})
}
- function checkPartOne (data) {
+ function checkPartOne(data) {
return (
- data.name !== null &&
- data.tags.length !== 0 &&
- data.author !== null &&
- data.object_type !== null &&
+ data.name !== null &&
+ data.tags.length !== 0 &&
+ data.author !== null &&
+ data.object_type !== null &&
data.language.length !== 0 &&
(data.attachments.length !== 0 ||
- data.link !== null)
+ data.link !== null)
)
}
- function handleSuccessGetObjTypes (data) {
+ function handleSuccessGetObjTypes(data) {
setObjTypes(data.sort((a, b) => (a.name) > (b.name) ? 1 : -1))
}
- function handleSuccessGetFormData (data) {
+ function handleSuccessGetFormData(data) {
if (checkPartOne(data)) {
props.stepperControl(1)
} else {
@@ -98,40 +98,40 @@ export default function PartOne (props) {
}
}
- function handleSuccessfulGet (data) {
+ function handleSuccessfulGet(data) {
setLearningObject(data)
}
- useEffect( () => {
- getRequest(`/object_types/`, handleSuccessGetObjTypes, (error) => {console.log(error)})
- getRequest(`/languages/`, (data) => {setLanguages(data)}, (error) => {console.log(error)})
+ useEffect(() => {
+ getRequest(`/object_types/`, handleSuccessGetObjTypes, (error) => { console.log(error) })
+ getRequest(`/languages/`, (data) => { setLanguages(data) }, (error) => { console.log(error) })
const url = `/learning_objects/${props.draftID}`
- getRequest(url, handleSuccessfulGet, (error) => {console.log(error)})
+ getRequest(url, handleSuccessfulGet, (error) => { console.log(error) })
}, [])
- useEffect( () => {
+ useEffect(() => {
if (didMountRef.current) {
- toggleLoading(false)
+ toggleLoading(false)
}
else {
- didMountRef.current = true;
+ didMountRef.current = true;
}
}, [learningObject])
- useEffect( () => {
+ useEffect(() => {
if (didMountRefObj.current) {
- toggleLoadingObj(false)
+ toggleLoadingObj(false)
}
else {
- didMountRefObj.current = true;
+ didMountRefObj.current = true;
}
}, [objTypes])
const handleSubmit = (e) => {
e.preventDefault();
- getRequest(`/learning_objects/${props.draftID}`,
- handleSuccessGetFormData,
+ getRequest(`/learning_objects/${props.draftID}`,
+ handleSuccessGetFormData,
() => {
const info = {
open: true,
@@ -140,7 +140,7 @@ export default function PartOne (props) {
color: 'red',
}
handleSnackInfo(info)
- }
+ }
)
}
@@ -157,65 +157,65 @@ export default function PartOne (props) {
!loading && !loadingObj ? (
<form onSubmit={handleSubmit}>
{/*------------------------------Titulo-----------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <NewTitle draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.name}/>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <NewTitle contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.name} />
</Grid>
{/*------------------------------Sobre------------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <SobreORecurso draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.description}/>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <SobreORecurso contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.description} />
</Grid>
{/*------------------------------Palavras-chave------------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Keywords draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.tags !== undefined ? learningObject.tags.map((tag) => tag.name) : null}/>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <Keywords contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.tags !== undefined ? learningObject.tags.map((tag) => tag.name) : null} />
</Grid>
{/*------------------------------Autor------------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Autor draftID={props.draftID} onBlurCallback={SendInfo}
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <Autor contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo}
initialValue={
learningObject.author === state.currentUser.name ?
- 0 : 1
+ 0 : 1
}
initialOutroAutor={
learningObject.author !== state.currentUser.name ?
- learningObject.author : ''
+ learningObject.author : ''
}
/>
</Grid>
{/*------------------------------Tipo do Objeto------------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <TipoDeRecurso objTypes={objTypes} draftID={props.draftID} onBlurCallback={SendInfo}
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <TipoDeRecurso contrast={props.contrast} objTypes={objTypes} draftID={props.draftID} onBlurCallback={SendInfo}
initialValue={learningObject.object_type !== undefined && learningObject.object_type !== null ? objTypes.filter((type) => type.name === learningObject.object_type)[0].id : null}
/>
</Grid>
{/*------------------------------Idioma------------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Idioma languages={languages} draftID={props.draftID} onBlurCallback={SendInfo}
- initialValue={learningObject.language !== undefined ? learningObject.language.map((language) => language.name) : null} initialIDValues={learningObject.language !== undefined ? learningObject.language.map((language) => language.id) : null}
- />
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <Idioma contrast={props.contrast} languages={languages} draftID={props.draftID} onBlurCallback={SendInfo}
+ initialValue={learningObject.language !== undefined ? learningObject.language.map((language) => language.name) : null} initialIDValues={learningObject.language !== undefined ? learningObject.language.map((language) => language.id) : null}
+ />
</Grid>
{/*------------------------------Botoes------------------------------------------*/}
<Grid item xs={12}>
- <ButtonsDiv draftID={props.draftID} stepperControl={props.stepperControl}/>
+ <ButtonsDiv contrast={props.contrast} draftID={props.draftID} stepperControl={props.stepperControl} />
</Grid>
- <Grid item xs={12} style={{marginTop : "20px"}}>
- <span style={{marginTop : "20px", fontWeight : "200", color : "#a5a5a5", paddingLeft : "10px"}}>
+ <Grid item xs={12} style={{ marginTop: "20px" }}>
+ <span style={props.contrast === "" ? { marginTop: "20px", fontWeight: "200", color: "#a5a5a5", paddingLeft: "10px" } : { marginTop: "20px", fontWeight: "200", color: "white", paddingLeft: "10px" }}>
* Campos obrigatórios
</span>
</Grid>
</form>
)
- :
- (
- <LoadingSpinner text={"CARREGANDO"}/>
- )
+ :
+ (
+ <LoadingSpinner text={"CARREGANDO"} />
+ )
}
- </React.Fragment>
+ </React.Fragment >
)
}
diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js
index e197df897522f83790d7c64bcd2927054137c027..3034d10028f2d36c21dbdb8f1ddbf3ef5da39b57 100644
--- a/src/Components/UploadPageComponents/Stepper.js
+++ b/src/Components/UploadPageComponents/Stepper.js
@@ -18,134 +18,59 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react';
import styled from 'styled-components'
-import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
-import Stepper from '@material-ui/core/Stepper';
-import Step from '@material-ui/core/Step';
-import StepLabel from '@material-ui/core/StepLabel';
import Check from '@material-ui/icons/Check';
-
-const useColorlibStepIconStyles = makeStyles({
- root: {
- backgroundColor: '#fff',
- color: '#00bcd4',
- width: 36,
- height: 36,
- display: 'flex',
- border: 'solid 3px #00bcd4',
- borderRadius: '50%',
- justifyContent: 'center',
- alignItems: 'center',
- },
- active: {
- backgroundColor: '#00bcd4',
- color: '#fff',
- },
- completed: {
- backgroundColor: '#00bcd4',
- color: '#fff',
- },
-});
-
-function ColorlibStepIcon(props) {
- const classes = useColorlibStepIconStyles();
- const { active, completed } = props;
-
- const icons = {
- 1: '1',
- 2: '2',
- 3: '3',
- };
-
- return (
- <div
- className={clsx(classes.root, {
- [classes.active]: active,
- [classes.completed]: completed,
- })}
- >
- {completed ? <Check className={classes.completed} /> : icons[String(props.icon)]}
- </div>
- );
-}
-
-ColorlibStepIcon.propTypes = {
- /**
- * Whether this step is active.
- */
- active: PropTypes.bool,
- /**
- * Mark the step as completed. Is passed to child components.
- */
- completed: PropTypes.bool,
- /**
- * The label displayed in the step icon.
- */
- icon: PropTypes.node,
-};
-
-// const useStyles = makeStyles((theme) => ({
-// root: {
-// width: '100%',
-// },
-// button: {
-// marginRight: theme.spacing(1),
-// },
-// instructions: {
-// marginTop: theme.spacing(1),
-// marginBottom: theme.spacing(1),
-// },
-// }));
-
-function getSteps() {
- return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
-}
-
-// function getStepContent(step) {
-// switch (step) {
-// case 0:
-// return 'Select campaign settings...';
-// case 1:
-// return 'What is an ad group anyways?';
-// case 2:
-// return 'This is the bit I really care about!';
-// default:
-// return 'Unknown step';
-// }
-// }
+import Grid from '@material-ui/core/Grid';
export default function CustomizedSteppers(props) {
- // const classes = useStyles();
- const steps = getSteps();
-
- // {/* const handleNext = () => {
- // setActiveStep((prevActiveStep) => prevActiveStep + 1);
- // };
-
- // const handleBack = () => {
- // setActiveStep((prevActiveStep) => prevActiveStep - 1);
- // };
-
- // const handleReset = () => {
- // setActiveStep(0);
- // };*/}
+ console.log(props);
return (
-
- <>
- <StyledStepper style={props.contrast === "" ? { backgroundColor: "#e5e5e5", borderRadius: "50px", justifyContent: "space-between" } : { backgroundColor: "black", border: "1px solid white", borderRadius: "50px", justifyContent: "space-between" }} activeStep={props.activeStep} connector={<></>}>
- {steps.map((label) => (
- <Step key={label}>
- <StepLabel StepIconComponent={ColorlibStepIcon} />
- </Step>
- ))}
- </StyledStepper>
- </>
+ <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'>
+ {
+ [0, 1, 2].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "step"}>
+ {
+ index < props.activeStep ?
+ <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : index
+ }
+ </div>
+ </Grid>
+ )
+ })
+ }
+ </MainGrid >
);
}
-const StyledStepper = styled(Stepper)`
- padding : 7px !important;
-
+const MainGrid = styled(Grid)`
+ padding: 1em;
+ border-radius: 50px;
+ width: 90%;
+ margin: 0 auto;
+ border: ${props => props.contrast === "" ? "2px solid #d4d4d4" : "2px solid white"};
+
+ .currStep{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 2px solid rgba(255, 255, 255, 0.6);
+ color: white;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"};
+ border-radius: 50%;
+ }
+
+ .step{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: ${props => props.contrast === "" ? "2px solid #00bcd4" : "2px solid white"};
+ border-radius: 50%;
+ }
`
+
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index 2caa077ee007db22b38f891588d7ddca07dd3da6..5eeb04041e1139027164049f2aec4b15fc8ceffe 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -298,8 +298,11 @@ export const ObjTypeBox = styled.div`
height : 100px;
width : 100px;
border-radius : 10px;
- background-color : ${props => props.checked ? "#00bcd4" : "#f4f4f4"};
- color : ${props => props.checked ? "#fff" : "#00bcd4"};
+ background-color : ${props => props.contrast === "" ? props.checked ? "#00bcd4" : "#f4f4f4" : "black"};
+ color : ${props => props.contrast === "" ? props.checked ? "#fff" : "#00bcd4" : "yellow"};
+ text-decoration : ${props => props.contrast === "Contrast" ? props.checked ? "none" : "underline" : "none"};
+ border : ${props => props.contrast === "Contrast" ? props.checked ? "1px solid white" : "0" : "0"};
+ font-weight : ${props => props.checked ? "bold" : "lighter"};
span {
padding-top : 5%;
@@ -308,7 +311,7 @@ export const ObjTypeBox = styled.div`
justify-content : center;
.icon {
- color : inherit;
+ color : ${props => props.contrast === "" ? props.checked ? "#fff" : "#00bcd4" : "white"};
align-self : center;
height : 48px;
width : 48px;
@@ -322,7 +325,7 @@ export const ObjTypeBox = styled.div`
}
svg path {
- fill : ${props => props.checked ? "#fff" : "#00bcd4"};
+ fill : ${props => props.contrast === "" ? props.checked ? "#fff" : "#00bcd4" : "white"};
}
}
`
@@ -331,38 +334,39 @@ export const OutroAutorTextField = styled(TextField)`
font-size : 14px;
width : 100% !important;
- .MuiFormControl-root {
- margin : 18px 0 !important;
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
}
- .MuiFormHelperText-root {
- text-align : left;
- font-size : 14px !important ;
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
label.Mui-focused {
- color : #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
color : red;
}
- .MuiInput-underline::after {
- border-bottom: 1px solid #00bcd4;
- }
.MuiFormHelperText-root {
- font-size : 12px !important;
- text-align : right !important;
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
`
export const StyledFormLabel = styled(FormLabel)`
b {
- color : #666 !important;
+ color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
}
span {
- color : #a5a5a5;
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
}
`
@@ -371,60 +375,65 @@ export const StyledTextField = styled(TextField)`
width : 100% !important;
.MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
}
label{
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
label.Mui-focused {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
color : red;
}
+
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
`
const useStyles = makeStyles({
- root: {
- '&:hover': {
- backgroundColor: 'transparent',
- },
- }
+ root: {
+ '&:hover': {
+ backgroundColor: 'transparent',
+ },
+ }
})
export function StyledRadio(props) {
- const classes = useStyles();
- return (
- <Radio
- className={classes.root}
- disableRipple
- checkedIcon={
- <ObjTypeBox checked>
- <span>
- {GetIconByName(props.label)}
- <p>{props.label}</p>
- </span>
- </ObjTypeBox>
- }
- icon={
- <ObjTypeBox>
- <span>
- {GetIconByName(props.label)}
- <p>{props.label}</p>
- </span>
- </ObjTypeBox>
- }
- {...props}
- />
- )
+ const classes = useStyles();
+ return (
+ <Radio
+ className={classes.root}
+ disableRipple
+ checkedIcon={
+ <ObjTypeBox contrast={props.contrast} checked>
+ <span>
+ {GetIconByName(props.label)}
+ <p>{props.label}</p>
+ </span>
+ </ObjTypeBox>
+ }
+ icon={
+ <ObjTypeBox contrast={props.contrast}>
+ <span>
+ {GetIconByName(props.label)}
+ <p>{props.label}</p>
+ </span>
+ </ObjTypeBox>
+ }
+ {...props}
+ />
+ )
}
export const StyledDiv = styled.div`
@@ -445,28 +454,25 @@ export const OrangeButton = styled(Button)`
export const GreyButton = styled(Button)`
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
}
- max-height : 36px !important;
- background-color : transparent !important;
- color : #666 !important;
- text-decoration : none !important;
+ background: ${props => props.contrast === "" ? "transparent !important" : "black !important"};
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
outline : none !important;
text-align : center !important;
.button-text {
cursor : pointer;
- line-height : 36px;
text-align : center;
color : currentColor;
white-space : nowrap;
text-transform : uppercase;
font-weight : 600 !important;
- font-size : 14px;
font-style : inherit;
font-variant : inherit;
- padding : 6px 16px !important;
}
`
diff --git a/src/Pages/TabsHelp/TabPlataformaMEC.js b/src/Pages/TabsHelp/TabPlataformaMEC.js
index c704d98fed23e0a02df21be202f1233284067c9e..ad0bb152b2cc0b480a06d09baf5cfd9a7176ce17 100644
--- a/src/Pages/TabsHelp/TabPlataformaMEC.js
+++ b/src/Pages/TabsHelp/TabPlataformaMEC.js
@@ -16,10 +16,8 @@ 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, { useState } from 'react';
+import React, { useState, useContext } from 'react';
import styled from 'styled-components';
-import Tabs from '@material-ui/core/Tabs'
-import Tab from '@material-ui/core/Tab';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import Grid from '@material-ui/core/Grid';
import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
@@ -31,248 +29,213 @@ import Which from '../../Components/HelpCenter/TabsPlataformaMEC/Which';
import Types from '../../Components/HelpCenter/TabsPlataformaMEC/Types';
import Software from '../../Components/HelpCenter/TabsPlataformaMEC/Software';
import How from '../../Components/HelpCenter/TabsPlataformaMEC/How';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+import { Store } from '../../Store';
+export default function TabPlataformaMEC(props) {
+ const { state } = useContext(Store);
-
-
-
-
-
-export default function TabPlataformaMEC (props) {
- const tabs= [
+ const tabs = [
'O que é a plataforma MEC?',
'Como foi construÃda a Plataforma MEC?',
'Entendendo as 3 áreas da Plataforma',
'Quais são os Portais Parceiros?',
'Tipos de recursos',
'Softwares especÃficos',
- 'Plataforma MEC'
]
-
+
const [tabValue, setTabValue] = useState(
Number(props.location.state.value) || 0);
- const handleChangeTab = (e, newValue) => {
- setTabValue(newValue)
-}
-
+ const handleChangeTab = (event, index) => {
+ event.preventDefault();
+ setTabValue(index);
+ }
+ return (
+ <MainPage contrast={state.contrast}>
+ <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet" />
- return(
- <div style={{backgroundColor:"#f4f4f4"}}>
- <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
-
<Secao>
<BreadCrumbsDiv>
- <StyledBreadCrumbs>
+ <StyledBreadCrumbs contrast={state.contrast}>
<Link to="/" >
- Página Inicial
+ Página Inicial
</Link>
<Link to="ajuda" >
Ajuda
</Link>
-
+
<span>
- {tabs[6]}
+ Plataforma MEC
</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
- <Grid container spacing={4}>
- <Grid item xs={3}>
- <Menu>
- <h4>{tabs[6]}</h4>
- <TabsStyled orientation = "vertical"
- variant = "scrollable"
- value = {tabValue}
- onChange = {handleChangeTab}
- TabIndicatorProps = {{style:{display: "none"}}}
- >
- <TabStyled label={tabs[0]}></TabStyled>
- <TabStyled label={tabs[1]}></TabStyled>
- <TabStyled label={tabs[2]}></TabStyled>
- <TabStyled label={tabs[3]}></TabStyled>
- <TabStyled label={tabs[4]}></TabStyled>
- <TabStyled label={tabs[5]}></TabStyled>
- </TabsStyled>
- <br/>
- <div className="voltarInicio">
- <a href="ajuda">VOLTAR AO ÃNICIO</a>
- </div>
- <hr/>
- <div className="procurava">
- Não encontrou o que procurava? Entre em
- <a href="contato"> contato</a>
- </div>
+
+ <MainGrid container justify='center' spacing={4}>
+ <Grid xs={12} md={3} sm={4} item>
+ <Menu contrast={state.contrast}>
+ <p className="title">
+ Plataforma MEC
+ </p>
+ <div className="sized-box" />
+
+ {
+ tabs.map((tab, index) => {
+ return (
+ <TabStyled contrast={state.contrast} active={index === tabValue} name={index} onClick={(event) => handleChangeTab(event, index)} key={new Date().toISOString() + index}>
+ {tab}
+ </TabStyled>
+ )
+ })
+ }
+
+ <div className="sized-box" />
+ <Link to="ajuda">
+ <p className="go-back">
+ Voltar ao inÃcio
+ </p>
+ </Link>
+
+ <div className="sized-box" />
+ <p className="sub-title">
+ Não encontrou o que procurava? Entre em
+ <Link to="contato">
+ <span className="go-back"> contato</span>
+ </Link>
+ </p>
</Menu>
</Grid>
- <Grid item xs={9}>
+ <Grid xs={12} md={9} sm={8} item>
<Principal>
- {tabValue === 0 && <What title={tabs[0]}/>}
- {tabValue === 1 && <How title={tabs[1]}/>}
- {tabValue === 2 && <Understand title={tabs[2]}/>}
- {tabValue === 3 && <Which title={tabs[3]}/>}
- {tabValue === 4 && <Types title={tabs[4]}/>}
- {tabValue === 5 && <Software title={tabs[5]}/>}
-
- <Grid style={{marginBlock:"50px"}} container spacing={2}>
- <Grid item xs={4}>
- <CardEncontrando/>
- </Grid>
- <Grid item xs={4}>
- <CardParticipando/>
- </Grid>
- <Grid item xs={4}>
- <CardGerenciando/>
- </Grid>
-
- </Grid>
-
+ {tabValue === 0 && <What contrast={state.contrast} title={tabs[0]} />}
+ {tabValue === 1 && <How contrast={state.contrast} title={tabs[1]} />}
+ {tabValue === 2 && <Understand contrast={state.contrast} title={tabs[2]} />}
+ {tabValue === 3 && <Which contrast={state.contrast} title={tabs[3]} />}
+ {tabValue === 4 && <Types contrast={state.contrast} title={tabs[4]} />}
+ {tabValue === 5 && <Software contrast={state.contrast} title={tabs[5]} />}
</Principal>
- </Grid>
- </Grid>
+ </Grid>
+ </MainGrid>
+ <MainGrid container spacing={4}>
+ <Grid xs={12} md={4} item>
+ <CardEncontrando contrast={state.contrast} />
+ </Grid>
+ <Grid item xs={12} md={4} >
+ <CardParticipando contrast={state.contrast} />
+ </Grid>
+
+ <Grid item xs={12} md={4} >
+ <CardGerenciando contrast={state.contrast} />
+ </Grid>
+ </MainGrid>
</Secao>
- </div>
+ </MainPage>
);
}
const StyledBreadCrumbs = styled(Breadcrumbs)`
display : flex;
- justify-content : flex-start;
- max-width : 1170px;
- span {
- color : #a5a5a5;
- }
- a {
- color: #00bcd4;
- text-decoration: none;
- }
+ justify-content : flex-start;
+ max-width : 1170px;
+ a{
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
+ span {
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ }
+`
+const MainPage = styled.div`
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
`
const BreadCrumbsDiv = styled.div`
-
- padding : 10px;
display : flex;
`
-const Principal = styled.div`
- .fixo {
-
- height: 40px;
- text-align: center;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- padding: 30px;
- margin-bottom: 30px;
- color: #666;
-
-
- img {
- height: 50px;
- width: 50px;
- margin-right: 40px;
- vertical-align: middle;
-
- }
-
- span {
- font-size: 20px;
- vertical-align: ;
- }
-
-
-
- }
-
+const MainGrid = styled(Grid)`
+ padding: 1.5em 0;
`
-const TabsStyled = styled(Tabs)`
+const Principal = styled.div`
- .Mui-selected {
- background-color: #e7e4e4;
- }
-
- .MuiTab-root{
- text-transform: none !important;
- }
-
`
-const TabStyled = styled(Tab)`
-
- padding: 4px 15px !important;
- font-weight: 500;
- font-size: 14px !important;
- border-radius: 4px !important;
-
-
-
-
-
- &:hover {
- background-color: #e7e4e4;
+const TabStyled = styled.div`
+ text-align: center;
+ font-family: 'Roboto', 'sans-serif';
+ font-weight: ${props => props.active ? "500" : "lighter"};
+ background: ${props => props.active ? props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)" : ""};
+ padding: 0.5em;
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.active ? "none" : props.contrast === "" ? "none" : "underline"};
+
+ :hover{
+ background: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ cursor: pointer;
+ font-weight: 500;
}
`
const Menu = styled.div`
- width: auto;
- background-color: #fff;
- color: #666;
- padding-block: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
-
- h4 {
- padding-inline: 15px;
- font-size: 18px;
- margin-block: 10px;
- font-weight: 500;
- line-height: 1.1;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "" : "white"};
+ width: 100%;
+ padding: 1em 0;
+
+ .sized-box{
+ border: 0.5px solid #d4d4d4;
+ margin: 1em 0;
}
- .voltarInicio {
- padding: 4px 15px;
- font-size: 15px;
+ .title{
+ padding: 0;
+ margin: 0;
+ font-weight: 500;
text-align: center;
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
- }
+ font-family: 'Roboto', 'sans-serif';
}
- hr {
- border: 0;
- border-top: 1px solid #ccc;
- margin-top: 20px;
- margin-bottom: 20px;
+ .sub-title{
+ padding: 0;
+ margin: 0;
+ font-weight: lighter;
+ text-align: center;
+ font-family: 'Roboto', 'sans-serif';
}
- .procurava {
- padding: 4px 15px;
- font-size: 15px;
+ .go-back{
+ padding: 0;
+ margin: 0;
+ font-weight: lighter;
text-align: center;
-
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
}
-
}
+ .active{
+ background: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ font-weight: 500;
+ }
`
const Secao = styled.div`
- width: 1138px;
- margin-inline: auto;
-
+ width: 90%;
+ margin: 0 auto;
+ padding: 1em 0;
`
diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js
index 8d683857f3315da898dd8349d2293db4251b643d..da22ab8ed44eb0d6fa57a6a2dac9ac3a50f40d81 100644
--- a/src/Pages/UploadPage.js
+++ b/src/Pages/UploadPage.js
@@ -139,13 +139,13 @@ export default function UploadPage(props) {
{
activeStep === 0 &&
<Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}>
- <PartOne draftID={draft.id} stepperControl={stepperControl} />
+ <PartOne draftID={draft.id} stepperControl={stepperControl} contrast={state.contrast} />
</Grid>
}
{
activeStep === 1 &&
<Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}>
- <PartTwo draftID={draft.id} stepperControl={stepperControl} />
+ <PartTwo draftID={draft.id} stepperControl={stepperControl} contrast={state.contrast} />
</Grid>
}
</InfoBox>
diff --git a/src/env.js b/src/env.js
index 7284c42754e5c679138196c2bae2a2f128779c2b..95815e96e0a4b6d934c32704a85f04284e77d16e 100644
--- a/src/env.js
+++ b/src/env.js
@@ -17,7 +17,7 @@ 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/>.*/
-var apiDomain = 'https://api.portalmectest.c3sl.ufpr.br',
+var apiDomain = 'https://api.portalmec.c3sl.ufpr.br',
apiVersion = 'v1',
apiUrl = apiDomain + '/' + apiVersion;