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 2bd44115d117d3ba2c32a9c8901e200300c6003a..c1e5f897f6249a59c2fa28935312e7b2a07ea7a9 100644
--- a/src/Components/UploadPageComponents/Forms/NewTitle.js
+++ b/src/Components/UploadPageComponents/Forms/NewTitle.js
@@ -27,14 +27,14 @@ const useStyles = makeStyles(theme => ({
fontSize: "15px",
fontWeight: "lighter",
color: "white",
- width: "100%"
+ width: "100%",
},
lightTextField: {
maxWidth: "100%",
fontSize: "15px",
fontWeight: "lighter",
color: "black",
- width: "100%"
+ width: "100%",
}
}));
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 5806d5f2ffdecff199d1361005483b1af117e367..a97248e2bc55c72ffc4d07fb71149c0487c070b9 100644
--- a/src/Components/UploadPageComponents/PartOne.js
+++ b/src/Components/UploadPageComponents/PartOne.js
@@ -163,17 +163,17 @@ export default function PartOne(props) {
{/*------------------------------Sobre------------------------------------------*/}
<Grid item xs={12} style={{ paddingBottom: "40px" }}>
- <SobreORecurso draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.description} />
+ <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} />
+ <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}
+ <Autor contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo}
initialValue={
learningObject.author === state.currentUser.name ?
0 : 1
@@ -187,25 +187,25 @@ export default function PartOne(props) {
{/*------------------------------Tipo do Objeto------------------------------------------*/}
<Grid item xs={12} style={{ paddingBottom: "40px" }}>
- <TipoDeRecurso objTypes={objTypes} draftID={props.draftID} onBlurCallback={SendInfo}
+ <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}
+ <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" }}>
+ <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>
@@ -216,6 +216,6 @@ export default function PartOne(props) {
<LoadingSpinner text={"CARREGANDO"} />
)
}
- </React.Fragment>
+ </React.Fragment >
)
}
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index dabf1fef65466ddc0357d1cded84ac60f08458ad..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,29 +334,30 @@ 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"};
}
`
@@ -398,38 +402,38 @@ export const StyledTextField = styled(TextField)`
`
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`
@@ -450,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;
}
`