diff --git a/package.json b/package.json
index b2d7301750402498b1c650e4656e05ddc5146d43..e772e41cc80ac4ce0055060dd66958aea4bd59a3 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
},
"scripts": {
"analyze": "NODE_PATH=src/ source-map-explorer 'build/static/js/*.js'",
- "start": "NODE_PATH=src/ PORT=4000 react-scripts start watch",
+ "start": "NODE_PATH=src/ PORT=5000 react-scripts start watch",
"build": "NODE_PATH=src/ react-scripts build",
"test": "NODE_PATH=src/ react-scripts test",
"eject": "NODE_PATH=src/ react-scripts eject"
diff --git a/src/App.css b/src/App.css
index 4f0e301f55d22337795e1532fdeb14c891da8de7..d1221de16c65dce52cbe42f07a3c5df3e587d3b1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -53,3 +53,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
.Border {
border: 1px solid #666 !important;
}
+
+.MuiListNoPadding {
+ padding: 0 !important;
+}
diff --git a/src/Components/Acessibility/ContrastBar.js b/src/Components/Acessibility/ContrastBar.js
index 572279452c970f4179557d1809f7ed6950d12407..985bc8126d1dce42a5d0c68222606aafd2b7cbe6 100644
--- a/src/Components/Acessibility/ContrastBar.js
+++ b/src/Components/Acessibility/ContrastBar.js
@@ -90,10 +90,20 @@ function ContrastBar() {
</a>
</div>
<div onClick={toggleContrast}>
- <a className={`${state.contrast}text`} title="Ativar modo de alto contraste">
- <img className='Constrasticon' src={state.contrast === '' ? ContrastImageOff : ContrastImageOn} style={{ marginRight: 5 }} alt="ContrastIcon" />
- Contraste
- </a>
+ {
+ state.contrast === "" ?
+ (
+ <a className={`${state.contrast}text`} title="Ativar modo de alto contraste">
+ <img className='Constrasticon' src={ContrastImageOff} style={{ marginRight: 5 }} alt="Ãcone de contraste" />
+ </a>
+ )
+ :
+ (
+ <a className={`${state.contrast}text`} title="Desativar modo de alto contraste">
+ <img className='Constrasticon' src={ContrastImageOn} style={{ marginRight: 5 }} alt="Ãcone de contraste" />
+ </a>
+ )
+ }
</div>
</div>
</div>
diff --git a/src/Components/ActivityListItem.js b/src/Components/ActivityListItem.js
index 53baaab68848808a32fa6ff48ffe013887df5fed..fe0a4086e8522344df7ddf8c57db83fc23216729 100644
--- a/src/Components/ActivityListItem.js
+++ b/src/Components/ActivityListItem.js
@@ -225,5 +225,4 @@ const StyledListItem = styled(ListItem)`
border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"};
}
-
`
diff --git a/src/Components/Carousel.js b/src/Components/Carousel.js
index ccad2bc64a51897a83da7575deb2ef8b28878bb0..1275ad32b170b2471934f3902109b5dc84171afb 100644
--- a/src/Components/Carousel.js
+++ b/src/Components/Carousel.js
@@ -44,7 +44,7 @@ import { OrthogonalLineUp } from "ImportImages.js";
import { OrthogonalLineDown } from "ImportImages.js";
const Slide = styled.div`
-
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
position: absolute;
height: 500px;
width: 1366px;
@@ -409,8 +409,6 @@ const CarouselStyled = styled(Carousel)`
.carousel .control-arrow:before, .carousel.carousel-slider .control-arrow:before {
margin: 0 5px;
display: inline-block;
- border-top: 8px solid transparent;
- border-bottom: 8px solid transparent;
content: ' ';
}
.carousel .control-arrow {
diff --git a/src/Components/ColCardOwnerOptions.js b/src/Components/ColCardOwnerOptions.js
index bc77db898a30d713de3686a7a33a43affee1588b..0d1f9e4b360e151e286e53067c6ea28f71dd673b 100644
--- a/src/Components/ColCardOwnerOptions.js
+++ b/src/Components/ColCardOwnerOptions.js
@@ -66,6 +66,9 @@ export default function ColCardOwnerOptions (props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast}>
<Link to={"/colecao-do-usuario/" + props.id}>
diff --git a/src/Components/ColCardPublicOptions.js b/src/Components/ColCardPublicOptions.js
index 88cebaf2b2373b45e0c5a5c3749533e7b933b4a6..63b4d864c0b2961799156849e83f94d71ec4fe5b 100644
--- a/src/Components/ColCardPublicOptions.js
+++ b/src/Components/ColCardPublicOptions.js
@@ -71,6 +71,9 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast}>
<Link to={"/colecao-do-usuario/" + id}>
diff --git a/src/Components/Comment.js b/src/Components/Comment.js
index 1a5c519681d17a44649dd0e2c248c60258f9f7b8..f6ca3f2c50a81c667b124612c0178d3c4a46909a 100644
--- a/src/Components/Comment.js
+++ b/src/Components/Comment.js
@@ -290,6 +290,9 @@ export default function Comment(props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<MenuItem
style={
diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js
index 2a57fafd117cce22616291059e1b65126a484510..966ea18dc85b6081a469d8e3d529755e0b05e686 100644
--- a/src/Components/ContactCardOptions.js
+++ b/src/Components/ContactCardOptions.js
@@ -116,6 +116,9 @@ export default function SimpleMenu(props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleClose}>
<Link to={"/usuario-publico/" + props.followableID}>
diff --git a/src/Components/CriarColecaoForm.js b/src/Components/CriarColecaoForm.js
index 63795cdb90a5f229697d40d13dd338ebb070c5fb..b09d5549b670fd2fc100e42bef6459aa4ef8ce84 100644
--- a/src/Components/CriarColecaoForm.js
+++ b/src/Components/CriarColecaoForm.js
@@ -41,6 +41,7 @@ export default function CriarColecaoForm(props) {
])
const handleChange = (event) => {
+ console.log("valor", event.target.value);
setValue(event.target.value);
};
@@ -95,7 +96,7 @@ export default function CriarColecaoForm(props) {
value={colName.value}
onChange={e => handleColName(e)}
error={colName.key}
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ InputProps={state.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
contrast={state.contrast}
helperText={colName.key ? <span>O nome é importante para identificar a sua coleção na plataforma.<br />Ex: Matemática Ensino Médio </span> : ""}
required={true}
@@ -130,15 +131,13 @@ export const ButtonsDiv = styled.div`
`
export const ButtonCancelar = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
- color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
@@ -160,9 +159,6 @@ export const ButtonEnviar = styled(Button)`
margin : 6px 8px !important;
text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
- :hover{
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
.MuiButton-label {
padding-right : 16px;
padding-left : 16px;
diff --git a/src/Components/Cropper.js b/src/Components/Cropper.js
index ccccc4c2e57ca23d7b7de6500c630cf052a0a847..277b5c314e0d397218c7290f97a10032298b9ffd 100644
--- a/src/Components/Cropper.js
+++ b/src/Components/Cropper.js
@@ -20,97 +20,92 @@ import React, { PureComponent } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
-
export default class Cropper extends PureComponent {
- state = {
- src: this.props.src,
- crop:this.props.crop
- };
-
-
- // If you setState the crop in here you should return false.
- onImageLoaded = image => {
- this.imageRef = image;
- };
-
- onCropComplete = crop => {
- this.makeClientCrop(crop);
- };
-
- onCropChange = (crop, percentCrop) => {
- // You could also use percentCrop:
- // this.setState({ crop: percentCrop });
- this.setState({ crop });
- };
+ state = {
+ src: this.props.src,
+ crop:this.props.crop
+ };
+
+ // If you setState the crop in here you should return false.
+ onImageLoaded = image => {
+ this.imageRef = image;
+ };
+
+ onCropComplete = crop => {
+ this.makeClientCrop(crop);
+ };
+
+ onCropChange = (crop, percentCrop) => {
+ // You could also use percentCrop:
+ // this.setState({ crop: percentCrop });
+ this.setState({ crop });
+ };
+
+ async makeClientCrop(crop) {
+ if (this.imageRef && crop.width && crop.height) {
+ // eslint-disable-next-line
+ const croppedImageUrl = await this.getCroppedImg(
+ this.imageRef,
+ crop,
+ 'newFile.jpeg'
+ );
+ }
+ }
- async makeClientCrop(crop) {
- if (this.imageRef && crop.width && crop.height) {
- // eslint-disable-next-line
- const croppedImageUrl = await this.getCroppedImg(
- this.imageRef,
- crop,
- 'newFile.jpeg'
- );
+ getCroppedImg(image, crop, fileName) {
+ const canvas = document.createElement('canvas');
+ const scaleX = image.naturalWidth / image.width;
+ const scaleY = image.naturalHeight / image.height;
+ canvas.width = crop.width;
+ canvas.height = crop.height;
+ const ctx = canvas.getContext('2d');
+
+ ctx.drawImage(
+ image,
+ crop.x * scaleX,
+ crop.y * scaleY,
+ crop.width * scaleX,
+ crop.height * scaleY,
+ 0,
+ 0,
+ crop.width,
+ crop.height
+ );
+ const reader = new FileReader();
+ canvas.toBlob(blob => {
+ reader.readAsDataURL(blob)
+ reader.onloadend = () => {
+ // {/*this.dataURLtoFile(reader.result, 'cropped.jpg')*/}
+ this.props.update(reader.result)
+ }
+ })
+ }
+ render() {
+ // eslint-disable-next-line
+ const { crop, croppedImageUrl, src } = this.state;
+
+ return (
+ <>
+ {src && (
+ <ReactCrop
+ src={src}
+ crop={crop}
+ circularCrop={this.props.circularCrop}
+ onImageLoaded={this.onImageLoaded}
+ onComplete={this.onCropComplete}
+ onChange={this.onCropChange}
+ style={{maxHeight : "100%", maxWidth : "100%"}}
+ imageStyle={{maxHeight : "100%", maxWidth : "100%"}}
+ />
+ )}
+ {/*croppedImageUrl && (
+ <img alt="Crop" style={{ maxWidth: '100%', maxHeight : "100%"}} src={croppedImageUrl} />
+ )*/}
+ </>
+ );
}
- }
-
-
-
- getCroppedImg(image, crop, fileName) {
- const canvas = document.createElement('canvas');
- const scaleX = image.naturalWidth / image.width;
- const scaleY = image.naturalHeight / image.height;
- canvas.width = crop.width;
- canvas.height = crop.height;
- const ctx = canvas.getContext('2d');
-
- ctx.drawImage(
- image,
- crop.x * scaleX,
- crop.y * scaleY,
- crop.width * scaleX,
- crop.height * scaleY,
- 0,
- 0,
- crop.width,
- crop.height
- );
- const reader = new FileReader();
- canvas.toBlob(blob => {
- reader.readAsDataURL(blob)
- reader.onloadend = () => {
- // {/*this.dataURLtoFile(reader.result, 'cropped.jpg')*/}
- this.props.update(reader.result)
- }
- })
-
- }
-
- render() {
- // eslint-disable-next-line
- const { crop, croppedImageUrl, src } = this.state;
-
- return (
- <>
- {src && (
- <ReactCrop
- src={src}
- crop={crop}
- circularCrop={this.props.circularCrop}
- onImageLoaded={this.onImageLoaded}
- onComplete={this.onCropComplete}
- onChange={this.onCropChange}
- style={{maxHeight : "300px", maxWidth : "100%"}}
- />
- )}
- {/*croppedImageUrl && (
- <img alt="Crop" style={{ maxWidth: '100%', maxHeight : "100%"}} src={croppedImageUrl} />
- )*/}
- </>
- );
- }
}
diff --git a/src/Components/Dropdown.js b/src/Components/Dropdown.js
index 19f58a73a16e1312be12cc6432abdca6bdfa2549..ea1a161b44693fb58f1ac6e9e46062ad81224b41 100644
--- a/src/Components/Dropdown.js
+++ b/src/Components/Dropdown.js
@@ -28,72 +28,72 @@ import { Store } from '../Store';
import { HashLink as Link } from 'react-router-hash-link';
const useStyles = makeStyles((theme) => ({
- typography: {
- padding: theme.spacing(2),
- },
+ typography: {
+ padding: theme.spacing(2),
+ },
}));
export default function PositionedPopper(props) {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const [open, setOpen] = React.useState(false);
- const [placement, setPlacement] = React.useState();
- const classes = useStyles();
- const { state, dispatch } = React.useContext(Store)
- const innerDropdown = React.useRef(null)
+ const [anchorEl, setAnchorEl] = React.useState(null);
+ const [open, setOpen] = React.useState(false);
+ //const [placement, setPlacement] = React.useState();
+ const classes = useStyles();
+ const { state, dispatch } = React.useContext(Store)
+ const innerDropdown = React.useRef(null)
- const handleClick = (newPlacement) => (event) => {
- if (state.searchOpen)
- dispatch({
- type: 'HANDLE_SEARCH_BAR',
- opened: false
- })
- setAnchorEl(event.currentTarget);
- setOpen((prev) => placement !== newPlacement || !prev);
- setPlacement(newPlacement);
- };
+ const handleClick = (newPlacement) => (event) => {
+ if (state.searchOpen)
+ dispatch({
+ type: 'HANDLE_SEARCH_BAR',
+ opened: false
+ })
+ setAnchorEl(event.currentTarget);
+ setOpen(!open);
+ //setPlacement(newPlacement);
+ };
- const handleItemClicked = () => {
- setOpen(false)
- }
-
- useEffect(() => {
- const handleClickOutside = (event) => {
- innerDropdown.current && !innerDropdown.current.contains(event.target) && setOpen(false)
+ const handleItemClicked = () => {
+ setOpen(false)
}
- document.addEventListener('mousedown', handleClickOutside)
+ useEffect(() => {
+ const handleClickOutside = (event) => {
+ innerDropdown.current && !innerDropdown.current.contains(event.target) && setOpen(false)
+ }
+
+ document.addEventListener('mousedown', handleClickOutside)
- return () => document.removeEventListener('mousedown', handleClickOutside)
+ return () => document.removeEventListener('mousedown', handleClickOutside)
- }, [])
+ }, [])
- return (
- <div className={classes.root}>
- <Popper open={open} anchorEl={anchorEl} placement="bottom" transition ref={innerDropdown}>
- {({ TransitionProps }) => (
- <Fade {...TransitionProps} timeout={350}>
- <Paper>
- <MenuList className={`${state.contrast}BackColor`}>
- {
- props.items.map((item) =>
- <Link onClick={handleItemClicked} className={`${state.contrast}LinkColor`} style={{ textDecoration: "none", color: "black" }} key={`${item.name}_${new Date().toString()}`} to={item.href} ><MenuItem>{item.name}</MenuItem></Link>
- )
- }
- </MenuList>
- </Paper>
- </Fade>
- )}
- </Popper>
- <Button
- className={`${state.contrast}LinkColor`}
- style={{ textTransform: "none" }}
- aria-controls="menu-list-grow"
- aria-haspopup="true"
- onClick={handleClick('bottom')}
- >
- {props.name}
- <ExpandMoreIcon className={`${state.contrast}IconColor`}/>
- </Button>
- </div>
- );
+ return (
+ <div className={classes.root}>
+ <Popper open={open} anchorEl={anchorEl} placement="bottom" transition ref={innerDropdown}>
+ {({ TransitionProps }) => (
+ <Fade {...TransitionProps} timeout={350}>
+ <Paper>
+ <MenuList className={`${state.contrast}BackColor`}>
+ {
+ props.items.map((item) =>
+ <Link onClick={handleItemClicked} className={`${state.contrast}LinkColor`} style={{ textDecoration: "none", color: "black" }} key={`${item.name}_${new Date().toString()}`} to={item.href} ><MenuItem>{item.name}</MenuItem></Link>
+ )
+ }
+ </MenuList>
+ </Paper>
+ </Fade>
+ )}
+ </Popper>
+ <Button
+ className={`${state.contrast}LinkColor`}
+ style={{ textTransform: "none" }}
+ aria-controls="menu-list-grow"
+ aria-haspopup="true"
+ onClick={handleClick('bottom')}
+ >
+ {props.name}
+ <ExpandMoreIcon className={`${state.contrast}IconColor`}/>
+ </Button>
+ </div>
+ );
}
\ No newline at end of file
diff --git a/src/Components/EditarColecaoForm.js b/src/Components/EditarColecaoForm.js
index 37d8b3f34628f1af2d54ad522eff1d89b4444e2e..67b1e4d90587164a5093dde377181aa3b76fc764 100644
--- a/src/Components/EditarColecaoForm.js
+++ b/src/Components/EditarColecaoForm.js
@@ -154,8 +154,8 @@ export const ButtonsDiv = styled.div`
`
export const ButtonCancelar = styled(Button)`
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
@@ -167,10 +167,10 @@ export const ButtonCancelar = styled(Button)`
`
export const ButtonEnviar = styled(Button)`
- color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
- background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
- border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ background-color: ${props => props.contrast === "" ? "#673ab7" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
diff --git a/src/Components/ExpansionPanels.js b/src/Components/ExpansionPanels.js
index 2647eb81b05249de73b2d9edb162eb699ef56247..4582b138e81ed850528c468c181d77c267d1a3a1 100644
--- a/src/Components/ExpansionPanels.js
+++ b/src/Components/ExpansionPanels.js
@@ -229,7 +229,7 @@ export default function SimpleExpansionPanel({ contrast }) {
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong>, entendida como obra intelectual em seu conjunto, é de titularidade do Ministério da Educação. Sua disponibilização ocorrerá de acordo com os termos da <AColorido href="https://creativecommons.org/licenses/by-sa/4.0/deed.pt_BR" target="_blank">Licença Pública Creative Commons do tipo CC BY-SA</AColorido>, exceto nos casos em que for indicado de outra forma.</p>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong>, entendida como obra intelectual em seu conjunto, é de titularidade do Ministério da Educação. Sua disponibilização ocorrerá de acordo com os termos da <AColorido contrast={contrast} href="https://creativecommons.org/licenses/by-sa/4.0/deed.pt_BR" target="_blank">Licença Pública Creative Commons do tipo CC BY-SA</AColorido>, exceto nos casos em que for indicado de outra forma.</p>
<p>A licença CC BY SA é uma licença aberta e permite que seja feita cópia, redistribuição, adaptação e criação de obras derivadas, inclusive uso comercial, desde que o autor seja referenciado e que a licença da obra derivada seja também CC BY SA, garantindo o constante caráter aberto das produções.</p>
<p>Aplica-se aos códigos de software desenvolvidos pela <strong>Plataforma Integrada de RED do MEC</strong> a <AColorido contrast={contrast} href="https://www.gnu.org/licenses/gpl.html" target="_blank">Licença Pública Geral Affero GNU GPL</AColorido> (veja a tradução livre <AColorido contrast={contrast} href="https://creativecommons.org/licenses/GPL/2.0/legalcode.pt" target="_blank">aqui</AColorido>), que visa garantir a liberdade de compartilhar e de modificar softwares livres.</p>
<p>O usuário que utilizar a <strong>Plataforma Integrada de RED do MEC</strong> como repositório, ou seja, para armazenamento de conteúdo, garante que detém todos os direitos e autorizações para a publicação do conteúdo e deverá escolher uma das licenças Creative Commons elencadas no formulário no momento de cadastro do material. As licenças Creative Commons relacionadas abaixo serão aceitas na <strong>Plataforma Integrada de RED do MEC</strong>, pois garantem o devido crédito pela criação original do usuário e permitem as seguintes ações de uso:</p>
diff --git a/src/Components/GreyButton.js b/src/Components/GreyButton.js
index a2d687d5e50382fb1a39ec7bcf6bd5d3d314b47d..10123e027e0712e9edc40476789a1fae87f7bd40 100644
--- a/src/Components/GreyButton.js
+++ b/src/Components/GreyButton.js
@@ -22,21 +22,18 @@ import styled from 'styled-components'
export default function GreyButton (props) {
return (
- <StyledButton onClick={props.callback}>
+ <StyledButton onClick={props.callback} contrast={props.contrast}>
{props.text}
</StyledButton>
)
}
const StyledButton = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
max-height : 36px !important;
background-color : transparent !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration : ${props => props.contrast === "" ? "none" : "underline yellow"} !important;
outline : none !important;
text-align : center !important;
diff --git a/src/Components/GuardarModal.js b/src/Components/GuardarModal.js
index 7c45a5a6a4fb48dd3ff0b0a851b01924b8640dee..f08774eedc3638ad04a4d1b9ae87c6095a6a241a 100644
--- a/src/Components/GuardarModal.js
+++ b/src/Components/GuardarModal.js
@@ -141,14 +141,14 @@ export default function GuardarModal(props) {
<Content style={{ paddingTop: "0" }}>
<ResourceInfo>
<img src={props.thumb ? apiDomain + props.thumb : require('../img/logo_small.svg')} alt="thumbnail recurso" />
- <div className="text">
+ <div>
<h3>{props.title}</h3>
</div>
</ResourceInfo>
{
loading ?
(
- <LoadingSpinner text="Carregando coleções" />
+ <LoadingSpinner contrast={props.contrast} text="Carregando coleções" />
)
:
(
@@ -322,12 +322,12 @@ const ResourceInfo = styled.div`
flex-direction : column;
align-items : center;
align-content : center;
- max-wdith : 100%;
+ max-width : 100%;
justify-content : space-between;
.text {
max-height : 100%;
- max-width : 66.66%;
+ max-width : 100%;
display : flex;
flex-direction : column;
text-align : center;
@@ -420,6 +420,5 @@ const Container = styled.div`
@media screen and (max-width : 699px) {
width : 100%;
- height : 100%;
}
`
diff --git a/src/Components/Header.js b/src/Components/Header.js
index 53b6100ecc007f37b3ce0e817dcb367b70ec8a0c..30313f034f8502768895c6af122d424ca6218dd9 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -33,129 +33,129 @@ import { getRequest, validateGoogleLoginToken } from './HelperFunctions/getAxios
// boxShadow :none;
//`
function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
}
export default function Header(props) {
- const { state, dispatch } = useContext(Store)
- const [signUpOpen, setSignUp] = useState(false)
- const [loginOpen, setLogin] = useState(false)
- const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
- const [modalColaborar, setModalColaborar] = useState(false)
-
- function handleSuccessValidateToken(data) {
- dispatch({
- type: "USER_LOGGED_IN",
- userLoggedIn: !state.userIsLoggedIn,
- login: data.data
+ const { state, dispatch } = useContext(Store)
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+ const [modalColaborar, setModalColaborar] = useState(false)
+
+ function handleSuccessValidateToken(data) {
+ dispatch({
+ type: "USER_LOGGED_IN",
+ userLoggedIn: !state.userIsLoggedIn,
+ login: data.data
+ })
}
- )
- }
- useEffect(() => {
- if (localStorage.getItem('@portalmec/auth_headers')) {
- const url = `/auth/validate_token/`
- getRequest(url, handleSuccessValidateToken, (error) => { console.log(error) })
- }
- const newContrast = localStorage.getItem("@portalmec/contrast");
-
- return dispatch({
- type: 'SET_CONTRAST',
- payload: newContrast
- })
- }, [])
-
- let loc = useLocation()
- let history = useHistory()
- useEffect(() => {
- const url = `/auth/validate_token/`
-
- let query = new URLSearchParams(loc.search)
-
- if (query.get("auth_token")) {
- let config = {
- headers: {
- "access-token": query.get("auth_token"),
- "client": query.get("client_id"),
- "uid": query.get("uid"),
- "expiry": query.get("expiry"),
- "token-type": 'Bearer'
+ useEffect(() => {
+ if (localStorage.getItem('@portalmec/auth_headers')) {
+ const url = `/auth/validate_token/`
+ getRequest(url, handleSuccessValidateToken, (error) => { console.log(error) })
+ }
+ const newContrast = localStorage.getItem("@portalmec/contrast");
+
+ return dispatch({
+ type: 'SET_CONTRAST',
+ payload: newContrast
+ })
+ }, [])
+
+ let loc = useLocation()
+ let history = useHistory()
+ useEffect(() => {
+ const url = `/auth/validate_token/`
+
+ let query = new URLSearchParams(loc.search)
+
+ if (query.get("auth_token")) {
+ let config = {
+ headers: {
+ "access-token": query.get("auth_token"),
+ "client": query.get("client_id"),
+ "uid": query.get("uid"),
+ "expiry": query.get("expiry"),
+ "token-type": 'Bearer'
+ }
+ }
+ validateGoogleLoginToken(url, config, handleSuccessValidateToken, (error) => { console.log(error) })
+ history.push("/")
+ }
+ }, [loc])
+
+ useEffect(() => {
+ if (state.currentUser.askTeacherQuestion === true) {
+ dispatch({
+ type: "TOGGLE_MODAL_COLABORAR_PLATAFORMA",
+ modalColaborarPlataformaOpen: true
+ });
+ }
+ }, [state.currentUser.askTeacherQuestion])
+
+ const toggleSnackbar = (event, reason) => {
+ if (reason === 'clickaway') {
+ return;
}
- }
- validateGoogleLoginToken(url, config, handleSuccessValidateToken, (error) => { console.log(error) })
- history.push("/")
+
+ handleSuccessfulLogin(false);
}
- }, [loc])
-
- useEffect(() => {
- if (state.currentUser.askTeacherQuestion === true) {
- dispatch({
- type: "TOGGLE_MODAL_COLABORAR_PLATAFORMA",
- modalColaborarPlataformaOpen: true
- });
+
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
}
- }, [state.currentUser.askTeacherQuestion])
- const toggleSnackbar = (event, reason) => {
- if (reason === 'clickaway') {
- return;
+ const handleLogin = () => {
+ setLogin(!loginOpen)
}
- handleSuccessfulLogin(false);
- }
-
- const handleSignUp = () => {
- setSignUp(!signUpOpen)
- }
-
- const handleLogin = () => {
- setLogin(!loginOpen)
- }
-
- const handleClickSearch = (open) => {
- dispatch({
- type: "HANDLE_SEARCH_BAR",
- opened: !state.searchOpen
- })
- }
-
- let windowWidth = window.innerWidth
-
- return (
- <React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
- {
- windowWidth > 990 ?
- (
- <React.Fragment>
- <MenuBar openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
- {
- state.searchOpen &&
- <SearchBar />
- }
- </React.Fragment>
-
- )
- :
- (
- <React.Fragment>
- <MenuBarMobile contrast={state.contrast} openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
- {
- state.searchOpen &&
- <SearchBar />
- }
- </React.Fragment>
- )
- }
- <SignUpModal contrast={state.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
- <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
- openSnackbar={() => { handleSuccessfulLogin(true) }} />
- <ColaborarModal contrast={state.contrast} open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} />
- </React.Fragment>
- )
+ const handleClickSearch = (open) => {
+ dispatch({
+ type: "HANDLE_SEARCH_BAR",
+ opened: !state.searchOpen
+ })
+ }
+
+ let windowWidth = window.innerWidth
+
+ return (
+ <React.Fragment>
+ <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
+ anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+ >
+ <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+ </Snackbar>
+ {
+ windowWidth > 990 ?
+ (
+ <React.Fragment>
+ <MenuBar openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
+ {
+ state.searchOpen &&
+ <SearchBar />
+ }
+ </React.Fragment>
+
+ )
+ :
+ (
+ <React.Fragment>
+ <MenuBarMobile contrast={state.contrast} openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
+ {
+ state.searchOpen &&
+ <SearchBar />
+ }
+ </React.Fragment>
+ )
+ }
+ <SignUpModal contrast={state.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <ColaborarModal contrast={state.contrast} open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} />
+ </React.Fragment>
+ )
}
diff --git a/src/Components/HelpCenter/TabsManageAc/Forget.js b/src/Components/HelpCenter/TabsManageAc/Forget.js
index 4726ef8af2e2893152d3ca15d9f0644e2ff1df8f..ad0a69ad35b0aca8a138daf29786ed7e9ea90836 100644
--- a/src/Components/HelpCenter/TabsManageAc/Forget.js
+++ b/src/Components/HelpCenter/TabsManageAc/Forget.js
@@ -24,74 +24,68 @@ import { LoginImg } from "ImportImages.js";
import { RecuperarSenhaImg } from "ImportImages.js";
export default function Forget(props) {
- return(
- <Card>
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
- <div style={{marginBottom: "9px"}}>
- <span>{props.title}</span>
- </div>
- <p>Para redefinir a senha da sua conta, siga essas instruções:</p>
-
- <ol>
- <li>
- Acesse a <a href="/" target="_blank">Página Inicial</a> e clique em
- “Entrar†no canto superior direito da página.
- </li>
- <li>Clique em “Esqueceu a senha? Clique Aqui!â€.</li>
- <img className="primeira" src={LoginImg} alt="primeira imagem"/>
- <li>Preencha com o seu endereço de e-mail e clique em “Buscarâ€.</li>
- <img className="segunda" src={RecuperarSenhaImg} alt="segunda imagem"/>
- <li>Você receberá um e-mail no endereço informado, contendo as instruções para redefinir sua senha.</li>
- </ol>
-
- </Card>
- );
+ return(
+ <Card contrast={props.contrast}>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>Para redefinir a senha da sua conta, siga essas instruções:</p>
+ <ol>
+ <li>
+ Acesse a <a href="/" target="_blank">Página Inicial</a> e clique em
+ “Entrar†no canto superior direito da página.
+ </li>
+ <li>Clique em “Esqueceu a senha? Clique Aqui!â€.</li>
+ <img className="primeira" src={LoginImg} alt="primeira imagem"/>
+ <li>Preencha com o seu endereço de e-mail e clique em “Buscarâ€.</li>
+ <img className="segunda" src={RecuperarSenhaImg} alt="segunda imagem"/>
+ <li>Você receberá um e-mail no endereço informado, contendo as instruções para redefinir sua senha.</li>
+ </ol>
+ </Card>
+ );
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
- padding: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- span {
- font-size: 14px;
- font-weight: bold;
- }
-
- a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- :hover {
- text-decoration: underline;
- }
-
- ol {
- margin-top: 0;
- margin-bottom: 10px;
- line-height: 1.42857143;
- .primeira {
-
- height: 300px;
- margin-right: 40px;
- vertical-align: middle;
+ margin-bottom: 5px;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ padding: 30px;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ span {
+ font-size: 14px;
+ font-weight: bold;
}
- .segunda {
- height: 150px;
- margin-right: 40px;
- vertical-align: middle;
+ a {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ :hover {
+ text-decoration: underline;
+ }
}
- }
- li {
- font-size: 14px;
- }
-
-
- p {
- margin: 0 0 10px;
- font-size: 15px;
- }
+ ol {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ .primeira {
+ height: 300px;
+ margin-right: 40px;
+ vertical-align: middle;
+ }
+ .segunda {
+ height: 150px;
+ margin-right: 40px;
+ vertical-align: middle;
+ }
+ }
+ li {
+ font-size: 14px;
+ }
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
`
\ No newline at end of file
diff --git a/src/Components/HomeScreenSearchBar.js b/src/Components/HomeScreenSearchBar.js
index 06f54a431882b3ebd5ba33831c300af59289bff2..6b5171934a8ba0324448e6243e2915ff89b75d49 100644
--- a/src/Components/HomeScreenSearchBar.js
+++ b/src/Components/HomeScreenSearchBar.js
@@ -149,6 +149,9 @@ export default function HomeScreenSearchBar() {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<div className={`${state.contrast}BackColor`}>
{options.map((option, index) => (
diff --git a/src/Components/LoadingSpinner.js b/src/Components/LoadingSpinner.js
index 81089ad97a61e48e55765d0006fee99267f32029..e25599746e6ffcf88f3f7746a13724d303e7df4b 100644
--- a/src/Components/LoadingSpinner.js
+++ b/src/Components/LoadingSpinner.js
@@ -2,10 +2,10 @@ import React from 'react';
import LoadingGif from '../img/loading_busca.gif'
const LoadingSpinner = (props) => (
- <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
- <img alt="" src={LoadingGif} />
- <span style={props.contrast === "" ? { textTransform: "uppercase" } : { textTransform: "uppercase", color: "white" }}>{props.text}</span>
- </div>
+ <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
+ <img alt="" src={LoadingGif} />
+ <span style={props.contrast === "" ? { textTransform: "uppercase" } : { textTransform: "uppercase", color: "white" }}>{props.text}</span>
+ </div>
);
export default LoadingSpinner;
diff --git a/src/Components/MenuList.js b/src/Components/MenuList.js
index 61f564d42f15165d5860b49408ff6453e273c00d..ee79f724927ec39c4b3561845b3526b0e8673564 100644
--- a/src/Components/MenuList.js
+++ b/src/Components/MenuList.js
@@ -31,86 +31,85 @@ import { deleteRequest } from './HelperFunctions/getAxiosConfig'
//Image Import
import { Profile } from "ImportImages.js";
-
const OverrideButton = styled(Button)`
text-transform : none !important;
`
export default function MenuList(props) {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const { state, dispatch } = useContext(Store)
-
- const handleClick = event => {
- setAnchorEl(event.currentTarget);
- };
-
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- function handleSuccessSignOut(data) {
- dispatch({
- type: 'USER_LOGGED_OUT',
- userLoggedOut: !state.userIsLoggedIn,
- })
- }
- const handleLogout = () => {
- const url = `/auth/sign_out`
- deleteRequest(url, handleSuccessSignOut, (error) => { console.log(error) })
- }
-
- return (
- <div >
-
- <OverrideButton
- aria-controls="customized-menu"
- aria-haspopup="true"
- onMouseOver={handleClick}
- >
- <div style={{ borderRadius: "50%", border: "2px solid #fff", background: "#fff", overflow: "hidden", maxWidth: "50px", maxHeight: "50px" }}>
- {
- state.currentUser.avatar === '' || state.currentUser.avatar === null || state.currentUser.avatar === undefined ?
- (
-
- <img src={Profile} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} />
- ) :
- (
- <img src={apiDomain + state.currentUser.avatar} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} />
- )
- }
- </div>
- <span className={`${state.contrast}LinkColor`} style={{ fontFamily: "inherit", fontWeight: "400", color: "#666" }}>Minha Ãrea </span> <KeyboardArrowDownIcon className={`${state.contrast}IconColor`}/>
- </OverrideButton>
-
- <Menu
- anchorEl={anchorEl}
- open={Boolean(anchorEl)}
- onClose={handleClose}
- elevation={0}
- getContentAnchorEl={null}
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'center',
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'center',
- }}>
- <div className={`${state.contrast}BackColor`}>
- {
- props.items.map((item) =>
- <Link to={{
- pathname: item.href,
- state: item.value
- }} style={{ textDecoration: "none" }} key={item.value}><MenuItem className={`${state.contrast}LinkColor`} style={{ fontSize: "14px", padding: "5px 20px", color: "#666" }} key={item.value}>{item.name}</MenuItem></Link>
- )
- }
- </div>
+ const [anchorEl, setAnchorEl] = React.useState(null);
+ const { state, dispatch } = useContext(Store)
+
+ const handleClick = event => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ function handleSuccessSignOut(data) {
+ dispatch({
+ type: 'USER_LOGGED_OUT',
+ userLoggedOut: !state.userIsLoggedIn,
+ })
+ }
+ const handleLogout = () => {
+ const url = `/auth/sign_out`
+ deleteRequest(url, handleSuccessSignOut, (error) => { console.log(error) })
+ }
- <StyledButtonSair className={`${state.contrast}BackColor`} onClick={handleLogout}> <StyledMenuItem className={`${state.contrast}LinkColor`} disableGutters={true}>Sair<StyledExitToAppIcon className={`${state.contrast}IconColor`}/></StyledMenuItem></StyledButtonSair>
- </Menu>
- </div>
- );
+ return (
+ <div >
+ <OverrideButton
+ aria-controls="customized-menu"
+ aria-haspopup="true"
+ onClick={handleClick}
+ >
+ <div style={{ borderRadius: "50%", border: "2px solid #fff", background: "#fff", overflow: "hidden", maxWidth: "50px", maxHeight: "50px" }}>
+ {
+ state.currentUser.avatar === '' || state.currentUser.avatar === null || state.currentUser.avatar === undefined ?
+ (
+ <img src={Profile} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} />
+ ) :
+ (
+ <img src={apiDomain + state.currentUser.avatar} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} />
+ )
+ }
+ </div>
+ <span className={`${state.contrast}LinkColor`} style={{ fontFamily: "inherit", fontWeight: "400", color: "#666" }}>Minha Ãrea </span> <KeyboardArrowDownIcon className={`${state.contrast}IconColor`}/>
+ </OverrideButton>
+ <Menu
+ anchorEl={anchorEl}
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ elevation={0}
+ getContentAnchorEl={null}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'center',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'center',
+ }}
+ MenuListProps={{
+ disablePadding: true
+ }}
+ >
+ <div className={`${state.contrast}BackColor`}>
+ {
+ props.items.map((item) =>
+ <Link to={{
+ pathname: item.href,
+ state: item.value
+ }} style={{ textDecoration: "none" }} key={item.value}><MenuItem className={`${state.contrast}LinkColor`} style={{ fontSize: "14px", padding: "5px 20px", color: "#666" }} key={item.value}>{item.name}</MenuItem></Link>
+ )
+ }
+ <StyledButtonSair contrast={state.contrast} className={`${state.contrast}BackColor`} onClick={handleLogout}> <StyledMenuItem className={`${state.contrast}LinkColor`} disableGutters={true}>Sair<StyledExitToAppIcon className={`${state.contrast}IconColor`}/></StyledMenuItem></StyledButtonSair>
+ </div>
+ </Menu>
+ </div>
+ );
}
const StyledButtonSair = styled(Button)`
@@ -123,9 +122,11 @@ const StyledButtonSair = styled(Button)`
display : flex !important;
justify-content: space-between !important;
font-size : 14px !important;
- color : #a5a5a5 !important;
padding : 5px 20px !important;
}
+ color : #666;
+
+ overflow-y: hidden;
`
const StyledExitToAppIcon = styled(ExitToAppIcon)`
@@ -140,6 +141,6 @@ const StyledMenuItem = styled(MenuItem)`
justify-content: space-between !important;
width : 100% !important;
font-size : 14px !important;
- color : #a5a5a5 !important;
+ color : #666;
padding : 5px 20px !important;
`
diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js
index a626a7434b870de9670e8de8ea63ac790bf6c722..66db915e93ab7cb829389e601ef3dc6d435bd8d3 100644
--- a/src/Components/MobileDrawerMenu.js
+++ b/src/Components/MobileDrawerMenu.js
@@ -47,7 +47,6 @@ export default function MobileDrawerMenu(props) {
{ name: "Favoritos", href: "/perfil", value: '2' },
{ name: "Coleções", href: "/perfil", value: '3' },
{ name: "Rede", href: "/perfil", value: '4' },
- { name: "Configurações", href: "/editarperfil", value: '5' },
]
if (state.currentUser.roles) {
diff --git a/src/Components/Modal.js b/src/Components/Modal.js
index 8aec80e7abda9de95ba74bc25ae94817d70f5e60..0dea20d0564cbe9733e257ec06f7122248703300 100644
--- a/src/Components/Modal.js
+++ b/src/Components/Modal.js
@@ -26,75 +26,59 @@ import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
-
-
-/*Importação de imagens para o componente*/
-
-
-
-
const useStyles = makeStyles(theme => ({
- modal: {
- display: "flex",
- alignItems: "center",
- justifyContent: "center"
- },
- paper: {
- border: '2px solid #000',
- boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)"
- },
- carousel: {
- width: "750px",
- height: "370px",
-
- }
+ modal: {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center"
+ },
+ paper: {
+ border: '2px solid #000',
+ boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)"
+ },
+ carousel: {
+ width: "750px",
+ height: "370px",
+
+ }
}));
-
-
-
-
export default function TransitionsModal({ contrast }) {
- const classes = useStyles();
- const [open, setOpen] = React.useState(false);
-
- const handleOpen = () => {
- setOpen(true);
- };
-
- const handleClose = () => {
- setOpen(false);
- };
-
- return (
-
-
- <div style={{ display: "flex", justifyContent: "center" }}>
- <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
-
- <button style={{ background: "none", border: "none", color: "#fff", verticalAlign: "center" }} type="button" onClick={handleOpen}>
- <VisibilityOutlinedIcon style={{ verticalAlign: "middle" }} /> <spam style={{ verticalAlign: "middle", fontWeight: "600", fontSize: "14px" }}>VEJA A VERSÃO RESUMIDA</spam>
- </button>
- <Modal
- aria-labelledby="transition-modal-title"
- aria-describedby="transition-modal-description"
- className={classes.modal}
- open={open}
- onClose={handleClose}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
- >
- <Fade in={open}>
-
- <div>
- <TermsCarousel />
- </div>
-
- </Fade>
- </Modal>
- </div>
- );
+ const classes = useStyles();
+ const [open, setOpen] = React.useState(false);
+
+ const handleOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ return (
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
+ <button style={{ background: "none", border: "none", color: "#fff", verticalAlign: "center" }} type="button" onClick={handleOpen}>
+ <VisibilityOutlinedIcon style={{ verticalAlign: "middle" }} /> <spam style={{ verticalAlign: "middle", fontWeight: "600", fontSize: "14px" }}>VEJA A VERSÃO RESUMIDA</spam>
+ </button>
+ <Modal
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ className={classes.modal}
+ open={open}
+ onClose={handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
+ >
+ <Fade in={open}>
+ <div>
+ <TermsCarousel contrast={contrast}/>
+ </div>
+ </Fade>
+ </Modal>
+ </div>
+ );
}
diff --git a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
index cfb8ba92e9a1534e49ca0358cef1a5e186c18b9a..eea6793588006f86c4791dd3191634cc8bab8f56 100644
--- a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
+++ b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
@@ -37,13 +37,13 @@ function ChooseImage (props) {
<img src={props.avatar}
alt="user avatar" style={{height:"inherit", width:"inherit", objectFit:"cover"}}
/>
- <input accept="image/*" id="avatar-file"
- type="file"
- onChange={(e) => props.handleFile(e.target.files)}
- style={{display : "none"}}
+ <input accept="image/*" id="avatar-file"
+ type="file"
+ onChange={(e) => props.handleFile(e.target.files)}
+ style={{display : "none"}}
/>
<label for="avatar-file" style={{width:"inherit"}}>
- <ChangeAvatarDiv >
+ <ChangeAvatarDiv contrast={props.contrast}>
<span>Alterar</span>
</ChangeAvatarDiv>
</label>
@@ -55,12 +55,9 @@ function ChooseImage (props) {
<img alt="" src={props.tempImg}/>
}
<ButtonsDiv>
- <ButtonCancelar onClick={props.handleClose}>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>
<span>Cancelar</span>
</ButtonCancelar>
- <ButtonConfirmar>
- <span>Salvar Alterações</span>
- </ButtonConfirmar>
</ButtonsDiv>
</div>
)
@@ -110,7 +107,7 @@ export default function ComponentAlterarAvatar (props) {
}
return (
- <ModalDiv>
+ <ModalDiv contrast={props.contrast}>
<HeaderDiv>
<span style={{width:"32px"}}/>
<StyledH2>{uploadingImage ? 'Alterar foto do perfil' : 'Editar Foto'}</StyledH2>
@@ -124,7 +121,7 @@ export default function ComponentAlterarAvatar (props) {
(
[
<>
- <EditarDiv>
+ <EditarDiv contrast={props.contrast}>
<TextoEditarDiv>
Clique nos Ãcones e arraste para selecionar a parte que você quer da foto
</TextoEditarDiv>
@@ -133,11 +130,8 @@ export default function ComponentAlterarAvatar (props) {
</div>
</EditarDiv>
<FooterButtonsDiv>
- <ButtonCancelar>ESCOLHER OUTRA</ButtonCancelar>
- <div>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonConfirmar onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
- </div>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonConfirmar contrast={props.contrast} onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
</FooterButtonsDiv>
</>
]
@@ -147,11 +141,12 @@ export default function ComponentAlterarAvatar (props) {
[
<>
<ChooseImage
+ contrast={props.contrast}
avatar={props.userAvatar === '' || props.userAvatar == null ? Profile : `${apiDomain}` + props.userAvatar}
handleFile={handleFile}
handleClose={props.handleClose}
tempImg={tempImgURL}
- />
+ />
</>
]
)
@@ -167,9 +162,9 @@ const FooterButtonsDiv = styled.div`
display : flex;
flex-direction : row;
align-content : center;
- justify-content : space-between;
+ justify-content : flex-end;
Button {
- margin-top : 20px;
+ margin-left: 15px;
}
`
@@ -181,13 +176,15 @@ const TextoEditarDiv = styled.div`
`
const EditarDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
position : relative;
background-color : #f4f4f4;
padding : 20px 30px 40px;
`
const ChangeAvatarDiv = styled.div`
- color : rgba(255,255,255,.7);
+ color: ${props => props.contrast === "" ? "rgba(255,255,255,.7)" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
background-color:rgba(0,0,0,.5);
position: absolute;
bottom: 0;
@@ -204,91 +201,92 @@ const ChangeAvatarDiv = styled.div`
`
const ModalDiv = styled.div`
- background-color : #fff;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
border-radius : 4px;
- min-width : 560px;
- color : #666;
display: flex;
flex-direction : column;
@media screen and (max-width: 959px) {
- height : 100%;
width : 100%;
}
`
const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
border-radius : 3px !important;
`
const ButtonCancelar = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
- background-color : #fff !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ background-color: transparent;
outline : none !important;
text-align : center !important;
`
const ButtonsDiv = styled.div`
-display : flex;
-justify-content:flex-end;
+ Button {
+ margin-left: 15px;
+ }
+ display : flex;
+ justify-content:flex-end;
`
const AvatarCircleDiv = styled.div`
-margin-bottom : 0;
-border-radius : 50%;
-height : 150px;
-width : 150px;
-position : relative;
-overflow: hidden;
+ margin-bottom : 0;
+ border-radius : 50%;
+ height : 150px;
+ width : 150px;
+ position : relative;
+ overflow: hidden;
`
const DivFlowHolder =styled.div`
-align-self : auto;
+ align-self : auto;
`
const DivAlterarFoto = styled.div`
-display : flex;
-margin-bottom : 30px;
-flex-direction : row;
-align-items : center;
-justify-content :center;
+ display : flex;
+ margin-bottom : 30px;
+ flex-direction : row;
+ align-items : center;
+ justify-content :center;
`
const DialogDiv = styled.div`
-padding : 20px 30px;
-overflow : visible !important;
+ padding : 20px 30px;
+ overflow : visible !important;
`
const HeaderDiv = styled.div`
-display : flex;
-flex-direction : row;
-align-items : center;
-align-content : center;
-justify-content : space-between;
-max-width : 100%;
+ display : flex;
+ flex-direction : row;
+ align-items : center;
+ align-content : center;
+ justify-content : space-between;
+ max-width : 100%;
`
const StyledH2 = styled.h2`
-font-size : 26px;
-font-weight : normal;
-margin-top : 20px;
-margin-bottom : 10px;
-font-family: inherit;
-line-height: 1.1;
-color: inherit;
+ font-size : 26px;
+ font-weight : normal;
+ margin-top : 20px;
+ margin-bottom : 10px;
+ font-family: inherit;
+ line-height: 1.1;
+ color: inherit;
`
const StyledCloseModalButton = styled(Button)`
-display : inline-block;
-position : relative;
-float : right !important;
-background : transparent !important;
-min-width: 0 !important;
-width : 40px;
-border-radius : 50%;
-padding : 8px;
-height : 40px;
-margin : 0 6px;
+ display : inline-block;
+ position : relative;
+ float : right !important;
+ background : transparent !important;
+ min-width: 0 !important;
+ width : 40px;
+ border-radius : 50%;
+ padding : 8px;
+ height : 40px;
+ margin : 0 6px;
`
diff --git a/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js b/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js
index 735832040ab11c6b79e7f969bb554e42a514ebfe..59fb07c7fc3a00845bfba7430ee4f8b17cc84cb4 100644
--- a/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js
+++ b/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js
@@ -31,10 +31,8 @@ const StyledModal = styled(Modal)`
padding : 10px !important;
`
-export default function ModarAlterarAvatar (props){
-
+export default function ModalAlterarAvatar (props){
return (
-
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
@@ -51,12 +49,12 @@ export default function ModarAlterarAvatar (props){
<Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
<ComponentAlterarAvatar
+ contrast={props.contrast}
userAvatar={props.userAvatar}
handleClose={props.handleClose}
id={props.id}
/>
</Fade>
</StyledModal>
-
)
}
diff --git a/src/Components/ModalAlterarCover/ComponentAlterarCover.js b/src/Components/ModalAlterarCover/ComponentAlterarCover.js
index 18df65d36472f89da154e944bfa22c153305bc4a..72ad98865737424bdb93a10a6326ecb925899648 100644
--- a/src/Components/ModalAlterarCover/ComponentAlterarCover.js
+++ b/src/Components/ModalAlterarCover/ComponentAlterarCover.js
@@ -34,7 +34,7 @@ export default function ComponentAlterarCover (props) {
const [crop] = useState({
unit: "%" ,
width : 100,
- aspect: 16 / 9
+ aspect: 16 / 3.2
});
function handleSuccess (data) {
@@ -58,7 +58,7 @@ export default function ComponentAlterarCover (props) {
}
return (
- <ModalDiv>
+ <ModalDiv contrast={props.contrast}>
<HeaderDiv>
<span style={{width:"32px"}}/>
<StyledH2>Editar Capa do Perfil</StyledH2>
@@ -67,40 +67,38 @@ export default function ComponentAlterarCover (props) {
</StyledCloseModalButton>
</HeaderDiv>
<DialogDiv>
- <EditarDiv>
+ <EditarDiv contrast={props.contrast}>
<TextoEditarDiv>
Clique nos Ãcones e arraste para selecionar a parte que você quer da foto
</TextoEditarDiv>
- <div style={{maxWidth : "500px", maxHeight : "300px"}}>
+ <div style={{maxWidth : "100%", maxHeight : "100%"}}>
<Cropper src={tempImgURL} crop={crop} update={updateCover}/>
</div>
</EditarDiv>
<FooterButtonsDiv>
- <ButtonCancelar>ESCOLHER OUTRA</ButtonCancelar>
<div>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonConfirmar onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonConfirmar contrast={props.contrast} onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
</div>
</FooterButtonsDiv>
</DialogDiv>
- </ModalDiv>
- )
+ </ModalDiv>
+ )
}
const ButtonCancelar = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
- background-color : #fff !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ background-color: transparent;
outline : none !important;
text-align : center !important;
`
const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
border-radius : 3px !important;
`
@@ -109,13 +107,12 @@ const FooterButtonsDiv = styled.div`
display : flex;
flex-direction : row;
align-content : center;
- justify-content : space-between;
+ justify-content : flex-end;
Button {
margin-top : 20px;
}
`
-
const TextoEditarDiv = styled.div`
margin-bottom : 15px;
align-self : center;
@@ -124,55 +121,55 @@ const TextoEditarDiv = styled.div`
`
const EditarDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
position : relative;
background-color : #f4f4f4;
- padding : 20px 30px 40px;
`
const ModalDiv = styled.div`
-background-color : #fff;
-border-radius : 4px;
-min-width : 560px;
-color : #666;
-display: flex;
-flex-direction : column;
-@media screen and (max-width: 959px) {
- height : 100%;
- width : 100%;
-}
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border-radius : 4px;
+ width : 560px;
+ display: flex;
+ flex-direction : column;
+ @media screen and (max-width: 959px) {
+ width : 100%;
+ }
`
const DialogDiv = styled.div`
-padding : 20px 30px;
-overflow : visible !important;
+ padding : 20px 30px;
+ overflow : visible !important;
`
const HeaderDiv = styled.div`
-display : flex;
-flex-direction : row;
-align-items : center;
-align-content : center;
-justify-content : space-between;
-max-width : 100%;
+ display : flex;
+ flex-direction : row;
+ align-items : center;
+ align-content : center;
+ justify-content : space-between;
+ max-width : 100%;
`
const StyledH2 = styled.h2`
-font-size : 26px;
-font-weight : normal;
-margin-top : 20px;
-margin-bottom : 10px;
-font-family: inherit;
-line-height: 1.1;
-color: inherit;
+ font-size : 26px;
+ font-weight : normal;
+ margin-top : 20px;
+ margin-bottom : 10px;
+ font-family: inherit;
+ line-height: 1.1;
+ color: inherit;
`
const StyledCloseModalButton = styled(Button)`
-display : inline-block;
-position : relative;
-float : right !important;
-background : transparent !important;
-min-width: 0 !important;
-width : 40px;
-border-radius : 50%;
-padding : 8px;
-height : 40px;
-margin : 0 6px;
+ display : inline-block;
+ position : relative;
+ float : right !important;
+ background : transparent !important;
+ min-width: 0 !important;
+ width : 40px;
+ border-radius : 50%;
+ padding : 8px;
+ height : 40px;
+ margin : 0 6px;
`
diff --git a/src/Components/ModalAlterarCover/ModalAlterarCover.js b/src/Components/ModalAlterarCover/ModalAlterarCover.js
index 7e971f5806c6cee5239b1b480cc166c5b31b05a3..d572530fee428603623dd0e85d18c2d2895a82e9 100644
--- a/src/Components/ModalAlterarCover/ModalAlterarCover.js
+++ b/src/Components/ModalAlterarCover/ModalAlterarCover.js
@@ -32,14 +32,11 @@ const StyledModal = styled(Modal)`
`
export default function ModarAlterarCover (props){
-
return (
-
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
-
centered="true"
onClose={props.handleClose}
closeAfterTransition
@@ -47,16 +44,15 @@ export default function ModarAlterarCover (props){
BackdropProps={{
timeout: 500,
}}
- >
+ >
<Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
-
<ComponentAlterarCover
+ contrast={props.contrast}
cover={props.cover}
handleClose={props.handleClose}
id={props.id}
/>
</Fade>
</StyledModal>
-
)
}
diff --git a/src/Components/ModalConfirmarUnfollow.js b/src/Components/ModalConfirmarUnfollow.js
index e8cd5d1e4a60caaabbd00b25e9f8056f46b95f27..a7951b704509582dc6c989af30c7879e7780286c 100644
--- a/src/Components/ModalConfirmarUnfollow.js
+++ b/src/Components/ModalConfirmarUnfollow.js
@@ -34,9 +34,9 @@ const HeaderDiv = styled.div`
}
`
const ContentContainer = styled.div`
-color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
-background-color: ${props => props.contrast === "" ? "white !important" : "black !important"};
-border: ${props => props.contrast === "" ? "1px solid black !important" : "1px solid white !important"};
+color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+border: ${props => props.contrast === "" ? "1px solid black" : "1px solid white"} !important;
box-sizing : border-box;
max-width : none;
@@ -55,8 +55,8 @@ border: ${props => props.contrast === "" ? "1px solid black !important" : "1px s
}
`
const ButtonCancelar = styled(Button)`
-color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
-text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
&:hover {
background-color : rgba(158,158,158,0.2) !important;
@@ -66,10 +66,10 @@ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow
`
const ButtonConfirmar = styled(Button)`
- color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
- background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
- border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
border-radius : 3px !important;
`
diff --git a/src/Components/ModalEditarColecao.js b/src/Components/ModalEditarColecao.js
index b9fe9bd93a3923d924ba38cfb0d133e18450b4d2..52c7d5c417e6d13d37102bcd153e58b6717ed56a 100644
--- a/src/Components/ModalEditarColecao.js
+++ b/src/Components/ModalEditarColecao.js
@@ -114,6 +114,5 @@ const Container = styled.div`
@media screen and (max-width : 699px) {
width : 100%;
- height : 100%;
}
`
diff --git a/src/Components/ModalExcluirColecao.js b/src/Components/ModalExcluirColecao.js
index 40e0561db6988ce60a28dc955fd6a9bc083d18f8..cb55a931f2784e8662820ff494ca932c5fb8bed4 100644
--- a/src/Components/ModalExcluirColecao.js
+++ b/src/Components/ModalExcluirColecao.js
@@ -60,7 +60,7 @@ export default function ModalExcluirColecao (props) {
<Container contrast={props.contrast}>
<Header>
<h2>Tem certeza que deseja excluir esta Coleção?</h2>
- <CloseModalButton handleClose={props.handleClose} id={props.id}/>
+ <CloseModalButton contrast={props.contrast} handleClose={props.handleClose} id={props.id}/>
</Header>
<Content>
diff --git a/src/Components/ModalLearningObjectPublished.js b/src/Components/ModalLearningObjectPublished.js
index 566460be99d3b1880e179745f8777fb7a9f94a56..8421e0d885b9edd5baf7fc29138c43c15b5bc482 100644
--- a/src/Components/ModalLearningObjectPublished.js
+++ b/src/Components/ModalLearningObjectPublished.js
@@ -28,6 +28,9 @@ import Twitter from '../img/twitter.svg'
import LinkIcon from '../img/link_icon.svg'
import CloseModalButton from './CloseModalButton.js'
+//Image Import
+import { Publicar } from "ImportImages.js";
+
export default function ModalLearningObjectPublished (props) {
// const refContainer = useRef(props.link);
@@ -50,11 +53,11 @@ export default function ModalLearningObjectPublished (props) {
}}
>
<Fade in={props.open}>
- <Container>
+ <Container contrast={props.contrast}>
<Header>
<span style={{width:"32px"}}/>
<h2>O seu recurso foi para a curadoria!</h2>
- <CloseModalButton handleClose={props.handleClose}/>
+ <CloseModalButton contrast={props.contrast} handleClose={props.handleClose}/>
</Header>
<Content >
@@ -69,7 +72,7 @@ export default function ModalLearningObjectPublished (props) {
</Grid>
</Grid>
</Content>
- <ShareContainer>
+ <ShareContainer contrast={props.contrast}>
<p>Gostaria de convidar o seus amigos para conhecer o recurso?</p>
<p>Compartilhe nas redes sociais:</p>
<div className="logos-shared">
@@ -77,7 +80,7 @@ export default function ModalLearningObjectPublished (props) {
href={"https://www.facebook.com/sharer/sharer.php?u=https://plataformaintegrada.mec.gov.br/recurso/" + props.draftID}
rel="noreferrer"
target="_blank">
- <ShareButton>
+ <ShareButton contrast={props.contrast}>
<img src={Facebook} alt="facebook-logo"/>
</ShareButton>
</a>
@@ -86,12 +89,12 @@ export default function ModalLearningObjectPublished (props) {
href={"https://www.twitter.com/intent/tweet?url=https://plataformaintegrada.mec.gov.br/recurso/" + props.draftID}
rel="noreferrer"
target="_blank">
- <ShareButton>
+ <ShareButton contrast={props.contrast}>
<img src={Twitter} alt="twitter-logo"/>
</ShareButton>
</a>
- <ShareButton >
+ <ShareButton contrast={props.contrast}>
<img src={LinkIcon} alt="link-icon"/>
</ShareButton>
</div>
@@ -123,18 +126,18 @@ const ShareButton = styled(Button)`
p {
margin : 0 0 10px;
}
+
+ border: ${props => props.contrast === "" ? "" : "1px solid yellow"} !important;
`
const ShareContainer = styled.div`
padding-top : 20px;
- background-color : #f1f1f1;
width : 100%;
height : 215px;
font-size : 18px;
line-height : 30px;
text-align : center;
max-width : 600px;
- color : #666;
border-radius : 4px;
.logos-shared {
@@ -145,16 +148,18 @@ const ShareContainer = styled.div`
flex-direction : row;
justify-content : center;
}
+
+ background-color: ${props => props.contrast === "" ? "#f1f1f1" : "black"};
+ border-top: ${props => props.contrast === "" ? "" : "1px solid white"};
`
const Content = styled.div`
padding : 20px 30px;
overflow : visible;
max-width : 600px;
- color : #666;
.backgroundImg {
- background-image : url(https://plataformaintegrada.mec.gov.br/img/Publicar.png);
+ background-image : url(${Publicar});
width : 145px;
height : 125px;
background-repeat : no-repeat;
@@ -180,7 +185,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -200,7 +204,6 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : #fff;
align : center;
display : flex;
flex-direction : column;
@@ -221,4 +224,8 @@ const Container = styled.div`
p {
margin : 0 0 10px;
}
+
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
`
diff --git a/src/Components/Notifications.js b/src/Components/Notifications.js
index 8c2396b9b9f7266fa1e56600da05f139fa89c4e8..6b9f666fc2642ab74b3bd73917f37b1fdb03a2e4 100644
--- a/src/Components/Notifications.js
+++ b/src/Components/Notifications.js
@@ -59,19 +59,19 @@ const StyledMenu = withStyles({
border: '1px solid #d3d4d5',
},
})((props) => (
- <Menu
- elevation={0}
- getContentAnchorEl={null}
- anchorOrigin={{
- horizontal: 'center',
- vertical: "bottom",
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'center',
- }}
- {...props}
- />
+ <Menu
+ elevation={0}
+ getContentAnchorEl={null}
+ anchorOrigin={{
+ horizontal: 'center',
+ vertical: "bottom",
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'center',
+ }}
+ {...props}
+ />
));
export default function Notification(props) {
@@ -188,9 +188,18 @@ export default function Notification(props) {
text={snack.text}
/>
<StyledNotificationButton onClick={handleClick}>
- <StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge">
- <StyledNotificationsIcon className={`${state.contrast}IconColor`} />
- </StyledBadge>
+ {
+ notifications.some((notification) => (notification.recipient !== null) && (notification.viewed === false) && (notification.recipient_type !== "NilClass")) ?
+ (
+ <StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge">
+ <StyledNotificationsIcon className={` ${state.contrast}LinkColor`} />
+ </StyledBadge>
+ )
+ :
+ (
+ <StyledNotificationsIcon className={` ${state.contrast}LinkColor`} />
+ )
+ }
</StyledNotificationButton>
<StyledMenu
id="simple-menu"
@@ -199,10 +208,13 @@ export default function Notification(props) {
open={Boolean(anchorEl)}
onClose={handleClose}
contrast={state.contrast}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<ContainerDiv contrast={state.contrast}>
<div className="cabecalho">
- <span style={{ fontSize: "15px" }}>NOTIFICAÇÕES •</span>
+ <span style={{ fontSize: "15px" }}>NOTIFICAÇÕES</span>
<span className="cabecalho-marcar" onClick={handleClickNotification}>Marcar todas como lidas</span>
</div>
{
@@ -227,7 +239,7 @@ export default function Notification(props) {
}
<div style={{ padding: "0 15px", borderTop: "1px solid #dadada" }}>
<Link to="/perfil">
- <NoPadButton>
+ <NoPadButton contrast={state.contrast}>
MOSTRAR TODAS
</NoPadButton>
</Link>
@@ -239,34 +251,32 @@ export default function Notification(props) {
}
-const NoPadButton = styled(Button)`
+const NoPadButton = styled.div`
padding : 6px 0 !important;
+ color: ${props => props.contrast === '' ? "#71409E" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === '' ? "none" : "yellow underline"} !important;
`
const ContainerDiv = styled.div`
- margin-top : 10px;
right : 5%;
width : 360px;
max-height : 400px;
- box-shadow : 8px 8px 8px 8px
rgba(0,0,0,.1);
- overflow-y : scroll;
+ overflow-y : auto;
padding : 5px 5px 5px 5px;
min-width : 160px;
- background-color: ${props => props.contrast === '' ? "#f1f1f1" : "black"};
+ background-color: ${props => props.contrast === '' ? "white" : "black"};
.cabecalho {
border-bottom : 1px solid #dadada;
padding : 10px 15px;
- color: ${props => props.contrast === '' ? "black" : "yellow"};
+ color: ${props => props.contrast === '' ? "#666" : "yellow"};
.cabecalho-marcar {
- font-family: Lato,bold;
- font-size: 12px;
- -webkit-text-decoration-line: underline;
- text-decoration-line: underline;
+ font-size: 15px;
float: right;
cursor: pointer;
+ color: ${props => props.contrast === '' ? "#71409E" : "yellow"} !important;
}
}
`
diff --git a/src/Components/PublicationPermissionsContent.js b/src/Components/PublicationPermissionsContent.js
index a41e89a6c260d88461243fbf924fb19979edcb45..13894ecf3e4a59212fba19e25cc075dae2b17f6c 100644
--- a/src/Components/PublicationPermissionsContent.js
+++ b/src/Components/PublicationPermissionsContent.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
import Typography from '@material-ui/core/Typography';
import styled from 'styled-components'
import RadioGroup from '@material-ui/core/RadioGroup';
@@ -7,7 +7,6 @@ import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
-import { getRequest } from './HelperFunctions/getAxiosConfig';
import { yellow } from "@material-ui/core/colors";
const StyledFormControl = styled(FormControl)`
@@ -37,19 +36,7 @@ const ContrastRadio = withStyles({
export default function PublicationPermissionsContent(props) {
- const [questionsArr, setQuestionsArr] = useState([])
- const handleSetQuestionsArr = (newArr) => { setQuestionsArr(newArr) }
-
- function handleSuccess(data) {
- handleSetQuestionsArr(data)
- }
-
- useEffect(() => {
- const url = `/questions/`
-
- getRequest(url, handleSuccess, (error) => { console.log(error) })
-
- }, [])
+ const [questionsArr] = useState(props.questionsArr);
return (
<div style={props.contrast === "" ? { textAlign: "start", lineHeight: "21px", color: "rgb(102, 102, 102)", padding: "65px" } : { textAlign: "start", lineHeight: "21px", color: "white", padding: "65px", backgroundColor: "black" }}>
@@ -82,7 +69,7 @@ export default function PublicationPermissionsContent(props) {
<p>{question.description}</p>
</Grid>
<Grid item xs={2}>
- <RadioGroup row name={"radio" + (question.id)} onChange={props.handleRadios}>
+ <RadioGroup row name={(question.id)} onChange={props.handleRadios}>
<FormControlLabel value="Sim" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Sim</span>} /> <FormControlLabel value="Não" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Não</span>} />
</RadioGroup>
</Grid>
@@ -97,38 +84,3 @@ export default function PublicationPermissionsContent(props) {
)
}
-
-// {/*
-// <Grid item xs={10}>
-// <p>
-// O recurso apresenta conteúdo de cunho polÃtico-partidário? (Ex: o conteúdo expressa qualquer forma de manifestação que se caracterize como propaganda polÃtica)?
-// </p>
-// </Grid>
-// <Grid item xs={2}>
-// <RadioGroup row name="radio1" onChange={props.handleRadios}>
-// <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
-// </RadioGroup>
-// </Grid>
-
-// <Grid item xs={10}>
-// <p>
-// O recurso apresenta conteúdo ofensivo? (Ex: material pornográfico e/ou que invada a privacidade de terceiros, viole os Direitos Humanos ou seja ilegal, ofensivo, e que incite a violência)?
-// </p>
-// </Grid>
-// <Grid item xs={2}>
-// <RadioGroup row name="radio2" onChange={props.handleRadios}>
-// <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
-// </RadioGroup>
-// </Grid>
-// <Grid item xs={10}>
-// <p>
-// O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?
-// </p>
-// </Grid>
-// <Grid item xs={2}>
-// <RadioGroup row name="radio3" onChange={props.handleRadios}>
-// <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
-// </RadioGroup>
-// </Grid>
-// </Grid>
-// */}
diff --git a/src/Components/ReportButton.js b/src/Components/ReportButton.js
index f7798433b337f0b4218ad1f1861b89dc1ec71f6e..d9f029789b18875e59d3dcff15ec21b6e19fbc08 100644
--- a/src/Components/ReportButton.js
+++ b/src/Components/ReportButton.js
@@ -78,6 +78,9 @@ export default function ReportButton(props) {
open={Boolean(anchorEl)}
onClose={handleClose}
style={{ borderRadius: "0" }}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<MenuItem onClick={() => { handleModal() }} style={state.contrast === "" ? { color: "#666", backgroundColor: "white" } : { color: "white", backgroundColor: "black" }}>
<ReportIcon />
diff --git a/src/Components/ReportColecaoForm.js b/src/Components/ReportColecaoForm.js
index f2ec9fcb68e9de7d118436647e8f0a3e419883f1..6c5a79a7581fb7e658eaa3b267c7af8fc9094a8f 100644
--- a/src/Components/ReportColecaoForm.js
+++ b/src/Components/ReportColecaoForm.js
@@ -115,10 +115,10 @@ export default function ReportColecaoForm (props) {
}
const ButtonEnviar = styled(Button)`
- color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
- background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
- border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ background-color: ${props => props.contrast === "" ? "#673ab7" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js
index ab7a7678870e5fd0075d01d7d4d1943d75f25baf..eb3d7395f8cb2bc70e3613e81c65803e531467f8 100644
--- a/src/Components/ReportModal.js
+++ b/src/Components/ReportModal.js
@@ -119,10 +119,10 @@ export default function ReportModal (props) {
const Content = styled.div`
padding : 20px 30px;
overflow : visible;
- max-width : 470px;
`
const Header = styled.div`
+ text-align : center;
display : flex;
flex-direction : row;
padding : 10px 26px 0 26px;
@@ -153,7 +153,6 @@ const StyledModal = styled(Modal)`
display : flex;
align-items: center;
justify-content : center;
- text-align : center;
padding : 10px !important;
max-width : none;
max-height : none;
@@ -173,6 +172,5 @@ const ReportContainer = styled.div`
@media screen and (max-width : 899px) {
width : 100%;
- height : 100%;
}
`
diff --git a/src/Components/ReportUserForm.js b/src/Components/ReportUserForm.js
index 1677c489b694b0cd1ebb173244499a2e4c187826..28321b533bae36824d4b8c2b1421bc67258b4605 100644
--- a/src/Components/ReportUserForm.js
+++ b/src/Components/ReportUserForm.js
@@ -137,8 +137,8 @@ export const ButtonsDiv = styled.div`
`
export const ButtonCancelar = styled(Button)`
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
@@ -150,10 +150,10 @@ export const ButtonCancelar = styled(Button)`
`
export const ButtonEnviar = styled(Button)`
- color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
- background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
- border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index e0a2f0eff01375b05430c609fea816b67d7b455a..acec633b1e0d3bbe05a79efd69728920a51bab1d 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -139,6 +139,9 @@ export default function ResourceCardOptions(props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleClose}>
<Link to={"/recurso/" + props.learningObjectId}>
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index 67d22bc760ce3bf1e3449ddad59fb7755a8020b4..e708c007b8b2f258d8dcf81c90d009d25adb48de 100644
--- a/src/Components/ResourceList.js
+++ b/src/Components/ResourceList.js
@@ -127,7 +127,7 @@ export default function ResourceList(props) {
<Title contrast={props.contrast}>
{props.resources.length ?
props.resources.length + " recurso" + (props.resources.length === 1 ? "" : "s")
- : "Carregando coleção"}
+ : "Nenhum recurso encontrado"}
</Title>
</Grid>
<Grid item>
diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js
index 32b73303335a817ea711acbf53565dd74e87bdcf..f1bc74654af9d90ee856c4ef8a8647649c05a72e 100644
--- a/src/Components/ResourcePageComponents/Footer.js
+++ b/src/Components/ResourcePageComponents/Footer.js
@@ -254,6 +254,9 @@ export default function Footer(props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<MenuItem className={`${props.contrast}BackColor`}>
<ReportButton
diff --git a/src/Components/SearchPageComponents/CollectionTemplate.js b/src/Components/SearchPageComponents/CollectionTemplate.js
index df3e526f1a127f4309dade2ab52b5df2bda59bdd..b2038c24285b79fd812209dc33ccc6daf0908ce0 100644
--- a/src/Components/SearchPageComponents/CollectionTemplate.js
+++ b/src/Components/SearchPageComponents/CollectionTemplate.js
@@ -117,7 +117,7 @@ const TotalPages = styled.span`
`
const StyledIconButton = styled(Paper)`
border-radius: 50% !important;
- background-color: ${props => props.contrast === "" ? props.disabled ? "#666" : "673ab7" : "black"} !important;
+ background-color: ${props => props.contrast === "" ? props.disabled ? "#666" : "#673ab7" : "black"} !important;
.icon{
color: ${props => props.contrast === "" ? "white": props.disabled ? "white" : "yellow"} !important;
}
diff --git a/src/Components/SearchPageComponents/HeaderFilters.js b/src/Components/SearchPageComponents/HeaderFilters.js
index a1d5f834c5d7c3e6335024fe7e06b270ee39e5e9..b9ae795dd0594fc2aa020eb091d088277f7744c6 100644
--- a/src/Components/SearchPageComponents/HeaderFilters.js
+++ b/src/Components/SearchPageComponents/HeaderFilters.js
@@ -33,7 +33,7 @@ export default function HeaderFilters({ options, contrast, orders, currOption, c
value={option.name}
name={option.value}
>
- <span style={currOption === option.name ? { color: option.color, textDecoration: "underline", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
+ <span style={currOption === option.name ? { color: option.color, fontWeight: "500" } : { color: option.color, fontWeight: "lighter" }}>
{option.value}
</span>
</StyledMenuItem>
@@ -67,7 +67,7 @@ export default function HeaderFilters({ options, contrast, orders, currOption, c
value={option.name}
name={option.value}
>
- <span style={currOrder === option.name ? { color: option.color, textDecoration: "underline", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
+ <span style={currOrder === option.name ? { color: option.color, fontWeight: "500" } : { color: option.color, fontWeight: "lighter" }}>
{option.value}
</span>
</StyledMenuItem>
@@ -107,7 +107,7 @@ export default function HeaderFilters({ options, contrast, orders, currOption, c
value={option.name}
name={option.value}
>
- <span style={currOption === option.name ? { color: option.color, textDecoration: "underline", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
+ <span style={currOption === option.name ? { color: option.color, fontWeight: "500" } : { color: option.color, fontWeight: "lighter" }}>
{option.value}
</span>
</StyledMenuItem>
@@ -136,10 +136,12 @@ const StyledTextField = styled(TextField)`
border-color: ${props => props.contrast === "" ? "#666" : "white"};
}
}
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline yellow !important"};
`
const StyledMenuItem = styled(MenuItem)`
background-color: ${props => props.contrast === "" ? "" : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline yellow !important"};
`
const FiltersPaper = styled(Paper)`
diff --git a/src/Components/ShareModal.js b/src/Components/ShareModal.js
index 0e4f6791f71fb4fe84b6caa46910cea605cf9b68..9e6835e90e8f06a6ab6b144addbf99f76c013316 100644
--- a/src/Components/ShareModal.js
+++ b/src/Components/ShareModal.js
@@ -57,13 +57,13 @@ export default function ShareModal (props) {
<Container className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}>
<Header>
<span style={{width:"32px"}}/>
- <h2>Compartilhar este recurso</h2>
+ <h2>Compartilhar recurso</h2>
<CloseModalButton handleClose={props.handleClose}/>
</Header>
<Content style={{paddingTop : "0"}}>
<ResourceInfo>
<img src={props.thumb ? apiDomain + props.thumb : require('../img/logo_small.svg')} alt="thumbnail recurso"/>
- <div className="text">
+ <div>
<strong>{props.title}</strong>
</div>
</ResourceInfo>
@@ -74,7 +74,7 @@ export default function ShareModal (props) {
<Grid container style={{paddingRight : "15px", paddingLeft : "15px"}}>
{/*Share to facebook*/}
- <Grid item xs={4}>
+ <Grid item xs={6} md={4}>
<StyledLink
href={"https://www.facebook.com/sharer/sharer.php?u=" + props.link}
rel="noreferrer"
@@ -87,7 +87,7 @@ export default function ShareModal (props) {
</Grid>
{/*Share to Twitter*/}
- <Grid item xs={4}>
+ <Grid item xs={6} md={4}>
<StyledLink
href={"https://www.twitter.com/intent/tweet?url=" + props.link}
rel="noreferrer"
@@ -100,7 +100,7 @@ export default function ShareModal (props) {
</Grid>
{/*Get shareable link*/}
- <Grid item xs={4}>
+ <Grid item xs={12} md={4}>
{
document.queryCommandSupported('copy') &&
<ShareButton className={`${props.contrast}LinkColor`} onClick={copyToClipboard}>
@@ -148,7 +148,7 @@ const ShareInfo = styled.div`
`
const ResourceInfo = styled.div`
- margin-top : 0;
+ margin-top : 15px;
overflow : hidden;
border-radius : 5px;
display : flex;
@@ -175,7 +175,7 @@ const ResourceInfo = styled.div`
float : left;
padding : 0;
- @media screen and (min-width : 600px) {
+ @media screen and (min-width : 769px) {
margin-right : 20px;
margin-bottom : 0;
}
@@ -184,6 +184,10 @@ const ResourceInfo = styled.div`
}
}
+ @media screen and (max-width : 768px) {
+ flex-direction : column;
+ }
+
`
const Content = styled.div`
@@ -237,7 +241,6 @@ const Container = styled.div`
@media screen and (max-width : 699px) {
width : 100%;
- height : 100%;
}
`
const StyledLink = styled.a`
diff --git a/src/Components/SignUpContainerFunction.js b/src/Components/SignUpContainerFunction.js
index 5af5f4f7fed21e91bb2524712c9c1b2b2bc86a47..6b81ac5e10c9964b6f123e95070d89a33ef10e46 100644
--- a/src/Components/SignUpContainerFunction.js
+++ b/src/Components/SignUpContainerFunction.js
@@ -280,7 +280,7 @@ const ContainerStyled = styled.div`
flex-direction : column;
min-width : 450px;
border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
- overflow-y: scroll;
+ overflow-y: auto;
max-height : 90%;
position : relative;
diff --git a/src/Components/TabPanels/PanelComponents/ButtonsArea.js b/src/Components/TabPanels/PanelComponents/ButtonsArea.js
index da75ecabf210f3c41fcd8d7bccece5fc86719143..ac5ad9269e6f51332d688ffc40785dad035c00bb 100644
--- a/src/Components/TabPanels/PanelComponents/ButtonsArea.js
+++ b/src/Components/TabPanels/PanelComponents/ButtonsArea.js
@@ -126,7 +126,6 @@ const ButtonMostrarMaisRede = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
`
export const ButtonMostrarMaisColecao = styled(Button)`
@@ -148,7 +147,6 @@ export const ButtonMostrarMaisColecao = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
`
export const ButtonMostrarMaisRecurso = styled(Button)`
@@ -170,5 +168,4 @@ export const ButtonMostrarMaisRecurso = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
`
diff --git a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
index c6585ef1a5275d26dd2fbdbec3e907bd810b48de..422c3e86b3d48d46cd3f8ed11bde5c3d9926323b 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
@@ -79,7 +79,7 @@ export default function Template(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner text="Carregando recurso..." />
+ <LoadingSpinner contrast={props.contrast} text="Carregando recurso..." />
:
<ButtonsAreaRecurso
contrast={props.contrast}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
index 74815059cb148ef80f0ae58e00b05e030c8aa9af..1243c015b440b54a02bbe59b003ee95e2a7f820e 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
@@ -57,7 +57,7 @@ export default function Template(props) {
:
(
<React.Fragment>
- <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
+ <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "30px" }}>
{
props.slice.map((card) =>
<Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
@@ -84,7 +84,7 @@ export default function Template(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner text={'Carregando Recursos...'} />
+ <LoadingSpinner contrast={props.contrast} text={'Carregando Recursos...'} />
:
<ButtonsAreaRecurso
contrast={props.contrast}
diff --git a/src/Components/TabPanels/StyledComponents.js b/src/Components/TabPanels/StyledComponents.js
index 9e3ee1c84d32f75cbe03a52723075feef30c7056..88b121132437f546b0f832c56fea8af55faffdee 100644
--- a/src/Components/TabPanels/StyledComponents.js
+++ b/src/Components/TabPanels/StyledComponents.js
@@ -185,11 +185,23 @@ export const UserProfileContainer = styled.div`
@media screen and (min-width: 768px) and (max-width : 991px) {
width : 750px;
}
+ @media screen and (max-width: 600px) {
+ width : 100%;
+ }
`
export const CoverContainer = styled.div`
- height : 230px;
position : relative;
+
+ @media screen and (min-width: 1200px) {
+ height : 234px;
+ }
+ @media screen and (min-width: 992px) and (max-width : 1199px){
+ height : 194px;
+ }
+ @media screen and (min-width: 768px) and (max-width : 991px) {
+ height : 150px;
+ }
@media screen and (max-width: 600px) {
height : 128px
}
diff --git a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
index 65f504c13616f1c2230b10328f156d917b587370..19f4c6e4485d3e674e1d5ba01a43ffd15932cf35 100644
--- a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
+++ b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
@@ -46,8 +46,8 @@ export default function ModalExcluirConta (props) {
const [formEmail, setEmail] = useState(
{
- key : false,
- value : "",
+ key : true,
+ value : "",
}
)
const handleChange = (e) => {
@@ -92,19 +92,19 @@ export default function ModalExcluirConta (props) {
}}
>
<Fade in={props.open}>
- <Container>
+ <Container contrast={props.contrast}>
<Header>
<span style={{width:"32px"}}/>
<h2>Excluir a Conta Definitivamente</h2>
<CloseModalButton handleClose={props.handleClose}/>
</Header>
<Content>
- <div style={{display : "flex", flexDirection : "column", color : "#666", textAlign : "left"}}>
+ <div style={{display : "flex", flexDirection : "column", textAlign : "left"}}>
<div style={{display : "flex", flexDirection : "row", margin : "0 30px", justifyContent : "center", alignContent : "center"}}>
<div style={{height : "90px", position : "relative"}}>
<img src={ExcluirAvatar} alt="excluir-avatar" style={{height : "inherit", objectFit : "contain", verticalAlign : "middle"}}/>
</div>
- <p style={{paddingLeft : "10px"}}>Você é muito importante para a rede, ficarÃamos felizes se você ficasse. Quer contar o que aconteceu? Talvez possamos ajudar. <StyledLink to="/contato">Entre em contato.</StyledLink></p>
+ <p style={{paddingLeft : "10px"}}>Você é muito importante para a rede, ficarÃamos felizes se você ficasse. Quer contar o que aconteceu? Talvez possamos ajudar. <StyledLink to="/contato" className={`${props.contrast}LinkColor`}>Entre em contato.</StyledLink></p>
</div>
<p style={{marginTop : "20px"}}>
Saiba que a exclusão da conta removerá o seu perfil permanentemente. Se você publicou algum recurso, ele ainda ficará disponÃvel para os usuários da plataforma.
@@ -113,6 +113,7 @@ export default function ModalExcluirConta (props) {
É necessário que você digite seu e-mail para confirmar a exclusão:
</p>
<FormInput
+ contrast={props.contrast}
inputType={"text"}
name={"email"}
value={formEmail.value}
@@ -122,9 +123,9 @@ export default function ModalExcluirConta (props) {
error = {formEmail.key}
help = {formEmail.key ? ( formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : "O e-mail deve ser o mesmo no qual você cadastrou esta conta") : ""}
/>
- <div style={{display : "flex", flexDirection : "row", justifyContent : "space-evenly", paddingTop : "15px"}}>
- <GreyButton callback={props.handleClose} text={"Cancelar"}/>
- <RedButton disabled={formEmail.key} onClick = {() => {deleteAccount()}}>EXCLUIR PERMANENTEMENTE</RedButton>
+ <div style={{display : "flex", flexDirection : "row", justifyContent : "space-evenly", paddingTop : "15px"}}>
+ <GreyButton contrast={props.contrast} callback={props.handleClose} text={"Cancelar"}/>
+ <RedButton contrast={props.contrast} disabled={formEmail.key} onClick = {() => {deleteAccount()}}>EXCLUIR PERMANENTEMENTE</RedButton>
</div>
</div>
</Content>
@@ -136,10 +137,17 @@ export default function ModalExcluirConta (props) {
}
const RedButton = styled(Button)`
- background-color : rgb(230,60,60) !important;
- color : #fff !important;
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ text-decoration : ${props => props.contrast === "" ? "none" : "underline yellow"} !important;
+ background-color : ${props => props.contrast === "" ? "rgb(230,60,60)" : "black"} !important;
font-weight : bolder;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+
+ :disabled {
+ color: ${props => props.contrast === "" ? "white" : "white"} !important;
+ text-decoration : none !important;
+ background-color : ${props => props.contrast === "" ? "#666" : "black"} !important;
+ }
`
const Content = styled.div`
@@ -158,7 +166,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -186,9 +193,12 @@ const StyledModal = styled(Modal)`
`
const Container = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : white;
align : center;
display : flex;
flex-direction : column;
@@ -210,6 +220,6 @@ const Container = styled.div`
}
`
const StyledLink = styled(Link)`
- text-decoration : none !important;
- color : #00bcd4 !important;
+ text-decoration : none;
+ color : #00bcd4;
`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
index 4d0e391b5bb926f11c796c01f3acd6693f572cc9..7e771677edfb0f430622128cf013c49077ef6099 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
@@ -34,229 +34,230 @@ import { noAvatar } from "ImportImages.js";
export default function TabPanelAtividades(props) {
- const [loading, handleLoading] = useState(true)
- const [loadingMore, handleLoadingMore] = useState(false);
- const [notifications, setNotifications] = useState([]);
- const [notificatonsLength, setLength] = useState(0);
- const [totalResults, setTotalResults] = useState(0);
- const [limit, setLimit] = useState(30);
- const [error, setError] = useState(false)
- const [snackInfo, setSnackInfo] = useState({
- open: false,
- text: '',
- severity: '',
- color: '',
- })
-
- function handleCloseSnackBar() {
- const info = {
- open: false,
- text: '',
- severity: '',
- color: '',
- }
- handleSnackInfo(info)
- }
-
- function handleSnackInfo(info) {
- setSnackInfo({
- ...info
+ const [loading, handleLoading] = useState(true)
+ const [loadingMore, handleLoadingMore] = useState(false);
+ const [notifications, setNotifications] = useState([]);
+ const [notificatonsLength, setLength] = useState(0);
+ const [totalResults, setTotalResults] = useState(0);
+ const [limit, setLimit] = useState(30);
+ const [error, setError] = useState(false)
+ const [snackInfo, setSnackInfo] = useState({
+ open: false,
+ text: '',
+ severity: '',
+ color: '',
})
- }
-
- const showMore = (offset) => {
- handleLoadingMore(true);
- const url = `/feed?offset=${limit}&limit=${offset}`
- setLimit(limit + offset)
- getRequest(url, handleSuccess, handleError)
- }
- function handleError(error) {
- const info = {
- open: true,
- text: 'Ocorreu um erro ao tentar carregar suas notificações!',
- severity: 'error',
- color: 'red',
+ function handleCloseSnackBar() {
+ const info = {
+ open: false,
+ text: '',
+ severity: '',
+ color: '',
+ }
+ handleSnackInfo(info)
}
- handleSnackInfo(info)
- handleLoadingMore(false)
- handleLoading(false)
- setError(true)
- }
- function handleSuccess(data, header) {
- if (header.has('X-Total-Count')) {
- setTotalResults(header.get('X-Total-Count'));
+ function handleSnackInfo(info) {
+ setSnackInfo({
+ ...info
+ })
}
- if (data.errors) {
- const info = {
- open: true,
- text: 'Ocorreu um erro ao tentar carregar suas notificações!',
- severity: 'error',
- color: 'red',
- }
- handleSnackInfo(info)
- handleLoadingMore(false)
- handleLoading(false)
- setError(true)
+
+ const showMore = (offset) => {
+ handleLoadingMore(true);
+ const url = `/feed?offset=${limit}&limit=${offset}`
+ setLimit(limit + offset)
+ getRequest(url, handleSuccess, handleError)
}
- else {
- if (data.length >= 1) {
- handleLoadingMore(false)
- let currData = [...notifications]
- currData = currData.concat(data)
- setNotifications(currData)
- setLength(currData.length)
- handleLoading(false)
- }
- else {
+
+ function handleError(error) {
const info = {
- open: true,
- text: 'Não há mais notificações para serem carregadas...',
- severity: 'warning',
- color: '#FFC125'
+ open: true,
+ text: 'Ocorreu um erro ao tentar carregar suas notificações!',
+ severity: 'error',
+ color: 'red',
}
handleSnackInfo(info)
handleLoadingMore(false)
handleLoading(false)
- }
+ setError(true)
+ }
+
+ function handleSuccess(data, header) {
+ if (header.has('X-Total-Count')) {
+ setTotalResults(header.get('X-Total-Count'));
+ }
+ if (data.errors) {
+ const info = {
+ open: true,
+ text: 'Ocorreu um erro ao tentar carregar suas notificações!',
+ severity: 'error',
+ color: 'red',
+ }
+ handleSnackInfo(info)
+ handleLoadingMore(false)
+ handleLoading(false)
+ setError(true)
+ }
+ else {
+ if (data.length >= 1) {
+ handleLoadingMore(false)
+ let currData = [...notifications]
+ currData = currData.concat(data)
+ setNotifications(currData)
+ setLength(currData.length)
+ handleLoading(false)
+ }
+ else {
+ const info = {
+ open: true,
+ text: 'Não há mais notificações para serem carregadas...',
+ severity: 'warning',
+ color: '#FFC125'
+ }
+ handleSnackInfo(info)
+ handleLoadingMore(false)
+ handleLoading(false)
+ }
+ }
}
- }
- useEffect(() => {
- const url = `/feed?offset=0&limit=30`
- getRequest(url, handleSuccess, handleError)
- }, [])
+ useEffect(() => {
+ const url = `/feed?offset=0&limit=30`
+
+ getRequest(url, handleSuccess, handleError)
+ }, [])
- return (
- <MainContainerDesktop contrast={props.contrast}>
- <SnackBar
- snackbarOpen={snackInfo.open}
- handleClose={handleCloseSnackBar}
- severity={snackInfo.severity}
- color={snackInfo.color}
- text={snackInfo.text}
- />
- <Paper elevation={3}>
- <div style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
- <DivTitulo>
- <InnerDivTitulo>
- <TituloContent contrast={props.contrast}>
- <p style={{ margin: "0 0 10px", marginBottom: "40px" }}>Todas Notificações</p>
- </TituloContent>
- </InnerDivTitulo>
- </DivTitulo>
- {
- loading ?
- (
- <LoadingSpinner text={'Carregando Atividades'} contrast={props.contrast} />
- )
- :
- (
- [
- <div>
+ return (
+ <MainContainerDesktop contrast={props.contrast}>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnackBar}
+ severity={snackInfo.severity}
+ color={snackInfo.color}
+ text={snackInfo.text}
+ />
+ <Paper elevation={3}>
+ <div style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <DivTitulo>
+ <InnerDivTitulo>
+ <TituloContent contrast={props.contrast}>
+ <p style={{ margin: "0 0 10px", marginBottom: "40px" }}>Todas Notificações</p>
+ </TituloContent>
+ </InnerDivTitulo>
+ </DivTitulo>
{
- error ?
- <ErrorP
- contrast={props.contrast}
- >
- Erro ao tentar obter as notificações
- </ErrorP>
+ loading ?
+ (
+ <LoadingSpinner text={'Carregando Atividades'} contrast={props.contrast} />
+ )
:
- notificatonsLength === 0 ?
- (
+ (
+ [
+ <div>
+ {
+ error ?
+ <ErrorP
+ contrast={props.contrast}
+ >
+ Erro ao tentar obter as notificações
+ </ErrorP>
+ :
+ notificatonsLength === 0 ?
+ (
- <NoNotificationsDiv>
- <div>
- <div>
- <img src={Bolo} alt='bolo' style={{ width: "23px", display: "block", marginLeft: "auto", marginRight: "auto" }} />
- <H3Styled contrast={props.contrast}>Você se cadastrou na Plataforma</H3Styled>
- </div>
- <InfoP
- contrast={props.contrast}
- >Construa conosco a plataforma e amplie sua rede de conhecimento interagindo
- <br />
- com pessoas envolvidas com experiências que ocorrem em todo o Brasil!
- </InfoP>
- </div>
- </NoNotificationsDiv>
+ <NoNotificationsDiv>
+ <div>
+ <div>
+ <img src={Bolo} alt='bolo' style={{ width: "23px", display: "block", marginLeft: "auto", marginRight: "auto" }} />
+ <H3Styled contrast={props.contrast}>Você se cadastrou na Plataforma</H3Styled>
+ </div>
+ <InfoP
+ contrast={props.contrast}
+ >Construa conosco a plataforma e amplie sua rede de conhecimento interagindo
+ <br />com pessoas envolvidas com experiências que ocorrem em todo o Brasil!
+ </InfoP>
+ </div>
+ </NoNotificationsDiv>
- )
- :
- (
- <>
- <List height={400} width={300}>
- {
- notifications.map((notification, id) =>
- (notification.recipient_type !== "NilClass") &&
- <ActivityListItem
- contrast={props.contrast}
- key={id}
- onMenuBar={false}
- avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : noAvatar}
- activity={notification.activity}
- actionType={notification.trackable_type}
- objectType={notification.recipient_type}
- createdAt={notification.created_at}
- ownerName={notification.owner.name}
- ownerHref={'/usuario-publico/' + notification.owner.id}
- recipientName={notification.recipient.name}
- recipientHref={"/recurso/" + notification.recipient.id}
- />
- )
+ )
+ :
+ (
+ <>
+ <List height={400} width={300}>
+ {
+ notifications.map((notification, id) =>
+ (notification.recipient_type !== "NilClass") &&
+ <ActivityListItem
+ contrast={props.contrast}
+ key={id}
+ onMenuBar={false}
+ avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : noAvatar}
+ activity={notification.activity}
+ actionType={notification.trackable_type}
+ objectType={notification.recipient_type}
+ createdAt={notification.created_at}
+ ownerName={notification.owner.name}
+ ownerHref={'/usuario-publico/' + notification.owner.id}
+ recipientName={notification.recipient.name}
+ recipientHref={"/recurso/" + notification.recipient.id}
+ />
+ )
+ }
+ </List>
+ {
+ loadingMore ?
+ <LoadingSpinner contrast={props.contrast} text="Carregando mais atividades..." />
+ :
+ <Grid container direction="row" alignItems="center" spacing={1}>
+ <Grid xs={12} md={12} item style={{ fontSize: "14px", color: "#666" }}>
+ <ShowData disabled={true} contrast={props.contrast}>
+ Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade " : "Atividades "}de {totalResults}
+ </ShowData>
+ </Grid>
+ <StyledGrid item xs={12} md={12}>
+ <LoadMoreButton contrast={props.contrast} onClick={() => { showMore(4) }}>CARREGAR MAIS 4</LoadMoreButton>
+ <LoadMoreButton contrast={props.contrast} onClick={() => { showMore(20) }}>CARREGAR MAIS 20</LoadMoreButton>
+ </StyledGrid>
+ </Grid>
+ }
+ </>
+ )
}
- </List>
- {
- loadingMore ?
- <LoadingSpinner contrast={props.contrast} text="Carregando mais atividades..." />
- :
- <Grid container direction="row" alignItems="center" justify="flex-start" spacing={1}>
- <Grid item xs={12} md={4}>
- <LoadMoreButton contrast={props.contrast} onClick={() => { showMore(4) }}>CARREGAR MAIS 4</LoadMoreButton>
- </Grid>
- <Grid item xs={12} md={4}>
- <LoadMoreButton contrast={props.contrast} onClick={() => { showMore(20) }}>CARREGAR MAIS 20</LoadMoreButton>
- </Grid>
- <Grid xs={12} md={4} item style={{ fontSize: "14px", color: "#666" }}>
- <ShowData disabled={true} contrast={props.contrast}>
- Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade " : "Atividades "}
- de {totalResults}
- </ShowData>
- </Grid>
- </Grid>
- }
- </>
- )
+ </div>
+ ]
+ )
}
- </div>
-
- ]
- )
- }
- </div>
- </Paper>
- </MainContainerDesktop>
- )
+ </div>
+ </Paper>
+ </MainContainerDesktop>
+ )
}
+const StyledGrid = styled(Grid)`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`
const InfoP = styled.p`
- font-size: "15px";
- font-weight: "lighter";
- margin: "0 0 10px";
- display: "flex";
- justify-content: "center";
- text-align: "center";
- color: ${props => props.contrast === "" ? "" : "white"};
+ font-size: "15px";
+ font-weight: "lighter";
+ margin: "0 0 10px";
+ display: "flex";
+ justify-content: "center";
+ text-align: "center";
+ color: ${props => props.contrast === "" ? "" : "white"};
`
const ErrorP = styled.p`
- font-size: "15px";
- font-weight: "lighter";
- margin: "0 0 10px";
- display: "flex";
- justify-content: "center";
- text-align: "center";
- color: ${props => props.contrast === "" ? "" : "white"};
+ font-size: "15px";
+ font-weight: "lighter";
+ margin: "0 0 10px";
+ display: "flex";
+ justify-content: "center";
+ text-align: "center";
+ color: ${props => props.contrast === "" ? "" : "white"};
`
const MainContainerDesktop = styled.div`
@@ -297,25 +298,25 @@ const NoNotificationsDiv = styled.div`
`
const LoadMoreButton = styled(Button)`
+ margin-left: 6px !important;
+ margin-right: 6px !important;
outline : none !important;
- display : block !important;
cursor : pointer !important;
- min-height : 36px !important;
+ max-height : 36px !important;
min-width : 88px !important;
- line-height: 36px !important;
vertical-align: middle !important;
border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
padding : 0 px !important;
- margin : auto !important;
+
text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
font-weight : 500 !important;
overflow : hidden !important;
text-transform : uppercase !important;
font-size : 14px !important;
background : transparent !important;
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
&:hover {
- background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
+ background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
}
`
@@ -323,9 +324,8 @@ const ShowData = styled(Button)`
outline : none !important;
display : block !important;
cursor : pointer !important;
- min-height : 36px !important;
+ max-height : 36px !important;
min-width : 88px !important;
- line-height: 36px !important;
vertical-align: middle !important;
border : 0 !important;
padding : 0 px !important;
@@ -336,7 +336,7 @@ const ShowData = styled(Button)`
text-transform : none !important;
font-size : 14px !important;
background : transparent !important;
- color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
&:hover {
background : rgba(158,158,158,0.2) !important
}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
index 94d4a13ab93b1216a52f0423e0691e37d84b06f7..cd49d1a70082a26cd2ff3e01314b25a13285fd52 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
@@ -198,9 +198,7 @@ export default function TabPanelEditarPerfil(props) {
const ButtonConfirmar = styled(Button)`
background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
- color : #fff !important;
font-family : 'Roboto',sans-serif !important;
- font-size : 14px !important;
font-weight : 500 !important;
padding-left : 16px !important;
padding-right : 16px !important;
@@ -260,13 +258,10 @@ export const ButtonCancelar = styled(Button)`
border-radius : 3px !important;
box-sizing : border-box !important;
user-select : none !important;
- color: ${props => props.contrast === "" ? "black !important" : "yellow !important"};
- border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "#666" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "" : "transparent !important"};
padding : 0 6px !important;
margin : 6px 8px !important;
- :hover{
- background-color: ${props => props.contrast === "" ? "#f1f1f1 !important" : "rgba(255,255,0,0.24) !important"};
- }
`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
index 9cb598a73d580fb96b60dc398f55e50332342bea..502a5e043125bae13ef62b7111455103868aa55d 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
@@ -219,7 +219,7 @@ export default function TabPanelGerenciarConta(props) {
</div>
<div style={{ margin: "0", display: "flex", justifyContent: "flex-start" }}>
<ModalExcluirConta contrast={state.contrast} open={modalExcluir} handleClose={() => { setModalExcluir(false) }} />
- <ButtonCancelar contrast={state.contrast} onClick={() => { setModalExcluir(true) }}>EXCLUIR CONTA</ButtonCancelar>
+ <ButtonCancelar contrast={state.contrast} style={{backgroundColor: "red", color: "white"}} onClick={() => { setModalExcluir(true) }}>EXCLUIR CONTA</ButtonCancelar>
</div>
</div>
</div>
diff --git a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
index 4f82ce7edac857cb6a6246a899140ad868180ebb..99fb7c2d3976ed102f8c1699267823ab3b623e0d 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
@@ -148,7 +148,7 @@ export default function TabPanelAtividades(props) {
setLoadingMoreCurating(true);
const limit = limite;
setcurrLimitCurating(currLimitCurating + limit)
- const url = `/users/${props.id}/submissions?offset=${currLimitCurating}&limit=${limit}&status=submitted`;
+ const url = `/users/${props.id}/submissions?offset=${currLimitCurating}&limit=${limit}&state=submitted`;
getRequest(url,
(data) => {
if (data.errors) {
diff --git a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
index daef1b4dbe54114aedf0ce9690df937c557c07aa..d13847cb1c08c16d822fa88e7eb024b9bb600172 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
@@ -22,6 +22,9 @@ import styled from 'styled-components'
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
+//Image Import
+import { Publicar } from "ImportImages.js";
+
//3 casos
//Professor nao cadastrado (nao pediu OU submitter_request = rejected)
//Professor em análise (submitter_request = requested)
@@ -129,7 +132,7 @@ const StyledH2 = styled.h2`
`
const ImageDiv = styled.div`
- background-image : url(https://plataformaintegrada.mec.gov.br/img/Publicar.png);
+ background-image : url(${Publicar});
display : block;
height : 114px;
background-size : contain;
diff --git a/src/Components/UploadPageComponents/Forms/SobreORecurso.js b/src/Components/UploadPageComponents/Forms/SobreORecurso.js
index aed295a3fa6dbf205e0a7f8e8f9e73ead515fa49..f0c43d9e6e007a3ac3681e5410c73f5eba8df2a4 100644
--- a/src/Components/UploadPageComponents/Forms/SobreORecurso.js
+++ b/src/Components/UploadPageComponents/Forms/SobreORecurso.js
@@ -46,8 +46,8 @@ function SobreORecurso (props) {
return (
<FormControl style={{width : "100%"}}>
- <StyledFormLabel contrast ={props.contrast} component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>Descrição geral do Recurso</b> (Opcional)
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <span><b>Descrição geral do Recurso</b> (Opcional)</span>
</StyledFormLabel>
<StyledTextField
InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
diff --git a/src/Components/UploadPageComponents/ModalCancelar.js b/src/Components/UploadPageComponents/ModalCancelar.js
index fcfbc9b273cb75e79e05910aed2946eba4a39eb6..ce980740a0089e6ffa368fa6494bace05cb36fe6 100644
--- a/src/Components/UploadPageComponents/ModalCancelar.js
+++ b/src/Components/UploadPageComponents/ModalCancelar.js
@@ -55,15 +55,15 @@ export default function ModalCancelar (props) {
}}
>
<Fade in={props.open}>
- <Container>
+ <Container contrast={props.contrast}>
<Content>
<h2>Tem certeza que deseja cancelar?</h2>
<p>Ao clicar no botão "OK", o seu recurso NÃO será salvo.</p>
</Content>
<ButtonsArea>
- <StyledButton onClick={props.handleClose}>VOLTAR</StyledButton>
- <Link to="/" style={{textDecoration : "none !important"}}>
- <StyledButton onClick={handleDelete}>OK</StyledButton>
+ <StyledButton contrast={props.contrast} onClick={props.handleClose}>VOLTAR</StyledButton>
+ <Link to="/">
+ <StyledButton contrast={props.contrast} onClick={handleDelete}>OK</StyledButton>
</Link>
</ButtonsArea>
</Container>
@@ -89,14 +89,12 @@ const Content = styled.div`
margin-top : 0;
font-size : 20px;
font-weight : bold;
- color : #666;
margin-bottom : 10px;
}
p {
margin : 0 0 10px;
font-size : 14px;
- color : #666;
}
`
@@ -114,8 +112,11 @@ const StyledModal = styled(Modal)`
`
const Container = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+
box-sizing : border-box;
- background-color : white;
max-width : none;
align : center;
display : flex;
@@ -132,14 +133,12 @@ const Container = styled.div`
}
`
const StyledButton = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+
max-height : 36px !important;
background-color : transparent !important;
- color : #00bcd4 !important;
- text-decoration : none !important;
outline : none !important;
text-align : center !important;
diff --git a/src/Components/UploadPageComponents/PartOne.js b/src/Components/UploadPageComponents/PartOne.js
index a97248e2bc55c72ffc4d07fb71149c0487c070b9..66c18a516774994d570b3124d0b6fcde319ab77e 100644
--- a/src/Components/UploadPageComponents/PartOne.js
+++ b/src/Components/UploadPageComponents/PartOne.js
@@ -213,7 +213,7 @@ export default function PartOne(props) {
)
:
(
- <LoadingSpinner text={"CARREGANDO"} />
+ <LoadingSpinner contrast={props.contrast} text={"CARREGANDO"} />
)
}
</React.Fragment >
diff --git a/src/Components/UploadPageComponents/PartThree.js b/src/Components/UploadPageComponents/PartThree.js
index e570e05fe36937728d2cc4736b38f21e1a869537..0f89f397c39105fc897c61a0ecaf2b38f22d2f42 100644
--- a/src/Components/UploadPageComponents/PartThree.js
+++ b/src/Components/UploadPageComponents/PartThree.js
@@ -22,8 +22,6 @@ import Grid from '@material-ui/core/Grid';
import styled from 'styled-components'
import { apiDomain } from '../../env';
import Stepper from './Stepper.js'
-import Rating from '@material-ui/lab/Rating';
-import StarBorderIcon from '@material-ui/icons/StarBorder';
import LoadingSpinner from '../LoadingSpinner.js'
import MoreIcon from '@material-ui/icons/More';
import SdCardIcon from '@material-ui/icons/SdCard';
diff --git a/src/Components/UploadPageComponents/PartTwo.js b/src/Components/UploadPageComponents/PartTwo.js
index 39f6c697ffe577bcdb6fc9a94f3f89587bd58414..802642796e3df7acbea725f0d2cc6fdfbdd4b221 100644
--- a/src/Components/UploadPageComponents/PartTwo.js
+++ b/src/Components/UploadPageComponents/PartTwo.js
@@ -257,7 +257,7 @@ export default function PartTwo(props) {
<Grid item xs={12} style={{ paddingBottom: "40px" }}>
<StyledFormControl required contrast={props.contrast}>
<StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }} >
- <b>Confirme se você concorda com os <strong onClick={() => window.open("/termos/", "_blank")} style={props.contrast === "" ? { color: "#ff7f00" } : { color: "yellow", textDecoration: "underline", cursor: "pointer" }}>termos de uso e de propriedade intelectual</strong></b>
+ <b>Confirme se você concorda com os <strong onClick={() => window.open("/termos/", "_blank")} style={props.contrast === "" ? { color: "#ff7f00", cursor: "pointer" } : { color: "yellow", textDecoration: "underline", cursor: "pointer" }}>termos de uso e de propriedade intelectual</strong></b>
</StyledFormLabel>
<FormControlLabel label={<span className="label">Li e concordo com os termos de uso e de propriedade intelectual.</span>} control={props.contrast === "" ? <BlueCheckBox checked={termsCheckbox} onChange={toggleCheckbox} /> : <ContrastCheckBox checked={termsCheckbox} onChange={toggleCheckbox} />}
/>
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
index 629e1fded68669f20522594b7faa332a97f8fa2c..2ef43db3871a7334640802137a0032f96f5f2fee 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
@@ -24,9 +24,9 @@ import styled from 'styled-components'
export default function EditThumbnail(props) {
const [crop] = useState({
- unit: "%",
- width: 100,
- aspect: 9 / 3
+ unit: "%" ,
+ width : 200,
+ aspect: 9/6
});
return (
<>
diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js
index 983c3a82fc75829f134d846b006db2fdc63d4606..95c1ff20bf76ee1a7aa5965175c3ab07dee9529f 100644
--- a/src/Components/UploadPageComponents/Stepper.js
+++ b/src/Components/UploadPageComponents/Stepper.js
@@ -63,23 +63,22 @@ export default function CustomizedSteppers(props) {
}
const MainGrid = styled(Grid)`
- padding: 1em;
- border-radius: 50px;
- width: 90%;
- margin: 0 auto;
- border: ${props => props.contrast === "" ? "2px solid #d4d4d4" : "2px solid white"};
+ padding: 1em;
+ border-radius: 50px;
+ width: 90%;
+ margin: 0 auto;
+ border: ${props => props.contrast === "" ? "2px solid #d4d4d4" : "2px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "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%;
- }
+ .currStep{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 2px solid rgba(255, 255, 255, 0.6);
+ border-radius: 50%;
+ }
.step{
height: 30px;
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index a4a9dba87c903249c3ab8fa3b87f7f6578515e3a..755942670cd73307035f3de0bc9fdcb641deb6d7 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -76,10 +76,11 @@ export const BlueButton = styled(Button)`
export const GrayButton = styled(Button)`
&:hover {
- background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
+ background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
}
- color : ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline" } !important;
+
background-color : ${props => props.contrast === "" ? "transparent !important" : "black !important"};
border : ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
font-weight : 600 !important;
@@ -113,6 +114,9 @@ export const GrayButton = styled(Button)`
font-style : inherit;
font-variant : inherit;
}
+
+ margin-left : 8px !important;
+ margin-right : 8px !important;
`
export const WrapperBox = styled.div`
@@ -437,55 +441,55 @@ export function StyledRadio(props) {
}
export const StyledDiv = styled.div`
- display : flex;
- margin-top : 30px;
- justify-content : space-evenly;
+ display : flex;
+ margin-top : 30px;
+ justify-content : space-evenly;
`
export const OrangeButton = styled(Button)`
max-height : 36px !important;
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
- font-weight : 600 !important;
- background: ${props => props.contrast === "" ? " #ff7f00 !important" : "black !important"};
- color: ${props => props.contrast === "" ? "rgba(255,255,255,0.87) !important" : "yellow !important"};
- border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
- margin-left : 8px !important;
- margin-right : 8px !important;
- &:hover {
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ font-weight : 600 !important;
+ background: ${props => props.contrast === "" ? " #ff7f00 !important" : "black !important"};
+ color: ${props => props.contrast === "" ? "rgba(255,255,255,0.87) !important" : "yellow !important"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ margin-left : 8px !important;
+ margin-right : 8px !important;
+ &:hover {
background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
+ }
`
export const GreyButton = styled(Button)`
-
-
- 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;
- text-align : center;
- color : currentColor;
- white-space : nowrap;
- text-transform : uppercase;
- font-weight : 600 !important;
- font-style : inherit;
- font-variant : inherit;
- }
+ 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;
+
+ margin-left : 8px !important;
+ margin-right : 8px !important;
+
+ .button-text {
+ cursor : pointer;
+ text-align : center;
+ color : currentColor;
+ white-space : nowrap;
+ text-transform : uppercase;
+ font-weight : 600 !important;
+ font-style : inherit;
+ font-variant : inherit;
+ }
`
export const Background = styled.div`
- padding-top : 40px;
- background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ padding-top : 40px;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
-
- .container {
+ .container {
padding : 0;
margin-right : auto;
margin-left : auto;
@@ -494,13 +498,13 @@ export const Background = styled.div`
@media screen and (min-width: 768px) {
- width : 750px;
+ width : 750px;
}
@media screen and (min-width: 992px) {
width : 970px;
- }
+ }
@media screen and (min-width: 1200px) {
- width : 1170px;
+ width : 1170px;
}
}
`
diff --git a/src/Components/UserPageComponents/Cover.js b/src/Components/UserPageComponents/Cover.js
index 4d5e702ca9a14b3120e93dda0282aa2876866408..d4a20747710413fe49ff6e6ad2f93ea337de39c9 100644
--- a/src/Components/UserPageComponents/Cover.js
+++ b/src/Components/UserPageComponents/Cover.js
@@ -45,6 +45,7 @@ export default function Cover (props) {
useEffect( () => {
setCoverImg(state.currentUser.cover)
}, state.currentUser.cover)
+
return (
<>
<ModalAlterarCover
diff --git a/src/Components/UserPageComponents/EditProfileButton.js b/src/Components/UserPageComponents/EditProfileButton.js
index de9e1d778682515aa40d1f60864d2b4fe5c7208d..b063638067a684d10a9b0137dbbea171da08590c 100644
--- a/src/Components/UserPageComponents/EditProfileButton.js
+++ b/src/Components/UserPageComponents/EditProfileButton.js
@@ -36,7 +36,7 @@ export default function EditProfileButton({ contrast }) {
)
:
(
- <EditIcon className="icon" />
+ <EditIcon className="icon" style={contrast === "" ? {color: "white"} : {color: "yellow"}}/>
)
}
</Button>
@@ -45,35 +45,32 @@ export default function EditProfileButton({ contrast }) {
}
const EditProfileAnchor = styled(Link)`
- Button {
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
- background-color: ${props => props.contrast === "" ? "#fafafa" : "black"};
- position : absolute;
- right : 10px;
- top : 10px;
- margin-bottom : 20px;
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- padding : 0 10px;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- border-radius : 3px;
- @media screen and (min-width: 800px) {
- min-height : 36px;
- min-width : 88px;
- }
- line-height : 36px;
- border: ${props => props.contrast === "" ? "0" : "1px solid white"};
- display: inline-block;
- text-align : center;
- :hover{
- background-color: ${props => props.contrast === "" ? "#fafafa" : "rgba(255,255,0,0.24)"};
- }
- @media screen and (max-width: 600px) {
- max-width : 44px !important ;
- }
- }
- .icon{
- margin-right: 5px;
- vertical-align: middle;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- }
+ Button {
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
+ background-color: ${props => props.contrast === "" ? "#52BCD4" : "black"} !important;
+ position : absolute;
+ right : 10px;
+ top : 10px;
+ margin-bottom : 20px;
+ color: ${props => props.contrast === "" ? "white" : "yellow"};
+ padding : 0 10px;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ border-radius : 3px;
+ @media screen and (min-width: 800px) {
+ min-height : 36px;
+ min-width : 88px;
+ }
+ line-height : 36px;
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
+ display: inline-block;
+ text-align : center;
+ @media screen and (max-width: 600px) {
+ max-width : 44px !important ;
+ }
+ }
+ .icon{
+ margin-right: 5px;
+ vertical-align: middle;
+ color: white;
+ }
`
diff --git a/src/Pages/ChangePasswordPage.js b/src/Pages/ChangePasswordPage.js
index cf552c07180f6e589cb39e9c697c50f4df2641cc..8bc12a7f134ea3e7b3f9410e79d2c7ca3c9e26a3 100644
--- a/src/Pages/ChangePasswordPage.js
+++ b/src/Pages/ChangePasswordPage.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
import { BackgroundDiv } from '../Components/TabPanels/StyledComponents.js'
import Paper from '@material-ui/core/Paper'
import styled from 'styled-components'
@@ -13,12 +13,14 @@ import Grid from '@material-ui/core/Grid'
import IconButton from '@material-ui/core/IconButton'
import VisibilityIcon from '@material-ui/icons/Visibility'
import VisibilityOffIcon from '@material-ui/icons/VisibilityOff'
+import { Store } from '../Store'
function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
export default function ChangePasswordPage(props) {
+ const { state } = useContext(Store)
const [error, setError] = useState(false)
const [success, setSuccess] = useState(false)
@@ -175,7 +177,7 @@ export default function ChangePasswordPage(props) {
if (error)
return (
- <BackgroundDiv>
+ <BackgroundDiv contrast={state.contrast}>
<Snackbar
open={snackInfo.open}
autoHideDuration={6000}
@@ -187,13 +189,13 @@ export default function ChangePasswordPage(props) {
</Alert>
</Snackbar>
<div>
- <CustomizedBreadcrumbs
+ <CustomizedBreadcrumbs contrast={state.contrast}
values={["Recuperar senha", "Alterar senha"]}
/>
</div>
<div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}>
<Paper elevation={3}>
- <CardDiv>
+ <CardDiv contrast={state.contrast}>
<div style={{ overflow: "hidden", display: "inline-block" }}>
<h2 style={{ fontSize: "32px", fontWeight: "200", marginBottom: "20px", lineHeight: '35px' }}>
Ocorreu um erro. Por favor, tente novamente mais tarde. Você será redirecionado para a home em... <StyledTimer>{time}</StyledTimer>
@@ -206,7 +208,7 @@ export default function ChangePasswordPage(props) {
)
else if (success)
return (
- <BackgroundDiv>
+ <BackgroundDiv contrast={state.contrast}>
<Snackbar
open={snackInfo.open}
autoHideDuration={6000}
@@ -218,13 +220,13 @@ export default function ChangePasswordPage(props) {
</Alert>
</Snackbar>
<div>
- <CustomizedBreadcrumbs
+ <CustomizedBreadcrumbs contrast={state.contrast}
values={["Recuperar senha", "Alterar senha"]}
/>
</div>
<div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}>
<Paper elevation={3}>
- <CardDiv>
+ <CardDiv contrast={state.contrast}>
<div style={{ overflow: "hidden", display: "inline-block" }}>
<h2 style={{ fontSize: "32px", fontWeight: "200", marginBottom: "20px", lineHeight: '35px' }}>
Sua senha foi alterada com sucesso. Você será redirecionado para a home em... <StyledTimer>{time}</StyledTimer>
@@ -237,7 +239,7 @@ export default function ChangePasswordPage(props) {
)
else
return (
- <BackgroundDiv>
+ <BackgroundDiv contrast={state.contrast}>
<Snackbar
open={snackInfo.open}
autoHideDuration={6000}
@@ -249,19 +251,20 @@ export default function ChangePasswordPage(props) {
</Alert>
</Snackbar>
<div>
- <CustomizedBreadcrumbs
+ <CustomizedBreadcrumbs contrast={state.contrast}
values={["Recuperar senha", "Alterar senha"]}
/>
</div>
<div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}>
<Paper elevation={3}>
- <CardDiv>
+ <CardDiv contrast={state.contrast}>
<div style={{ overflow: "hidden", display: "inline-block" }}>
<h2 style={{ fontSize: "32px", fontWeight: "200", marginBottom: "20px" }}>Confirme a nova senha</h2>
<form onSubmit={(e) => { e.preventDefault(); onSubmit(e); }}>
<Grid container direction='row' alignItems='center' spacing={1}>
<Grid item xs={10}>
<FormInput
+ contrast={state.contrast}
inputType={formPassword.hidePass ? "password" : ""}
name={"senha"}
value={formPassword.value}
@@ -275,11 +278,11 @@ export default function ChangePasswordPage(props) {
<Grid item xs={2}>
{
formPassword.hidePass ?
- <IconButton onClick={handleStateHideFormPass}>
+ <IconButton className={`${state.contrast}LinkColor`} onClick={handleStateHideFormPass}>
<VisibilityIcon />
</IconButton>
:
- <IconButton onClick={handleStateHideFormPass}>
+ <IconButton className={`${state.contrast}LinkColor`} onClick={handleStateHideFormPass}>
<VisibilityOffIcon />
</IconButton>
}
@@ -289,6 +292,7 @@ export default function ChangePasswordPage(props) {
<Grid container direction='row' alignItems='center' spacing={1}>
<Grid item xs={10}>
<FormInput
+ contrast={state.contrast}
inputType={formPasswordConfirmation.hidePass ? "password" : ""}
name={"confirme a senha"}
value={formPasswordConfirmation.value}
@@ -302,18 +306,18 @@ export default function ChangePasswordPage(props) {
<Grid item xs={2}>
{
formPasswordConfirmation.hidePass ?
- <IconButton onClick={handleStateHideConfFormPass}>
+ <IconButton className={`${state.contrast}LinkColor`} onClick={handleStateHideConfFormPass}>
<VisibilityIcon />
</IconButton>
:
- <IconButton onClick={handleStateHideConfFormPass}>
+ <IconButton className={`${state.contrast}LinkColor`} onClick={handleStateHideConfFormPass}>
<VisibilityOffIcon />
</IconButton>
}
</Grid>
</Grid>
<div style={{ display: "flex", justifyContent: "center" }}>
- <CompletarCadastroButton type="submit" >ATUALIZAR SENHA</CompletarCadastroButton>
+ <CompletarCadastroButton contrast={state.contrast} type="submit" >ATUALIZAR SENHA</CompletarCadastroButton>
</div>
</form>
</div>
@@ -325,7 +329,11 @@ export default function ChangePasswordPage(props) {
}
const CardDiv = styled.div`
- background-color : #fff;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding : 20px 30px;
margin : 50px 0;
diff --git a/src/Pages/EditLearningObjectPage.js b/src/Pages/EditLearningObjectPage.js
index c785bf3564d672834c0ed00f964fcc139040a8c5..2f1a37f19a8a86d6b3733a2040f9ae595365dd62 100644
--- a/src/Pages/EditLearningObjectPage.js
+++ b/src/Pages/EditLearningObjectPage.js
@@ -227,13 +227,13 @@ export default function EditLearningObjectPage (props) {
const chooseRenderStageThumbnail = () => {
switch(thumbnailStage) {
case 'uploading':
- return (<LoadingDiv/>)
+ return (<LoadingDiv contrast={state.contrast}/>)
case 'done':
- return (<DisplayThumbnail acceptFile={acceptFile} thumbnail={`${apiDomain}` + thumbnail} onEditPage={true} handleDelete={handleDeleteThumbnail}/>)
+ return (<DisplayThumbnail contrast={state.contrast} acceptFile={acceptFile} thumbnail={`${apiDomain}` + thumbnail} onEditPage={true} handleDelete={handleDeleteThumbnail}/>)
case 'editing':
- return (<EditThumbnail finalizeThumb={finalizeThumb} tempImgURL={tempUrl} updateThumb={updateThumb}/>)
+ return (<EditThumbnail contrast={state.contrast} finalizeThumb={finalizeThumb} tempImgURL={tempUrl} updateThumb={updateThumb}/>)
default :
- return (<DragAndDropThumbnail acceptFile={acceptFile} onEditPage={true}/>)
+ return (<DragAndDropThumbnail contrast={state.contrast} acceptFile={acceptFile} onEditPage={true}/>)
}
}
@@ -258,14 +258,14 @@ export default function EditLearningObjectPage (props) {
{
!loading ?
(
- <Background>
+ <Background contrast={state.contrast}>
<div className="container">
<Grid container spacing={2}>
<Grid item md={4} xs={12}>
- <UploadFileWrapper draftID={recursoId} prevFile={learningObject.attachments ? learningObject.attachments[0] : null}/>
+ <UploadFileWrapper contrast={state.contrast} draftID={recursoId} prevFile={learningObject.attachments ? learningObject.attachments[0] : null}/>
</Grid>
<Grid item md={8} xs={12}>
- <InfoBox>
+ <InfoBox contrast={state.contrast}>
<form>
<div className="cabecalho">
<h2>Editar Recurso</h2>
@@ -277,22 +277,22 @@ export default function EditLearningObjectPage (props) {
<Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <NewTitle draftID={learningObject.id} initialValue={learningObject.name}
+ <NewTitle contrast={state.contrast} draftID={learningObject.id} initialValue={learningObject.name}
onBlurCallback={onBlurCallback}
/>
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <SobreORecurso draftID={learningObject.id} initialValue={learningObject.description} onBlurCallback={onBlurCallback}/>
+ <SobreORecurso contrast={state.contrast} draftID={learningObject.id} initialValue={learningObject.description} onBlurCallback={onBlurCallback}/>
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Keywords draftID={learningObject.id} initialValue={learningObject.tags !== undefined ? learningObject.tags.map((tag) => tag.name) : null}
+ <Keywords contrast={state.contrast} draftID={learningObject.id} initialValue={learningObject.tags !== undefined ? learningObject.tags.map((tag) => tag.name) : null}
onBlurCallback={onBlurCallback}/>
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Autor draftID={learningObject.id}
+ <Autor contrast={state.contrast} draftID={learningObject.id}
initialValue={
learningObject.author === state.currentUser.name ?
0 : 1
@@ -306,44 +306,44 @@ export default function EditLearningObjectPage (props) {
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <TipoDeRecurso objTypes={objTypes} draftID={learningObject.id}
+ <TipoDeRecurso contrast={state.contrast} objTypes={objTypes} draftID={learningObject.id}
initialValue={learningObject.object_type !== undefined && learningObject.object_type !== null ? objTypes.filter((type) => type.name === learningObject.object_type)[0].id : null} onBlurCallback={onBlurCallback} />
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Idioma languages={languages} draftID={learningObject.id}
+ <Idioma contrast={state.contrast} languages={languages} draftID={learningObject.id}
initialValue={learningObject.language !== undefined ? learningObject.language.map((language) => language.name) : null} initialIDValues={learningObject.language !== undefined ? learningObject.language.map((language) => language.id) : null}
onBlurCallback={onBlurCallback} />
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <EducationalStage draftID={learningObject.id} eduStages={eduStages} initialValue={learningObject.educational_stages !== null ? learningObject.educational_stages.map((stage) => String(stage.id)) : null} onBlurCallback={onBlurCallback}
+ <EducationalStage contrast={state.contrast} draftID={learningObject.id} eduStages={eduStages} initialValue={learningObject.educational_stages !== null ? learningObject.educational_stages.map((stage) => String(stage.id)) : null} onBlurCallback={onBlurCallback}
/>
</Grid>
- <SubjectsAndThemes draftId={learningObject.id} subjects={subjects} initialValue={learningObject.subjects !== null ? learningObject.subjects.map(subject => String(subject.id)) : null} onBlurCallback={onBlurCallback}/>
+ <SubjectsAndThemes contrast={state.contrast} draftId={learningObject.id} subjects={subjects} initialValue={learningObject.subjects !== null ? learningObject.subjects.map(subject => String(subject.id)) : null} onBlurCallback={onBlurCallback}/>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Licenca draftID={learningObject.id} initialValue={learningObject.license ? learningObject.license.id : null} onBlurCallback={onBlurCallback}/>
+ <Licenca contrast={state.contrast} draftID={learningObject.id} initialValue={learningObject.license ? learningObject.license.id : null} onBlurCallback={onBlurCallback}/>
</Grid>
<Grid item xs={12}>
<div style={{display : "flex", justifyContent : "center"}}>
- <GreyButton onClick={handleDelete}>
- <span className="button-text">
+ <GreyButton contrast={state.contrast} onClick={handleDelete}>
+ <span className="button-text">
EXCLUIR
- </span>
- </GreyButton>
+ </span>
+ </GreyButton>
- <GreyButton onClick={props.history.goBack}>
- <span className="button-text">
+ <GreyButton contrast={state.contrast} onClick={props.history.goBack}>
+ <span className="button-text">
CANCELAR
- </span>
- </GreyButton>
+ </span>
+ </GreyButton>
- <OrangeButton onClick={() => {handleUpdateInfo()}}>
+ <OrangeButton contrast={state.contrast} onClick={() => {handleUpdateInfo()}}>
SALVAR ALTERAÇÕES
- </OrangeButton>
+ </OrangeButton>
{/*
learningObject.state === "draft" &&
@@ -354,11 +354,11 @@ export default function EditLearningObjectPage (props) {
{
checkAccessLevel("partner") ?
(
- <OrangeButton onClick={() => {handleUpdateInfo(); handlePost()}}>PUBLICAR RECURSO</OrangeButton>
+ <OrangeButton contrast={state.contrast} onClick={() => {handleUpdateInfo(); handlePost()}}>PUBLICAR RECURSO</OrangeButton>
)
:
(
- <OrangeButton onClick={() => {handleUpdateInfo(); handleSubmit()}}>SUBMETER RECURSO</OrangeButton>
+ <OrangeButton contrast={state.contrast} onClick={() => {handleUpdateInfo(); handleSubmit()}}>SUBMETER RECURSO</OrangeButton>
)
}
@@ -381,7 +381,7 @@ export default function EditLearningObjectPage (props) {
)
:
(
- <LoadingSpinner text={"CARREGANDO"}/>
+ <LoadingSpinner contrast={state.contrast} text={"CARREGANDO"}/>
)
}
</React.Fragment>
diff --git a/src/Pages/PublicationPermissionsPage.js b/src/Pages/PublicationPermissionsPage.js
index 9b25fc8738b5b22b08acdefcece9b4e37a93f14a..986e371e22795ae7a8b70bd33a1d5407ac16a0a8 100644
--- a/src/Pages/PublicationPermissionsPage.js
+++ b/src/Pages/PublicationPermissionsPage.js
@@ -15,7 +15,7 @@ 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, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import { Button } from "@material-ui/core";
@@ -25,26 +25,47 @@ import { device } from "../Components/device.js";
import { Store } from "../Store.js";
import IllegalContentModal from "../Components/IllegalContentModal.js";
import PublicationPermissionsContent from "../Components/PublicationPermissionsContent.js";
+import { getRequest } from '../Components/HelperFunctions/getAxiosConfig';
+import LoadingSpinner from '../Components/LoadingSpinner';
const CardStyled = styled(Card)`
- box-sizing: border-box;
- background-color: white;
- max-width: 1700px;
- @media ${device.mobileM} {
- width: 100%;
- height: 100%;
- }
+ box-sizing: border-box;
+ background-color: white;
+ max-width: 1700px;
+ @media ${device.mobileM} {
+ width: 100%;
+ height: 100%;
+ }
+`;
+
+const StyledContinuar = styled(Button)`
+ font-family: "Roboto", sans serif;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 22px;
+ font-size: 15px;
+ letter-spacing: 0.01em;
+ padding: 7px;
+ border-radius: 5px;
+ color: ${props => props.disable === true ? props.contrast === "" ? "#666" : "white" : props.contrast === "" ? "white" : "yellow"} !important;
+ text-decoration: ${props => props.disable === true ? props.contrast === "" ? "none" : "none" : props.contrast === "" ? "none" : "yellow underline"} !important;
+ background-color: ${props => props.disable === true ? props.contrast === "" ? "#E9E9E9" : "black" : props.contrast === "" ? "#52BCD4" : "black"} !important;
+ border: ${props => props.disable === true ? props.contrast === "" ? "none" : "1px solid white" : props.contrast === "" ? "none" : "1px solid white"} !important;
`;
-const Styledspan = styled.span`
- font-family: "Roboto", sans serif;
- font-style: normal;
- font-weight: 500;
- line-height: 22px;
- font-size: 15px;
- letter-spacing: 0.01em;
- color: ${props => props.contrast === "" ? "" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"}
+const StyledCancelar = styled(Button)`
+ font-family: "Roboto", sans serif;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 22px;
+ font-size: 15px;
+ letter-spacing: 0.01em;
+ padding: 7px;
+ border-radius: 5px;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ border: none;
`;
const Background = styled.div`
@@ -71,141 +92,153 @@ const Background = styled.div`
`
export default function PermissionsContainer(props) {
- const { state, dispatch } = useContext(Store);
- const [unavailableCheckbox, setCheckboxAvailability] = useState(true);
- const [unavailableButton, setButtonAvailability] = useState(true);
- const [radios, setRadioValues] = useState({
- radio1: "",
- radio2: "",
- radio3: ""
- });
- const [modalOpen, setModalOpen] = useState(false);
-
- const closeModal = () => {
- setModalOpen(false);
- props.history.push("/termos-publicar-recurso");
- window.scrollTo(0, 0);
- };
-
- const handleChecked = e => {
- setButtonAvailability(!unavailableButton);
- };
-
- const handleRadios = e => {
- let temp = radios;
- temp[e.target.name] = e.target.value;
-
- setRadioValues(temp);
- setCheckboxAvailability(!(radios.radio1 === "Não" && radios.radio2 === "Não" && radios.radio3 === "Não"));
- };
-
- const handleAgreement = () => {
- if (
- radios.radio1 === "Sim" ||
- radios.radio2 === "Sim" ||
- radios.radio3 === "Sim"
- ) {
- setModalOpen(true);
- } else {
- dispatch({
- type: "USER_AGREED_TO_PUBLICATION_PERMISSIONS",
- userAgreement: true
- });
-
- props.history.push("/upload");
+ const { state, dispatch } = useContext(Store);
+ const [loading, setLoading] = useState(true);
+ const [unavailableCheckbox, setCheckboxAvailability] = useState(true);
+ const [unavailableButton, setButtonAvailability] = useState(true);
+
+ const [questionsArr, setQuestionsArr] = useState([]);
+
+ const [radios, setRadioValues] = useState({});
+ const [modalOpen, setModalOpen] = useState(false);
+
+ const closeModal = () => {
+ setModalOpen(false);
+ props.history.push("/termos-publicar-recurso");
+ window.scrollTo(0, 0);
+ };
+
+ const handleChecked = e => {
+ setButtonAvailability(!unavailableButton);
+ };
+
+ const handleRadios = e => {
+ let radioTmp2 = {id: parseInt(e.target.name), value: e.target.value};
+ let temp = radios;
+ const index = temp.findIndex(x => x.id === parseInt(e.target.name));
+ console.log(index);
+
+ temp[index] = radioTmp2;
+
+ console.log(e.target.name);
+ console.log(e.target.value);
+ setRadioValues(temp);
+ console.log(radios);
+ setCheckboxAvailability(!(radios.every((radio) => radio.value === "Não")));
+ };
+
+ const handleAgreement = () => {
+ if (radios.some((radio) => radio === "Sim")) {
+ setModalOpen(true);
+ } else {
+ dispatch({
+ type: "USER_AGREED_TO_PUBLICATION_PERMISSIONS",
+ userAgreement: true
+ });
+
+ props.history.push("/upload");
+ }
+ };
+
+ function handleSuccess(data) {
+ var radioTmp = [];
+
+ data.forEach(element => {
+ var radioTmp2 = {id: element.id, value: ""};
+
+ if (element.status === "active" && element.id !== 4) {
+ radioTmp.push(radioTmp2);
+ }
+ });
+
+ setQuestionsArr(data);
+ setRadioValues(radioTmp);
+
+ setLoading(false);
}
- };
-
- const redirect = () => {
- props.history.push("/termos-publicar-recurso");
- };
-
- const redirectToHome = () => {
- props.history.push("/");
- };
- return (
- <>
- {state.userAgreedToPublicationTerms ? (
- [
- <>
- <IllegalContentModal
- contrast={props.contrast}
- open={modalOpen}
- handleClose={closeModal}
- disableBackdropClick={true}
- />
- <Background contrast={state.contrast}>
- <div className="container">
- <CardStyled variant="outlined">
- <PublicationPermissionsContent handleRadios={handleRadios} contrast={state.contrast} />
- <CardActions
- style={state.contrast === "" ? { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada" } : { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada", backgroundColor: "black" }}
- >
- <div>
- <div style={{ fontSize: "14px" }}>
- <LabeledCheckbox
- contrast={state.contrast}
- disabled={unavailableCheckbox}
- label={
- <Styledspan contrast={state.contrast}>
- Li e permito a publicação do meu recurso na
- Plataforma Integrada de RED do MEC, assim como
- atesto que o meu recurso atende aos critérios
- especificados acima.
- </Styledspan>
- }
- handleChange={handleChecked}
- />
- <div
- style={{ justifyContent: "center", display: "flex" }}
- >
- <Button
- disabled={unavailableButton || unavailableCheckbox}
- style={
- unavailableButton || unavailableCheckbox
- ? { backgroundColor: "#e9e9e9" } :
- state.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", border: "1px solid white" }
- }
- onClick={handleAgreement}
- >
- <Styledspan
- style={
- unavailableButton || unavailableCheckbox
- ? { color: "#666666", fontWeight: "600" } :
- state.contrast === "" ? { color: "#ffffff", fontWeight: "600" } : { color: "yellow", textDecoration: "underline", fontWeight: "600" }
- }
- >
- Continuar{" "}
- </Styledspan>
- </Button>
- <Button
- style={state.contrast === "" ? {
- marginLeft: "45px",
- backgroundColor: "#e9e9e9",
- } : {
- marginLeft: "45px",
- backgroundColor: "black",
- border: "1px solid white"
- }
- }
- >
- <Styledspan style={state.contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "600 !important" } : { color: "yellow", textDecoration: "underline", fontWeight: "600" }} onClick={() => { redirectToHome() }}>
- Cancelar
- </Styledspan>
- </Button>
+
+ useEffect(() => {
+ const url = `/questions/`
+
+ getRequest(url, handleSuccess, (error) => { console.log(error) })
+
+ }, [])
+
+ const redirect = () => {
+ props.history.push("/termos-publicar-recurso");
+ };
+
+ const redirectToHome = () => {
+ props.history.push("/");
+ };
+
+ return (
+ <>
+ {!loading ?
+ (
+ state.userAgreedToPublicationTerms ? (
+ [
+ <>
+ <IllegalContentModal
+ contrast={props.contrast}
+ open={modalOpen}
+ handleClose={closeModal}
+ disableBackdropClick={true}
+ />
+ <Background contrast={state.contrast}>
+ <div className="container">
+ <CardStyled variant="outlined">
+ <PublicationPermissionsContent contrast={state.contrast} handleRadios={handleRadios} questionsArr={questionsArr}/>
+ <CardActions
+ style={state.contrast === "" ? { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada" } : { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada", backgroundColor: "black" }}
+ >
+ <div>
+ <div style={{ fontSize: "14px" }}>
+ <LabeledCheckbox
+ contrast={state.contrast}
+ disabled={unavailableCheckbox}
+ label={
+ <span className={`${state.contrast}LinkColor`} style={{ fontSize: "15px" }}>
+ Li e permito a publicação do meu recurso na
+ Plataforma Integrada de RED do MEC, assim como
+ atesto que o meu recurso atende aos critérios
+ especificados acima.
+ </span>
+ }
+ handleChange={handleChecked}
+ />
+ <div
+ style={{ justifyContent: "left", display: "flex", marginTop: "15px" }}
+ >
+ <StyledContinuar
+ disabled={unavailableButton || unavailableCheckbox}
+ disable={unavailableButton || unavailableCheckbox}
+ contrast={state.contrast}
+ onClick={handleAgreement}
+ >
+ Continuar
+ </StyledContinuar>
+ <StyledCancelar onClick={redirectToHome} contrast={state.contrast}>
+ Cancelar
+ </StyledCancelar>
+ </div>
+ </div>
+ </div>
+ </CardActions>
+ </CardStyled>
</div>
- </div>
- </div>
- </CardActions>
- </CardStyled>
- </div>
- </Background>
- </>
- ]
- ) : (
- <>{redirect()}</>
- )
- }
- </>
- );
+ </Background>
+ </>
+ ]
+ ) : (
+ <>{redirect()}</>
+ )
+ )
+ :
+ (
+ <LoadingSpinner contrast={state.contrast} text="Carregando..." />
+ )
+ }
+ </>
+ );
}
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index f9d4168a440d027c8f78c14ae3b6683a0de80eea..cedd26122f5acd816dd39c1912c79f21b1ea0774 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -31,533 +31,533 @@ import { useHistory } from 'react-router-dom';
import SearchExpansionPanel from '../Components/SearchExpansionPanel/SearchExpansionPanel';
import FilterSummary from '../Components/SearchPageComponents/FilterSummary';
import {
- filtersCurriculum,
- filtersTypes,
- filtersStages,
- filtersLanguages,
+ filtersCurriculum,
+ filtersTypes,
+ filtersStages,
+ filtersLanguages,
} from '../Components/SearchPageComponents/filters';
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
import { Store } from '../Store'
function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
}
export default function Search() {
- const history = useHistory();
- const { state } = useContext(Store)
-
- const [currOption, setCurrOption] = useState('');
- const [currOrder, serCurrOrder] = useState('review_average');
- const [currQuery, setCurrQuery] = useState('');
- const [currPage, setCurrPage] = useState(0);
- const [currCurriculumValues, setCurrCurriculumValues] = useState('');
- const [currTypeOfResValues, setCurrTypeOfResValues] = useState('');
- const [currTeachingStageValues, setCurrTeachingStageValues] = useState('');
- const [currLanguagesValues, setCurrLanguagesValues] = useState('');
- const [currTag, setCurrTag] = useState('');
- const [isLoading, setIsLoading] = useState(false);
- const [error, setError] = useState(false);
- const [snackInfo, setSnackInfo] = useState({
- open: false,
- text: "",
- severity: "",
- });
-
- const [curriculumComponents, setCurriculumComponents] = useState([]);
- const [typeOfResources, setTypeOfResources] = useState([]);
- const [teachingStage, setTeachingStage] = useState([]);
- const [languages, setLanguages] = useState([]);
- const [tag, setTag] = useState('');
-
- const [resourcesArray, setResourcesArray] = useState([]);
- const [totalResources, setTotalResources] = useState(0);
-
- const [collectionsArray, setCollectionsArray] = useState([])
- const [totalCollections, setTotalCollections] = useState(0);
-
- const [usersArray, setUsersArray] = useState([])
- const [totalUsers, setTotalUsers] = useState(0);
-
- const options = [
- { value: 'Recursos', name: 'LearningObject', color: state.contrast === "" ? '#ff7f00' : "yellow" },
- { value: 'Coleções', name: 'Collection', color: state.contrast === "" ? '#673ab7' : "yellow" },
- { value: 'Usuários', name: 'User', color: state.contrast === "" ? '#00bcd4' : "yellow" },
- ];
-
- const orders = [
- { value: 'Mais Estrelas', name: 'review_average', color: state.contrast === "" ? '#666' : "yellow" },
- { value: 'Mais Relevante', name: 'score', color: state.contrast === "" ? '#666' : "yellow" },
- { value: 'Mais Baixados', name: 'downloads', color: state.contrast === "" ? '#666' : "yellow" },
- { value: 'Mais Favoritados', name: 'likes', color: state.contrast === "" ? '#666' : "yellow" },
- { value: 'Mais Recentes', name: 'publicationdesc', color: state.contrast === "" ? '#666' : "yellow" },
- { value: 'Ordem Alfabética', name: 'title', color: state.contrast === "" ? '#666' : "yellow" },
- ];
-
- function handleSnackInfo(info) {
- setSnackInfo({ ...info })
- }
-
- function handleCloseSnack() {
- const snackInfo = {
- open: false,
- text: "",
- severity: "",
- }
- handleSnackInfo(snackInfo)
- }
-
- function onButtonClicked() {
- const curriculumValues = [];
- const typeOfResourcesValues = [];
- const teachingStageValues = [];
- const languagesValues = [];
-
- for (let index = 0; index < curriculumComponents.length; index++) {
- const element = curriculumComponents[index];
- if (element.isChecked)
- curriculumValues.push(element.value);
- }
-
- for (let index = 0; index < typeOfResources.length; index++) {
- const element = typeOfResources[index];
- if (element.isChecked)
- typeOfResourcesValues.push(element.value);
+ const history = useHistory();
+ const { state } = useContext(Store)
+
+ const [currOption, setCurrOption] = useState('');
+ const [currOrder, serCurrOrder] = useState('review_average');
+ const [currQuery, setCurrQuery] = useState('');
+ const [currPage, setCurrPage] = useState(0);
+ const [currCurriculumValues, setCurrCurriculumValues] = useState('');
+ const [currTypeOfResValues, setCurrTypeOfResValues] = useState('');
+ const [currTeachingStageValues, setCurrTeachingStageValues] = useState('');
+ const [currLanguagesValues, setCurrLanguagesValues] = useState('');
+ const [currTag, setCurrTag] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState(false);
+ const [snackInfo, setSnackInfo] = useState({
+ open: false,
+ text: "",
+ severity: "",
+ });
+
+ const [curriculumComponents, setCurriculumComponents] = useState([]);
+ const [typeOfResources, setTypeOfResources] = useState([]);
+ const [teachingStage, setTeachingStage] = useState([]);
+ const [languages, setLanguages] = useState([]);
+ const [tag, setTag] = useState('');
+
+ const [resourcesArray, setResourcesArray] = useState([]);
+ const [totalResources, setTotalResources] = useState(0);
+
+ const [collectionsArray, setCollectionsArray] = useState([])
+ const [totalCollections, setTotalCollections] = useState(0);
+
+ const [usersArray, setUsersArray] = useState([])
+ const [totalUsers, setTotalUsers] = useState(0);
+
+ const options = [
+ { value: 'Recursos', name: 'LearningObject', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Coleções', name: 'Collection', color: state.contrast === "" ? '#673ab7' : "yellow" },
+ { value: 'Usuários', name: 'User', color: state.contrast === "" ? '#00bcd4' : "yellow" },
+ ];
+
+ const orders = [
+ { value: 'Mais Estrelas', name: 'review_average', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Mais Relevante', name: 'score', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Mais Baixados', name: 'downloads', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Mais Favoritados', name: 'likes', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Mais Recentes', name: 'publicationdesc', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Ordem Alfabética', name: 'title', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ ];
+
+ function handleSnackInfo(info) {
+ setSnackInfo({ ...info })
}
- for (let index = 0; index < teachingStage.length; index++) {
- const element = teachingStage[index];
- if (element.isChecked)
- teachingStageValues.push(element.value);
- }
-
- for (let index = 0; index < languages.length; index++) {
- const element = languages[index];
- if (element.isChecked)
- languagesValues.push(element.value);
+ function handleCloseSnack() {
+ const snackInfo = {
+ open: false,
+ text: "",
+ severity: "",
+ }
+ handleSnackInfo(snackInfo)
}
- let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+ function onButtonClicked() {
+ const curriculumValues = [];
+ const typeOfResourcesValues = [];
+ const teachingStageValues = [];
+ const languagesValues = [];
- if (currOption !== 'User') {
- url = url + `&order=${currOrder}`
- if (currOption === 'LearningObject') {
- if (curriculumValues.length >= 1) {
- url = url + `&subjects=${curriculumValues}`
+ for (let index = 0; index < curriculumComponents.length; index++) {
+ const element = curriculumComponents[index];
+ if (element.isChecked)
+ curriculumValues.push(element.value);
}
- if (typeOfResourcesValues.length >= 1) {
- url = url + `&object_types=${typeOfResourcesValues}`
+
+ for (let index = 0; index < typeOfResources.length; index++) {
+ const element = typeOfResources[index];
+ if (element.isChecked)
+ typeOfResourcesValues.push(element.value);
}
- if (teachingStageValues.length >= 1) {
- url = url + `&educational_stages=${teachingStageValues}`
+
+ for (let index = 0; index < teachingStage.length; index++) {
+ const element = teachingStage[index];
+ if (element.isChecked)
+ teachingStageValues.push(element.value);
}
- if (languagesValues.length >= 1) {
- url = url + `&languages=${languagesValues}`
+
+ for (let index = 0; index < languages.length; index++) {
+ const element = languages[index];
+ if (element.isChecked)
+ languagesValues.push(element.value);
}
- if (tag && tag.length >= 1)
- url = url + `&tags=${tag}`
- }
- }
- history.push(url);
- }
+ let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${currOrder}`
+ if (currOption === 'LearningObject') {
+ if (curriculumValues.length >= 1) {
+ url = url + `&subjects=${curriculumValues}`
+ }
+ if (typeOfResourcesValues.length >= 1) {
+ url = url + `&object_types=${typeOfResourcesValues}`
+ }
+ if (teachingStageValues.length >= 1) {
+ url = url + `&educational_stages=${teachingStageValues}`
+ }
+ if (languagesValues.length >= 1) {
+ url = url + `&languages=${languagesValues}`
+ }
+ if (tag && tag.length >= 1)
+ url = url + `&tags=${tag}`
+ }
+ }
- function resetFilters() {
- for (let index = 0; index < filtersCurriculum.length; index++) {
- if (filtersCurriculum[index].isChecked)
- filtersCurriculum[index].isChecked = false;
- }
- for (let index = 0; index < filtersLanguages.length; index++) {
- if (filtersLanguages[index].isChecked)
- filtersLanguages[index].isChecked = false;
+ history.push(url);
}
- for (let index = 0; index < filtersStages.length; index++) {
- if (filtersStages[index].isChecked)
- filtersStages[index].isChecked = false;
- }
- for (let index = 0; index < filtersTypes.length; index++) {
- if (filtersTypes[index].isChecked)
- filtersTypes[index].isChecked = false;
- }
- setTag('')
- }
-
- function handleChangeOption(e) {
- const value = e.target.value;
- let url;
-
- if (value !== 'User')
- url = `/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=${value}`
- else
- url = `/busca?page=0&results_per_page=12&query=*&search_class=${value}`
-
- resetFilters()
- history.push(url);
- }
- function handleChangeOrder(e) {
- const value = e.target.value;
- let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
-
- if (currOption !== 'User') {
- url = url + `&order=${value}`
- if (currOption === 'LearningObject') {
- if (currCurriculumValues) {
- url = url + `&subjects=${currCurriculumValues}`
+ function resetFilters() {
+ for (let index = 0; index < filtersCurriculum.length; index++) {
+ if (filtersCurriculum[index].isChecked)
+ filtersCurriculum[index].isChecked = false;
}
- if (currTypeOfResValues) {
- url = url + `&object_types=${currTypeOfResValues}`
+ for (let index = 0; index < filtersLanguages.length; index++) {
+ if (filtersLanguages[index].isChecked)
+ filtersLanguages[index].isChecked = false;
}
- if (currTeachingStageValues) {
- url = url + `&educational_stages=${currTeachingStageValues}`
+ for (let index = 0; index < filtersStages.length; index++) {
+ if (filtersStages[index].isChecked)
+ filtersStages[index].isChecked = false;
}
- if (currLanguagesValues) {
- url = url + `&languages=${currLanguagesValues}`
+ for (let index = 0; index < filtersTypes.length; index++) {
+ if (filtersTypes[index].isChecked)
+ filtersTypes[index].isChecked = false;
}
- if (currTag)
- url = url + `&tags=${currTag}`
- }
+ setTag('')
}
- history.push(url);
- }
+ function handleChangeOption(e) {
+ const value = e.target.value;
+ let url;
- function handleNextPage() {
- const nextPage = currPage + 1;
- let url = `/busca?page=${nextPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+ if (value !== 'User')
+ url = `/busca?page=0&results_per_page=12&order=review_average&query=${currQuery}&search_class=${value}`
+ else
+ url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${value}`
- if (currOption !== 'User') {
- url = url + `&order=${currOrder}`
- if (currOption === 'LearningObject') {
- if (currCurriculumValues) {
- url = url + `&subjects=${currCurriculumValues}`
- }
- if (currTypeOfResValues) {
- url = url + `&object_types=${currTypeOfResValues}`
- }
- if (currTeachingStageValues) {
- url = url + `&educational_stages=${currTeachingStageValues}`
+ resetFilters()
+ history.push(url);
+ }
+
+ function handleChangeOrder(e) {
+ const value = e.target.value;
+ let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${value}`
+ if (currOption === 'LearningObject') {
+ if (currCurriculumValues) {
+ url = url + `&subjects=${currCurriculumValues}`
+ }
+ if (currTypeOfResValues) {
+ url = url + `&object_types=${currTypeOfResValues}`
+ }
+ if (currTeachingStageValues) {
+ url = url + `&educational_stages=${currTeachingStageValues}`
+ }
+ if (currLanguagesValues) {
+ url = url + `&languages=${currLanguagesValues}`
+ }
+ if (currTag)
+ url = url + `&tags=${currTag}`
+ }
}
- if (currLanguagesValues) {
- url = url + `&languages=${currLanguagesValues}`
+
+ history.push(url);
+ }
+
+ function handleNextPage() {
+ const nextPage = currPage + 1;
+ let url = `/busca?page=${nextPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${currOrder}`
+ if (currOption === 'LearningObject') {
+ if (currCurriculumValues) {
+ url = url + `&subjects=${currCurriculumValues}`
+ }
+ if (currTypeOfResValues) {
+ url = url + `&object_types=${currTypeOfResValues}`
+ }
+ if (currTeachingStageValues) {
+ url = url + `&educational_stages=${currTeachingStageValues}`
+ }
+ if (currLanguagesValues) {
+ url = url + `&languages=${currLanguagesValues}`
+ }
+ if (currTag)
+ url = url + `&tags=${currTag}`
+ }
}
- if (currTag)
- url = url + `&tags=${currTag}`
- }
+ history.push(url);
}
- history.push(url);
- }
-
- function handlePreviousPage() {
- const previousPage = currPage - 1;
- let url = `/busca?page=${previousPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
-
- if (currOption !== 'User') {
- url = url + `&order=${currOrder}`
- if (currOption === 'LearningObject') {
- if (currCurriculumValues) {
- url = url + `&subjects=${currCurriculumValues}`
+
+ function handlePreviousPage() {
+ const previousPage = currPage - 1;
+ let url = `/busca?page=${previousPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${currOrder}`
+ if (currOption === 'LearningObject') {
+ if (currCurriculumValues) {
+ url = url + `&subjects=${currCurriculumValues}`
+ }
+ if (currTypeOfResValues) {
+ url = url + `&object_types=${currTypeOfResValues}`
+ }
+ if (currTeachingStageValues) {
+ url = url + `&educational_stages=${currTeachingStageValues}`
+ }
+ if (currLanguagesValues) {
+ url = url + `&languages=${currLanguagesValues}`
+ }
+ if (currTag)
+ url = url + `&tags=${currTag}`
+ }
}
- if (currTypeOfResValues) {
- url = url + `&object_types=${currTypeOfResValues}`
+ history.push(url);
+ }
+
+ function handleSuccess(data, headers, option) {
+ if (option === 'LearningObject') {
+ setResourcesArray(data)
+ if (headers.has('X-Total-Count')) {
+ setTotalResources(headers.get('X-Total-Count'));
+ }
}
- if (currTeachingStageValues) {
- url = url + `&educational_stages=${currTeachingStageValues}`
+ else if (option === 'Collection') {
+ setCollectionsArray(data)
+ if (headers.has('X-Total-Count')) {
+ setTotalCollections(headers.get('X-Total-Count'));
+ }
}
- if (currLanguagesValues) {
- url = url + `&languages=${currLanguagesValues}`
+ else {
+ setUsersArray(data);
+ if (headers.has('X-Total-Count')) {
+ setTotalUsers(headers.get('X-Total-Count'));
+ }
}
- if (currTag)
- url = url + `&tags=${currTag}`
- }
+ setIsLoading(false);
}
- history.push(url);
- }
-
- function handleSuccess(data, headers, option) {
- if (option === 'LearningObject') {
- setResourcesArray(data)
- if (headers.has('X-Total-Count')) {
- setTotalResources(headers.get('X-Total-Count'));
- }
- }
- else if (option === 'Collection') {
- setCollectionsArray(data)
- if (headers.has('X-Total-Count')) {
- setTotalCollections(headers.get('X-Total-Count'));
- }
- }
- else {
- setUsersArray(data);
- if (headers.has('X-Total-Count')) {
- setTotalUsers(headers.get('X-Total-Count'));
- }
- }
- setIsLoading(false);
- }
-
- function handleFail() {
- const snackInfo = {
- open: true,
- text: "Houve um erro ao carregar os dados!",
- severity: "warning",
- }
- handleSnackInfo(snackInfo)
- setError(true);
- setIsLoading(false);
- }
-
- function handleSubjects(subjectsString) {
- if (subjectsString) {
- const selectedSubjects = subjectsString.split(',');
- for (let i = 0; i < selectedSubjects.length; i++) {
- const elementOfSelectedSubs = selectedSubjects[i];
- for (let j = 0; j < filtersCurriculum.length; j++) {
- if (elementOfSelectedSubs === filtersCurriculum[j].value)
- filtersCurriculum[j].isChecked = true;
+
+ function handleFail() {
+ const snackInfo = {
+ open: true,
+ text: "Houve um erro ao carregar os dados!",
+ severity: "warning",
}
- }
+ handleSnackInfo(snackInfo)
+ setError(true);
+ setIsLoading(false);
}
- setCurriculumComponents(filtersCurriculum);
- }
-
- function handleObjectTypes(objectTypesString) {
- if (objectTypesString) {
- const selectedObjectTypes = objectTypesString.split(',');
- for (let i = 0; i < selectedObjectTypes.length; i++) {
- const elementOfSelectedObjectTypes = selectedObjectTypes[i];
- for (let j = 0; j < filtersTypes.length; j++) {
- if (elementOfSelectedObjectTypes === filtersTypes[j].value)
- filtersTypes[j].isChecked = true;
+
+ function handleSubjects(subjectsString) {
+ if (subjectsString) {
+ const selectedSubjects = subjectsString.split(',');
+ for (let i = 0; i < selectedSubjects.length; i++) {
+ const elementOfSelectedSubs = selectedSubjects[i];
+ for (let j = 0; j < filtersCurriculum.length; j++) {
+ if (elementOfSelectedSubs === filtersCurriculum[j].value)
+ filtersCurriculum[j].isChecked = true;
+ }
+ }
}
- }
+ setCurriculumComponents(filtersCurriculum);
}
- setTypeOfResources(filtersTypes);
- }
-
- function handleLanguages(languagesString) {
- if (languagesString) {
- const selectedLanguages = languagesString.split(',');
-
- for (let i = 0; i < selectedLanguages.length; i++) {
- const elementOfSelectedLanguages = selectedLanguages[i];
- for (let j = 0; j < filtersLanguages.length; j++) {
- if (elementOfSelectedLanguages === filtersLanguages[j].value)
- filtersLanguages[j].isChecked = true;
+
+ function handleObjectTypes(objectTypesString) {
+ if (objectTypesString) {
+ const selectedObjectTypes = objectTypesString.split(',');
+ for (let i = 0; i < selectedObjectTypes.length; i++) {
+ const elementOfSelectedObjectTypes = selectedObjectTypes[i];
+ for (let j = 0; j < filtersTypes.length; j++) {
+ if (elementOfSelectedObjectTypes === filtersTypes[j].value)
+ filtersTypes[j].isChecked = true;
+ }
+ }
}
- }
+ setTypeOfResources(filtersTypes);
}
- setLanguages(filtersLanguages);
- }
-
- function handleStages(stagesString) {
- if (stagesString) {
- const selectedStages = stagesString.split(',');
-
- for (let i = 0; i < selectedStages.length; i++) {
- const elementOfSelectedStages = selectedStages[i];
- for (let j = 0; j < filtersStages.length; j++) {
- if (elementOfSelectedStages === filtersStages[j].value)
- filtersStages[j].isChecked = true;
+
+ function handleLanguages(languagesString) {
+ if (languagesString) {
+ const selectedLanguages = languagesString.split(',');
+
+ for (let i = 0; i < selectedLanguages.length; i++) {
+ const elementOfSelectedLanguages = selectedLanguages[i];
+ for (let j = 0; j < filtersLanguages.length; j++) {
+ if (elementOfSelectedLanguages === filtersLanguages[j].value)
+ filtersLanguages[j].isChecked = true;
+ }
+ }
}
- }
+ setLanguages(filtersLanguages);
}
- setTeachingStage(filtersStages);
- }
-
- useEffect(() => {
- setIsLoading(true)
-
- const urlParams = new URLSearchParams(window.location.search);
- const query = urlParams.get("query");
- const searchClass = urlParams.get("search_class");
- const page = parseInt(urlParams.get("page"));
- const order = urlParams.get("order");
- const subjects = urlParams.get("subjects");
- const objectTypes = urlParams.get("object_types");
- const educationalStages = urlParams.get("educational_stages");
- const languages = urlParams.get("languages");
- const tags = urlParams.get("tags");
-
- setCurrOption(searchClass);
- setCurrQuery(query);
- setCurrPage(page);
- serCurrOrder(order);
- setCurrCurriculumValues(subjects);
- setCurrLanguagesValues(languages);
- setCurrTeachingStageValues(educationalStages);
- setCurrTypeOfResValues(objectTypes);
- setCurrTag(tags);
- setTag(tags);
-
- handleSubjects(subjects);
- handleObjectTypes(objectTypes);
- handleStages(educationalStages);
- handleLanguages(languages);
-
- let url = `/search?page=${page}&results_per_page=12&query=${query}&search_class=${searchClass}`
-
- if (searchClass !== 'User') {
- url = url + `&order=${order}`
- if (searchClass === 'LearningObject') {
- if (subjects) {
- url = url + `&subjects[]=${subjects}`
- }
- if (objectTypes) {
- url = url + `&object_types[]=${objectTypes}`
- }
- if (educationalStages) {
- url = url + `&educational_stages[]=${educationalStages}`
- }
- if (languages) {
- url = url + `&languages[]=${languages}`
+
+ function handleStages(stagesString) {
+ if (stagesString) {
+ const selectedStages = stagesString.split(',');
+
+ for (let i = 0; i < selectedStages.length; i++) {
+ const elementOfSelectedStages = selectedStages[i];
+ for (let j = 0; j < filtersStages.length; j++) {
+ if (elementOfSelectedStages === filtersStages[j].value)
+ filtersStages[j].isChecked = true;
+ }
+ }
}
- if (tags)
- url = url + `&tags[]=${tags}`
- }
+ setTeachingStage(filtersStages);
}
- getRequest(
- url,
- (data, headers) => { handleSuccess(data, headers, searchClass) },
- handleFail,
- );
-
- }, [window.history.state === null ? true : window.history.state.key, state.currentUser.id])
-
- if (error)
- return (
- <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
- <MainPageError>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
- <Error contrast={state.contrast} />
- </MainPageError>
- </div>
- )
- else
- return (
- <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
- <MainPage>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
- <StyledBreadCrumbs contrast={state.contrast}>
- <Link to='/'>Página Inicial</Link>
- <span>Busca</span>
- </StyledBreadCrumbs>
- <HeaderFilters
- contrast={state.contrast}
- options={options}
- orders={orders}
- currOption={currOption}
- currOrder={currOrder}
- handleChangeOption={handleChangeOption}
- handleChangeOrder={handleChangeOrder}
- />
- {
- currOption === 'LearningObject' &&
- <Fragment>
- <SearchExpansionPanel
- contrast={state.contrast}
- setTag={(tag) => setTag(tag)}
- curriculumComponents={curriculumComponents}
- setCurriculum={(array) => { setCurriculumComponents(array) }}
- typeOfResources={typeOfResources}
- setTypeRes={(array) => { setTypeOfResources(array) }}
- teachingStage={teachingStage}
- setTeachingStage={(array) => { setTeachingStage(array) }}
- languages={languages}
- setLanguages={(array) => { setLanguages(array) }}
- />
- {
- <FilterSummary
- contrast={state.contrast}
- curriculumComponents={curriculumComponents}
- typeOfResources={typeOfResources}
- languages={languages}
- teachingStage={teachingStage}
- tag={tag}
- onButtonClicked={onButtonClicked}
- />
- }
- <ResourceTemplate
- contrast={state.contrast}
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={resourcesArray}
- totalResources={totalResources}
- />
- </Fragment>
- }
- {
- currOption === 'Collection' &&
- <CollectionTemplate
- contrast={state.contrast}
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={collectionsArray}
- totalResources={totalCollections}
- />
- }
- {
- currOption === 'User' &&
- <UserTemplate
- contrast={state.contrast}
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={usersArray}
- totalResources={totalUsers}
- />
- }
- </MainPage>
- </div>
- )
+ useEffect(() => {
+ setIsLoading(true)
+
+ const urlParams = new URLSearchParams(window.location.search);
+ const query = urlParams.get("query");
+ const searchClass = urlParams.get("search_class");
+ const page = parseInt(urlParams.get("page"));
+ const order = urlParams.get("order");
+ const subjects = urlParams.get("subjects");
+ const objectTypes = urlParams.get("object_types");
+ const educationalStages = urlParams.get("educational_stages");
+ const languages = urlParams.get("languages");
+ const tags = urlParams.get("tags");
+
+ setCurrOption(searchClass);
+ setCurrQuery(query);
+ setCurrPage(page);
+ serCurrOrder(order);
+ setCurrCurriculumValues(subjects);
+ setCurrLanguagesValues(languages);
+ setCurrTeachingStageValues(educationalStages);
+ setCurrTypeOfResValues(objectTypes);
+ setCurrTag(tags);
+ setTag(tags);
+
+ handleSubjects(subjects);
+ handleObjectTypes(objectTypes);
+ handleStages(educationalStages);
+ handleLanguages(languages);
+
+ let url = `/search?page=${page}&results_per_page=12&query=${query}&search_class=${searchClass}`
+
+ if (searchClass !== 'User') {
+ url = url + `&order=${order}`
+ if (searchClass === 'LearningObject') {
+ if (subjects) {
+ url = url + `&subjects[]=${subjects}`
+ }
+ if (objectTypes) {
+ url = url + `&object_types[]=${objectTypes}`
+ }
+ if (educationalStages) {
+ url = url + `&educational_stages[]=${educationalStages}`
+ }
+ if (languages) {
+ url = url + `&languages[]=${languages}`
+ }
+ if (tags)
+ url = url + `&tags[]=${tags}`
+ }
+ }
+
+ getRequest(
+ url,
+ (data, headers) => { handleSuccess(data, headers, searchClass) },
+ handleFail,
+ );
+
+ }, [window.history.state === null ? true : window.history.state.key, state.currentUser.id])
+
+ if (error)
+ return (
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <MainPageError>
+ <Snackbar
+ open={snackInfo.open}
+ autoHideDuration={6000}
+ onClose={handleCloseSnack}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
+ {snackInfo.text}
+ </Alert>
+ </Snackbar>
+ <Error contrast={state.contrast} />
+ </MainPageError>
+ </div>
+ )
+ else
+ return (
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <MainPage>
+ <Snackbar
+ open={snackInfo.open}
+ autoHideDuration={6000}
+ onClose={handleCloseSnack}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
+ {snackInfo.text}
+ </Alert>
+ </Snackbar>
+ <StyledBreadCrumbs contrast={state.contrast}>
+ <Link to='/'>Página Inicial</Link>
+ <span>Busca</span>
+ </StyledBreadCrumbs>
+ <HeaderFilters
+ contrast={state.contrast}
+ options={options}
+ orders={orders}
+ currOption={currOption}
+ currOrder={currOrder}
+ handleChangeOption={handleChangeOption}
+ handleChangeOrder={handleChangeOrder}
+ />
+ {
+ currOption === 'LearningObject' &&
+ <Fragment>
+ <SearchExpansionPanel
+ contrast={state.contrast}
+ setTag={(tag) => setTag(tag)}
+ curriculumComponents={curriculumComponents}
+ setCurriculum={(array) => { setCurriculumComponents(array) }}
+ typeOfResources={typeOfResources}
+ setTypeRes={(array) => { setTypeOfResources(array) }}
+ teachingStage={teachingStage}
+ setTeachingStage={(array) => { setTeachingStage(array) }}
+ languages={languages}
+ setLanguages={(array) => { setLanguages(array) }}
+ />
+ {
+ <FilterSummary
+ contrast={state.contrast}
+ curriculumComponents={curriculumComponents}
+ typeOfResources={typeOfResources}
+ languages={languages}
+ teachingStage={teachingStage}
+ tag={tag}
+ onButtonClicked={onButtonClicked}
+ />
+ }
+ <ResourceTemplate
+ contrast={state.contrast}
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={resourcesArray}
+ totalResources={totalResources}
+ />
+ </Fragment>
+ }
+ {
+ currOption === 'Collection' &&
+ <CollectionTemplate
+ contrast={state.contrast}
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={collectionsArray}
+ totalResources={totalCollections}
+ />
+ }
+ {
+ currOption === 'User' &&
+ <UserTemplate
+ contrast={state.contrast}
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={usersArray}
+ totalResources={totalUsers}
+ />
+ }
+ </MainPage>
+ </div>
+ )
}
const MainPage = styled.div`
- padding: 1em 0;
- width: 90%;
- margin: 0 auto;
+ padding: 1em 0;
+ width: 90%;
+ margin: 0 auto;
`
const MainPageError = styled.div`
- width: 90%;
- margin: 0 auto;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 1em;
+ width: 90%;
+ margin: 0 auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 1em;
`
const StyledBreadCrumbs = styled(Breadcrumbs)`
- display: flex;
- justify-content: flex-start;
- span {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
- }
- a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
+ display: flex;
+ justify-content: flex-start;
+ span {
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ }
+ a {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
`;
diff --git a/src/Pages/TabsHelp/TabManageAc.js b/src/Pages/TabsHelp/TabManageAc.js
index d9eb10cd989199f0caf25687b4e58c643d466ee0..dd9f12bcbc05dc219b1dde137c811b2b8d0f1318 100644
--- a/src/Pages/TabsHelp/TabManageAc.js
+++ b/src/Pages/TabsHelp/TabManageAc.js
@@ -37,253 +37,236 @@ import { Store } from '../../Store';
import { GerenciandoConta } from "ImportImages.js";
export default function TabManageAc(props) {
- const { state } = useContext(Store);
- const tabs = [
- "Por que me cadastrar?",
- "Como fazer meu cadastro?",
- "Como alterar minha senha?",
- "Como acessar a conta?",
- "Esqueci minha senha. O que fazer?",
- "Gerenciando a Conta"
- ];
-
- const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
-
- const handleChangeTab = (e, newValue) => {
- setTabValue(newValue);
- };
-
- useEffect(() => { window.scrollTo(0, 0) }, [])
-
- return (
- <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
- <link
- href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap"
- rel="stylesheet"
- />
-
- <Secao>
- <BreadCrumbsDiv>
- <StyledBreadCrumbs contrast={state.contrast}>
- <Link to="/">Página Inicial</Link>
- <Link to="ajuda">Ajuda</Link>
-
- <span>{tabs[5]}</span>
- </StyledBreadCrumbs>
- </BreadCrumbsDiv>
- <Grid container justify="center">
- <Grid item xs={12} md={10} >
- <Principal contrast={state.contrast}>
- <Menu contrast={state.contrast}>
- <div className="fixo">
- <img src={GerenciandoConta} alt="Gerenciando a conta" />
- <span>{tabs[5]}</span>
- </div>
- <TabsStyled contrast={state.contrast} orientation="vertical"
- variant="scrollable"
- value={tabValue}
- onChange={handleChangeTab}
- TabIndicatorProps={{ style: { display: "none" } }}
- >
- <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled>
- <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled>
- <TabStyled contrast={state.contrast} label={tabs[2]}></TabStyled>
- <TabStyled contrast={state.contrast} label={tabs[3]}></TabStyled>
- <TabStyled contrast={state.contrast} label={tabs[4]}></TabStyled>
- </TabsStyled>
- <br />
- <div className="voltarInicio">
- <a href="ajuda">VOLTAR AO ÃNICIO</a>
- </div>
- </Menu>
-
- {tabValue === 0 && <Why contrast={state.contrast} title={tabs[0]} />}
- {tabValue === 1 && <HowToDo contrast={state.contrast} title={tabs[1]} />}
- {tabValue === 2 && <HowToChange contrast={state.contrast} title={tabs[2]} />}
- {tabValue === 3 && <HowToAccess contrast={state.contrast} title={tabs[3]} />}
- {tabValue === 4 && <Forget contrast={state.contrast} title={tabs[4]} />}
- <div className="resultadosProcura">
- <span>Não era bem o que você procurava?</span>
- <div className="subtitulo">
- <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
- </div>
- </div>
-
- </Principal>
- </Grid>
- </Grid>
-
-
- <Grid style={{ paddingBottom: "50px" }} container justify={"center"}>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardPublicando contrast={state.contrast} />
- </Grid>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardEncontrando contrast={state.contrast} />
- </Grid>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardParticipando contrast={state.contrast} />
- </Grid>
- </Grid>
- </Secao>
- </div>
- );
+ const { state } = useContext(Store);
+ const tabs = [
+ "Por que me cadastrar?",
+ "Como fazer meu cadastro?",
+ "Como alterar minha senha?",
+ "Como acessar a conta?",
+ "Esqueci minha senha. O que fazer?",
+ "Gerenciando a Conta"
+ ];
+
+ const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
+
+ const handleChangeTab = (e, newValue) => {
+ setTabValue(newValue);
+ };
+
+ useEffect(() => { window.scrollTo(0, 0) }, [])
+
+ return (
+ <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap"
+ rel="stylesheet"
+ />
+ <Secao>
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs contrast={state.contrast}>
+ <Link to="/">Página Inicial</Link>
+ <Link to="ajuda">Ajuda</Link>
+ <span>{tabs[5]}</span>
+ </StyledBreadCrumbs>
+ </BreadCrumbsDiv>
+ <Grid container justify="center">
+ <Grid item xs={12} md={10} >
+ <Principal contrast={state.contrast}>
+ <Menu contrast={state.contrast}>
+ <div className="fixo">
+ <img src={GerenciandoConta} alt="Gerenciando a conta" />
+ <span>{tabs[5]}</span>
+ </div>
+ <TabsStyled contrast={state.contrast} orientation="vertical"
+ variant="scrollable"
+ value={tabValue}
+ onChange={handleChangeTab}
+ TabIndicatorProps={{ style: { display: "none" } }}
+ >
+ <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[2]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[3]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[4]}></TabStyled>
+ </TabsStyled>
+ <br/>
+ <div className="voltarInicio">
+ <a href="ajuda">VOLTAR AO ÃNICIO</a>
+ </div>
+ </Menu>
+ {tabValue === 0 && <Why contrast={state.contrast} title={tabs[0]} />}
+ {tabValue === 1 && <HowToDo contrast={state.contrast} title={tabs[1]} />}
+ {tabValue === 2 && <HowToChange contrast={state.contrast} title={tabs[2]} />}
+ {tabValue === 3 && <HowToAccess contrast={state.contrast} title={tabs[3]} />}
+ {tabValue === 4 && <Forget contrast={state.contrast} title={tabs[4]} />}
+ <div className="resultadosProcura">
+ <span>Não era bem o que você procurava?</span>
+ <div className="subtitulo">
+ <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+ </div>
+ </div>
+ </Principal>
+ </Grid>
+ </Grid>
+ <Grid style={{ paddingBottom: "50px" }} container justify={"center"}>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardPublicando contrast={state.contrast} />
+ </Grid>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardEncontrando contrast={state.contrast} />
+ </Grid>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardParticipando contrast={state.contrast} />
+ </Grid>
+ </Grid>
+ </Secao>
+ </div>
+ );
}
const StyledBreadCrumbs = styled(Breadcrumbs)`
- display : flex;
- justify-content : flex-start;
- span {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
- }
- a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
+ display : flex;
+ justify-content : flex-start;
+ span {
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ }
+ a {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
`
const BreadCrumbsDiv = styled.div`
-
- padding : 10px;
- display : flex;
+ padding : 10px;
+ display : flex;
`
const Principal = styled.div`
- .fixo {
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- height: 40px;
- text-align: center;
- padding: 30px;
- margin-bottom: 30px;
-
- img {
- height: 50px;
- width: 50px;
- margin-right: 40px;
- vertical-align: middle;
-
+ .fixo {
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ height: 40px;
+ text-align: center;
+ padding: 30px;
+ margin-bottom: 30px;
+
+ img {
+ height: 50px;
+ width: 50px;
+ margin-right: 40px;
+ vertical-align: middle;
+ }
+
+ span {
+ font-size: 20px;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
}
- span {
- font-size: 20px;
- color: ${props => props.contrast === "" ? "" : "white"};
+ .resultadosProcura {
+ text-align: center;
+ margin-block: 30px;
+ padding-inline: 15px;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ span {
+ font-size: 24px;
+ }
+ .subtitulo {
+ margin-top: 10px;
+
+ span {
+ font-size: 15px
+ }
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
+ }
}
-
-
-
- }
- .resultadosProcura {
- text-align: center;
- margin-block: 30px;
- padding-inline: 15px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- span {
- font-size: 24px;
- }
- .subtitulo {
- margin-top: 10px;
-
- span {
- font-size: 15px
- }
-
- a {
- font-size: 15px;
- padding: 0;
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
-
- }
- }
-
`
const TabsStyled = styled(Tabs)`
- color: ${props => props.contrast === "" ? "" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- .Mui-selected {
- background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
- }
-
- .MuiTab-root{
- text-transform: none !important;
- max-width:100%
- }
- text-align: center;
- width:100%
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ .Mui-selected {
+ background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ }
+ .MuiTab-root{
+ text-transform: none !important;
+ max-width:100%
+ }
+ text-align: center;
+ width:100%;
`
const TabStyled = styled(Tab)`
- color: ${props => props.contrast === "" ? "" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- padding: 4px 15px !important;
- font-weight: 500;
- font-size: 14px !important;
- border-radius: 4px !important;
- text-align: center;
-
- &:hover {
- background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
- }
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ padding: 4px 15px !important;
+ font-weight: 500;
+ font-size: 14px !important;
+ border-radius: 4px !important;
+ text-align: center;
+
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ }
`
const Menu = styled.div`
- width: auto;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
- padding-block: 10px;
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
- margin-bottom:30px
-
-
- h4 {
- padding-inline: 15px;
- font-size: 18px;
- margin-block: 10px;
- font-weight: 500;
- line-height: 1.1;
- }
-
- .voltarInicio {
- padding: 4px 15px;
- font-size: 15px;
- text-align: center;
- a {
- font-size: 15px;
- padding: 0;
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ width: auto;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ padding-block: 10px;
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ margin-bottom:30px
+
+ h4 {
+ padding-inline: 15px;
+ font-size: 18px;
+ margin-block: 10px;
+ font-weight: 500;
+ line-height: 1.1;
}
- }
-
- hr {
- border: 0;
- border-top: 1px solid #ccc;
- margin-top: 20px;
- margin-bottom: 20px;
- }
-
- .procurava {
- padding: 4px 15px;
- font-size: 15px;
- text-align: center;
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
+ .voltarInicio {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+ a {
+ font-size: 15px;
+ padding: 0;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
}
- }
+ hr {
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+ .procurava {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+ }
`
const Secao = styled.div`
- margin-inline: auto;
-
+ margin-inline: auto;
`
diff --git a/src/Pages/TabsHelp/TabResourseFind.js b/src/Pages/TabsHelp/TabResourseFind.js
index bb6395cc15781d758bd02802106e8670f9e22cac..905650f8f3f0d5f37f393365dea4f56024798934 100644
--- a/src/Pages/TabsHelp/TabResourseFind.js
+++ b/src/Pages/TabsHelp/TabResourseFind.js
@@ -35,254 +35,238 @@ import { Store } from '../../Store';
import { EncontrandoRecurso } from "ImportImages.js";
export default function TabResourseFind(props) {
- const { state } = useContext(Store)
- const tabs = [
- 'Como fazer uma busca?',
- 'Como filtrar os resultados?',
- 'Como os recursos são ranqueados?',
- 'Encontrando Recursos'
- ]
-
- const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
-
- const handleChangeTab = (e, newValue) => {
- setTabValue(newValue)
- }
-
- useEffect(() => { window.scrollTo(0, 0) }, [])
-
- return (
- <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
- <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" />
- <Secao>
- <BreadCrumbsDiv contrast={state.contrast}>
- <StyledBreadCrumbs>
- <Link to="/" >
- Página Inicial
- </Link>
- <Link to="ajuda" >
- Ajuda
- </Link>
-
- <span>
- {tabs[3]}
- </span>
-
- </StyledBreadCrumbs>
-
- </BreadCrumbsDiv>
- <Grid container justify="center">
- <Grid item xs={12} md={10} >
- <Principal contrast={state.contrast}>
- <Menu contrast={state.contrast}>
- <div className="fixo">
- <img src={EncontrandoRecurso} alt="Encontrando Recursos" />
- <span>{tabs[3]}</span>
- </div>
- <TabsStyled
- contrast={state.contrast}
- orientation="vertical"
- variant="scrollable"
- value={tabValue}
- onChange={handleChangeTab}
- TabIndicatorProps={{ style: { display: "none" } }}
- >
- <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled>
- <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled>
- <TabStyled contrast={state.contrast} label={tabs[2]}></TabStyled>
- </TabsStyled>
- <br />
- <div className="voltarInicio">
- <a href="ajuda">VOLTAR AO ÃNICIO</a>
- </div>
- </Menu>
-
- {tabValue === 0 && <HowToDo contrast={state.contrast} title={tabs[0]} />}
- {tabValue === 1 && <HowToFilter contrast={state.contrast} title={tabs[1]} />}
- {tabValue === 2 && <HowToRank contrast={state.contrast} title={tabs[2]} />}
- <div className="resultadosProcura">
- <span>Não era bem o que você procurava?</span>
- <div className="subtitulo">
- <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
- </div>
- </div>
-
-
- </Principal>
- </Grid>
- </Grid>
- <Grid style={{ paddingBottom: "50px" }} container justify={"center"}>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardPublicando contrast={state.contrast} />
- </Grid>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardParticipando contrast={state.contrast} />
- </Grid>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardGerenciando contrast={state.contrast} />
- </Grid>
- </Grid>
-
-
- </Secao>
- </div>
- );
+ const { state } = useContext(Store)
+ const tabs = [
+ 'Como fazer uma busca?',
+ 'Como filtrar os resultados?',
+ 'Como os recursos são ranqueados?',
+ 'Encontrando Recursos'
+ ]
+
+ const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
+
+ const handleChangeTab = (e, newValue) => {
+ setTabValue(newValue)
+ }
+
+ useEffect(() => { window.scrollTo(0, 0) }, [])
+
+ return (
+ <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
+ <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" />
+ <Secao>
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs contrast={state.contrast}>
+ <Link to="/" >
+ Página Inicial
+ </Link>
+ <Link to="ajuda" >
+ Ajuda
+ </Link>
+ <span>
+ {tabs[3]}
+ </span>
+ </StyledBreadCrumbs>
+ </BreadCrumbsDiv>
+ <Grid container justify="center">
+ <Grid item xs={12} md={10} >
+ <Principal contrast={state.contrast}>
+ <Menu contrast={state.contrast}>
+ <div className="fixo">
+ <img src={EncontrandoRecurso} alt="Encontrando Recursos" />
+ <span>{tabs[3]}</span>
+ </div>
+ <TabsStyled
+ contrast={state.contrast}
+ orientation="vertical"
+ variant="scrollable"
+ value={tabValue}
+ onChange={handleChangeTab}
+ TabIndicatorProps={{ style: { display: "none" } }}
+ >
+ <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[2]}></TabStyled>
+ </TabsStyled>
+ <br/>
+ <div className="voltarInicio">
+ <a href="ajuda">VOLTAR AO ÃNICIO</a>
+ </div>
+ </Menu>
+ {tabValue === 0 && <HowToDo contrast={state.contrast} title={tabs[0]} />}
+ {tabValue === 1 && <HowToFilter contrast={state.contrast} title={tabs[1]} />}
+ {tabValue === 2 && <HowToRank contrast={state.contrast} title={tabs[2]} />}
+ <div className="resultadosProcura">
+ <span>Não era bem o que você procurava?</span>
+ <div className="subtitulo">
+ <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+ </div>
+ </div>
+ </Principal>
+ </Grid>
+ </Grid>
+ <Grid style={{ paddingBottom: "50px" }} container justify={"center"}>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardPublicando contrast={state.contrast} />
+ </Grid>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardParticipando contrast={state.contrast} />
+ </Grid>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardGerenciando contrast={state.contrast} />
+ </Grid>
+ </Grid>
+ </Secao>
+ </div>
+ );
}
const StyledBreadCrumbs = styled(Breadcrumbs)`
- display : flex;
- justify-content : flex-start;
- span {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
- }
- a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
+ display : flex;
+ justify-content : flex-start;
+ span {
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ }
+ a {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
`
const BreadCrumbsDiv = styled.div`
-
- padding : 10px;
- display : flex;
+ padding : 10px;
+ display : flex;
`
const Principal = styled.div`
- .fixo {
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- height: 40px;
- text-align: center;
- padding: 30px;
- margin-bottom: 30px;
-
- img {
- height: 50px;
- width: 50px;
- margin-right: 40px;
- vertical-align: middle;
-
+ .fixo {
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ height: 40px;
+ text-align: center;
+ padding: 30px;
+ margin-bottom: 30px;
+
+ img {
+ height: 50px;
+ width: 50px;
+ margin-right: 40px;
+ vertical-align: middle;
+ }
+
+ span {
+ font-size: 20px;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
}
-
- span {
- font-size: 20px;
- color: ${props => props.contrast === "" ? "" : "white"};
+ .resultadosProcura {
+ text-align: center;
+ margin-block: 30px;
+ padding-inline: 15px;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ span {
+ font-size: 24px;
+ }
+ .subtitulo {
+ margin-top: 10px;
+
+ span {
+ font-size: 15px
+ }
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
+ }
}
-
+`
- }
- .resultadosProcura {
- text-align: center;
- margin-block: 30px;
- padding-inline: 15px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- span {
- font-size: 24px;
+const TabsStyled = styled(Tabs)`
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ .Mui-selected {
+ background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
}
- .subtitulo {
- margin-top: 10px;
-
- span {
- font-size: 15px
- }
-
- a {
- font-size: 15px;
- padding: 0;
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
+ .MuiTab-root{
+ text-transform: none !important;
+ max-width:100%
}
- }
-
-`
-
-const TabsStyled = styled(Tabs)`
- color: ${props => props.contrast === "" ? "" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- .Mui-selected {
- background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
- }
-
- .MuiTab-root{
- text-transform: none !important;
- max-width:100%
- }
- text-align: center;
- width:100%
+ text-align: center;
+ width:100%
`
const TabStyled = styled(Tab)`
- color: ${props => props.contrast === "" ? "" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- padding: 4px 15px !important;
- font-weight: 500;
- font-size: 14px !important;
- border-radius: 4px !important;
- text-align: center;
-
- &:hover {
- background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
- }
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ padding: 4px 15px !important;
+ font-weight: 500;
+ font-size: 14px !important;
+ border-radius: 4px !important;
+ text-align: center;
+
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ }
`
const Menu = styled.div`
- width: auto;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
- padding-block: 10px;
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
- margin-bottom:30px
-
-
- h4 {
- padding-inline: 15px;
- font-size: 18px;
- margin-block: 10px;
- font-weight: 500;
- line-height: 1.1;
- }
+ width: auto;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ padding-block: 10px;
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ margin-bottom:30px
+
+ h4 {
+ padding-inline: 15px;
+ font-size: 18px;
+ margin-block: 10px;
+ font-weight: 500;
+ line-height: 1.1;
+ }
- .voltarInicio {
- padding: 4px 15px;
- font-size: 15px;
- text-align: center;
- a {
- font-size: 15px;
- padding: 0;
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ .voltarInicio {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+ a {
+ font-size: 15px;
+ padding: 0;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
}
- }
-
- hr {
- border: 0;
- border-top: 1px solid #ccc;
- margin-top: 20px;
- margin-bottom: 20px;
- }
-
- .procurava {
- padding: 4px 15px;
- font-size: 15px;
- text-align: center;
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
+ hr {
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin-top: 20px;
+ margin-bottom: 20px;
}
- }
+ .procurava {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+
+ }
`
const Secao = styled.div`
- margin-inline: auto;
-
+ margin-inline: auto;
`
diff --git a/src/Pages/TermsPage.js b/src/Pages/TermsPage.js
index 0a16d9574dd63dc04f4487b3fcabbf159b39e18f..d2db18c4adf40b358b288bc7039bb87940330561 100644
--- a/src/Pages/TermsPage.js
+++ b/src/Pages/TermsPage.js
@@ -119,7 +119,7 @@ export default function TermsContainer(props) {
</div>
<div className="botoes">
<Button disabled={unavailableButton}
- style={unavailableButton ? state.contrast === "" ? { backgroundColor: "#e9e9e9" } : {} : state.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", border: "1px solid white" }}
+ style={unavailableButton ? state.contrast === "" ? { backgroundColor: "#e9e9e9" } : {border: "1px solid white"} : state.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", border: "1px solid white" }}
onClick={handleAgreement}
>
<StyledSpanContinuar style={unavailableButton ? state.contrast === "" ? { color: "#666666" } : { color: "white" } : state.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>
@@ -222,26 +222,3 @@ const StyledAppBarContainer = styled.div`
}
}
`
-
-// {/*<CardActions style={{justifyContent:"center", padding:"25px", borderTop : "2px solid #dadada"}}>
-// <div>
-// <div style={{fontSize:"14px"}}>
-// <LabeledCheckbox label={<Styledspan>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/>
-// <div style={{marginLeft:"1em", paddingLeft:"16px", color:"#a0a0a0", justifyContent:"center",display:"flex"}}>
-// <Button disabled = {unavailableButton}
-// style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
-// onClick={handleAgreement}
-// >
-// <StyledSpanContinuar style={unavailableButton ? {color:"#666666"} : {}}>
-// Continuar
-// </StyledSpanContinuar>
-// </Button>
-// <Button style={{marginLeft:"45px", backgroundColor:"#e9e9e9"}}>
-// <Styledspan style={{color:"rgb(102, 102, 102)"}}>
-// Cancelar
-// </Styledspan>
-// </Button>
-// </div>
-// </div>
-// </div>
-// </CardActions>*/}
diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js
index c0774026c08eb81ae56c8c6e7b03d12009126768..aa1f6d1b3f001b969630ac3de8f6c121880a762a 100644
--- a/src/Pages/UploadPage.js
+++ b/src/Pages/UploadPage.js
@@ -32,132 +32,133 @@ import LoadingSpinner from '../Components/LoadingSpinner.js'
import { Redirect } from 'react-router-dom'
export default function UploadPage(props) {
- const { state } = useContext(Store)
+ const { state } = useContext(Store)
- // {/*Object : link or file uploaded*/}
- // eslint-disable-next-line
- const [object, setObject] = useState()
+ // {/*Object : link or file uploaded*/}
+ // eslint-disable-next-line
+ const [object, setObject] = useState()
- const [loading, toggleLoading] = useState(true)
- const [draft, setDraft] = useState({})
- function handleSuccessfulGet(data) {
- setDraft(data)
- toggleLoading(false)
- }
- useEffect(() => {
- if (state.currentUser.id !== "") {
+ const [loading, toggleLoading] = useState(true)
+ const [draft, setDraft] = useState({})
+ function handleSuccessfulGet(data) {
+ setDraft(data)
+ toggleLoading(false)
+ }
+ useEffect(() => {
+ if (state.currentUser.id !== "") {
- const url = `/learning_objects/`
+ const url = `/learning_objects/`
- let payload = {}
+ let payload = {}
- postRequest(url, payload, handleSuccessfulGet, (error) => { console.log(error) })
+ postRequest(url, payload, handleSuccessfulGet, (error) => { console.log(error) })
- }
- }, [])
+ }
+ }, [])
- const [activeStep, setActiveStep] = React.useState(0);
- const stepperControl = (increment) => { setActiveStep(activeStep + increment) }
+ const [activeStep, setActiveStep] = React.useState(0);
+ const stepperControl = (increment) => { setActiveStep(activeStep + increment) }
- const [objectSubmitted, toggleModal] = useState(false)
- const handleModal = (value) => { toggleModal(value) }
+ const [objectSubmitted, toggleModal] = useState(false)
+ const handleModal = (value) => { toggleModal(value) }
- const handlePost = () => {
- if (state.currentUser.id !== "") {
- const url = `/learning_objects/${draft.id}/publish`
+ const handlePost = () => {
+ if (state.currentUser.id !== "") {
+ const url = `/learning_objects/${draft.id}/publish`
- let payload = {}
+ let payload = {}
- postRequest(url, payload,
- (data) => { handleModal(true) },
- (error) => { console.log(error) }
- )
+ postRequest(url, payload,
+ (data) => { handleModal(true) },
+ (error) => { console.log(error) }
+ )
+ }
}
- }
- const handleSubmit = () => {
- if (state.currentUser.id !== "") {
- const url = `/submissions/`
+ const handleSubmit = () => {
+ if (state.currentUser.id !== "") {
+ const url = `/submissions/`
- let payload = {
- "submission": {
- "learning_object_id": draft.id
- }
- }
+ let payload = {
+ "submission": {
+ "learning_object_id": draft.id
+ }
+ }
- postRequest(url, payload,
- (data) => { handleModal(true) },
- (error) => { console.log(error) }
- )
+ postRequest(url, payload,
+ (data) => { handleModal(true) },
+ (error) => { console.log(error) }
+ )
+ }
}
- }
-
- return (
- <React.Fragment>
- {
- state.currentUser.id === '' &&
- <Redirect to="/" />
- }
- {
- loading === true ?
- (
- <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
- <LoadingSpinner contrast={state.contrast} text={"CARREGANDO..."} />
- </div>
- )
- :
- (
- <>
- <ModalLearningObjectPublished
- open={objectSubmitted}
- handleClose={() => { toggleModal(false); props.history.push('/') }}
- draftID={draft.id}
- />
- {
- activeStep === 2 ?
- (
- <PartThree contrast={state.contrast} draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit} />
- )
- :
- (
- <Background contrast={state.contrast}>
- <div className="container">
- <Grid container spacing={2}>
- <Grid item md={4} xs={12}>
- <UploadFileWrapper contrast={state.contrast} draftID={draft.id} />
- </Grid>
- <Grid item md={8} xs={12}>
- <InfoBox contrast={state.contrast}>
- <div className="cabecalho">
- <h2>Informações sobre o Recurso</h2>
- <div className="feedback-upload">
- <Stepper contrast={state.contrast} activeStep={activeStep} />
- </div>
- </div>
- {
- activeStep === 0 &&
- <Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}>
- <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} contrast={state.contrast} />
- </Grid>
- }
- </InfoBox>
- </Grid>
- </Grid>
- </div>
- </Background>
- )
- }
- </>
- )
- }
- </React.Fragment>
- )
+
+ return (
+ <React.Fragment>
+ {
+ state.currentUser.id === '' &&
+ <Redirect to="/" />
+ }
+ {
+ loading === true ?
+ (
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <LoadingSpinner contrast={state.contrast} text={"CARREGANDO..."} />
+ </div>
+ )
+ :
+ (
+ <>
+ <ModalLearningObjectPublished
+ contrast={state.contrast}
+ open={objectSubmitted}
+ handleClose={() => { toggleModal(false); props.history.push('/') }}
+ draftID={draft.id}
+ />
+ {
+ activeStep === 2 ?
+ (
+ <PartThree contrast={state.contrast} draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit} />
+ )
+ :
+ (
+ <Background contrast={state.contrast}>
+ <div className="container">
+ <Grid container spacing={2}>
+ <Grid item md={4} xs={12}>
+ <UploadFileWrapper contrast={state.contrast} draftID={draft.id} />
+ </Grid>
+ <Grid item md={8} xs={12}>
+ <InfoBox contrast={state.contrast}>
+ <div className="cabecalho">
+ <h2>Informações sobre o Recurso</h2>
+ <div className="feedback-upload">
+ <Stepper contrast={state.contrast} activeStep={activeStep} />
+ </div>
+ </div>
+ {
+ activeStep === 0 &&
+ <Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}>
+ <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} contrast={state.contrast} />
+ </Grid>
+ }
+ </InfoBox>
+ </Grid>
+ </Grid>
+ </div>
+ </Background>
+ )
+ }
+ </>
+ )
+ }
+ </React.Fragment>
+ )
}
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index 9d0600c743d1158903f58f2c83ed20e3675fbd02..21d4eb73ab91ab9b9f4e4d0b6e994d76667be5d5 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -124,7 +124,7 @@ export default function UserPage(props) {
{
loading ?
(
- <LoadingSpinner text="Carregando..." />
+ <LoadingSpinner contrast={state.contrast} text="Carregando..." />
)
:
(
@@ -146,8 +146,8 @@ export default function UserPage(props) {
<div style={{ padding: "10px 0 8px 0" }}>
<UserProfileContainer>
<HeaderContainer contrast={state.contrast}>
- <Cover id={id} />
- <ProfileAvatar id={id} />
+ <Cover id={id} contrast={state.contrast}/>
+ <ProfileAvatar id={id} contrast={state.contrast}/>
{WIDTH <= 600 ? null : <UserInfo />}
<EditProfileButton contrast={state.contrast} />
</HeaderContainer>
diff --git a/src/env.js b/src/env.js
index 95815e96e0a4b6d934c32704a85f04284e77d16e..7284c42754e5c679138196c2bae2a2f128779c2b 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.portalmec.c3sl.ufpr.br',
+var apiDomain = 'https://api.portalmectest.c3sl.ufpr.br',
apiVersion = 'v1',
apiUrl = apiDomain + '/' + apiVersion;