diff --git a/package-lock.json b/package-lock.json
index 43a1c84dc653fe49e201e1273ea0054d40e3f1d0..277f2d64e7cb7cd82dca8710ed7d34ec346a4190 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21445,7 +21445,8 @@
},
"y18n": {
"version": "3.2.1",
- "resolved": ""
+ "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+ "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
},
"yallist": {
"version": "3.1.1",
diff --git a/package.json b/package.json
index e0d4bec3b7d19d0b1719c4cc9da338be771cd854..fad77e19e42961e29fab49f1ac4bcbec12126a1e 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
}
},
"scripts": {
- "start": "PORT=4000 react-scripts start watch",
+ "start": "PORT=7000 react-scripts start watch",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
diff --git a/src/App.css b/src/App.css
index 37753011ff3a47cc41ebad90f6ec9e9507d7bd48..4f0e301f55d22337795e1532fdeb14c891da8de7 100644
--- a/src/App.css
+++ b/src/App.css
@@ -17,7 +17,19 @@ 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/>.*/
.ContrastBackColor {
- background-color: black !important;
+ background-color: black !important;
+}
+
+.BackColor {
+ background-color: white !important;
+}
+
+.ContrastText{
+ color: white !important;
+}
+
+.Text{
+ color: #666 !important;
}
.ContrastTextColor {
@@ -33,3 +45,11 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
.ContrastIconColor {
color: white !important;
}
+
+.ContrastBorder {
+ border: 1px solid white !important;
+}
+
+.Border {
+ border: 1px solid #666 !important;
+}
diff --git a/src/Components/Acessibility/ContrastBar.css b/src/Components/Acessibility/ContrastBar.css
index 278dbe0d2b73e15816d2b330fc2c056d7d2fbcb0..ac0fb515a53fb80ccc6a0ff3487a31acfcd8b7e5 100644
--- a/src/Components/Acessibility/ContrastBar.css
+++ b/src/Components/Acessibility/ContrastBar.css
@@ -42,18 +42,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
border-bottom: 1px solid white;
}
-.text{
- color: grey;
- cursor: pointer;
- width: 140px;
- font-size: 13px;
- padding-left: 10px;
- padding-right: 10px;
- text-align: center;
- vertical-align: middle;
- overflow: auto;
-}
-
.Contrasttext{
color: yellow;
text-decoration: underline;
diff --git a/src/Components/Acessibility/ContrastBar.js b/src/Components/Acessibility/ContrastBar.js
index 984e5c5276d097550913ef4af0317fddce4423e8..7ee0adc8d723138a5429cacedc2fc199cc80b546 100644
--- a/src/Components/Acessibility/ContrastBar.js
+++ b/src/Components/Acessibility/ContrastBar.js
@@ -26,84 +26,83 @@ import { Store } from '../../Store';
* Bar allowing for the toggle of the high contrast mode on the page.
*/
function ContrastBar() {
- /* eslint-disable */
-
- // Hook to set contrast context
- const { state, dispatch } = React.useContext(Store);
-
-
- const setContrastAction = (newContrast) => {
- localStorage.setItem('@portalmec/contrast', newContrast)
- return dispatch({
- type: 'SET_CONTRAST',
- payload: newContrast
- })
- }
-
- const setFontSizeAction = (newFontSize) => {
- return dispatch({
- type: 'SET_FONT_SIZE',
- payload: newFontSize
- })
- }
-
- React.useEffect(() => { }, [state]);
-
- const toggleContrast = () => {
- var status = (state.contrast === '' ? 'Contrast' : '')
-
- setContrastAction(status)
- }
- const incrementFontSize = () => {
- document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) + 1) + "px";
- setFontSizeAction(parseInt(state.fontSize, 10) + 1);
- }
- const decrementFontSize = () => {
- document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) - 1) + "px";
- setFontSizeAction(parseInt(state.fontSize, 10) - 1);
- }
- const defaultFontSize = () => {
- setFontSizeAction(15);
- document.getElementsByTagName("body")[0].style.fontSize = "15px";
- }
-
- return (
- <React.Fragment>
- <div className={`${state.contrast}bar`}>
- <div className='textLeft hide-on-small-and-down'>
- <a className={`${state.contrast}text`} accessKey="1" href="#conteudo" title="Ir para o conteúdo alt + 1">
- Conteúdo 1
- </a>
- <a className={`${state.contrast}text`} accessKey="2" href="#menu" title="Ir para o menu alt + 2">
- Menu 2
- </a>
- <a className={`${state.contrast}text`} accessKey="3" href="#rodape" title="Ir para o rodapé alt + 3">
- Rodapé 3
- </a>
+ /* eslint-disable */
+
+ // Hook to set contrast context
+ const { state, dispatch } = React.useContext(Store);
+
+ const setContrastAction = (newContrast) => {
+ localStorage.setItem('@portalmec/contrast', newContrast)
+ return dispatch({
+ type: 'SET_CONTRAST',
+ payload: newContrast
+ })
+ }
+
+ const setFontSizeAction = (newFontSize) => {
+ return dispatch({
+ type: 'SET_FONT_SIZE',
+ payload: newFontSize
+ })
+ }
+
+ React.useEffect(() => { }, [state]);
+
+ const toggleContrast = () => {
+ var status = (state.contrast === '' ? 'Contrast' : '')
+
+ setContrastAction(status)
+ }
+ const incrementFontSize = () => {
+ document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) + 1) + "px";
+ setFontSizeAction(parseInt(state.fontSize, 10) + 1);
+ }
+ const decrementFontSize = () => {
+ document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) - 1) + "px";
+ setFontSizeAction(parseInt(state.fontSize, 10) - 1);
+ }
+ const defaultFontSize = () => {
+ setFontSizeAction(15);
+ document.getElementsByTagName("body")[0].style.fontSize = "15px";
+ }
+
+ return (
+ <React.Fragment>
+ <div className={`${state.contrast}bar`}>
+ <div className='textLeft hide-on-small-and-down'>
+ <a className={`${state.contrast}text`} accessKey="1" href="#conteudo" title="Ir para o conteúdo alt + 1">
+ Conteúdo 1
+ </a>
+ <a className={`${state.contrast}text`} accessKey="2" href="#menu" title="Ir para o menu alt + 2">
+ Menu 2
+ </a>
+ <a className={`${state.contrast}text`} accessKey="3" href="#rodape" title="Ir para o rodapé alt + 3">
+ Rodapé 3
+ </a>
+ </div>
+ <div className='textRight'>
+ <div>
+ <a className={`${state.contrast}text`} onClick={incrementFontSize} title="Aumentar tamanho da fonte">
+ A+
+ </a>
+ <a className={`${state.contrast}text`} onClick={decrementFontSize} title="Diminuir tamanho da fonte">
+ A-
+ </a>
+ <a className={`${state.contrast}text`} onClick={defaultFontSize} title="Restaurar tamanho da fonte">
+ A
+ </a>
+ </div>
+ <div onClick={toggleContrast}>
+ <a className={`${state.contrast}text`} title="Ativar modo de alto contraste">
+ <img src={state.contrast === '' ? ContrastImageOff : ContrastImageOn} style={{ marginRight: 5 }} alt="ContrastIcon" width="11" height="11" />
+ Contraste
+ </a>
+ </div>
+
+ </div>
</div>
- <div className='textRight'>
- <div>
- <a className={`${state.contrast}text`} onClick={incrementFontSize} title="Aumentar tamanho da fonte">
- A+
- </a>
- <a className={`${state.contrast}text`} onClick={decrementFontSize} title="Diminuir tamanho da fonte">
- A-
- </a>
- <a className={`${state.contrast}text`} onClick={defaultFontSize} title="Restaurar tamanho da fonte">
- A
- </a>
- </div>
- <div onClick={toggleContrast}>
- <a className={`${state.contrast}text`} title="Ativar modo de alto contraste">
- <img src={state.contrast === '' ? ContrastImageOff : ContrastImageOn} style={{ marginRight: 5 }} alt="ContrastIcon" width="11" height="11" />
- Contraste
- </a>
- </div>
-
- </div>
- </div>
- </React.Fragment>
- );
+ </React.Fragment>
+ );
}
diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index 5168b306e684a9047af9d33a164bbd1050ada16b..2572241b668168cdeb25439571bb177e960b3df3 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.js
@@ -42,528 +42,530 @@ import { Store } from '../Store'
import { makeStyles } from '@material-ui/core/styles'
const useStyles = makeStyles(theme => ({
- contrastTextField: {
- border: "1px solid white",
- borderRadius: theme.shape.borderRadius,
- backgroundColor: "black",
- }
+ contrastTextField: {
+ border: "1px solid white",
+ borderRadius: theme.shape.borderRadius,
+ backgroundColor: "black",
+ }
}))
function objectsPerPage() {
- var pageWidth = window.innerWidth
- if (pageWidth >= 1200) {
- return 3
- }
- else {
- if (pageWidth > 766) {
- return 2
+ var pageWidth = window.innerWidth
+ if (pageWidth >= 1200) {
+ return 3
}
else {
- return 1
+ if (pageWidth > 766) {
+ return 2
+ }
+ else {
+ return 1
+ }
}
- }
}
function ReqResources(props) {
- const [rows, setRows] = useState([])
- const [isLoading, setIsLoading] = useState(false)
-
- function onSuccessfulGet(data) {
- var aux = []
- var resources_per_page = objectsPerPage()
- for (let i = 0; i < 12 / resources_per_page; i++) {
- aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
+ const [rows, setRows] = useState([])
+ const [isLoading, setIsLoading] = useState(false)
+
+ function onSuccessfulGet(data) {
+ var aux = []
+ var resources_per_page = objectsPerPage()
+ for (let i = 0; i < 12 / resources_per_page; i++) {
+ aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
+ }
+ setRows(aux)
+ setIsLoading(false)
}
- setRows(aux)
- setIsLoading(false)
- }
-
- useEffect(() => {
- setIsLoading(true)
- const url = `/search?page=0&results_per_page=12&order=${props.order}&query=*&search_class=LearningObject`
-
- getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
- }, [props.order])
-
- return (
- isLoading ?
- <Grid container justify="center" alignItems="center" style={{ margin: "2em" }} >
- <Grid item>
- <CircularProgress size={24} style={props.contrast === "" ? { color: "#ff7f00" } : { color: "yellow" }} />
- </Grid>
- </Grid>
- :
- <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
- {
- rows.length >= 1 ?
- rows.map((row, index) => (
- <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
- {row.map((card) => (
- <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
- <ResourceCardFunction
- avatar={card.publisher.avatar}
- id={card.id}
- thumbnail={card.thumbnail}
- type={card.object_type ? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- author={card.publisher.name}
- tags={card.tags}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
- </div>
- ))}
- </Row>
- ))
- :
- <Grid container justify="center" alignItems="center">
- <Grid item>
- <img src={RecursoVazio} alt="Não há recursos" />
- </Grid>
+
+ useEffect(() => {
+ setIsLoading(true)
+ const url = `/search?page=0&results_per_page=12&order=${props.order}&query=*&search_class=LearningObject`
+
+ getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
+ }, [props.order])
+
+ return (
+ isLoading ?
+ <Grid container justify="center" alignItems="center" style={{ margin: "2em" }} >
+ <Grid item>
+ <CircularProgress size={24} style={props.contrast === "" ? { color: "#ff7f00" } : { color: "yellow" }} />
</Grid>
- }
- </Carousel>
+ </Grid>
+ :
+ <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+ {
+ rows.length >= 1 ?
+ rows.map((row, index) => (
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
+ {row.map((card) => (
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
+ <ResourceCardFunction
+ contrast={props.contrast}
+ avatar={card.publisher.avatar}
+ id={card.id}
+ thumbnail={card.thumbnail}
+ type={card.object_type ? card.object_type : "Outros"}
+ title={card.name}
+ published={card.state === "published" ? true : false}
+ likeCount={card.likes_count}
+ liked={card.liked}
+ rating={card.review_average}
+ author={card.publisher.name}
+ tags={card.tags}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </div>
+ ))}
+ </Row>
+ ))
+ :
+ <Grid container justify="center" alignItems="center">
+ <Grid item>
+ <img src={RecursoVazio} alt="Não há recursos" />
+ </Grid>
+ </Grid>
+ }
+ </Carousel>
- )
+ )
}
function ReqCollections(props) {
- const [rows, setRows] = useState([])
- const [isLoading, setIsLoading] = useState(false)
-
- function onSuccessfulGet(data) {
- var aux = []
- var collections_per_page = objectsPerPage()
- for (let i = 0; i < 12 / collections_per_page; i++) {
- aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
+ const [rows, setRows] = useState([])
+ const [isLoading, setIsLoading] = useState(false)
+
+ function onSuccessfulGet(data) {
+ var aux = []
+ var collections_per_page = objectsPerPage()
+ for (let i = 0; i < 12 / collections_per_page; i++) {
+ aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
+ }
+ setIsLoading(false)
+ setRows(aux)
}
- setIsLoading(false)
- setRows(aux)
- }
-
- useEffect(() => {
- setIsLoading(true)
- const url = `/search?page=0&results_per_page=12&order=${props.order}&query=*&search_class=Collection`
-
- getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
- }, [props.order])
-
- return (
- isLoading ?
- <Grid container justify="center" alignItems="center" style={{ marginTop: "2em" }}>
- <Grid item>
- <CircularProgress size={24} style={props.contrast === "" ? { color: "#673ab7" } : { color: "yellow" }} />
+
+ useEffect(() => {
+ setIsLoading(true)
+ const url = `/search?page=0&results_per_page=12&order=${props.order}&query=*&search_class=Collection`
+
+ getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
+ }, [props.order])
+
+ return (
+ isLoading ?
+ <Grid container justify="center" alignItems="center" style={{ marginTop: "2em" }}>
+ <Grid item>
+ <CircularProgress size={24} style={props.contrast === "" ? { color: "#673ab7" } : { color: "yellow" }} />
+ </Grid>
</Grid>
- </Grid>
- :
- rows.length >= 1 ?
- <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
- {
- rows.map((row, index) => (
- <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
- {row.map((card) => (
- <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
- <CollectionCardFunction
- name={card.name}
- tags={card.tags}
- rating={card.score}
- id={card.id}
- author={card.owner ? card.owner.name : ""}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner ? card.owner.avatar : ""}
- likeCount={card.likes_count}
- followed={card.followed}
- liked={card.liked}
- collections={card.collection_items}
- authorID={card.owner ? card.owner.id : ""}
- />
- </div>
- ))}
- </Row>
- ))}
- </Carousel>
:
- <Grid container justify="center" alignItems="center">
- <Grid item>
- <img src={ColecaoVazia} alt="Não há coleções" />
- </Grid>
- </Grid>
- )
+ rows.length >= 1 ?
+ <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+ {
+ rows.map((row, index) => (
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
+ {row.map((card) => (
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
+ <CollectionCardFunction
+ contrast={props.contrast}
+ name={card.name}
+ tags={card.tags}
+ rating={card.score}
+ id={card.id}
+ author={card.owner ? card.owner.name : ""}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner ? card.owner.avatar : ""}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner ? card.owner.id : ""}
+ />
+ </div>
+ ))}
+ </Row>
+ ))}
+ </Carousel>
+ :
+ <Grid container justify="center" alignItems="center">
+ <Grid item>
+ <img src={ColecaoVazia} alt="Não há coleções" />
+ </Grid>
+ </Grid>
+ )
}
function TabRecurso({ contrast }) {
- const classes = useStyles()
- const text = "Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é, a vídeos, animações e a outros recursos destinados à educação. São Recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!"
- const [currOrder, setCurrOrder] = useState("Mais Relevante");
- const [currValue, setCurrValue] = useState("score");
- const [ordenar] = useState([
- { label: "Mais Estrelas", value: "review_average" },
- { label: "Mais Relevante", value: "score" },
- { label: "Mais Baixados", value: "downloads" },
- { label: "Mais Favoritados", value: "likes" },
- { label: "Mais Recentes", value: "publicationdesc" },
- { label: "Ordem Alfabética", value: "title" },
- ]);
-
- return (
- <React.Fragment>
- <div style={{ backgroundColor: contrast === "" ? "#ff7f00" : "black", position: "relative" }}>
- <StyledTab container contrast={contrast}>
- <Grid item md={3} xs={12}>
- <img
- src={recursos}
- alt="aba recursos"
- style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
- />
- </Grid>
- {
- window.innerWidth <= 501 &&
- <h4>
- Recursos Educacionais Digitais
- </h4>
- }
- <Grid item md={6} xs={12}>
- <p>
- {text}
- </p>
- </Grid>
- {
- window.innerWidth <= 501 &&
- <div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
- </div>
- }
- </StyledTab>
- </div>
- {
- window.innerWidth > 501 &&
- <div className={`${contrast}BackColor`}>
- <Container style={{ padding: "20px" }}>
- <Grid
- container
- direction="row"
- justify="space-between"
- alignItems="center"
- style={{
- paddingBottom: "5px",
- borderBottom: contrast === "" ? "1px solid #ff7f00" : "1px solid white",
- color: contrast === "" ? "#ff7f00" : "white",
- }}
- >
- <Grid item>
- <p
- style={{ margin: 0, padding: 0 }}
- >
- {
- `Recursos ${currOrder}`
- }
+ const classes = useStyles()
+ const text = "Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é, a vídeos, animações e a outros recursos destinados à educação. São Recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!"
+ const [currOrder, setCurrOrder] = useState("Mais Relevante");
+ const [currValue, setCurrValue] = useState("score");
+ const [ordenar] = useState([
+ { label: "Mais Estrelas", value: "review_average" },
+ { label: "Mais Relevante", value: "score" },
+ { label: "Mais Baixados", value: "downloads" },
+ { label: "Mais Favoritados", value: "likes" },
+ { label: "Mais Recentes", value: "publicationdesc" },
+ { label: "Ordem Alfabética", value: "title" },
+ ]);
+
+ return (
+ <React.Fragment>
+ <div style={{ backgroundColor: contrast === "" ? "#ff7f00" : "black", position: "relative" }}>
+ <StyledTab container contrast={contrast}>
+ <Grid item md={3} xs={12}>
+ <img
+ src={recursos}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <h4>
+ Recursos Educacionais Digitais
+ </h4>
+ }
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
</p>
- </Grid>
-
- <Grid item>
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <p style={{ margin: 0, padding: 0 }}>
- Ordenar por:
- </p>
- </Grid>
- <Grid item>
- <TextField
- select
- fullWidth
- value={currValue}
- variant="outlined"
- className={contrast === "Contrast" && classes.contrastTextField}
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
+ </div>
+ }
+ </StyledTab>
+ </div>
+ {
+ window.innerWidth > 501 &&
+ <div className={`${contrast}BackColor`}>
+ <Container style={{ padding: "20px" }}>
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
+ style={{
+ paddingBottom: "5px",
+ borderBottom: contrast === "" ? "1px solid #ff7f00" : "1px solid white",
+ color: contrast === "" ? "#ff7f00" : "white",
+ }}
+ >
+ <Grid item>
+ <p
+ style={{ margin: 0, padding: 0 }}
>
- {ordenar.map((option) => (
- <MenuItem
- key={option.value}
- value={option.value}
- name={option.value}
- onClick={() => {
- setCurrOrder(option.label)
- setCurrValue(option.value)
- }}
- className={`${contrast}BackColor`}
+ {
+ `Recursos ${currOrder}`
+ }
+ </p>
+ </Grid>
+
+ <Grid item>
+ <Grid container direction="row" alignItems="center" spacing={1}>
+ <Grid item>
+ <p style={{ margin: 0, padding: 0 }}>
+ Ordenar por:
+ </p>
+ </Grid>
+ <Grid item>
+ <TextField
+ select
+ fullWidth
+ value={currValue}
+ variant="outlined"
+ className={contrast === "Contrast" && classes.contrastTextField}
>
- <span style={currValue === option.value ? { color: contrast === "" ? "#ff7f00" : "yellow", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
- {option.label}
- </span>
- </MenuItem>
- ))}
- </TextField>
- </Grid>
+ {ordenar.map((option) => (
+ <MenuItem
+ key={option.value}
+ value={option.value}
+ name={option.value}
+ onClick={() => {
+ setCurrOrder(option.label)
+ setCurrValue(option.value)
+ }}
+ >
+ <span style={currValue === option.value ? { color: contrast === "" ? "#ff7f00" : "yellow", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
+ {option.label}
+ </span>
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+ </Grid>
</Grid>
- </Grid>
- </Grid>
- <Hidden sm xs>
- <ReqResources order={currValue} contrast={contrast} />
- </Hidden>
- <Visible sm xs>
- <ReqResources order={currValue} contrast={contrast} />
- </Visible>
- </Container>
- </div>
- }
- </React.Fragment>
- )
+ </Grid>
+ <Hidden sm xs>
+ <ReqResources order={currValue} contrast={contrast} />
+ </Hidden>
+ <Visible sm xs>
+ <ReqResources order={currValue} contrast={contrast} />
+ </Visible>
+ </Container>
+ </div>
+ }
+ </React.Fragment>
+ )
}
function TabColecoes({ contrast }) {
- const classes = useStyles()
- const text = "Nesta área, você tem acesso às coleções criadas e organizadas pelos usuários da plataforma. É mais uma possibilidade de buscar recursos educacionais para sua aula!"
- const [currOrder, setCurrOrder] = useState("Mais Relevante");
- const [currValue, setCurrValue] = useState("score");
- const [ordenar] = useState([
- { label: "Mais Estrelas", value: "review_average" },
- { label: "Mais Relevante", value: "score" },
- { label: "Mais Baixados", value: "downloads" },
- { label: "Mais Favoritados", value: "likes" },
- { label: "Mais Recentes", value: "publicationdesc" },
- { label: "Ordem Alfabética", value: "title" },
- ]);
-
- return (
- <React.Fragment>
- <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
- <StyledTab container contrast={contrast}>
- <Grid item md={3} xs={12}>
- <img
- src={colecoes}
- alt="aba recursos"
- style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
- />
- </Grid>
- {
- window.innerWidth <= 501 &&
- <h4>
- Coleções dos Usuários
- </h4>
- }
- <Grid item md={6} xs={12}>
- <p>
- {text}
- </p>
- </Grid>
- {
- window.innerWidth <= 501 &&
- <div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
- </div>
- }
- </StyledTab>
- </div>
- {
- window.innerWidth > 501 &&
- <div className={`${contrast}BackColor`}>
- <Container style={{ padding: "20px" }}>
- <Grid
- container
- direction="row"
- justify="space-between"
- alignItems="center"
- style={{
- paddingBottom: "5px",
- borderBottom: contrast === "" ? "1px solid #673ab7" : "1px solid white",
- color: contrast === "" ? "#673ab7" : "white",
- }}
- >
- <Grid item>
- <p
- style={{ margin: 0, padding: 0 }}
- >
- {
- `Coleções ${currOrder}`
- }
+ const classes = useStyles()
+ const text = "Nesta área, você tem acesso às coleções criadas e organizadas pelos usuários da plataforma. É mais uma possibilidade de buscar recursos educacionais para sua aula!"
+ const [currOrder, setCurrOrder] = useState("Mais Relevante");
+ const [currValue, setCurrValue] = useState("score");
+ const [ordenar] = useState([
+ { label: "Mais Estrelas", value: "review_average" },
+ { label: "Mais Relevante", value: "score" },
+ { label: "Mais Baixados", value: "downloads" },
+ { label: "Mais Favoritados", value: "likes" },
+ { label: "Mais Recentes", value: "publicationdesc" },
+ { label: "Ordem Alfabética", value: "title" },
+ ]);
+
+ return (
+ <React.Fragment>
+ <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
+ <StyledTab container contrast={contrast}>
+ <Grid item md={3} xs={12}>
+ <img
+ src={colecoes}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <h4>
+ Coleções dos Usuários
+ </h4>
+ }
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
</p>
- </Grid>
-
- <Grid item>
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <p style={{ margin: 0, padding: 0 }}>
- Ordenar por:
- </p>
- </Grid>
- <Grid item>
- <TextField
- select
- fullWidth
- value={currValue}
- variant="outlined"
- className={contrast === "Contrast" && classes.contrastTextField}
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
+ </div>
+ }
+ </StyledTab>
+ </div>
+ {
+ window.innerWidth > 501 &&
+ <div className={`${contrast}BackColor`}>
+ <Container style={{ padding: "20px" }}>
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
+ style={{
+ paddingBottom: "5px",
+ borderBottom: contrast === "" ? "1px solid #673ab7" : "1px solid white",
+ color: contrast === "" ? "#673ab7" : "white",
+ }}
+ >
+ <Grid item>
+ <p
+ style={{ margin: 0, padding: 0 }}
>
- {ordenar.map((option) => (
- <MenuItem
- key={option.value}
- value={option.value}
- name={option.value}
- style={contrast === "" ? {} : { backgroundColor: "black" }}
- onClick={() => {
- setCurrOrder(option.label)
- setCurrValue(option.value)
- }}
+ {
+ `Coleções ${currOrder}`
+ }
+ </p>
+ </Grid>
+
+ <Grid item>
+ <Grid container direction="row" alignItems="center" spacing={1}>
+ <Grid item>
+ <p style={{ margin: 0, padding: 0 }}>
+ Ordenar por:
+ </p>
+ </Grid>
+ <Grid item>
+ <TextField
+ select
+ fullWidth
+ value={currValue}
+ variant="outlined"
+ className={contrast === "Contrast" && classes.contrastTextField}
>
- <span style={currValue === option.value ? { color: contrast === "" ? "#673ab7" : "yellow", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
- {option.label}
- </span>
- </MenuItem>
- ))}
- </TextField>
- </Grid>
+ {ordenar.map((option) => (
+ <MenuItem
+ key={option.value}
+ value={option.value}
+ name={option.value}
+ style={contrast === "" ? {} : { backgroundColor: "black" }}
+ onClick={() => {
+ setCurrOrder(option.label)
+ setCurrValue(option.value)
+ }}
+ >
+ <span style={currValue === option.value ? { color: contrast === "" ? "#673ab7" : "yellow", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
+ {option.label}
+ </span>
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+ </Grid>
</Grid>
- </Grid>
- </Grid>
- <ReqCollections order={currValue} contrast={contrast} />
- </Container>
- </div>
- }
- </React.Fragment>
- )
+ </Grid>
+ <ReqCollections order={currValue} contrast={contrast} />
+ </Container>
+ </div>
+ }
+ </React.Fragment>
+ )
}
function TabMateriais({ contrast }) {
- const text = "Nesta área, você acessa livremente materiais completos de formação, como cursos já oferecidos pelo MEC e seus parceiros. São conteúdos elaborados por equipes multidisciplinares e de autoria de pesquisadores e educadores renomados nas áreas."
-
- const materials = colecoes_obj()
+ const text = "Nesta área, você acessa livremente materiais completos de formação, como cursos já oferecidos pelo MEC e seus parceiros. São conteúdos elaborados por equipes multidisciplinares e de autoria de pesquisadores e educadores renomados nas áreas."
- const [currMaterial, setCurrMaterial] = useState({
- open: false,
- material: {}
- })
+ const materials = colecoes_obj()
- const handleExpandMaterial = (id) => {
- if (id !== currMaterial.material.id)
- setCurrMaterial({
- open: true,
- material: { ...materials[id] }
- })
- else {
- setCurrMaterial({
+ const [currMaterial, setCurrMaterial] = useState({
open: false,
material: {}
- })
+ })
+
+ const handleExpandMaterial = (id) => {
+ if (id !== currMaterial.material.id)
+ setCurrMaterial({
+ open: true,
+ material: { ...materials[id] }
+ })
+ else {
+ setCurrMaterial({
+ open: false,
+ material: {}
+ })
+ }
}
- }
-
- return (
- <React.Fragment>
- <div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
- <StyledTab container contrast={contrast}>
- <Grid item md={3} xs={12}>
- <img
- src={materiais}
- alt="aba recursos"
- style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
- />
- </Grid>
- {
- window.innerWidth <= 501 &&
- <h4>
- Materiais de formação
- </h4>
- }
- <Grid item md={6} xs={12}>
- <p>
- {text}
- </p>
- </Grid>
- {
- window.innerWidth <= 501 &&
- <div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
- </div>
- }
- </StyledTab>
- </div>
- {
- window.innerWidth > 501 &&
- <div className={`${contrast}BackColor`}>
- <Container style={{ padding: "20px" }}>
- <p
- style={{
- paddingBottom: "5px",
- borderBottom: contrast === "" ? "1px solid #e81f4f" : "1px solid white",
- color: contrast === "" ? "#e81f4f" : "white",
- }}
- >
- Materiais mais recentes{" "}
- </p>
- <Carousel
- style={{ padding: "20px" }}
- showThumbs={false}
- infiniteLoop={true}
- showStatus={false}
- >
- <Row>
- {
- materials.map((material, index) => {
- return (
- <Col md={3} key={index}>
- <MaterialCard
- name={material.name}
- thumb={material.img}
- score={material.score}
- modules={material.topics}
- handleExpand={handleExpandMaterial}
- id={index}
- />
- </Col>
- )
- })
- }
- </Row>
- </Carousel>
+
+ return (
+ <React.Fragment>
+ <div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
+ <StyledTab container contrast={contrast}>
+ <Grid item md={3} xs={12}>
+ <img
+ src={materiais}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
{
- currMaterial.open ?
- <ExpandedMaterial material={currMaterial.material} />
- :
- null
+ window.innerWidth <= 501 &&
+ <h4>
+ Materiais de formação
+ </h4>
+ }
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
+ </p>
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
+ </div>
}
- </Container>
+ </StyledTab>
</div>
- }
- </React.Fragment >
- )
+ {
+ window.innerWidth > 501 &&
+ <div className={`${contrast}BackColor`}>
+ <Container style={{ padding: "20px" }}>
+ <p
+ style={{
+ paddingBottom: "5px",
+ borderBottom: contrast === "" ? "1px solid #e81f4f" : "1px solid white",
+ color: contrast === "" ? "#e81f4f" : "white",
+ }}
+ >
+ Materiais mais recentes{" "}
+ </p>
+ <Carousel
+ style={{ padding: "20px" }}
+ showThumbs={false}
+ infiniteLoop={true}
+ showStatus={false}
+ >
+ <Row>
+ {
+ materials.map((material, index) => {
+ return (
+ <Col md={3} key={index}>
+ <MaterialCard
+ contrast={contrast}
+ name={material.name}
+ thumb={material.img}
+ score={material.score}
+ modules={material.topics}
+ handleExpand={handleExpandMaterial}
+ id={index}
+ />
+ </Col>
+ )
+ })
+ }
+ </Row>
+ </Carousel>
+ {
+ currMaterial.open ?
+ <ExpandedMaterial contrast={contrast} material={currMaterial.material} />
+ :
+ null
+ }
+ </Container>
+ </div>
+ }
+ </React.Fragment >
+ )
}
export default function AreasSubPages(props) {
- const { state } = useContext(Store)
-
- const areaRender = () => {
- switch (props.banner) {
- case "Recursos":
- return <TabRecurso contrast={state.contrast} />
- case "Materiais":
- return <TabMateriais contrast={state.contrast} />
- case "Colecoes":
- return <TabColecoes contrast={state.contrast} />
- default:
- return null
+ const { state } = useContext(Store)
+
+ const areaRender = () => {
+ switch (props.banner) {
+ case "Recursos":
+ return <TabRecurso contrast={state.contrast} />
+ case "Materiais":
+ return <TabMateriais contrast={state.contrast} />
+ case "Colecoes":
+ return <TabColecoes contrast={state.contrast} />
+ default:
+ return null
+ }
}
- }
-
- return (
- <React.Fragment>
- {
- window.innerWidth <= 501 ? (
- <React.Fragment>
- <TabRecurso contrast={state.contrast} />
- <TabMateriais contrast={state.contrast} />
- <TabColecoes contrast={state.contrast} />
- </React.Fragment>
- ) : (
- areaRender()
- )
- }
- </React.Fragment>
- )
+
+ return (
+ <React.Fragment>
+ {
+ window.innerWidth <= 501 ? (
+ <React.Fragment>
+ <TabRecurso contrast={state.contrast} />
+ <TabMateriais contrast={state.contrast} />
+ <TabColecoes contrast={state.contrast} />
+ </React.Fragment>
+ ) : (
+ areaRender()
+ )
+ }
+ </React.Fragment>
+ )
}
const StyledTab = styled(Grid)`
diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js
index 564c07183b23510edf5ba1170651a63fff879122..dd67aeed9818c20b7f9891e7dd8ba2a9182c8999 100644
--- a/src/Components/ButtonGuardarColecao.js
+++ b/src/Components/ButtonGuardarColecao.js
@@ -56,10 +56,10 @@ export default function ButtonGuardarColecao(props) {
>
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
- <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
+ <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
/>
- <StyledButton onClick={handleGuardar}>
+ <StyledButton onClick={handleGuardar} className={`${props.contrast}LinkColor`}>
<CreateNewFolderIcon /> GUARDAR
</StyledButton>
</>
@@ -67,7 +67,7 @@ export default function ButtonGuardarColecao(props) {
}
const StyledButton = styled(Button)`
- color : #666 !important;
+ color : inherit !important;
background-color : transparent !important;
font-size : 14px important;
font-weight : 500 !important;
@@ -78,6 +78,6 @@ const StyledButton = styled(Button)`
}
&:hover {
- color: rgb(107, 35, 142) !important;
+ color: rgb(107, 35, 142);
}
`
diff --git a/src/Components/ColCardPublicOptions.js b/src/Components/ColCardPublicOptions.js
index 2b58c70f58000d4014fb53330c8901a65cbfc1b3..baa6cc8051aaef599da3beee2d737cd68a198076 100644
--- a/src/Components/ColCardPublicOptions.js
+++ b/src/Components/ColCardPublicOptions.js
@@ -32,7 +32,7 @@ import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
import AddIcon from '@material-ui/icons/Add';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
-export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, handleFollow, currentUserId, handleLogin, liked }) {
+export default function ColCardPublicOptions({ contrast, id, userFollowingCol, handleLike, handleFollow, currentUserId, handleLogin, liked }) {
const [anchorEl, setAnchorEl] = React.useState(null);
function handleClick(event) {
@@ -49,6 +49,7 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
return (
<>
<ReportModal
+ contrast={contrast}
open={reportModalOpen}
handleClose={() => handleReportModal(false)}
form="colecao"
@@ -62,7 +63,7 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
onClick={handleClick}
style={{ color: "#666" }}
>
- <MoreVertIcon style={{ color: "inherit" }} />
+ <MoreVertIcon className={`${contrast}LinkColor`} style={{ color: "inherit" }} />
</Button>
<Menu
id="simple-menu"
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index dd4e3d079b837960dd76e8621f494404c71ecb47..61ffcd99f5e15dae3f365efe841ac7c5f78aba62 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -41,283 +41,284 @@ import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
export default function CollectionCardFunction(props) {
- const { state } = useContext(Store)
-
- // eslint-disable-next-line
- const [userAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar)
- const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed)
- const handleToggleUserFollowingCol = () => { toggleUserFollowingCol(!userFollowingCol) }
-
- const [name, setName] = useState(props.name)
- const changeColName = (newName) => { setName(newName) }
-
- const [privacy, setPrivacy] = useState(props.privacy)
- const changeColPrivacy = (newPrivacy) => { setPrivacy(newPrivacy) }
-
- const [likesCount, setLikesCount] = useState(props.likeCount)
- const [liked, toggleLiked] = useState(props.liked)
-
- const [signUpOpen, setSignUp] = useState(false)
- const [loginOpen, setLogin] = useState(false)
- const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
-
-
- function handleSuccessLike(data) {
- toggleLiked(!liked)
- setLikesCount(data.count)
- }
- const handleLike = () => {
- if (state.currentUser.id)
- putRequest(`/collections/${props.id}/like`, {}, handleSuccessLike, (error) => { console.log(error) })
- else
- handleLogin()
- }
-
- const [followingHover, handleFollowingHover] = useState(false)
- const toggleFollowingHover = (value) => { handleFollowingHover(value) }
-
- const [slideIn, setSlide] = useState(false)
- const controlSlide = () => { setSlide(!slideIn) }
-
- function handleSuccessFollow(data) {
- handleToggleUserFollowingCol()
- }
- const handleFollow = () => {
- if (state.currentUser.id)
- putRequest(`/collections/${props.id}/follow`, {}, handleSuccessFollow, (error) => { console.log(error) })
- else
- handleLogin()
- }
-
- const RenderFollowButton = () => {
- return (
- <FollowButton onClick={handleFollow}>
- <AddIcon /><span>SEGUIR</span>
- </FollowButton>
- )
- }
+ const { state } = useContext(Store)
+
+ // eslint-disable-next-line
+ const [userAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar)
+ const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed)
+ const handleToggleUserFollowingCol = () => { toggleUserFollowingCol(!userFollowingCol) }
+
+ const [name, setName] = useState(props.name)
+ const changeColName = (newName) => { setName(newName) }
+
+ const [privacy, setPrivacy] = useState(props.privacy)
+ const changeColPrivacy = (newPrivacy) => { setPrivacy(newPrivacy) }
+
+ const [likesCount, setLikesCount] = useState(props.likeCount)
+ const [liked, toggleLiked] = useState(props.liked)
- useEffect(() => {
- if (!state.currentUser.id) {
- toggleLiked(false);
- toggleUserFollowingCol(false);
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+
+
+ function handleSuccessLike(data) {
+ toggleLiked(!liked)
+ setLikesCount(data.count)
+ }
+ const handleLike = () => {
+ if (state.currentUser.id)
+ putRequest(`/collections/${props.id}/like`, {}, handleSuccessLike, (error) => { console.log(error) })
+ else
+ handleLogin()
}
- }, [state.currentUser.id])
- const RenderFollowingButton = () => {
- return (
- <FollowingButton onMouseOver={() => toggleFollowingHover(true)}
- onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}>
- {
- followingHover ?
- (
- [
- <span>DEIXAR DE SEGUIR</span>
- ]
- )
- :
- (
- [
- <React.Fragment>
- <CheckIcon /><span>SEGUINDO</span>
- </React.Fragment>
- ]
- )
- }
- </FollowingButton>
- )
- }
+ const [followingHover, handleFollowingHover] = useState(false)
+ const toggleFollowingHover = (value) => { handleFollowingHover(value) }
- const SlideAnimationContent = () => {
- return (
- <SlideContentDiv>
- <HeaderContainer container="row" justify="flex-start" alignItems="center">
- <AvatarDiv item xs={2}>
- <img className="img" src={userAvatar} alt="user avatar" />
- </AvatarDiv>
- <EnviadoPor item xs={10}>
- Enviado por:
- <br />
- <p>{props.author}</p>
- </EnviadoPor>
- </HeaderContainer>
- {
- props.tags ?
- <TagContainer container direction="row">
- {
- props.tags.map((tag) =>
- <Grid item key={tag.id}>
- <span >{tag.name}</span>
- </Grid>
- )
- }
- </TagContainer> :
- null
+ const [slideIn, setSlide] = useState(false)
+ const controlSlide = () => { setSlide(!slideIn) }
+
+ function handleSuccessFollow(data) {
+ handleToggleUserFollowingCol()
+ }
+ const handleFollow = () => {
+ if (state.currentUser.id)
+ putRequest(`/collections/${props.id}/follow`, {}, handleSuccessFollow, (error) => { console.log(error) })
+ else
+ handleLogin()
+ }
+
+ const RenderFollowButton = () => {
+ return (
+ <FollowButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#503096" } : {}} onClick={handleFollow}>
+ <AddIcon /><span>SEGUIR</span>
+ </FollowButton>
+ )
+ }
+
+ useEffect(() => {
+ if (!state.currentUser.id) {
+ toggleLiked(false);
+ toggleUserFollowingCol(false);
}
- </SlideContentDiv>
- )
- }
+ }, [state.currentUser.id])
+
+ const RenderFollowingButton = () => {
+ return (
+ <FollowingButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#fff", backgroundColor : "#503096" } : {}}onMouseOver={() => toggleFollowingHover(true)}
+ onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}>
+ {
+ followingHover ?
+ (
+ [
+ <span>DEIXAR DE SEGUIR</span>
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <CheckIcon /><span>SEGUINDO</span>
+ </React.Fragment>
+ ]
+ )
+ }
+ </FollowingButton>
+ )
+ }
- const handleSignUp = () => {
- setSignUp(!signUpOpen)
- }
+ const SlideAnimationContent = (contrast) => {
+ return (
+ <SlideContentDiv style={contrast === '' ? {backgroundColor: "#7e57c2"} : {backgroundColor: "inherit"}}>
+ <HeaderContainer container="row" justify="flex-start" alignItems="center">
+ <AvatarDiv item xs={2}>
+ <img className="img" src={userAvatar} alt="user avatar" />
+ </AvatarDiv>
+ <EnviadoPor item xs={10}>
+ Enviado por:
+ <br />
+ <p>{props.author}</p>
+ </EnviadoPor>
+ </HeaderContainer>
+ {
+ props.tags ?
+ <TagContainer container direction="row">
+ {
+ props.tags.map((tag) =>
+ <Grid item key={tag.id}>
+ <span className={`${props.contrast}BackColor ${props.contrast}Text`}>{tag.name}</span>
+ </Grid>
+ )
+ }
+ </TagContainer> :
+ null
+ }
+ </SlideContentDiv>
+ )
+ }
- const handleLogin = () => {
- setLogin(!loginOpen)
- }
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
- function toggleLoginSnackbar(reason) {
- if (reason === 'clickaway') {
- return;
+ function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
}
- handleSuccessfulLogin(false);
- }
-
- return (
- <>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
- />
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
- openSnackbar={() => { handleSuccessfulLogin(true) }}
- />
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
- <StyledCard>
- <CardDiv>
- <CardReaDiv>
- <Link to={"/colecao-do-usuario/" + props.id}>
- <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
- <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
- <UserInfo style={{ width: '272.5px'}}>
- {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
- <img src={userAvatar} alt="user avatar" style={{
- height: "70px", width: "70px", borderRadius: "50%",
- zIndex: 1, border: "2px solid white",
- boxShadow: "0 1px 3px rgba(0,0,0,.45)"
- }} />
- <UserAndTitle>
- <span>{props.author}</span>
- <span className={"col-name"}>{name}</span>
- </UserAndTitle>
- </UserInfo>
- <StyledGrid container direction="row" style={{ width: '272.5px' }}>
- {
- props.thumbnails.map((thumb) =>
- <Grid item xs={props.thumbnails.length <= 3 && props.thumbnails.length > 0 ? 12 / props.thumbnails.length : 6}>
- <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: `${props.thumbnails.length <= 3 ? '230px' : '100%'}`, width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
- </Grid>
- )
- }
- </StyledGrid>
- </div>
+
+ function toggleLoginSnackbar(reason) {
+ if (reason === 'clickaway') {
+ return;
+ }
+ handleSuccessfulLogin(false);
+ }
+
+ return (
+ <>
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ />
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
+ anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+ >
+ <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+ </Snackbar>
+ <StyledCard>
+ <CardDiv className={`${props.contrast}Border`}>
+ <CardReaDiv className={`${props.contrast}BackColor`}>
+ <Link to={"/colecao-do-usuario/" + props.id}>
+ <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
+ <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
+ <UserInfo style={{ width: '272.5px'}}>
+ {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
+ <img src={userAvatar} alt="user avatar" style={{
+ height: "70px", width: "70px", borderRadius: "50%",
+ zIndex: 1, border: "2px solid white",
+ boxShadow: "0 1px 3px rgba(0,0,0,.45)"
+ }} />
+ <UserAndTitle>
+ <span>{props.author}</span>
+ <span className={"col-name"}>{name}</span>
+ </UserAndTitle>
+ </UserInfo>
+ <StyledGrid container direction="row" style={{ width: '272.5px' }}>
+ {
+ props.thumbnails.map((thumb) =>
+ <Grid item xs={props.thumbnails.length <= 3 && props.thumbnails.length > 0 ? 12 / props.thumbnails.length : 6}>
+ <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: `${props.thumbnails.length <= 3 ? '230px' : '100%'}`, width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
+ </Grid>
+ )
+ }
+ </StyledGrid>
+ </div>
+ {
+ <div className={`slideContentLinkAfterActive${slideIn}`}>
+ <div className="Text" style={{ width: "100%" }}>
+ {SlideAnimationContent(props.contrast)}
+ </div>
+ </div>
+ }
+ </Header>
+ </Link>
+
+ <Description className={`${props.contrast}BackColor`}> {/*renders rating, number of learning objects and likes count*/}
+ {
+ props.authorID !== state.currentUser.id &&
+ <Rating
+ name="customized-empty"
+ value={props.rating}
+ readOnly
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />}
+ />
+ }
+
+ <Footer className={`${props.contrast}Text`}>
+ <Type>
+ <FolderIcon />
+ <span style={{ fontWeight: "bold" }}>{props.collections ? props.collections.length : 0} </span>
+ <span>{props.collections ? props.collections.length !== 1 ? "Recursos" : "Recurso" : 0}</span>
+ </Type>
+ <LikeCounter>
+ <span>{likesCount}</span>
+ <ButtonNoWidth onClick={handleLike}>
+ <FavoriteIcon className={`${props.contrast}LinkColor`} style={ props.contrast === "" ? {color: liked ? "red" : "#666"} : {color: liked ? "red" : "white"} } />
+ </ButtonNoWidth>
+ </LikeCounter>
+ </Footer>
+ </Description>
+
+ </CardReaDiv>
+
{
- <div className={`slideContentLinkAfterActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
- <div className="text" >
- {SlideAnimationContent()}
- </div>
- </div>
+ props.authorID === state.currentUser.id ?
+ (
+ <CardReaFooter className={`${props.contrast}BackColor`} style={{ justifyContent: "space-between" }}> {/*renders following/unfollow and follow button*/}
+ <Grid container>
+ <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}>
+ {
+ privacy === 'private' &&
+ <LockIcon style={{ color: "#666" }} />
+ }
+ </Grid>
+ <Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}>
+ <ColCardOwnerOptions
+ contrast={props.contrast}
+ id={props.id}
+ changeColName={changeColName}
+ changeColPrivacy={changeColPrivacy}
+ removeColl={props.removeColl}
+ />
+ </Grid>
+ </Grid>
+ </CardReaFooter>
+ )
+ :
+ (
+ <CardReaFooter className={`${props.contrast}BackColor`}> {/*renders following/unfollow and follow button*/}
+ {
+ userFollowingCol ?
+ (
+ [
+ RenderFollowingButton()
+ ]
+ )
+ :
+ (
+ [
+ RenderFollowButton()
+ ]
+ )
+ }
+ <ColCardPublicOptions
+ contrast={props.contrast}
+ id={props.id}
+ userFollowingCol={userFollowingCol}
+ handleLike={handleLike}
+ handleFollow={handleFollow}
+ liked={liked}
+ handleLogin={handleLogin}
+ currentUserId={state.currentUser.id}
+ />
+ </CardReaFooter>
+ )
}
- </Header>
- </Link>
-
- <Description> {/*renders rating, number of learning objects and likes count*/}
- {
- props.authorID !== state.currentUser.id &&
- <Rating
- name="customized-empty"
- value={props.rating}
- readOnly
- style={{ color: "#666" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
- />
- }
-
- <Footer>
- <Type>
- <FolderIcon />
- <span style={{ fontWeight: "bold" }}>{props.collections ? props.collections.length : 0} </span>
- <span>{props.collections ? props.collections.length !== 1 ? "Recursos" : "Recurso" : 0}</span>
- </Type>
- <LikeCounter>
- <span>{likesCount}</span>
- <ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
- </ButtonNoWidth>
- </LikeCounter>
- </Footer>
- </Description>
-
- </CardReaDiv>
-
- {
- props.authorID === state.currentUser.id ?
- (
- <CardReaFooter style={{ justifyContent: "space-between" }}> {/*renders following/unfollow and follow button*/}
- <Grid container>
- <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}>
- {
- privacy === 'private' &&
- <LockIcon style={{ color: "#666" }} />
- }
- </Grid>
- <Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}>
- <ColCardOwnerOptions
- id={props.id}
- changeColName={changeColName}
- changeColPrivacy={changeColPrivacy}
- removeColl={props.removeColl}
- />
- </Grid>
- </Grid>
- </CardReaFooter>
- )
- :
- (
- <CardReaFooter> {/*renders following/unfollow and follow button*/}
- {
- userFollowingCol ?
- (
- [
- RenderFollowingButton()
- ]
- )
- :
- (
- [
- RenderFollowButton()
- ]
- )
- }
- <ColCardPublicOptions
- id={props.id}
- userFollowingCol={userFollowingCol}
- handleLike={handleLike}
- handleFollow={handleFollow}
- liked={liked}
- handleLogin={handleLogin}
- currentUserId={state.currentUser.id}
- />
- </CardReaFooter>
- )
- }
-
- </CardDiv>
- </StyledCard>
- </>
- )
+
+ </CardDiv>
+ </StyledCard>
+ </>
+ )
}
const SlideContentDiv = styled.div`
- background-color : #7e57c2;
padding : 10px;
width : 272.5px;
height : 230px;
@@ -367,7 +368,6 @@ const CardReaFooter = styled.div`
display : flex;
justify-content : center;
align-items : center;
- border-top : 1px solid #e5e5e5;
.MuiSvgIcon-root {
font-family: 'Material Icons';
@@ -402,8 +402,6 @@ const StyledGrid = styled(Grid)`
height : 136px;
width 130px;
background : #f9f9f9;
- border : 1px solid #f4f4f4;
- border-color : #f4f4f4;
}
`
@@ -423,10 +421,7 @@ const Description = styled.div`
padding : 15px;
`
const FollowButton = styled(Button)`
- border : 2px solid #503096 !important;
- border-radius : 5px !important;
margin : 10px !important;
- color :#503096 !important;
min-width : 150px !important;
min-height : 36px !important;
text-align : center !important;
@@ -441,22 +436,14 @@ const FollowButton = styled(Button)`
white-space : nowrap !important;
font-weight: 500;
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
-
- }
-
`
const FollowingButton = styled(Button)`
- border : 2px solid #503096 !important;
- border-radius : 5px !important;
margin : 10px !important;
- color :#fff !important;
min-width : 150px !important;
min-height : 36px !important;
text-align : center !important;
vertical-align : middle !important;
- background-color : #503096 !important;
+
text-transform : uppercase !important;
font-family : inherit !important;
overflow : hidden !important;
@@ -466,10 +453,4 @@ const FollowingButton = styled(Button)`
white-space : nowrap !important;
font-weight: 500;
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- color : #503096 !important;
- box-shadow : none !important;
- }
-
`
diff --git a/src/Components/ExpandedMaterials.js b/src/Components/ExpandedMaterials.js
index 603ec4ed4f8053d3c72d8ed36527fec9cb221bc9..fa2dec028df55b29c81435ca9064b6537ca4b4ae 100644
--- a/src/Components/ExpandedMaterials.js
+++ b/src/Components/ExpandedMaterials.js
@@ -24,7 +24,7 @@ const ExpandedMaterial = (props) => {
const classes = useStyles();
return (
- <Paper elevation={3} style={{ backgroundColor: "#444444", padding: "20px" }}>
+ <Paper className={`${props.contrast}Border`} elevation={3} style={ props.contrast === "" ? {backgroundColor: "#444444", padding: "20px" } : {backgroundColor: "black", padding: "20px" }}>
<Grid container direction="row" spacing={2}>
<Grid item direction="column" xs={12} md={4}>
<Grid item>
@@ -40,7 +40,7 @@ const ExpandedMaterial = (props) => {
{
material.tags.map((tag, index) => {
return (
- <Chip color="default" label={tag.name} key={index} style={{ padding: "0.5px" }} />
+ <Chip className={`${props.contrast}Text ${props.contrast}BackColor`} label={tag.name} key={index} style={{ padding: "0.5px" }} />
)
})
}
@@ -55,7 +55,7 @@ const ExpandedMaterial = (props) => {
</DevelopedByDiv>
<SizedHeightBox3 />
<StyledLink to={`/colecao?colecao=${material.id}`}>
- <Button variant="contained" color="secondary">
+ <Button className={`${props.contrast}LinkColor ContrastText`} variant="contained" style={props.contrast === "" ? {background: "#e8224f"} : {background: "black"}}>
Ver todos
</Button>
</StyledLink>
@@ -73,18 +73,21 @@ const ExpandedMaterial = (props) => {
<Grid container direction="row" justify="center" alignItems="center" spacing={3}>
<Grid item md={4}>
<TopicCard
+ contrast={props.contrast}
topic={material.topics[0]}
colecao_id={material.id}
/>
</Grid>
<Grid item md={4}>
<TopicCard
+ contrast={props.contrast}
topic={material.topics[1]}
colecao_id={material.id}
/>
</Grid>
<Grid item md={4}>
<TopicCard
+ contrast={props.contrast}
topic={material.topics[2]}
colecao_id={material.id}
/>
diff --git a/src/Components/GuardarModal.js b/src/Components/GuardarModal.js
index 2526d20c997cfd6b9433d4b414a282e6968ab384..618f3c0c2142afb195dcf20078cc37f1abbc1b20 100644
--- a/src/Components/GuardarModal.js
+++ b/src/Components/GuardarModal.js
@@ -40,7 +40,7 @@ function CloseModalButton(props) {
)
}
-export default function ReportModal(props) {
+export default function GuardarModal(props) {
const { state } = useContext(Store)
const [collsArr, setcolls] = useState([])
const [loading, toggleLoading] = useState(true)
@@ -132,7 +132,7 @@ export default function ReportModal(props) {
onRendered={() => { getCols() }}
>
<Fade in={props.open}>
- <Container>
+ <Container className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}>
<Header>
<span style={{ width: "32px" }} />
<h2>Guardar recurso</h2>
@@ -141,7 +141,7 @@ export default function ReportModal(props) {
<Content style={{ paddingTop: "0" }}>
<ResourceInfo>
<img src={apiDomain + props.thumb} alt="thumbnail recurso" />
- <div className="text">
+ <div>
<h3>{props.title}</h3>
</div>
</ResourceInfo>
@@ -188,20 +188,20 @@ export default function ReportModal(props) {
}
<h5>{collection.name}</h5>
</div>
- <GuardarBotao onClick={() => { postToCol(collection.id) }}>GUARDAR</GuardarBotao>
+ <GuardarBotao className={`${props.contrast}LinkColor ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { postToCol(collection.id) }}>GUARDAR</GuardarBotao>
</div>
)
}
</div>
</ChooseCol>
- <div style={{ display: "flex", justifyContent: "center" }}>
- <CriarColButton onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
- </div>
</>
)
)
}
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <CriarColButton className={`${props.contrast}LinkColor ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
+ </div>
</ChooseColContainer>
)
}
@@ -214,12 +214,7 @@ export default function ReportModal(props) {
}
const GuardarBotao = styled(Button)`
- &:hover {
- background-color : #503096 !important;
- }
max-height : 36px !important;
- background-color : #673ab7 !important;
- color : #fff !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
padding-left : 32px !important;
padding-right : 32px !important;
@@ -278,10 +273,8 @@ const ChooseCol = styled.div`
const CriarColButton = styled(Button)`
width : 200px !important;
margin-top : 16px !important;
- background-color : #673ab7 !important;
margin-left : auto !important;
margin-right : auto !important;
- color : #fff !important;
font-weight : 600 !important;
box-shadow : !important;
padding-left : 0 2px 5px 0 rgba(0,0,0,.26) 16px !important;
@@ -291,7 +284,6 @@ const CriarColButton = styled(Button)`
const ChooseColContainer = styled.div`
display : flex;
flex-direction : column;
- color : #666;
.no-cols {
align-self : center;
@@ -304,7 +296,6 @@ const ChooseColContainer = styled.div`
const ResourceInfo = styled.div`
margin-top : 0;
- background-color : #f4f4f4;
overflow : hidden;
border-radius : 5px;
display : flex;
@@ -364,7 +355,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -394,7 +384,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 : white;
align : center;
display : flex;
flex-direction : column;
diff --git a/src/Components/MaterialCard.js b/src/Components/MaterialCard.js
index 8f18cd3c03c35954a3a5d7b9f491a4c81dcd97b0..5639bf802a201ff8210a3921160c3200d597639e 100644
--- a/src/Components/MaterialCard.js
+++ b/src/Components/MaterialCard.js
@@ -41,40 +41,41 @@ export default function MaterialCard(props) {
const width = window.innerWidth;
return (
- <Card>
+ <Card className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}Text`}>
<img src={thumb} alt="thumbnail do recurso" />
- <CardContent style={{ height: "60px", textAlign: "left", paddingBottom: "0px", width: "100%" }}>
- <Title>
- {props.name}
- </Title>
- </CardContent>
- <CardActions>
- <Grid container direction="column" justify="flex-start" alignItems="flex-start" style={{ marginLeft: "5px" }}>
- <Grid item>
- <Rating
- name="customized-empty"
- value={props.score}
- precision={0.5}
- style={{ color: "#666" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
- readOnly
- />
+ <div>
+ <CardContent style={{ height: "60px", textAlign: "left", paddingBottom: "0px", width: "100%" }}>
+ <Title>
+ {props.name}
+ </Title>
+ </CardContent>
+ <CardActions>
+ <Grid container direction="column" justify="flex-start" alignItems="flex-start" style={{ marginLeft: "5px" }}>
+ <Grid item>
+ <Rating
+ style={ props.contrast === "" ? { color: "#666" } : { color: "white" }}
+ name="customized-empty"
+ value={props.score}
+ precision={0.5}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ readOnly
+ />
+ </Grid>
+ <Grid container direction="row" alignItems="center">
+ <Library style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }} />
+ <SizedBox />
+ <Typography variant="body2" component="p" style={{ overflow: "hidden", fontSize: "0.8em" }}>
+ {props.modules.length} módulos
+ </Typography>
+ </Grid>
</Grid>
- <Grid container direction="row" alignItems="center">
- <Library style={{ color: "#e81f4f" }} />
- <SizedBox />
- <Typography variant="body2" color="textSecondary" component="p" style={{ overflow: "hidden", fontSize: "0.8em" }}>
- {props.modules.length} módulos
- </Typography>
- </Grid>
- </Grid>
- </CardActions>
- <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
+ </CardActions>
+ </div>
+ <CardActions className={`${props.contrast}LinkColor`} style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
{
width <= 767 ?
- <Link style={{textDecoration : "none"}} to={`/colecao?colecao=${props.id}`}>
+ <Link className={`${props.contrast}LinkColor`} to={`/colecao?colecao=${props.id}`}>
<Button
- color="secondary"
endIcon={<ExpandMoreRoundedIcon />}
>
@@ -83,7 +84,7 @@ export default function MaterialCard(props) {
</Link>
:
<Button
- color="secondary"
+ className={`${props.contrast}LinkColor`}
endIcon={<ExpandMoreRoundedIcon />}
onClick={HandleButtonPressed}
>
@@ -101,7 +102,6 @@ const SizedBox = styled.div`
`
const Title = styled(Typography)`
font-weight: 500;
- color: rgb(102, 102, 102);
font-size: 0.9em;
margin-left: 10px;
margin-right: 10px;
diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js
index 938acffdb8da262fad4c94c734ac320bd9fc631f..064b5c3fa2ba80bb394cc20000bedf1df25ba045 100644
--- a/src/Components/MobileDrawerMenu.js
+++ b/src/Components/MobileDrawerMenu.js
@@ -152,7 +152,7 @@ export default function MobileDrawerMenu(props) {
src={getUserAvatar()}
/>
</div>
- <span className="text">Minha área</span>
+ <span className="Text">Minha área</span>
</MyArea>
{
minhaArea.map((item, index) =>
diff --git a/src/Components/Notifications.js b/src/Components/Notifications.js
index df3c1aeff5078ce3219d64f1db82e3ee9eda7174..736c6d4ca22ab2aadd606b1ff808b28993aa057e 100644
--- a/src/Components/Notifications.js
+++ b/src/Components/Notifications.js
@@ -208,6 +208,7 @@ export default function Notification(props) {
{
notifications.map((notification) =>
(notification.viewed === false) &&
+ (notification.recipient_type !== "NilClass") &&
<ActivityListItem
contrast={state.contrast}
onMenuBar={true}
diff --git a/src/Components/ReportColecaoForm.js b/src/Components/ReportColecaoForm.js
index 37c4a77336c79e8f58496143cbe8840725d7c4da..747a0c27bed2fd8105193f764b9314d059651080 100644
--- a/src/Components/ReportColecaoForm.js
+++ b/src/Components/ReportColecaoForm.js
@@ -84,7 +84,7 @@ export default function ReportColecaoForm (props) {
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} />
+ <FormControlLabel classes={{label: `${props.contrast}Text`}} value={option.value} control={<StyledRadio/>} label={option.text} />
)
}
</RadioGroup>
diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js
index 079ca75fd3dd6454d6e26263767ac33d3ad3b556..78f0cb8bda9abb1971e783f8ed636f049d921b67 100644
--- a/src/Components/ReportModal.js
+++ b/src/Components/ReportModal.js
@@ -66,15 +66,15 @@ export default function ReportModal (props) {
switch (formType) {
case 'colecao':
return (
- <ReportColecaoForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+ <ReportColecaoForm contrast={props.contrast} handleClose={props.handleClose} handleSubmit={handleSubmit}/>
)
case 'recurso':
- return (
- <ReportRecursoForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+ return (
+ <ReportRecursoForm contrast={props.contrast} handleClose={props.handleClose} handleSubmit={handleSubmit}/>
)
default:
return (
- <ReportUserForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+ <ReportUserForm contrast={props.contrast} handleClose={props.handleClose} handleSubmit={handleSubmit}/>
)
}
}
@@ -97,7 +97,7 @@ export default function ReportModal (props) {
}}
>
<Fade in={props.open}>
- <ReportContainer>
+ <ReportContainer className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}>
<Header>
<span style={{width:"32px"}}/>
<h2>O que está acontecendo?</h2>
@@ -134,7 +134,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -163,7 +162,6 @@ const StyledModal = styled(Modal)`
const ReportContainer = styled.div`
box-sizing : border-box;
- background-color : white;
max-width : none;
align : center;
display : flex;
diff --git a/src/Components/ReportRecursoForm.js b/src/Components/ReportRecursoForm.js
index a1c7312713319d9b4320cf4bc844d3c160c5ed79..e811500d1ceadc32accc29287863f31c71781893 100644
--- a/src/Components/ReportRecursoForm.js
+++ b/src/Components/ReportRecursoForm.js
@@ -81,7 +81,7 @@ export default function ReportRecursoForm (props) {
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} />
+ <FormControlLabel classes={{label: `${props.contrast}Text`}} value={option.value} control={<StyledRadio/>} label={option.text} />
)
}
</RadioGroup>
@@ -101,8 +101,8 @@ export default function ReportRecursoForm (props) {
/>
<ButtonsDiv>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar type="submit">ENVIAR</ButtonEnviar>
+ <ButtonCancelar className={`${props.contrast}LinkColor`} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar className={`${props.contrast}LinkColor`} type="submit">ENVIAR</ButtonEnviar>
</ButtonsDiv>
</form>
)
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index edc957a0f3c60886db5ec9a553b09e400eff8163..98d197309180ba84e5adde0486d4bb1071785908 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -17,6 +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/>.*/
import React, { useState, useEffect } from 'react';
+import "./carousel.css";
import Card from '@material-ui/core/Card';
import { apiDomain } from '../env';
import ResourceCardOptions from './ResourceCardOptions'
@@ -100,9 +101,9 @@ export default function ResourceCardFunction(props) {
handleSuccessfulLogin(false);
}
- const SlideAnimationContent = () => {
+ const SlideAnimationContent = (contrast) => {
return (
- <SlideContentDiv>
+ <SlideContentDiv style={contrast === '' ? {backgroundColor: "#ff9226"} : {backgroundColor: "inherit"}}>
<div style={{ padding: 7 }}>
<HeaderContainer container="row" justify="flex-start" alignItems="center" >{/*marginBottom:10px*/}
<AvatarDiv item xs={2}>
@@ -113,13 +114,13 @@ export default function ResourceCardFunction(props) {
<p>{props.author}</p>
</EnviadoPor>
</HeaderContainer>
- {
+ { //className={`${props.contrast}BackColor`} ---
props.tags ?
<TagContainer container direction="row">
{
props.tags.map((tag) =>
<Grid item key={tag.id}>
- <span >{tag.name}</span>
+ <span className={`${props.contrast}BackColor ${props.contrast}Text`}>{tag.name}</span>
</Grid>
)
}
@@ -144,7 +145,7 @@ export default function ResourceCardFunction(props) {
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
<StyledCard>
- <CardDiv>
+ <CardDiv className={`${props.contrast}Text ${props.contrast}Border`}>
<CardReaDiv>
<Link to={props.href}>
<Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
@@ -153,16 +154,16 @@ export default function ResourceCardFunction(props) {
</div>
{
<div className={`slideContentLinkAfterActive${slideIn}`}>
- <div className="text" >
- {SlideAnimationContent()}
+ <div className={`${props.contrast}Text ${props.contrast}BackColor`} style={{ width: "100%" }}>
+ {SlideAnimationContent(props.contrast)}
</div>
</div>
}
</Header>
</Link>
- <Description>
- <Link to={props.href} className="text" style={{ height: '45px' }}> {/*add link to learningObject*/}
- <Title>
+ <Description className={`${props.contrast}BackColor`}>
+ <Link to={props.href} className={`${props.contrast}Text`} style={{ height: '45px', width: "100%" }}> {/*add link to learningObject*/}
+ <Title className={`${props.contrast}LinkColor`}>
{props.title}
</Title>
</Link>
@@ -170,8 +171,7 @@ export default function ResourceCardFunction(props) {
name="customized-empty"
value={props.rating}
readOnly
- style={{ color: "#666" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit"/>}
/>
<Footer>
<Type>
@@ -181,18 +181,19 @@ export default function ResourceCardFunction(props) {
<LikeCounter>
<span>{likesCount}</span>
<ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
+ <FavoriteIcon className={`${props.contrast}LinkColor`} style={ props.contrast === "" ? {color: liked ? "red" : "#666"} : {color: liked ? "red" : "white"} } />
</ButtonNoWidth>
</LikeCounter>
</Footer>
</Description>
</CardReaDiv>
- <CardReaFooter>
+ <CardReaFooter className={`${props.contrast}BackColor`}>
<div style={{ display: "flex", height: "100%" }}>
- <ButtonGuardarColecao thumb={props.thumbnail} title={props.title} learningObjectId={props.id}
+ <ButtonGuardarColecao contrast={props.contrast} thumb={props.thumbnail} title={props.title} learningObjectId={props.id}
/>
</div>
<ResourceCardOptions
+ contrast={props.contrast}
learningObjectId={props.id}
downloadableLink={props.downloadableLink}
thumb={props.thumbnail}
@@ -217,7 +218,6 @@ export const TagContainer = styled(Grid)`
${'' /* border : 2px solid red; */}
span {
word-wrap: break-word;
- background-color : #fff;
display : flex;
justify-content : center;
align-items : center;
@@ -228,7 +228,6 @@ export const TagContainer = styled(Grid)`
overflow : hidden;
padding : 1px 8px;
border-radius : 10px;
- color : #666;
font-size : 11px;
}
`
@@ -263,7 +262,6 @@ export const AvatarDiv = styled(Grid)`
`
const SlideContentDiv = styled.div`
- background-color : #ff9226;
${'' /* padding : 10px; */}
width : 272.5px;
height : 189px;
@@ -308,7 +306,6 @@ export const LikeCounter = styled.div`
.btn-like {
padding : 0 !important;
- background-color : #fff !important;
border : 0 !important;
min-width : min-content;
}
@@ -346,7 +343,6 @@ export const Footer = styled.div`
const Description = styled.div`
display : flex;
flex : 1;
- background-color : #fff;
flex-direction : column;
justify-content: space-between;
padding : 15px;
@@ -395,7 +391,6 @@ export const CardReaDiv = styled.div`
`
export const CardDiv = styled.div`
- background-color : #fff;
text-align : start;
font-family : 'Roboto', sans serif;
color : #666;
@@ -403,7 +398,7 @@ export const CardDiv = styled.div`
export const StyledCard = styled(Card)`
width : 272.5px;
- max-height : 380px;
+ min-height : 380px;
margin-top : 10px;
margin-bottom : 10px;
${'' /* max-width : 345px; */}
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index 2e89a35a708663188a9e843c3fbb08c8de6deaff..e8689f0b35891633aa99ee9eede8584780197b7d 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -35,7 +35,6 @@ import GuardarModal from './GuardarModal'
import ShareModal from './ShareModal'
import SnackbarComponent from './SnackbarComponent'
import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
-import Tooltip from '@material-ui/core/Tooltip';
import { getRequest } from './HelperFunctions/getAxiosConfig'
export default function ResourceCardOptions(props) {
@@ -116,43 +115,40 @@ export default function ResourceCardOptions(props) {
<>
<React.Fragment>
- <ReportModal open={reportModal} handleClose={() => handleModalReportar(false)}
+ <ReportModal contrast={props.contrast} open={reportModal} handleClose={() => handleModalReportar(false)}
form="recurso" complainableId={props.learningObjectId}
complainableType={"LearningObject"}
{...props}
/>
- <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
+ <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
/>
- <ShareModal open={shareOpen} handleClose={() => { toggleShare(false) }}
+ <ShareModal contrast={props.contrast} open={shareOpen} handleClose={() => { toggleShare(false) }}
thumb={props.thumb} title={props.title} link={getShareablePageLink()}
/>
<SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => { toggleSnackbar(false) }} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
/>
<div style={{ fontSize: "12px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
- <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{ color: "#666" }}>
- <MoreVertIcon style={{ color: "#666" }} />
+ <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
+ <MoreVertIcon className={`${props.contrast}LinkColor`} />
</ButtonNoWidth>
<Menu
+ className={`${props.contrast}Text`}
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
- >
- <Tooltip title="Não preserva filtro" arrow>
- <StyledMenuItem onClick={handleClose}>
- <Link to={"/recurso/" + props.learningObjectId}>
- <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
- </Link>
- </StyledMenuItem>
- </Tooltip>
+ >
+ <StyledMenuItem onClick={handleClose}>
+ <Link to={"/recurso/" + props.learningObjectId}>
+ <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+ </Link>
+ </StyledMenuItem>
- <Tooltip title="Preserva filtro" arrow>
- <StyledMenuItem onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}>
- <ListItemIcon><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia
- </StyledMenuItem>
- </Tooltip>
+ <StyledMenuItem onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}>
+ <ListItemIcon><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia
+ </StyledMenuItem>
{
props.downloadableLink &&
@@ -185,9 +181,7 @@ const ButtonNoWidth = styled(Button)`
min-width : 24px !important;
max-height : 24px !important;
padding : 0 !important;
- background-color : #fff !important;
color : #a5a5a5 !important;
- border : 0 !important;
.MuiButton-root {
width : 24px !important;
@@ -205,12 +199,7 @@ const ButtonNoWidth = styled(Button)`
`
const StyledMenuItem = styled(MenuItem)`
- color : #666 !important;
.MuiSvgIcon-root {
vertical-align : middle !important;
}
- a {
- text-decoration : none !important;
- color : #666 !important;
- }
`
diff --git a/src/Components/ShareModal.js b/src/Components/ShareModal.js
index 93eb4828efc78e5cf0b8216caa8297d3c5c4331c..5ed5c3d6aaef90a43aabc4dd021fa5c4f2cae739 100644
--- a/src/Components/ShareModal.js
+++ b/src/Components/ShareModal.js
@@ -29,7 +29,7 @@ import Twitter from '../img/twitter.svg'
import LinkIcon from '../img/link_icon.svg'
import CloseModalButton from './CloseModalButton.js'
-export default function ReportModal (props) {
+export default function ShareModal (props) {
const textAreaRef = useRef(props.link);
const copyToClipboard = (e) => {
@@ -54,7 +54,7 @@ export default function ReportModal (props) {
}}
>
<Fade in={props.open}>
- <Container>
+ <Container className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}>
<Header>
<span style={{width:"32px"}}/>
<h2>Compartilhar este recurso</h2>
@@ -63,11 +63,13 @@ export default function ReportModal (props) {
<Content style={{paddingTop : "0"}}>
<ResourceInfo>
<img src={apiDomain + props.thumb} alt="thumbnail recurso"/>
- <div className="text">
+ <div>
<strong>{props.title}</strong>
- <span>{props.link}</span>
</div>
</ResourceInfo>
+ <div style={{marginTop: "10px"}}>
+ <span>{props.link}</span>
+ </div>
<ShareInfo>
<Grid container style={{paddingRight : "15px", paddingLeft : "15px"}}>
@@ -77,7 +79,7 @@ export default function ReportModal (props) {
href={"https://www.facebook.com/sharer/sharer.php?u=" + props.link}
rel="noreferrer"
target="_blank">
- <ShareButton>
+ <ShareButton className={`${props.contrast}LinkColor`}>
<img src={Facebook} alt="facebook-logo"/>
<p>FACEBOOK</p>
</ShareButton>
@@ -90,7 +92,7 @@ export default function ReportModal (props) {
href={"https://www.twitter.com/intent/tweet?url=" + props.link}
rel="noreferrer"
target="_blank">
- <ShareButton>
+ <ShareButton className={`${props.contrast}LinkColor`}>
<img src={Twitter} alt="twitter-logo"/>
<p>TWITTER</p>
</ShareButton>
@@ -101,7 +103,7 @@ export default function ReportModal (props) {
<Grid item xs={4}>
{
document.queryCommandSupported('copy') &&
- <ShareButton onClick={copyToClipboard}>
+ <ShareButton className={`${props.contrast}LinkColor`} onClick={copyToClipboard}>
<img src={LinkIcon} alt="link-icon"/>
<p>COPIAR LINK</p>
<textarea ref={textAreaRef} value={props.link} readOnly style={{height: "0", position: "absolute",zIndex: "-1"}}/>
@@ -143,12 +145,10 @@ const ShareButton = styled(Button)`
const ShareInfo = styled.div`
padding-top : 20px;
- color : #000;
`
const ResourceInfo = styled.div`
margin-top : 0;
- background-color : #f4f4f4;
overflow : hidden;
border-radius : 5px;
display : flex;
@@ -203,7 +203,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -223,7 +222,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 : white;
align : center;
display : flex;
flex-direction : column;
diff --git a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
index 4decca656c7fe5d4f0ea87a57dbf39b3f391692d..215a186deb812fa2af264fc24a96d68a27c58f54 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
@@ -187,6 +187,7 @@ export default function TabPanelAtividades(props) {
<List height={400} width={300}>
{
notifications.map((notification, id) =>
+ (notification.recipient_type !== "NilClass") &&
<ActivityListItem
contrast={props.contrast}
key={id}
diff --git a/src/Components/TopicCard.js b/src/Components/TopicCard.js
index 1f3bb10faef2737441cea49be8b331a26edf8a21..530b5bcc3cf7565b68690a556f8f9124ae34bdd1 100644
--- a/src/Components/TopicCard.js
+++ b/src/Components/TopicCard.js
@@ -28,22 +28,20 @@ import { Link } from 'react-router-dom';
export default function MaterialCard(props) {
console.log(props);
const thumb = require(`../../public/${props.topic.img}`)
-
+//className={`${props.contrast}BackColor`}
return (
- <Card style={{ maxHeight: "100%", maxWidth: "300px" }}>
+ <Card className={`${props.contrast}BackColor ${props.contrast}Border`} style={{ maxHeight: "100%", maxWidth: "300px" }}>
<img style={{ maxHeight: "100%", maxWidth: "100%" }} src={thumb} alt="thumbnail do recurso" />
- <CardContent style={{ height: "50px" }}>
+ <CardContent className={`${props.contrast}Text`} style={{ height: "50px" }}>
<Title>
- <BoldTitle>
- {props.topic.pre_title}
- </BoldTitle>
+ {props.topic.pre_title}
{props.topic.title}
</Title>
</CardContent>
- <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
- <StyledLink to={"topico?colecao=" + props.colecao_id + "&topico=" + props.topic.id}>
+ <CardActions style={{ justifyContent: "center" }}>
+ <StyledLink className={`${props.contrast}LinkColor`} to={"topico?colecao=" + props.colecao_id + "&topico=" + props.topic.id}>
<Button
- color="secondary"
+ style={props.contrast === "" ? {color: "#e8224f"} : {color: "inherit"}}
>
Ver módulo
</Button>
@@ -55,7 +53,6 @@ export default function MaterialCard(props) {
const Title = styled(Typography)`
font-weight: 500;
- color: rgb(102, 102, 102);
font-size: 0.9em;
margin-left: 10px;
margin-right: 10px;
@@ -65,10 +62,6 @@ const Title = styled(Typography)`
-webkit-box-orient: vertical;
overflow: hidden;
`
-const BoldTitle = styled.span`
- font-weight: bold;
-`
const StyledLink = styled(Link)`
- text-decoration: none !important;
color: inherit !important;
`
\ No newline at end of file
diff --git a/src/Components/carousel.css b/src/Components/carousel.css
index 9c7ea98633ce9e85948d544465255bcf47760ba9..4d9cbe4cba581322b58ad62c86f9dd23470f16bf 100644
--- a/src/Components/carousel.css
+++ b/src/Components/carousel.css
@@ -16,33 +16,35 @@ 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/>.*/
-.carousel .control-dots{
- position: inherit !important;
-}
-.carousel .control-arrow {
- background: orange !important;
- /* position: relative !important; */
-
- -webkit-box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
- box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
+.carousel .slide {
+ background-color: inherit !important;
+}
+.carousel .control-dots{
+ position: inherit !important;
+}
+.carousel .control-arrow {
+ background: orange !important;
+ /* position: relative !important; */
+ -webkit-box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
+ box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
}
.MuiPaper-elevation1-209{
- box-shadow: none !important;
+ box-shadow: none !important;
}
.carousel.carousel-slider .control-arrow {
- top: 35%!important;
- bottom: 50%!important;
- border-radius: 100%!important;
- opacity: 1!important;
- text-align: center;
- vertical-align: middle;
- height: 50px;
- width: 50px;
+ top: 35%!important;
+ bottom: 50%!important;
+ border-radius: 100%!important;
+ opacity: 1!important;
+ text-align: center;
+ vertical-align: middle;
+ height: 50px;
+ width: 50px;
}