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..68a6d2742ad5256c6fe717a85225593f50ff5df5 100644 --- a/src/Components/ButtonGuardarColecao.js +++ b/src/Components/ButtonGuardarColecao.js @@ -56,10 +56,12 @@ 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`} + style={props.contrast === "" ? {border: "2px solid #f07e05", borderRadius : "5px", color :"#f07e05"} : {border: "1px solid white", borderRadius : "5px", color :"#f07e05"}} + > <CreateNewFolderIcon /> GUARDAR </StyledButton> </> @@ -67,17 +69,15 @@ export default function ButtonGuardarColecao(props) { } const StyledButton = styled(Button)` - color : #666 !important; background-color : transparent !important; font-size : 14px important; font-weight : 500 !important; .MuiSvgIcon-root { font-size : 24px; - color : inherit; } &:hover { - color: rgb(107, 35, 142) !important; + color: rgb(107, 35, 142); } ` diff --git a/src/Components/ColCardOwnerOptions.js b/src/Components/ColCardOwnerOptions.js index a075780622f76c453592afb7d07b84de6ccd3df3..3199c61edb4b9487cc18f6f041771971adbdfdeb 100644 --- a/src/Components/ColCardOwnerOptions.js +++ b/src/Components/ColCardOwnerOptions.js @@ -57,7 +57,7 @@ export default function ColCardOwnerOptions (props) { /> <div style={{fontSize: "12px"}}> - <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}> + <Button className={`${props.contrast}LinkColor`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}> OPÇÕES <MoreVertIcon style={{color : "inherit"}}/> </Button> <Menu @@ -67,18 +67,18 @@ export default function ColCardOwnerOptions (props) { open={Boolean(anchorEl)} onClose={handleClose} > - <StyledMenuItem> + <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast}> <Link to={"/colecao-do-usuario/" + props.id}> - <ListItemIcon><OpenIcon /></ListItemIcon>Abrir + <ListItemIcon className={`${props.contrast}LinkColor`}><OpenIcon /></ListItemIcon>Abrir </Link> </StyledMenuItem> - <StyledMenuItem onClick={() => {toggleModalEditar(true)}}> - <ListItemIcon><CreateIcon /></ListItemIcon>Editar + <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {toggleModalEditar(true)}}> + <ListItemIcon className={`${props.contrast}LinkColor`}><CreateIcon /></ListItemIcon>Editar </StyledMenuItem> - <StyledMenuItem onClick={() => {toggleModalExcluir(true)}} > - <ListItemIcon><DeleteForeverIcon /></ListItemIcon>Excluir + <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {toggleModalExcluir(true)}} > + <ListItemIcon className={`${props.contrast}LinkColor`}><DeleteForeverIcon /></ListItemIcon>Excluir </StyledMenuItem> @@ -89,13 +89,12 @@ export default function ColCardOwnerOptions (props) { } export const StyledMenuItem = styled(MenuItem)` - color : #666 !important; + background-color: ${props => props.contrast === "" ? "white" : "black"} !important; .MuiSvgIcon-root { vertical-align : middle !important; } a { - text-decoration : none !important; - color : #666 !important; + color : inherit !important; } ` diff --git a/src/Components/ColCardPublicOptions.js b/src/Components/ColCardPublicOptions.js index 2b58c70f58000d4014fb53330c8901a65cbfc1b3..4e014419bfb43a8b7e256edf43781564cfd9fbe8 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" @@ -71,9 +72,9 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, open={Boolean(anchorEl)} onClose={handleClose} > - <StyledMenuItem> + <StyledMenuItem className={`${contrast}LinkColor`} contrast={contrast}> <Link to={"/colecao-do-usuario/" + id}> - <ListItemIcon> + <ListItemIcon className={`${contrast}LinkColor`}> <OpenIcon /> </ListItemIcon> Abrir @@ -81,21 +82,23 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, </StyledMenuItem> <StyledMenuItem + className={`${contrast}LinkColor`} + contrast={contrast} onClick={() => window.open("/colecao-do-usuario/" + id, "_blank") } > - <ListItemIcon> + <ListItemIcon className={`${contrast}LinkColor`}> <OpenInBrowserIcon /> </ListItemIcon> Abrir em nova guia </StyledMenuItem> - <StyledMenuItem onClick={handleLike}> - <ListItemIcon> + <StyledMenuItem className={`${contrast}LinkColor`} contrast={contrast} onClick={handleLike}> + <ListItemIcon className={`${contrast}LinkColor`}> { liked ? - <FavoriteIcon style={{ fill: 'red' }} /> : <FavoriteIcon style={{ fill: '#666' }} /> + <FavoriteIcon /> : <FavoriteIcon /> } </ListItemIcon> { @@ -104,8 +107,8 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, } </StyledMenuItem> - <StyledMenuItem onClick={handleFollow}> - <ListItemIcon> + <StyledMenuItem className={`${contrast}LinkColor`} contrast={contrast} onClick={handleFollow}> + <ListItemIcon className={`${contrast}LinkColor`}> { userFollowingCol ? <ExitToAppIcon /> : <AddIcon /> @@ -118,6 +121,8 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, </StyledMenuItem> <StyledMenuItem + className={`${contrast}LinkColor`} + contrast={contrast} onClick={() => { if (currentUserId) handleReportModal(true); @@ -125,7 +130,7 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, handleLogin() }} > - <ListItemIcon> + <ListItemIcon className={`${contrast}LinkColor`}> <ReportProblemIcon /> </ListItemIcon> Reportar @@ -137,13 +142,11 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, } export const StyledMenuItem = styled(MenuItem)` - color: #666 !important; - - .MuiSvgIcon-root { - vertical-align: middle !important; - } - a { - text-decoration: none !important; - color: #666 !important; - } + background-color: ${props => props.contrast === "" ? "white" : "black"} !important; + .MuiSvgIcon-root { + vertical-align: middle !important; + } + a { + color: inherit !important; + } `; diff --git a/src/Components/CollectionAuthor.js b/src/Components/CollectionAuthor.js index c6c299cf08bba817e4a14e684609084840c44f4b..3d5c42318f5db49f869d0b462d24879b64c4607d 100644 --- a/src/Components/CollectionAuthor.js +++ b/src/Components/CollectionAuthor.js @@ -30,19 +30,20 @@ export default function CollectionAuthor(props) { justify="center" alignItems="center"> {props.imgsrc ? - <UserLink + <Link to={`/usuario-publico/${props.author_id}`} + contrast={props.contrast} > <UserAvatar src={props.imgsrc} /> - </UserLink> + </Link> : <CircularProgress color="secondary" /> } - <InfoText>Coleção organizada por:</InfoText> + <InfoText contrast={props.contrast}>Coleção organizada por:</InfoText> {props.name ? - <UserLink to={`/usuario-publico/${props.author_id}`} > - <UserName>{props.name}</UserName> - </UserLink> + <Link to={`/usuario-publico/${props.author_id}`} contrast={props.contrast}> + <UserName contrast={props.contrast}>{props.name}</UserName> + </Link> : <CircularProgress /> } @@ -58,15 +59,10 @@ const UserAvatar = styled.img` const InfoText = styled.p` margin-bottom: 0; padding-bottom: 0; - color: #666; + color: ${props => props.contrast === "" ? "#666 !important" : "white !important"}; ` const UserName = styled.h2` margin-top: 10px; - color: #673ab7; -` -const UserLink = styled(Link)` - text-decoration: none; - &:focus, &:hover, &:visited, &:link, &:active { - text-decoration: none; - } + color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"}; ` diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js index dd4e3d079b837960dd76e8621f494404c71ecb47..e983107dc8e5f1fb5bac97fd9ce9716d175038c3 100644 --- a/src/Components/CollectionCardFunction.js +++ b/src/Components/CollectionCardFunction.js @@ -41,283 +41,291 @@ 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" } : {border: "1px solid white", 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" } : {border: "1px solid white", borderRadius : "5px", color :"#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 + style={props.contrast === "" ? {} : {color: "white"}} + name="customized-empty" + value={props.rating} + readOnly + emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />} + /> + } + + <Footer className={`${props.contrast}Text`}> + <Type> + <FolderIcon style={props.contrast === "" ? {} : {color: "white"}} /> + <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*/} + <Grid container> + <Grid item xs={2}></Grid> + <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}> + { + userFollowingCol ? + ( + [ + RenderFollowingButton() + ] + ) + : + ( + [ + RenderFollowButton() + ] + ) + } + </Grid> + <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-end" }}> + <ColCardPublicOptions + contrast={props.contrast} + id={props.id} + userFollowingCol={userFollowingCol} + handleLike={handleLike} + handleFollow={handleFollow} + liked={liked} + handleLogin={handleLogin} + currentUserId={state.currentUser.id} + /> + </Grid> + </Grid> + </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 +375,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 +409,6 @@ const StyledGrid = styled(Grid)` height : 136px; width 130px; background : #f9f9f9; - border : 1px solid #f4f4f4; - border-color : #f4f4f4; } ` @@ -423,12 +428,6 @@ 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; vertical-align : middle !important; background : transparent !important; @@ -441,22 +440,11 @@ 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 +454,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/CollectionDescription.js b/src/Components/CollectionDescription.js index 60de747f5bb7c17d9dff5d1a9acb2f69d8c95808..a8eedcbce66be688362e3976320c1dd9118b67b7 100644 --- a/src/Components/CollectionDescription.js +++ b/src/Components/CollectionDescription.js @@ -43,7 +43,9 @@ export default function CollectionDescription(props) { }, [props.collection_id]); return ( - <Grid container direction="column" justify="center" alignItems="center" spacing={5}> + <Grid container direction="column" justify="center" alignItems="center" spacing={5} + style={props.contrast === "" ? {color: "#666"} : {color: "white"}} + > <Grid item justify="center" @@ -59,6 +61,7 @@ export default function CollectionDescription(props) { > <Grid item> <CollectionReview + contrast={props.contrast} stars={props.stars} liked={props.liked} likes={props.likes} @@ -92,6 +95,5 @@ export default function CollectionDescription(props) { const Title = styled.h1` font-size: 2.5em; - color: rgb(102, 102, 102); text-align: center ` \ No newline at end of file diff --git a/src/Components/CollectionDowloadButton.js b/src/Components/CollectionDowloadButton.js index bda45946d26e9fb373ba79d5e006d4cacb5bb495..427b3464a833c94e60b0a76d55de7dc74b936767 100644 --- a/src/Components/CollectionDowloadButton.js +++ b/src/Components/CollectionDowloadButton.js @@ -96,6 +96,7 @@ const DowloadButton = (props) => { </Alert> </Snackbar> <DownloadButton + contrast={props.contrast} variant="outlined" color="primary" startIcon={<GetAppIcon fontSize="large" />} @@ -113,6 +114,10 @@ const ButtonText = styled.span` font-size: 1.2em; ` const DownloadButton = styled(Button)` + color: ${props => props.contrast === "" ? "#3f51b5 !important" : "yellow !important"}; + background-color: ${props => props.contrast === "" ? "white !important" : "black !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; + border: ${props => props.contrast === "" ? "1px solid #3f51b5 !important" : "1px solid white !important"}; padding-left: 10; padding-right: 10; width: 250px; diff --git a/src/Components/CollectionReview.js b/src/Components/CollectionReview.js index 0d94757b2dbd235e2b3b9ef2b8077707b8a9a357..c037071df59ed871b086fb9b905a90c3e5ecba6f 100644 --- a/src/Components/CollectionReview.js +++ b/src/Components/CollectionReview.js @@ -107,7 +107,7 @@ export default function CollectionReview(props) { }, [props]) return ( - <Grid container direction="column"> + <Grid container direction="column" style={props.contrast === "" ? {color: "#666"} : {color: "white"}}> <SnackBarComponent snackbarOpen={snackInfo.open} handleClose={handleCloseSnack} @@ -115,29 +115,31 @@ export default function CollectionReview(props) { text={snackInfo.text} color={snackInfo.color} /> - <Grid sm={12} container direction="row" alignItems="center"> + <Grid sm={12} container direction="row" alignItems="center" + style={{justifyContent: "center"}} + > <Grid item> <Rating + style={props.contrast === "" ? {} : {color: "white"}} name="customized-empty" value={Number(stars)} readOnly onClick={props.scrollToComment} - style={{ color: "#666" }} emptyIcon={<StarBorderIcon fontSize="inherit" />} /> </Grid> <Grid item justify="center" alignItems="center"> - <IconButton aria-label="like" onClick={handleLikeClick}> - {likes}<FavoriteIcon style={{ fill: liked ? "red" : null }} /> + <IconButton style={{color: "inherit"}} aria-label="like" onClick={handleLikeClick}> + {likes}<FavoriteIcon style={props.contrast === "" ? {fill: liked ? "red" : null} : {fill: "yellow"}} /> </IconButton> </Grid> </Grid> <Grid item sm={12}> <IconButton aria-label="report" - style={{ fontSize: 'small' }} + style={{ fontSize: 'medium' }} onClick={handleClickReport}> - <InfoIcon />Reportar erro ou abuso + <InfoIcon style={props.contrast === "" ? {color: "#666"} : {color: "white"}}/><span style={props.contrast === "" ? {color: "#666"} : {color: "yellow", textDecoration: "underline"}}>Reportar erro ou abuso</span> </IconButton> <ReportModal open={reportOpen} diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js index 0a318eda1d552232c9564e02b63fe7d6f08a18ed..9be8c975f8f4f2f3f28a60540db0288c7c9e0616 100644 --- a/src/Components/ContactButtons/FollowButton.js +++ b/src/Components/ContactButtons/FollowButton.js @@ -80,34 +80,27 @@ export default function FollowButton(props) { {/*----------------------------------------------------------------------------*/} { state.currentUser.id !== '' ? ( - <StyledButton contrast={props.contrast} onClick={() => handleFollow(props.followerID)}> - <PersonAddIcon style={props.contrast === "" ? { - fontSize: "24px", - display: "inline-block", - verticalAlign: "middle", - color: "#00bcd4" - } : { + <StyledButton className={`${props.contrast}LinkColor`} + style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} + onClick={() => handleFollow(props.followerID)}> + <PersonAddIcon style={{ fontSize: "24px", display: "inline-block", verticalAlign: "middle", - color: "white" }} /> SEGUIR </StyledButton> ) : ( - <StyledButton contrast={props.contrast} onClick={() => handleLogin(true)}> - <PersonAddIcon style={props.contrast === "" ? { - fontSize: "24px", - display: "inline-block", - verticalAlign: "middle", - color: "#00bcd4" - } : { + <StyledButton className={`${props.contrast}LinkColor `} + style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} + onClick={() => handleLogin(true)}> + <PersonAddIcon style={{ fontSize: "24px", display: "inline-block", verticalAlign: "middle", - color: "white" + }} /> SEGUIR </StyledButton> @@ -191,38 +184,15 @@ const NoIconButton = styled(Button)` ` const StyledButton = styled(Button)` + font-size : 14px important; + font-weight : 500 !important; + + .MuiSvgIcon-root { + font-size : 24px; + } + &:hover { - background-color: ${(props) => props.contrast === "" ? "#fff !important" : "rgba(255,255,0,0.24) !important"}; + color: rgb(107, 35, 142); } - background-color: ${(props) => (props.contrast === "" ? "#fff !important" : "black !important")}; - color: ${(props) => (props.contrast === "" ? "#00bcd4 !important" : "yellow !important")}; - border: ${(props) => (props.contrast === "" ? "1px solid #00bcd4 !important" : "1px solid white !important")}; - text-decoration: ${(props) => (props.contrast === "" ? "none !important" : "underline !important")}; - font-size : 14px !important; - display : inline-block !important; - position : relative !important; - cursor : pointer !important; - height : 36px !important; - min-width : 88px !important; - line-height : 36px !important; - vertical-align : middle !important; - -webkit-box-align : center !important; - -webkit-align-items : center !important; - -ms-grid-row-align : center !important; - align-items : center !important; - text-align : center !important; - border-radius : 3px !important; - -webkit-user-select : none !important; - -moz-user-select : none !important; - -ms-user-select : none !important; - user-select : none !important; - padding : 0 6px !important; margin : 6px 8px !important; - white-space : nowrap !important; - text-transform : uppercase !important; - font-weight : 500 !important; - font-style : inherit !important; - font-variant : inherit !important; - font-family : inherit !important; - overflow : hidden !important; ` diff --git a/src/Components/ContactButtons/FollowersCountButton.js b/src/Components/ContactButtons/FollowersCountButton.js index bda34bbf553bb250f17475e5d1ea357865be5521..f40a03370a42794245592f7f76487f5c0f2f68bc 100644 --- a/src/Components/ContactButtons/FollowersCountButton.js +++ b/src/Components/ContactButtons/FollowersCountButton.js @@ -11,7 +11,7 @@ export default function FollowersCountButton (props) { } return ( - <FollowersButton contrast={props.contrast}> + <FollowersButton className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}LinkColor`}> {FollowerButtonSpan()} </FollowersButton> ) @@ -21,7 +21,6 @@ export default function FollowersCountButton (props) { const FollowersButton = styled(Button)` right : 0 !important; text-transform : none !important; - color: ${(props) => (props.contrast === "" ? "#666 !important" : "yellow !important")}; font-size : 13px !important; font-weight : 400 !important; box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important; @@ -31,7 +30,5 @@ const FollowersButton = styled(Button)` min-height : 36px !important; vertical-align : middle !important; text-align : center !important; - border: ${(props) => (props.contrast === "" ? "0 !important" : "1px solid white !important")}; border-radius : 3px !important; - background-color: ${(props) => (props.contrast === "" ? "#fff !important" : "black !important")}; ` diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js index 7d60218a7e9754211a1431a0ecb271b76339e25f..229f5e44f4eb8dec105371f6e4e8787c60be9c76 100644 --- a/src/Components/ContactButtons/FollowingButton.js +++ b/src/Components/ContactButtons/FollowingButton.js @@ -19,7 +19,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React, { useState } from 'react' import styled from 'styled-components' import Button from '@material-ui/core/Button'; -import FollowingIcon from '../../img/how_to_reg-24px.png' +import GroupIcon from '@material-ui/icons/Group'; import ModalConfirmarUnfollow from '../ModalConfirmarUnfollow.js' import { putRequest } from '../HelperFunctions/getAxiosConfig' @@ -55,6 +55,7 @@ export default function FollowingButton(props) { /> <StyledButton contrast={props.contrast} + className={`${props.contrast}LinkColor`} onMouseOver={() => toggleFollowingHover(true)} onMouseLeave={() => toggleFollowingHover(false)} onClick={() => handleUnfollowPartOne(props.followedID)} @@ -63,14 +64,24 @@ export default function FollowingButton(props) { followingHover ? ( [ - <span>DEIXAR DE SEGUIR</span> + <StyledButton className={`${props.contrast}LinkColor`} + style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"white", backgroundColor: "#00bcd4"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} + > + DEIXAR DE SEGUIR + </StyledButton> ] ) : ( [ - <> - <img src={FollowingIcon} alt='ícone seguindo' /><span>Seguindo</span> - </> + <StyledButton className={`${props.contrast}LinkColor`} + style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"white", backgroundColor: "#00bcd4"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} + > + <GroupIcon style={{ + fontSize: "24px", + display: "inline-block", + verticalAlign: "middle", + }} />SEGUINDO + </StyledButton> ] ) } @@ -133,47 +144,15 @@ export function NoIconFollowing(props) { export const StyledButton = styled(Button)` - background-color: ${(props) => (props.contrast === "" ? "#00bcd4 !important" : "black !important")}; - color: ${(props) => (props.contrast === "" ? "#fff !important" : "yellow !important")}; - display : inline-block !important; - position : relative !important; - cursor : pointer !important; - min-height : 36px !important; - min-width : 88px !important; - line-height : 36px !important; - vertical-align : middle !important; - -webkit-box-align : center !important; - -webkit-align-items : center !important; - -ms-grid-row-align : center !important; - align-items : center !important; - text-align : center !important; - border-radius : 3px !important; - -webkit-user-select : none !important; - -moz-user-select : none !important; - -ms-user-select : none !important; - user-select : none !important; - border: ${(props) => (props.contrast === "" ? "0 !important" : "1px solid white !important")}; - padding : 0 6px !important; - margin : 6px 8px !important; - white-space : nowrap !important; - text-transform : uppercase !important; + font-size : 14px important; font-weight : 500 !important; - font-size : 14px !important; - font-style : inherit !important; - font-variant : inherit !important; - font-family : inherit !important; - text-decoration: ${(props) => (props.contrast === "" ? "none !important" : "underline !important")}; - overflow : hidden !important; - &:hover { - background-color: ${(props) => props.contrast === "" ? "#fff !important" : "rgba(255,255,0,0.24) !important"}; - color: ${(props) => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"}; - border: ${(props) => props.contrast === "" ? "1px solid #00bcd4 !important" : "1px solid white !important"}; + + .MuiSvgIcon-root { + font-size : 24px; } - img { - height : 24px; - display : inline-block; - vertical-align : middle; - color : #fff !important; + + &:hover { + color: rgb(107, 35, 142); } ` diff --git a/src/Components/ContactCard.js b/src/Components/ContactCard.js index bacf2c87feb01ee0f5a236eda286391518314d6c..31f78db1bddf29dd59eba57a6143e14a2e6c461b 100644 --- a/src/Components/ContactCard.js +++ b/src/Components/ContactCard.js @@ -18,6 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React, { useState } from 'react'; import Card from '@material-ui/core/Card'; +import Grid from '@material-ui/core/Grid'; import CardContent from '@material-ui/core/CardContent'; import noAvatar from "../img/default_profile.png"; import CardMedia from '@material-ui/core/CardMedia'; @@ -28,20 +29,20 @@ import FollowingButton from './ContactButtons/FollowingButton.js' import FollowersCountButton from './ContactButtons/FollowersCountButton.js' import { Link } from 'react-router-dom'; -export default function ImgMediaCard(props) { +export default function ContactCard(props) { const [followedBoolean, setFollowedBoolean] = useState(props.followed) const toggleFollowed = () => { setFollowedBoolean(!followedBoolean) } return ( <StyledCard> - <CardDiv> + <CardDiv className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}Text`}> <CardAreaDiv> {/*Top part of contat card (background image, number of followers and avatar)*/} <Header> <StyledCardMedia image={props.cover}> <div style={{ display: "flex", backgroundColor: "inherit", float: "right" }}> <Link to={props.href} style={{textDecoration : "none"}}> - <FollowersCountButton followCount={props.follow_count} /> + <FollowersCountButton contrast={props.contrast} followCount={props.follow_count} /> </Link> <Link to={props.href}> <AvatarDiv> @@ -54,52 +55,63 @@ export default function ImgMediaCard(props) { </Header> {/*Rest of the card content. Button to be rendered depends on whether the contact is followed by the user*/} - <CardContent> + <CardContent style={{height: "148px", padding: "0", bottom: "0"}}> <UserInfo> - <Link to={props.href}> + <Link to={props.href} className={`${props.contrast}LinkColor`}> <p className="p1"> {props.name} </p> </Link> - <Link to={props.href}> + <Link to={props.href} className={`${props.contrast}LinkColor`}> <span style={{ fontSize: "14px", fontWeight: "normal" }}> <b>{props.numCollections}</b> {props.numCollections !== 1 ? "Coleções" : "Coleção"} | <b>{props.numLearningObjects}</b> {props.numLearningObjects !== 1 ? "Recursos" : "Recurso"} </span> </Link> - - <div style={{ display: "flex", justifyContent: "center" }}> - { - followedBoolean ? - ( - <React.Fragment> + </UserInfo> + </CardContent> + <CardContent style={{padding: "0"}}> + <Grid container> + <Grid item xs={2}></Grid> + { + followedBoolean ? + ( + <> + <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}> <FollowingButton + contrast={props.contrast} followedID={props.followerID ? props.followerID : props.followedID} toggleFollowed={toggleFollowed} /> - + </Grid> + <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-start" }}> <Options + contrast={props.contrast} followableID={props.followerID ? props.followerID : props.followedID} followed={followedBoolean} toggleFollowed={toggleFollowed} /> - </React.Fragment> - ) - : - ( - <React.Fragment> + </Grid> + </> + ) + : + ( + <> + <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}> <FollowButton + contrast={props.contrast} followerID={props.followedID ? props.followedID : props.followerID} toggleFollowed={toggleFollowed} /> - + </Grid> + <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-start" }}> <Options + contrast={props.contrast} followableID={props.followedID ? props.followedID : props.followerID} followed={followedBoolean} toggleFollowed={toggleFollowed} /> - </React.Fragment> - ) - } - - </div> - </UserInfo> + </Grid> + </> + ) + } + </Grid> </CardContent> </CardAreaDiv> </CardDiv> @@ -123,10 +135,8 @@ export const CardAreaDiv = styled.div` margin : 0 auto; ` export const CardDiv = styled.div` - background-color : #fff; text-align : start; font-family : 'Roboto', sans serif; - color : #666; ` /*----------------------------------------------------------------------------*/ @@ -135,7 +145,7 @@ export const CardDiv = styled.div` /*Override Material UI styling -----------------------------------------------*/ const StyledCardMedia = styled(CardMedia)` height : 100%; - width : 100%; + width : 270.5px; background-size : cover; background-position : center; @@ -155,10 +165,7 @@ const StyledCard = styled(Card)` const UserInfo = styled.div` text-align : center; margin-top : 50px; - color : #666; - a { - text-decoration : none !important; color : #666; } diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js index 2cf3555c6ac3cae3da3cb7590ae2d149653391e4..76c5d05ee47bc35067d89940dbd156691398599a 100644 --- a/src/Components/ContactCardOptions.js +++ b/src/Components/ContactCardOptions.js @@ -107,8 +107,8 @@ export default function SimpleMenu(props) { {...props}/> } <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 className={`${props.contrast}BackColor ${props.contrast}LinkColor ${props.contrast}Text`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}> + <MoreVertIcon/> </ButtonNoWidth> <Menu id="simple-menu" @@ -117,30 +117,30 @@ export default function SimpleMenu(props) { open={Boolean(anchorEl)} onClose={handleClose} > - <StyledMenuItem onClick={handleClose}> + <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleClose}> <Link to={"/usuario-publico/" + props.followableID}> - <ListItemIcon><OpenIcon /></ListItemIcon>Abrir + <ListItemIcon className={`${props.contrast}LinkColor`}><OpenIcon /></ListItemIcon>Abrir </Link> </StyledMenuItem> { props.followed ? ( - <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}> - <ListItemIcon><ReportIcon /></ListItemIcon>Deixar de Seguir + <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}> + <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Deixar de Seguir </StyledMenuItem> ) : ( state.currentUser.id !== '' ? ( - <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}> - <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir + <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}> + <ListItemIcon className={`${props.contrast}LinkColor`}><PersonAddIcon /></ListItemIcon>Seguir </StyledMenuItem> ) : ( - <StyledMenuItem onClick={() => {handleLogin(props.followableID)}}> - <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir + <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleLogin(props.followableID)}}> + <ListItemIcon className={`${props.contrast}LinkColor`}><PersonAddIcon /></ListItemIcon>Seguir </StyledMenuItem> ) ) @@ -148,14 +148,14 @@ export default function SimpleMenu(props) { { state.currentUser.id !== '' ? ( - <StyledMenuItem onClick={() => {handleModal(true); handleClose()}}> - <ListItemIcon><ReportIcon /></ListItemIcon>Reportar + <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleModal(true); handleClose()}}> + <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Reportar </StyledMenuItem> ) : ( - <StyledMenuItem onClick={() => {handleLogin(true)}}> - <ListItemIcon><ReportIcon /></ListItemIcon>Reportar + <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleLogin(true)}}> + <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Reportar </StyledMenuItem> ) } @@ -191,12 +191,11 @@ const ButtonNoWidth = styled(Button)` ` const StyledMenuItem = styled(MenuItem)` - color : #666 !important; + background-color: ${props => props.contrast === "" ? "white" : "black"} !important; .MuiSvgIcon-root { vertical-align : middle !important; } a { - text-decoration : none !important; - color : #666 !important; + color : inherit !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/FollowCollectionButton.js b/src/Components/FollowCollectionButton.js index e89f8901c0e586124c99df453dc70ac627027f63..666c49d96c16f4973a5ca4d2232222ac0884e0c6 100644 --- a/src/Components/FollowCollectionButton.js +++ b/src/Components/FollowCollectionButton.js @@ -188,8 +188,8 @@ export default function FollowCollectionButton(props) { color={snackInfo.color} /> <FollowButton + contrast={props.contrast} variant={variant} - color="primary" startIcon={icon} size="small" onMouseEnter={handleMouseEnter} @@ -219,6 +219,10 @@ const ButtonText = styled.span` font-size: 1.2em; ` const FollowButton = styled(Button)` + color: ${props => props.contrast === "" ? "white !important" : "yellow !important"}; + background-color: ${props => props.contrast === "" ? "#3f51b5 !important" : "black !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; + border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"}; padding-left: 10; padding-right: 10; width: 250px; 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..790a5de654131eadf352d4cfd36999292dc11585 100644 --- a/src/Components/MaterialCard.js +++ b/src/Components/MaterialCard.js @@ -41,40 +41,42 @@ 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" + style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }} endIcon={<ExpandMoreRoundedIcon />} > @@ -83,7 +85,8 @@ export default function MaterialCard(props) { </Link> : <Button - color="secondary" + className={`${props.contrast}LinkColor`} + style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }} endIcon={<ExpandMoreRoundedIcon />} onClick={HandleButtonPressed} > @@ -101,7 +104,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/MenuBar.js b/src/Components/MenuBar.js index 7a2ceb13f9cb81704afbb5d3d9ff98b3a468195d..7cb8c6d998af016f49feed4db55e13fafc9a253b 100644 --- a/src/Components/MenuBar.js +++ b/src/Components/MenuBar.js @@ -44,7 +44,7 @@ export const ButtonStyled = styled(Button)` text-transform: capitalize !important; margin : 0 8px !important; font-weight : normal !important; - color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"}; + color: ${props => props.contrast === "" ? "black !important" : "yellow !important"}; text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; ` @@ -52,7 +52,8 @@ const ButtonPublicarRecurso = styled(Button)` font-family : 'Roboto', sans serif; box-shadow : none !important; border: ${props => props.contrast === '' ? "1px transparent solid" : "1px white solid !important"}; - background-color : #ff7f00 !important; + background-color: ${(props) => props.contrast === "" ? "#ff7f00 !important" : "black !important"}; + color: white !important; align-content : center; font-weight : 500 !important; text-transform: capitalize !important; @@ -68,7 +69,7 @@ const ButtonPublicarRecurso = styled(Button)` ` const IconSearchStyled = styled(IconSearch)` - color: #16b8dd; + color: ${props => props.contrast === "" ? "#16b8dd !important" : "white !important"}; ` const ImageStyled = styled.img` height: 50px; @@ -93,8 +94,6 @@ const Left = styled.span` export const ButtonPubRecursoStyled = styled(Button)` font-weight : 500 !important; - border : 1.5px #666 solid !important; - color: #666; box-shadow: none; margin : 0 8px !important; font-weight : normal !important; @@ -173,12 +172,12 @@ export default function MenuBar(props) { <Dropdown name="Sobre" items={menuSobre} /> <Dropdown name="Ajuda" items={menuAjuda} /> <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" > - <ButtonStyled className={`${state.contrast}LinkColor`} >Educação Conectada</ButtonStyled> + <ButtonStyled contrast={state.contrast} >Educação Conectada</ButtonStyled> </a> {/*<Link to="/loja"> <ButtonStyled>Lojinha</ButtonStyled> </Link>*/} - <ButtonStyled className={`${state.contrast}LinkColor`} onClick={props.openSearchBar} ><IconSearchStyled className={`${state.contrast}IconColor`} />Buscar</ButtonStyled> + <ButtonStyled contrast={state.contrast} onClick={props.openSearchBar} ><IconSearchStyled contrast={state.contrast}/>Buscar</ButtonStyled> </Left> <Right> @@ -188,9 +187,9 @@ export default function MenuBar(props) { <> <div style={{ boxSizing: "border-box" }}> <Link to="/termos-publicar-recurso"> - <ButtonPublicarRecurso contrast={state.contrast} className={`${state.contrast}BackColor`}> - <CloudUploadIcon className={`${state.contrast}IconColor`} style={{ color: "white", marginLeft: "0" }} /> - <span className={`${state.contrast}LinkColor`} style={{ color: "#fff", textAlign: "center", alignSelf: "center", fontWeight: "500" }} > + <ButtonPublicarRecurso contrast={state.contrast} className={`${state.contrast}LinkColor`}> + <CloudUploadIcon className={`${state.contrast}IconColor`} style={{ marginLeft: "0" }} /> + <span style={{textAlign: "center", alignSelf: "center", fontWeight: "500" }} > PUBLICAR RECURSO </span> </ButtonPublicarRecurso> @@ -207,9 +206,9 @@ export default function MenuBar(props) { ) : ( <React.Fragment> - <ButtonPubRecursoStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled> - <ButtonStyled className={`${state.contrast}LinkColor`} onClick={props.openLogin}><ExitToAppIcon className={`${state.contrast}IconColor`} style={{ color: "#00bcd4" }} />Entrar</ButtonStyled> - <ButtonStyled className={`${state.contrast}LinkColor`} onClick={props.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled> + <ButtonPubRecursoStyled contrast={state.contrast} className={`${state.contrast}LinkColor ${state.contrast}Border`} onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled> + <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openLogin}><ExitToAppIcon className={`${state.contrast}IconColor`} style={{ color: "#00bcd4" }} />Entrar</ButtonStyled> + <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled> </React.Fragment> ) } 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..fe74faaf51718b3332a1c9bfb69e32fdd4ba64de 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,25 +154,25 @@ 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> <Rating + style={props.contrast === "" ? {} : {color: "white"}} 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,24 +182,29 @@ 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> - <div style={{ display: "flex", height: "100%" }}> - <ButtonGuardarColecao thumb={props.thumbnail} title={props.title} learningObjectId={props.id} - /> - </div> - <ResourceCardOptions - learningObjectId={props.id} - downloadableLink={props.downloadableLink} - thumb={props.thumbnail} - title={props.title} - handleLogin={handleLogin} - /> + <CardReaFooter className={`${props.contrast}BackColor`}> + <Grid container> + <Grid item xs={2}></Grid> + <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}> + <ButtonGuardarColecao contrast={props.contrast} thumb={props.thumbnail} title={props.title} learningObjectId={props.id}/> + </Grid> + <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-end" }}> + <ResourceCardOptions + contrast={props.contrast} + learningObjectId={props.id} + downloadableLink={props.downloadableLink} + thumb={props.thumbnail} + title={props.title} + handleLogin={handleLogin} + /> + </Grid> + </Grid> </CardReaFooter> </CardDiv> </StyledCard> @@ -217,7 +223,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 +233,6 @@ export const TagContainer = styled(Grid)` overflow : hidden; padding : 1px 8px; border-radius : 10px; - color : #666; font-size : 11px; } ` @@ -263,7 +267,6 @@ export const AvatarDiv = styled(Grid)` ` const SlideContentDiv = styled.div` - background-color : #ff9226; ${'' /* padding : 10px; */} width : 272.5px; height : 189px; @@ -274,8 +277,6 @@ const CardReaFooter = styled.div` height : 60px; display : flex; justify-content : space-between; - border-top : 1px solid #e5e5e5; - border-bottom : 1px solid #e5e5e5; align-items : center; padding : 0 15px 0 15px; ` @@ -308,7 +309,6 @@ export const LikeCounter = styled.div` .btn-like { padding : 0 !important; - background-color : #fff !important; border : 0 !important; min-width : min-content; } @@ -346,7 +346,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 +394,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 +401,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..6d0e093d7adc4d962d5178217a56813e50bb3602 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,61 +115,58 @@ 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 ${props.contrast}Text`} /> </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 className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleClose}> + <Link to={"/recurso/" + props.learningObjectId}> + <ListItemIcon className={`${props.contrast}LinkColor`}><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 className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}> + <ListItemIcon className={`${props.contrast}LinkColor`}><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia + </StyledMenuItem> { props.downloadableLink && - <StyledMenuItem onClick={() => { enableDownload(); handleClose() }}> - <ListItemIcon><DownloadIcon /></ListItemIcon>Baixar + <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => { enableDownload(); handleClose() }}> + <ListItemIcon className={`${props.contrast}LinkColor`}><DownloadIcon /></ListItemIcon>Baixar </StyledMenuItem> } - <StyledMenuItem onClick={handleShare}> - <ListItemIcon><ShareIcon /></ListItemIcon>Compartilhar + <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleShare}> + <ListItemIcon className={`${props.contrast}LinkColor`}><ShareIcon /></ListItemIcon>Compartilhar </StyledMenuItem> - <StyledMenuItem onClick={handleGuardar}> - <ListItemIcon><AddIcon /></ListItemIcon>Guardar + <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleGuardar}> + <ListItemIcon className={`${props.contrast}LinkColor`}><AddIcon /></ListItemIcon>Guardar </StyledMenuItem> - <StyledMenuItem onClick={() => { handleReport() }}> - <ListItemIcon><ReportIcon /></ListItemIcon>Reportar + <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => { handleReport() }}> + <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Reportar </StyledMenuItem> </Menu> @@ -185,9 +181,6 @@ 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 +198,11 @@ const ButtonNoWidth = styled(Button)` ` const StyledMenuItem = styled(MenuItem)` - color : #666 !important; + background-color: ${props => props.contrast === "" ? "white" : "black"} !important; .MuiSvgIcon-root { vertical-align : middle !important; } a { - text-decoration : none !important; - color : #666 !important; + color: inherit !important; } ` diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js index e32176c7166f62820cf88517c7f8f5dc8faf503c..e8dc0989eee3da3281e46e874d327e79c39215ef 100644 --- a/src/Components/ResourceList.js +++ b/src/Components/ResourceList.js @@ -124,7 +124,7 @@ export default function ResourceList(props) { <ResourceListContainer> <Grid container direction="row" justify="space-around" alignItems="center"> <Grid item> - <Title> + <Title contrast={props.contrast}> {props.resources.length ? props.resources.length + " recurso" + (props.resources.length === 1 ? "" : "s") : "Carregando coleção"} @@ -132,19 +132,19 @@ export default function ResourceList(props) { </Grid> <Grid item> <Button color="primary" onClick={() => setSelectable(!selectable)}> - <PanelButtonText> + <PanelButtonText contrast={props.contrast}> {selectable ? "Desativar" : "Ativar"} seleção </PanelButtonText> </Button> </Grid> <Grid item> <Button - color="primary" + style={props.contrast === "" ? {color: "#3f51b5", border: "1px solid #3f51b5"} : {color: "white", border: "1px solid white"}} variant="outlined" startIcon={<GetAppIcon fontSize="large" />} onClick={handleDownloadSelection} > - <PanelButtonText>baixar seleção</PanelButtonText> + <PanelButtonText contrast={props.contrast}>baixar seleção</PanelButtonText> </Button> </Grid> </Grid> @@ -153,6 +153,7 @@ export default function ResourceList(props) { return ( <ResourceGrid item key={card.title}> <ResourceCardFunction + contrast={props.contrast} avatar={card.avatar} id={card.id} thumbnail={card.thumbnail} @@ -169,8 +170,8 @@ export default function ResourceList(props) { /> {selectable ? (<SelectButton + contrast={props.contrast} variant="outline" - color="primary" startIcon={checkBoxIcon(selected[props.resources.indexOf(card)])} onClick={() => updateSelected(props.resources.indexOf(card))} > @@ -205,15 +206,19 @@ const ResourceListContainer = styled.div` margin-right: 20; ` const Title = styled.p` - color: rgb(102, 102, 102); + color: ${props => props.contrast === "" ? "#666 !important" : "white !important"}; font-size: 2em; font-weigth: 300; ` const SelectButton = styled(Button)` width: 100%; + color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; ` const PanelButtonText = styled.span` font-weight: 900; + color: ${props => props.contrast === "" ? "#3f51b5 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"}; ` const ResourceGrid = styled(Grid)` padding-right: 7px; diff --git a/src/Components/SearchPageComponents/CollectionTemplate.js b/src/Components/SearchPageComponents/CollectionTemplate.js index 923af661bc27adef295c55f5fe63c84e50b0387c..ec0856eb2f733c7b02fb05cb9ed1a43e11f47f98 100644 --- a/src/Components/SearchPageComponents/CollectionTemplate.js +++ b/src/Components/SearchPageComponents/CollectionTemplate.js @@ -34,6 +34,7 @@ export default function ResourceTemplate({ isLoading, resources, totalResources, resources.map((card) => { return <Grid item key={new Date().toISOString() + card.id} > <CollectionCardFunction + contrast={contrast} name={card.name} tags={card.tags} rating={card.review_average} diff --git a/src/Components/SearchPageComponents/ResourceTemplate.js b/src/Components/SearchPageComponents/ResourceTemplate.js index 063e61780deafcf8b895524b4f3db8a40932b930..ce1057f4ffef793f4d494fc91dc68ffae67ec933 100644 --- a/src/Components/SearchPageComponents/ResourceTemplate.js +++ b/src/Components/SearchPageComponents/ResourceTemplate.js @@ -34,6 +34,7 @@ export default function ResourceTemplate({ isLoading, resources, totalResources, resources.map((card) => { return <Grid item key={new Date().toISOString() + card.id} > <ResourceCardFunction + contrast={contrast} avatar={card.publisher ? card.publisher.avatar : ""} id={card.id} thumbnail={card.thumbnail} diff --git a/src/Components/SearchPageComponents/UserTemplate.js b/src/Components/SearchPageComponents/UserTemplate.js index 49ce62831c4136108609052ad78ac933771339b3..66720a688828126c16c01ec43f04c4d6096a9b96 100644 --- a/src/Components/SearchPageComponents/UserTemplate.js +++ b/src/Components/SearchPageComponents/UserTemplate.js @@ -34,6 +34,7 @@ export default function ResourceTemplate({ isLoading, resources, totalResources, resources.map((card) => { return <Grid item key={new Date().toISOString() + card.id} > <ContactCard + contrast={contrast} name={card.name} avatar={card.avatar ? apiDomain + card.avatar : null} cover={card.cover ? apiDomain + card.cover : null} 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/PanelComponents/TemplateColecao.js b/src/Components/TabPanels/PanelComponents/TemplateColecao.js index 2ccdd707cc5fc60df74e099997b2b60fab906835..26eb87507d6b4b1ebe37e2e2baadec8b8fc6e4c3 100644 --- a/src/Components/TabPanels/PanelComponents/TemplateColecao.js +++ b/src/Components/TabPanels/PanelComponents/TemplateColecao.js @@ -31,6 +31,7 @@ export default function PanelTemplateColecao(props) { if (followerBoolean) { return ( <CollectionCardFunction + contrast={props.contrast} name={card.name} collections={card.followable.collection_items} rating={card.followable.review_average} @@ -52,6 +53,7 @@ export default function PanelTemplateColecao(props) { else { return ( <CollectionCardFunction + contrast={props.contrast} name={card.name} tags={card.tags} rating={card.review_average} diff --git a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js index 98e2d50e254d3b97dabd16bbf3f1485cbde3b525..c6585ef1a5275d26dd2fbdbec3e907bd810b48de 100644 --- a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js +++ b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js @@ -58,6 +58,7 @@ export default function Template(props) { props.sliceArr.map((card) => <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}> <ResourceCardFunction + contrast={props.contrast} avatar={card.submitter.avatar} id={card.learning_object.id} thumbnail={card.learning_object.thumbnail} diff --git a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js index dc8f2b75a9fe977e6fa77ac3adb640ee8f366b44..c7e4cd6ed1afb7ce5c5b9c6e97462d7122c244ae 100644 --- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js +++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js @@ -60,6 +60,7 @@ export default function Template(props) { props.slice.map((card) => <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}> <ResourceCardFunction + contrast={props.contrast} key={card.id} avatar={card.publisher.avatar} id={card.id} diff --git a/src/Components/TabPanels/PanelComponents/TemplateRede.js b/src/Components/TabPanels/PanelComponents/TemplateRede.js index 872675b8691ab8c83f0d9cc056eafe50be5d1d46..076d525e0f417265a86af4e2a6999bd730d62921 100644 --- a/src/Components/TabPanels/PanelComponents/TemplateRede.js +++ b/src/Components/TabPanels/PanelComponents/TemplateRede.js @@ -13,6 +13,7 @@ export default function PanelTemplateRede(props) { if (followerBoolean) { return ( <ContactCard + contrast={props.contrast} name={card.follower.name} avatar={card.follower.avatar !== undefined && card.follower.avatar !== "" ? apiDomain + card.follower.avatar : null} cover={card.follower.cover !== undefined && card.follower.cover !== "" ? apiDomain + card.follower.cover : null} @@ -28,6 +29,7 @@ export default function PanelTemplateRede(props) { else { return ( <ContactCard + contrast={props.contrast} name={card.followable.name ? card.followable.name : null} avatar={card.followable.avatar !== undefined && card.followable.avatar !== "" ? apiDomain + '/' + card.followable.avatar : null} cover={card.followable.cover !== undefined && card.followable.cover !== "" ? apiDomain + card.followable.cover : null} diff --git a/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js b/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js index 2a489ac6808bad38d577ef87125d56e60bcd4f7e..d9adc97e4e36f878a07caa0a0b15e669999f6663 100644 --- a/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js +++ b/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js @@ -55,6 +55,7 @@ export default function LastLearnObjs(props) { props.learningObjs.slice(0, 4).map((card) => <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}> <ResourceCardFunction + contrast={contrast} avatar={card.publisher.avatar} id={card.id} thumbnail={card.thumbnail} 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/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js index 79b37059edba874bdfe5dad0b4dbb6c74ca3e671..7db46ecc2b83679f54fa5c8cbfee22bfb1414c11 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js +++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js @@ -270,6 +270,7 @@ function Tentativa(props) { props.sliceArr.map((card) => <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}> <CollectionCardFunction + contrast={props.contrast} name={card.name} tags={card.tags} rating={card.review_average} 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; } diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js index 0c60a9603ce4290798e5598267e0cd8f9bb16372..a894486a65a74b25f6a1560fc89c368f3ef04c83 100644 --- a/src/Pages/CollectionPage.js +++ b/src/Pages/CollectionPage.js @@ -18,7 +18,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React, { useRef, useState, useEffect, useContext } from 'react'; import { Grid } from '@material-ui/core'; import CollectionAuthor from '../Components/CollectionAuthor.js'; -import VerticalRuler from '../Components/VerticalRuler.js'; import CollectionDescription from '../Components/CollectionDescription.js'; import ResourceList from '../Components/ResourceList.js'; import CollectionCommentSection from '../Components/CollectionCommentSection.js'; @@ -56,7 +55,7 @@ export default function CollectionPage(props) { } if (error) - return <CollectionNotFound> + return <CollectionNotFound contrast={state.contrast}> <Grid container direction='column' justify='center' alignItems='center' spacing={1}> <Grid item> <p className="not-found"> @@ -73,16 +72,16 @@ export default function CollectionPage(props) { Voltar para a busca de coleções. </Button> </Link> - </Grid> + </Grid> </Grid> </CollectionNotFound > if (loading) return <LoadingSpinner text="Carregando coleção..." /> else return ( - <> + <div style={state.contrast === "" ? {backgroundColor: "white"} : {backgroundColor: "black"}}> <BreadCrumbsDiv> - <StyledBreadCrumbs> + <StyledBreadCrumbs contrast={state.contrast}> <Link to="/">Página Inicial</Link> <span>Coleções</span> </StyledBreadCrumbs> @@ -90,6 +89,7 @@ export default function CollectionPage(props) { <Grid container direction="row" justify="center" alignItems="center"> <Grid item md={3}> <CollectionAuthor + contrast={state.contrast} author_id={collection.owner.id ? collection.owner.id : 0} name={collection.owner.name ? collection.owner.name : ""} imgsrc={collection.owner.avatar ? apiDomain + collection.owner.avatar : noAvatar} /> @@ -98,6 +98,7 @@ export default function CollectionPage(props) { <Grid item md={5}> <CollectionDescription + contrast={state.contrast} stars={collection.review_average} likes={collection.likes_count} liked={collection.liked} @@ -108,22 +109,24 @@ export default function CollectionPage(props) { <Grid item md={3}> <DowloadButton + contrast={state.contrast} id={collection_id} /> <div style={{ height: 12 }}></div> <FollowCollectionButton + contrast={state.contrast} followed={collection.followed} user_id={state.currentUser.id} collection_id={collection_id} /> </Grid> </Grid> - <VerticalRuler width={1} height={100} color="rgb(238, 238, 238)" /> - - <Grid container justify="center" style={{ backgroundColor: '#f4f4f4' }}> + <Grid container justify="center" style={state.contrast === "" ? {backgroundColor: "#f4f4f4"} : {backgroundColor: "black"}}> {/* <Grid item xs={1}/> */} <Grid item xs={10}> - <ResourceList resources={ + <ResourceList + contrast={state.contrast} + resources={ collection.collection_items ? collection.collection_items.map(i => { return { @@ -154,7 +157,7 @@ export default function CollectionPage(props) { /> </Grid> </Grid> - </> + </div> ); } @@ -162,15 +165,17 @@ const StyledBreadCrumbs = styled(Breadcrumbs)` display: flex; justify-content: flex-start; span { - color: #a5a5a5; + color: ${props => props.contrast === "" ? "#666 !important" : "white !important"}; } a { - color: #00bcd4; - text-decoration: none; + color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; } `; const CollectionNotFound = styled.div` + background-color: ${props => props.contrast === "" ? "" : "black !important"}; + color: ${props => props.contrast === "" ? "#666 !important" : "white !important"}; margin: 1em; .not-found{ @@ -182,8 +187,10 @@ const CollectionNotFound = styled.div` } .back-button{ - background-color: #673ab7; - color: whitesmoke; + background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"}; + border: ${props => props.contrast === "" ? "none" : "1px solid white !important"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; + color: ${props => props.contrast === "" ? "whitesmoke" : "yellow !important"}; } .link{